/* ===========================================================
   2026 Fall campaign: the landing page and the story pages
   -----------------------------------------------------------
   Built by tools/campaign/build.py. One section per component, each
   selector defined once, phones first, then the 640, 760 and 960 steps.
   Consolidated 2026-10-29 from a day of appended revisions; the dated
   comments keep the decision behind each value.
   =========================================================== */

/* --- Hero, shared --------------------------------------------
   A navy panel and a photograph, the rounded foot lying over the table.
   The hand-cut edge belongs to the preview cards only, so neither hero
   shows its cut paths. */
.cstory-hero {
  --hero-split: 46%;
  --label-ink: var(--gold);
  position: relative;
  z-index: 3;
  display: grid;
  background: var(--navy);
  color: var(--cream);
  border-bottom-left-radius: var(--r-sheet);
  border-bottom-right-radius: var(--r-sheet);
  overflow: clip;
  isolation: isolate;
}
.cstory-hero__photo {
  position: relative;
  min-height: 50svh;
}
.cstory-hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cstory-hero__cut,
.cstory-hero__cut-h { display: none; }
.cstory-hero__sheet { fill: var(--navy); }
.cstory-hero__under { fill: var(--gold); }
/* Sandbox only: the photo slot while there is no approved photograph. */
.cstory-hero__photo:has(.cstory-hero__placeholder) { background: var(--navy-dark); }
.cstory-hero .cstory-hero__placeholder {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(80%, 26rem);
  margin: 0;
  transform: translate(-50%, -50%);
  border-color: var(--gold);
  background: rgba(232, 184, 75, 0.12);
  color: var(--cream);
}
.cstory-hero__copy {
  position: relative;
  z-index: 2;
  padding: var(--space-md) calc(var(--sheet-inset) + var(--sheet-pad-inline)) calc(var(--space-2xl) + var(--r-sheet));
}
.cstory-hero .eyebrow {
  color: var(--gold);
  margin-bottom: var(--space-md);
}
/* A story's title fills its panel (Clem, 2026-10-29). */
.cstory-hero h1 {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: clamp(2.6rem, 1.5rem + 5vw, 4.4rem);
  line-height: 1.02;
  color: var(--white);
  text-wrap: balance;
}
.page-story .cstory-hero .eyebrow a { color: inherit; text-decoration: none; }
.page-story .cstory-hero .eyebrow a:hover { color: var(--gold-light); }
/* "← 2026 Campaign": a 44px tap target at the same visual spacing. */
.cstory-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 2.75rem;
  margin-block: -0.6rem calc(var(--space-lg) - 0.6rem);
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sand);
}
.cstory-back:hover { color: var(--gold-light); }

/* From 960 the photograph takes the right of the hero, full height; the
   copy sits on the site's shared content edge. A story's panel is half
   the width (Franc, 2026-10-29). */
@media (min-width: 960px) {
  .cstory-hero {
    grid-template-columns: var(--hero-split) minmax(0, 1fr);
    min-height: min(calc(100svh + var(--r-sheet)), 60rem);
  }
  .page-story .cstory-hero { --hero-split: 50%; }
  .cstory-hero__photo {
    grid-column: 2;
    grid-row: 1;
    min-height: 62svh;
  }
  .cstory-hero__copy {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    padding: var(--space-2xl) var(--space-xl) calc(var(--space-2xl) + var(--r-sheet)) var(--edge, calc(var(--sheet-inset) + var(--sheet-pad-inline)));
  }
  .page-story .cstory-hero__copy { padding-right: var(--space-lg); }
  .cstory-hero h1 { font-size: min(5.6vw, 6.25rem); }
}

/* A story's hero, flipped (Franc, 2026-10-29): the photograph on the left,
   the navy panel on the right with its text set left, toward the picture.
   The Even Ground logo, large, sits at the photograph's top left and is the
   way home. */
@media (min-width: 960px) {
  .page-story .cstory-hero {
    --logo-h: clamp(3rem, 1.6rem + 2vw, 4rem);
    grid-template-columns: minmax(0, 1fr) var(--hero-split);
  }
  .page-story .cstory-hero__photo { grid-column: 1; }
  .page-story .cstory-hero__copy {
    position: static;
    grid-column: 2;
    padding: var(--space-2xl) var(--edge, calc(var(--sheet-inset) + var(--sheet-pad-inline))) calc(var(--space-2xl) + var(--r-sheet)) var(--space-2xl);
  }
}

/* --- The campaign hero (Franc, 2026-10-27 to 29) --------------
   One photograph, full bleed, the title on a hand-cut navy label with the
   gold under-sheet. Phones: a navy banner (logo, eyebrow, title) above the
   photograph. From 960 the label lies on the photograph; campaign.json sets
   the focal point, the zoom and where the label sits. */
