/* ---------- tokens ---------- */
:root{
  --canvas:#0B100E;
  --panel:#121A16;
  --panel-2:#18231D;
  --accent:#62CE94;
  --accent-hover:#83DDAB;
  --accent-muted:#2E6B4C;
  --brand:#1F352C;
  --snow:#C9D8CF;
  --text-secondary:#9FB0A6;
  --text-primary:#ECF2EE;
  --line:#22302A;
  --line-strong:#3A4E43;

  --display:'Fraunces',Georgia,serif;
  --body:'Libre Franklin',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --e-out:cubic-bezier(.22,.61,.36,1);
  --e-soft:cubic-bezier(.4,0,.2,1);

  --tshadow:0 1px 2px rgba(5,8,7,.95),0 3px 12px rgba(5,8,7,.78),0 10px 44px rgba(5,8,7,.8);
  --gutter:clamp(18px,5vw,72px);
  --maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-weight:400;font-size:clamp(16px,1.05vw,18px);
  line-height:1.62;-webkit-font-smoothing:antialiased;
}

/* the one fixed environment layer */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1200px 700px at 78% -8%,rgba(46,107,76,.20),transparent 62%),
    radial-gradient(900px 620px at 6% 106%,rgba(31,53,44,.42),transparent 66%),
    linear-gradient(180deg,#0B100E 0%,#0A0F0D 52%,#0B120F 100%);
  animation:envdrift 96s var(--e-soft) -22s infinite alternate;
}
@keyframes envdrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-1.6%,1.4%,0) scale(1.05)}}
.env::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(201,216,207,.05) 1px,transparent 1px);
  background-size:3px 3px;mix-blend-mode:overlay}

.grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainshift 7s steps(6) infinite}
@keyframes grainshift{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}}

/* snow whisper */
.flakes{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.flake{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--snow);opacity:.16;
  animation:fall linear infinite}
@keyframes fall{from{transform:translate3d(0,-12vh,0)}to{transform:translate3d(3vw,112vh,0)}}

/* ---------- shared ---------- */
.wrap{width:min(100% - var(--gutter)*2,var(--maxw));margin-inline:auto;position:relative;z-index:3}
.kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.20em;text-transform:uppercase;color:var(--accent);margin:0 0 1.1rem}
.kicker.quiet{color:var(--text-secondary)}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.018em;margin:0;
  text-wrap:balance}
h2{font-size:clamp(2.1rem,4.6vw,3.9rem)}
h3{font-size:clamp(1.25rem,1.9vw,1.6rem);font-weight:600;line-height:1.14}
p{margin:0 0 1.1rem}
.lede{font-size:clamp(1.02rem,1.35vw,1.18rem);color:var(--text-secondary);max-width:62ch}
a{color:inherit}
section{position:relative;z-index:3}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--accent);color:#06100B;padding:.7rem 1.1rem;border-radius:0 0 10px 0;font-weight:500}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.btn{display:inline-block;font-family:var(--body);font-weight:500;font-size:.98rem;
  padding:.92rem 1.7rem;border-radius:999px;text-decoration:none;border:1px solid transparent;
  transition:background .45s var(--e-out),color .45s var(--e-out),border-color .45s var(--e-out),transform .45s var(--e-out),box-shadow .45s var(--e-out)}
.btn-primary{background:var(--accent);color:#06100B;box-shadow:0 0 0 0 rgba(98,206,148,.4)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 12px 34px -12px rgba(98,206,148,.66)}
.btn-ghost{border-color:var(--line-strong);color:var(--text-primary)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;text-align:center}}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.85rem var(--gutter);
  background:linear-gradient(180deg,rgba(11,16,14,.82),rgba(11,16,14,0));
  backdrop-filter:blur(0px);transition:background .6s var(--e-soft),backdrop-filter .6s var(--e-soft),border-color .6s var(--e-soft);
  border-bottom:1px solid transparent}
