@charset "UTF-8";
/* 
Theme URI: https://www.marcatkins.com
This theme, its design and all files included are protected under copyright laws. It is not a free theme.
Author: Françoise Lacroix

modifications to Bootstrap v4.6.2
*/

/* GLOBAL */

:root{
  --font-body: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-size: 16px;
  --line: 1.2;                  /* line height */
  --measure: 68ch;              /* max readable width */
	
	/* RHYTHM REFERENCE
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
*/

  /* Neutrals (warm) */
  --ink-100: #F9F8F7;   /* subtle backgrounds */
  --ink-150: #F0EEED;   /* hairline fills */
  --ink-200: #E8E5E3;   /* borders on light */
  --ink-300: #D0CECE;   /* light text, dividers span lines */

  --ink-500: #9A928E;   /* default link/nav (warmer than #979696) */
  --ink-600: #807874;   /* muted body, small labels */
  --ink-700: #5C5552;   /* hover/focus (your chosen warmer grey) */
  --ink-800: #3B3F41;   /* body text (keep) */
  --ink-900: #252525;   /* headings */
  --ink-1000:#000000;   /* active/strong states */

  /* Semantic aliases 
	color: var(--heading);
	color: var(--text-muted); 
	color: var(--link);
	color: var(--link-hover);
	color: var(--nav);
	color: var(--ink-100);
	*/
  --text: var(--ink-800);
  --text-muted: var(--ink-600);
  --heading: var(--ink-900);
	
  --link: var(--ink-500);
  --link-hover: var(--ink-700);
	
  --nav: var(--ink-500);
  --nav-hover: var(--ink-700);
  --nav-active: var(--ink-1000);
  --bg: #fff;
  --bg-subtle: var(--ink-100); 
  --border: var(--ink-200);
  --hairline: rgba(0,0,0,.08); /* keep for very light rules if you like */
	
}

/* SPACING SCALE 

0	0		0px
1	0.25rem	4px
2	0.5rem	8px
3	1rem	16px
4	1.5rem	24px
5	3rem	48px

*/



html { 
	font-size: var(--font-size);
	scroll-behavior: smooth;
}
	


/* TYPOGRAPHY  */	

body { 
	line-height: var(--line); 
	font-family: var(--font-body); 
	color:var(--text);
	font-weight:300;
}

html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
	

.bg-light { background-color: var(--ink-100)!important; }

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
 color: var(--heading);
font-weight:200;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "liga" 1,"kern" 1;
}

/* Bootstrap 4.6.2 default heading sizes:
h1 → 2.5rem (≈ 40px)
h2 → 2rem (≈ 32px)
h3 → 1.75rem (≈ 28px)
h4 → 1.5rem (≈ 24px)
h5 → 1.25rem (≈ 20px)
h6 → 1rem (≈ 16px)
h1–h6: margin-bottom: 0.5rem, margin-top: 0, font-weight: 500, line-height: 1.2.
*/
h1 { font-size: 2rem;text-transform: uppercase;  }    /*  1.875rem - 30px */
h2 { font-size: 1.75rem;font-weight:300 }     /*  1.5rem; - 24px */
h3 { font-size: 1.25rem; }    /* 1.25 - 20px */
h4 { font-size: 1.125rem; }   /* 1.125rem - 18px */
h5 { font-size: 1rem; }       /* 16px (same as body) */



h1.secondary-h1 {
  font-size: clamp(1.25rem, 2vw + 1rem, 1.75rem);
  font-weight: 300;
  text-transform: capitalize;
  margin-bottom: 1rem;
}

h5.subtitle { margin-bottom:1.5rem}

p.sub-heading {  font-size: 1rem; color: var(--heading);}

p, ul, ol, figure, blockquote { margin: 0 0 1rem; }

p.small, .small {
  font-size:0.875rem;
}


/* Lead paragraph */
p.lead {
  font-size: clamp(1.125rem, 1vw + 1rem, 1.5rem);
  font-weight: 200;
  letter-spacing: clamp(0.012rem, 0.25vw, 0.02rem);
}


.text-muted {
	color: var(--text-muted); 
}

.intro-text {
  font-size: clamp(1.1rem, 1.8vw, 2rem);
  line-height: 1.3;
}


/* #LINKS */

a:hover,
a:focus,
a:active {
  text-decoration: none;
  outline: none
}

a {
text-decoration:none;
font-weight: 400;
color: var(--link);
transition: color 0.2s ease, border-color 0.2s ease;}	
a:focus, a:hover {
color: var(--link-hover);
cursor: pointer}
a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

ul,
ul.list-unstyled,
ul.list-spaced > li + li { margin-top: .4rem; } /* light gap */

/* Looser spacing for lists */
li,
dt,
dd,
p.list-spaced  {
  line-height: 1.6; 
}

.external-link {
  width: 0.9em;         /* scale relative to text size */
  height: auto;
  fill: currentColor;   /* inherit text/link colour */
  margin-left: 2px;     /* matches your old spacing */
  vertical-align: -10%; /* tweak baseline alignment */
}
.btn .external-link {color: inherit; fill: currentColor; } /* default */





/* LAYOUT */
main {
  padding: 1.75rem 0 0 0;  
  margin-bottom: 0;
}

/* On small phones (≈320px wide), padding is locked to 2.25rem.
Between 320px → 768px, the padding increases smoothly.
On tablet and up (≥768px) it stops growing and holds at 2.75rem.
The first section scales proportionally from 0.75rem → 1.25rem.*/
section {
  padding: clamp(2.25rem, 1.116vw + 1.9rem, 2.75rem) 0;
}

section:first-of-type {
  padding-top: clamp(0.75rem, 0.56vw + 0.5rem, 1.25rem);
}


hr { 
	margin:1.85714286em 0;height: 0px;border: none;border-top: 1px solid rgba(0,0,0,.08);
}

.border{border-color: var(--link);}
.border-top{border-color: var(--link);}



/* #Buttons */

/* Typography tweaks layered on top of Bootstrap */
.btn {
  font-size: 13px;     
  font-weight: 500;      
  letter-spacing: .1rem;  
  padding: 0.5rem 1.25rem;
	border-radius: 0;
 text-transform:uppercase;
	 min-width: 7rem; 
}
.btn-outline-dark {
  color: var(--ink-600);
  border-color: var(--ink-600);
background-color: #fff;
}
.btn-outline-dark:hover {
  color: var(--ink-500);
  background-color: #fff;
  border-color: var(--ink-500);
}






