/* ==========================================================================
   Highland Lynx & Bengals of VA - stylesheet
   Plain CSS, no build step. Edit directly.

   This implements the "Revamp" Claude Design comp. What that changed from the
   first build, and why it is worth keeping:

     - Gelasio + DM Sans replace Georgia and the system sans. Gelasio is
       metric-compatible with Georgia, so the serif fallback shifts almost
       nothing while the webfont loads. Both are self-hosted (see fonts.css).
     - Section headings became left-aligned eyebrow + real headline, instead of
       centered label + rule. Every section now says something.
     - The photographs are mounted like prints - white mat, thin shadow, small
       radius - rather than bled to the edge of a card.
     - Corner radius dropped from 10px to 4px throughout. Crisper, less "app".
     - The home page leads with the trust story: the facts strip and how the
       kittens are raised come before the breed explainers.
     - The gallery is a masonry column layout at each photo's own shape, so
       nothing is cropped, plus click-to-enlarge.

   Contents
     1. Design tokens
     2. Base + reset
     3. Accessibility helpers
     4. Layout primitives
     5. Contact bar / header / navigation
     6. Footer
     7. Home page
     8. Gallery page
     9. Lightbox
    10. Draft-mode placeholder highlighting
   ========================================================================== */

@import url("fonts.css");

/* 1. Design tokens ======================================================== */

:root {
  --bg:            #fdfaf6;   /* warm white page background */
  --surface:       #ffffff;
  --surface-warm:  #f6efe5;   /* softly tinted band */
  --ink:           #2b2620;   /* headings + body, ~14:1 on --bg */
  --ink-soft:      #5c5248;   /* secondary text, ~7:1 on --bg */
  --accent:        #a9603c;   /* warm clay, decorative use */
  --accent-text:   #8a4b2c;   /* darker clay, ~6.4:1 - safe for links */
  --accent-wash:   #f3e3d8;
  --border:        #e7dbcb;

  /* On the dark bars. --on-dark-soft is 7.6:1 on --ink, --on-dark is 15:1. */
  --on-dark:       #ffffff;
  --on-dark-soft:  #c9b6a2;
  --on-dark-body:  #f3e9dd;

  --font-display: Gelasio, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Deliberately large. The audience skews older and reads on phones. */
  --size-base: 1.125rem;    /* 18px */
  --measure: 34rem;         /* comfortable line length for body copy */

  --radius: 4px;
  --shadow-card: 0 1px 2px rgba(43, 38, 32, .04), 0 8px 24px rgba(43, 38, 32, .06);
  --shadow-print: 0 2px 5px rgba(43, 38, 32, .07), 0 14px 32px rgba(43, 38, 32, .10);
  --shadow-lift: 0 3px 6px rgba(43, 38, 32, .08), 0 22px 44px rgba(43, 38, 32, .16);

  --section-y: clamp(3.25rem, 7vw, 5.5rem);
}

@media (min-width: 48em) {
  :root { --size-base: 1.1875rem; }   /* 19px from tablet up */
}

/* 2. Base + reset ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;   /* never suppress the user's own setting */
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 5.2vw, 3.75rem); line-height: 1.08; letter-spacing: -.02em; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.35rem); }

p { margin: 0 0 1.1em; max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-text); text-underline-offset: .18em; }
a:hover { color: var(--ink); }

img { max-width: 100%; height: auto; display: block; }

/* Browsers ship figure with margin: 1em 40px, which would shrink every mounted
   photo well inside its mat. */
figure { margin: 0; }

/* 3. Accessibility helpers ================================================ */

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 3px;
}