.nav.solid{background:rgba(10,15,13,.86);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;min-width:0}
.brand img{width:38px;height:38px;display:block;flex:none}
.brand .bt{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.brand .bt b{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:.01em}
.brand .bt span{font-family:var(--mono);font-size:.56rem;letter-spacing:.20em;color:var(--text-secondary);white-space:nowrap}
.navlinks{display:flex;align-items:center;gap:1.6rem}
.navlinks a{font-size:.9rem;text-decoration:none;color:var(--text-secondary);transition:color .35s var(--e-out)}
.navlinks a:hover{color:var(--text-primary)}
.navlinks .btn{font-size:.86rem;padding:.6rem 1.15rem;color:#06100B}
@media (max-width:860px){.navlinks a:not(.btn){display:none}}
@media (max-width:420px){.brand .bt span{display:none}}

/* ---------- hero ---------- */
.hero{height:600vh;position:relative;z-index:3}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#070B09}
.layer{position:absolute;inset:0}
.bg-fallback{background:
  radial-gradient(1100px 680px at 50% 8%,rgba(180,198,206,.30),transparent 60%),
  radial-gradient(900px 520px at 50% 96%,rgba(14,22,18,.9),transparent 70%),
  linear-gradient(178deg,#7E8D93 0%,#5E6E72 26%,#33423E 58%,#131C18 86%,#0B100E 100%)}
.poster{background-size:cover;background-position:center;opacity:0;transition:opacity 1.1s var(--e-soft)}
.poster.on{opacity:1}
#hero-video{width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .9s var(--e-soft);will-change:transform;transform:translateZ(0)}
.stage.video-ready #hero-video{opacity:1}
.stage.video-failed #hero-video{display:none}
.scrim{background:radial-gradient(ellipse 120% 92% at 50% 42%,rgba(8,12,10,0) 34%,rgba(8,12,10,.64) 100%);pointer-events:none}
/* the river footage is bright overcast across the top, which is where every caption
   sits, so the upper half carries most of the darkening. Measured, not guessed. */
.vignette{background:linear-gradient(180deg,rgba(6,10,8,.40) 0%,rgba(6,10,8,.33) 22%,rgba(6,10,8,.24) 38%,rgba(6,10,8,.12) 52%,rgba(6,10,8,.02) 66%,rgba(6,10,8,.20) 86%,rgba(6,10,8,.56) 100%);pointer-events:none}

/* loading ring */
.ring{position:absolute;left:50%;bottom:6.5vh;transform:translateX(-50%);width:40px;height:40px;z-index:6;color:var(--snow);opacity:.62;transition:opacity .6s var(--e-soft)}
.ring circle{transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .18s linear}
.stage.video-ready .ring{opacity:0;pointer-events:none}
.chev{position:absolute;left:50%;bottom:6.5vh;transform:translateX(-50%);z-index:6;color:var(--snow);opacity:.5;animation:bob 3.4s var(--e-soft) -.8s infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* caption bands */
.bands{position:absolute;inset:0;z-index:5;pointer-events:none}
.band{position:absolute;left:0;right:0;opacity:0;padding-inline:var(--gutter);text-shadow:var(--tshadow)}
.band::before{content:"";position:absolute;inset:-85% -14%;pointer-events:none;z-index:-1;
  opacity:calc(.3 + .7*var(--k,0));
  background:radial-gradient(ellipse 70% 52% at 50% 50%,rgba(5,8,7,.36) 0%,rgba(5,8,7,.30) 42%,rgba(5,8,7,.14) 70%,rgba(5,8,7,0) 100%)}
.band .inner{width:min(100%,var(--maxw));margin-inline:auto}
.band .line{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.06;margin:0;
  font-size:clamp(2rem,4.9vw,4.1rem)}
.band-1,.band-2,.band-3{top:20vh}
.band-1 .line{max-width:17ch}
.band-2 .line{max-width:18ch}
.band-3 .line{max-width:20ch;font-size:clamp(1.7rem,3.7vw,3.05rem)}
.band-4{top:15vh}
.band-4 .line{font-size:clamp(2.6rem,6.6vw,5.6rem);max-width:13ch}
.band-4 .sub{max-width:44ch;color:var(--snow);font-size:clamp(1rem,1.3vw,1.14rem);margin:1.35rem 0 0;
  opacity:var(--ks,0);transform:translateY(calc((1 - var(--ks,0))*14px))}
.band-4 .ctarow{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:2rem;pointer-events:auto;
  opacity:var(--kb,0);transform:translateY(calc((1 - var(--kb,0))*16px))}
.band-4 .ctarow .btn{text-shadow:none}
.band-4 .ctarow .plain{font-size:.94rem;color:var(--snow);text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:2px;transition:border-color .4s var(--e-out),color .4s var(--e-out)}
.band-4 .ctarow .plain:hover{color:var(--accent);border-color:var(--accent)}
.band .mono{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--snow);
  display:inline-block;margin:0 0 1.1rem;opacity:.86}

/* split text primitives */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* entrance: drift-down (words fall in) */
[data-entrance="drift"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-26px))}
/* entrance: grid snap-align (chars slide in, reading order) */
[data-entrance="grid"] .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*3.2,1);opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc))*var(--jx,0px)))}
/* entrance: settle rise */
[data-entrance="settle"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*30px))}
/* entrance: blur-to-sharp (two stacked copies) */
.blurpair{position:relative;display:block}
.blurpair .soft{position:absolute;inset:0;filter:blur(11px);opacity:calc(1 - var(--k,0))}
.blurpair .sharp{position:relative;opacity:var(--k,0)}

/* static hero */
.static-hero{position:absolute;inset:0;z-index:7;display:none;align-items:flex-end;
  padding:0 var(--gutter) clamp(52px,11vh,120px);text-shadow:var(--tshadow)}