/* Arrow icon styling */
.btn .arrow-right-long {
  width: 1.3em;
  height: auto;
  fill: currentColor;
  margin-left: 8px;
  vertical-align: middle;
}



/* Logo */
/* Navbar brand logo */
/* Navbar brand logo */
.navbar-brand {
 --brand-height: clamp(36px, 8vw, 42px);   /* bigger on small screens, still capped */
  --brand-width: clamp(160px, 50vw, 240px); /* wide on phones, generous but capped */
  padding-top: 0;
  padding-bottom: 0;
  margin-right: 1.25rem;
  line-height: 1;
}

.navbar-brand img {
  display: block;
  height: auto;
  width: auto;
  max-height: var(--brand-height);
  max-width: var(--brand-width);
}

/* On desktops (≥992px), keep it generous */
@media (min-width: 992px) {
  .navbar-brand {
    --brand-height: clamp(40px, 5vw, 52px);
    --brand-width: clamp(200px, 20vw, 300px);
  }
}


/* STOP IMAGE DOWNLOAD*/

img {
  -webkit-user-drag: none;
  user-select: none;
}


/* HOME PAGE */

/* HERO */

#hero {
  position: relative;
  margin: 0;
  overflow: hidden;
}

#hero picture,
#hero img {
  display: block;
  width: 100%;
  height: clamp(360px, 52vh, 680px);
}

#hero img {
  object-fit: cover;
  object-position: 50% 50%; /* adjust focal point */
}

/* Content layer, hidden by default */
.hero-content {
  display: none;
  position: absolute;
  inset: 0;
   justify-content: flex-start; /* align to top  -  justify-content: center; to center */
   padding-top: 24vh; /* about 12% down */  
  align-items: center;
  text-align: center;
  color: #fff;

  z-index: 2;
}

/* Overlay, hidden by default */
#hero::before {
  content: "";
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.05);
  z-index: 1;
}

/* Show content + overlay from tablet size up */
@media (min-width: 768px) {
  .hero-content {
    display: flex;
    flex-direction: column;
  }

  #hero::before {
    display: block;
  }
}


/* Add this class to #hero when you want a fixed band */
.hero-fixed {
  position: relative;
  margin: 0;
  overflow: hidden;
}

.hero-fixed picture,
.hero-fixed img {
  display: block;
  width: 100%;
  height: clamp(360px, 60vh, 760px); /* phones → laptops */
}

.hero-fixed img {
  object-fit: cover;         /* fill and crop */
  object-position: 50% 40%;  /* adjust focal point */
}




.hero-content h1 {
 font-size: clamp(2.25rem, 4vw + 0.5rem, 3rem);
  line-height: 1.1;
  margin: 0.25em 0 0;
	color: #fff;

}

.hero-content p {
  font-size: clamp(1.25rem, 2.25vw + 0.25rem, 1.75rem);
  line-height: 1.4;
  margin: 0 0 0;
}


/* FEATURE TILES under the hero */

/* Maintain 3:2 aspect ratio for feature tiles */
.feature-tile {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.feature-tile img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}



/* GALLERY pages back / next links */
.gallery-nav {
  align-items: center;
}

.gallery-nav > div {
  display: flex;
  align-items: center;
}

@media (max-width: 767.98px) {
  .gallery-nav {
    gap: 0.5rem;
  }

}
	.gallery-nav .nav-link-next,
.gallery-nav .nav-link-prev {
  display: inline-flex;
  align-items: center;
	  justify-content: flex-end;
  line-height: 1;
  font-size: clamp(1rem, 0.2vw + 0.84rem, 1.25rem);
 color: var(--heading);
  text-decoration: none; /* no underline on link itself */
  padding: .5em 0;
}

.gallery-nav .nav-link-next .link-text,
.gallery-nav .nav-link-prev .link-text {
  text-decoration: none; /* no underline by default */
}

.gallery-nav .nav-link-next:hover .link-text,
.gallery-nav .nav-link-prev:hover .link-text {
  text-decoration: underline; /* underline text only on hover */
}

.gallery-nav .nav-link-next .fa,
.gallery-nav .nav-link-prev .fa {
  margin: 0 .25em;
}
.gallery-nav .arrow-right-long {
  width: 1.5em;   
  height: auto;
  fill: currentColor;  
  margin-left: 8px; 
  transform: translateY(0.1em); 
}

.gallery-nav .nav-link-next {
  padding-right: 0; /* ensures no internal shift */
}


/* WORKS */
/* LARGE SVG NEXT ARROW */
.nav-link-next {/* strip out BS 'button' default styling: */
	  justify-content: flex-start;
  background: none;
  border: none;
   padding: 0.25rem 0;
  margin: 0;
  cursor: pointer;
  line-height: 0; /* avoids odd vertical spacing */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.arrow {
	display: block;
  stroke: var(--ink-1000); /* link colour */
  stroke-width:3;
  vector-effect: non-scaling-stroke;
  transition: stroke 0.2s ease;
}

.nav-link-next:hover .arrow {
  stroke:var(--link)
}




/*== Breadcrumbs ==*/
.breadcrumb { 
	 font-size: 0.85rem;
color: #666;
	padding: 0 0 1rem;
 margin-bottom: 0;}


.breadcrumb-item {
  /* 14px → 15px */
  font-size: clamp(0.75rem, 0.2vw + 0.84rem, 0.875rem);
letter-spacing: 0.02em;
}

/* Divider colour and spacing */
.breadcrumb-item + .breadcrumb-item {
  padding-left: .5rem;
}
.breadcrumb-item + .breadcrumb-item::before {
  /* match item size */
  font-size: clamp(0.875rem, 0.2vw + 0.84rem, 0.9375rem);
  padding-right: .5rem;
  content: "/";
  color: #C8C2BD;
}

/* Breadcrumb hover underline */
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* Active breadcrumb item */
.breadcrumb-item.active { color:var(--ink-1000);  font-weight: 500;}



/* Bottom breadcrumb spacing when it follows a light section */
.section.bg-light + main nav[aria-label="Breadcrumb bottom" i],
.bg-light + main nav[aria-label="Breadcrumb bottom" i] {
  padding-top: 1.5rem !important; /* pt-4 */
  padding-bottom: 0 !important;    /* pb-0 */
}

/* Forgiving version if something sits in between */
.section.bg-light ~ main nav[aria-label="Breadcrumb bottom" i],
.bg-light ~ main nav[aria-label="Breadcrumb bottom" i] {
  padding-top: 1.5rem !important;
  padding-bottom: 0 !important;
}

@media (max-width: 767.98px) {
  .breadcrumb {
    color: #555;
    padding-bottom: 0.5rem;
  }

  .breadcrumb-item {
    letter-spacing: 0.01em;
  }
}



/* ========= Site-wide SECOND NAV ========= */
/* ==
Publications → centred, lighter contents nav
Commercial → left-aligned section nav, clean without a divider line
==*/
.second-nav { 
  margin: 0 0 1rem;
  padding: 0;
  text-align: center;
  font-size: 0.875rem;
}
.second-nav .list-inline{ margin:0; padding-left:0; }

/* spacing for each item */
.second-nav .list-inline-item {
  margin-right:0;
  margin-bottom: .5rem;    /* small vertical space if wrapping */

}
.second-nav .list-inline-item:last-child { margin-right: 0; }

/* COMMERCIAL: links to other pages (keep bottom border indicator) */
#page-commercial .second-nav a {
  color: var(--ink-1000);
  font-weight: 600;
  text-decoration: none;
  padding: 0 .1rem;
  letter-spacing: .05em;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, color .15s ease;
  white-space: nowrap;
}

