/* ============ FONTS ============
   Self-hosted: no third-party request on page load, no visitor data leaving
   this origin, and no external host needed in the style or font CSP.

   Variable builds, with the weight and optical size axes this stylesheet
   relies on. Several rules below use intermediate weights such as 430, 480
   and 530, which need a variable font to render as intended. Both fonts are
   licensed under the SIL Open Font License, included alongside the files. */
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:100 900;
  font-display:swap; src:url('../fonts/fraunces-var.woff2') format('woff2-variations');
}
@font-face{
  font-family:'Fraunces'; font-style:italic; font-weight:100 900;
  font-display:swap; src:url('../fonts/fraunces-var-italic.woff2') format('woff2-variations');
}
@font-face{
  font-family:'Karla'; font-style:normal; font-weight:200 800;
  font-display:swap; src:url('../fonts/karla-var.woff2') format('woff2-variations');
}
@font-face{
  font-family:'Karla'; font-style:italic; font-weight:200 800;
  font-display:swap; src:url('../fonts/karla-var-italic.woff2') format('woff2-variations');
}

/* ============ TOKENS ============ */
:root{
  --amber:#DC9A3A; --amber-2:#F0B24D; --rose:#DC9A3A; --sage:#FFFFFF;
  --bg:#0A0A0A; --bg-2:#151515; --surface:#1A1A1A; --surface-2:#222222;
  --text:#FFFFFF; --muted:rgba(255,255,255,.66); --line:rgba(255,255,255,.14);
  --glow:rgba(220,154,58,.32); --shadow:rgba(0,0,0,.5);
  --btn-ink:#0A0A0A;
  /* Brand colour used for control borders. Kept separate from --amber so a
     border can stay bright for definition while label text uses whatever
     contrast the theme needs. */
  --edge:#DC9A3A;
  /* Filled buttons brighten on hover against a dark background. */
  --amber-hover:#F0B24D;
  /* Resting border for outlined controls. Tuned per theme so the edge always
     clears the 3:1 WCAG non-text contrast threshold against the page behind
     it, since on an outlined control the border is what identifies it. */
  --edge-rest:color-mix(in srgb, var(--edge) 62%, transparent);
  /* A neutral border strong enough to define a control on its own. --line is
     for dividers and is deliberately faint; controls need 3:1. */
  --line-control:rgba(255,255,255,.40);
  --ease:cubic-bezier(.22,.8,.28,1);
}
:root[data-theme="light"]{
  --cta-alpha:95%;
  /* --amber is deeper here than the dark-theme value on purpose. It carries
     label text on white and white text on amber fills, both of which need
     4.5:1 to meet WCAG AA. The lighter brand gold sits in --amber-2 and
     --edge, which are used for borders and decoration where 3:1 applies. */
  --amber:#9E691C; --amber-2:#C98A2C; --rose:#9E691C; --sage:#0A0A0A;
  --bg:#FFFFFF; --bg-2:#F5F5F5; --surface:#F2F2F2; --surface-2:#EAEAEA;
  --text:#0A0A0A; --muted:rgba(10,10,10,.64); --line:rgba(10,10,10,.12);
  --glow:rgba(220,154,58,.25); --shadow:rgba(10,10,10,.18);
  --btn-ink:#FFFFFF;
  --edge:#B47A22;
  /* On white, a filled button has to deepen rather than brighten on hover,
     or the white label loses contrast at the moment of interaction. */
  --amber-hover:#8A5A12;
  --edge-rest:color-mix(in srgb, var(--edge) 95%, transparent);
  --line-control:rgba(10,10,10,.48);
}
*{margin:0;padding:0;box-sizing:border-box}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px; border-radius:4px}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200; background:var(--amber); color:var(--btn-ink);
  padding:12px 20px; font-weight:700; border-radius:0 0 12px 0; text-decoration:none;
}
.skip-link:focus{left:0}
html{scroll-behavior:smooth}
body{
  font-family:'Karla',sans-serif; background:var(--bg); color:var(--text);
  line-height:1.65; font-size:17px; overflow-x:hidden;
  transition:background .5s var(--ease), color .5s var(--ease);
}
::selection{background:var(--amber); color:var(--btn-ink)}
h1,h2,h3{font-family:'Fraunces',serif; font-weight:480; letter-spacing:-.01em}
img{max-width:100%; display:block}
a{color:inherit}
section{position:relative; scroll-margin-top:74px}

