/* Home page. Builds on the global design system in site-chrome.css (see _design/COMPONENTS.md).
   Page-specific parts only: hero stage, manifesto, four paths, schools panel, Campaign-in-a-Box, growth rail,
   quote, Oregon map, closing lines. Illustrations are inline SVG in pages/home.php; motion in assets/js/home.js. */
/* ================= HERO ================= */
.hero .wrap{padding-top:clamp(48px,6vw,86px);text-align:center}
.h1{font-family:var(--serif);font-weight:700;font-size:clamp(48px,7vw,100px);line-height:.96;letter-spacing:-.035em}
.h1 .ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.h1 .ln>span{display:block}
.h1 em{font-style:italic;color:var(--red)}
.hero .acts{justify-content:center}
.hero .free{margin-top:16px;font-size:13px;color:var(--slate)}
.stage{position:relative;margin-top:clamp(40px,5vw,72px);aspect-ratio:1230/319;cursor:crosshair;touch-action:pan-y}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.intro{margin-inline:auto;padding-block:clamp(72px,8vw,115px) clamp(96px,10vw,144px);max-width:980px}
.intro .big{font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.6vw,37px);line-height:1.3;letter-spacing:-.012em;text-wrap:balance}
.intro .big em{font-style:italic;color:var(--red)}
.intro .p{margin:28px auto 0;max-width:720px}

/* ================= 01 ================= */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(40px,7vw,96px);align-items:start}
.split .rt{padding-top:36px}
.split .rt>.p:first-child{margin-top:0}
.why-head{max-width:860px;margin-inline:auto}
.verbs{margin:22px auto 0;max-width:none;font-family:var(--serif);font-weight:500;font-size:clamp(19px,1.6vw,23px);line-height:1.4;letter-spacing:-.01em;color:var(--navy);text-wrap:balance}
.why-head .bring{margin-top:18px;font-size:var(--t-p);font-weight:500;line-height:1.5;color:var(--navy)}
.why-head .grows{margin-top:2px;font-size:var(--t-p);line-height:1.5;color:var(--slate)}
.jfig{margin-top:clamp(40px,4vw,56px)}
.fig-journey .jl{font-family:var(--mono);font-weight:500;letter-spacing:.16em}
.fx .fig-journey .jy{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform 1s var(--ease)}
.fx .fig-journey .jy.on{opacity:1;transform:none}
.fx .fig-journey .jy .dt{opacity:0;transition:opacity .35s;transition-delay:calc(.25s + var(--o) * .7s)}
.fx .fig-journey .jy.on .dt{opacity:1}
.fx .fig-journey .jy-arc{stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease)}
.fx .fig-journey .jy-arc.on{stroke-dashoffset:0}
.fig .flow{animation:flow 1.2s linear infinite;opacity:.9;transition:opacity .4s}
.fx .fig-journey .flow:not(.on){opacity:0}
@keyframes flow{to{stroke-dashoffset:-32}}

/* ================= 02 ================= */
.wr{margin-top:22px;font-family:var(--serif);font-weight:500;font-size:clamp(26px,2.5vw,36px);line-height:1.3;letter-spacing:-.012em;text-wrap:pretty}
.wr .w{transition:color .35s}
.js-wr .wr .w{color:var(--ghost)}
.js-wr .wr .w.lit{color:var(--navy)}
.js-wr .wr .w.lit.r{color:var(--red)}
.overlap{margin-top:40px}
.split.sticky>div:first-child{position:sticky;top:172px;align-self:start}
.overlap .p{margin-top:16px}