/* the static hero carries its own scrim: the copy sits low over pale river water */
.static-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,10,8,0) 26%,rgba(6,10,8,.30) 46%,rgba(6,10,8,.62) 70%,rgba(6,10,8,.82) 100%)}
.static-hero .inner{position:relative}
/* small label over footage gets a chip, not a scrim */
.static-hero .kicker{display:inline-block;margin-bottom:1.3rem;padding:.42rem .8rem;color:var(--snow);
  background:rgba(8,12,10,.66);border:1px solid rgba(96,126,110,.32);border-radius:10px;
  backdrop-filter:blur(10px);text-shadow:0 1px 3px rgba(5,8,7,.85)}
.static-hero .inner{width:min(100%,var(--maxw));margin-inline:auto}
.static-hero h1{font-size:clamp(2.7rem,12vw,4.6rem);margin:0 0 1.1rem;max-width:11ch}
.static-hero p{color:var(--snow);max-width:40ch;font-size:1.02rem}
.static-hero .ctarow{display:flex;flex-wrap:wrap;gap:1rem 1.3rem;align-items:center;margin-top:1.8rem}
.static-hero .ctarow .btn{text-shadow:none}
.static-hero .plain{font-size:.94rem;color:var(--snow);text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:2px}
body.static-mode .bands,body.static-mode .ring,body.static-mode .chev{display:none}
body.static-mode .static-hero{display:flex}
body.static-mode .hero{height:100vh}
body.static-mode .stage{position:relative}

@media (max-height:560px){.ring,.chev{display:none}}

/* Phone portrait: a shorter journey so it is not endless thumb work, and the bands
   sit a little higher because portrait text wraps to more lines. */
@media (max-width:720px){
  .hero{height:500vh}
  .band-1,.band-2,.band-3{top:16vh}
  .band-4{top:12vh}
  .band .line{font-size:clamp(1.9rem,8.2vw,2.6rem)}
  .band-3 .line{font-size:clamp(1.6rem,6.8vw,2.2rem)}
  .band-4 .line{font-size:clamp(2.4rem,11vw,3.4rem)}
  .band-4 .sub{font-size:.98rem;margin-top:1.1rem}
  .band-4 .ctarow{margin-top:1.5rem;gap:.9rem 1.1rem}
}

/* ---------- the route line ---------- */
/* the route runs down the LEFT GUTTER so it never crosses a column of text.
   Its viewBox is set to the wrapper's pixel size in JS, so one user unit is one pixel
   and the dash maths is exact. */
.routewrap{position:relative}
.route{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.route path{fill:none}
.route .ghost{stroke:var(--line-strong);stroke-width:1;opacity:.5}
.route .drawn{stroke:var(--snow);stroke-width:1.4;stroke-dasharray:6 5;opacity:.5}
.route .ticks line{stroke:var(--line-strong);stroke-width:1;opacity:.45}
@media (max-width:1024px){.route{display:none}}

/* ---------- section: stakes ---------- */
.stakes{padding:clamp(96px,15vh,190px) 0 clamp(70px,10vh,130px);overflow:hidden;overflow:clip}
.stakes .grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,5vw,80px);align-items:start}
.stakes h2{max-width:13ch}
.stakes .contour{position:absolute;right:-12%;top:-6%;width:62%;max-width:760px;z-index:1;opacity:.5;pointer-events:none}
.stakes .contour path{fill:none;stroke:var(--line-strong);stroke-width:1;vector-effect:non-scaling-stroke}
.stakes .contour g{animation:contourdrift 72s var(--e-soft) -16s infinite alternate}
@keyframes contourdrift{from{transform:translate(0,0)}to{transform:translate(-16px,12px)}}
.quote{margin:2.4rem 0 0;padding:1.5rem 0 .2rem 1.6rem;border-left:2px solid var(--accent-muted);
  font-family:var(--display);font-weight:600;font-size:clamp(1.12rem,1.65vw,1.4rem);line-height:1.38;color:var(--text-primary)}
.quote cite{display:block;margin-top:.9rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--text-secondary);font-style:normal}
@media (max-width:860px){.stakes .grid{grid-template-columns:1fr}.stakes .contour{display:none}}

/* ---------- section: triplet ---------- */
.triplet{padding:clamp(70px,10vh,130px) 0}
.triplet .head{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(34px,5vh,64px)}
.triplet .head h2{max-width:14ch}
.triplet .head p{max-width:34ch;margin:0;color:var(--text-secondary);font-size:.98rem}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:clamp(24px,2.5vw,36px);overflow:hidden;
  transition:border-color .55s var(--e-out),transform .55s var(--e-out),background .55s var(--e-out)}