.cstory-hero--campaign {
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.cstory-hero--campaign .cstory-hero__photo {
  height: 58svh;
  min-height: 20rem;
  border-bottom-left-radius: var(--r-sheet);
  border-bottom-right-radius: var(--r-sheet);
  overflow: clip;
  background: var(--navy);
}
/* !important: the generator also writes an inline object-position. */
.cstory-hero--campaign .cstory-hero__photo img {
  object-position: var(--pos-phone, 64% 30%) !important;
  scale: var(--scale-phone, 1);
}
.cstory-hero--campaign .cstory-hero__copy {
  order: -1;
  position: static;
  z-index: 3;
  margin: 0;
  padding: 1.1rem calc(var(--sheet-inset) + 0.5rem) 1.6rem;
}
.cstory-label {
  position: relative;
  display: block;
  padding: 0;
  isolation: isolate;
}
.cstory-label__paper {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: none;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cstory-label__sheet { fill: var(--navy); filter: drop-shadow(0 18px 30px rgba(15, 29, 48, 0.35)); }
.cstory-label__under { fill: var(--gold); transform: translate(1.4px, 2.6px) rotate(1.4deg); transform-origin: 50% 50%; }
#main .cstory-label .eyebrow {
  margin-bottom: 0.9rem;
  font-size: clamp(0.85rem, 0.7rem + 0.5vw, 1.15rem);
  letter-spacing: 0.2em;
  color: var(--gold);
}
.cstory-hero--campaign .cstory-label h1 {
  font-size: clamp(2.3rem, 1.2rem + 5.2vw, 3.6rem);
  line-height: 0.98;
  white-space: normal;
  text-wrap: balance;
}
@media (min-width: 960px) {
  .cstory-hero--campaign {
    --hero-split: 36%;
    display: block;
    background: transparent;
  }
  .cstory-hero--campaign .cstory-hero__photo {
    height: min(calc(100svh + var(--r-sheet)), 60rem);
    min-height: 36rem;
    background: transparent;
  }
  .cstory-hero--campaign .cstory-hero__photo img {
    object-position: var(--pos-lap, 50% 24%) !important;
    scale: var(--scale-lap, 1);
    transform-origin: var(--origin-lap, 50% 50%);
  }
  /* Default: the label low left, lifted by --label-lift-lap. */
  .cstory-hero--campaign .cstory-hero__copy {
    order: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: calc(var(--r-sheet) + var(--label-lift-lap, 3svh));
    padding: var(--space-2xl) var(--edge, calc(var(--sheet-inset) + var(--sheet-pad-inline))) 0;
    align-self: auto;
  }
  .cstory-label {
    display: inline-block;
    padding: clamp(1.4rem, 1rem + 2vw, 2.6rem) clamp(1.4rem, 1rem + 2.4vw, 3.2rem) clamp(1.6rem, 1.1rem + 2.2vw, 2.9rem);
  }
  .cstory-label__paper { display: block; }
  .cstory-hero--campaign .cstory-label h1 {
    font-size: clamp(2.7rem, 0.4rem + 3.7vw, 5.2rem);
    white-space: nowrap;
    text-wrap: nowrap;
  }
  /* label_lap "top-right" (Franc, 2026-10-29): over the soft-focus teacher,
     on the site's edge, centred on the first screen. */
  .cstory-hero--label-tr .cstory-hero__copy {
    top: calc(min(100svh, 60rem - var(--r-sheet)) / 2);
    bottom: auto;
    translate: 0 -50%;
    padding-right: calc(var(--edge, 6rem) * 0.55);
    text-align: right;
  }
  .cstory-hero--label-tr .cstory-label { text-align: left; }
}

/* The logo: on the landing's title label, on a story's navy panel. */
.cbrand { display: inline-flex; width: fit-content; border-radius: var(--radius-sm); }
.cbrand img { height: 1.9rem; width: auto; }
.cstory-label .cbrand { margin-bottom: 1.1rem; }
.cstory-hero--campaign .cstory-label .cbrand { margin-bottom: 1.4rem; }
/* The logo on the campaign title label, larger and with more room above the
   eyebrow (Franc, 2026-10-29). */
.cstory-hero--campaign .cstory-label .cbrand img { height: 2.3rem; }
.cstory-hero__copy > .cbrand { display: flex; margin-bottom: var(--space-xl); }
.page-story .cstory-hero__copy > .cbrand { margin-bottom: var(--space-lg); }
@media (min-width: 960px) {
  .cbrand img { height: 2.2rem; }
  .cstory-hero--campaign .cstory-label .cbrand { margin-bottom: 1.7rem; }
  .cstory-hero--campaign .cstory-label .cbrand img { height: clamp(3rem, 1.6rem + 2vw, 4rem); }
  .cstory-hero__copy > .cbrand { position: absolute; top: var(--space-lg); left: var(--edge, 3rem); margin: 0; }
  .page-story .cstory-hero__copy > .cbrand { margin: 0; }
}

@media (min-width: 960px) {
  /* The logo near the photograph's corner, out of the child's way; "Back to
     2026 Campaign" on the same line at the top of the panel, so the eyebrow
     and title centre in the panel on their own (Franc, 2026-10-29). */
  .page-story .cstory-hero__copy > .cbrand {
    position: absolute;
    top: var(--space-xl);
    left: clamp(1.25rem, 2.4vw, 2.75rem);
    z-index: 4;
    filter: drop-shadow(0 1px 2px rgba(15, 29, 48, 0.5)) drop-shadow(0 4px 16px rgba(15, 29, 48, 0.45));
  }
  .page-story .cstory-hero__copy > .cbrand img { height: var(--logo-h); }
  .page-story .cstory-back {
    position: absolute;
    top: calc(var(--space-xl) + (var(--logo-h) - 2.75rem) / 2);
    left: calc(100% - var(--hero-split) + var(--space-2xl));
    z-index: 4;
    margin: 0;
  }
}

/* "HOME": the way out to the main site, top left of the hero (Franc,
   2026-10-28/29): navy with white capitals and a white arrow, a fine white
   ring so it holds on the story's navy panel as well as on a photograph. */
.cback {
  position: absolute;
  top: 1rem;
  right: calc(var(--sheet-inset) + 0.25rem);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: 2.9rem;
  padding: 0.55rem 1.3rem 0.55rem 1.1rem;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-full);
  background: var(--navy);
  color: var(--white);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(15, 29, 48, 0.32), 0 2px 6px rgba(15, 29, 48, 0.2);
  transition: background-color var(--duration-fast) var(--ease-out), translate var(--duration-fast) var(--ease-out);
}
.cback span { font-size: 1.15em; letter-spacing: 0; }
.cback:hover { background: var(--navy-dark); translate: -2px 0; }
.cback:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (min-width: 960px) {
  .cback { top: 1.4rem; right: auto; left: var(--edge, 3rem); min-height: 3.3rem; padding-inline: 1.35rem 1.6rem; font-size: 1.1rem; }
}