/* ============ TOP BAR ============ */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:60; display:flex; align-items:center; gap:18px;
  padding:14px clamp(16px,4vw,44px);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto}
.brand img{width:34px; height:auto; filter:drop-shadow(0 2px 6px var(--glow))}
.brand b{font-family:'Fraunces',serif; font-weight:560; font-size:1.02rem; line-height:1.15}
.brand span{display:block; font-family:'Karla'; font-weight:400; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
nav.main{display:flex; gap:26px}
nav.main a{text-decoration:none; font-size:.92rem; color:var(--muted); transition:color .25s}
nav.main a:hover, nav.main a:focus-visible{color:var(--text)}
.top-actions{display:flex; align-items:center; gap:10px}
.icon-btn{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface); color:var(--text); cursor:pointer; display:grid; place-items:center;
  transition:border-color .25s, transform .25s;
}
.icon-btn:hover{border-color:var(--amber); transform:rotate(15deg)}
/* ============ BUTTONS ============
   Every call to action carries a brand-colour edge. Filled buttons get a
   slightly brighter gold rim that separates them from the background and
   catches the light on hover. Outlined buttons wear the gold directly.
   Borders are 1.5px so they read on high density screens without looking
   heavy, and hover adds a soft ring rather than moving colour around. */
.btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; cursor:pointer;
  font-family:'Karla'; font-weight:700; font-size:.92rem; border-radius:999px;
  padding:11px 22px; border:1.5px solid transparent; position:relative;
  transition:transform .25s var(--ease), box-shadow .3s var(--ease),
             background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn:active{transform:scale(.97)}

/* Primary. Solid gold with a brighter gold rim. */
.btn-amber{
  background:var(--amber); color:var(--btn-ink); border-color:var(--amber-2);
  box-shadow:0 6px 22px -10px var(--glow);
}
.btn-amber:hover{
  background:var(--amber-hover); border-color:var(--amber-2); transform:translateY(-2px);
  box-shadow:0 10px 30px -10px var(--glow), 0 0 0 4px color-mix(in srgb, var(--edge) 22%, transparent);
}

/* Secondary. The gold lives on the border, and fills in on hover. */
.btn-ghost{
  border-color:var(--edge-rest); color:var(--text); background:transparent;
}
.btn-ghost:hover{
  border-color:var(--edge); transform:translateY(-2px);
  background:color-mix(in srgb, var(--edge) 12%, transparent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--edge) 14%, transparent);
}

/* Tertiary, used for the podcast. Outlined so it sits below the primary in
   the hierarchy, then commits to a solid fill on hover. */
.btn-rose{
  background:transparent; color:var(--text); border-color:var(--edge);
}
.btn-rose:hover{
  background:var(--amber); color:var(--btn-ink); border-color:var(--amber-2);
  transform:translateY(-2px);
  box-shadow:0 10px 30px -12px var(--glow), 0 0 0 4px color-mix(in srgb, var(--edge) 18%, transparent);
}

/* Quick exit. Neutral rather than gold, so it does not compete with the
   primary call to action beside it, but with a boundary strong enough to
   find at a glance. This is a safety control: someone reaching for it may
   be doing so in a hurry. */
.btn-exit{
  border-color:var(--line-control); color:var(--muted); background:transparent;
  font-size:.8rem; padding:9px 16px;
}
.btn-exit:hover{color:var(--text); border-color:var(--edge); background:color-mix(in srgb, var(--edge) 8%, transparent)}
.hamburger{display:none}

/* ============ HERO ============ */
.hero{
  min-height:100svh; position:relative; display:grid; align-items:center;
  padding:120px clamp(16px,5vw,60px) 40px;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(24px,4vw,60px);
  max-width:1280px; margin:0 auto;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; font-size:.75rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--amber); margin-bottom:18px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--amber)}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.6rem); line-height:1.04; font-weight:430}
