/* How It Heals — brand tokens.
   Loaded before each page's own <style>, so a page that still defines its
   own values keeps winning until it is migrated. Approved 24 Sep 2026:
   cool neutrals, warm accents, softly curved corners.
   Every token is prefixed --b- so it can never collide with a page's own. */

:root {
  /* neutrals — cool and clinical */
  --b-ink:        #141719;
  --b-ink-2:      #1F2427;
  --b-muted:      #5F6468;
  --b-faint:      #8A9095;
  --b-rule:       #E3E6E8;
  --b-paper:      #F7F8F9;
  --b-white:      #FFFFFF;
  --b-on-dark:        rgba(255,255,255,0.88);
  --b-on-dark-muted:  rgba(255,255,255,0.62);
  --b-rule-dark:      rgba(255,255,255,0.16);

  /* butter — anything you act on */
  --b-butter:      #FDF4CB;
  --b-butter-deep: #F3E4A8;
  --b-butter-edge: #E2CF80;
  --b-butter-ink:  #141719;

  /* sky — anything you read off */
  --b-sky:       #7FB0CC;
  --b-sky-deep:  #3B7598;   /* sky as text on light: 5.0:1 */
  --b-sky-dark:  #2C5268;   /* deep grounds */
  --b-sky-tint:  #EDF3F7;

  /* terracotta — the Female Reset only */
  --b-terracotta:      #9C4F33;
  --b-terracotta-soft: #C8714E;

  /* type */
  --b-sans: 'Geist', system-ui, -apple-system, sans-serif;
  /* display serif: hero and closing headlines only. Never body, never labels,
     never more than one per page. It is the brand's signature, not its voice. */
  --b-serif: 'Playfair Display', Georgia, serif;
  --b-mono: 'Geist Mono', ui-monospace, Menlo, monospace;

  --b-t-display: clamp(2.75rem, 6vw, 4.5rem);
  --b-t-h1:      clamp(2.25rem, 5vw, 3.5rem);
  --b-t-h2:      clamp(1.75rem, 3.2vw, 2.5rem);
  --b-t-h3:      1.375rem;
  --b-t-lede:    1.1875rem;
  --b-t-body:    1.0625rem;
  --b-t-small:   0.875rem;
  --b-t-label:   0.6875rem;

  --b-tr-display: -0.03em;
  --b-tr-head:    -0.025em;
  --b-tr-h3:      -0.015em;
  --b-tr-label:   0.16em;

  --b-lh-display: 1.04;
  --b-lh-head:    1.12;
  --b-lh-body:    1.6;
  --b-lh-lede:    1.5;

  --b-w-body: 400;
  --b-w-head: 500;

  /* spacing — 4px grid */
  --b-1: 4px;   --b-2: 8px;   --b-3: 12px;  --b-4: 16px;  --b-5: 24px;
  --b-6: 32px;  --b-7: 48px;  --b-8: 64px;  --b-9: 96px;  --b-10: 128px;

  --b-section: clamp(5rem, 9vw, 8rem);
  --b-shell:   clamp(1.25rem, 4vw, 3rem);
  --b-measure:      64ch;
  --b-measure-lede: 56ch;
  --b-measure-head: 18ch;

  /* corners — softly curved */
  --b-r-btn:  8px;
  --b-r-card: 12px;
  --b-r-img:  12px;
  --b-r-chip: 999px;

  /* the program accent, set per page below */
  --b-accent:      var(--b-sky-deep);
  --b-accent-soft: var(--b-sky);
  --b-accent-dark: var(--b-sky-dark);
}

/* program scopes: <body data-program="fbr"> and so on */
[data-program="fbr"] {
  --b-accent:      var(--b-terracotta);
  --b-accent-soft: var(--b-terracotta-soft);
  --b-accent-dark: #7A3D28;
}
[data-program="prm"] {            /* the light one */
  --b-accent:      var(--b-sky-deep);
  --b-accent-soft: var(--b-sky);
  --b-accent-dark: var(--b-sky-dark);
}
[data-program="bsi"] {
  --b-accent:      var(--b-ink);
  --b-accent-soft: var(--b-butter);
  --b-accent-dark: var(--b-ink);
}
[data-program="testing"] {        /* the dark end of sky */
  --b-accent:      var(--b-sky-dark);
  --b-accent-soft: var(--b-sky);
  --b-accent-dark: var(--b-sky-dark);
}
[data-program="mbr"] {
  --b-accent:      #333D46;
  --b-accent-soft: #8A99A6;
  --b-accent-dark: #27303a;
}