/* Scroll cue (Franc, 2026-10-29): a white chevron and "Scroll" at the foot
   of the campaign hero, bobbing gently; still under reduced motion. */
.cscroll {
  position: absolute;
  left: 50%;
  bottom: calc(var(--r-sheet) + 1.1rem);
  z-index: 4;
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.9rem;
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(15, 29, 48, 0.55), 0 2px 14px rgba(15, 29, 48, 0.55);
  isolation: isolate;
}
.cscroll svg {
  width: 1.9rem;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 1px 2px rgba(15, 29, 48, 0.55)) drop-shadow(0 2px 10px rgba(15, 29, 48, 0.45));
  animation: cscroll-bob 2.4s var(--ease-out, ease-out) infinite;
}
.cscroll::before {
  content: '';
  position: absolute;
  inset: -0.9rem -1.6rem;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15, 29, 48, 0.42), rgba(15, 29, 48, 0));
  pointer-events: none;
}
.cscroll path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cscroll:hover { color: var(--gold-light); }
.cscroll:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: var(--radius-full); }
@keyframes cscroll-bob {
  0%, 100% { translate: 0 0; opacity: 1; }
  50% { translate: 0 0.45rem; opacity: 0.75; }
}
@media (min-width: 960px) {
  .cscroll { bottom: calc(var(--r-sheet) + 1.6rem); font-size: 0.8rem; }
  .cscroll svg { width: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cscroll svg { animation: none; }
}

/* --- The table under the hero --------------------------------
   It starts flush under the hero, whose rounded foot lies over it; its own
   foot has no padding, so the last section sets it. More air after the
   campaign hero (Franc, 2026-10-29). */
.page-campaign .page-table--under {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sheet);
  margin-top: calc(-1 * var(--r-sheet));
  padding-top: calc(var(--r-sheet) + var(--gap-sheet));
  padding-bottom: 0;
  overflow: visible;
}
.page-campaign .cstory-hero--campaign + .page-table--under { padding-top: calc(var(--r-sheet) + var(--gap-sheet) + var(--space-xl)); }
.page-campaign .page-table > .section { padding-block: 0; }
@media (min-width: 960px) {
  .page-campaign .cstory-hero--campaign + .page-table--under { padding-top: calc(var(--r-sheet) + var(--gap-sheet) + var(--space-2xl)); }
}