.hero h1 em{font-style:italic; font-weight:530; color:var(--amber-2)}
.hero p.lede{margin:26px 0 34px; max-width:56ch; font-size:1.07rem; color:var(--muted)}
.hero-ctas{display:flex; flex-wrap:wrap; gap:14px}
.hero-note{margin-top:26px; font-size:.85rem; color:var(--muted); display:flex; gap:8px; align-items:center}
.hero-note .dot{width:8px;height:8px;border-radius:50%;background:var(--sage); box-shadow:0 0 0 4px color-mix(in srgb,var(--sage) 25%, transparent)}

/* The hero rose. Particles assemble the emblem in 3D. */
.rose-stage{position:relative; display:grid; place-items:center; min-height:440px; cursor:pointer; perspective:900px}
.rose-glow{
  position:absolute; width:min(72vw,540px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, var(--glow) 0%, transparent 62%);
  opacity:0; transition:opacity 2.5s var(--ease);
}
.rose-glow.on{opacity:1}
#roseCanvas{position:absolute; inset:0; width:100%; height:100%; display:block; transition:opacity 1.2s var(--ease)}
.rose-stage.done #roseCanvas{opacity:0}
/* Fallback state: no WebGL, or reduced motion requested. The canvas is
   hidden and the emblem carries the hero on its own. */
.rose-stage.static{cursor:default}
.rose-stage.static #roseCanvas{display:none}

/* The crisp emblem. Hidden until the particles finish assembling, then
   cross-fades in at the size the particle rose occupied so the hand-over is
   seamless. Height is set from script to match. */
#roseImg{
  position:relative; z-index:1; width:auto; height:min(58vh,420px);
  opacity:0; transition:opacity 1.4s var(--ease), transform .18s ease-out;
  will-change:transform,opacity; -webkit-user-drag:none; user-select:none; pointer-events:none;
}
#roseImg.formed{opacity:1; filter:drop-shadow(0 18px 46px var(--glow))}
.rose-stage.static #roseImg{animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.rose-hint{
  position:absolute; bottom:-6px; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); opacity:0; transition:opacity 1s 1s;
}
.rose-hint.on{opacity:.75}
.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none;
}
.scroll-cue::after{content:""; width:1px; height:34px; background:linear-gradient(var(--amber),transparent); animation:drip 2.2s ease-in-out infinite}
@keyframes drip{0%{opacity:0; transform:scaleY(.2); transform-origin:top}40%{opacity:1; transform:scaleY(1)}100%{opacity:0}}

/* ============ CRISIS STRIP ============ */
.crisis{
  border-block:1px solid var(--line);
  background:linear-gradient(90deg, color-mix(in srgb, var(--amber) 12%, var(--bg-2)), var(--bg-2) 70%);
}
.crisis-in{
  max-width:1280px; margin:0 auto; padding:26px clamp(16px,5vw,60px);
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px;
}
.crisis-in h2{font-size:1.25rem; font-weight:520}
.crisis-in p{color:var(--muted); font-size:.92rem}
.crisis-lines{display:flex; flex-wrap:wrap; gap:12px; margin-left:auto}
.line-chip{
  display:flex; flex-direction:column; gap:2px; text-decoration:none;
  border:1px solid var(--line); border-radius:14px; padding:10px 16px; background:var(--surface);
  transition:border-color .25s, transform .25s;
}
.line-chip:hover{border-color:var(--amber); transform:translateY(-2px)}
.line-chip b{font-size:.86rem}
.line-chip span{font-size:.78rem; color:var(--amber); font-weight:700; letter-spacing:.03em}

/* ============ SECTIONS ============ */
.wrap{max-width:1280px; margin:0 auto; padding:clamp(70px,9vw,120px) clamp(16px,5vw,60px)}
.sec-head{max-width:740px; margin-bottom:clamp(34px,5vw,58px)}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.12; font-weight:460}
.sec-head h2 em{font-style:italic; color:var(--amber-2)}
.sec-head p{margin-top:16px; color:var(--muted)}
.bg-2{background:var(--bg-2); border-block:1px solid var(--line)}

