/* ============================================================
   The main page's own stylesheet.

   This used to live inside index.html. It is here so it can be cached, so the
   document is a document, and so dev/css-parity.cjs can compare it with
   theme.css and refuse to let the two drift apart.

   The main page still carries its own copy of the tokens on purpose: it is the
   flagship and it is not worth destabilising. Anything that exists in both
   files must agree, which the guard enforces.
   ============================================================ */

/* Typography: headings balance their lines, paragraphs avoid a widow.
   The opener and the sentence are left alone: their line breaks are load
   bearing, measured by the hero suite, because the four words fly onto slots
   inside the sentence and have to land on the baseline they were measured
   against. */
h1:not(.opener),h2,h3,h4{text-wrap:balance}
p:not(.sentence),li,blockquote{text-wrap:pretty}

/* ============================================================
   THEME TOKENS  -  every colour on the site lives here.
   Change the scheme by editing this block only.
   ============================================================ */
:root{
  --paper:#F2EFE6; --ink:#14110F;
  --ink-80:rgba(20,17,15,.80); --ink-62:rgba(20,17,15,.62); --ink-40:rgba(20,17,15,.40);
  --rule:rgba(20,17,15,.16); --rule-soft:rgba(20,17,15,.09);
  --accent:#E0361A; --accent-deep:#B8240D; --reg:#1F3FD6;
  /* see theme.css: #E0361A is 3.9:1 on the paper, so text takes this instead */
  --accent-ink:#C42E15;
  /* the fill for anything that carries text: #E0361A is 4.2:1 against the
     night ink, which fails AA at button size, so text-bearing fills use this
     one (4.7:1). The plain accent stays for rules, icons and borders. */
  --accent-fill:#E8421F;
  /* links on the night sections need a step more light to clear AA on near-black */
  --accent-lift:color-mix(in srgb, var(--accent) 78%, #fff);
  --night:#14110F; --night-soft:#1D1917;
  --bone:#F2EFE6; --bone-62:rgba(242,239,230,.62); --bone-40:rgba(242,239,230,.40);
  --bone-rule:rgba(242,239,230,.16);

  --font-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-body:'Newsreader',Georgia,'Times New Roman',serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --fly:1150ms;
  /* the polish run's motion kit: one rhythm and two springs */
  --t-fast:170ms; --t-med:280ms; --t-slow:460ms;
  --spring:cubic-bezier(.2,1.4,.4,1);
  --spring-soft:cubic-bezier(.18,1.3,.32,1);

  --bar-h:66px;
  --rail:132px;
  --maxw:1280px;
  --prose:62ch;
}
html[data-theme="acid"]{
  --paper:#0C0C0C; --ink:#EDEAE6;
  --ink-80:rgba(237,234,230,.86); --ink-62:rgba(237,234,230,.62); --ink-40:rgba(237,234,230,.40);
  --rule:rgba(237,234,230,.18); --rule-soft:rgba(237,234,230,.10);
  --accent:#D6FF3F; --accent-deep:#B4E000; --reg:#FF4FD8;
  --night:#000; --night-soft:#0C0C0C;
  --bone:#EDEAE6; --bone-62:rgba(237,234,230,.62); --bone-40:rgba(237,234,230,.40);
  --bone-rule:rgba(237,234,230,.18);
}
html[data-theme="mono"]{
  --paper:#F4F3F0; --ink:#101010;
  --ink-80:rgba(16,16,16,.86); --ink-62:rgba(16,16,16,.62); --ink-40:rgba(16,16,16,.40);
  --rule:rgba(16,16,16,.16); --rule-soft:rgba(16,16,16,.08);
  --accent:#101010; --accent-deep:#101010; --reg:rgba(16,16,16,.24);
  --night:#101010; --night-soft:#181818;
  --bone:#F4F3F0; --bone-62:rgba(244,243,240,.62); --bone-40:rgba(244,243,240,.40);
  --bone-rule:rgba(244,243,240,.18);
}
html[data-theme="marker"]{
  --paper:#FBFAF6; --ink:#151515;
  --ink-80:rgba(21,21,21,.86); --ink-62:rgba(21,21,21,.62); --ink-40:rgba(21,21,21,.40);
  --rule:rgba(21,21,21,.15); --rule-soft:rgba(21,21,21,.08);
  --accent:#E4003B; --accent-deep:#B0002E; --reg:#0F8A3C;
  --night:#151515; --night-soft:#1F1F1F;
  --bone:#FBFAF6; --bone-62:rgba(251,250,246,.62); --bone-40:rgba(251,250,246,.40);
  --bone-rule:rgba(251,250,246,.16);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
::selection{background:var(--accent-fill);color:var(--night)}
html[data-theme="acid"] ::selection{color:var(--night)}
html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 30%,transparent) transparent}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 26%,transparent);
  border:3px solid var(--paper);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
::-webkit-scrollbar-corner{background:transparent}
[id]{scroll-margin-top:calc(var(--bar-h) + 28px)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:18px;line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* nothing scrolls until a perspective is chosen */
body:not([data-picked="true"]){overflow:hidden;height:100vh;height:100svh}

.grain{
  position:fixed;inset:-4%;z-index:9998;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
/* the paper drifts, very slowly, so it reads as stock not screen */
@media (prefers-reduced-motion:no-preference){
  .grain{animation:grainDrift 64s linear infinite}
}
@keyframes grainDrift{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(-2%,1.4%)}
  50%{transform:translate(1.4%,-2%)}
  75%{transform:translate(-1.2%,2%)}
}
html[data-theme="acid"] .grain{mix-blend-mode:screen;opacity:.07}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 34px}
@media (max-width:700px){.wrap{padding:0 20px}}

/* ============================================================
   HEAD
   ============================================================ */
.site-head{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--bar-h);display:flex;align-items:center}
.site-head::before{
  content:'';position:absolute;inset:0;z-index:-1;opacity:0;transform:translateY(-100%);
  background:color-mix(in srgb,var(--paper) 84%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--rule);
  transition:opacity 520ms var(--ease),transform 520ms var(--ease),box-shadow 520ms var(--ease);
}
body[data-picked="true"] .site-head::before{opacity:1;transform:none}
body.has-scrolled .site-head::before{box-shadow:0 16px 38px -24px rgba(20,17,15,.38)}
.head-in{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 34px;display:flex;align-items:center}
@media (max-width:700px){.head-in{padding:0 20px}}
.mark{
  font-family:var(--font-display);font-weight:900;font-size:20px;letter-spacing:-.045em;
  line-height:1;position:relative;flex:0 0 auto;
}
.mark::after{
  content:'';position:absolute;left:0;right:0;bottom:-5px;height:2.5px;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 480ms var(--ease);
}
body[data-picked="true"] .mark::after{transform:scaleX(1)}
.mark:hover::after{transform:scaleX(1) scaleY(1.4)}

/* ============================================================
   THE HERO'S OWN ART
   The quiet half of the first screen is not quiet any more: the
   brand mark settles in, a warm wash rises at the foot, and
   brand arrows drift up past it all. It stands down the moment
   the words start flying.
   ============================================================ */