/* ================= 03 · four paths ================= */
.paths{margin-top:clamp(48px,5vw,72px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.path{position:relative;display:flex;flex-direction:column;padding:0 24px 8px}
.path+.path::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line)}
.path .ill{height:244px;display:flex;align-items:flex-end;justify-content:center;padding-top:20px;margin-inline:-24px;overflow:visible}
.path .ill .fig{width:auto;height:224px;max-width:none;flex:0 0 auto}
.fig-role .lift{transition:transform .6s var(--ease)}
.path:hover .fig-role .lift{transform:translateY(-12px)}
.path .num{display:none;margin-top:24px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.2em;color:var(--red)}
.path h3{margin-top:24px;font-family:var(--serif);font-weight:700;font-size:var(--t-h3);line-height:1.1;letter-spacing:-.02em}
.path h3 em{display:block;font-style:normal;color:var(--red)}
.path .p{margin-top:14px;font-size:17px}
.path .p .ac{color:inherit}
.path .go{margin-top:auto;padding-top:28px}
.path::after{content:"";position:absolute;left:24px;right:24px;top:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.path:hover::after{transform:none}

/* ================= 04 ================= */
.focus{display:grid;grid-template-columns:minmax(0,620fr) minmax(0,534fr);column-gap:76px;align-items:center}
.focus .p+.p{margin-top:24px}
.vote{background:var(--red);color:#fff;padding:40px;display:flex;flex-direction:column;gap:24px}
.vote .fig-p500{width:100%}
.vote .stat{font-family:var(--serif);font-weight:700;font-size:clamp(26px,2.5vw,36px);line-height:1.2;letter-spacing:-.015em}
.vote .after{font-size:var(--t-p);line-height:1.65}
.fx .anim:not(.play) .pm{opacity:0}
.fx .play .pm{animation:pop .7s var(--ease) both;animation-delay:calc(var(--d) * 1.1s)}
@keyframes pop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

/* ================= 05 ================= */
.camp{display:grid;grid-template-columns:minmax(0,558fr) minmax(0,600fr);column-gap:72px;align-items:center}
.boxfig{width:100%;max-width:600px;justify-self:center}
.fig-box .card{transition:transform .5s var(--ease);outline:none}
.fig-box .card:hover{transform:translateY(-14px)}
.fx .anim:not(.play) .card{opacity:0}
.fx .play .card{animation:drop .9s var(--ease) both;animation-delay:calc(.25s + var(--i) * 70ms)}
@keyframes drop{from{opacity:0;transform:translateY(-60px)}to{opacity:1;transform:none}}

/* ================= 06 ================= */
/* 06 — argument left (three “not enough”, one answer), mechanism right (a rail that loops back to 01), fuel underneath */
.eng2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(48px,7vw,104px);align-items:start}
.eng-l{position:sticky;top:172px}
.not{margin-top:32px}
.not li{padding:4px 0;font-family:var(--serif);font-weight:500;font-size:clamp(20px,1.7vw,24px);line-height:1.3;color:#9AA3B0;letter-spacing:-.01em}
.thesis{margin-top:28px;font-family:var(--serif);font-weight:700;font-size:var(--t-h3);line-height:1.15;letter-spacing:-.02em;color:var(--navy);text-wrap:balance}
.thesis em{font-style:italic;color:var(--red)}
.eng-r{position:relative;padding-left:56px;padding-top:6px}
.ret{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ret path{fill:none;stroke:#C5CBD4;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ret .arr{stroke:var(--red)}
.ret .runner{fill:var(--red)}
.rail li{position:relative;display:grid;grid-template-columns:44px minmax(0,150px) minmax(0,1fr);column-gap:16px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line);cursor:default}
.rail li:first-child{border-top:0}
.again{position:relative;display:flex;align-items:center;min-height:30px}
.again .ic{position:absolute;left:-48px;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:var(--slate);transition:background .4s;display:grid;place-items:center}
.again .ic svg{display:block;transition:transform .6s var(--ease)}
.again.on .ic{background:var(--red)}
.again.on .ic svg{transform:rotate(360deg)}
.rail .node{position:absolute;left:-41px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:#fff;border:1.5px solid #C5CBD4;transition:background .4s,border-color .4s,transform .4s var(--ease)}
.rail .n{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.2em;color:var(--slate);transition:color .4s}
.rail h3{font-family:var(--serif);font-weight:700;font-size:clamp(24px,2vw,30px);line-height:1.15;letter-spacing:-.015em;transition:color .4s}
.rail .d{font-size:17px;line-height:1.5;color:var(--slate)}
.rail li.on .node{background:var(--red);border-color:var(--red);transform:scale(1.15)}
.rail li.on .n,.rail li.on h3{color:var(--red)}
.again{margin-top:26px;padding-left:0;font-family:var(--serif);font-weight:700;font-style:italic;font-size:clamp(20px,1.7vw,24px);line-height:1.2;color:var(--red)}

/* ================= 07 ================= */
.exp blockquote{margin:26px auto 0;max-width:14em;font-family:var(--serif);font-weight:700;font-style:italic;font-size:clamp(38px,5vw,72px);line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
.exp blockquote em{color:var(--red);font-style:italic}

/* ================= 08 ================= */
.states{display:grid;grid-template-columns:minmax(0,500fr) minmax(0,660fr);column-gap:70px;align-items:center}
.fig-usflat .st{fill:#E3E7ED;stroke:#fff;stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.fig-usflat .st-t{fill:#B9C0CA}
.fig-usflat .st-or{fill:var(--red);stroke:#fff;stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.fig-usflat .arc{fill:none;stroke:var(--red);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.fx .anim:not(.play) .arc,.fx .anim:not(.play) .pin{opacity:0}
.fx .play .arc{animation:draw 1.1s var(--ease) both;animation-delay:calc(.4s + var(--i) * .2s)}
.fx .play .pin{animation:fade .5s var(--ease) both;animation-delay:calc(1.1s + var(--i) * .2s)}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

.closing-top{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-end;justify-content:space-between}
.closing-top .lines{flex:1 1 600px;min-width:0;font-family:var(--serif);font-weight:900;font-size:clamp(46px,6.6vw,100px);line-height:.95;letter-spacing:-.025em}
.closing-top .lines h2{font:inherit;color:rgba(255,255,255,.42)}
.closing-top .lines h2:last-child{color:var(--white);font-style:italic}
.logo-stack{height:150px;width:auto;flex:0 0 auto}
/* ---------- motion ---------- */
.fx .h1 .ln>span{animation:up 1.2s var(--ease) both}
.fx .h1 .ln:nth-child(2)>span{animation-delay:.1s}
.fx .hero .acts,.fx .hero .free{animation:fade 1.1s .5s var(--ease) both}
@keyframes up{from{transform:translateY(108%)}to{transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.fig-box .cube{transform-box:fill-box;transform-origin:50% 100%}.fx .anim:not(.play) .fig-box .cube{opacity:0;transform:translateY(-34px)}.fx .play .fig-box .cube{animation:cubeIn .7s var(--ease) both;animation-delay:calc(.15s + var(--i) * 70ms)}.fx .play .fig-box .cube.red{animation:cubeIn .8s var(--ease) both,cubeFloat 3.2s ease-in-out 1.9s infinite alternate;animation-delay:calc(.15s + 12 * 70ms),1.9s}@keyframes cubeIn{from{opacity:0;transform:translateY(-34px)}to{opacity:1;transform:none}}@keyframes cubeFloat{from{transform:none}to{transform:translateY(-8px)}}.boxfig:hover .fig-box .cube.red{animation-play-state:running}

/* canvas hero needs JS; without it the stage collapses */
.stage{display:none}
.js .stage{display:block}
.js.fx .stage{min-height:1px}
.exp .quote{margin:26px auto 0;max-width:14em;font-weight:700;font-style:italic;font-size:clamp(38px,5vw,72px);line-height:1.04;letter-spacing:-.03em}
.exp .quote em{color:var(--red);font-style:italic}
.wr{outline:0}
.fig-journey .jl{font-family:var(--mono)}
.closing-top .lines h2{margin:0}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .paths{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}
  .path:nth-child(3)::before{display:none}
}
@media (max-width:960px){
  .split{grid-template-columns:minmax(0,1fr);row-gap:56px}
  .focus,.camp,.states{grid-template-columns:minmax(0,1fr);row-gap:48px}
  .split .rt{padding-top:0;margin-top:-32px}
  .eng2{grid-template-columns:minmax(0,1fr);row-gap:48px}
  .eng-l{position:static}
  .eng-r{padding-left:44px}
  .rail li{grid-template-columns:36px minmax(0,1fr);row-gap:4px}
  .rail .d{grid-column:2}
  .rail .node{left:-29px}
  .again .ic{left:-36px}
  .split.sticky>div:first-child{position:static}
  .jscroll{overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
  .jscroll::-webkit-scrollbar{display:none}
  .jscroll .fig{min-width:720px}
}
@media (max-width:640px){
  .paths{grid-template-columns:minmax(0,1fr)}
  .path{padding-inline:0}.path .ill{margin-inline:0;height:auto}.path .ill .fig{width:100%;height:auto;max-width:420px}
  .path+.path::before{left:0;right:0;top:-24px;bottom:auto;width:auto;height:1px}
  .path::after{left:0;right:0}
  .vote{padding:28px}
  .logo-stack{height:110px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}