/* Mission strip */
.mvv{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.mvv-card{border-left:3px solid var(--m-accent); padding:8px 0 8px 24px}
.mvv-card h3{font-size:1.05rem; font-weight:560; margin-bottom:8px; color:var(--m-accent)}
.mvv-card p{font-size:.95rem; color:var(--muted)}
.m-amber{--m-accent:var(--amber)} .m-sage{--m-accent:var(--sage)} .m-rose{--m-accent:var(--rose)}

/* Who we serve */
.who-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px}
.who-card{
  border:1px solid var(--line); border-radius:20px; background:var(--surface);
  padding:26px 24px; transition:transform .35s var(--ease), border-color .35s;
}
.who-card:hover{transform:translateY(-5px); border-color:color-mix(in srgb, var(--amber) 45%, var(--line))}
.who-card .glyph{font-size:1.5rem; margin-bottom:12px; display:block}
.who-card h3{font-size:1.12rem; font-weight:540; margin-bottom:8px}
.who-card p{font-size:.9rem; color:var(--muted)}
.who-wide{grid-column:1 / -1; background:linear-gradient(135deg, var(--surface), var(--surface-2)); border-color:color-mix(in srgb, var(--amber) 30%, var(--line))}
.who-wide p{max-width:70ch}
.who-promise{margin-top:18px; font-size:.92rem; color:var(--muted); display:flex; align-items:center; gap:10px}
.who-promise::before{content:""; width:26px; height:1px; background:var(--amber); flex:none}

/* Programs (#3Ts) */
.prog-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px}
.prog-card{
  border:1px solid var(--line); border-radius:24px; background:var(--surface);
  padding:32px 28px; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s;
}
.prog-card::before{
  content:""; position:absolute; inset:auto -30% -55% auto; width:220px; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, var(--card-tint) 0%, transparent 65%); opacity:.55;
}
.prog-card:hover{transform:translateY(-6px); box-shadow:0 26px 50px -28px var(--shadow)}
.prog-card .t{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--card-accent)}
.prog-card h3{font-size:1.35rem; font-weight:520}
.prog-card p{font-size:.93rem; color:var(--muted); flex:1}
.prog-card a{font-size:.88rem; font-weight:700; color:var(--card-accent); text-decoration:none}
.prog-card a:hover{text-decoration:underline}

/* Card calls to action. These were plain text links; as outlined pills they
   read as controls and pick up the accent colour of the card they sit in,
   so each one carries a brand edge without the page turning into a wall of
   identical gold buttons. align-self keeps them at their natural width. */
.prog-card .prog-cta,
.inv-card .prog-cta{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  margin-top:4px; padding:8px 17px; border-radius:999px;
  font-size:.84rem; font-weight:700; text-decoration:none; line-height:1;
  color:var(--text);
  border:1.5px solid color-mix(in srgb, var(--cta-edge, var(--edge)) var(--cta-alpha, 62%), transparent);
  background:transparent;
  transition:background .25s var(--ease), border-color .25s var(--ease),
             transform .25s var(--ease), box-shadow .3s var(--ease);
}
.prog-card .prog-cta{--cta-edge:var(--card-accent)}
.inv-card .prog-cta{--cta-edge:var(--i-accent)}
.prog-card .prog-cta::after,
.inv-card .prog-cta::after{content:"→"; font-size:.9em; transition:transform .25s var(--ease)}
.prog-card .prog-cta:hover,
.inv-card .prog-cta:hover{
  border-color:var(--cta-edge, var(--edge)); text-decoration:none;
  background:color-mix(in srgb, var(--cta-edge, var(--edge)) 12%, transparent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--cta-edge, var(--edge)) 12%, transparent);
}
.prog-card .prog-cta:hover::after,
.inv-card .prog-cta:hover::after{transform:translateX(3px)}
.c-amber{--card-accent:var(--amber); --card-tint:var(--glow)}
.c-sage{--card-accent:var(--sage); --card-tint:color-mix(in srgb, var(--sage) 30%, transparent)}
.c-rose{--card-accent:var(--rose); --card-tint:color-mix(in srgb, var(--rose) 26%, transparent)}
.prog-note{
  margin-top:34px; border:1px dashed color-mix(in srgb, var(--amber) 50%, var(--line));
  border-radius:18px; padding:20px 24px; font-size:.95rem; color:var(--muted);
  display:flex; gap:14px; align-items:flex-start; background:color-mix(in srgb, var(--amber) 6%, transparent);
}
.prog-note b{color:var(--text)}