.hero-art{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-mark{position:absolute;right:-3%;top:50%;
  transform:translateY(-50%);
  font-family:var(--font-display);font-weight:800;letter-spacing:-.045em;
  font-size:clamp(150px,32vw,540px);line-height:.8;white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:1.5px color-mix(in srgb,var(--ink) 15%,transparent)}
.hero-drift{position:absolute;bottom:-8%;width:24px;height:15px;opacity:0;
  background:color-mix(in srgb,var(--accent) 60%,transparent)}
.intro::after{content:'';position:absolute;left:0;right:0;bottom:0;height:46%;
  background:radial-gradient(120% 100% at 28% 132%,
    color-mix(in srgb,var(--accent) 9%,transparent) 0%, transparent 66%);
  pointer-events:none}
.hero-art,.intro::after{transition:opacity 700ms var(--ease)}
body[data-stage="1"] .hero-art,body[data-stage="2"] .hero-art,
body[data-stage="2b"] .hero-art,body[data-picked="true"] .hero-art,
body[data-stage="1"] .intro::after,body[data-stage="2"] .intro::after,
body[data-stage="2b"] .intro::after,body[data-picked="true"] .intro::after{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .hero-mark{animation:heroMark 1500ms var(--ease) 250ms backwards}
  .opener{animation:openerIn 950ms var(--ease) 120ms backwards}
  .hero-drift{animation-name:heroRise;animation-timing-function:linear;
    animation-iteration-count:1;animation-fill-mode:forwards}
}
@keyframes heroMark{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}
@keyframes openerIn{from{opacity:0}to{opacity:1}}
@keyframes heroRise{0%{transform:translateY(0) rotate(-6deg);opacity:0}
  8%{opacity:.35}
  88%{opacity:.25}
  100%{transform:translateY(-112vh) rotate(7deg);opacity:0}}
@media (max-width:700px){
  .hero-mark{font-size:clamp(120px,44vw,300px);right:-8%}
}

/* ============================================================
   THE FOUR WORDS
   One set of elements for the whole page. They start invisible,
   land on their inline slots inside the sentence, fly to the
   centre stack, then fly up into the bar. Position is always a
   transform, so every flight is continuous.
   ============================================================ */
.word{
  position:fixed;left:0;top:0;z-index:70;
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(28px,5.4vw,74px);
  /* must match .sentence line-height or the words will not sit on their slots */
  line-height:1.32;
  letter-spacing:-.01em;white-space:nowrap;
  color:var(--ink);background:none;border:0;padding:0;margin:0;
  cursor:pointer;transform-origin:0 0;will-change:transform,opacity;
  transition:transform var(--fly) var(--ease),opacity 620ms linear,color 300ms linear;
  opacity:0;
}
.word:focus-visible{outline:3px solid var(--accent);outline-offset:6px}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
body[data-stage="1"] .word,body[data-stage="2"] .word,body[data-stage="2b"] .word,body[data-picked="true"] .word{opacity:1}
/* in the bar the words are small - colour + weight shift with them */
/* weight must not change on pick: it would change the widths the bar was measured from */
body[data-picked="true"] .word{color:var(--ink)}
body[data-picked="true"] .word[aria-pressed="true"]{color:var(--accent-deep)}
html[data-theme="acid"] body[data-picked="true"] .word[aria-pressed="true"]{color:var(--accent)}
.word[aria-pressed="true"]::after{
  content:'';position:absolute;left:0;right:0;bottom:-.18em;height:2px;background:var(--accent);
  transform:scaleX(1);transform-origin:0 50%;transition:transform 420ms var(--ease);
}
.word[aria-pressed="false"]::after{
  content:'';position:absolute;left:0;right:0;bottom:-.18em;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 420ms var(--ease);
}
/* pulse once the reader is being asked to choose and has not */
body[data-stage="2b"]:not([data-picked="true"]) .word{animation:pulseW 2.2s var(--ease-io) infinite}
@keyframes pulseW{0%,100%{opacity:1}50%{opacity:.5}}

/* ============================================================
   THE INTRO
   ============================================================ */
.intro{
  position:relative;height:100vh;height:100svh;display:flex;flex-direction:column;
  justify-content:center;padding-top:var(--bar-h);
}
.stage{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;
  flex-direction:column;justify-content:center;pointer-events:none}
@media (max-width:700px){.stage{justify-content:flex-start;padding-top:22svh}}

/* --- stage 0: the opener --- */
.opener{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(25px,4.1vw,60px);line-height:1.06;letter-spacing:-.035em;
  margin:0;max-width:19ch;
  transition:opacity 900ms var(--ease),transform 1000ms var(--ease),filter 900ms var(--ease);
}
body[data-stage="1"] .opener,body[data-stage="2"] .opener,body[data-stage="2b"] .opener,
body[data-picked="true"] .opener{opacity:0;transform:translateY(-34px);filter:blur(7px)}
.scroll-cue{
  position:absolute;left:34px;bottom:52px;
  display:flex;align-items:center;gap:14px;
  background:none;border:0;padding:0;cursor:pointer;pointer-events:auto;
  font-family:var(--font-display);font-weight:600;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-40);
  transition:opacity 420ms var(--ease),color 240ms linear;
}
@media (max-width:700px){.scroll-cue{left:20px;bottom:36px}}
.scroll-cue:hover{color:var(--accent)}
body[data-stage="1"] .scroll-cue,body[data-stage="2"] .scroll-cue,body[data-stage="2b"] .scroll-cue,
body[data-picked="true"] .scroll-cue{opacity:0;pointer-events:none}
.cue-track{position:relative;width:2px;height:46px;background:var(--rule);overflow:hidden}
.cue-track::after{
  content:'';position:absolute;left:0;width:2px;height:14px;background:var(--accent);
  animation:cueRun 2.4s var(--ease-io) infinite;
}
@keyframes cueRun{0%{top:-16px}48%{top:46px}100%{top:46px}}

/* --- stage 1: the sentence --- */
.sentence{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(19px,2.9vw,42px);line-height:1.32;letter-spacing:-.02em;
  margin:0;max-width:26ch;
  transition:opacity 950ms var(--ease),transform 1050ms var(--ease),filter 950ms var(--ease);
  opacity:0;transform:translateY(26px);
}
body[data-stage="1"] .sentence{opacity:1;transform:none}
body[data-stage="2"] .sentence,body[data-stage="2b"] .sentence,body[data-picked="true"] .sentence{
  opacity:0;transform:translateY(-16px);filter:blur(5px);
}
/* matches .word metrics so the computed scale lands the glyphs on the slot */
.wslot{visibility:hidden;font-weight:800;letter-spacing:-.01em}