#page-commercial .second-nav a:hover,
#page-commercial .second-nav a:focus {
  border-bottom-color: var(--link);
  color: var(--ink-1000);
  outline: 0;
}

#page-commercial .second-nav .active > a,
#page-commercial .second-nav a.active {
  border-bottom-color: currentColor;
  color: inherit;
  cursor: default;
}

/* permanent defaults for Commercial */
#page-commercial .second-nav { 
  margin-top: 0;            /* ensure no top margin here */
  margin-bottom: 1.25rem;   /* your chosen pause below */
  text-align: left;
  background: #fff;
  text-transform: uppercase;
}
#page-commercial .second-nav .list-inline { margin-top: 0; }

#page-commercial .second-nav .list-inline-item + .list-inline-item::before {
  content: "·";
  position: relative;
  top: 1px;              /* gentle nudge upwards */
  font-size: 1.25em;      /* a little bigger */
  line-height: 1.2;
  margin: 0 0.3rem;
  opacity: .5;
}


/* PUBLICATIONS: anchors within the same page (lighter style) */
#page-publications .second-nav { 
  background:#fff; 
  border-bottom:none; 
   margin-bottom: 1.25rem;   /* creates pause below nav */
}

#page-publications .second-nav .nav-link {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1rem;
  text-transform: uppercase;
  color: var(--ink-600);
  margin: 0.35rem 0.75rem;     /* spacing via margin so no wide underline */
  text-decoration: none;
  transition: color .2s, text-decoration .2s;
}

#page-publications .second-nav .nav-link:hover {
  color: var(--ink-500);
  text-decoration: underline;  /* underline only under text */
}

#page-publications .second-nav .nav-link.active {
  color: var(--ink-800);
  text-decoration: underline;
  cursor: default;
}



/* TWITTER/FACEBOOK SHARE BUTTONS -*/

.fb-share-button {margin-bottom:10px}


ul.share{text-align:right;clear:both}
ul.share li {display:inline;margin-left:10px;position:relative}
ul.share li.twit{top:8px}
ul.share li.pin-it{top:2px}




/* Masonry grid (works + commercial) */
.masonry { margin: 0 auto; }

.masonry-sizer { width: 100%; }
.masonry-gutter { width: 16px; }

.masonry-item { width: 100%; margin-bottom: 16px; }

/* ≥576px: 2 columns with 16px gutter */
@media (min-width: 576px){
  .masonry-sizer,
  .masonry-item { width: calc(50% - 10px); }
}

/* ≥992px: 3 columns with 16px gutter */
@media (min-width: 992px){
  .masonry-sizer,
  .masonry-item { width: calc((100% - 32px) / 3); } /* same as 33.333% - 10.666px */
}


/* ≥1200px: 4 columns */
@media (min-width: 1200px) {
  .masonry-sizer,
  .masonry-item {
    width: calc((100% - 48px) / 4);
  }
}



/* Stabilise image sizing so Masonry never measures 0 height */
.masonry-item img {
  display: block;
  width: 100%;
  height: auto;
}

/* Only if you position captions inside items */
.masonry-item { position: relative; }



/* Selected Works page */
.item-title {
  display: inline-block;
  font-size: 0.95rem;
  text-decoration: none;
  color: inherit;
}

.item-title:hover {
  text-decoration: underline;
}

.artwork-links {
  margin-top: 0.35rem;
  font-size: 0.9rem;
}

.artwork-links a {
  color: var(--ink-700);
}






/*== "Tiles" ==*/
/* == WORKS PAGE → bottom band styling == */
.item { position: relative; overflow: hidden; }
.item img { display: block; width: 100%; height: auto; }