/* On the dark bars the clay ring disappears; white shows against both. */
.topbar a:focus-visible,
.site-footer a:focus-visible,
.cta-band a:focus-visible,
.contact-card--dark:focus-visible { outline-color: #fff; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius) 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 4. Layout primitives ==================================================== */

.wrap {
  width: min(100% - 2.5rem, 70rem);
  margin-inline: auto;
}

.section { padding-block: var(--section-y); }

.section--warm {
  background: var(--surface-warm);
  border-block: 1px solid var(--border);
}

.lede {
  font-size: 1.1em;
  color: var(--ink-soft);
  max-width: 34rem;
}

/* Small uppercase label above a heading. */
.eyebrow {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 1rem;
  max-width: none;
}

/* Section intro: eyebrow, headline, optional lede. Left aligned - centered
   headings over left-aligned body copy made the page feel like two designs. */
.section__head {
  max-width: 40rem;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}
.section__head h2 { margin-bottom: 0; }
.section__head h2 + .lede { margin-top: 1.1rem; }

/* The mount around a photograph: white mat, thin shadow, small radius. */
.mount {
  background: var(--surface);
  padding: 11px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-print);
}
.mount img { border-radius: 2px; background: var(--surface-warm); width: 100%; }

.mount figcaption {
  padding: .65rem .2rem .1rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--ink-soft);
  text-align: center;
}

/* Checkmark drawn from two borders on an empty box - no icon font, no image
   request, and nothing for a screen reader to announce. */
.tick {
  flex: 0 0 auto;
  margin-top: .45em;
  width: 13px;
  height: 7px;
  border-left: 2.5px solid var(--accent-text);
  border-bottom: 2.5px solid var(--accent-text);
  border-radius: 1px;
  transform: rotate(-45deg);
}

.ticklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .7rem;
}
.ticklist li {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  line-height: 1.5;
  font-size: .95em;
}

/* 5. Contact bar / header / navigation ==================================== */

/* Pinned above the header on every page. The whole business runs on text
   messages and email, so both are one tap away at any scroll position. */
.topbar {
  background: var(--ink);
  color: var(--on-dark-body);
  font-size: .88rem;
}

.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 2.25rem;
  padding-block: .1rem;
}

@media (min-width: 48em) {
  .topbar__inner { justify-content: flex-end; }
}

.topbar a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .6rem;
  padding-block: .55rem;      /* lifts the tap target over 44px */
  color: var(--on-dark);
  font-weight: 500;
  text-decoration: none;
  word-break: break-word;
}
.topbar a:hover { color: var(--on-dark); text-decoration: underline; }

.topbar__label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}

.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .85rem 1.5rem;
  padding-block: 1.15rem;
}

.brand {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.2;
}
.brand:hover { color: var(--accent-text); }

.brand__tag {
  display: block;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-top: .35rem;
}

/* Only two pages, so no hamburger and no JavaScript - the links sit side by
   side at every width, with the phone number alongside them. */
.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}

.nav a {
  display: block;
  padding: .6rem 1rem;          /* generous tap target */
  border-radius: var(--radius);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.nav a:hover { background: var(--accent-wash); color: var(--accent-text); }

/* aria-current="page" is what marks the active link, so the styling and the
   screen-reader announcement can never drift apart. */
.nav a[aria-current="page"] {
  background: var(--accent-wash);
  color: var(--accent-text);
}

/* Written as `.nav a.nav__call` on purpose. `.nav a` above is (0,1,1); a bare
   `.nav__call` is (0,1,0) and loses, which left white text overridden by
   --ink-soft - brown lettering on a brown button. */
.nav a.nav__call {
  margin-left: .35rem;
  padding: .65rem 1.25rem;
  background: var(--accent-text);
  color: #fff;                /* 6.4:1 on --accent-text */
  letter-spacing: .08em;
}
.nav a.nav__call:hover { background: var(--ink); color: #fff; }

/* 6. Footer =============================================================== */

.site-footer {
  background: var(--ink);
  color: var(--on-dark-body);
  padding-block: 3.25rem;
  font-size: .9rem;
}

.site-footer p { max-width: none; }
.site-footer a { color: var(--on-dark); }
.site-footer a:hover { color: var(--on-dark); }

.site-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem 2.5rem;
  flex-wrap: wrap;
}

.site-footer__name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--on-dark);
  margin-bottom: .55rem;
}

.site-footer__meta { color: var(--on-dark-soft); }

/* These repeat the contact bar and the main nav, so they are tertiary - but a
   ~20px inline link is still a poor target on a phone for the audience this
   site is for. inline-block plus vertical padding takes them to ~40px without
   making the footer look loose. */
.site-footer__meta a,
.site-footer__nav a { display: inline-block; padding-block: .55rem; }