/* --- stage 2: the question --- */
.question{
  position:fixed;left:0;right:0;z-index:65;text-align:center;margin:0;
  font-family:var(--font-display);font-weight:700;font-size:13px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--accent-deep);
  opacity:0;transform:translateY(26px);
  transition:opacity 900ms var(--ease) 160ms,transform 1000ms var(--ease) 160ms;
  pointer-events:none;
}
html[data-theme="acid"] .question{color:var(--accent)}
body[data-stage="2"] .question,body[data-stage="2b"] .question{opacity:1;transform:none}
body[data-picked="true"] .question{opacity:0;transform:translateY(-14px)}
.pickcue{
  position:fixed;left:0;right:0;bottom:54px;z-index:65;margin:0;text-align:center;
  font-family:var(--font-display);font-weight:600;font-size:11.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-62);
  opacity:0;pointer-events:none;
  transition:opacity 380ms var(--ease);
}
body[data-stage="2b"] .pickcue{opacity:1;animation:pulseW 1.7s var(--ease-io) infinite}

/* --- the nudge: while the reader keeps pushing at the picker, each word is
   drawn as a button and the cue steps forward; the moment the pushing
   stops, every indicator stands down again --- */
.word::before{
  content:'';position:absolute;left:-16px;right:-16px;top:-1px;bottom:-1px;
  border:2px solid transparent;border-radius:5px;
  background:color-mix(in srgb,var(--accent) 7%,transparent);
  opacity:0;transform:scale(.94);transform-origin:50% 50%;
  transition:opacity 260ms var(--ease),transform 420ms cubic-bezier(.18,1.3,.32,1),border-color 260ms var(--ease);
  pointer-events:none;
}
.word:nth-of-type(2)::before{transition-delay:40ms}
.word:nth-of-type(3)::before{transition-delay:80ms}
.word:nth-of-type(4)::before{transition-delay:120ms}
body[data-nudge="true"]:not([data-picked="true"]) .word::before{
  border-color:var(--accent);opacity:1;transform:none;
}
/* the words hold still so the boxes read cleanly, and the cue leads */
body[data-nudge="true"]:not([data-picked="true"]) .word{animation:none}
body[data-nudge="true"]:not([data-picked="true"]) .pickcue{
  color:var(--accent-deep);font-size:16.5px;font-weight:800;animation:none;
}
html[data-theme="acid"] body[data-nudge="true"]:not([data-picked="true"]) .pickcue{color:var(--accent)}
@media (max-width:700px){
  /* the enlarged cue keeps clear of the contact button on a phone */
  body[data-nudge="true"]:not([data-picked="true"]) .pickcue{bottom:96px}
}
@media (prefers-reduced-motion:reduce){
  .word::before{transition:none;transform:none}
}

/* ============================================================
   CONTENT SLOTS
   Every piece of prose on this site is yours to write. Each one
   is a numbered slot. Replace the whole .ph element with your
   text. Numbers map to CONTENT-NOTES.md.
   ============================================================ */
.ph{
  position:relative;border:1px dashed var(--rule);border-radius:2px;
  padding:20px 22px 22px;max-width:var(--prose);
  font-family:var(--font-display);font-weight:500;font-size:14.5px;line-height:1.55;
  color:var(--ink-62);
}
.ph .n{
  display:inline-block;font-weight:900;font-size:10.5px;letter-spacing:.14em;
  color:var(--night);background:var(--accent-fill);padding:3px 7px 2px;border-radius:2px;
  margin-right:10px;transform:translateY(-1px);
}
.ph--xl{font-size:clamp(20px,2.6vw,34px);font-weight:700;line-height:1.16;letter-spacing:-.03em;
  padding:24px 26px;color:var(--ink-80)}
.ph--h{font-size:clamp(18px,2.2vw,28px);font-weight:800;letter-spacing:-.03em;color:var(--ink-80)}
.ph--stat{font-size:16px;padding:22px}
.ph--note{font-size:13.5px;padding:16px 18px;background:var(--rule-soft);border-style:solid}
.ph--on-night{border-color:var(--bone-rule);color:var(--bone-62);background:none}
.ph--on-night .n{color:var(--night)}
:where(.sec--night) .ph{border-color:var(--bone-rule);color:var(--bone-62)}
:where(.sec--night) .ph--xl,:where(.sec--night) .ph--h{color:var(--bone)}
.ph + .ph{margin-top:14px}

/* ------------------------------------------------------------
   WRITTEN CONTENT
   The classes the content notes promise. Every written slot is
   injected as one of these, so the copy inherits the page's own
   typography instead of carrying styles of its own.
   ------------------------------------------------------------ */
.sub{
  font-family:var(--font-body);font-size:clamp(17px,1.15vw,19px);line-height:1.62;
  color:var(--ink-80);margin:0 0 14px;max-width:var(--prose);
}
.sub:last-child{margin-bottom:0}
/* A source list carries long URLs. Keep links on the palette rather than the
   browser default blue, and let a URL break rather than run off the edge of a
   narrow column. */
/* on the night background the plain accent sits at 4.4:1, so links take the lifted one */
:where(.sec--night,.sec--bleed,.finale) .sub a,
:where(.sec--night,.sec--bleed,.finale) .attrib a{color:var(--accent-lift)}
.sub a{color:var(--accent-ink);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:2px;overflow-wrap:anywhere;
  transition:color var(--t-fast) linear,text-decoration-thickness var(--t-fast) linear,
    text-underline-offset var(--t-fast) linear}
.sub a:hover{color:var(--accent-deep);text-decoration-thickness:2px;text-underline-offset:3px}
.attrib{
  font-family:var(--font-display);font-weight:600;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-62);
  margin:14px 0 0;max-width:var(--prose);
}
.attrib a{color:var(--accent-ink);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:2px;overflow-wrap:anywhere;
  transition:color var(--t-fast) linear,text-decoration-thickness var(--t-fast) linear}
.attrib a:hover{color:var(--accent-deep);text-decoration-thickness:2px}
:where(.sec--night,.sec--bleed) .sub{color:var(--bone-62)}
:where(.sec--night,.sec--bleed) .attrib{color:var(--bone-62)}
:where(.sec--night,.sec--bleed) .statement{color:var(--bone)}
/* The figures: one cell per figure, so a figure and its source can never drift
   apart in the grid. The source is an attrib slot, which is the page's own
   citation style, and it is pushed to the bottom of the cell so the three line
   up with each other. */
.stats{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:26px}
.stat{display:flex;flex-direction:column}
.stat .sub{margin-bottom:0}
.stat .attrib{margin-top:auto;padding-top:16px}

/* ============================================================
   READING PROGRESS  -  a 3px bar that fills as the journey is
   read. The curve lives in the script: fast at the start, so
   the first screen already reads as most of the way in.
   ============================================================ */
.readbar{position:fixed;inset:0 0 auto 0;height:3px;z-index:80;opacity:0;
  transition:opacity 260ms var(--ease)}
.readbar i{display:block;height:100%;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent));
  box-shadow:0 0 14px color-mix(in srgb,var(--accent) 55%,transparent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 90ms linear}
@media (prefers-reduced-motion:reduce){.readbar i{transition:none}}
/* ============================================================
   SECTION SCAFFOLD  -  a rail with an outlined numeral, and a
   body that sits off-centre. No cards, no boxes, no centred
   column. Rules and numerals do the work.
   ============================================================ */
