/* Oregon 500 landing. Builds on the global design system in site-chrome.css (see _design/COMPONENTS.md).
   Page-specific parts only: hero line intro, four role cards, schools panel, Campaign-in-a-Box, map, closing lines.
   Role figures, box and US map are reused from pages/home.php (their animation rules are repeated here). */

/* ---------- hero ---------- */
.oh .h1 .ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.oh .h1 .ln>span{display:block}
.oh .phero-fig{max-width:620px}
.fx .oh .h1 .ln>span{animation:up 1.2s var(--ease) both}
.fx .oh .h1 .ln:nth-child(2)>span{animation-delay:.1s}
.fx .oh .acts,.fx .oh .free{animation:fade 1.1s .5s var(--ease) both}
.oh .p b{color:var(--navy)}

/* ---------- one network: role cards ---------- */
.connects{margin-top:36px;font-family:var(--serif);font-style:normal;color:var(--red);font-size:clamp(22px,2vw,28px)}
.paths{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.path .ill{height:200px;display:flex;align-items:flex-end;justify-content:center;margin:-8px -12px 8px;overflow:visible}
.path .ill .fig{width:auto;height:190px;max-width:100%;flex:0 0 auto}
.fig-role .lift{transition:transform .6s var(--ease)}
.path:hover .fig-role .lift{transform:translateY(-12px)}
.path .h3{margin-top:4px}
.path .role{margin-top:8px;font-size:12px;color:var(--slate);text-transform:uppercase}
.path .p{margin-top:14px}

/* ---------- schools ---------- */
.o-art{margin:0;width:100%;max-width:560px;justify-self:center}
.o-art img{display:block;width:100%;height:auto}
.o-vote{margin-top:32px;margin-bottom:32px}
.split.mid .lede{margin-top:20px}
.split.mid .p{margin-top:20px}

/* ---------- campaign ---------- */
.camp{display:grid;grid-template-columns:minmax(0,558fr) minmax(0,600fr);column-gap:72px;align-items:center}
.boxfig{margin:0;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)}
.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)}}
.o-qual{margin-top:28px;max-width:34em;font-size:14px;line-height:1.6;color:var(--slate)}

/* ---------- map ---------- */
.states{display:grid;grid-template-columns:minmax(0,500fr) minmax(0,660fr);column-gap:70px;align-items:center}
.states figure{margin:0}
.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)}

/* ---------- closing ---------- */
.o-close-eyebrow{color:var(--steel)}
.o-lines{margin:20px 0 0;display:flex;flex-direction:column;font-family:var(--serif);font-weight:900;font-size:clamp(52px,8vw,120px);line-height:.95;letter-spacing:-.025em;color:var(--white)}
.o-lines span:first-child{color:rgba(255,255,255,.42)}
.o-lines span:last-child{font-style:italic}
.o-free{color:var(--steel)}
.closing .acts{margin-top:44px}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .paths{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .camp,.states{grid-template-columns:minmax(0,1fr);row-gap:48px}
}
@media (max-width:640px){
  .paths{grid-template-columns:minmax(0,1fr)}
  .path .ill{height:auto}
  .path .ill .fig{width:100%;height:auto;max-width:420px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}