/* Text band (works whether .item-text is a DIV or the H2 itself) */
/* Band applies everywhere except Commercial */
body:not(#page-commercial) .item-text,
body:not(#page-commercial) .item-text h2 {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: clamp(.5rem, 1vw + .25rem, .75rem) 1rem; /* vertical scales, horizontal fixed */
  background: rgba(0,0,0,.3);
 font-size: clamp(1.125rem, 2vw, 1.625rem); /* 18px → 28px */
  color: #F7F6F6;
  letter-spacing: clamp(0em, 0.02em + 0.1vw, 0.05em); /* scales gently with viewport */
  transition: background .15s ease, transform .15s ease;
}
/* Variant names: 'lighter' is less opaque; 'darker' is more opaque */
.item-text.lighter,
.item-text.lighter h2 { background: rgba(0,0,0,.2); }
.item-text.darker,
.item-text.darker h2 { background: rgba(0,0,0,.6); }

/* Hover + focus */
a.d-block .item { transition: transform .15s ease; }
a.d-block:hover .item,
a.d-block:focus-visible .item { transform: translateY(-2px); }

/* But the band darken must NOT run on Commercial */
body:not(#page-commercial) a.d-block:hover .item-text,
body:not(#page-commercial) a.d-block:focus-visible .item-text { background: rgba(0,0,0,.6); }

body:not(#page-commercial) a.d-block:hover .item-text.lighter,
body:not(#page-commercial) a.d-block:focus-visible .item-text.lighter { background: rgba(0,0,0,.3); }
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  a.d-block .item,
  .item-text,
  .item-text h2 { transition: none; }
}


/* == COMMERCIAL WORKS pages → centred total overlay styling == */

/* Full overlay on hover/tap for all gallery "Tiles" */
#page-commercial #justifiedGallery .item-text {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background: rgba(255,255,255,0.8); /* pale white overlay */
  text-align: center;
  padding: 1rem;

  opacity: 0;
  transition: opacity .2s ease;
}

#page-commercial #justifiedGallery .item-text h2,
#page-commercial #justifiedGallery .item-text h5 { color:#111; margin:0; }
#page-commercial #justifiedGallery .item-text h2 { font-size:1.25rem; font-weight:500; text-transform:uppercase; margin-bottom:.25rem; }
#page-commercial #justifiedGallery .item-text h5 { font-size:1.55rem; font-weight:300; }

#page-commercial #justifiedGallery a:hover .item-text,
#page-commercial #justifiedGallery a:focus .item-text,
#page-commercial #justifiedGallery a:focus-within .item-text { 
	opacity: 1;
  background: rgba(255,255,255,0.8); }



/* == ABOUT page ==*/


/* Pull quote block for inline emphasis */
.pull-quote {
  max-width: 42rem;
  margin-left: auto; margin-right: auto;
  padding: 1rem 1.25rem;
  background: #f6f5f4;
  border-left: 4px solid var(--link);
}
.pull-quote blockquote {
  font-size: clamp(1.05rem, 1.4vw + .2rem, 1.35rem);
  line-height: 1.4;
  margin: 0;
}
.pull-quote figcaption { font-size: .95rem; color: var(--text-muted); }



/* Reusable banner quote strip */
.feature-quote {
  margin: 1.25rem 0;
  padding: 1rem 0 1.25rem;

}
.feature-quote .qmark { font-size: 1.6rem; line-height: 1; opacity: .4; }
.feature-quote .quote {
  font-size: clamp(1.05rem, 1.7vw + .2rem, 1.4rem);
  line-height: 1.35;
  margin: .25rem 0 .5rem;
}
.feature-quote .source { font-size: .95rem; color: var(--text-muted); }

/* Slim variant for tighter spaces */
.feature-quote--slim { padding: .5rem 0 .75rem; }
.feature-quote--slim .quote { font-size: clamp(1rem, 1.2vw + .3rem, 1.2rem); }



/* Improve long quote and review reading */
#aboutFaqQuotes .card-body p,
#aboutFaqReviews .card-body p {
  margin-bottom: 1rem;
}

#aboutFaqReviews h3 { font-size: 1.15rem; margin-top: 1.5rem; }
#aboutFaqReviews h4 { font-size: 1rem; color: var(--text-muted); margin-bottom: .75rem; }

#aboutFaqQuotes em, #aboutFaqReviews em { font-style: italic; }
#aboutFaqQuotes .card-body,
#aboutFaqReviews .card-body { font-size: .95rem; line-height: 1.55; }






/* About page tone: fewer lines, more air */
#page-about .lead-hero { font-size: clamp(1.05rem, 2vw + .2rem, 1.4rem); line-height: 1.35; }
#page-about .lead      { font-size: clamp(1rem, 1.2vw + .2rem, 1.125rem); line-height: 1.5; }
#page-about em { font-style: italic; }

/* Portrait sizing and spacing */

#page-about .about-portrait    { margin: 0; }

/* One quiet pull quote, no loud marks */
#page-about .feature-quote-single { padding: 1rem 0; }
#page-about .feature-quote-single .quote  { font-size: 1.05rem; line-height: 1.4; }
#page-about .feature-quote-single .source { color: var(--text-muted, #6c757d); }



/* Inline CTA matches your link colour, no button block */
#page-about .inline-cta { text-decoration: underline; }


#aboutFaqQuotes em {color: var(--text-muted); }











/* VIDEOS .item */

#gallery-videos .item,
#commercial-videos .item {margin-bottom:3em}

	
/* .VIDEO / IFRAME 
- to make video responsive https://bootstrapmaster.com/implement-responsive-youtube-vimeo-embed-iframe-twitter-bootstrap-3/*/
.video{position:relative;width:100%;height:0;padding-bottom:56.25%;margin-bottom:1em}
.video iframe{position:absolute;top:0;left:0;width:100%;height:100%}


/* Responsive video helpers */

.figure-caption.time{font-variant-numeric: tabular-nums} /* for durations (02:51, 04:21) to align neatly with tabular numbers. */



/*== VIDEO LINK ICON ON HOME PAGE ==*/
.video-link {
  position: relative;
  display: inline-block;
}

.video-link .play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-link .play-icon::before {
  content: "";
  display: block;
  margin-left: 4px; /* centre the triangle */
  width: 0;
  height: 0;
  border-left: 18px solid #fff;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

/* Optional hover effect */
.video-link:hover .play-icon {
  background: rgba(0,0,0,0.8);
}



/* CARD BASICS (unchanged except margin) */
.card { margin-bottom: 0; border: 0; border-radius: 0; box-shadow: none; }

/* Faint divider between cards: a top border on each header,
   removed for the first card so you do not get a line above the block */
.card-header {
  padding: .5em 0 0;
  background: transparent;
  color: var(--link);
  border-bottom: 0;
  border-top: 1px solid rgba(0,0,0,.12);  /* faint divider */
}
.card:first-of-type .card-header { border-top: 0; }

/* Headings in header: now using h2 (keep .card-title for safety) */
.card-header h2,
.card-header .card-title {
  letter-spacing: 0.01em;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

/* Toggle link — target either your .collapse-toggle class
   OR any collapse link inside the card header */
.card-header .collapse-toggle,
.card-header a[data-toggle="collapse"] {
  display: inline-flex;
  align-items: center;
  margin: 0 0 .75rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.card-header .collapse-toggle:focus,
.card-header .collapse-toggle:active,
.card-header a[data-toggle="collapse"]:focus,
.card-header a[data-toggle="collapse"]:active { outline: none; box-shadow: none; }

/* Chevron rotation */
.card-header .collapse-toggle .fa,
.card-header a[data-toggle="collapse"] .fa { transition: transform .3s ease; }
.card-header .collapse-toggle.collapsed .fa,
.card-header a[data-toggle="collapse"].collapsed .fa { transform: rotate(0deg); }       /* closed: down */
.card-header .collapse-toggle:not(.collapsed) .fa,
.card-header a[data-toggle="collapse"]:not(.collapsed) .fa { transform: rotate(180deg); } /* open: up */

/* Content spacing */
.card-body { padding: 0; line-height:1.6 }
#quotesCollapse .card-body,
#reviewsCollapse .card-body { margin-top: 1rem; }

/* Optional: keep your old transparent border + extra bottom pad */
.collapse > .card-body { border: 1px solid transparent; padding-bottom: 3em; }

/* Small heading spacing pattern inside card body */
.card h5 { margin-bottom: 0; letter-spacing: 0.01em; }
.card h5 + p { margin-top: 0; }



/* Accordion grouping — remove gaps so the divider line reads as one list */
.accordion, #printInfoAccordion { margin: 0; }
.accordion .card, #printInfoAccordion .card { margin-bottom: 0; }
.accordion .card + .card, #printInfoAccordion .card + .card { margin-top: 0; } /* no vertical gap */
.accordion .card-header, #printInfoAccordion .card-header { border-bottom: 0; }

/* If you still want a tiny gap between cards, change margin-top back to 5px above */


.collapse-toggle svg {
  width: 0.875em;   /* ~14px at 16px base font size, adjust as needed */
  height: auto;
  fill: currentColor;  /* matches text/link colour */
  transition: transform 0.2s ease;
}

/* Rotate arrow when open */
.collapse-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}



/* Limited EDITIONS FAQ page */
/* Ensure accordion content is visible on md+ even if .show is not set */
/* Only keep FAQ always open on the catalogue page, not on individual edition pages */
@media (min-width: 768px) {
  #page-limited-editions #editionFaq .collapse,
  #page-limited-editions #editionFaq .collapsing {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
  }

  #page-limited-editions .buying-faq--smooth #editionFaq .collapse .card-body {
    opacity: 1 !important;
    transform: none !important;
  }
}



.edition-context {
  font-size: 0.95rem;
  opacity: 0.6;
  margin-bottom: 1rem;
}



.availability-note {
  font-size: 0.95rem;
  opacity: 0.75;
  margin-top: 0.75rem;
}




/* BUY TABS — Bootstrap 4.6.2 */
/* on catalogue and teratologists pages  */

/* Tab pane box (optional framed content) */
.tab-content > .tab-pane {
  padding: .5em 1.5em 1em;
  border: 1px solid #ddd;
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Dropdown attached to tab list */
.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Cards inside tab panes, styled like your old panels */
.tab-content .card {
  border: 0;
  box-shadow: none;
  margin-bottom: 1em;
}


/* Unified header style for cards inside tabs */
.tab-content .card-header {
  padding: .75em 0 .5em;
  margin-bottom: .75em;
  background: transparent;
  border-bottom: 1px solid #e8e8e8;
  color: #333;
  font-size: 1.1em;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.tab-content .card-body { padding: 0; }
.tab-content .card + .card { margin-top: 5px; }


/* Paypal image button tidy */
.paypal input[type="image"] {
  display: inline-block;
  height: auto;
}




/* FOOTER BASE */
footer {
	
  margin: 1.5rem 0 0; 
	padding:0rem 0 1rem 0;
  padding-top: 1.75rem;
  background-color: #F9F8F7!important;
}

footer p { font-size: 0.75rem;
  letter-spacing: 0.1em; }

footer a { 
	font-size: 0.75rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease;
}

footer a:hover,
footer a:focus {
  color: var(--link);
  opacity: .85;
  text-decoration: underline;
}

.sep { 
font-size: 0.5em;   /* smaller than link text */
  line-height: 1;
  margin: 0 0.4em;    /* space left/right */
  opacity: 0.5;
}


.footer-primary-link {
 font-family: inherit; /* uses same font stack as nav */
  font-size: 0.95rem;   /* slightly smaller than main nav */
  font-weight: 200;
  letter-spacing: 0.06em;
  margin: 0 0.8em;    /* space left/right */
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
}

.footer-primary-link:hover,
.footer-primary-link:focus {
  text-decoration: underline;
}



/* FOOTER SOCIAL ICONS */
footer ul.social {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.4rem, 1vw, 0.65rem); /* tighter on desktop */
  padding: 0;
  margin: 0;
  list-style: none;
}

footer ul.social li { display: inline-flex; }

footer ul.social a {
	font-size:.75rem;
  display: inline-flex;
  align-items: center;
  padding: .35rem;   /* larger tap target */
  line-height: 1;
  color: #ccc;
}

@media (min-width: 768px) {
  footer ul.social {
    align-items: flex-start;
  }
}






/* === PAGE SPECIFIC STYLES == */


/*== PUBLICATIONS ==*/

/* SECTION DIVIDER (long line) using existing h3 styles */
.section-divider {
  display: flex;
  align-items: center;
  text-align: center;
  width: 100%;
  margin: 0rem 0;
}

.section-divider::before,
.section-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border);
}