.sec{
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:start;
  padding:clamp(84px,10vw,152px) 0;border-top:1px solid var(--rule);
  width:100%;max-width:var(--maxw);margin:0 auto;padding-left:34px;padding-right:34px;
}
@media (max-width:900px){
  .sec{grid-template-columns:1fr;gap:26px;padding-left:20px;padding-right:20px}
}
.rail{position:sticky;top:calc(var(--bar-h) + 28px)}
.num{
  display:block;font-family:var(--font-display);font-weight:900;
  font-size:clamp(44px,6.4vw,92px);line-height:.82;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.6px var(--ink-40);
}
html[data-theme="acid"] .num{-webkit-text-stroke-color:var(--ink-40)}
.rail-note{
  display:block;margin-top:16px;font-family:var(--font-display);font-weight:600;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-40);
  max-width:14ch;line-height:1.6;
}
@media (max-width:900px){.rail{position:static}.num{font-size:clamp(38px,12vw,64px)}
  .rail-note{max-width:none}}

.sec--bleed{border-top:0;max-width:none;padding-left:0;padding-right:0;
  background:var(--night);color:var(--bone);
  /* one full-width column: the inner container is not a rail */
  grid-template-columns:minmax(0,1fr)}
.sec--bleed .inner{max-width:var(--maxw);margin:0 auto;padding:0 34px}
@media (max-width:900px){.sec--bleed .inner{padding:0 20px}}
.sec--flat{border-top:1px solid var(--rule)}

/* perspective statement: full bleed, very large, hard left */
.statement{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(30px,5.6vw,82px);line-height:1.02;letter-spacing:-.04em;
  margin:0 0 30px;max-width:20ch;
}
/* The display heading comes in three sizes and the placeholder it replaced picks
   the one it needs, so a heading can never be set bigger than its column: xl is
   the reader's own statement, m a section heading in the body column, h a heading
   inside a narrow column (a row, a node). */
.statement--xl{font-size:clamp(30px,5.6vw,82px);max-width:20ch}
.statement--m{font-size:clamp(24px,3.2vw,48px);line-height:1.06;max-width:22ch;margin-bottom:22px}
.statement--h{font-size:clamp(19px,1.9vw,28px);font-weight:800;line-height:1.16;
  letter-spacing:-.02em;max-width:none;margin:0 0 12px}
.rail-label{
  font-family:var(--font-display);font-weight:600;font-size:11.5px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--accent-lift);
  margin:0 0 26px;
}
.sub{
  font-family:var(--font-body);font-size:clamp(17px,1.5vw,20px);line-height:1.62;
  max-width:var(--prose);margin:0;color:var(--bone-62);
}
.sec:not(.sec--bleed) .sub{color:var(--ink-62)}

/* ============================================================
   THE CHAIN
   ============================================================ */
.chain{margin-top:52px;max-width:860px}
.node{
  display:grid;grid-template-columns:74px minmax(0,1fr);gap:22px;
  padding:26px 0;border-top:1px solid var(--rule);align-items:start;
}
@media (max-width:700px){.node{grid-template-columns:52px minmax(0,1fr);gap:14px}}
/* the result of the step above it: no number, an arrow in its place, shifted
   in from the left so the eye reads it as belonging to the step it falls from */
.node--sub{margin-left:26px;border-top-style:dashed}
.node-n--arrow{display:flex;align-items:flex-start}
.node-n--arrow svg{transition:transform 360ms var(--spring)}
.node:hover .node-n--arrow svg{transform:translateX(6px)}
.node--sub .node-t{font-size:clamp(16px,2vw,25px);color:var(--ink-80)}
@media (max-width:700px){.node--sub{margin-left:10px}}
.node-n{
  font-family:var(--font-display);font-weight:900;font-size:clamp(26px,3.4vw,46px);
  line-height:.8;letter-spacing:-.05em;color:transparent;
  -webkit-text-stroke:1.4px var(--accent);
}
.node-t{
  font-family:var(--font-display);font-weight:800;font-size:clamp(18px,2.4vw,30px);
  line-height:1.08;letter-spacing:-.028em;margin:0;
}
.node-s{margin:10px 0 0;font-size:16px;color:var(--ink-62);max-width:52ch}
.sec--bleed .node{border-top-color:var(--bone-rule)}
.sec--bleed .node-s{color:var(--bone-62)}

/* ============================================================
   CAPABILITY PROFILE
   ============================================================ */
.prof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,4vw,60px);align-items:center;margin-top:46px}
@media (max-width:880px){.prof{grid-template-columns:1fr;gap:32px}}
.prof-canvas{width:100%;max-width:430px;margin:0 auto}
#radar{display:block;width:100%;height:auto}
.caps{list-style:none;margin:0;padding:0}
.caps li{
  font-family:var(--font-display);font-weight:700;font-size:clamp(16px,1.9vw,22px);
  letter-spacing:-.022em;padding:12px 0;border-bottom:1px solid var(--rule);
  display:flex;align-items:baseline;gap:14px;
}
.caps li i{
  font-style:normal;font-family:var(--font-display);font-weight:600;font-size:11px;
  letter-spacing:.1em;color:var(--accent-ink);flex:0 0 auto;
  transition:transform 320ms var(--spring);
}
.caps li:hover i{transform:translateX(3px)}

/* ============================================================
   ASSESSMENT - three ruled rows, not three cards
   ============================================================ */
.rows{margin-top:46px;border-top:1px solid var(--rule)}
.rows .row{
  display:grid;grid-template-columns:74px minmax(0,1fr) minmax(0,1fr);
  gap:clamp(18px,3vw,44px);padding:30px 0;border-bottom:1px solid var(--rule);
  align-items:start;
  transition:background 300ms var(--ease);
}
.rows .row:hover{background:linear-gradient(90deg,var(--rule-soft),transparent 72%)}
@media (max-width:820px){.rows .row{grid-template-columns:52px minmax(0,1fr);gap:14px}
  .rows .row .rw-2{grid-column:2}}
.rows .rn{
  font-family:var(--font-display);font-weight:900;font-size:clamp(24px,3vw,40px);
  line-height:.8;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.4px var(--accent);
  transition:color 320ms var(--ease);
}
.rows .row:hover .rn{color:color-mix(in srgb,var(--accent) 20%,transparent)}
.rows h3{margin:0;font-family:var(--font-display);font-weight:800;
  font-size:clamp(17px,2.2vw,27px);letter-spacing:-.028em;line-height:1.1}

/* ============================================================
   QUOTE
   ============================================================ */
.quote{font-family:var(--font-body);font-size:clamp(22px,3.4vw,44px);line-height:1.3;
  font-style:italic;margin:0;max-width:24ch;letter-spacing:-.01em;
  padding-left:22px;border-left:2px solid var(--rule);
  transition:border-color 320ms var(--ease)}
.quote:hover{border-left-color:var(--accent)}
.attr{display:block;margin-top:24px;font-family:var(--font-display);font-style:normal;
  font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-62);
  transition:color 320ms var(--ease)}
.quote:hover .attr{color:var(--accent)}
.sec--bleed .attr{color:var(--bone-62)}

/* ============================================================
   FULL-BLEED ACCENT BAND
   ============================================================ */
