/* ============================================================
   South Sterilisation & Welfare Campaign
   Design system — "F2b": name in the header, mark in the hero,
   portrait-native photography, donation-led homepage.
   Fraunces (display) + Plus Jakarta Sans (body)
   ============================================================ */
@import url("/assets/fonts/fonts.css");

:root {
  /* one cohesive blue scale (single hue, many lightnesses) */
  --navy:       #0e2733;   /* darkest — dark sections & headings */
  --navy-deep:  #08202b;   /* footer / deepest */
  --navy-2:     #123342;   /* dark section gradient top */
  --blue:       #1c6c98;   /* primary accent */
  --blue-bright:#2a86ad;   /* hover */
  --blue-deep:  #17567a;   /* accessible blue for text on light */
  --sky:        #79c3dc;   /* light blue for eyebrows/taglines on dark */

  --tint:       #e8f1f6;   /* pale blue surface */
  --sand:       #f2f6f8;   /* cool light canvas */
  --sand-2:     #e4edf2;   /* image mat */
  --shell:      #ffffff;   /* cards */
  --ink:        #16252c;   /* body text */
  --ink-soft:   #5a6d76;   /* muted */
  --line:       #dde8ee;   /* hairline */

  /* Donate colour. Change these three to switch the CTA colour site-wide
     (e.g. terracotta: #c2451c / #a63a18 / 194,69,28). */
  --act:        #1c6c98;
  --act-h:      #2a86ad;
  --act-sh:     28,108,152;

  /* "Found a home" status. Deliberately outside the blue palette so it reads
     as information rather than decoration. Change here to restyle everywhere. */
  --homed:      #157a4e;
  --homed-soft: #e8f5ee;
  --homed-line: #bfe3d1;
  --homed-ink:  #0f5537;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 16px;
  --radius-lg: 24px;
  --radius-sm: 12px;
  --shadow-sm: 0 1px 2px rgba(11,47,58,.05), 0 6px 16px rgba(11,47,58,.06);
  --shadow: 0 2px 8px rgba(11,47,58,.07), 0 18px 44px rgba(11,47,58,.11);
  --shadow-lg: 0 6px 16px rgba(11,47,58,.10), 0 28px 60px rgba(11,47,58,.16);
  --container: 1180px;
  /* Story pages use a narrower column than the full page container, so the
     photos and the text read as one thing instead of wide/narrow/wide. */
  --media: 960px;
}