/* Story */
.split{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,70px); align-items:center}
.portrait{
  border-radius:26px; overflow:hidden; border:1px solid var(--line); position:relative;
  box-shadow:0 34px 70px -34px var(--shadow); aspect-ratio:4/5; background:var(--surface-2);
}
.portrait img{width:100%; height:100%; object-fit:cover}
.portrait .cap{
  position:absolute; inset:auto 14px 14px; border-radius:14px; padding:10px 16px;
  background:color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter:blur(10px);
  font-size:.8rem; border:1px solid var(--line);
}
.story-copy p{color:var(--muted); margin-bottom:16px}
.story-copy p b{color:var(--text)}
blockquote.ethos{
  font-family:'Fraunces',serif; font-style:italic; font-size:1.28rem; line-height:1.45; font-weight:440;
  border-left:3px solid var(--amber); padding-left:22px; margin:26px 0; color:var(--text);
}

/* Book. Copy on the left, cover photograph on the right, stacking on narrow
   screens. */
.book-wrap{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,64px); align-items:center;
}
.book-cover{
  width:100%; max-width:520px; border-radius:16px; overflow:hidden; margin:0 auto;
  box-shadow:0 40px 80px -30px var(--shadow); transform:rotate(-2deg);
  transition:transform .5s var(--ease); border:1px solid var(--line); background:var(--surface-2);
}
.book-cover:hover{transform:rotate(0deg) scale(1.02)}
.book-cover img{width:100%; height:auto; display:block}

/* A pair of supporting shots under the main book image. One is portrait and
   one is landscape, so the columns are weighted to bring the two to a similar
   height and the cards flex so the captions sit on a common line. */
.book-extras{
  display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
  gap:18px; margin-top:40px; align-items:stretch; max-width:760px;
}
.shot{
  margin:0; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:var(--surface); box-shadow:0 24px 50px -34px var(--shadow);
  display:flex; flex-direction:column;
}
.shot img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block}
.shot.wide img{aspect-ratio:3/2}
.shot figcaption{
  padding:12px 16px; font-size:.82rem; color:var(--muted); border-top:1px solid var(--line);
  margin-top:auto;
}

/* #3Ts campaign posters. Shown whole rather than cropped, since each one
   carries copy, and they open full size in a new tab. */
.poster-strip{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:18px; margin-top:30px;
}
.poster{
  margin:0; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:var(--surface); transition:transform .4s var(--ease), border-color .3s;
  /* The posters differ in aspect ratio, so the card stretches and the
     caption is pushed to the bottom to keep captions aligned. */
  display:flex; flex-direction:column;
}
.poster a{display:block; text-decoration:none}
.poster img{width:100%; height:auto; display:block}
.poster:hover, .poster:focus-within{transform:translateY(-4px); border-color:var(--amber)}
.poster figcaption{padding:11px 15px; font-size:.8rem; color:var(--muted); margin-top:auto}

/* Photograph inside the media band */
.band-shot{
  margin:0; border-radius:18px; overflow:hidden; border:1px solid var(--line);
  box-shadow:0 26px 56px -34px var(--shadow);
}
.band-shot img{width:100%; height:100%; object-fit:cover; aspect-ratio:16/9; display:block}

/* Free giveaways on Get Involved. Stacked rather than side by side, because
   the sticker is small square artwork and reads better at full column width. */