.band{background:var(--accent-fill);color:var(--night);padding:clamp(60px,7vw,104px) 0}
html[data-theme="mono"] .band{background:var(--night);color:var(--bone)}
.band .inner{max-width:var(--maxw);margin:0 auto;padding:0 34px}
.band .ph{border-color:rgba(242,239,230,.5);color:rgba(242,239,230,.86);max-width:52ch}
.band .ph .n{background:var(--paper);color:var(--accent)}
html[data-theme="mono"] .band .ph{border-color:var(--bone-rule);color:var(--bone-62)}
html[data-theme="mono"] .band .ph .n{background:var(--bone);color:var(--night)}

/* ============================================================
   THE ASK
   ============================================================ */
.ask{padding:clamp(90px,12vw,170px) 0;background:var(--night);color:var(--bone)}
.ask .inner{max-width:var(--maxw);margin:0 auto;padding:0 34px}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.17em;
  text-transform:uppercase;padding:19px 30px;text-decoration:none;border:2px solid var(--bone);
  color:var(--bone);background:transparent;
  user-select:none;-webkit-user-select:none;
  transition:background 240ms var(--ease),color 240ms var(--ease),
    border-color 240ms var(--ease),transform 240ms var(--ease)}
.btn:hover{background:var(--bone);color:var(--night);transform:translateY(-2px)}
.btn:active{transform:translateY(1px) scale(.985);transition-duration:90ms}
.btn--solid{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--night)}
.btn--solid:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--bone)}
/* the arrow: the chain arrow's own head, drawn in after the label on hover.
   Link buttons and submit buttons only; copy buttons take the tick instead. */
a.btn::after,button.btn[type="submit"]::after{content:'';flex:0 0 auto;
  width:0;height:13px;margin-left:0;opacity:0;transform:translateX(-5px);
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 8h12' stroke='black' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M13 1.6 22.6 8 13 14.4z' fill='black'/%3E%3C/svg%3E") no-repeat left center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 8h12' stroke='black' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M13 1.6 22.6 8 13 14.4z' fill='black'/%3E%3C/svg%3E") no-repeat left center/contain;
  transition:width 340ms var(--spring),margin-left 340ms var(--spring),
    opacity 200ms var(--ease),transform 340ms var(--spring)}
a.btn:hover::after,a.btn:focus-visible::after,
button.btn[type="submit"]:hover::after,button.btn[type="submit"]:focus-visible::after{
  width:15px;margin-left:9px;opacity:1;transform:none}

/* ------------------------------------------------------------
   THE FINALE
   The last screen: a typed question to the reader, two branches
   that drop in, and then the two things a supporter can actually
   do, or one honest form for anyone who thinks it needs work.

   It is reactive on purpose: scroll advances it, the pointer
   tilts the layers, a click decides it. Everything stops moving
   if the reader has asked for less motion, and everything works
   with a keyboard.
   ------------------------------------------------------------ */
.finale{position:relative;min-height:240vh;background:var(--night);color:var(--bone);
  /* full bleed: this screen is meant to take over the viewport */
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.finale-stage{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(20px,3.4vh,40px);
  padding:clamp(18px,4vh,54px) 22px;overflow:hidden;text-align:center;
  --mx:0;--my:0;--p:0;isolation:isolate}
/* the wash: an accent glow that rises from the bottom of the screen as the
   reader comes down into the finale, and nothing at all above it */
.finale-stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(130% 90% at 50% 118%,
    color-mix(in srgb,var(--accent) 34%,transparent) 0%, transparent 62%);
  opacity:calc(var(--p) * .95);transition:opacity 700ms var(--ease)}
/* the mark: the reader's own word, outlined, filling the screen behind the
   question and swelling slowly as they scroll */
.finale-mark{position:absolute;left:50%;top:50%;z-index:0;pointer-events:none;
  font-family:var(--font-display);font-weight:800;letter-spacing:-.045em;
  font-size:clamp(150px,27vw,440px);line-height:.8;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--bone) 17%,transparent);
  transition:opacity 520ms var(--ease);
  transform:translate(-50%,-50%)
    translate3d(calc(var(--mx) * -18px), calc(var(--my) * -12px),0)
    scale(calc(.88 + var(--p) * .24));
  transition:transform 1100ms cubic-bezier(.16,1,.3,1)}
.layer{transform:translate3d(calc(var(--mx) * 12px * var(--k,1)),
    calc(var(--my) * 8px * var(--k,1) + var(--p) * -12px),0);
  transition:transform 900ms cubic-bezier(.16,1,.3,1);will-change:transform;
  position:relative;z-index:1;
  width:100%;display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3vh,36px)}
.layer--q{--k:1.15}
.layer--acts{--k:.55}

.finale-q{margin:0;font-family:var(--font-display);font-weight:800;
  font-size:clamp(34px,6vw,80px);line-height:1.03;letter-spacing:-.035em;
  max-width:21ch;min-height:2.1em}
.caret{display:inline-block;width:.055em;height:.9em;background:var(--accent);
  margin-left:.07em;vertical-align:-.05em;animation:caret 1s steps(1) infinite}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}
.finale-q.is-typed .caret{display:none}

.finale-acts{display:flex;flex-direction:column;align-items:center;
  gap:clamp(14px,2.4vh,22px);width:100%}
.branch{display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;
  width:min(760px,100%);padding:clamp(22px,3vh,34px) 26px;border-radius:4px;
  font-family:var(--font-display);font-weight:800;font-size:clamp(19px,2.7vw,36px);
  letter-spacing:-.02em;border:2px solid var(--bone);background:transparent;color:var(--bone);
  opacity:0;transform:translateY(-175%) rotate(-2.2deg);
  transition:opacity 420ms var(--ease),
    transform 900ms cubic-bezier(.18,1.28,.32,1),
    background 220ms var(--ease),color 220ms var(--ease),border-color 220ms var(--ease),
    width 500ms var(--ease),padding 500ms var(--ease),font-size 500ms var(--ease)}
.finale.is-branches .branch{opacity:1;transform:none}
.finale.is-branches .branch--no{transition-delay:150ms}
.branch--yes{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--night)}
.branch--yes:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--bone)}
.branch--no:hover{background:var(--bone);color:var(--night)}
.finale.is-decided .branch{width:min(460px,100%);padding:13px 18px;
  font-size:clamp(13px,1.5vw,17px)}
/* while a form is up the backdrop word steps back, so labels stay readable */
.finale.is-form .finale-mark{opacity:.26}
.finale.is-decided .branch[aria-pressed="false"]{opacity:.4}
.finale.is-decided .branch[aria-pressed="true"]{border-color:var(--accent)}

.ways{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:min(880px,100%)}
@media (max-width:760px){.ways{grid-template-columns:1fr}}
.way{display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;
  padding:clamp(18px,2.8vh,30px) 20px;border:2px solid var(--bone-rule);border-radius:4px;
  background:color-mix(in srgb,var(--bone) 6%,transparent);color:var(--bone);
  text-decoration:none;font-family:var(--font-display);font-weight:800;
  font-size:clamp(15px,1.9vw,23px);letter-spacing:-.02em;
  opacity:0;visibility:hidden;transform:translateY(26px);
  transition:opacity 420ms var(--ease),transform 720ms cubic-bezier(.18,1.3,.32,1),
    visibility 420ms,border-color 200ms var(--ease),background 200ms var(--ease)}