.card:nth-child(2){margin-top:clamp(0px,3vw,38px)}
.card:nth-child(3){margin-top:clamp(0px,6vw,76px)}
.card:hover{border-color:var(--accent-muted);transform:translateY(-5px);background:var(--panel-2)}
.card .num{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--accent);display:block;margin-bottom:1.6rem}
.card h3{margin-bottom:.75rem}
.card p{color:var(--text-secondary);font-size:.97rem;margin:0}
.card .glow{position:absolute;inset:auto -30% -60% -30%;height:150px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(98,206,148,.17),transparent 70%);opacity:0;
  transition:opacity .6s var(--e-out)}
.card:hover .glow{opacity:1}
.card .sweep{position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-muted),transparent);opacity:.7;
  animation:sweep 9s var(--e-soft) -3s infinite}
@keyframes sweep{0%,100%{transform:translateX(-60%);opacity:0}25%,75%{opacity:.7}50%{transform:translateX(60%);opacity:0}}
@media (max-width:860px){.cards{grid-template-columns:1fr}.card:nth-child(2),.card:nth-child(3){margin-top:0}}

/* ---------- the live deadline bar ---------- */
.alertbar{position:relative;z-index:4;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(46,107,76,.16),rgba(18,26,22,.5) 60%)}
.alertbar a{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  width:min(100% - var(--gutter)*2,var(--maxw));margin-inline:auto;padding:.95rem 0;
  text-decoration:none;font-size:.95rem;transition:opacity .4s var(--e-out)}
.alertbar a:hover{opacity:.82}
.alertbar .pip{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;position:relative}
.alertbar .pip::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--accent);
  opacity:.5;animation:ping 2.8s var(--e-soft) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.6}70%,100%{transform:scale(1.5);opacity:0}}
.alertbar .lbl{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.alertbar .msg{color:var(--text-primary)}
.alertbar .go{margin-left:auto;color:var(--accent);font-weight:500;white-space:nowrap}
@media (max-width:720px){.alertbar .go{margin-left:0}}

/* ---------- section: take action ---------- */
.action{padding:clamp(70px,10vh,130px) 0}
.actionbox{position:relative;border:1px solid var(--accent-muted);border-radius:22px;overflow:hidden;
  background:linear-gradient(165deg,rgba(24,35,29,.95),rgba(10,15,13,.95));padding:clamp(28px,4.4vw,62px)}
.actionbox::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(ellipse 70% 90% at 92% 8%,rgba(98,206,148,.12),transparent 70%)}
.action .in{position:relative;z-index:2}
.action .head{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,56px);align-items:start}
.action h2{max-width:16ch;margin-bottom:1.1rem}
.action .lede{max-width:52ch;margin-bottom:0}
.deadline{display:inline-flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  border:1px solid var(--accent-muted);border-radius:12px;padding:.85rem 1.1rem;background:rgba(8,12,10,.5)}
.deadline b{font-family:var(--display);font-size:clamp(1.15rem,1.7vw,1.45rem);color:var(--accent)}
.deadline span{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
.action .pts{list-style:none;margin:clamp(28px,4vh,44px) 0 0;padding:0;display:grid;gap:.85rem;max-width:62ch}
.action .pts li{display:flex;gap:.8rem;color:var(--text-secondary);font-size:.97rem;line-height:1.55}
.action .pts li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent-muted);flex:none;margin-top:.62em}
.action .pts b{color:var(--text-primary);font-weight:500}
.action .cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:clamp(28px,4vh,44px)}
.action .mins{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
.docs{margin-top:clamp(30px,4.5vh,52px);padding-top:clamp(26px,3.5vh,38px);border-top:1px solid var(--line)}
.docs h3{font-size:1.05rem;margin-bottom:.4rem}
.docs p.note{color:var(--text-secondary);font-size:.92rem;max-width:56ch;margin-bottom:1.3rem}
.docs ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.docs li{border-top:1px solid var(--line)}
.docs li:last-child{border-bottom:1px solid var(--line)}
.docs a{display:flex;align-items:baseline;gap:1rem;padding:.95rem .2rem;text-decoration:none;
  transition:background .4s var(--e-out),padding-left .4s var(--e-out)}
.docs a:hover{background:rgba(98,206,148,.05);padding-left:.7rem}
.docs a .t{color:var(--text-primary);font-size:.98rem}
.docs a .d{color:var(--text-secondary);font-size:.88rem}
.docs a .ext{margin-left:auto;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);white-space:nowrap;align-self:center}
@media (max-width:860px){
  .action .head{grid-template-columns:1fr}
  .docs a{flex-direction:column;gap:.3rem}
  .docs a .ext{margin-left:0;align-self:flex-start}
}

/* ---------- section: priorities ---------- */
.priorities{padding:clamp(70px,10vh,130px) 0}
.priorities .head{margin-bottom:clamp(30px,4.5vh,56px);max-width:56ch}
.plist{border-top:1px solid var(--line)}
.prow{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,2.4vw,34px);align-items:baseline;
  padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--line);position:relative}