.site-footer__nav {
  display: flex;
  gap: 1.5rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.site-footer__nav a { color: var(--on-dark-soft); text-decoration: none; }
.site-footer__nav a:hover { color: var(--on-dark); text-decoration: underline; }

.site-footer__legal {
  margin-top: 1.75rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
  color: var(--on-dark-soft);
  font-size: .82rem;
}

/* 7. Home page ============================================================ */

.hero {
  background: var(--surface-warm);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}

.hero__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 60em) {
  .hero__grid { grid-template-columns: 1fr minmax(0, 29rem); }
}

.hero h1 { margin-bottom: .4em; }
.hero .lede { font-size: 1.12em; max-width: 31rem; margin-bottom: 2rem; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 0;
  max-width: none;
}

/* Two mounted prints, the smaller one overlapping the larger. Only worth doing
   where there is room: below 60em they sit side by side, and on a phone the
   inset print is hidden entirely rather than shrunk to a stamp. */
.hero__prints {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
}

.hero__print--main { flex: 1 1 62%; }
.hero__print--inset { flex: 1 1 38%; }

@media (min-width: 60em) {
  .hero__prints {
    position: relative;
    display: block;
    min-height: 33rem;
  }
  .hero__print--main {
    position: absolute;
    top: 0;
    right: 0;
    width: 21rem;
    box-shadow: var(--shadow-lift);
  }
  .hero__print--inset {
    position: absolute;
    bottom: .4rem;
    left: 0;
    width: 14.75rem;
    box-shadow: 0 3px 6px rgba(43, 38, 32, .08), 0 18px 36px rgba(43, 38, 32, .18);
  }
}

@media (max-width: 30em) {
  .hero__print--inset { display: none; }
}

.hero__print--main img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 34%;   /* keeps the kitten's face and front paws */
}

.button {
  display: inline-block;
  padding: 1rem 1.85rem;
  border-radius: var(--radius);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  text-align: center;
}

.button--primary {
  background: var(--accent-text);
  color: #fff;
  box-shadow: 0 2px 3px rgba(43, 38, 32, .1), 0 10px 22px rgba(138, 75, 44, .22);
}
.button--primary:hover { background: var(--ink); color: #fff; }

.button--quiet {
  background: var(--surface);
  color: var(--accent-text);
  border-color: var(--border);
}
.button--quiet:hover { background: var(--accent-wash); color: var(--accent-text); }

/* Trust strip - the four things a buyer wants to know before anything else. */
.trust {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.trust__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem 0;
  padding-block: 1.75rem;
}

.trust__list li {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  font-size: .87em;
  line-height: 1.45;
  color: var(--ink);
}

@media (min-width: 42em) {
  .trust__list { grid-template-columns: 1fr 1fr; gap: 1.35rem 2.5rem; }
}

@media (min-width: 68em) {
  .trust__list { grid-template-columns: repeat(4, 1fr); gap: 0; }
  /* Dividers only once the four sit on a single row - on two rows they would
     draw a line down the middle of nothing. */
  .trust__list li { padding-inline: 1.75rem; border-left: 1px solid var(--border); }
  .trust__list li:first-child { padding-left: 0; border-left: 0; }
  .trust__list li:last-child { padding-right: 0; }
}

/* Prose beside a supporting column. Body copy is capped at --measure for
   readability, which on a wide screen leaves the right half of a section
   empty; this fills it. */
.split {
  display: grid;
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: center;
}

@media (min-width: 56em) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); }
}

.split--top { align-items: start; }