.finale.is-ways .way{opacity:1;visibility:visible;transform:none}
.finale.is-ways .way:nth-child(2){transition-delay:130ms}
.way[hidden]{display:none}
.ways.is-single{grid-template-columns:1fr;width:min(560px,100%)}
.way:hover{border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,transparent)}

.finale.is-form .finale-q{font-size:clamp(18px,2.3vw,30px);min-height:0;opacity:.7}
.finale.is-form .ways{display:none}
.finale.is-form .finale-acts{gap:9px}
.finale.is-form .branch{width:auto;padding:8px 14px;font-size:12px}

/* the closing row came out on request: the finale ends on its own buttons */
.ask{padding-bottom:0}

.finale-form{width:min(540px,100%);max-height:72vh;overflow:auto;
  display:flex;flex-direction:column;gap:14px;text-align:left;
  background:color-mix(in srgb,var(--night) 66%,transparent);
  border-radius:6px;box-shadow:0 0 0 20px color-mix(in srgb,var(--night) 66%,transparent)}
.finale-form[hidden]{display:none}
.hp-trap{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
/* the branches are invisible until they drop in, and an invisible button still
   takes a tap: it waits for the pointer until it has actually been shown */
.finale .branch,.finale .way{pointer-events:none}
.finale.is-branches .branch{pointer-events:auto}
.finale.is-ways .way{pointer-events:auto}
/* and the stage clears the fixed bar, so the question is never half under it */
.finale-stage{padding-top:calc(var(--bar-h) + 6px)}
/* the proposal, offered in both outcomes */
.finale-proposal{margin:20px 0 0;text-align:center}
.finale-proposal a{display:inline-block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(14px,1.6vw,17px);letter-spacing:-.01em;color:var(--bone);
  border:2px solid var(--bone-rule);border-radius:4px;padding:14px 24px;
  text-decoration:none;background:color-mix(in srgb,#F2EFE6 6%,transparent);
  transition:border-color 200ms var(--ease),background 200ms var(--ease),color 200ms var(--ease)}
.finale-proposal a:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent)}
/* with a form open the button stays within reach, but keeps out of the way */
.finale.is-form .finale-proposal{margin:10px 0 0}
.finale.is-form .finale-proposal a{padding:9px 14px;font-size:13px;border-width:1.5px}
.finale-form .field{display:flex;flex-direction:column;gap:8px;
  opacity:0;transform:translateY(16px);
  transition:opacity 380ms var(--ease),transform 560ms cubic-bezier(.18,1.3,.32,1)}
.finale.is-form .finale-form .field{opacity:1;transform:none}
.finale.is-form .finale-form .field:nth-child(2){transition-delay:90ms}
.finale.is-form .finale-form .field:nth-child(3){transition-delay:180ms}
.finale.is-form .finale-form .field:nth-child(4){transition-delay:250ms}
.finale-form label{font-family:var(--font-display);font-weight:700;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bone-62)}
.finale-form input,.finale-form textarea{width:100%;
  background:color-mix(in srgb,var(--night) 55%,transparent);color:var(--bone);
  caret-color:var(--accent);
  border:1.5px solid var(--bone-rule);border-radius:2px;padding:13px 15px;
  font-family:var(--font-body);font-size:17px;line-height:1.5;
  transition:border-color var(--t-fast) linear,box-shadow var(--t-fast) linear,
    background-color var(--t-fast) linear}
.finale-form textarea{min-height:180px;resize:vertical}
.finale-form input:focus,.finale-form textarea:focus{outline:none;border-color:var(--accent);
  background-color:color-mix(in srgb,var(--accent) 7%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.finale-form ::placeholder{color:var(--bone-40);opacity:.75;
  transition:opacity var(--t-fast) linear}
.finale-form input:focus::placeholder,.finale-form textarea:focus::placeholder{opacity:.35}
.finale-form label{transition:color var(--t-fast) linear}
.finale-form .field:focus-within label{color:var(--accent-lift)}
.finale-form .field:has([aria-invalid="true"]) label{color:var(--accent-lift)}
.finale-form input:-webkit-autofill,.finale-form textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--bone);
  -webkit-box-shadow:0 0 0 1000px var(--night) inset;
  transition:background-color 9999s ease-out}
.finale-form .row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.finale-form .status{font-family:var(--font-display);font-weight:600;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-lift);min-height:16px;margin:0;
  text-align:center}

/* ============================================================
   FEEDBACK - the shake, the small rise, the tick that draws
   itself, the spinner while sending, the copy tick swap.
   ============================================================ */
@keyframes shakeX{0%,100%{transform:translateX(0)}22%{transform:translateX(-4px)}
  46%{transform:translateX(4px)}70%{transform:translateX(-2px)}}
@keyframes errIn{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}
@keyframes tickIn{from{transform:rotate(-45deg) scale(0)}to{transform:rotate(-45deg) scale(1)}}
@keyframes spinIt{to{transform:rotate(360deg)}}
@keyframes rvIn{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--accent);
  animation:shakeX 260ms var(--ease-io) both}
.finale-form .status:not(:empty){animation:errIn 280ms var(--ease) both}
.finale-sent{animation:rvIn 480ms var(--ease) both}
.finale-sent::before{content:'';display:inline-block;width:13px;height:8px;margin-right:10px;
  border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  transform:rotate(-45deg) scale(0);animation:tickIn 400ms var(--spring) 140ms both;
  vertical-align:2px}
button.btn[aria-busy="true"]::after{width:15px;margin-left:9px;opacity:1;transform:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 1 1-6.3 2.7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 1 1-6.3 2.7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
  animation:spinIt 700ms linear infinite}
.btn.is-copied::after{content:'';flex:0 0 auto;height:13px;background:currentColor;
  width:15px;margin-left:9px;opacity:1;transform:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M2 8.5 7.5 13.5 18 2.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M2 8.5 7.5 13.5 18 2.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left center/contain;
  transition:width 300ms var(--spring),margin-left 300ms var(--spring),opacity var(--t-fast) linear}

@media (max-height:770px){
  .finale-stage{gap:clamp(12px,2vh,26px);padding-top:calc(var(--bar-h) + 2px);
    overflow-y:auto}
  .finale-q{font-size:clamp(24px,3.4vw,46px)}
  .branch{padding:14px 20px;font-size:clamp(16px,2vw,26px)}
  .finale-form{gap:10px}
  .finale-form .field{gap:6px}
  .finale-form input,.finale-form textarea{padding:10px 13px;font-size:16px}
  .finale-form textarea{min-height:128px}
  .finale-form .pill{min-height:40px;padding:8px 13px}
  .finale-form .row .btn{padding:15px 22px}
}
@media (prefers-reduced-motion:reduce){
  .branch,.way,.finale-form .field{opacity:1;transform:none;transition:none}
  .way{visibility:visible}
  .caret{display:none}
  .layer{transform:none;transition:none}
}
.fab{position:fixed;right:20px;bottom:20px;z-index:66;cursor:pointer;
  font-family:var(--font-display);font-weight:800;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;padding:14px 18px;border-radius:2px;
  border:2px solid var(--accent);background:var(--night);color:var(--bone);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity 300ms var(--ease),transform 340ms var(--spring),
    visibility 300ms,background 200ms var(--ease),color 200ms var(--ease)}