.prow .dot{width:9px;height:9px;border-radius:50%;background:var(--line-strong);align-self:center;
  transition:background .6s var(--e-out),box-shadow .6s var(--e-out);flex:none;position:relative;top:0}
.prow.in .dot{background:var(--accent);box-shadow:0 0 0 5px rgba(98,206,148,.13)}
.prow h3{font-size:clamp(1.1rem,1.65vw,1.42rem)}
.prow .place{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-top:.5rem;display:block}
.prow p{color:var(--text-secondary);font-size:.95rem;margin:.55rem 0 0;max-width:52ch}
.prow .coord{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--text-secondary);opacity:.62;white-space:nowrap;text-align:right}
@media (max-width:720px){.prow{grid-template-columns:auto 1fr}.prow .coord{display:none}}

/* ---------- section: hold the line ---------- */
.hold{padding:clamp(80px,12vh,150px) 0;position:relative}
.holdpanel{position:relative;border:1px solid var(--line);border-radius:22px;background:
  linear-gradient(180deg,rgba(18,26,22,.9),rgba(10,15,13,.9));overflow:hidden;
  padding:clamp(28px,4vw,56px)}
.holdpanel::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;
  background-image:linear-gradient(rgba(58,78,67,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(58,78,67,.28) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(ellipse 80% 78% at 50% 50%,#000 25%,transparent 78%)}
.holdgrid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(26px,4vw,64px);align-items:center;position:relative;z-index:2}
.holdcopy h2{max-width:11ch;margin-bottom:1rem}
.holdcopy p{color:var(--text-secondary);max-width:38ch}
.holdstage{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,rgba(31,53,44,.55),rgba(10,15,13,.8));border:1px solid var(--line);
  touch-action:none;cursor:pointer;user-select:none;-webkit-user-select:none}
.holdstage:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.holdstage svg{position:absolute;inset:0;width:100%;height:100%}
/* no non-scaling-stroke on the dashed paths: it resolves dash lengths in screen pixels
   while getTotalLength() returns viewBox units, so the dash can never cover the path */
.holdstage .base{fill:none;stroke:var(--line-strong);stroke-width:1.5;stroke-dasharray:5 6}
.holdstage .live{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;
  filter:drop-shadow(0 0 7px rgba(98,206,148,.55))}
.holdstage .wp{fill:var(--canvas);stroke:var(--line-strong);stroke-width:1.5;
  transition:stroke .45s var(--e-out),fill .45s var(--e-out)}
.holdstage .wp.lit{stroke:var(--accent);fill:var(--accent)}
.holdstage .terr{fill:none;stroke:rgba(58,78,67,.5);stroke-width:.8}
.holdhint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:3;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  background:rgba(8,12,10,.62);border:1px solid rgba(58,78,67,.45);border-radius:10px;
  backdrop-filter:blur(10px);padding:.42rem .8rem;color:var(--snow);
  transition:opacity .5s var(--e-out);text-shadow:0 1px 3px rgba(5,8,7,.85)}
.holdstage.done .holdhint{opacity:0}
.holdmeter{position:absolute;left:14px;right:14px;top:14px;height:2px;background:rgba(58,78,67,.4);border-radius:2px;z-index:3;overflow:hidden}
.holdmeter i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:0 50%;
  transform:scaleX(var(--hp,0))}
.holdreveal{margin-top:1.8rem;opacity:0;transform:translateY(12px);
  transition:opacity .8s var(--e-out),transform .8s var(--e-out)}
.holdreveal.on{opacity:1;transform:none}
.holdreveal h3{font-size:clamp(1.4rem,2.3vw,1.95rem);margin-bottom:.7rem}
.holdreveal p{color:var(--text-secondary);max-width:42ch;margin:0}
@media (max-width:860px){.holdgrid{grid-template-columns:1fr}}

/* ---------- section: steps ---------- */
.steps{padding:clamp(70px,10vh,130px) 0}
.steps .head{max-width:52ch;margin-bottom:clamp(34px,5vh,64px)}
.steprow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px)}
.step{position:relative}
/* margin, not transform: the entrance rule resets transform and would cancel it */
.step:nth-child(2){margin-top:clamp(0px,3.4vw,44px)}
.step:nth-child(3){margin-top:clamp(0px,6.8vw,88px)}
.shot{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(168deg,#4E5C5E 0%,#33423E 40%,#18231D 78%,#101714 100%)}
.shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,12,10,0) 40%,rgba(8,12,10,.55) 100%)}
.shot img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1}
.step .n{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--accent);display:block;margin:1.4rem 0 .7rem}
.step h3{margin-bottom:.6rem}
.step p{color:var(--text-secondary);font-size:.95rem;margin:0}
@media (max-width:860px){.steprow{grid-template-columns:1fr;gap:34px}.step:nth-child(2),.step:nth-child(3){margin-top:0}}