.section-divider .h3 {
  padding: 0 1rem;
  margin: 0; /* prevent default margins creating gaps */
}


@media (max-width: 575.98px) {
#page-publications img { margin-bottom: 1rem; } /* was ~1.85em globally */
}

/*== BOX SHADOW on publication imgs ==*/
.box-shad {
	margin-right:0;
	margin-left:0; 
box-shadow: 3px 3px 4px 1px rgba(214,214,214,1)
}

/* Softer box shadow on phones, keeps big one on larger screens */
@media (max-width: 575.98px) {
.box-shad { box-shadow: 2px 2px 8px rgba(0,0,0,.08) !important; }
}

.box-shadow {
box-shadow: 2px 1px 4px rgba(130,129,129,1);
}

.box-shad.img-fluid { margin-bottom: 1rem; 
}


/*== CHECKED √ ==*/
/*== HEADINGS PUBLICATIONS and PROSE POETRY ==*/
/* Default h2 spacing */
.book-section h2 {
  margin-bottom: 1.5rem;                        /* fallback */
  margin-bottom: clamp(1.25rem, 1vw + 1rem, 1.75rem);
}

/* Tighter h2 only when a subtitle follows */
.book-section h2.has-subtitle {
  margin-bottom: .25rem;                        /* fallback */
  margin-bottom: clamp(.2rem, .3vw, .35rem);
}