#giveaways .split{align-items:start}
.giveaway{display:grid; grid-template-columns:1fr; gap:14px; align-content:start}
.giveaway figure{
  margin:0; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:var(--surface); box-shadow:0 24px 50px -34px var(--shadow);
}
.giveaway img{width:100%; height:auto; display:block}
.giveaway .a img{aspect-ratio:3/2; object-fit:cover}
.giveaway .b img{aspect-ratio:5/2; object-fit:contain; background:#fff; padding:14px}
.price{
  display:inline-flex; align-items:baseline; gap:8px; margin:18px 0 22px;
  font-family:'Fraunces',serif; font-size:2rem; color:var(--amber-2);
}
.price small{font-family:'Karla'; font-size:.82rem; color:var(--muted)}
.stores{display:flex; flex-wrap:wrap; gap:11px}
.impact-line{margin-top:22px; font-size:.9rem; color:var(--sage); display:flex; gap:9px; align-items:center}

/* Road ahead */
.goal-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.goal{
  border:1px solid var(--line); border-radius:22px; padding:26px 24px; background:var(--surface);
  display:flex; flex-direction:column; gap:10px;
}
.goal .stage{
  font-family:'Fraunces',serif; font-style:italic; font-size:.95rem; color:var(--sage);
}
.goal h3{font-size:1.08rem; font-weight:540}
.goal p{font-size:.9rem; color:var(--muted)}

/* Stories & media */
.media-band{
  border:1px solid var(--line); border-radius:26px; background:var(--surface);
  padding:clamp(30px,5vw,52px); display:grid; grid-template-columns:1.25fr .75fr; gap:30px; align-items:center;
}
.media-band h3{font-size:clamp(1.4rem,2.6vw,2rem); font-weight:500; margin-bottom:12px}
.media-band h3 em{font-style:italic; color:var(--rose)}
.media-band p{color:var(--muted); max-width:56ch}
.media-ctas{display:flex; flex-direction:column; gap:12px; align-items:stretch}

/* Get involved */
.inv-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.inv-card{
  border:1px solid var(--line); border-radius:24px; background:var(--surface); padding:30px 26px;
  display:flex; flex-direction:column; gap:12px; transition:transform .35s var(--ease), border-color .35s;
}
.inv-card:hover{transform:translateY(-5px); border-color:color-mix(in srgb, var(--i-accent) 55%, var(--line))}
.inv-card h3{font-size:1.2rem; font-weight:540; color:var(--i-accent)}
.inv-card p{font-size:.92rem; color:var(--muted); flex:1}
.i-amber{--i-accent:var(--amber)} .i-sage{--i-accent:var(--sage)} .i-rose{--i-accent:var(--rose)}

/* Contact */
.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.line-card{
  border:1px solid var(--line); border-radius:22px; padding:28px 26px; background:var(--surface);
  display:flex; flex-direction:column; gap:8px;
}
.line-card h3{font-size:1.05rem; font-weight:560}
.line-card p{font-size:.88rem; color:var(--muted); flex:1}
.line-card .num{font-weight:700; color:var(--amber); text-decoration:none; font-size:1.02rem}
.line-card .num:hover{text-decoration:underline}
.line-card .wa{font-size:.84rem; color:var(--sage); text-decoration:none; font-weight:700}

/* Footer */
footer{border-top:1px solid var(--line); background:var(--bg-2)}
.foot{
  max-width:1280px; margin:0 auto; padding:56px clamp(16px,5vw,60px) 36px;
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:36px;
}
.foot h4{font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; font-weight:700}
.foot a{display:block; text-decoration:none; color:var(--muted); font-size:.92rem; padding:5px 0; transition:color .2s}
.foot a:hover{color:var(--amber)}
.foot .about p{color:var(--muted); font-size:.9rem; margin-top:14px; max-width:38ch}
.legal{border-top:1px solid var(--line); text-align:center; padding:20px; font-size:.8rem; color:var(--muted)}

/* Floating help pill */
.help-pill{
  position:fixed; right:18px; bottom:18px; z-index:70; display:inline-flex; align-items:center; gap:9px;
  background:var(--rose); color:var(--btn-ink); font-weight:700; font-size:.9rem;
  border:1.5px solid var(--amber-2); border-radius:999px; padding:13px 22px;
  cursor:pointer; text-decoration:none;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.55);
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.help-pill.show{opacity:1; transform:none; pointer-events:auto}
.help-pill:hover{background:var(--amber-hover); box-shadow:0 16px 40px -10px rgba(0,0,0,.6), 0 0 0 4px color-mix(in srgb, var(--edge) 22%, transparent)}
.help-pill .pulse{width:9px;height:9px;border-radius:50%;background:var(--btn-ink);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(10,10,10,.45)}70%{box-shadow:0 0 0 9px rgba(10,10,10,0)}100%{box-shadow:0 0 0 0 rgba(10,10,10,0)}}