/* Card holding a short list - "At a glance", "Every kitten goes home with". */
.panel {
  padding: clamp(1.5rem, 3vw, 1.9rem) clamp(1.5rem, 3vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.panel h3 {
  font-size: 1.25rem;
  margin-bottom: .75em;
}

.panel__note {
  margin: 1.25rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  color: var(--ink-soft);
  font-size: .9em;
  max-width: none;
}

/* Callout - a short aside set apart from the surrounding prose. */
.callout {
  margin-top: 2rem;
  padding: clamp(1.35rem, 3vw, 1.65rem) clamp(1.4rem, 3vw, 1.9rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  max-width: 36rem;
}
.callout h3 { font-size: 1.2rem; margin-bottom: .5em; }
.callout p { max-width: none; font-size: .93em; color: var(--ink-soft); }

/* The one line in her own voice that is worth setting apart. */
.pullquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2em;
  line-height: 1.5;
  color: var(--ink);
  max-width: 32rem;
  margin-bottom: 2rem;
}

/* Breed articles ----------------------------------------------------------
   Photo column and prose column swap sides between the two breeds. The prose
   is always first in the DOM so a screen reader meets the heading before the
   pictures; `order` does the visual swap, and only where there are columns. */

.breed {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3.5rem);
  align-items: start;
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
.breed + .breed { border-top: 1px solid var(--border); }
.breed:first-of-type { padding-top: 0; }
.breed:last-of-type { padding-bottom: 0; }

@media (min-width: 56em) {
  .breed { grid-template-columns: minmax(0, 1fr) 19rem; }
  .breed--photo-left { grid-template-columns: 19rem minmax(0, 1fr); }
  .breed--photo-left .breed__prose { order: 2; }
  .breed--photo-left .breed__side  { order: 1; }
}

.breed h3 { font-size: clamp(1.5rem, 2.9vw, 2rem); margin-bottom: .6em; }
.breed__prose p { max-width: 37rem; color: var(--ink-soft); }

/* Two extra photographs under the prose, at their own shapes. */
.breed__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
  max-width: 37rem;
  margin-top: 1.75rem;
}

/* At-a-glance list. A description list because that is what it is: each row is
   a term and its value. */
.specs {
  margin: 1.4rem 0 0;
  padding: 0;
  font-size: .87em;
}

.specs__row {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .75rem;
  padding-block: .6rem;
  border-top: 1px solid var(--border);
}
.specs__row:first-child { border-top: 0; padding-top: 0; }
.specs__row:last-child { padding-bottom: 0; }

.specs dt { flex: 0 0 5rem; font-weight: 700; color: var(--ink); }
.specs dd { flex: 1 1 10rem; margin: 0; color: var(--ink-soft); }

/* Band linking through to the gallery. */
.band {
  background: var(--surface-warm);
  border-block: 1px solid var(--border);
  padding-block: clamp(2.25rem, 4vw, 3rem);
}

.band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  flex-wrap: wrap;
}

.band h2 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); margin: 0; max-width: 35rem; }
.band .button { flex: 0 0 auto; }

/* Contact - the most important block on the site, so it is the loudest. */
.contact__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 46em) {
  .contact__list { grid-template-columns: repeat(3, 1fr); }
}

.contact-card {
  display: block;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: clamp(1.6rem, 3.5vw, 2.15rem) clamp(1.5rem, 3vw, 2rem);
}
a.contact-card:hover { background: var(--surface-warm); }

/* The phone card is the one thing most visitors are here for, so it is the
   only element on the page in reverse. */
.contact-card--dark {
  background: var(--ink);
  border-color: var(--ink);
}
a.contact-card--dark:hover { background: #3a332b; }

.contact__label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .7rem;
}
.contact-card--dark .contact__label { color: var(--on-dark-soft); }

.contact__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--accent-text);
  /* The email address is long enough to overflow a narrow card. break-word
     only splits when there is no other option, and the <wbr> in the markup
     gives it a sensible place to split: before the @, not mid-word. */
  overflow-wrap: break-word;
}
.contact-card--dark .contact__value { color: var(--on-dark); }
.contact__value--plain { color: var(--ink); }
.contact__value--email { font-size: clamp(1.1rem, 2.4vw, 1.5rem); }

.contact__note {
  margin-top: 1.6rem;
  color: var(--ink-soft);
  font-size: .93em;
  max-width: 40rem;
}

/* 8. Gallery page ========================================================= */

/* Masonry by CSS columns. Every photograph keeps its own shape - these are
   phone pictures of cats, and a uniform crop was cutting off faces and paws.
   Reading order stays DOM order for a screen reader; only the visual flow
   runs down each column, which is what a photo wall should do anyway. */