/* ---------- section: faq ---------- */
.faq{padding:clamp(70px,10vh,130px) 0}
.faq .grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(26px,4vw,70px);align-items:start}
.faq h2{max-width:11ch;position:sticky;top:110px}
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;padding:1.3rem 2.4rem 1.3rem 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:clamp(1.02rem,1.45vw,1.22rem);line-height:1.3;
  transition:color .4s var(--e-out)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent)}
.qa summary::after{content:"";position:absolute;right:4px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--text-secondary);border-bottom:1.5px solid var(--text-secondary);
  transform:translateY(-70%) rotate(45deg);transition:transform .45s var(--e-out),border-color .45s var(--e-out)}
.qa details[open] summary::after{transform:translateY(-20%) rotate(-135deg);border-color:var(--accent)}
.qa .ans{padding:0 0 1.5rem;color:var(--text-secondary);max-width:58ch;font-size:.97rem}
.qa .ans p{margin:0}
@media (max-width:860px){.faq .grid{grid-template-columns:1fr}.faq h2{position:static}}

/* ---------- section: join ---------- */
.join{padding:clamp(86px,13vh,170px) 0 clamp(70px,10vh,120px);position:relative}
.joinbox{position:relative;border:1px solid var(--line);border-radius:24px;overflow:hidden;
  background:linear-gradient(180deg,rgba(24,35,29,.92),rgba(10,15,13,.92));
  padding:clamp(34px,5.2vw,78px);text-align:center}
.joinbox .endshot{position:absolute;inset:0;z-index:0;opacity:.24;background-size:cover;background-position:center}
.joinbox .endfall{position:absolute;inset:0;z-index:0;opacity:.3;
  background:linear-gradient(170deg,#54646A 0%,#33423E 45%,#121A16 100%)}
.joinbox .vt{position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse 80% 70% at 50% 50%,rgba(10,15,13,.45),rgba(10,15,13,.94))}
.joinbox .in{position:relative;z-index:2}
.joinbox h2{max-width:13ch;margin:0 auto 1.2rem;font-size:clamp(2.4rem,5.4vw,4.3rem)}
.joinbox .lede{margin:0 auto 2.3rem;max-width:46ch;color:var(--snow)}
.joinbox .ctarow{display:flex;flex-wrap:wrap;gap:1rem 1.4rem;justify-content:center;align-items:center}
.joinbox .plain{font-size:.94rem;color:var(--snow);text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:2px;transition:color .4s var(--e-out),border-color .4s var(--e-out)}
.joinbox .plain:hover{color:var(--accent);border-color:var(--accent)}
.rule{height:1px;background:var(--line);margin:clamp(34px,5vh,58px) auto;max-width:520px}
.signup{max-width:470px;margin-inline:auto}
.signup .lbl{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.6rem}
.signup .help{color:var(--text-secondary);font-size:.92rem;margin:0 0 1.2rem}
.field{display:flex;gap:.6rem;flex-wrap:wrap}
.field input{flex:1 1 220px;min-width:0;background:rgba(8,12,10,.6);border:1px solid var(--line-strong);
  border-radius:999px;padding:.85rem 1.25rem;color:var(--text-primary);font-family:var(--body);font-size:.96rem;
  transition:border-color .4s var(--e-out),background .4s var(--e-out)}
.field input::placeholder{color:#6F8278}
.field input:focus{outline:none;border-color:var(--accent);background:rgba(8,12,10,.85)}
.field button{border:none;cursor:pointer}
.formmsg{margin:1.2rem 0 0;color:var(--accent);font-size:.95rem;min-height:1.5rem;
  opacity:0;transform:translateY(8px);transition:opacity .6s var(--e-out),transform .6s var(--e-out)}
.formmsg.on{opacity:1;transform:none}
.formmsg b{font-family:var(--display);font-weight:700;display:block;font-size:1.1rem;margin-bottom:.2rem}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:clamp(48px,7vh,80px) 0 3rem;position:relative;z-index:3}
.fgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(26px,4vw,56px);align-items:start}
.fbrand{display:flex;gap:1rem;align-items:flex-start}
.fbrand img{width:58px;height:58px;flex:none;opacity:.9}
.fbrand .tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--accent);margin-top:.5rem;display:block}
.fbrand p{color:var(--text-secondary);font-size:.9rem;margin:.6rem 0 0;max-width:34ch}
footer h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-secondary);margin:0 0 1rem;font-weight:400}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.62rem}
footer ul a{font-size:.93rem;text-decoration:none;color:var(--text-primary);opacity:.85;
  transition:color .35s var(--e-out),opacity .35s var(--e-out)}
footer ul a:hover{color:var(--accent);opacity:1}
.fbot{margin-top:clamp(40px,6vh,68px);padding-top:1.6rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--text-secondary);text-transform:uppercase}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr}.fbrand{grid-column:1 / -1}}