* { box-sizing: border-box; }
/* The browser's own [hidden] rule is a UA style, so ANY author rule that sets
   `display` (.scard, .adopt a, …) silently beats it and the element stays on
   screen. This makes the hidden attribute actually hide things. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--navy);
  text-wrap: balance;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.05rem, 4.4vw, 3.25rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.2rem; letter-spacing: -.005em; line-height: 1.25; }
p { margin: 0 0 1.05em; }
a { color: var(--blue-deep); text-underline-offset: 3px; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2.25rem); }

/* ---------- eyebrow ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body);
  font-size: .75rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue-deep);
  margin: 0 0 .9rem;
}
.eyebrow::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: currentColor; }
.eyebrow--light,
.page-head .eyebrow,
.post-head .eyebrow,
.section--dark .eyebrow,
.spread .eyebrow { color: var(--sky); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .75rem 1.6rem;
  border-radius: 999px; border: 0; cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700; font-size: 1rem; line-height: 1;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn--donate { background: var(--act); color: #fff; box-shadow: 0 6px 18px rgba(var(--act-sh), .32); }
.btn--donate:hover { background: var(--act-h); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(var(--act-sh), .42); }
.btn--light { background: #fff; color: var(--blue-deep); box-shadow: var(--shadow-sm); }
.btn--light:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--ghost { background: rgba(255,255,255,.1); color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
.btn--ghost:hover { background: rgba(255,255,255,.2); border-color: #fff; transform: translateY(-2px); }
.btn--outline { background: transparent; color: var(--blue-deep); border: 1.5px solid var(--blue); }
.btn--outline:hover { background: var(--blue); color: #fff; transform: translateY(-2px); }
.btn--lg { min-height: 52px; padding: .9rem 2rem; font-size: 1.05rem; }
.btn--sm { min-height: 44px; padding: .5rem 1.15rem; font-size: .93rem; }

/* ---------- chips ---------- */
.chip {
  display: inline-block; align-self: flex-start;
  font-family: var(--font-body);
  font-size: .68rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue-deep);
  background: rgba(28,108,152,.11);
  border-radius: 999px; padding: .35em 1em;
  margin-bottom: .75rem;
}
.chip--adopt { color: #fff; background: var(--blue); }
.chip--homed { color: #fff; background: var(--homed); }
.post-head .chip--homed { background: var(--homed); color: #fff; }

.link-more, .more {
  font-weight: 700; text-decoration: none; white-space: nowrap;
  color: var(--blue-deep);
  display: inline-flex; align-items: center; gap: .35rem;
  transition: gap .18s ease;
}
.link-more:hover, .more:hover { gap: .6rem; }

/* ============================================================
   TOP BAR — the NAME set in type. No mark here; the mark lives
   in the hero, so nothing is repeated.
   ============================================================ */
/* ⚠ backdrop-filter lives on the ::before, NOT on .topbar itself.
   An element with backdrop-filter becomes the CONTAINING BLOCK for any
   position:fixed descendant. With it on .topbar, the mobile menu — which is
   `position:fixed; inset:0` and lives inside the header — sized itself against
   the 65px header instead of the viewport: the panel computed to 112px (its own
   padding), anchored to the header's bottom edge, and four of the six links
   rendered ABOVE the top of the screen. Only "Help Us" and "Donate" were
   reachable on a phone. Moving the blur to a pseudo-element keeps the frosted
   look and gives the menu the viewport back. Verified on live 2026-08-09. */
.topbar {
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(8,32,43,.93); backdrop-filter: blur(14px);
}
.topbar.scrolled { box-shadow: 0 6px 24px rgba(6,24,32,.26); }
.topbar__inner {
  max-width: 1300px; margin-inline: auto;
  padding: .55rem clamp(1.15rem, 4vw, 2.25rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.lock { display: flex; align-items: center; text-decoration: none; }
.lock__txt { display: flex; flex-direction: column; line-height: 1; }
.lock__a { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.lock__b { font-size: .59rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--sky); margin-top: .32rem; }
@media (max-width: 400px) { .lock__a { font-size: .95rem; } .lock__b { font-size: .53rem; letter-spacing: .12em; } }

.nav { display: flex; align-items: center; gap: clamp(.9rem, 1.7vw, 1.55rem); }
.nav a:not(.btn) {
  color: rgba(255,255,255,.85); text-decoration: none;
  font-weight: 600; font-size: .96rem;
  padding: .4rem 0; position: relative;
  transition: color .15s ease;
}
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--sky); border-radius: 2px;
  transition: right .22s ease;
}
.nav a:not(.btn):hover { color: #fff; }
.nav a:not(.btn):hover::after,
.nav a[aria-current="page"]::after { right: 0; }
.nav a[aria-current="page"] { color: #fff; }
.nav .btn { min-height: 42px; padding: .55rem 1.35rem; font-size: .95rem; }

.nav-toggle { display: none; background: none; border: 0; padding: .6rem; cursor: pointer; position: relative; z-index: 61; }
.nav-toggle span { display: block; width: 24px; height: 2.5px; background: #fff; margin: 5px 0; border-radius: 2px; transition: transform .22s, opacity .22s; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 0;
    flex-direction: column; justify-content: center; gap: .2rem;
    background: var(--navy-deep);
    padding: 5rem 1.5rem 2rem;
    transform: translateY(-100%); visibility: hidden;
    transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s .3s;
  }
  .nav.open { transform: translateY(0); visibility: visible; transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s; }
  .nav a:not(.btn) { font-family: var(--font-display); font-size: 1.55rem; padding: .5rem 0; }
  .nav a:not(.btn)::after { display: none; }
  .nav .btn { margin-top: 1.1rem; font-size: 1.1rem; min-height: 52px; padding: .85rem 2.2rem; }
  body.nav-open { overflow: hidden; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}

/* ============================================================
   HERO — split, mark-only emblem, donation-led
   ============================================================ */
.hero {
  background: linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff; position: relative; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; width: 560px; height: 560px; right: -180px; top: -220px;
  border-radius: 50%; background: radial-gradient(circle, rgba(121,195,220,.16), transparent 65%);
}
.hero__grid {
  display: grid; gap: 2rem; align-items: center; position: relative;
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem) clamp(4.5rem, 8vw, 6.5rem);
}
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; } }

/* the mark on its own, large. The header carries the name in type. */
.hero__emblem { display: flex; flex-direction: column; align-items: flex-start; gap: 1.05rem; margin: 0 0 1.45rem; }
.hero__emblem img { height: clamp(104px, 12vw, 168px); width: auto; }
.hero__emblem span {
  display: flex; align-items: center; gap: .7rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sky);
}
.hero__emblem span::before { content: ""; width: 30px; height: 2px; border-radius: 2px; background: var(--sky); }
@media (max-width: 899px) {
  .hero__emblem img { height: clamp(92px, 18vw, 132px); }
  .hero__emblem span { font-size: .64rem; letter-spacing: .15em; }
}

.hero h1 { color: #fff; max-width: 17ch; margin-bottom: .32em; }
.hero__sub { font-size: clamp(1.02rem, 1.85vw, 1.2rem); color: rgba(255,255,255,.88); max-width: 38ch; font-weight: 400; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
@media (max-width: 560px) { .hero__cta .btn { flex: 1 1 100%; } }
.hero__trust {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  margin: 1.7rem 0 0; padding: 0; list-style: none;
  font-size: .83rem; color: rgba(255,255,255,.75);
}
.hero__trust li { display: flex; align-items: center; gap: .45rem; }
.hero__trust li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sky); }

.hero__media { position: relative; }
.hero__photo {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 40%;
  border-radius: var(--radius-lg); box-shadow: 0 30px 70px rgba(0,0,0,.4);
}
@media (max-width: 899px) { .hero__photo { aspect-ratio: 5/4; object-position: center 45%; } }
.hero__caption {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem;
  background: rgba(8,32,43,.72); backdrop-filter: blur(8px);
  border-radius: 12px; padding: .7rem .95rem;
  font-size: .82rem; color: rgba(255,255,255,.92); line-height: 1.4;
}
.hero__caption b { color: #fff; font-weight: 700; }

/* ============================================================
   IMPACT — floating stats card overlapping the hero
   ============================================================ */
.impact {
  position: relative; z-index: 2;
  margin-top: clamp(-3.25rem, -4.5vw, -2.25rem);
  margin-bottom: clamp(2.75rem, 5.5vw, 4.25rem);
}
.impact__card { background: var(--shell); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.impact__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); }
@media (min-width: 800px) { .impact__grid { grid-template-columns: repeat(4, 1fr); } }
.imp { background: var(--shell); padding: 1.6rem 1.1rem; text-align: center; }
.imp b {
  display: block; font-family: var(--font-display);
  font-size: clamp(2.05rem, 4.4vw, 2.85rem); font-weight: 600;
  color: var(--blue); line-height: 1; letter-spacing: -.03em;
}
.imp span { display: block; font-size: .8rem; font-weight: 700; color: var(--ink-soft); margin-top: .5rem; line-height: 1.3; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--tint { background: var(--tint); }
.section--dark { background: linear-gradient(165deg, var(--navy-2), var(--navy)); color: #fff; }
.section--dark h2 { color: #fff; }
.section--dark p { color: rgba(255,255,255,.8); }

.head { max-width: 52rem; margin-bottom: clamp(1.8rem, 3.5vw, 2.75rem); }
.head p { color: var(--ink-soft); font-size: 1.06rem; margin: 0; }
.section--dark .head p { color: rgba(255,255,255,.78); }
.head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; max-width: none; }
.head--row h2 { margin: 0; }

/* ============================================================
   DONATION PICKER
   ============================================================ */
.picker { display: grid; gap: 1.5rem; }
@media (min-width: 920px) { .picker { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; } }
.amounts { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (max-width: 620px) { .amounts { grid-template-columns: 1fr; } }
.amt {
  background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.16);
  border-radius: 14px; padding: 1.1rem 1.15rem; text-align: left;
  color: #fff; font-family: var(--font-body); cursor: pointer;
  transition: border-color .16s, background .16s, transform .16s;
}
.amt:hover { border-color: var(--sky); background: rgba(255,255,255,.12); transform: translateY(-2px); }
.amt.is-on { border-color: var(--act); background: rgba(var(--act-sh), .22); }
.amt b { display: block; font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; letter-spacing: -.02em; }
.amt span { display: block; font-size: .85rem; color: rgba(255,255,255,.75); margin-top: .3rem; line-height: 1.35; }
/* Euro equivalent for donors who don't think in rupees. Deliberately quieter
   than the rupee figure — it's a reference point, not the amount they pay. */
.amt__eur { display: block; font-style: normal; font-size: .8rem; color: rgba(255,255,255,.62); margin-top: .1rem; }
.picker__cta { margin-top: 1.1rem; display: flex; gap: .7rem; flex-wrap: wrap; }
@media (max-width: 560px) { .picker__cta .btn { flex: 1 1 100%; } }
.picker__media img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 35%;
  border-radius: var(--radius-lg); box-shadow: 0 26px 60px rgba(0,0,0,.4);
}
@media (max-width: 919px) { .picker__media { display: none; } }

/* ============================================================
   STORY CARDS — portrait-native (4:5) with share controls
   ============================================================ */
.cards { display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.scard {
  background: var(--shell); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.scard:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.scard__media { position: relative; display: block; overflow: hidden; background: var(--tint); }
.scard__media img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 35%;
  transition: transform .5s cubic-bezier(.2,.6,.2,1);
}
.scard:hover .scard__media img { transform: scale(1.045); }
.scard__chip {
  position: absolute; top: .75rem; left: .75rem;
  background: rgba(8,32,43,.8); backdrop-filter: blur(6px); color: #fff;
  font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  border-radius: 999px; padding: .36em .9em;
}
.scard__chip--adopt { background: var(--act); }
.scard__body { padding: 1rem 1.15rem; flex: 1; text-decoration: none; color: inherit; display: block; }
.scard__body h3 { margin: 0 0 .35rem; transition: color .15s ease; }
.scard:hover .scard__body h3 { color: var(--blue-deep); }
.scard__date { font-size: .79rem; color: var(--ink-soft); font-weight: 600; }
.scard__excerpt { font-size: .92rem; color: var(--ink-soft); margin: .45rem 0 0; }
.scard__foot { display: flex; align-items: center; gap: .4rem; padding: .7rem 1.15rem 1rem; border-top: 1px solid var(--line); }
.scard__foot > span { font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); margin-right: auto; }
.sbtn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 10px; border: 1px solid var(--line); background: var(--shell);
  color: var(--navy); cursor: pointer; text-decoration: none;
  transition: background .16s, color .16s, border-color .16s;
}
.sbtn:hover { color: #fff; border-color: transparent; }
.sbtn--wa:hover { background: #25d366; }
.sbtn--fb:hover { background: #1877f2; }
.sbtn--cp:hover { background: var(--blue); }
.sbtn.is-copied { background: var(--blue); color: #fff; border-color: transparent; }

/* ============================================================
   ADOPTABLE TILES — photo-led, name over the image
   ============================================================ */
.adopt { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); }
.adopt a {
  position: relative; border-radius: var(--radius); overflow: hidden; text-decoration: none; display: block;
  box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
}
.adopt a:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.adopt img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: center 28%; }
.adopt__lab {
  position: absolute; inset: auto 0 0 0; padding: 2.6rem .95rem .95rem; color: #fff;
  background: linear-gradient(0deg, rgba(6,24,32,.92) 8%, transparent);
}
.adopt__lab h3 { color: #fff; margin: 0; font-size: 1rem; }
.adopt__lab em {
  display: inline-block; font-style: normal;
  font-size: .63rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  background: var(--act); color: #fff; border-radius: 999px; padding: .3em .8em; margin-bottom: .5rem;
}
.adopt__lab em.is-local { background: rgba(255,255,255,.22); }

/* ---------- featured adoptable ----------
   Used on the homepage when only one or two animals are still waiting. A lone
   thumbnail in a five-column grid reads as a mistake; a wide card reads as a
   choice, and gives the animal that is actually available real prominence. */
.adopt-feature { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
/* the count is known at build time, so no :has() needed */
@media (min-width: 900px) { .adopt-feature--two { grid-template-columns: repeat(2, 1fr); } }
.adopt-feature__card {
  display: grid; grid-template-columns: 1fr; align-items: stretch;
  background: var(--shell); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.adopt-feature__card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
@media (min-width: 560px) { .adopt-feature__card { grid-template-columns: minmax(180px, 34%) 1fr; } }
/* The photo is positioned absolutely so its intrinsic height does not size the
   grid row. Left in flow it forced a 501px-tall card and left ~165px of empty
   space under the text; now the text decides the height and the photo fills it. */
.adopt-feature__media {
  position: relative; overflow: hidden; background: var(--tint);
  min-height: 260px;
}
.adopt-feature__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 28%;
  transition: transform .5s cubic-bezier(.2,.6,.2,1);
}
.adopt-feature__card:hover .adopt-feature__media img { transform: scale(1.04); }
/* stacked on a phone the photo becomes a banner crop — at its natural 3:4 it
   filled over half the screen before any text appeared */
@media (max-width: 559px) {
  .adopt-feature__media { aspect-ratio: 3/2; min-height: 0; }
}
.adopt-feature__body {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(1.25rem, 3vw, 1.9rem);
}
.adopt-feature__tag {
  font-style: normal; font-size: .66rem; font-weight: 800;
  letter-spacing: .11em; text-transform: uppercase;
  background: var(--act); color: #fff; border-radius: 999px;
  padding: .32em .85em; margin-bottom: .8rem;
}
.adopt-feature__body h3 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin: 0 0 .5rem; }
.adopt-feature__text { color: var(--ink-soft); font-size: .98rem; line-height: 1.6; }
/* sits right under the text, not pinned to the floor of the card */
.adopt-feature__cta {
  margin-top: 1.1rem;
  font-weight: 700; color: var(--blue-deep);
  display: inline-flex; align-items: center; gap: .35rem;
  transition: gap .18s ease;
}
.adopt-feature__card:hover .adopt-feature__cta { gap: .6rem; }
/* a glimpse of the rest of their photos — capped in width so they read as
   supporting thumbnails rather than stretching across the whole text column */
.adopt-feature__more {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
  margin-top: 1.5rem; width: 100%; max-width: 340px;
}
.adopt-feature__more img {
  width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 30%;
  border-radius: 10px;
}

/* ---------- "found a home" ---------- */
/* A corner ribbon: unmissable, and it crosses the corner rather than the
   animal's face. The tile's overflow:hidden is what clips it to the corner. */
.adopt__ribbon, .lead-figure__ribbon {
  position: absolute; z-index: 2;
  top: 20px; right: -54px; width: 200px;
  padding: .45rem 0; text-align: center;
  transform: rotate(45deg);
  background: var(--homed); color: #fff;
  font-family: var(--font-body);
  font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(6,24,32,.3);
  pointer-events: none;
}
.adopt__lab em.is-homed { background: var(--homed); }
.adopt a.is-homed img { filter: saturate(.92); }

.lead-figure { overflow: visible; }
.lead-figure figure { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.lead-figure__ribbon { top: 30px; right: -60px; width: 220px; font-size: .74rem; padding: .55rem 0; }

.homed-banner {
  display: flex; align-items: flex-start; gap: .85rem;
  max-width: 44rem; margin: clamp(1.5rem, 3.5vw, 2.25rem) auto 0;
  padding: 1rem 1.15rem;
  background: var(--homed-soft); border: 1px solid var(--homed-line);
  border-radius: var(--radius);
  color: var(--homed-ink); font-size: .98rem; line-height: 1.5;
}
.homed-banner b { color: var(--homed-ink); }
.homed-banner__icon {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--homed); color: #fff;
}

/* ============================================================
   PAGE HEADERS & PROSE
   ============================================================ */
.page-head {
  background: linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff; padding: clamp(2.75rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.75rem); position: relative;
}
.page-head h1 { color: #fff; margin: 0; }
.page-head__sub { max-width: 46rem; color: rgba(255,255,255,.88); font-size: 1.12rem; margin: 1.1rem 0 0; }
.page-head__sub strong { color: #fff; }

.prose {
  max-width: 44rem;
  padding-block: clamp(2rem, 4.5vw, 3rem) clamp(2.75rem, 6vw, 4.25rem);
  font-size: 1.09rem; line-height: 1.78; color: var(--ink);
}
.prose > :first-child { margin-top: 0; }
/* the opening paragraph carries a little more weight */
.prose > p:first-of-type { font-size: 1.19rem; line-height: 1.65; color: var(--navy); }
.prose p { margin: 0 0 1.3em; }
.prose h2 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); line-height: 1.2; margin: 2.4em 0 .7em; padding-top: .2em; }
.prose h2::before { content: ""; display: block; width: 34px; height: 3px; border-radius: 3px; background: var(--blue); margin-bottom: .85rem; }
.prose h3 { font-size: 1.28rem; margin: 1.9em 0 .5em; }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 1.3em; }
.prose li { margin-bottom: .5em; padding-left: .2em; }
.prose li::marker { color: var(--blue); }
.prose a { color: var(--blue-deep); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(28,108,152,.35); }
.prose a:hover { text-decoration-color: var(--blue); }
.prose strong { font-weight: 700; color: var(--navy); }
.prose img { border-radius: var(--radius-sm); margin-block: 1.7rem; box-shadow: var(--shadow-sm); }
.prose figure { margin: 1.9rem 0; }
.prose figcaption { font-size: .88rem; color: var(--ink-soft); text-align: center; margin-top: .6rem; }
.prose hr { border: 0; height: 1px; background: var(--line); margin: 2.4rem 0; }
.prose blockquote {
  border-left: 3px solid var(--blue); margin: 2rem 0; padding: .4rem 0 .4rem 1.5rem;
  font-family: var(--font-display); font-style: italic; font-size: 1.3rem; line-height: 1.45; color: var(--blue-deep);
}
.prose blockquote p:last-child { margin-bottom: 0; }
/* Photos inside a story break out wider than the text column on desktop.
   The text stays at its readable measure (~69 characters); only the pictures
   use the space. Portrait shots are limited by height instead of width, so a
   tall photo never dominates the page — and because the image sizes itself
   rather than being letterboxed, its rounded corners and shadow still hug the
   actual picture. Below 1024px nothing changes: the photo matches the text. */
@media (min-width: 1024px) {
  .prose figure:not(.gallery) {
    --breakout: min(var(--media), calc(100vw - 5rem));
    width: var(--breakout);
    margin-inline: calc((100% - var(--breakout)) / 2);
  }
  .prose figure:not(.gallery) img {
    width: auto;
    max-width: 100%;
    /* 86vh keeps a tall photo inside one screen while still leaving portraits
       wider than the old text-column width. 58 of 69 story photos are portrait,
       so capping harder than this would shrink most of them. */
    max-height: 86vh;
    margin-inline: auto;
  }
}

/* galleries — portrait-friendly grid */
.prose figure.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .7rem; }
.prose figure.gallery figure { margin: 0; }
.prose figure.gallery img { margin: 0; height: 100%; object-fit: cover; aspect-ratio: 4/5; box-shadow: none; }

/* ============================================================
   POST HERO
   ============================================================ */
.post-head {
  background: linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff; padding-top: clamp(2.75rem, 6vw, 4.25rem);
}
.post-head__text { padding-bottom: clamp(4.5rem, 9vw, 6.5rem); }
.post-head .chip { background: rgba(255,255,255,.14); color: #fff; }
.post-head h1 { color: #fff; margin: .15em 0; max-width: 24ch; }
.post-head time { color: rgba(255,255,255,.72); font-weight: 600; }
.post-head--plain .post-head__text { padding-bottom: clamp(2rem, 5vw, 3rem); }

/* Lead photo — a rounded card lifting into the navy header. No white frame and
   no grey mat: the photo is cropped to a shape rather than letterboxed inside one. */
.lead-figure { position: relative; z-index: 1; max-width: var(--media); margin-top: clamp(-4rem, -7vw, -3rem); }
.lead-figure figure { margin: 0; }
.lead-figure img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 28%;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
@media (min-width: 760px) { .lead-figure img { aspect-ratio: 16/10; } }
.lead-figure figcaption { font-size: .85rem; color: var(--ink-soft); margin-top: .85rem; text-align: center; }

.post-nav {
  display: grid; gap: 1rem; grid-template-columns: 1fr 1fr;
  padding-block: 1rem 4rem; margin-top: 2rem;
  border-top: 1px solid var(--line);
}
.post-nav a { text-decoration: none; padding-top: 1.5rem; color: var(--ink); font-weight: 600; }
.post-nav a:hover { color: var(--blue-deep); }
.post-nav__prev span, .post-nav__next span {
  display: block; font-size: .78rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: .3rem;
}
.post-nav__next { text-align: right; }

/* ============================================================
   STRAY SECTIONS
   ============================================================ */
.stray-section { padding-block: clamp(2.5rem, 5vw, 3.75rem); }
.stray-section:first-of-type { padding-top: clamp(3rem, 6vw, 4.5rem); }
.section-sub { max-width: 46rem; color: var(--ink-soft); font-size: 1.08rem; margin: 0 0 2.2rem; }

/* ============================================================
   DONATE PAGE
   ============================================================ */
.donate-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); padding-block: clamp(2.5rem, 6vw, 4rem); align-items: start; }
.donate-card { background: var(--shell); border-radius: var(--radius); padding: 2rem 1.9rem; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.donate-card--feature { background: linear-gradient(165deg, var(--navy), var(--navy-deep)); color: #fff; border-color: transparent; }
.donate-card--feature h2, .donate-card--feature p { color: #fff; }
.donate-card h2 { font-size: 1.5rem; display: flex; align-items: center; gap: .6rem; }
.donate-card > p { color: var(--ink-soft); }
.donate-card--feature > p { color: rgba(255,255,255,.85); }
.donate-card__qr-placeholder {
  aspect-ratio: 1; max-width: 220px; margin-top: 1.2rem;
  border: 2px dashed rgba(255,255,255,.4); border-radius: var(--radius-sm);
  display: grid; place-items: center; text-align: center;
  color: rgba(255,255,255,.75); font-weight: 600;
}
.bank-details { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 1.2rem 0 0; font-size: .96rem; }
.bank-details dt { font-weight: 700; color: var(--blue-deep); }
.bank-details dd { margin: 0; overflow-wrap: anywhere; }
.bank-details__iban { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .9rem; }
.bank-details__note { color: var(--ink-soft); font-size: .82rem; }

/* ============================================================
   DONATE — cost tiles, payment details, copy buttons
   ============================================================ */
.give-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.give-tile { background: var(--shell); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.4rem; text-align: center; }
.give-tile__amt { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; color: var(--navy); letter-spacing: -.02em; margin: 0; }
.give-tile__eur { display: block; font-style: normal; font-family: var(--font-body);
  font-size: .82rem; font-weight: 500; color: var(--ink-soft); letter-spacing: 0; margin-top: .15rem; }
.give-tile__what { font-size: .93rem; color: var(--ink-soft); margin: .5rem 0 0; }

.pay { display: grid; gap: 1.15rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .pay { grid-template-columns: repeat(2, 1fr); } }
.pay__card { background: var(--shell); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.5rem; box-shadow: var(--shadow-sm); }
.pay__card--juice { background: linear-gradient(165deg, var(--navy), var(--navy-deep)); border-color: transparent; color: #fff; }
.pay__card--juice h3, .pay__card--juice p { color: #fff; }
.pay__card--juice .pay__label { color: var(--sky); }
.pay__card--juice .pay__note { color: rgba(255,255,255,.6); }
@media (min-width: 900px) { .pay__card--juice { grid-column: 1 / -1; } }

/* Juice card: copy on the left, the scannable payment code on the right. The
   code's own white quiet zone is baked into the SVG, so the tile only adds
   a little breathing room and a rounded edge. */
.juice { display: grid; gap: 1.5rem; align-items: center; }
.juice__body > :first-child { margin-top: 0; }
.juice__body > :last-child { margin-bottom: 0; }
.juice__qr { margin: 0; justify-self: start; text-align: center; }
.juice__qr img {
  display: block; width: 176px; height: 176px; max-width: 100%;
  background: #fff; border-radius: 12px; padding: 8px; box-shadow: var(--shadow-sm);
}
.juice__qr figcaption {
  margin-top: .6rem; font-size: .72rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.72);
}
@media (min-width: 640px) {
  .juice { grid-template-columns: 1fr auto; gap: 2rem; }
  .juice__qr { justify-self: end; }
}
.pay__label { font-size: .72rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--blue-deep); margin: 0 0 1rem; }
.pay__note { font-size: .84rem; color: var(--ink-soft); margin: 1rem 0 0; }

.paylist { margin: 0; display: grid; gap: .2rem; }
.paylist__row { display: grid; gap: .15rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.paylist__row:first-child { border-top: 0; padding-top: 0; }
.pay__card--juice .paylist__row { border-color: rgba(255,255,255,.16); }
.paylist dt { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.paylist dd { margin: 0; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: 1.02rem; color: var(--ink); }
.mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .97rem; letter-spacing: .01em; }
.mono--wrap { overflow-wrap: anywhere; }

.copy {
  flex: none; min-height: 34px; padding: .3rem .8rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--tint);
  font-family: var(--font-body); font-size: .78rem; font-weight: 700;
  color: var(--blue-deep); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.copy:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.copy.is-copied { background: var(--homed); border-color: var(--homed); color: #fff; }

.pay__after {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
  margin-top: 1.15rem; padding: 1.6rem 1.5rem;
  background: var(--shell); border: 1px solid var(--line); border-radius: var(--radius);
}
.pay__after h3 { margin: 0 0 .35rem; }
.pay__after p { margin: 0; color: var(--ink-soft); max-width: 46ch; font-size: .97rem; }
.pay__after-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
@media (max-width: 560px) { .pay__after-actions { width: 100%; } .pay__after-actions .btn { flex: 1 1 100%; } }
.page-head .hero__trust { margin-top: 1.4rem; }

/* ============================================================
   404
   ============================================================ */
.notfound { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.notfound__card {
  display: block; text-decoration: none; color: inherit;
  background: var(--shell); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.45rem; box-shadow: var(--shadow-sm);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.notfound__card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--blue); }
.notfound__card h3 { margin: 0 0 .3rem; color: var(--blue-deep); }
.notfound__card p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* ============================================================
   NEWSLETTER SIGN-UP
   ============================================================ */
.signup { background: var(--navy); color: #fff; }
.signup__inner { display: grid; gap: 1.75rem; padding-block: clamp(2.5rem, 5vw, 3.75rem); }
/* `start`, not `center`: the form is the taller column, so centring the text
   floated it down and the two sides began at different heights */
@media (min-width: 900px) { .signup__inner { grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; } }
.signup h2 { color: #fff; margin: 0 0 .4em; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.signup__text p { color: rgba(255,255,255,.8); margin: 0; max-width: 40ch; }
.signup__form { display: grid; gap: .8rem; }
@media (min-width: 560px) { .signup__form { grid-template-columns: 1fr 1fr; align-items: end; } }
.signup__field { display: grid; gap: .35rem; }
.signup__field span { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); }
.signup__field span em { font-style: normal; font-weight: 600; letter-spacing: .06em; color: rgba(255,255,255,.5); }
@media (min-width: 560px) { .signup__field--wide { grid-column: 1 / -1; } }
.signup__field input {
  width: 100%; min-height: 48px; padding: .7rem .9rem;
  border: 1.5px solid rgba(255,255,255,.22); border-radius: 12px;
  background: rgba(255,255,255,.08); color: #fff;
  font-family: var(--font-body); font-size: 1rem;
}
.signup__field input::placeholder { color: rgba(255,255,255,.42); }
.signup__field input:focus { outline: none; border-color: var(--sky); background: rgba(255,255,255,.14); }
/* The fallback link sits beside the button instead of below it: its 44px tap
   target is shorter than the button, so the row costs nothing extra in height.
   `flex: none` on the button so full width on a phone forces a real line break
   and the link wraps under it rather than squeezing the button narrower. */
.signup__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.4rem; }
.signup__form .btn { width: 100%; flex: none; }
@media (min-width: 560px) { .signup__form .btn { width: auto; } }
/* honeypot — off-screen rather than display:none, which some bots skip */
.signup__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.signup__msg { grid-column: 1 / -1; margin: 0; font-size: .9rem; color: var(--sky); min-height: 1.2em; }
.signup__alt { margin: 0; font-size: .84rem; }
.signup__alt a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255,255,255,.62); text-decoration: underline; text-underline-offset: 3px; }
.signup__alt a:hover { color: #fff; }
.signup__msg.is-error { color: #ffb4a2; }

/* ============================================================
   SHARE BAND + FOOTER
   ============================================================ */
.spread { background: linear-gradient(120deg, var(--navy) 0%, var(--blue) 100%); color: #fff; }
.spread__inner { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; justify-content: space-between; padding-block: clamp(2.5rem, 5vw, 3.75rem); }
.spread h2 { color: #fff; margin: 0 0 .3em; }
.spread p { margin: 0; color: rgba(255,255,255,.9); max-width: 36em; }
.spread__btns { display: flex; flex-wrap: wrap; gap: .65rem; }
@media (max-width: 560px) { .spread__btns { width: 100%; } .spread__btns .btn { flex: 1 1 100%; } }

.footer { background: var(--navy-deep); color: rgba(255,255,255,.7); padding-block: clamp(2.75rem, 5vw, 4rem) 6.5rem; }
@media (min-width: 761px) { .footer { padding-bottom: 2rem; } }
.footer__inner { display: grid; gap: 2.25rem; grid-template-columns: 1fr; }
@media (min-width: 780px) { .footer__inner { grid-template-columns: 1.35fr 1fr 1fr; } }
/* the lockup is an internally-centred composition, so it never sits perfectly
   flush in a left-aligned column. Kept a touch smaller and pulled left by its
   own transparent edge (62/858 of the file) so its wordmark lines up with the
   text beneath it. */
.footer__logo { height: 94px; width: auto; margin: 0 0 1.15rem -7px; }

/* association credentials, under the mark — one left edge, no label column */
.footer__org { display: grid; gap: .45rem; max-width: 34ch; }
.footer__org p { margin: 0; font-size: .84rem; line-height: 1.5; color: rgba(255,255,255,.55); }

/* `.footer__col-title` is a <p>, so a `.footer__meta p` rule would out-rank it
   (class+element beats class) and shove this heading 12px out of line with the
   Explore one. Both columns now share exactly these styles. */
.footer__col-title { font-family: var(--font-body); font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); margin: 0 0 .9rem; }
.footer__nav, .footer__meta { display: grid; gap: .5rem; align-content: start; font-size: .93rem; }
.footer__nav a, .footer__meta a { color: rgba(255,255,255,.85); text-decoration: none; }
.footer__nav a:hover, .footer__meta a:hover { color: #fff; }
.footer__wa { display: inline-flex; align-items: center; gap: .45rem; }
.footer__wa svg { flex: none; color: #25d366; }
.footer__base { max-width: var(--container); margin: 2.25rem auto 0; padding: 1.35rem clamp(1.15rem,4vw,2.25rem) 0; border-top: 1px solid rgba(255,255,255,.1); font-size: .82rem; color: rgba(255,255,255,.42); }

/* The share nudge, folded into the footer instead of its own full-width band.
   It sits in a tinted panel so it still carries weight — as plain footer text
   it disappeared into the small print. */
.footer__share {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem;
  margin-top: 2.5rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: linear-gradient(120deg, rgba(28,108,152,.34), rgba(28,108,152,.15));
  border: 1px solid rgba(121,195,220,.3);
  border-radius: var(--radius);
}
.footer__share-icon {
  flex: none; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(121,195,220,.18); color: var(--sky);
}
.footer__share-text { flex: 1 1 20rem; }
.footer__share p { margin: 0; font-size: .95rem; color: rgba(255,255,255,.8); }
/* must out-rank `.footer__share p` above — the title is a <p> too, so a bare
   class selector loses to class+element and the heading silently stays small */
p.footer__share-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  line-height: 1.15; letter-spacing: -.015em;
  color: #fff; margin: 0 0 .3rem;
}
.footer__share-btns { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 620px) {
  .footer__share-icon { display: none; }
  .footer__share-btns { width: 100%; }
  .footer__share-btns .btn { flex: 1 1 100%; }
}

/* ============================================================
   MOBILE ACTION DOCK — Donate always in thumb reach
   ============================================================ */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none; gap: .55rem;
  padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(8,32,43,.95); backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,.1);
}
.dock .btn { flex: 1; min-height: 46px; font-size: .94rem; }
.dock .sbtn { flex: 0 0 46px; height: 46px; width: 46px; background: rgba(255,255,255,.12); border-color: transparent; color: #fff; }
.dock .sbtn:hover { background: rgba(255,255,255,.22); }
@media (max-width: 760px) { .dock { display: flex; } }

/* ============================================================
   FILTER PILLS (stories listing)
   ============================================================ */
.filters { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 2rem; }
.filter {
  font-family: var(--font-body); font-weight: 650; font-size: .9rem;
  min-height: 44px; padding: .5rem 1.1rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--shell); color: var(--ink-soft);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.filter:hover { color: var(--navy); border-color: var(--blue); }
.filter.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }
.filters-empty { color: var(--ink-soft); padding: 1rem 0; }

/* ============================================================
   SHARE ROW (single post) + STORY CTA
   ============================================================ */
.share { max-width: 44rem; margin: clamp(1.5rem, 4vw, 2.25rem) auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; }
.share__label { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.share__buttons { display: flex; flex-wrap: wrap; gap: .55rem; }
.share__btn {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .5rem .95rem; border-radius: 10px;
  font-family: var(--font-body); font-weight: 650; font-size: .9rem;
  border: 1px solid var(--line); background: var(--shell); color: var(--navy);
  cursor: pointer; text-decoration: none; line-height: 1;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.share__btn svg { flex: none; opacity: .85; }
.share__btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.share__btn--wa:hover { background: #25d366; border-color: #25d366; color: #fff; }
.share__btn--fb:hover { background: #1877f2; border-color: #1877f2; color: #fff; }
.share__btn--copy:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.share__btn:hover svg { opacity: 1; }
.share__btn.is-copied { background: var(--blue); border-color: var(--blue); color: #fff; }

/* sits inside a .container.media-col, so it already matches the photo column */
.story-cta {
  margin: clamp(2.25rem, 5vw, 3.25rem) 0 0;
  background: linear-gradient(150deg, var(--navy), var(--navy-deep));
  color: #fff; border-radius: var(--radius-lg);
  padding: clamp(1.9rem, 4.5vw, 2.75rem);
  text-align: center;
}
.story-cta h2 { color: #fff; font-size: clamp(1.35rem, 3vw, 1.75rem); margin: 0 0 .5em; }
.story-cta p { color: rgba(255,255,255,.82); font-size: 1.02rem; max-width: 32em; margin: 0 auto 1.6rem; }
.story-cta__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.story-cta .btn--outline { color: #fff; border-color: rgba(255,255,255,.55); }
.story-cta .btn--outline:hover { background: #fff; color: var(--navy); border-color: #fff; }

/* ============================================================
   MOTION + FOCUS
   ============================================================ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.6,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 6px; }

/* ============================================================
   PHOTO GALLERY + LIGHTBOX (story pages)
   ============================================================ */
.gal-block { max-width: var(--media); padding-block: clamp(1.5rem, 3.5vw, 2.5rem); }
/* any .container that should line up with the story photo column */
.media-col { max-width: var(--media); }
/* ---------- shared tile ---------- */
.gal a {
  display: block; position: relative; overflow: hidden;
  border-radius: 10px; background: var(--sand-2);
  text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.gal img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 32%;
  display: block; transition: transform .45s cubic-bezier(.2,.6,.2,1);
}
.gal a:hover img { transform: scale(1.04); }
/* a subtle affordance so it reads as tappable */
.gal a::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(6,24,32,.25), transparent 42%);
  opacity: 0; transition: opacity .25s;
}
.gal a:hover::after, .gal a:focus-visible::after { opacity: 1; }

/* ---------- 2. GRID — tidy, with a "+N more" reveal ---------- */
.gal--grid { display: grid; gap: .5rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .gal--grid { grid-template-columns: repeat(3, 1fr); gap: .6rem; } }
@media (min-width: 900px) { .gal--grid { grid-template-columns: repeat(4, 1fr); } }
.gal--grid a { aspect-ratio: 3/4; }
.gal--grid a.is-hidden { display: none; }
.gal__more {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(8,32,43,.62); backdrop-filter: blur(2px);
  color: #fff; font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em;
  pointer-events: none;
}

/* count label above any gallery */
.gal-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin: 0 0 .9rem;
}
.gal-head p {
  margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft);
}
.gal-head span { font-size: .82rem; color: var(--ink-soft); }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6,20,26,.96);
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.lb.is-open { opacity: 1; pointer-events: auto; }
body.lb-open { overflow: hidden; }

.lb__bar {
  position: relative; z-index: 3; flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: max(.75rem, env(safe-area-inset-top)) 1rem .75rem;
  color: rgba(255,255,255,.9);
}
.lb__count { font-size: .85rem; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.lb__close {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff;
  transition: background .18s;
}
.lb__close:hover { background: rgba(255,255,255,.28); }

.lb__track {
  flex: 1; display: flex; min-height: 0;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lb__track::-webkit-scrollbar { display: none; }
/* FLEX, not grid: a grid row is auto-sized, so `max-height:100%` on the image
   has nothing definite to resolve against and the photo renders at natural size
   and gets clipped. As a stretched flex item the slide has a definite height,
   so the image reliably fits inside it. */
.lb__slide {
  flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center;
  padding: .5rem;
  overflow: hidden;
}
.lb__slide img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  border-radius: 4px;
  touch-action: pinch-zoom;
  cursor: zoom-in;
}
/* Zoom = show the photo at its true size and let the slide scroll.
   `safe center` keeps it centred while it fits and falls back to the top-left
   once it overflows, so the top of the photo is never unreachable. */
.lb__slide.is-zoomed {
  overflow: auto;
  align-items: safe center; justify-content: safe center;
  touch-action: pan-x pan-y pinch-zoom;
}
.lb__slide.is-zoomed img {
  max-width: none; max-height: none; width: auto; height: auto;
  cursor: zoom-out;
}

.lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 48px; height: 48px; display: none; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff;
  transition: background .18s;
}
.lb__nav:hover { background: rgba(255,255,255,.3); }
.lb__nav[disabled] { opacity: .25; cursor: default; }
.lb__prev { left: 1rem; } .lb__next { right: 1rem; }
@media (min-width: 760px) { .lb__nav { display: grid; } }

.lb__cap {
  flex: none; z-index: 3;
  padding: .75rem 1.25rem max(1rem, env(safe-area-inset-bottom));
  text-align: center; color: rgba(255,255,255,.62); font-size: .82rem; line-height: 1.45;
}
.lb__hint { color: rgba(255,255,255,.42); font-size: .74rem; }
@media (min-width: 760px) { .lb__hint--touch { display: none; } }
@media (max-width: 759px) { .lb__hint--desk { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .lb, .lb__slide img, .gal img { transition: none !important; }
}

/* ---------- mobile refinements ---------- */
@media (max-width: 760px) {
  .post-nav { grid-template-columns: 1fr; gap: 0; }
  .post-nav a { padding: 1.25rem 0; }
  .post-nav a + a { border-top: 1px solid var(--line); }
  .post-nav__next { text-align: left; }
  .share { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .share__buttons { width: 100%; }
  .story-cta__actions .btn { flex: 1 1 auto; justify-content: center; }
  /* touch targets clear 44px */
  .footer__nav a, .footer__meta a { display: inline-flex; align-items: center; min-height: 44px; }
  .more, .link-more { min-height: 44px; }
  .sbtn { width: 44px; height: 44px; }
  .lock { min-height: 44px; }
  .copy { min-height: 44px; padding-inline: 1rem; }
}

/* ============================================================
   QUIZ NIGHT — /quiz-night/
   Site palette, but the layout borrows the poster's shape: a dark
   header, a ticket-like facts row, and warm gold used ONLY where the
   poster uses it (the price and the prizes) so the page feels like the
   event without inventing a second brand.
   ============================================================ */
:root { --gold: #c9a227; --gold-soft: #f0e4c0; }

.qhero { background: linear-gradient(165deg, var(--navy-2), var(--navy)); color: #fff;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.qhero__inner { text-align: center; }
.qhero h1 { font-family: var(--font-display); font-size: clamp(2.9rem, 9vw, 5.2rem);
  line-height: .95; letter-spacing: -.03em; margin: .3rem 0 .6rem;
  /* colour MUST be set explicitly: the global `h1 { color: var(--navy) }` is a
     bare element rule that a `color` on the section ancestor never overrides,
     so the title rendered navy-on-navy and vanished. */
  color: #fff; }
.qhero__sub { font-family: var(--font-display); font-size: clamp(1.15rem, 3vw, 1.7rem);
  color: #fff; }
.qhero__note { color: var(--gold); font-size: .93rem; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 700; margin-top: .5rem; }

.qfacts { display: grid; gap: 1px; background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius);
  overflow: hidden; margin: clamp(2rem, 5vw, 3rem) auto 0; max-width: 62rem; text-align: left; }
@media (min-width: 760px) { .qfacts { grid-template-columns: repeat(3, 1fr); } }
.qfacts > div { background: rgba(255,255,255,.05); padding: 1.15rem 1.3rem; }
.qfacts dt { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: .45rem; }
.qfacts b { display: block; font-size: 1.05rem; line-height: 1.3; }
.qfacts span { display: block; font-size: .9rem; color: rgba(255,255,255,.72); margin-top: .2rem; }
.qhero__cta { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center;
  margin-top: clamp(1.6rem, 4vw, 2.2rem); }

/* the line that makes a lone reader feel invited */
.qlede { font-family: var(--font-display); font-size: clamp(1.25rem, 3.2vw, 1.9rem);
  line-height: 1.35; max-width: 46rem; margin-inline: auto; text-align: center;
  color: var(--navy); }

.qgrid { display: grid; gap: 1.1rem; }
@media (min-width: 760px) { .qgrid { grid-template-columns: repeat(3, 1fr); } }
.qcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.5rem; }
.qcard h3 { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: .7rem; }
.qcard ul { list-style: none; padding: 0; margin: 0; }
.qcard li { padding: .38rem 0 .38rem 1.2rem; position: relative; font-size: .97rem; }
.qcard li::before { content: ""; position: absolute; left: 0; top: .95rem;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.qcard__lead { font-size: .9rem; color: var(--ink-soft); margin-bottom: .45rem; }
.qcard__note { font-size: .88rem; color: var(--ink-soft); margin-top: .9rem; line-height: 1.5; }

.qprizes { display: grid; gap: 1rem; }
@media (min-width: 660px) { .qprizes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .qprizes { grid-template-columns: repeat(4, 1fr); } }
.qprize { border: 1px solid var(--line); border-top: 3px solid var(--gold);
  border-radius: var(--radius); padding: 1.2rem 1.3rem; background: #fff; }
.qprize b { display: block; font-family: var(--font-display); font-size: 1.1rem;
  margin-bottom: .35rem; }
.qprize span { font-size: .92rem; color: var(--ink-soft); }

.qmap { margin: 0; }
.qmap img { width: 100%; height: auto; display: block; border-radius: var(--radius);
  border: 1px solid var(--line); }
.qmap figcaption { margin-top: 1rem; }

.qsteps { display: grid; gap: 1.4rem; }
@media (min-width: 860px) { .qsteps { grid-template-columns: repeat(2, 1fr); align-items: start; } }
.qstep { display: flex; gap: 1rem; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem; }
.qstep__n { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--navy); color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: .95rem; }
.qstep h3 { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: .5rem; }
.qstep p { font-size: .97rem; line-height: 1.55; margin-bottom: 1rem; }
.qstep .paylist { margin-top: .2rem; }

.qwhy { display: grid; gap: clamp(1.8rem, 4vw, 3rem); }
@media (min-width: 900px) { .qwhy { grid-template-columns: 1.15fr 1fr; align-items: start; } }
.qwhy h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.15; margin-bottom: .9rem; }
/* Light, not dark: sitting directly above the dark footer, a dark band here
   read as part of the footer rather than as information about the evening. */
.qwhy h2 { color: var(--navy); }
.qwhy p { color: var(--ink-soft); line-height: 1.6; margin-bottom: 1.3rem; }
.qnotes { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.qnotes li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.15rem; font-size: .94rem; line-height: 1.55; color: var(--ink-soft); }
.qnotes b { color: var(--navy); }

/* Quiz poster download — the poster as an asset to share, not as page content */
.qposter { display: grid; gap: clamp(1.5rem, 4vw, 2.6rem); align-items: center; }
@media (min-width: 760px) { .qposter { grid-template-columns: minmax(0, 240px) 1fr; } }
.qposter__img { display: block; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(6,24,32,.12);
  transition: transform .25s ease; }
.qposter__img:hover { transform: translateY(-3px); }
.qposter__img img { width: 100%; height: auto; display: block; }
.qposter h2 { font-family: var(--font-display); font-size: clamp(1.4rem, 3.2vw, 2rem);
  margin-bottom: .7rem; }
.qposter p { color: var(--ink-soft); line-height: 1.6; margin-bottom: 1.2rem; max-width: 34rem; }
.qposter__btns { display: flex; flex-wrap: wrap; gap: .7rem; }
/* Interest-only state: a single step should not sit in a two-up grid. */
.qsteps--single { grid-template-columns: 1fr !important; max-width: 40rem; }
/* The two language editions, equal weight, side by side. */
.qposters { display: grid; gap: clamp(1.4rem, 3.5vw, 2.4rem); }
@media (min-width: 700px) { .qposters { grid-template-columns: 1fr 1fr; } }
.qposterc { display: grid; grid-template-columns: minmax(0, 150px) 1fr;
  gap: clamp(1rem, 2.5vw, 1.4rem); align-items: center; margin: 0; }
.qposterc figcaption b { display: block; font-family: var(--font-display);
  font-size: 1.15rem; margin-bottom: .6rem; }
.qposterc .qposter__btns { gap: .55rem; }

/* ------------------------------------------------------------
   QUIZ — tightened rhythm.
   An event page is scanned, not read: the reader wants date, price,
   what's included and how to book without a long scroll. All scoped to
   .quiz so the rest of the site keeps its calmer spacing.
   ------------------------------------------------------------ */
.quiz .section { padding-block: clamp(2rem, 4vw, 3.1rem); }
.quiz .head { margin-bottom: clamp(1.1rem, 2vw, 1.5rem); }
.quiz .container { max-width: 76rem; }          /* wider: less empty margin either side */

.quiz .qhero { padding: clamp(2.2rem, 5vw, 3.6rem) 0 clamp(1.8rem, 3.5vw, 2.6rem); }
.quiz .qhero h1 { font-size: clamp(2.6rem, 8vw, 4.4rem); margin: .2rem 0 .45rem; }
.quiz .qfacts { margin-top: clamp(1.4rem, 3vw, 2rem); }
.quiz .qfacts > div { padding: .95rem 1.15rem; }
.quiz .qhero__cta { margin-top: clamp(1.2rem, 2.5vw, 1.6rem); }

.quiz .qlede { font-size: clamp(1.15rem, 2.6vw, 1.6rem); max-width: 52rem; }
.quiz .qcard { padding: 1.15rem 1.25rem; }
.quiz .qcard li { padding-block: .28rem; }
.quiz .qcard__note { margin-top: .7rem; }
.quiz .qprize { padding: 1rem 1.1rem; }
.quiz .qstep { padding: 1.2rem 1.25rem; }
.quiz .qwhy { gap: clamp(1.4rem, 3vw, 2.2rem); }
.quiz .qnotes { gap: .65rem; }
.quiz .qnotes li { padding: .8rem 1rem; }
.quiz .qposter { gap: clamp(1.2rem, 3vw, 2rem); }

/* the two sections that sit side by side on a wide screen rather than stacking */
@media (min-width: 1000px) {
  .quiz .qmap img { max-height: 400px; object-fit: cover; object-position: center; }
}

/* Mobile: the prize and fact cards carry very little text each, so one per row
   wastes most of the screen. Two columns roughly halves that block. */
/* upper bound matters: without it this later rule beats the 4-column
   desktop rule declared earlier at the same specificity. */
@media (min-width: 360px) and (max-width: 659px) {
  .quiz .qprizes { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .quiz .qprize { padding: .85rem .9rem; }
  .quiz .qprize b { font-size: 1rem; }
  .quiz .qprize span { font-size: .85rem; }
}
@media (max-width: 759px) {
  .quiz .qcard { padding: 1rem 1.1rem; }
  .quiz .qgrid { gap: .8rem; }
  .quiz .qcard h3 { margin-bottom: .45rem; }
  .quiz .qstep { padding: 1.1rem; gap: .8rem; }
  .quiz .qsteps { gap: .9rem; }
  .quiz .paylist__row { padding-block: .55rem; }
  .quiz .qhero__cta .btn { width: 100%; }
}

/* The poster thumbnail is a signpost to a download, not something to read on a
   phone — full width it was the tallest block on the page. */
@media (max-width: 759px) {
  .quiz .qposterc { grid-template-columns: 96px 1fr; align-items: start; gap: .9rem; }
  .quiz .qposterc figcaption b { font-size: 1.05rem; margin-bottom: .45rem; }
  .quiz .qposter__btns .btn { width: 100%; }
}

/* Venue: map and photo side by side, equal height so the block reads as one
   unit rather than two stacked cards. */
.qvenue { display: grid; gap: 1rem; }
@media (min-width: 860px) { .qvenue { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.qvenue figure { margin: 0; display: flex; flex-direction: column; }
/* `> img` matters: a plain `.qvenue__photo img` also matches the venue's small
   logo inside the figcaption, and it outranks the logo rule — the lockup was
   being blown up to 330px and cropped. */
.qvenue > figure > img { width: 100%; display: block; border-radius: var(--radius);
  border: 1px solid var(--line); height: clamp(220px, 34vw, 330px); object-fit: cover; }
.qvenue__map > img { object-position: center; }
.qvenue__photo > img { object-position: center 58%; }
.qvenue figcaption { margin-top: .8rem; display: flex; align-items: center;
  justify-content: center; min-height: 46px; }
/* the restaurant's own lockup, kept small — it is a credit, not a headline */
.qvenue__logo { width: auto !important; height: 34px; border: 0 !important;
  border-radius: 0 !important; }
@media (max-width: 859px) { .qvenue__logo { height: 30px; } }

/* "Last time" — a link card, not an article. Photo left, text right, whole
   thing clickable. */
.qlast { display: grid; gap: 1.1rem; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem; transition: transform .2s ease, box-shadow .2s ease; }
@media (min-width: 700px) { .qlast { grid-template-columns: 220px 1fr; align-items: center; gap: 1.5rem; padding: 1.2rem; } }
.qlast:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(6,24,32,.10); }
.qlast > img { width: 100%; height: clamp(150px, 22vw, 190px); object-fit: cover;
  object-position: center 30%; border-radius: calc(var(--radius) - 4px); display: block; }
.qlast__body { display: block; }
.qlast__body b { display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem); line-height: 1.2; margin: .45rem 0 .5rem;
  color: var(--navy); }
.qlast__body > span:last-of-type { display: block; color: var(--ink-soft);
  font-size: .96rem; line-height: 1.55; }
.qlast__body em { display: inline-block; font-style: normal; font-weight: 700;
  color: var(--blue-deep); margin-top: .8rem; transition: transform .18s ease; }
.qlast:hover .qlast__body em { transform: translateX(3px); }