/* ── scroll cue: a fine line that asks you to keep going ───────── */
.scroll-hint{text-decoration:none;color:inherit;position:absolute;left:50%;bottom:clamp(1.25rem,3.5vh,2.25rem);transform:translateX(-50%);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:.75rem;pointer-events:none}
.scroll-hint span{text-decoration:none;font-family:var(--b-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.6)}
.scroll-hint i{position:relative;display:block;width:1px;height:clamp(38px,6.5vh,64px);
  background:linear-gradient(to bottom,rgba(255,255,255,.12),rgba(255,255,255,.45));overflow:hidden}
.scroll-hint i::after{content:"";position:absolute;inset:0 auto auto 0;width:1px;height:45%;
  background:rgba(255,255,255,.95);animation:scroll-run 2.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes scroll-run{0%{transform:translateY(-100%)}60%,100%{transform:translateY(240%)}}
.scroll-hint.on-light span{color:var(--b-muted)}
.scroll-hint.on-light i{background:linear-gradient(to bottom,rgba(20,23,25,.1),rgba(20,23,25,.35))}
.scroll-hint.on-light i::after{background:rgba(20,23,25,.75)}
@media (prefers-reduced-motion: reduce){.scroll-hint i::after{animation:none;height:100%;opacity:.5}}

/* ── hero strip ────────────────────────────────────────────────────
   For pages that carry no photograph. A short band of brand colour that
   lifts the top of the page and sets its tone, rather than dropping the
   reader straight onto type. Tone is set per page with data-tone.
   Replace any of these with a photograph when one exists: the strip is
   scaffolding, not a decision. */
.hero-strip{
  position:relative;
  height:clamp(132px,20vh,232px);
  background:var(--hs-base,var(--b-sky-tint));
  border-bottom:1px solid var(--b-rule);
  overflow:hidden;
  isolation:isolate;
}
.hero-strip::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 150% at 12% 118%, var(--hs-glow-a,rgba(127,176,204,.55)) 0%, transparent 62%),
    radial-gradient(90% 120% at 88% -20%, var(--hs-glow-b,rgba(253,244,203,.5)) 0%, transparent 58%);
}
/* a fine rule field, so the band has texture rather than being a flat fill */
.hero-strip::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(
    to bottom, rgba(20,23,25,.05) 0 1px, transparent 1px 7px);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 55%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 55%, transparent 100%);
  opacity:.5;
}
.hero-strip .hs-label{
  position:absolute;left:var(--b-shell);bottom:clamp(.9rem,2vh,1.35rem);z-index:2;
  font-family:var(--b-mono);font-size:var(--b-t-label);letter-spacing:var(--b-tr-label);
  text-transform:uppercase;color:var(--hs-ink,var(--b-sky-dark));opacity:.75;
}

/* tones. Sky for what you read off, butter for what you act on,
   and the quiet neutral for the pages nobody arrives on purpose. */
.hero-strip[data-tone="symptoms"]{--hs-base:var(--b-sky-tint);
  --hs-glow-a:rgba(127,176,204,.62);--hs-glow-b:rgba(253,244,203,.42)}
.hero-strip[data-tone="testing"]{--hs-base:var(--b-sky-dark);
  --hs-glow-a:rgba(127,176,204,.42);--hs-glow-b:rgba(253,244,203,.18);
  --hs-ink:rgba(255,255,255,.82);border-bottom-color:transparent}
.hero-strip[data-tone="testing"]::after{opacity:.26;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.08) 0 1px, transparent 1px 7px)}
.hero-strip[data-tone="act"]{--hs-base:var(--b-butter);
  --hs-glow-a:rgba(226,207,128,.5);--hs-glow-b:rgba(255,255,255,.75);--hs-ink:var(--b-ink)}
.hero-strip[data-tone="library"]{--hs-base:var(--b-paper);
  --hs-glow-a:rgba(127,176,204,.38);--hs-glow-b:rgba(253,244,203,.34);--hs-ink:var(--b-muted)}
.hero-strip[data-tone="quiet"]{--hs-base:var(--b-paper);
  --hs-glow-a:rgba(20,23,25,.05);--hs-glow-b:rgba(20,23,25,.03);--hs-ink:var(--b-faint)}
@media(prefers-reduced-motion:no-preference){
  .hero-strip::before{animation:hs-drift 26s ease-in-out infinite alternate}
  @keyframes hs-drift{to{transform:translate3d(2%, -3%, 0) scale(1.06)}}
}