/* ---------- entrances ---------- */
.rev{opacity:0;transform:translateY(26px);
  transition:opacity .95s var(--e-out),transform .95s var(--e-out)}
.rev.in{opacity:1;transform:none}
.stag > *{opacity:0;transform:translateY(22px);
  transition:opacity .85s var(--e-out),transform .85s var(--e-out)}
.stag.in > *{opacity:1;transform:none}
.stag.in > *:nth-child(1){transition-delay:0ms}
.stag.in > *:nth-child(2){transition-delay:110ms}
.stag.in > *:nth-child(3){transition-delay:220ms}
.stag.in > *:nth-child(4){transition-delay:330ms}
.stag.in > *:nth-child(5){transition-delay:440ms}
.stag.in > *:nth-child(6){transition-delay:550ms}
.stag.in > *:nth-child(7){transition-delay:660ms}
/* retire the stagger so hovers never lag (must out-specify the nth-child rules) */
.stag.done.in > *:nth-child(1),.stag.done.in > *:nth-child(2),.stag.done.in > *:nth-child(3),
.stag.done.in > *:nth-child(4),.stag.done.in > *:nth-child(5),.stag.done.in > *:nth-child(6),
.stag.done.in > *:nth-child(7){transition-delay:0s}

/* pause everything when the tab is hidden */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important;transition-delay:0s !important}
  .rev,.stag > *{opacity:1 !important;transform:none !important}
  .holdreveal{opacity:1 !important;transform:none !important}
  .step:nth-child(2){margin-top:clamp(0px,3.4vw,44px)}
  .step:nth-child(3){margin-top:clamp(0px,6.8vw,88px)}
  .card:nth-child(2){margin-top:clamp(0px,3vw,38px)}
  .card:nth-child(3){margin-top:clamp(0px,6vw,76px)}
  .ring,.chev,.flakes,.grain{display:none}
  @media (max-width:860px){.step:nth-child(2),.step:nth-child(3){margin-top:0}}
}

/* ================= ISSUE PAGES ================= */
.issuehero{padding:clamp(130px,18vh,190px) 0 clamp(40px,6vh,70px);position:relative;overflow:hidden;overflow:clip}
.issuehero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:radial-gradient(ellipse 60% 80% at 88% 10%,rgba(98,206,148,.10),transparent 68%)}
.crumb{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-secondary);margin-bottom:1.4rem;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.crumb a{color:var(--accent);text-decoration:none;transition:opacity .35s var(--e-out)}
.crumb a:hover{opacity:.78}
.issuehero h1{font-size:clamp(2.4rem,6vw,4.6rem);max-width:17ch;margin-bottom:1.3rem}
.issuehero .lede{font-size:clamp(1.05rem,1.45vw,1.24rem);max-width:60ch}
.statusrow{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.6rem}
.tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.45rem .8rem;border-radius:999px;border:1px solid var(--line-strong);color:var(--text-secondary)}
.tag.live{border-color:var(--accent);color:var(--accent);display:inline-flex;align-items:center;gap:.5rem}
.tag.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}

.issuebody{padding:clamp(40px,6vh,70px) 0 clamp(70px,10vh,120px)}
.issuegrid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(32px,5vw,74px);align-items:start}
.prose h2{font-size:clamp(1.5rem,2.4vw,2.1rem);margin:clamp(34px,5vh,56px) 0 1rem}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--text-secondary);max-width:64ch}
.prose p strong{color:var(--text-primary);font-weight:500}
.prose blockquote{margin:1.6rem 0;padding:1.2rem 0 .3rem 1.5rem;border-left:2px solid var(--accent-muted);
  font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,1.5vw,1.26rem);line-height:1.42;color:var(--text-primary)}
.prose blockquote cite{display:block;margin-top:.8rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);font-style:normal}
.prose .why{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:1.1rem}
.prose .why li{border-left:1px solid var(--line);padding-left:1.2rem}
.prose .why h3{font-size:1.06rem;margin-bottom:.45rem}
.prose .why p{margin:0;font-size:.96rem}

.rail{position:sticky;top:104px;display:grid;gap:clamp(16px,2vw,22px)}
.railcard{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:clamp(20px,2.2vw,28px)}
.railcard.hot{border-color:var(--accent-muted);
  background:linear-gradient(170deg,rgba(24,35,29,.95),rgba(10,15,13,.95))}
.railcard h3{font-size:1.1rem;margin-bottom:.5rem}
.railcard p{color:var(--text-secondary);font-size:.92rem;margin:0 0 1.1rem}
.railcard .btn{width:100%;text-align:center}
.railcard .when{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-secondary);margin-top:.9rem;display:block;text-align:center}
@media (max-width:980px){.issuegrid{grid-template-columns:1fr}.rail{position:static}}