/* Reveal */
.social-row{
  display:grid; grid-template-columns:repeat(4, 42px); gap:10px;
  justify-content:start; margin:6px 0 12px;
}
.social-btn{
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  border:1.5px solid var(--line-control); color:var(--muted);
  transition:color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.social-btn svg{width:19px; height:19px; display:block}
.social-btn:hover,
.social-btn:focus-visible{
  color:var(--btn-ink); background:var(--amber); border-color:var(--amber-2);
  transform:translateY(-2px);
  box-shadow:0 8px 20px -8px var(--glow), 0 0 0 4px color-mix(in srgb, var(--edge) 16%, transparent);
}
.linktree-note{font-size:.85rem; display:inline-block}
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1; transform:none}

/* ============ RESPONSIVE ============ */
@media (max-width:960px){
  nav.main{
    position:fixed; inset:63px 0 auto 0; flex-direction:column; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line); padding:10px 0 16px;
    transform:translateY(-130%); transition:transform .4s var(--ease); z-index:55;
  }
  nav.main.open{transform:none}
  nav.main a{padding:13px 26px; font-size:1rem}
  .hamburger{display:grid}
  .hide-m{display:none}
  .btn-exit{padding:8px 12px; font-size:.74rem}
  .topbar{gap:10px}
  .hero{grid-template-columns:1fr; padding-top:104px; text-align:center}
  .hero-copy{order:2}
  .rose-stage{order:1; min-height:320px}
  #roseImg{height:min(40vh,300px)}
  .hero p.lede{margin-inline:auto}
  .hero-ctas{justify-content:center}
  .hero-note{justify-content:center}
  .split{grid-template-columns:1fr}
  .book-wrap{grid-template-columns:1fr}
  .media-band{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
  .crisis-lines{margin-left:0}
}
@media (max-width:560px){
  .foot{grid-template-columns:1fr}
  /* Full width on narrow screens, so poster copy stays readable. */
  .poster-strip{grid-template-columns:1fr; max-width:420px; margin-inline:auto}
  .book-extras{grid-template-columns:1fr; max-width:420px; margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  .reveal{opacity:1; transform:none}
  html{scroll-behavior:auto}
}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px; border-radius:6px}

/* ═══════════════════════════════════════════════════════════
   MULTI-PAGE ADDITIONS
   Added when the single-page prototype was split into a
   multi-page site. Everything below uses the existing tokens.
   ═══════════════════════════════════════════════════════════ */

/* Accessibility: keyboard users can jump straight to content */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--amber); color:var(--btn-ink);
  padding:12px 20px; border-radius:0 0 10px 0; font-weight:700;
}
.skip-link:focus{left:0}

/* Visible focus ring, required for WCAG. Many visitors navigate this site
   without a mouse. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--amber); outline-offset:3px; border-radius:6px;
}

nav.main a.is-active{color:var(--amber)}
nav.main a.is-active::after{width:100%}

/* ── Crisis band ────────────────────────────────────────── */
.crisis-band{
  background:var(--surface); border-block:1px solid var(--line);
  padding:18px 24px; text-align:center;
}
.crisis-band p{margin:0; font-size:.95rem}
.crisis-band a{color:var(--amber); font-weight:600; white-space:nowrap}