/* The site's gold scribble (home.css owns the homepage copy of this rule). */
.page-campaign .pathways__scrib {
  position: relative;
  display: inline-block;
  width: max-content;
  max-width: calc(100vw - 36px);
}
.page-campaign .pathways__scrib svg {
  position: absolute;
  left: -2%;
  bottom: -0.385em;
  width: 104%;
  height: 0.34em;
  overflow: visible;
  fill: none;
  stroke: var(--gold);
  stroke-width: clamp(3.5px, 0.42vw, 6px);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The end of a story: the way back, on the same edge (before the
   grid, whose gaps it takes from 960). */
.cstory-end {
  display: grid;
  justify-items: start;
  gap: var(--space-md);
  padding-top: 0;
  text-align: left;
}

/* --- One editorial grid (Franc, 2026-10-28) ------------------
   Every block shares one frame, the site's sheet measure, and one left
   edge, the site's --edge. From 960, twelve columns:
     text            1 to 7        leads, display lines   1 to 8
     the rail        9 to 12       (the stat and a Donate, a photograph)
   A section heading sits above its copy in the text column (Franc,
   2026-10-29: no heading-left, copy-right split).
   Cards, the slider and the ask span the whole frame. Phones: one column,
   in reading order. */
.cgrid {
  width: min(100% - 2 * var(--sheet-inset), var(--sheet-max));
  margin-inline: auto;
}
.cgrid--text {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-lg);
  padding-inline: var(--sheet-pad-inline);
  align-items: start;
}
.cgrid--text > * { margin: 0 !important; min-width: 0; }
.cgrid--text .ccamp-heading { text-align: left; }
.cgrid-section { padding-block: 0; }
@media (min-width: 960px) {
  .cgrid--text {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-lg);
  }
  .cgrid--text > * { grid-column: 1 / span 7; }
  .cgrid--text > .cstory-lead,
  .cgrid--text > .cstory-display { grid-column: 1 / span 8; }
  .cgrid--text > .cstory-quotes,
  .cgrid--text:not(:has(> .g-rail)) > .cstory-lead { grid-column: 1 / span 10; }
  /* With no rail beside it the lead runs its lines to the full width
     (balanced lines left the right half empty). */
  .cgrid--text:not(:has(> .g-rail)) > .cstory-lead { text-wrap: pretty; }
  .cgrid--text > .g-rail { grid-column: 9 / -1; grid-row: var(--rail-row, auto); }
}

/* Below the campaign bar the landing's sections are centred and as wide as
   the bar's row of pills, so the page flows on from the menu (Franc,
   2026-10-29). --menu-w follows the pills: five at --pill-w plus four gaps. */
.page-campaign { --menu-w: none; }
.ccamp-centred { justify-items: center; text-align: center; }
.ccamp-centred > * { width: 100%; max-width: var(--menu-w); }
.cgrid--text.ccamp-centred .ccamp-heading { text-align: center; }
@media (min-width: 960px) {
  .page-campaign { --menu-w: calc(5 * 8.25rem + 4 * 0.55rem); }
  .cgrid--text.ccamp-centred > * { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .page-campaign { --menu-w: calc(5 * 9.5rem + 4 * 0.6rem); }
}

/* The rail: the stat above its Donate on the landing page; the uncle's
   photograph beside "lifted" on Isenathi's. */
.ccamp-rail { display: grid; gap: var(--space-lg); }
.ccamp-rail .cstory-give,
.g-rail .cstory-give { margin: 0 !important; }
@media (min-width: 960px) {
  .ccamp-rail { padding-top: 0.5rem; }
  .g-rail > .cstory-give { padding-top: 0.75rem; }
}

/* --- Reading -------------------------------------------------
   The words run straight on the page, not on a sheet (Franc, 2026-10-27:
   "own that it is a website, not a mailer in a website"). Larger and
   heavier since Clem's pins (2026-10-29). */
.cstory-text { max-width: none; }
.cstory-text > * + * { margin-top: var(--space-lg); }
.cstory-text p {
  font-size: clamp(1.15rem, 1.02rem + 0.55vw, 1.45rem);
  font-weight: 500;
  line-height: 1.65;
  color: var(--ink);
}
/* The campaign intro: Clem asked for bold. */
.page-campaign .ccamp-intro > p:not(.cstory-lead):not(.sandbox-flag) { font-weight: 600; color: var(--navy); }
.cstory-text .cstory-lead {
  padding-bottom: var(--space-sm, 0.75rem);
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.7rem);
  line-height: 1.18;
  color: var(--navy);
  text-wrap: balance;
}
.cstory-text .cstory-display {
  margin-top: var(--space-xl) !important;
  font-family: var(--font-editorial);
  font-size: var(--fs-column);
  line-height: 1.08;
  color: var(--navy);
  text-align: left;
  text-wrap: balance;
}
/* The therapist's words in two paragraphs, the second starting "But" (Clem). */
.cstory-quotes { display: grid; gap: var(--space-md); margin-block: var(--space-xl) !important; }
.cstory-text .cstory-quote {
  margin: 0;
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  border-left: 4px solid var(--gold);
  font-family: var(--font-editorial);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  line-height: 1.25;
  color: var(--navy);
  text-wrap: balance;
}
.cstory-quotes .cstory-quote:first-child { font-size: clamp(1.25rem, 1rem + 1.1vw, 1.8rem); color: color-mix(in srgb, var(--navy) 85%, transparent); }

