/* ============================================================
   BEVP DESIGN TOKENS
   Values carried over unchanged from the V13 working homepage
   (references/approved-homepage/styles.css). The separate brand style
   guide uses different values (navy/cream, Playfair/Inter); that conflict
   is unresolved, so V13 stays authoritative for now.
   Program, event, story and science themes override these in
   css/themes/*.css once those systems are approved.
   ============================================================ */

:root{
  /* === type scale (V13) === */
  --fs-display-xl:clamp(64px,10vw,160px);   /* page-defining heroes */
  --fs-display:clamp(44px,6.5vw,92px);      /* big statements, final CTAs, band quotes */
  --fs-ttl:clamp(36px,4.6vw,66px);          /* section titles */
  --fs-ttl-sm:clamp(26px,3vw,40px);         /* sub-section titles, card titles */
  --fs-h4:clamp(20px,2.3vw,30px);           /* pillar/card headings */
  --fs-edit:clamp(19px,2vw,27px);           /* Spectral editorial pulls */
  --fs-lead:clamp(17px,1.6vw,22px);         /* section leads */

  /* === colour (V13) === */
  --bone:#ECE3D0;
  --bone-2:#F4ECD9;
  --ink:#0E0D0B;
  --ink-soft:#262220;
  --orange:#b72c25;
  --orange-deep:#C81C00;
  --red-tint:rgba(183,44,37,.09);
  --rule:rgba(14,13,11,.18);
  --rule-soft:rgba(14,13,11,.10);
  --rule-bone:rgba(236,227,208,.22);

  /* V13 hard-coded these in the mobile footer and rail; named here for reuse */
  --foot-ink:#111313;
  --foot-cream:#fef7e7;
  --foot-blush:#e6a59d;

  /* === type families (V13) === */
  --ff-display:"Big Shoulders Display","Bebas Neue","Helvetica Neue",sans-serif;
  --ff-edit:"Spectral","Georgia",serif;
  --ff-body:"Public Sans","Helvetica Neue",sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,monospace;
  /* homepage story sections (V11/V12 additions) */
  --ff-home-body:"Barlow",var(--ff-body),sans-serif;
  --ff-home-accent:"Russo One",var(--ff-display),sans-serif;

  /* === layout (V13) === */
  --max:1280px;
  --pad-x:clamp(20px,4vw,56px);

  /* === shell (new) === */
  --header-h:94px;          /* header bar height, excluding its 1px rule;
                               V13 logo 58px + 2 x 18px. Matches the hero's calc(100svh - 94px) */
  --rail-h:54px;            /* mobile Donate / 988 rail */
  --z-header:50;
  --z-rail:54;
  --z-menu:80;
  --z-dialog:90;
  --ease-out:cubic-bezier(.2,.7,.2,1);
}

/* Header height follows the V13 logo size at each breakpoint. */
@media (max-width:1200px) and (min-width:981px){:root{--header-h:85px}}  /* logo 49px */
@media (max-width:520px){:root{--header-h:89px}}                         /* logo 53px */