/* ── Forms ──────────────────────────────────────────────── */
.form-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:clamp(22px,4vw,36px);
  max-width:640px; margin-top:26px;
}
.field{margin-bottom:20px}
.field label{
  display:block; margin-bottom:7px; font-weight:600; font-size:.92rem;
}
.field .opt{font-weight:400; color:var(--muted); font-size:.85rem}
.field input[type=text], .field input[type=email],
.field select, .field textarea{
  width:100%; padding:12px 14px; font:inherit; font-size:.95rem;
  color:var(--text); background:var(--bg-2);
  border:1px solid var(--line); border-radius:11px;
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--amber); box-shadow:0 0 0 3px var(--glow); outline:none;
}
.field textarea{resize:vertical; min-height:130px}
.field.checkbox{display:flex; align-items:flex-start; gap:11px; flex-wrap:wrap}
.field.checkbox input{margin-top:3px; width:18px; height:18px; accent-color:var(--amber); flex:none}
.field.checkbox label{margin:0; font-weight:400; flex:1; min-width:200px}
.counter{text-align:right; font-size:.78rem; color:var(--muted); margin-top:5px}

.err{
  color:#ff6b6b; font-size:.84rem; margin:6px 0 0; min-height:0;
}
:root[data-theme="light"] .err{color:#c02626}
.field.invalid input, .field.invalid select, .field.invalid textarea{
  border-color:#ff6b6b;
}

.form-status{margin-top:16px; font-size:.92rem; min-height:1.2em}
.form-status.ok{color:var(--amber); font-weight:600}
.form-status.bad{color:#ff6b6b}
:root[data-theme="light"] .form-status.bad{color:#c02626}

.privacy-note{
  background:var(--bg-2); border:1px solid var(--line);
  border-left:3px solid var(--amber);
  border-radius:12px; padding:15px 18px; margin-top:22px;
  font-size:.9rem; color:var(--muted); max-width:640px;
}
.privacy-note strong{color:var(--text)}
.privacy-note kbd{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:5px; padding:1px 6px; font-size:.82em;
}

/* Off-screen utility. Not display:none, so assistive tech behaviour is
   predictable. */
.hp{position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden}

button[disabled]{opacity:.55; cursor:not-allowed}

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

/* Support line cards on the Get Help page */
.line-card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px}
.line-card{
  border:1px solid var(--line); border-radius:22px; background:var(--surface);
  padding:28px 26px; display:flex; flex-direction:column; gap:12px;
  transition:transform .35s var(--ease), border-color .35s;
}
.line-card:hover{transform:translateY(-4px); border-color:color-mix(in srgb, var(--amber) 45%, var(--line))}
.line-card h3{font-size:1.12rem; font-weight:560; color:var(--amber)}
.line-card p{font-size:.94rem; color:var(--muted); flex:1}
.line-card .prog-cta{
  font-weight:700; font-size:1.02rem; color:var(--text); letter-spacing:.01em;
  text-decoration:none; border-bottom:1px solid var(--amber); align-self:flex-start; padding-bottom:2px;
}
.line-card .prog-cta:hover{color:var(--amber)}


/* ============ LEGAL DOCUMENT ============
   Long-form policy text. Narrower measure than the rest of the site, because
   this is read start to finish rather than scanned. */
.legal-doc{max-width:74ch}
.legal-doc h3{
  font-size:1.12rem; font-weight:600; margin:30px 0 10px;
  padding-top:20px; border-top:1px solid var(--line);
}
.legal-doc h3:first-of-type{border-top:0; padding-top:0}
.legal-doc p{color:var(--muted); margin-bottom:12px; line-height:1.75}
.legal-doc p.lede{color:var(--text)}
.legal-doc ul{margin:0 0 14px 20px; color:var(--muted); line-height:1.7}
.legal-doc li{margin-bottom:6px}
.legal-doc a{color:var(--amber); text-decoration:underline; text-underline-offset:2px}
.legal-doc b{color:var(--text); font-weight:600}

/* The plain-language summary, so the essentials are readable in ten seconds
   without working through the whole policy. */
.legal-summary{
  border:1.5px solid color-mix(in srgb, var(--edge) 45%, transparent);
  border-radius:16px; padding:20px 24px; margin:26px 0 32px;
  background:color-mix(in srgb, var(--edge) 6%, transparent);
}
.legal-summary h3{border-top:0; padding-top:0; margin:0 0 10px; font-size:.96rem; color:var(--amber)}
.legal-summary ul{margin-bottom:0}
.legal-summary li{color:var(--text)}