/* Headings, the stat and the inline Donate. */
.ccamp-heading {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: var(--fs-section);
  line-height: 1.05;
  color: var(--navy);
  text-wrap: balance;
}
.ccamp-stat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-sm, 0.75rem);
  margin: 0 !important;
  padding: var(--space-lg) 0;
  border-block: 1px solid color-mix(in srgb, var(--navy) 14%, transparent);
}
.cstory-text .ccamp-stat__num {
  font-family: var(--font-editorial);
  font-size: clamp(3.5rem, 2rem + 6vw, 7rem);
  line-height: 1;
  color: var(--green);
  white-space: nowrap;
}
.cstory-text .ccamp-stat__label {
  font-weight: 700;
  font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.7rem);
  line-height: 1.3;
  color: var(--navy);
}
.cstory-text .cstory-give { margin-block: var(--space-xl); text-align: left; }
.cstory-give .sandbox-flag { margin-inline: auto; max-width: 30rem; text-align: left; }

/* A story's reading column (Franc, 2026-10-29): centred and as wide as the
   bar's pills, the lines still set left. */
.cgrid--text.cstory-centred.cstory-text > *,
.cgrid--text.cstory-centred.cstory-end > * { width: 100%; max-width: var(--menu-w); justify-self: center; }
@media (min-width: 960px) {
  .cgrid--text.cstory-centred.cstory-text > *,
  .cgrid--text.cstory-centred.cstory-end > * { grid-column: 1 / -1; }
}

/* The uncle photograph: a landscape print across the reading column, hands,
   faces and the hills in frame, the site's contact light. */