/* Subtitle immediately after the h2 (h4 or paragraph) */
.book-section h2.has-subtitle + h4.subtitle,
.book-section h2.has-subtitle + p.subtitle {
  margin-top: 0;
  margin-bottom: 1.5rem;                        /* fallback */
  margin-bottom: clamp(1.25rem, 1.1vw + 1rem, 1.75rem);
}

/* Optional subtitle styling */
.book-section h4.subtitle,
.book-section p.subtitle {
  font-weight: 400;

}




.book-meta { 
	font-size: 0.875rem; /* matches .details-list. */
	margin: 0; 
}
.book-meta dt {
  float: left;
  width: 42%;
  clear: left;
  font-weight: 600;
}
.book-meta dd {
  margin-left: 44%;
  margin-bottom: 0rem;
}



/* DOTS */
.dot {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  transition: background .2s ease, transform .2s ease;
}

.dot-link.is-active .dot,
.dot-link:hover .dot {
  background: currentColor;
}

/* Positioning (your original rules adapted) */
.anchor-dots {
  display: none !important;
}
@media (min-width: 768px) {
  .anchor-dots {
    display: block !important;
    position: fixed;
    right: 2%;
    top: 38%;
    z-index: 1060;
  }
}

/* Always protect text from overlapping the anchor dots */
/* Always protect text from overlapping the anchor dots */
@media (min-width: 768px)  { .withdots { padding-right: 3rem; } }  /* ≈ pr-5 */
@media (min-width: 1200px)  { .withdots { padding-right: 1.5rem; } }


/* WORKS: Through States*/
/* Shared Buy Prints layout */





/* == EDITIONS ==*/

/* Editions sidebar text (beside image) */

#artwork-page h1 {
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  margin-bottom: 0.5rem;
}


#artwork-page .edition-info { 	
  font-size: .9375rem;   /* ~15px on phones */
  line-height: 1.55;
}

@media (min-width: 768px){
  #artwork-page .edition-info { 
    font-size: .9rem;    /* ~14.4px on tablet and up */
  }
}

#artwork-page .edition-info ul { 
 margin-bottom: 0.75rem;
}
#artwork-page .edition-info li + li { 
	margin-top:0rem;
}

#artwork-page .artwork-context {
  font-size: 0.85rem;
  color: #777;
  margin-bottom: 0.75rem;
}

#artwork-page .btn-outline-dark {
  border-width: 1px;
	 opacity: 0.8;
}

.paypal button,
#artwork-page .paypal {
  margin-top: 0.5rem;
}
#artwork-page .paypal button {
  width: 100%;
  margin-top: 0.5rem;
}
#artwork-page .list-unstyled.prices li + li {  
	border-top: 1px solid #F0EEED; 
	line-height: 2.2;
}
#artwork-page .list-unstyled.prices li {
  display: flex;
  justify-content: space-between; /* pushes price to the right */
  align-items: baseline;           /* keeps numbers aligned with text */
  border-top: 1px solid var(--ink-150);
  line-height: 2.2;
}
#artwork-page .list-unstyled.prices span.price{ 
	font-weight: 500; 
	color: var(--ink-900); 
	letter-spacing: 0.3px;}

/* Editions: compact buying links */
#artwork-page .buying-faq .buying {
  margin-top: .5rem;
}
#artwork-page .buying-faq .buying li {
  display: inline-block;
  margin-right: .75rem;
}
#artwork-page .buying-faq .buying li + li { 
	margin-top: 0; }
#artwork-page .buying-faq .buying a:hover { 
	text-decoration: underline; }


/* Editions: compact accordion help */
#artwork-page .buying-faq .card-header { 
	padding-top: .25rem; }
#artwork-page .buying-faq .h6 { 
	letter-spacing: .06em; }
#artwork-page .buying-faq .card-body { 
	padding-top: .25rem; }



/* Editions accordion: underline only the label, never the chevron */
#artwork-page .buying-faq .card-header a[data-toggle="collapse"],
#artwork-page .buying-faq .card-header .collapse-toggle {
  text-decoration: none !important;  /* remove underline from the link itself */
}

#artwork-page .buying-faq .card-header a[data-toggle="collapse"]:hover .h6,
#artwork-page .buying-faq .card-header a[data-toggle="collapse"]:focus .h6,
#artwork-page .buying-faq .card-header .collapse-toggle:hover .h6,
#artwork-page .buying-faq .card-header .collapse-toggle:focus .h6 {
  text-decoration: underline;         /* underline only the text span */
}

#artwork-page .buying-faq .card-header a[data-toggle="collapse"] .fa,
#artwork-page .buying-faq .card-header .collapse-toggle .fa {
  text-decoration: none !important;   /* belt and braces */
}



/* Smoothen the height transition that Bootstrap uses — LEP only */
.buying-faq--smooth .collapsing {
  transition: height .24s cubic-bezier(.2,.6,.2,1);
}

/* Fade + nudge content in as the panel opens — LEP only */
.buying-faq--smooth .collapse .card-body {
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .18s ease-out, transform .18s ease-out;
}
.buying-faq--smooth .collapse.show .card-body {
  opacity: 1;
  transform: none;
}

/* Rotate the arrow smoothly — LEP only */
.buying-faq--smooth .collapse-toggle .fa {
  transition: transform .18s ease-out;
}
.buying-faq--smooth .collapse-toggle[aria-expanded="true"] .fa {
  transform: rotate(180deg);
}

/* Tighter rhythm — LEP only */
.buying-faq--smooth .card-header { padding: .75rem 0; }
.buying-faq--smooth .card-body { padding: .75rem 0; }

/* Respect reduced motion — LEP only */
@media (prefers-reduced-motion: reduce) {
  .buying-faq--smooth .collapsing,
  .buying-faq--smooth .collapse .card-body,
  .buying-faq--smooth .collapse-toggle .fa {
    transition: none !important;
  }
}




