/* Astor Academy course shell — editorial, rule-based, no boxes. See DESIGN.md */
.field{position:fixed;inset:0;z-index:0}
.veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,14,15,.2),rgba(13,14,15,.78) 30%,rgba(13,14,15,.86) 60%,rgba(13,14,15,.5))}
.bar,.rail,main,.credits{position:relative;z-index:2}
.progress{position:fixed;left:0;top:0;bottom:0;width:1px;background:var(--rule);z-index:21}
.progress i{position:absolute;inset:0 0 auto 0;height:0;background:var(--accent);transition:height .2s linear}
.bar{position:fixed;inset:0 0 auto;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:.95rem var(--gutter);background:linear-gradient(var(--bg) 35%,rgba(13,14,15,0))}
.crumb{color:var(--fg-2)}
.titlebtn{all:unset;cursor:pointer;display:flex;gap:.7rem;align-items:baseline;justify-self:center;font-size:.92rem;color:var(--fg)}
.titlebtn .tt{background:linear-gradient(var(--rule-2),var(--rule-2)) 0 100%/100% 1px no-repeat;padding-bottom:1px}
.titlebtn:hover .tt{background-image:linear-gradient(var(--accent),var(--accent))}
.tools{justify-self:end;display:flex;gap:1.2rem;align-items:baseline;color:var(--fg-2)}
.tools button{all:unset;cursor:pointer}
.rank b{color:var(--accent);font-weight:400}
/* toc overlay: text on the field */
.toc{position:fixed;inset:0;z-index:30;background:rgba(13,14,15,.94);backdrop-filter:blur(6px);display:grid;place-items:center;padding:5rem var(--gutter)}
.toc[hidden]{display:none}
.toc-in{width:min(54rem,100%);max-height:100%;overflow:auto}
.toc ol{list-style:none;padding:0;margin:2rem 0}
.toc li a{display:grid;grid-template-columns:4ch 1fr auto;gap:1.2rem;align-items:baseline;padding:.7rem 0;border-bottom:1px solid var(--rule);font-size:clamp(1.1rem,2.4vw,1.6rem);font-weight:300;letter-spacing:-.01em;transition:padding .4s var(--ease),color .3s}
.toc li a:hover{padding-left:.6rem;color:var(--accent)}
.toc li.cur a{color:var(--accent)}
.toc li.seen .t{text-decoration:line-through;text-decoration-color:var(--fg-4);text-decoration-thickness:1px}
.toc .n,.toc .y{font-family:var(--mono);font-size:.75rem;color:var(--fg-3)}
.toc-foot{margin-top:1.5rem}
/* left rail */
.rail{position:fixed;left:var(--gutter);top:50%;transform:translateY(-50%);z-index:3}
.rail ol{list-style:none;padding:0;margin:0;display:grid;gap:.15rem}
.rail a{display:flex;align-items:center;gap:.6rem;font:400 .68rem var(--mono);color:var(--fg-4);padding:.15rem 0}
.rail a::before{content:"";width:10px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.rail a span{opacity:0;transform:translateX(-4px);transition:.3s var(--ease);white-space:nowrap}
.rail a span{max-width:22ch;overflow:hidden;text-overflow:ellipsis}
.rail:hover a span{opacity:1;transform:none}
.rail:hover{background:linear-gradient(90deg,var(--bg) 60%,transparent);padding-right:2rem}
.rail a.cur{color:var(--accent)}.rail a.cur::before{width:24px}
.rail a.seen{color:var(--fg-3)}
/* layout grid: [main measure][margin notes] */
main{padding-top:4rem}
.sheet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--measure)) 15rem minmax(0,1fr);column-gap:var(--s6)}
.sheet>*{grid-column:2}
.note{grid-column:3;font:400 .74rem/1.6 var(--mono);color:var(--fg-3);align-self:start;border-top:1px solid var(--rule);padding-top:.5rem;margin-top:.4rem}
.note b{color:var(--fg-2);font-weight:400}
.wide{grid-column:2/4}
/* intro */
.intro{min-height:100svh;align-content:center;padding:6rem 0 4rem}
.intro .kick{margin-bottom:2rem;color:var(--accent)}
.intro h1{font-weight:200;font-size:clamp(3rem,9vw,8rem);line-height:.92;letter-spacing:-.05em;grid-column:2/4}
.intro .subtitle{grid-column:2/4;margin-top:1.2rem;font-weight:300;font-style:italic;font-size:clamp(1.5rem,3.4vw,2.6rem);letter-spacing:-.025em;line-height:1.1;color:var(--fg-2)}
.titlebtn .sub{font-size:.85em}
.intro .tag{margin-top:2rem;font-size:clamp(1.1rem,1.8vw,1.35rem);color:var(--fg-2);font-weight:300;max-width:34rem}
.intro .begin{margin-top:3.5rem;color:var(--fg-2)}
.intro .paras p{margin-top:1rem;color:var(--fg-2)}
/* era */
.era{padding:var(--s8) 0 var(--s6);position:relative}
.era-head{grid-column:2/4;position:relative;margin-bottom:var(--s6)}
.era-n{font-weight:100;font-size:clamp(7rem,20vw,16rem);line-height:.75;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--accent) 45%,transparent);display:block;margin-left:-.06em;user-select:none}
.era-meta{display:flex;gap:1rem;align-items:baseline;margin:1.4rem 0 .9rem;color:var(--fg-3)}
.era-meta .tick{width:32px;height:1px;background:var(--accent);align-self:center}
.era-title{font-weight:300;font-size:clamp(2.3rem,5.6vw,4.6rem);line-height:1;letter-spacing:-.04em}
.era-hook{margin-top:1.4rem;font-size:clamp(1.15rem,2vw,1.5rem);font-weight:300;font-style:italic;color:var(--fg-2)}
/* beats: one idea per screen-ish */
.beat{min-height:62svh;display:grid;align-content:center;padding:2rem 0;position:relative}
.beat .bh{font-weight:300;font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.12;letter-spacing:-.025em;padding-left:1.2rem;position:relative}
.beat .bh::before{content:"";position:absolute;left:0;top:.15em;bottom:.1em;width:1px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform 1.1s var(--ease) .2s}
.beat.in .bh::before{transform:scaleY(1)}
.beat .bp{margin-top:1.1rem;padding-left:1.2rem;color:var(--fg-2);font-size:1.1rem;max-width:32rem}
.beat .bi{font:400 .7rem var(--mono);color:var(--fg-4);margin-bottom:.8rem;padding-left:1.2rem}
/* figures with crop marks */
.fig{margin:var(--s5) 0;grid-column:2/4;display:grid;grid-template-columns:minmax(0,var(--measure)) 15rem;column-gap:var(--s6)}
.fig .frame{padding:12px}
.fig img{width:100%;height:auto;max-height:70svh;object-fit:contain;filter:grayscale(.35) contrast(1.02);transition:filter 1s var(--ease);clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease),filter 1s}
.fig.in img{clip-path:inset(0)}
.fig:hover img{filter:none}
.fig figcaption{align-self:end;font:400 .74rem/1.6 var(--mono);color:var(--fg-3);border-top:1px solid var(--rule);padding-top:.5rem}
.fig figcaption span{display:block;color:var(--fg-2);font-family:var(--sans);font-size:.92rem;margin-bottom:.5rem}
.fig figcaption a{color:var(--fg-3)}
/* key idea + quote */
.key{margin:var(--s6) 0;padding:1.2rem 0;border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule)}
.key .mono{color:var(--accent)}
.key h3{font-weight:400;font-size:1.3rem;margin:.4rem 0}
.key p{color:var(--fg-2)}
.quote{margin:var(--s7) 0;font-weight:200;font-size:clamp(1.7rem,3.8vw,2.9rem);line-height:1.15;letter-spacing:-.03em;grid-column:2/4}
.quote::before{content:"“";display:block;font-family:var(--mono);font-size:1rem;color:var(--accent);margin-bottom:1rem}
.quote cite{display:block;margin-top:1rem;font:400 .75rem var(--mono);color:var(--fg-3);font-style:normal}
/* section label (typographic divider) */
.label{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;margin:var(--s6) 0 var(--s4);color:var(--fg-3)}
.label::after{content:"";height:1px;background:var(--rule)}
/* people: dramatis personae */
.cast{list-style:none;padding:0;margin:0}
.cast>li{border-bottom:1px solid var(--rule)}
.cast .who{all:unset;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;padding:.85rem 0;width:100%}
.cast .who .nm{font-size:1.08rem;transition:color .3s,padding .4s var(--ease)}
.cast .who .yr{font:400 .72rem var(--mono);color:var(--fg-3);align-self:baseline}
.cast .who .rl{grid-column:1/-1;color:var(--fg-3);font-size:.9rem}
.cast .who:hover .nm{color:var(--accent);padding-left:.4rem}
.cast .who[aria-expanded=true] .nm{color:var(--accent)}
.cast .who .pm{font:400 .72rem var(--mono);color:var(--fg-4)}
.story{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s var(--ease)}
.story.open{grid-template-rows:1fr}
.story>div{overflow:hidden}
.story-in{display:grid;grid-template-columns:9rem 1fr;gap:1.5rem;padding:.6rem 0 2rem}
.story-in img{width:100%;height:auto;filter:grayscale(1) contrast(1.05);transition:filter .8s}
.story-in img:hover{filter:none}
.story-in .cap{font:400 .66rem/1.5 var(--mono);color:var(--fg-4);margin-top:.5rem;word-break:break-word}
.story-in p{color:var(--fg-2);margin-bottom:.8rem}
.story-in p:first-child::first-letter{font-size:2.6em;float:left;line-height:.85;padding:.08em .1em 0 0;font-weight:200;color:var(--fg)}
.srcs{margin-top:1rem;padding:0;list-style:none;font:400 .72rem/1.7 var(--mono);color:var(--fg-3)}
.srcs li::before{content:"↗ ";color:var(--fg-4)}
.srcs a{background:linear-gradient(var(--rule-2),var(--rule-2)) 0 100%/100% 1px no-repeat}
.unc{margin-top:.8rem;font-size:.9rem;color:var(--fg-3);border-left:1px solid var(--accent);padding-left:.8rem}
.unc::before{content:"historians differ · ";font:400 .7rem var(--mono);color:var(--accent)}
/* go deeper: layered accordions as indented rows */
.layers{margin:0}
.layer{border-bottom:1px solid var(--rule)}
.layer summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:4ch 1fr auto;gap:1rem;padding:.85rem 0;align-items:baseline}
.layer summary::-webkit-details-marker{display:none}
.layer summary .k{font:400 .72rem var(--mono);color:var(--fg-4)}
.layer summary .lt{font-size:1.05rem;transition:padding .4s var(--ease),color .3s}
.layer summary .sg{font:400 .78rem var(--mono);color:var(--fg-3)}
.layer summary .sg::before{content:"[+]"}
.layer[open] summary .sg::before{content:"[–]";color:var(--accent)}
.layer summary:hover .lt{padding-left:.4rem;color:var(--accent)}
.layer .lb{padding:.2rem 0 1.6rem 4ch;margin-left:1rem;color:var(--fg-2);animation:open .6s var(--ease)}
.layer .lb p{margin-bottom:.9rem}
.layer .lb ol{padding-left:1.2rem;font-size:.92rem}
.layer .lb ol li{margin-bottom:.4rem}
@keyframes open{from{opacity:0;transform:translateY(-6px)}}
.layer.depth-2 .lb{border-left:1px solid var(--rule)}
.layer-tools{display:flex;gap:1.2rem;justify-content:flex-end;margin-top:.6rem;color:var(--fg-3)}
.layer-tools button{all:unset;cursor:pointer}
/* glossary terms */
.g{all:unset;cursor:help;background:linear-gradient(90deg,var(--fg-3) 50%,transparent 0) 0 100%/4px 1px repeat-x;padding-bottom:1px}
.g:hover,.g:focus-visible{color:var(--accent);background-image:linear-gradient(90deg,var(--accent) 50%,transparent 0)}
.gpop{position:absolute;z-index:40;max-width:20rem;background:var(--bg);border-top:1px solid var(--accent);padding:.7rem .2rem .6rem;font-size:.9rem;color:var(--fg-2);box-shadow:0 20px 40px -10px #000}
.gpop b{display:block;font:400 .72rem var(--mono);color:var(--accent);margin-bottom:.3rem}
/* checkpoint trivia, terminal prompt */
.check{margin:var(--s6) 0;font-family:var(--mono);font-size:.88rem}
.check .q{font-family:var(--sans);font-size:1.25rem;font-weight:300;margin:.6rem 0 1rem;color:var(--fg)}
.check .q::before{content:"? ";color:var(--accent);font-family:var(--mono)}
.choices{list-style:none;padding:0;margin:0}
.choices button{all:unset;cursor:pointer;display:block;padding:.38rem 0;color:var(--fg-2);transition:color .2s,padding .3s var(--ease)}
.choices button:hover{color:var(--fg);padding-left:.5rem}
.choices button::before{content:attr(data-k) ") ";color:var(--fg-4)}
.choices button.ok{color:var(--accent)}
.choices button.no{color:var(--fg-4);text-decoration:line-through}
.choices button[disabled]{cursor:default}
.check .fb{margin-top:.8rem;color:var(--fg-3)}
.check .fb b{color:var(--accent);font-weight:400}
/* toys */
.toy{margin:var(--s6) 0;grid-column:2/4}
.toy .mono.h{color:var(--accent)}
.toy h3{font-weight:300;font-size:1.6rem;margin:.3rem 0 .4rem}
.toy p.d{color:var(--fg-3);margin-bottom:1.2rem}
.bits{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end}
.bits button{all:unset;cursor:pointer;width:2.4rem;text-align:center;font:300 2.2rem var(--mono);color:var(--fg-4);border-bottom:1px solid var(--rule-2);padding-bottom:.2rem;transition:color .2s}
.bits button[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}
.bits .pv{display:block;font-size:.62rem;color:var(--fg-4);margin-top:.3rem}
.bits-out{margin-top:1rem;font-family:var(--mono);color:var(--fg-2)}
.bits-out b{font-size:2rem;font-weight:300;color:var(--fg);margin-right:1rem}
/* next */
.next{margin:var(--s7) 0 0;font-weight:300;font-size:clamp(1.3rem,2.6vw,1.9rem);color:var(--fg-2);letter-spacing:-.015em;grid-column:2/4}
.next::before{content:"→ ";color:var(--accent)}
.era-end{grid-column:2/4;margin-top:var(--s6);height:1px;background:linear-gradient(90deg,var(--rule-2),transparent)}
/* map */
.mapsec,.glosec,.endsec{padding:var(--s8) 0 var(--s6)}
.sec-title{grid-column:2/4;font-weight:200;font-size:clamp(2.4rem,6vw,5rem);letter-spacing:-.045em;line-height:1;margin-bottom:var(--s5)}
.mapwrap{grid-column:1/-1;overflow-x:auto;padding:0 var(--gutter)}
.mapsvg{display:block;margin:0 auto}
.mapsvg text{font:400 11px var(--mono);fill:var(--fg-3)}
.mapsvg .era-l{fill:var(--fg-4);font-size:10px}
.mapsvg .nd{cursor:pointer}
.mapsvg .nd circle{fill:var(--bg);stroke:var(--fg-3)}
.mapsvg .nd:hover circle,.mapsvg .nd.hi circle{stroke:var(--accent);fill:var(--accent)}
.mapsvg .nd:hover text,.mapsvg .nd.hi text{fill:var(--fg)}
.mapsvg path{fill:none;stroke:var(--rule-2);stroke-width:1}
.mapsvg path.hi{stroke:var(--accent)}
/* glossary */
.gfilter{grid-column:2;font-family:var(--mono);font-size:.95rem;display:flex;gap:.6rem;align-items:center;border-bottom:1px solid var(--rule-2);padding-bottom:.5rem;margin-bottom:var(--s5)}
.gfilter input{all:unset;flex:1;color:var(--fg);caret-color:var(--accent)}
.gl{grid-column:2/4;columns:2 18rem;column-gap:var(--s6);margin:0}
.gl div{break-inside:avoid;padding:.7rem 0;border-top:1px solid var(--rule)}
.gl dt{font-weight:500;font-size:.98rem}
.gl dd{margin:.2rem 0 0;color:var(--fg-3);font-size:.92rem}
.endsec p{color:var(--fg-2)}
.endsec .links{display:flex;gap:2rem;margin-top:2rem;font-family:var(--mono);font-size:.85rem}
/* quiz dialog: text on field, no card */
.quiz{border:0;padding:0;background:transparent;color:var(--fg);max-width:min(40rem,92vw);width:100%}
.quiz::backdrop{background:rgba(13,14,15,.93);backdrop-filter:blur(6px)}
.quiz .close{all:unset;cursor:pointer;font:400 .78rem var(--mono);color:var(--fg-3);float:right}
.quiz .lvl{font:400 .75rem var(--mono);color:var(--fg-3);margin-top:1.4rem;border-top:1px solid var(--rule);padding-top:.7rem}
/* credits page */
.credits{max-width:52rem;margin:0 auto;padding:8rem var(--gutter) 5rem}
.credits h1{font-weight:200;font-size:clamp(2.6rem,7vw,5rem);letter-spacing:-.045em;line-height:1;margin:1rem 0 2rem}
.credits h2{font-weight:400;font-size:1.1rem;margin:3rem 0 .8rem;padding-top:.8rem;border-top:1px solid var(--rule-2)}
.credits ol{padding-left:0;list-style:none;font-size:.92rem;color:var(--fg-2)}
.credits li{padding:.55rem 0;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:14rem 1fr;gap:1rem}
.credits li .mono{color:var(--fg-3)}
.credits a{background:linear-gradient(var(--rule-2),var(--rule-2)) 0 100%/100% 1px no-repeat;word-break:break-word}
.credits-page .bar{grid-template-columns:1fr}
@media (max-width:1180px){.rail{display:none}}
@media (max-width:960px){
  .sheet{grid-template-columns:var(--gutter) minmax(0,1fr) var(--gutter);column-gap:0}
  .sheet>*,.note,.wide,.era-head,.quote,.next,.fig,.intro h1,.era-end,.toy,.sec-title,.gl,.gfilter{grid-column:2}
  .note{margin:.4rem 0 1.4rem}
  .fig{grid-template-columns:1fr;row-gap:.6rem}
  .bar{grid-template-columns:1fr auto}
  .crumb{display:none}
  .titlebtn{justify-self:start;font-size:.85rem}
  .titlebtn .mono:last-child,.titlebtn .sub{display:none}
  .titlebtn{min-width:0;max-width:62vw}.titlebtn .tt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sheet .note[style]{grid-row:auto!important}.intro .note{order:9}
  .tools{gap:.8rem}
  .tools a{display:none}
  .story-in{grid-template-columns:1fr}
  .story-in img{max-width:11rem}
  .credits li{grid-template-columns:1fr}
  .beat{min-height:52svh}
}

/* ================= v3: denser rhythm + visual-model kit (see DESIGN-v3.md) ================= */
/* density: fewer voids, tighter vertical rhythm */
main{padding-top:3rem}
.intro{min-height:auto;padding:7rem 0 2.5rem;position:relative}
.intro .kick{margin-bottom:1.2rem}.intro .tag{margin-top:1.2rem}.intro .begin{margin-top:1.8rem}
.era{padding:var(--s6) 0 var(--s5)}
.era-head{margin-bottom:var(--s4)}
.era-n{font-size:clamp(4.5rem,11vw,9rem)}
.era-meta{margin:.8rem 0 .6rem}
.era-title{font-size:clamp(2rem,4.4vw,3.6rem)}
.era-hook{margin-top:.8rem}
.beat{min-height:0;padding:1.1rem 0;grid-column:2/4;display:grid;grid-template-columns:minmax(0,var(--measure)) 15rem;column-gap:var(--s6);align-items:start;border-top:1px solid color-mix(in srgb,var(--rule) 60%,transparent)}
.beat .bh{font-size:clamp(1.35rem,2.5vw,1.95rem);line-height:1.18}
.beat .bp{margin-top:.6rem;font-size:1.04rem;max-width:none}
.beat .bi{margin-bottom:.35rem}
.fig{margin:var(--s4) 0}
.fig img{max-height:56svh}
.key{margin:var(--s4) 0}
.quote{margin:var(--s5) 0;font-size:clamp(1.5rem,3vw,2.3rem)}
.label{margin:var(--s5) 0 var(--s3)}
.check,.toy{margin:var(--s4) 0}
.next{margin:var(--s5) 0 0}
.era-end{margin-top:var(--s4)}
.mapsec,.glosec,.endsec{padding:var(--s6) 0 var(--s5)}
.cast{columns:2 18rem;column-gap:var(--s5)}.cast>li{break-inside:avoid}
.cast .who{padding:.6rem 0}
.layer summary{padding:.6rem 0}
/* highlight pair: tiny touches only */
.progress i{background:linear-gradient(var(--tq),var(--em))}
a:focus-visible,button:focus-visible{outline-color:var(--tq)}
.choices button.ok{color:var(--em)}
.layer summary:hover .sg::before{color:var(--tq)}
/* kinetic type */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
.w>span{display:inline-block;transform:translateY(105%);transition:transform 1s var(--ease) calc(var(--i)*55ms)}
.in .w>span,.era-head.in .w>span{transform:none}
.beat .bh .w>span{transform:none;color:var(--fg-4);transition:color .5s var(--ease)}
.beat .bh .w.lit>span{color:var(--fg)}
/* signature motion canvases */
.sig{display:block;pointer-events:none}
.sig-hero{position:absolute;right:0;top:13rem;width:min(34vw,26rem);height:min(30vw,22rem);grid-column:3/5;opacity:.85;-webkit-mask:radial-gradient(closest-side,#000 55%,transparent);mask:radial-gradient(closest-side,#000 55%,transparent)}
.era-head{display:grid;grid-template-columns:minmax(0,var(--measure)) 15rem;column-gap:var(--s6)}
.era-head>*{grid-column:1}
.sig-era{grid-column:2;grid-row:1/span 4;width:100%;height:9rem;align-self:end;opacity:.7;-webkit-mask:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);mask:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}
/* chronometer */
.chrono{position:fixed;left:var(--gutter);right:var(--gutter);top:3.05rem;height:28px;z-index:19;opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
.past-intro .chrono{opacity:1}
.chrono-svg{width:100%;height:26px;display:block}
.chrono .ax{stroke:var(--rule)}.chrono .tk{stroke:var(--fg-4)}
.chrono .sp{fill:var(--fg-4);transition:fill .4s}.chrono .sp.on{fill:var(--accent)}
.chrono .needle{position:absolute;left:0;top:2px;width:1px;height:22px;background:var(--tq);box-shadow:0 0 8px var(--tq);transition:transform .25s linear}
.chrono-lbl{position:absolute;right:0;top:-2px;font-size:.66rem;color:var(--fg-3)}
/* era strip */
.glance{padding:0 0 var(--s5)}
.vk-strip{font-size:.9rem}
.vk-h,.es-row{display:grid;grid-template-columns:3ch minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:.9rem;align-items:center}
.vk-h{font-size:.66rem;color:var(--fg-4);padding-bottom:.3rem;border-bottom:1px solid var(--rule)}
.es-row{padding:.32rem 0;border-bottom:1px solid color-mix(in srgb,var(--rule) 55%,transparent);transition:padding .4s var(--ease)}
.es-row:hover{padding-left:.4rem}.es-row:hover .es-t{color:var(--accent)}
.es-n{font-size:.68rem;color:var(--fg-4)}.es-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fg-2)}
.es-b{position:relative;height:1rem;display:flex;align-items:center;gap:.5rem}
.es-b i{display:block;height:1px;width:0;background:var(--fg-3);transition:width 1.2s var(--ease) var(--d)}
.drawn .es-b i{width:calc(var(--w) * .78)}
.es-row:hover .es-b i{background:var(--tq)}
.es-b em{font-style:normal;font-size:.64rem;color:var(--fg-4)}
/* lifelines */
.vk-life{margin:0 0 var(--s3)}
.life-svg{width:100%;height:auto;display:block}
.life-svg text{font:400 11px var(--mono);fill:var(--fg-3)}
.life-svg .gy{fill:var(--fg-4);font-size:8.5px;text-anchor:middle}
.life-svg .grid{stroke:var(--rule);stroke-dasharray:1 3}
.life-svg .bar{stroke:var(--fg-3);stroke-width:1.3;stroke-dasharray:640;stroke-dashoffset:640;transition:stroke-dashoffset 1.4s var(--ease) var(--d),stroke .3s}
.life-svg .bar.alive{stroke-dasharray:3 2}
.drawn .life-svg .bar{stroke-dashoffset:0}
.life-svg circle{fill:var(--accent)}
.life-svg .lf{cursor:pointer;outline:none}
.life-svg .lf:hover .bar,.life-svg .lf:focus .bar{stroke:var(--tq)}
.life-svg .lf:hover text,.life-svg .lf:focus text{fill:var(--fg)}
/* number marginalia */
.bn{font-family:var(--mono);color:var(--fg-3);font-size:.68rem;padding-top:.6rem;border-top:1px solid var(--rule);margin-top:1.4rem}
.bn .cnt{display:block;font:200 clamp(1.8rem,3vw,2.6rem)/1 var(--sans);letter-spacing:-.04em;color:var(--fg);margin-bottom:.25rem;font-variant-numeric:tabular-nums}
.bn .spark{display:block;height:1px;margin-top:.5rem;background:linear-gradient(90deg,var(--tq),var(--em) 40%,transparent);width:0;transition:width 1.6s var(--ease)}
.beat.in .bn .spark{width:100%}
/* idea flow */
.flow-svg{width:100%;height:auto;display:block}
.flow-svg text{font:400 10px var(--mono);fill:var(--fg-3)}
.flow-svg .fh{fill:var(--fg-4);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase}
.flow-svg path{fill:none;stroke:var(--rule-2);stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease) .2s}
.drawn .flow-svg path{stroke-dashoffset:0}
.flow-svg .fn{cursor:pointer}
.flow-svg .c1 circle{fill:var(--accent)}.flow-svg .c1 text{fill:var(--fg)}
.flow-svg .c0 circle,.flow-svg .c2 circle{fill:var(--bg);stroke:var(--fg-3)}
.flow-svg .fn:hover circle{fill:var(--tq);stroke:var(--tq)}.flow-svg .fn:hover text{fill:var(--fg)}
/* annotated figures: numbered with a leader line that draws to the caption */
.fig{position:relative}
.fig figcaption{position:relative;padding-left:0}
.fig figcaption::before{content:"fig. " attr(data-n);display:block;color:var(--accent);margin-bottom:.3rem}
.fig::after{content:"";position:absolute;right:calc(15rem + var(--s6) - 4px);bottom:2.2rem;height:1px;width:0;background:var(--tq);transition:width 1.2s var(--ease) .8s}
.fig.in::after{width:calc(var(--s6) + 4px)}
.fig .frame{padding:8px}
/* map: draw-in + highlight */
.mapsvg path{stroke-dasharray:4 3}
.mapsvg path.hi{stroke:var(--tq);stroke-dasharray:none}
.mapsvg .nd.hi circle{fill:var(--em);stroke:var(--em)}
/* mandelbrot field (computers) */
.field .mandel{position:absolute;inset:0;width:100%;height:100%;display:block}
@media (max-width:960px){
  .beat,.era-head{grid-column:2;grid-template-columns:1fr}
  .bn{margin-top:.6rem;display:flex;align-items:baseline;gap:.6rem;border-top:0;padding-top:0}.bn .cnt{display:inline;font-size:1.6rem}.bn .spark{flex:1}
  .sig-era{grid-column:1;grid-row:auto;height:5rem;position:absolute;right:0;top:0;width:50%}
  .sig-hero{position:relative;top:0;width:100%;height:12rem;grid-column:2;order:-1}
  .vk-h,.es-row{grid-template-columns:3ch minmax(0,1.6fr) repeat(3,minmax(0,.7fr));gap:.5rem}
  .glance,.glance>*{grid-column:2}
  .chrono{top:2.7rem}
  .fig::after{display:none}
  .intro{padding-top:5rem}
}
@media (prefers-reduced-motion:reduce){.w>span{transform:none!important;transition:none}.beat .bh .w>span{color:var(--fg)}.chrono .needle{transition:none}.drawn .es-b i,.es-b i{transition:none}}