.cstory-print {
  width: 100%;
  margin: var(--space-md) 0 0 !important;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-card);
  overflow: clip;
  box-shadow: var(--lift-contact);
}
.cstory-print img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Photo slider (navy sheet) -------------------------------
   One square photograph at a time (Franc's rule from the mailers), its
   caption beside it from 960. On phones the controls sit above the
   photograph, so a short caption never leaves a navy gap; the track takes
   each slide's own height (main.js). */
.cstory-slider.cgrid { --sheet-w: var(--sheet-max); }
.cstory-slider__track,
.cstory-slider__bar {
  width: 100%;
  margin-inline: auto;
}
.cstory-slider__track {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  /* Sideways only: overflow-x auto would make the vertical axis scrollable
     too, and a slide taller than the track then caught the page's wheel and
     swipe (Franc, 2026-10-29). Clipped vertically, every vertical scroll
     passes to the page. */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-y: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: var(--r-card);
  transition: height 0.45s var(--ease-out);
}
.cstory-slider__track::-webkit-scrollbar { display: none; }
.cstory-slider__track:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 6px;
}
.cstory-slide {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.cstory-slide__frame {
  aspect-ratio: 1;
  border-radius: var(--r-card);
  overflow: clip;
  background: var(--navy-dark);
}
.cstory-slide__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cstory-slide__caption {
  max-width: 46rem;
  margin-top: var(--space-md);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.6;
  color: var(--cream);
  text-wrap: pretty;
}
.cstory-slide__caption.is-pending .cstory-slide__words { display: block; opacity: 0.85; }
.cstory-slider__bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 0.75rem);
  margin-top: var(--space-lg);
}
.cstory-slider__progress {
  order: -1;
  flex: 1;
  position: relative;
  height: 2px;
  margin-right: var(--space-md);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.cstory-slider__progress > span {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0.08);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-out);
}
.cstory-slider__count {
  margin: 0 var(--space-xs, 0.4rem) 0 0;
  min-width: 4.5ch;
  font-size: var(--font-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.cstory-slider__btn {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: var(--white);
  font-size: 1.15rem;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.cstory-slider__btn:hover:not(:disabled) {
  color: var(--navy-dark);
  background: var(--gold);
  border-color: var(--gold);
}
.cstory-slider__btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.cstory-slider__btn:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
@media (max-width: 959.98px) {
  .cstory-slider { display: flex; flex-direction: column; }
  .cstory-slider__bar { order: -1; margin: 0 0 var(--space-md); }
}
@media (min-width: 960px) {
  .cstory-slide {
    display: grid;
    grid-template-columns: min(62svh, 34rem) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-xl);
  }
  /* A photograph without a caption (the live build until the team approves
     one) sits centred on the sheet instead of beside an empty half. */
  .cstory-slide:not(:has(.cstory-slide__caption)) {
    grid-template-columns: min(62svh, 34rem);
    justify-content: center;
  }
}

/* --- The children's cards (Franc, 2026-10-27; Clem, 2026-10-29) ---
   Navy cards, white type, gold labels. Phones: the photograph full width
   above the copy (tablets too: at 820 a side photograph became a sliver).
   From 960: the photograph on one side, the copy on the other, met by a hand-cut edge with the gold under-sheet peeking past it,
   alternating sides down the page. The partner label only (no date);
   "Read full story" once released, "Coming soon" before. */
.ccamp-three { display: grid; gap: var(--space-xl); width: auto; }
.ccamp-children.cgrid { display: grid; gap: var(--gap-sheet); }
.ccard {
  position: relative;
  background: var(--paper);
  border-radius: var(--r-sheet);
  box-shadow: var(--lift);
  overflow: clip;
}
.ccard--child {
  --label-ink: var(--gold);
  --focus-ring: var(--gold);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "photo" "body" "more";
  isolation: isolate;
  background: var(--navy);
  color: var(--cream);
}
.ccard__photo {
  grid-area: photo;
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--sand);
}
.ccard--child .ccard__photo { aspect-ratio: 16 / 11; }
.ccard__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}
.ccard__photo .ccard__standin { position: absolute; left: 0.75rem; bottom: 0.75rem; margin: 0; z-index: 2; }
.ccard__photo--pending {
  display: grid;
  place-items: center;
  padding: var(--space-sm, 0.75rem);
}
.ccard--child .ccard__photo--pending { background: var(--navy-dark); }
.ccard__cut { display: none; }
.ccard__paper { fill: var(--navy); }
.ccard__under { fill: var(--gold); }
.ccard__body {
  grid-area: body;
  align-self: center;
  padding: var(--space-lg) var(--space-lg) 0;
}
.ccard__more {
  grid-area: more;
  padding: var(--space-md) var(--space-lg) calc(var(--sheet-pad-block) + 3rem);
}
.ccard__meta {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.ccard__name {
  margin-top: 0.3rem;
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 3vw, 2.6rem);
  line-height: 1;
  color: var(--white);
}
.ccard__line {
  margin-top: 0.5rem;
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--cream);
}
.ccard__blurb {
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 1.05rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--cream) 82%, transparent);
}
.ccard__blurb strong { color: var(--white); }
/* The card's tab: "Read full story" in gold, its link covering the card. */
.ccard__cta {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.95rem 1.5rem 1.05rem 1.7rem;
  border-top-left-radius: var(--r-sheet);
  background: var(--gold);
  color: var(--navy-dark);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out), padding var(--duration-fast) var(--ease-out);
}
.ccard__cta::after { content: ''; position: absolute; inset: -100vmax; z-index: -1; }
.ccard:hover .ccard__cta { background: var(--gold-light); padding-right: 1.8rem; }
.ccard__cta:focus-visible { outline: 3px solid var(--white); outline-offset: -6px; }
.ccard__cta--soon {
  margin: 0;
  background: rgba(255, 255, 255, 0.1);
  color: var(--cream);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
}
.ccard__cta--soon::after { content: none; }
.ccard:hover .ccard__cta--soon { background: rgba(255, 255, 255, 0.1); padding-right: 1.5rem; }
/* Without JS, a pill's jump still clears the sticky bar. */
.ccard--child[data-center-under-bar] { scroll-margin-top: 6rem; }
@media (min-width: 960px) {
  .ccard--child {
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    grid-template-areas: "photo body" "photo more";
    grid-template-rows: auto 1fr;
    min-height: min(34rem, 72svh);
  }
  .ccard--child .ccard__photo { aspect-ratio: auto; }
  .ccard__body {
    position: relative;
    z-index: 2;
    align-self: end;
    padding: var(--sheet-pad-block) var(--sheet-pad-inline) 0 calc(var(--sheet-pad-inline) + 1.5rem);
  }
  .ccard__more {
    position: relative;
    z-index: 2;
    padding: var(--space-lg) var(--sheet-pad-inline) calc(var(--sheet-pad-block) + 3rem) calc(var(--sheet-pad-inline) + 1.5rem);
  }
  .ccard__meta { font-size: 0.9rem; letter-spacing: 0.14em; }
  .ccard__name { margin-top: 0.5rem; font-size: var(--fs-section); }
  .ccard__line { margin-top: var(--space-md); font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem); line-height: 1.5; max-width: 32rem; }
  .ccard__blurb { max-width: 34rem; font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.2rem); }
  /* The copy's edge over the photograph; its paths fill from the left, so
     on photo-left cards it is mirrored. */
  .ccard__cut {
    display: block;
    position: absolute;
    top: 0;
    left: calc(42% - 4rem);
    z-index: 1;
    width: 5rem;
    height: 100%;
    transform: scaleX(-1);
  }
  /* Every second card mirrors: photo right, copy left, the cut flipped. */
  .ccard--child:nth-child(even) {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    grid-template-areas: "body photo" "more photo";
  }
  .ccard--child:nth-child(even) .ccard__cut {
    left: calc(58% - 1rem);
    transform: none;
  }
  .ccard--child:nth-child(even) :is(.ccard__body, .ccard__more) {
    padding-left: var(--sheet-pad-inline);
    padding-right: calc(var(--sheet-pad-inline) + 1.5rem);
  }
  .ccard--child:nth-child(even) .ccard__cta { right: auto; left: 0; border-top-left-radius: 0; border-top-right-radius: var(--r-sheet); }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- The campaign bar ----------------------------------------
   The campaign's own navigation instead of the site menu (Franc,
   2026-10-27 to 29): below the landing intro, under a story's hero, sticky
   to the top from there, full width, navy. One menu of matching pills, names
   only: Home, the three children and Donate in gold, one height, one width.
   The pills are compact so the bar keeps its height with room around them
   (74px, 86px from 960). Phones carry Home and the children; Donate joins
   from 640, where five fit (on phones Donate lives in the page, Franc,
   2026-10-28). Dates return with show_dates in campaign.json. */