/* Editions and Publications: details list */
#artwork-page .details-list li, 
#page-publications .details-list li{
padding-left: 0
}

#artwork-page .details-list li:last-child, 
#page-publications .details-list li:last-child {
  border-bottom: 0;
}

#artwork-page .details-list a, 
#page-publications .details-list a {
  text-decoration: underline;
}



/* Subtle separators in size lists */
#page-works .buy-prints .list-unstyled li + li { border-top: 1px solid #F0EEED; }
#page-works .buy-prints strong { font-weight: 600; }




/* #CLIENT LISTS*/
p.client-list  {letter-spacing:0.02em}
p.client-list a { padding: 0.5rem 0;white-space: nowrap}
p.client-list a:hover { color: var(--link);}
p.client-list span {color: var(--ink-300) !important;margin:0 2px}











/* Fancyapps - FANCYBOX v 5.0 */
@media (max-width:767px){.fancybox__caption{font-size: 1.5rem}}

/*  added to let the image size itself correctly */
.f-carousel__slide img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/*  added to avoid a flash before the carousel initialises */
.f-carousel { opacity: 0; }
.f-carousel.f-inited { opacity: 1; transition: opacity .2s ease; }



.f-carousel {
--f-button-color:var(--ink-600);
--f-button-hover-color:var(--ink-1000);
--f-button-bg:rgba(255,255,255,0.20);
--f-button-hover-bg:rgba(255,255,255,0.35);
--f-button-active-bg: rgba(255,255,255,0.5);
--f-button-svg-width: 34px;
--f-button-svg-height: 34px;
}


/* Smaller Fancybox caption text */
.fancybox__caption {
font-size:0.9rem;
  line-height: 1.2;
	color: var(--ink-100);
	letter-spacing: 0.08rem
}

/* Tidy the credits block you put inside <p> */
.fancybox__caption p {
  margin: 0.4rem 0 0;
}

/* Make the artist line a touch subtler */
.fancybox__caption em {
  opacity: 0.8;
}




/* Bootstrap 4+ navbar refinements */

/* Layout */
.navbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: .5rem 0 0 0; /* top right bottom left */
}


/* Direction of nav items */
@media (min-width: 992px) {
  .navbar-nav { flex-direction: row !important; }
}
@media (max-width: 991.98px) {
  .navbar-nav { flex-direction: column !important; }
}

/* Collapse container: desktop only (do not force display on mobile) */
@media (min-width: 992px) {
  .navbar .navbar-collapse {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}

/* Toggler */
.navbar-light .navbar-toggler {border: 0; }

/* Toggler button */
.navbar-toggler {
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
}

/* Base icon (middle bar) */
.navbar-toggler-icon {
  position: relative;
  width: 36px;                /* wider bars */
  height: 1.3px;                /* thin line */
  background-color: #000;
  transition: background-color .25s ease;
}

/* Top and bottom bars */
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 36px;                /* match middle bar length */
  height: 1.3px;
  background-color:#000;
  transition: transform .25s ease, top .25s ease;
}

/* Spread bars further apart */
.navbar-toggler-icon::before { top: -12px; }  /* further above middle */
.navbar-toggler-icon::after  { top:  12px; }  /* further below middle */

/* Open state → X */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background-color: transparent;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
  top: 0;
  transform: rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
  top: 0;
  transform: rotate(-45deg);
}


/* Main nav links: typography + underline (all breakpoints) */
.navbar-nav .nav-link {
  display: inline-block;              /* shrink-wrap so underline = text width */
  padding: .4rem 0 0 0;               /* a little space above, none below */
  margin: 0 .75rem;                   /* spacing between items */
  font-size: .8125rem;                /* ~13px on mobile */
  letter-spacing: .07em;
  font-family: inherit;
  font-weight: 400;
  text-transform: uppercase;

  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, color .15s ease;
  white-space: nowrap;
}

/* Colour rules for light navbar theme */
.navbar-light .navbar-nav .nav-link {
  color: var(--link);
}

/* Hover and focus */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  outline: 0;
  border-bottom-color: var(--link-hover);
  color: var(--link-hover);
}

/* Active states: keep text colour, show solid underline */
.navbar-nav .nav-link.active,
.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .nav-link[aria-current="page"],
.navbar-nav .active-page {
  border-bottom-color: currentColor;
  color: inherit;
  cursor: default;
}

/* Size tweaks for larger screens (no bottom padding so line stays tight) */
@media (min-width: 768px) {
  .navbar-nav .nav-link {
    padding-top: .55rem;
    font-size: .75rem;                /* ~12px */
    letter-spacing: .08em;
  }
}
@media (min-width: 1200px) {
  .navbar-nav .nav-link {
    font-size: .8rem;                 /* ~12.8px */
    letter-spacing: .07em;
  }
}

/* Dropdowns (unchanged, just grouped) */
.navbar-light .dropdown-menu {
  background-color: #fff;
  border: 1px solid #f7f7f7;
  box-shadow: none;
}
.navbar-light .dropdown-menu .dropdown-item {
  font-size: .8125rem;    /* ~13px base */
  line-height: 1.5;
  padding: .4rem 1rem;
  background-color: #fff;
  color: var(--link);
  transition: color .2s ease;
}
.navbar-light .dropdown-menu .dropdown-item:hover,
.navbar-light .dropdown-menu .dropdown-item:focus,
.navbar-light .dropdown-menu .dropdown-item:active,
.navbar-light .dropdown-menu .dropdown-item.active {
  background-color: #fff;
  color: #CAC4C4;
  text-decoration: none;
}
@media (min-width: 768px) {
  .navbar-light .dropdown-menu .dropdown-item {
    font-size: .75rem;     /* ~12px on md+ */
    padding: .35rem 1rem;
  }
}
@media (min-width: 992px) {
  .navbar-light .dropdown-menu .dropdown-item {
    font-size: .75rem;     /* keep readable on desktop */
  }
}

/* Dropdowns inside collapsed mobile menu */
@media (max-width: 767.98px) {
  .navbar-nav .show .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: #fff;
    border: 1px solid #f7f7f7;
    box-shadow: none;
  }
  .navbar-nav .show .dropdown-menu .dropdown-item {
    padding: .75em 15px .75em 35px;
    line-height: 1.85714286;
    color: var(--link);
    text-transform: none;   /* sentence case for items */
    letter-spacing: normal;
  }
  .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    background-color: #fff;
    color: #CAC4C4;
  }
}