.fab.is-on{opacity:1;visibility:visible;transform:none}
/* while the ending's closing row is on screen the button would sit on the addresses */
.fab.is-off{opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none}
.fab:hover{background:var(--accent-fill);color:var(--night);transform:translateY(-2px)}
.fab:active{transform:translateY(1px) scale(.985)}
.pop{position:fixed;right:20px;bottom:74px;z-index:67;width:min(320px,calc(100vw - 40px));
  background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);border-radius:4px;
  padding:18px 20px;box-shadow:0 18px 44px rgba(20,17,15,.28);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.94);
  transition:opacity 240ms var(--ease),transform 340ms cubic-bezier(.2,1.5,.4,1),visibility 240ms}
.pop.is-open{opacity:1;visibility:visible;transform:none}
.pop p{margin:0 0 12px;font-family:var(--font-display);font-weight:700;font-size:12px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-62)}
.pop .rows{display:flex;flex-direction:column;gap:8px}
.pop .rows a{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:var(--bone);background:var(--ink);
  border-radius:2px;padding:12px 14px;
  transition:background 180ms var(--ease),transform 280ms var(--spring)}
.pop .rows a:hover{background:var(--accent-fill);color:var(--night)}
@media (hover:hover){
  .pop .rows a:hover{transform:translateX(3px)}
}
.pop-x{position:absolute;top:6px;right:8px;background:none;border:0;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink-40);padding:6px;
  transition:color 200ms var(--ease),transform 320ms var(--spring)}
.pop-x:hover{color:var(--accent);transform:rotate(90deg)}

/* ============================================================
   FOOT
   ============================================================ */

/* ============================================================
   SCROLL REVEALS
   The page script sets data-reveal="on" only while it is
   running and the reader has not asked for less motion, so
   nothing is ever hidden without a way back, and a reduced
   motion reader sees a still page. Blocks rise a little as
   they come into the journey, stacks in a small cascade.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  body[data-reveal="on"] .node,
  body[data-reveal="on"] .rows .row,
  body[data-reveal="on"] .caps li,
  body[data-reveal="on"] .stats .stat{
    opacity:0;translate:0 20px;
    transition:opacity 560ms var(--ease),translate 760ms var(--spring-soft);
  }
  body[data-reveal="on"] .node.is-in,
  body[data-reveal="on"] .rows .row.is-in,
  body[data-reveal="on"] .caps li.is-in,
  body[data-reveal="on"] .stats .stat.is-in{opacity:1;translate:0 0}
  /* a small cascade down grouped items */
  body[data-reveal="on"] .stats .stat:nth-child(2),
  body[data-reveal="on"] .rows .row:nth-child(2){transition-delay:80ms}
  body[data-reveal="on"] .stats .stat:nth-child(3),
  body[data-reveal="on"] .rows .row:nth-child(3){transition-delay:160ms}
  body[data-reveal="on"] .caps li:nth-child(2){transition-delay:70ms}
  body[data-reveal="on"] .caps li:nth-child(3){transition-delay:140ms}
  body[data-reveal="on"] .caps li:nth-child(4){transition-delay:210ms}
  body[data-reveal="on"] .chain .node:nth-child(2){transition-delay:60ms}
  body[data-reveal="on"] .chain .node:nth-child(3){transition-delay:120ms}
  /* the rail's numeral and note, and the accent band, rise too */
  body[data-reveal="on"] .num,
  body[data-reveal="on"] .rail-note,
  body[data-reveal="on"] .band .inner{
    opacity:0;translate:0 16px;
    transition:opacity 560ms var(--ease),translate 820ms var(--spring-soft);
  }
  body[data-reveal="on"] .num.is-in,
  body[data-reveal="on"] .rail-note.is-in,
  body[data-reveal="on"] .band .inner.is-in{opacity:1;translate:0 0}
  body[data-reveal="on"] .rail-note{transition-delay:90ms}
  /* a section's top rule draws across as the section arrives */
  body[data-reveal="on"] .sec:not(.sec--bleed){position:relative;border-top-color:transparent}
  body[data-reveal="on"] .sec:not(.sec--bleed)::before{content:'';position:absolute;top:-1px;
    left:0;right:0;height:1px;background:var(--rule);transform:scaleX(0);
    transform-origin:0 50%;transition:transform 1150ms var(--ease) 140ms}
  body[data-reveal="on"] .sec:not(.sec--bleed).is-in::before{transform:scaleX(1)}
}

/* ============================================================
   STATE VISIBILITY
   ============================================================ */
.jstate{display:none}
.jstate[data-active="true"]{display:block}
.journey{display:none}
body[data-picked="true"] .journey{display:block}

/* Numbered briefs and unfetched writing never show to a visitor. */
html:not([data-dev="true"]) body:not([data-content-ready]) [data-slot],
html:not([data-dev="true"]) .ph{display:none!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .word{animation:none!important}
}

/* Shown when the writing could not be loaded */
.noscript{margin:0;padding:18px 22px;background:var(--paper);color:var(--ink);
  font-family:var(--font-display);font-weight:600;font-size:13.5px;line-height:1.6;
  border-bottom:2px solid var(--accent);position:relative;z-index:2}
.noscript a{color:var(--accent)}

/* Keyboard readers should not have to walk the header */
.skip-link{position:absolute;left:-9999px;top:0;z-index:80;background:var(--ink);
  color:var(--paper);padding:14px 20px;font-family:var(--font-display);font-weight:700;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  opacity:0;transform:translateY(-6px);
  transition:opacity var(--t-fast) linear,transform var(--t-med) var(--spring)}
.skip-link:focus{left:12px;top:12px;color:var(--paper);opacity:1;transform:none}

/* Nothing about the preview belongs on paper */
@media print{
  #gate,.readbar,.grain,.site-head,.scroll-cue{display:none!important}
  .journey .sec{opacity:1!important;transform:none!important}
  .node,.rows .row,.caps li,.stat{opacity:1!important;translate:0 0!important}
  .num,.rail-note,.band .inner{opacity:1!important;translate:0 0!important}
  .sec:not(.sec--bleed){border-top-color:var(--rule)!important}
  .sec::before{display:none!important}
}

/* ============================================================
   THE THANK YOU TAKEOVER - the reply when someone lists their
   support, or asks to join. A whole screen of thanks, then it
   hands the page back. Still frame for reduced motion.
   ============================================================ */
.celebrate{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;
  justify-content:center;background:var(--night);color:var(--bone);
  opacity:0;pointer-events:none;transition:opacity 420ms var(--ease)}
/* the same accent wash as the finale, rising from the bottom of the screen */
.celebrate::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 90% at 50% 120%,
    color-mix(in srgb,var(--accent) 30%,transparent) 0%, transparent 62%)}