/* priorities list rows that link out */
.prow.linked{transition:background .45s var(--e-out)}
.prow.linked:hover{background:rgba(98,206,148,.04)}
.prow h3 a{text-decoration:none;transition:color .35s var(--e-out)}
.prow h3 a:hover{color:var(--accent)}
.prow .open{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent-muted);border-radius:999px;padding:.2rem .55rem;
  margin-left:.6rem;white-space:nowrap;vertical-align:middle}

/* the local-names block: the official name is not what people call this country */
.aka{border-left:2px solid var(--accent);padding:.1rem 0 .1rem 1.3rem;margin:0 0 1.5rem;max-width:58ch}
.aka .akalead{font-family:var(--display);font-weight:600;font-size:clamp(1.08rem,1.6vw,1.34rem);
  line-height:1.38;color:var(--text-primary);margin:0 0 .55rem}
.aka .akalead strong{color:var(--accent);font-weight:600}
.aka .akanote{color:var(--text-secondary);font-size:.93rem;margin:0}

/* map figure on an issue page */
/* portrait map: cap it so it does not swamp the column, full size is one click away */
.mapfig{margin:clamp(28px,4vh,44px) 0 0;max-width:460px}
.mapfig a{display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden;position:relative;
  transition:border-color .45s var(--e-out)}
.mapfig a:hover{border-color:var(--accent-muted)}
.mapfig img{width:100%;height:auto;display:block}
.mapfig .zoom{position:absolute;right:12px;bottom:12px;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--snow);background:rgba(8,12,10,.78);
  border:1px solid rgba(96,126,110,.4);border-radius:9px;padding:.4rem .7rem;backdrop-filter:blur(8px)}
.mapfig figcaption{color:var(--text-secondary);font-size:.9rem;margin-top:.9rem;max-width:64ch}
.mapfig figcaption b{color:var(--text-primary);font-weight:500}

/* ===== urgent action: red is reserved for the time-boxed comment CTA.
   Green stays membership, so the two asks never compete. ===== */
:root{--urgent:#D64535;--urgent-hover:#E55646;--urgent-muted:#7A2A21}
.btn-urgent{background:var(--urgent);color:#fff;border-color:var(--urgent)}
.btn-urgent:hover{background:var(--urgent-hover);border-color:var(--urgent-hover);color:#fff;
  transform:translateY(-2px);box-shadow:0 12px 34px -12px rgba(214,69,53,.6)}

.commentcall{border:1px solid var(--urgent-muted);border-radius:18px;
  background:linear-gradient(165deg,rgba(45,22,19,.72),rgba(14,12,12,.72));
  padding:clamp(22px,2.8vw,34px);margin:clamp(26px,3.5vh,38px) 0 0;max-width:62ch}
.commentcall h2{font-size:clamp(1.4rem,2.2vw,1.85rem);margin:0 0 .7rem}
.commentcall p{color:var(--text-secondary);font-size:.97rem;margin:0 0 1rem;max-width:58ch}
.commentcall p:last-of-type{margin-bottom:1.4rem}
.commentcall .or{color:var(--text-primary);font-weight:500}
.commentcall .row{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.3rem}
.commentcall .mins{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-secondary)}
.railcard.urgent{border-color:var(--urgent-muted);
  background:linear-gradient(170deg,rgba(45,22,19,.8),rgba(12,11,11,.9))}
.commentcall .plainlink{color:var(--snow);text-decoration:none;font-size:.94rem;
  border-bottom:1px solid var(--line-strong);padding-bottom:2px;transition:color .4s var(--e-out),border-color .4s var(--e-out)}
.commentcall .plainlink:hover{color:var(--accent);border-color:var(--accent)}

/* ===== letters of record ===== */
.letter{border-top:1px solid var(--line);padding-top:clamp(28px,4vh,44px);margin-top:clamp(34px,5vh,56px)}
.letter:first-of-type{border-top:none;padding-top:0;margin-top:0}
.letterhead{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:baseline;margin-bottom:1.4rem}
.letterhead .date{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.letterhead .to{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--text-secondary)}
.letter h2{margin:0 0 .5rem}
.letter h3{font-size:1.05rem;margin:1.8rem 0 .6rem;color:var(--text-primary)}
.letter p{color:var(--text-secondary);max-width:68ch;margin:0 0 1rem}
.letter p.sig{color:var(--text-primary);margin-top:1.6rem}
.letter ul{color:var(--text-secondary);max-width:66ch;margin:0 0 1.1rem;padding-left:1.2rem}
.letter li{margin-bottom:.5rem}
.letter .cite{font-family:var(--mono);font-size:.78rem;color:var(--accent);letter-spacing:.02em}
.letter .indent{border-left:1px solid var(--line);padding-left:1.2rem;margin-bottom:1.1rem}
.redactnote{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-secondary);border:1px dashed var(--line-strong);border-radius:8px;
  padding:.5rem .8rem;display:inline-block;margin-top:1rem}