/* Split caret niceties */
.navbar .dropdown .nav-link { padding-left: .5rem; padding-right: .5rem; }


/* === Text-width underline for main nav (tight, no stretch) === */

/* === Larger, tighter-spaced main nav links === */
.navbar-nav .nav-item {
  flex: 0 0 auto;   /* stop stretching */
}

.navbar .navbar-nav .nav-link {
  display: inline-block;           
  padding: .5rem 0 0 0;            /* a little space above text */
  margin: 0 .4rem;                 /* tighter gap between items */
  font-size: 1.05rem;             /* 18px base size */
  letter-spacing: .05em;           
  font-weight: 200;            
  text-transform: uppercase;
  white-space: nowrap;

  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, color .15s ease;
 color:var(--ink-1000);
}

/* Hover + focus */
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus {
  outline: 0;
  color: var(--link-hover);
  border-bottom-color: var(--link-hover);
}

/* Active state */
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-item.active > .nav-link,
.navbar .navbar-nav .nav-link[aria-current="page"],
.navbar .navbar-nav .active-page {
  color: inherit;
  border-bottom-color: currentColor;
  cursor: default;
}
/* added so has reaction even on sub-pages, otherwise wouldn't react */
#page-works .navbar .navbar-nav .active-page:hover{
  color: var(--link);
  border-bottom-color: var(--link);
}


/* Vertically centre nav links in the mobile dropdown */
@media (max-width: 991.98px) {
  .navbar-collapse {
   
    flex-direction: column;
    justify-content: center;   /* vertical centring */
    min-height: 100vh;         /* take full viewport height */
    padding-top: 0;            /* reset any padding */
    padding-bottom: 0;
  }

  .navbar-nav {
    text-align: center;        /* centre horizontally */
    width: 100%;
  }

  .navbar-nav .nav-link {
    display: inline-block;
    margin: .5rem auto;
  }
}


/* Vertically centre mobile dropdown links without dropping off-screen */
@media (max-width: 991.98px) {
  .navbar .navbar-collapse {
  
    flex-direction: column;
    justify-content: flex-start;   /* keep content near top */
    min-height: auto;              /* no forced centring */
    padding-top: 1rem;             /* adjust this value for gap */
  }

  .navbar-nav {
    text-align: center;
    width: 100%;
    margin: 0;
  }

  .navbar-nav .nav-link {
    display: inline-block;
    margin: .5rem auto;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Huge nav links inside mobile dropdown */
@media (max-width: 991.98px) {
  .navbar-nav .nav-link {
    font-size: 2.5rem!important;
border-bottom: none !important; 
    letter-spacing:0; 
   line-height: 1.5
  }
}




/*== CHECKED √ ==*/
/*== BACK TO TOP - FROM FOOTER √ ==*/
.backtotop {
  text-align: center;
  margin: 1.5rem 0 -2.5rem;   /* spacing above footer */
}

#toTop {
  display: inline-block;
 background-color: var(--ink-100)!important; 
  border: 1px solid #fff;
  /*border-radius: 20px;*/
  color: #000;
  font-size: 0.8125rem;        /* ~13px */
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .75rem 1.25rem;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

#toTop:hover,
#toTop:focus {
  background-color: #333;     /* lighter hover contrast */
  border-color: var(--link);
  outline: none;
}






/* ===== Contact page — aligned to site system ===== */

#page-contact main {
  padding-top: clamp(1.5rem, 1.2vw + 1rem, 2.5rem);
  padding-bottom: clamp(2rem, 1.2vw + 1.25rem, 3rem);
}

#page-contact .contact-wrap {
  max-width: min(680px, var(--measure));
  margin: 0 auto;
}

/* Intro copy */
#page-contact .contact-intro {
  font-size: clamp(1rem, .25vw + .96rem, 1.125rem);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 58ch;
}

/* Card shell — no rounded corners, subtle rule only */
#page-contact .contact-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: clamp(1rem, .8vw + .75rem, 1.5rem);
  box-shadow: none;
}

/* Labels and required mark — match your small caps feel via tracking */
#page-contact label {
  font-weight: 600;
  letter-spacing: clamp(0.03em, 0.1vw + 0.02em, 0.085em);
}
#page-contact .required::after {
  content: " *";
  color: #960000;
  font-weight: 700;
}

/* Controls — square corners, palette borders, calm focus */
#page-contact .form-control {
  border: 1px solid var(--border);
  border-radius: 0;
  padding: .5rem .75rem;                   /* aligns with your .btn */
  background-color: #fff;
  line-height: 1.35;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#page-contact .form-control:hover { border-color: var(--ink-300); }
#page-contact .form-control:focus {
  border-color: var(--link);
  box-shadow: 0 0 0 .12rem rgba(0,0,0,.06);
  outline: 0;
}
#page-contact textarea.form-control { min-height: 9.5rem; resize: vertical; }

/* Help text and microcopy */
#page-contact .form-text { color: var(--text-muted); line-height: 1.45; }

/* Two-up row (md+) for name and email */
#page-contact .form-row .form-group { margin-bottom: 1rem; }
@media (min-width: 768px){
  #page-contact .form-row .form-group { margin-bottom: 1.25rem; }
}

/* Messages area (for PHP responses) */
#page-contact #formMessages { margin-top: .75rem; }
#page-contact .msg { font-size: 1.0625rem; margin: .5rem 0 0; font-weight: 600; }
#page-contact .msg.error { color: #800; }
#page-contact .msg.success { color: #2a7c4b; }

/* Honeypot */
#page-contact .honeypot { position: absolute !important; left: -10000px !important; }

/* Submit button — inherit your global .btn look, just keep a tidy width */
#page-contact #submitBtn { min-width: 7rem; }

/* Inline sending note */
#page-contact #sendingNote { margin-left: .75rem; }




.quote-source {
  display: block;
  margin-top: 0.3rem;
  color: var(--text-muted, #6c757d);
  font-style: normal;
  font-size: 0.875rem;
}

.quote-source::before {
  content: "— ";   /* em dash + space */
}


/* For accessibility */
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:0;top:0;background:#fff;color:#000;padding:.5rem;z-index:1000}