.celebrate.is-on{opacity:1;pointer-events:auto}
.celebrate.is-out{opacity:0}
html.is-celebrating,html.is-celebrating body{overflow:hidden}
.celebrate-in{position:relative;z-index:1;text-align:center;padding:0 26px;
  max-width:min(880px,100%)}
.celebrate-tick{display:inline-block;width:26px;height:15px;margin-bottom:26px;
  border-left:3px solid var(--accent);border-bottom:3px solid var(--accent);
  transform:rotate(-45deg)}
.celebrate-name{font-family:var(--font-display);font-weight:900;letter-spacing:-.04em;
  font-size:clamp(30px,7vw,86px);line-height:1.02;margin:0 0 18px;
  color:var(--bone);overflow-wrap:anywhere}
.celebrate-line{font-family:var(--font-body);font-size:clamp(17px,2.2vw,26px);
  line-height:1.5;color:var(--bone-62);margin:0 auto 30px;max-width:52ch}
.celebrate--member .celebrate-tick{border-color:var(--bone)}
.celebrate .celebrate-done{border-color:var(--bone);color:var(--bone)}
.celebrate .celebrate-done:hover{background:var(--bone);color:var(--night)}
.celebrate-drift{position:absolute;top:-8%;width:26px;height:17px;opacity:0;
  background:var(--accent)}
@media (prefers-reduced-motion:no-preference){
  .celebrate-tick{animation:tickIn 520ms var(--spring) 240ms both}
  .celebrate-name{animation:rvIn 560ms var(--ease) 160ms both}
  .celebrate-line{animation:rvIn 560ms var(--ease) 320ms both}
  .celebrate-drift{animation:celebrateDrift 9s linear both}
}
@keyframes celebrateDrift{
  0%{transform:translateY(0) rotate(-8deg);opacity:0}
  5%{opacity:.45}
  85%{opacity:.35}
  100%{transform:translateY(118vh) rotate(9deg);opacity:0}
}

/* the second act: the thanks steps aside and the twenty more seconds rise */
.celebrate-in{position:absolute;inset:0;z-index:1;margin:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 26px;max-width:min(880px,100%)}
.celebrate-ask{position:absolute;inset:0;z-index:1;margin:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 26px;
  opacity:0;visibility:hidden;pointer-events:none}
.celebrate.is-ask .celebrate-ask{opacity:1;visibility:visible;pointer-events:auto}
.celebrate.is-ask .celebrate-in{opacity:0;visibility:hidden;pointer-events:none}
.celebrate-ask-q{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(26px,4.6vw,56px);line-height:1.08;margin:0 auto 14px;color:var(--bone);
  max-width:22ch;overflow-wrap:anywhere}
.celebrate-ask-line{font-family:var(--font-body);font-size:clamp(16px,2vw,22px);
  color:var(--bone-62);margin:0 auto 28px}
.celebrate-ask-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center}
.celebrate-ask .btn{padding:18px 28px;font-size:14px}
.celebrate-mp{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--night);
  text-decoration:none}
.celebrate-mp:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--bone)}
.celebrate-no{border-color:var(--bone-40);color:var(--bone-62)}
.celebrate-no:hover{border-color:var(--bone);color:var(--bone-62)}
@media (prefers-reduced-motion:no-preference){
  .celebrate-in,.celebrate-ask{transition:opacity 340ms var(--ease),visibility 340ms var(--ease)}
  .celebrate.is-ask .celebrate-ask-q{animation:rvIn 520ms var(--ease) 60ms backwards}
  .celebrate.is-ask .celebrate-ask-line{animation:rvIn 520ms var(--ease) 180ms backwards}
  .celebrate.is-ask .celebrate-ask-row{animation:rvIn 520ms var(--ease) 300ms backwards}
}

/* the role pills in the finale's support form: one of the four ways of
   reading the page, taken from what they picked, changeable at a tap */
.finale-form .field-label{font-family:var(--font-display);font-weight:700;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bone-62)}
.finale-form .role-pills{display:flex;flex-wrap:wrap;gap:10px}
.finale-form .pill{display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--font-display);font-weight:700;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:11px 16px;background:transparent;cursor:pointer;
  border:1.5px solid var(--bone-rule);color:var(--bone-62);border-radius:99px;
  transition:border-color 200ms var(--ease),color 200ms var(--ease),
    background 200ms var(--ease),transform var(--t-fast) var(--spring)}
.finale-form .pill:hover{border-color:var(--bone-62);color:var(--bone)}
.finale-form .pill:active{transform:scale(.96)}
.finale-form .pill[aria-pressed="true"]{border-color:var(--accent);color:var(--accent-lift)}
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  animation:pillPop 420ms var(--spring) both}
@keyframes pillPop{0%{transform:scale(.93)}62%{transform:scale(1.045)}100%{transform:scale(1)}}

/* ============================================================
   WHEN SCRIPTING IS OFF, OR THE SCRIPT DIED
   The writing is in the HTML (baked at deploy time); the
   interactive layers rest, and every part that exists only for
   the script stands down, so a reader never meets a dead control.
   ============================================================ */
html:not(.js) body:not([data-picked="true"]){overflow:auto;height:auto}
html:not(.js) #wordlayer,
html:not(.js) .scroll-cue,
html:not(.js) .question,
html:not(.js) .pickcue,
html:not(.js) .readbar,
html:not(.js) .fab{display:none}
html:not(.js) .intro{height:auto;min-height:60vh;padding-bottom:72px}
html:not(.js) .intro .stage{position:static;display:block;pointer-events:auto}
html:not(.js) .sentence{opacity:1;transform:none}
html:not(.js) .wslot{visibility:visible}
html:not(.js) .jstate{display:block}
html:not(.js) .jstate+.jstate{margin-top:34px}
html:not(.js) .finale{min-height:0}
html:not(.js) .finale-stage{position:static;height:auto;display:block;
  padding:104px 24px;text-align:center}
html:not(.js) .finale-stage>:not(.finale-nojs){display:none}
.nojs-links{display:none}
html:not(.js) .nojs-links{display:flex;flex-wrap:wrap;gap:14px 26px;margin:30px 0 0}
html:not(.js) .nojs-links a{font-family:var(--font-display);font-weight:700;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--accent-deep) 45%,transparent)}
html:not(.js) .nojs-links a:hover{border-bottom-color:var(--accent-deep)}
html:not(.js) .finale-nojs .nojs-links{justify-content:center;margin:0}
html:not(.js) .finale-nojs .nojs-links a{color:var(--bone);
  border-bottom-color:color-mix(in srgb,var(--accent) 55%,transparent)}
html:not(.js) .finale-nojs .nojs-links a:hover{border-bottom-color:var(--accent)}
html:not(.js) .journey{display:block}

/* the one support form: the small note and the quiet opt-out */
.finale-form .fin-note{font-size:12.5px;line-height:1.55;color:var(--bone-62);margin:2px 0 0;max-width:46ch}
.finale-form .fin-check{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--bone-62);margin:2px 0 0;cursor:pointer}
.finale-form .fin-check input{width:auto;margin:3px 0 0;accent-color:var(--accent)}