.field{position:fixed;inset:0;z-index:0}
.vignette{position:absolute;inset:0;background:radial-gradient(120% 90% at 30% 40%,transparent 30%,rgba(13,14,15,.75) 100%)}
.bar,main,.foot{position:relative;z-index:2}
.bar{position:fixed;inset:0 0 auto;display:flex;align-items:center;gap:2rem;padding:1.1rem var(--gutter);z-index:20;background:linear-gradient(var(--bg) 20%,rgba(13,14,15,0));}
.wordmark{font-size:.9rem;color:var(--fg)}
.bar nav{display:flex;gap:1.4rem;color:var(--fg-2);margin-left:auto}
.bar .rank{min-width:9ch;text-align:right}
.bar .rank b{color:var(--accent);font-weight:400}
/* hero */
.hero{min-height:100svh;display:grid;align-content:center;padding:7rem var(--gutter) 5rem;position:relative;max-width:1280px;margin:0 auto}
.kicker{margin-bottom:var(--s5)}
.h-hero{font-weight:300;font-size:clamp(3rem,10.5vw,9.5rem);line-height:.94;letter-spacing:-.045em}
.h-hero .line{display:block}
.h-hero .soft{color:var(--fg-3);font-style:italic;font-weight:200}
.wipe.d2{transition-delay:.15s}.wipe.d3{transition-delay:.3s}
.d2{transition-delay:.15s}.d3{transition-delay:.3s}.d4{transition-delay:.55s}.d5{transition-delay:.75s}
.prompt{margin-top:var(--s6);font-size:clamp(.85rem,1.4vw,1.02rem);color:var(--fg-2);padding-bottom:.7rem;max-width:34rem;background:linear-gradient(90deg,var(--rule-2),transparent) 0 100%/100% 1px no-repeat}
.hero-note{position:absolute;right:var(--gutter);bottom:5.5rem;display:grid;gap:.35rem;text-align:right}
.hero-note span::before{content:"— ";color:var(--fg-4)}
.scroll-hint{position:absolute;left:var(--gutter);bottom:2rem;display:flex;align-items:center;gap:.8rem}
.scroll-hint i{width:60px;height:1px;background:var(--rule-2);position:relative;overflow:hidden}
.scroll-hint i::after{content:"";position:absolute;inset:0;background:var(--fg-2);animation:sweep 2.4s var(--ease) infinite}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
/* sections */
.sec-h{display:grid;grid-template-columns:auto auto 1fr;align-items:baseline;gap:1rem;margin-bottom:var(--s5)}
.sec-h h2{font-weight:400;font-size:1.05rem;letter-spacing:.01em}
.sec-h .rule{align-self:center}
.index,.how{max-width:1280px;margin:0 auto;padding:var(--s7) var(--gutter)}
.index{display:grid;grid-template-columns:1fr 15rem;column-gap:var(--s6)}
.index .sec-h{grid-column:1/-1}
.toc{list-style:none;padding:0;columns:2;column-gap:var(--s6)}
.toc li{break-inside:avoid}
.toc a{display:grid;grid-template-columns:3ch 1fr auto;gap:1rem;align-items:baseline;padding:.62rem 0;border-bottom:1px solid var(--rule);transition:color .3s, padding .4s var(--ease)}
.toc a:hover{padding-left:.5rem;color:var(--c)}
.toc .n{color:var(--fg-4)}
.toc .t{font-size:1.02rem}
.toc .st{color:var(--fg-4)}
.toc .st.open{color:var(--c)}
.side{align-self:end;line-height:1.7;border-left:1px solid var(--rule);padding-left:1rem}
/* course beats */
.course{min-height:100svh;position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:var(--s6);max-width:1280px;margin:0 auto;padding:var(--s7) var(--gutter)}
.course:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.course:nth-child(even) .c-art{order:2}
.c-art{position:relative;aspect-ratio:4/5;max-height:72svh;width:100%}
.c-art .tex{inset:14px;-webkit-mask:radial-gradient(85% 75% at 50% 50%,#000 40%,transparent 100%);mask:radial-gradient(85% 75% at 50% 50%,#000 40%,transparent 100%);clip-path:inset(0 0 100% 0);transition:clip-path 1.6s var(--ease)}
.course.in .c-art .tex{clip-path:inset(0 0 0 0)}
.c-art .crop{position:absolute;inset:0;--c:color-mix(in srgb,var(--c) 55%,transparent)}
.c-art .coord{position:absolute;bottom:-1.6rem;left:0;right:0;display:flex;justify-content:space-between}
.c-num{font-family:var(--sans);font-weight:100;font-size:clamp(6rem,16vw,13rem);line-height:.8;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px var(--rule-2);position:absolute;top:.5rem;right:.2rem;pointer-events:none}
.course:nth-child(even) .c-num{left:.2rem;right:auto}
.c-txt{max-width:32rem}
.c-sub{display:flex;gap:.8rem;align-items:baseline;margin-bottom:var(--s4)}
.c-sub .tick{width:28px;height:1px;background:var(--c);align-self:center}
.c-title{font-weight:300;font-size:clamp(2.2rem,5vw,4.1rem);line-height:1.02;letter-spacing:-.035em;margin-bottom:var(--s4)}
.c-title{margin-bottom:.5rem}
.c-subtitle{font-weight:300;font-style:italic;font-size:clamp(1.25rem,2.4vw,1.8rem);letter-spacing:-.02em;color:var(--fg-2);margin-bottom:var(--s4)}
.c-hook{color:var(--fg-2);font-size:1.12rem;max-width:28rem}
.c-meta{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin-top:var(--s4);color:var(--fg-3)}
.c-meta span::before{content:"/ ";color:var(--fg-4)}
.c-go{display:inline-flex;gap:.7rem;align-items:baseline;margin-top:var(--s5);font-size:.95rem}
.c-go .mono{color:var(--c)}
.c-go.soon{color:var(--fg-3)}
.c-go.soon s{text-decoration-color:var(--fg-4)}
.c-txt>*{opacity:0;transform:translateY(12px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.course.in .c-txt>*{opacity:1;transform:none}
.course.in .c-txt>*:nth-child(2){transition-delay:.1s}.course.in .c-txt>*:nth-child(3){transition-delay:.2s}.course.in .c-txt>*:nth-child(4){transition-delay:.3s}.course.in .c-txt>*:nth-child(5){transition-delay:.4s}
/* how */
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.how-col{padding:0 var(--s5) 0 0;border-left:1px solid var(--rule);padding-left:var(--s4)}
.big-n{display:block;font-size:2.2rem;color:var(--fg-4);margin-bottom:var(--s4)}
.how-col h3{font-weight:400;font-size:1.35rem;margin-bottom:.6rem;letter-spacing:-.01em}
.how-col p{color:var(--fg-2);font-size:.98rem}
.pledge{margin-top:var(--s7);max-width:40rem;font-size:1.15rem;font-weight:300;color:var(--fg-2)}
.pledge .mono{margin-right:1rem}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:var(--s5) var(--gutter) var(--s5);border-top:1px solid var(--rule);color:var(--fg-2);max-width:1280px;margin:0 auto}
.foot nav{display:flex;gap:1.4rem}
/* simple pages */
.page{position:relative;z-index:2;max-width:46rem;margin:0 auto;padding:9rem var(--gutter) 6rem}
.page h1{font-weight:300;font-size:clamp(2.4rem,6vw,4rem);letter-spacing:-.035em;line-height:1.05;margin:1rem 0 2rem}
.page h2{font-weight:400;font-size:1.2rem;margin:2.5rem 0 .6rem;padding-top:1rem;border-top:1px solid var(--rule)}
.page p,.page li{color:var(--fg-2);margin-bottom:.7rem}
.page a{background:linear-gradient(var(--rule-2),var(--rule-2)) 0 100%/100% 1px no-repeat}
@media (max-width:860px){
  .bar nav{display:none}
  .hero-note{position:static;text-align:left;margin-top:var(--s5);grid-auto-flow:column;justify-content:start;gap:1rem}
  .hero-note span::before{content:""}
  .index{grid-template-columns:1fr}.toc{columns:1}.side{margin-top:var(--s5)}
  .course,.course:nth-child(even){grid-template-columns:1fr;gap:var(--s5);min-height:auto;padding-block:var(--s6)}
  .course:nth-child(even) .c-art{order:0}
  .c-art{aspect-ratio:5/4;max-height:none}
  .how-grid{grid-template-columns:1fr;gap:var(--s5)}
}

/* ================= v3: denser landing + atlas + signature motion ================= */
.hero{min-height:82svh;padding:6.5rem var(--gutter) 3rem}
.prompt{margin-top:var(--s5)}
.index,.how{padding:var(--s6) var(--gutter)}
.course{min-height:0;padding:var(--s5) var(--gutter);gap:var(--s5);border-top:1px solid color-mix(in srgb,var(--rule) 60%,transparent)}
.c-art{aspect-ratio:16/11;max-height:46svh}
.c-art .sig{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);opacity:.75;pointer-events:none}
.c-num{font-size:clamp(4.5rem,10vw,8rem)}
.c-sub{margin-bottom:var(--s3)}.c-subtitle{margin-bottom:var(--s3)}
.c-meta{margin-top:var(--s3)}.c-go{margin-top:var(--s4)}
.c-span{display:flex;align-items:center;gap:.7rem;margin-top:.6rem;font-size:.68rem;color:var(--fg-4)}
.c-span i{flex:0 0 3rem;height:1px;background:linear-gradient(90deg,var(--c),var(--tq))}
.c-go:hover .mono{color:var(--tq)}
.toc a:hover .n{color:var(--tq)}
/* atlas of time */
.atlas{max-width:1280px;margin:0 auto;padding:var(--s5) var(--gutter) var(--s6)}
.atlas-lede{max-width:40rem;color:var(--fg-2);margin-bottom:var(--s4)}
.atlas-plot svg{display:block;overflow:visible}
.atlas-plot .g{stroke:var(--rule);stroke-dasharray:1 3}
.atlas-plot .gy{font:400 9px var(--mono);fill:var(--fg-4);text-anchor:middle}
.atlas-plot .an{font:400 11px var(--sans);fill:var(--fg-2);transition:fill .3s}
.atlas-plot .base{stroke:color-mix(in srgb,var(--rule) 50%,transparent)}
.atlas-plot .sp{stroke:var(--c);stroke-width:1.5;opacity:.85;stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 1.8s var(--ease) var(--d),stroke .2s}
.atlas-plot.drawn .sp{stroke-dashoffset:0}
.atlas-plot .ar:hover .sp{stroke:var(--tq)}.atlas-plot .ar:hover .an{fill:var(--fg)}
.atlas-plot .sp:hover{stroke:var(--em)!important;stroke-width:2.5}
.atlas-tot{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s4);color:var(--fg-3);font-size:.72rem}
.atlas-tot .cnt{display:block;font:200 clamp(2rem,4vw,3.2rem)/1 var(--sans);letter-spacing:-.04em;color:var(--fg);font-variant-numeric:tabular-nums}
.atlas-tot .spark{display:block;height:1px;margin-top:.4rem;background:linear-gradient(90deg,var(--tq),var(--em) 50%,transparent)}
@media (max-width:860px){.course,.course:nth-child(even){padding-block:var(--s5)}.c-art{aspect-ratio:16/9}.hero{min-height:76svh}.atlas-tot{gap:var(--s4)}}
@media (prefers-reduced-motion:reduce){.atlas-plot .sp{stroke-dashoffset:0;transition:none}}