.cnav {
  --pill-w: auto;
  position: sticky;
  inset: 0 auto auto;
  z-index: 40;
  /* No bottom margin: the table's own gap already separates the bar from
     the next section (the two stacked doubled it; Franc, 2026-10-29). */
  margin-block: var(--gap-sheet) 0;
  padding: 1.05rem calc(var(--sheet-inset) + 0.25rem);
  background: var(--navy);
  box-shadow: 0 8px 24px rgba(15, 29, 48, 0.18);
}
.page-campaign .cstory-hero + .page-table--under > .cnav:first-child { margin-top: 0; }
.cnav__bar {
  width: min(100%, var(--sheet-max));
  margin-inline: auto;
}
.cnav__campaign ul {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cnav__campaign li { flex: 1 1 0; min-width: 0; }
.cnav__campaign .cnav__item--home { flex: 0 0 auto; }
.cnav__item--give { display: none; }
.cnav__pill {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.15rem;
  min-width: var(--pill-w);
  min-height: 2.5rem;
  padding: 0.3rem 0.4rem;
  text-align: center;
  border-radius: var(--radius-full);
  background: var(--white);
  box-shadow: 0 6px 16px rgba(15, 29, 48, 0.24), 0 2px 5px rgba(15, 29, 48, 0.16);
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out), translate var(--duration-fast) var(--ease-out);
}
.cnav__pill:hover { background: var(--cream); translate: 0 -2px; }
/* Home and Donate are the bar's two doors, each in its own brand colour
   (Franc, 2026-10-30): Home green, Donate gold, so the three children
   between them read as the set. White on --green is about 5:1. */
.cnav__home { padding-inline: 0.85rem; background: var(--green); color: var(--white); }
.cnav__home:hover { background: var(--green-dark); }
.cnav__give { background: var(--gold); color: var(--navy-dark); }
.cnav__give:hover { background: var(--gold-light); }
.cnav__name { font-family: var(--font-editorial); font-size: 1rem; line-height: 1; }
.cnav__date {
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--green-dark);
  font-variant-numeric: tabular-nums;
}
/* At rest in the page (main.js adds cnav--live, then is-stuck once it
   sticks): no bar, navy pills with white names; stuck: the navy bar, white
   pills. Without JS the bar stays in its stuck look. */
.cnav,
.cnav__pill { transition: background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), color 0.3s var(--ease-out), translate var(--duration-fast) var(--ease-out); }
.cnav--live:not(.is-stuck) { background: transparent; box-shadow: none; }
.cnav--live:not(.is-stuck) .cnav__pill { background: var(--navy); color: var(--white); box-shadow: 0 6px 16px rgba(15, 29, 48, 0.16); }
.cnav--live:not(.is-stuck) .cnav__pill:hover { background: var(--navy-dark); }
.cnav--live:not(.is-stuck) .cnav__give { background: var(--gold); color: var(--navy-dark); }
.cnav--live:not(.is-stuck) .cnav__home { background: var(--green); color: var(--white); }
.cnav--live:not(.is-stuck) .cnav__home:hover { background: var(--green-dark); }
.cnav--live:not(.is-stuck) .cnav__give:hover { background: var(--gold-light); }
/* The page you are on: a gold ring, so a gold fill always means Donate. */
.cnav__child[aria-current="page"] { box-shadow: inset 0 0 0 2.5px var(--gold), 0 6px 16px rgba(15, 29, 48, 0.24), 0 2px 5px rgba(15, 29, 48, 0.16); }
.cnav :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (max-width: 639.98px) {
  .cnav { padding-inline: 0.6rem; }
}
/* The narrowest phones: a step smaller so the names never clip. */
@media (max-width: 379.98px) {
  .cnav { padding-inline: 0.4rem; }
  .cnav__campaign ul { gap: 0.2rem; }
  .cnav__pill { padding-inline: 0.15rem; }
  .cnav__home { padding-inline: 0.55rem; }
  .cnav__name { font-size: 0.88rem; }
}
@media (min-width: 640px) {
  .cnav__campaign ul { gap: 0.45rem; }
  .cnav__item--give { display: block; }
  .cnav__campaign .cnav__item--home { flex: 1 1 0; }
  .cnav__pill { padding-inline: 0.9rem; }
  .cnav__name { font-size: 1.08rem; }
}
@media (min-width: 960px) {
  .cnav { --pill-w: 8.25rem; padding-block: 1.25rem; }
  .cnav__campaign ul { gap: 0.55rem; }
  .cnav__campaign li,
  .cnav__campaign .cnav__item--home { flex: none; }
  .cnav__pill { min-height: 2.9rem; padding-inline: 1.1rem; }
  .cnav__name { font-size: 1.15rem; }
}
@media (min-width: 1200px) {
  .cnav { --pill-w: 9.5rem; }
  .cnav__campaign ul { gap: 0.6rem; }
  .cnav__pill { padding-inline: 1.3rem; }
  .cnav__name { font-size: 1.3rem; }
}