.gallery {
  columns: 2;
  column-gap: 1rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.gallery > li {
  break-inside: avoid;
  margin-bottom: 1rem;
}

@media (min-width: 40em) {
  .gallery { columns: 3; column-gap: 1.35rem; }
  .gallery > li { margin-bottom: 1.35rem; }
}

.gallery--parents { columns: 2; }
@media (min-width: 40em) { .gallery--parents { columns: 2; } }
@media (min-width: 56em) { .gallery--parents { columns: 3; column-gap: 1.75rem; } }
@media (min-width: 56em) { .gallery--parents > li { margin-bottom: 1.75rem; } }
@media (min-width: 68em) { .gallery--kittens { columns: 4; } }

.photo {
  background: var(--surface);
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.photo img { border-radius: 2px; background: var(--surface-warm); width: 100%; }

.photo figcaption {
  padding: .7rem .2rem .1rem;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.photo__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

/* Breed and role, for the parents only. */
.photo__role {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-top: .3rem;
}

/* Gallery section header: heading, hairline, count. */
.group__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.group__head h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); margin: 0; }
.group__rule { height: 1px; flex: 1; background: var(--border); }
.group__count { font-size: .8rem; color: var(--ink-soft); flex: 0 0 auto; }

.group__lede { margin-bottom: 1.85rem; font-size: .92em; }

.gallery-group + .gallery-group { margin-top: var(--section-y); }

/* Closing call to action. Someone who has scrolled all twenty-four photographs
   is the likeliest person on the site to get in touch, and the contact details
   are a page away - so they are repeated here. */
.cta-band {
  margin-top: var(--section-y);
  padding: clamp(2rem, 4.5vw, 3.25rem) clamp(1.75rem, 4vw, 3.5rem);
  background: var(--ink);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem 3rem;
  flex-wrap: wrap;
}

.cta-band h2 { color: var(--on-dark); margin: 0 0 .4em; font-size: clamp(1.5rem, 3vw, 2.15rem); max-width: 32rem; }
.cta-band p { color: var(--on-dark-soft); margin: 0; max-width: 32rem; font-size: .95em; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.button--onDark { background: #fff; color: var(--ink); border-color: #fff; box-shadow: none; }
.button--onDark:hover { background: var(--accent-wash); color: var(--ink); }

.button--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.button--ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* 9. Lightbox =============================================================
   Progressive enhancement. js/lightbox.js wraps each [data-zoom] photo in a
   real <button> at runtime, so with JavaScript off there is no dead control
   sitting on the page - just a normal picture. Everything below only ever
   applies to markup that script created.
   ========================================================================= */

.zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: zoom-in;
  border-radius: 2px;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(27, 23, 19, .88);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.25rem, 5vw, 3rem);
  border: 0;
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }

.lightbox img {
  max-width: min(760px, 88vw);
  max-height: 76vh;
  width: auto;
  border-radius: 3px;
  background: #fff;
  padding: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

.lightbox__cap {
  margin: 0;
  color: var(--on-dark-body);
  font-size: .92rem;
  text-align: center;
  max-width: 35rem;
}

.lightbox__close {
  position: absolute;
  top: clamp(.75rem, 2vw, 1.25rem);
  right: clamp(.75rem, 2vw, 1.25rem);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .16); }

/* 10. Draft-mode placeholder highlighting =================================
   Currently off - every piece of copy is confirmed. Put class="draft" back on
   the <html> tag and any <span class="todo"> lights up again, along with the
   banner. Useful the next time the client sends copy in stages.
   ========================================================================= */

.draft .todo {
  background: #fff2b8;
  box-shadow: 0 0 0 2px #fff2b8;
  border-bottom: 2px dotted #c99a00;
  border-radius: 2px;
}

.draft .draft-banner { display: block; }

.draft-banner {
  display: none;
  background: #fff2b8;
  border-bottom: 1px solid #e0c65a;
  color: #4a3a00;
  font-size: .9rem;
  text-align: center;
  padding: .7rem 1.25rem;
  margin: 0;
  max-width: none;
}

@media print {
  .draft-banner, .skip-link, .topbar, .lightbox { display: none; }
  .site-footer, .cta-band, .contact-card--dark {
    background: #fff !important;
    color: #000 !important;
  }
  .site-footer a, .cta-band h2, .contact-card--dark .contact__value { color: #000 !important; }
}