/* --- The ask on green (Franc, 2026-10-27 and 29) --------------
   The campaign's call to action: green, so it stands apart from the navy
   cards; white heading, cream copy (5.1:1 and above), the Donate in gold.
   One centred composition, condensed so the whole sheet is seen at once. */
.page-campaign .project-support__sheet {
  --label-ink: var(--white);
  --focus-ring: var(--white);
  background: var(--green);
}
.page-campaign .project-support__sheet .link-arrow--light { color: var(--white); }
.page-campaign .project-support__sheet .link-arrow--light:hover { color: var(--cream); }
.page-campaign .project-support__sheet .sandbox-flag { border-color: var(--white); background: rgba(255, 255, 255, 0.12); color: var(--white); }
.project-support__sheet .section-header .ccamp-heading { color: var(--white); }
.project-support__sheet .section-header p:not(.eyebrow) { color: var(--cream); max-width: 38rem; margin-inline: auto; }
.page-campaign .ccamp-ask {
  display: grid;
  justify-items: center;
  gap: var(--space-lg);
  padding: clamp(2.25rem, 1.5rem + 3vw, 3.75rem) clamp(1.25rem, 0.75rem + 5vw, 5rem);
  text-align: center;
}
.page-campaign .ccamp-ask .section-header {
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  max-width: 62rem;
  margin: 0;
  text-align: center;
}
.page-campaign .ccamp-ask .section-header > * { margin: 0; max-width: none; }
.page-campaign .ccamp-ask .section-header .eyebrow { font-size: clamp(0.8rem, 0.7rem + 0.35vw, 1rem); letter-spacing: 0.2em; }
.page-campaign .ccamp-ask .section-header h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1.05; text-wrap: balance; }
.page-campaign .ccamp-ask .section-header p:not(.eyebrow):not(.sandbox-flag) {
  max-width: 56rem;
  margin-inline: auto;
  font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.2rem);
  font-weight: 500;
  line-height: 1.55;
  text-wrap: pretty;
}
.page-campaign .ccamp-ask .project-support__cta {
  display: grid;
  justify-items: center;
  gap: var(--space-sm, 0.75rem);
  margin: 0;
  text-align: center;
}
.page-campaign .ccamp-ask .project-support__cta .cstory-give { margin: 0; text-align: center; }
.page-campaign .ccamp-ask .btn--lg { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); padding: 1em 3em; }
@media (max-width: 639.98px) {
  .page-campaign .ccamp-ask .btn--lg { font-size: 1rem; padding: 0.95em 1.4em; text-wrap: balance; }
}
.page-campaign .ccamp-ask .project-donate__more { margin: 0; text-align: center; }
.page-campaign .ccamp-ask .sandbox-flag { margin-inline: auto; }
@media (min-width: 960px) {
  .page-campaign .ccamp-ask { grid-template-columns: minmax(0, 1fr); }
  .page-campaign .ccamp-ask .section-header,
  .page-campaign .ccamp-ask .project-support__cta { grid-column: 1; }
}

/* --- Stories of Change: the title and a bigger button, centred
   (Franc, 2026-10-28; Clem, 2026-10-29). */
.page-campaign .page-table--under > .cstories-more.cgrid-section:last-child { padding-block: var(--space-2xl) calc(var(--space-2xl) + var(--r-sheet)); }
.cstories-more__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-lg);
  text-align: center;
}
.cstories-more__inner .cstories-more__title {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: var(--fs-section);
  line-height: 1;
  color: var(--navy);
}
.cstories-more__inner .cstories-more__btn { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); padding: 1.15em 2.8em; }

/* --- Sandbox flags -------------------------------------------
   Only the sandbox build writes these (build.py without --live): captions
   still marked candidate, placeholder or needs translation, the team's open
   flags and stand-in photographs. They never reach the live site. */
.sandbox-flag {
  display: block;
  margin-top: 0.6rem;
  padding: 0.45rem 0.7rem;
  border: 1.5px dashed var(--gold-dark);
  border-radius: 8px;
  background: rgba(232, 184, 75, 0.16);
  font-family: var(--font-family);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--navy);
  text-align: left;
}
.sandbox-flag::before {
  content: 'SANDBOX \00B7  ';
  letter-spacing: 0.1em;
}
.sandbox-flag--block {
  width: min(100% - 2 * var(--sheet-inset), 52rem);
  margin-inline: auto;
}
.sheet--navy .sandbox-flag,
.ccard--child .sandbox-flag {
  border-color: var(--gold);
  background: rgba(232, 184, 75, 0.12);
  color: var(--cream);
}
/* Flags keep their own small type and width wherever they land. */
.cstory-text .sandbox-flag,
.section-header .sandbox-flag {
  width: auto;
  font-size: 0.8rem;
  line-height: 1.4;
  margin-top: var(--space-md);
}
.section-header .sandbox-flag { max-width: 38rem; margin-inline: auto; }
.ccard__photo--pending .sandbox-flag { width: min(100%, 15rem); margin: 0; }