/* Layout: one cream editorial site. Horn + blocks home, annotated episode pages, idea pages. Single committed light look. */
:root{
  color-scheme:light;
  --bone:#F3EAD4; --bone-deep:#E8DEC2; --paper:#F8F1E0; --rule:#CFC5AE;
  --graphite:#2A2824; --ink:#1C1A16; --ink-mid:#3B3832; --ink-soft:#5E584E;
  --terra:#C77A4A; --terra-deep:#A85D30;
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --read:"EB Garamond",Georgia,serif;
  --ui:Inter,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",Menlo,Consolas,monospace;
  --gut:clamp(16px,4vw,52px);
  --max:1320px;
}
*{box-sizing:border-box}
html{background:var(--bone);scroll-behavior:smooth}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--ui);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- header ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--bone) 92%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;gap:22px;padding-block:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.brand svg{width:34px;height:20px;flex:none}
.brand span{font-family:var(--display);font-size:23px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.nav a,.nav button{font-size:14px;padding:7px 11px;text-decoration:none;color:var(--ink-mid)}
.nav a:hover,.nav button:hover{color:var(--ink);text-decoration:underline;text-underline-offset:5px}
.nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--terra);text-underline-offset:6px;text-decoration-thickness:2px}
.nav .search-btn{display:inline-flex;gap:10px;align-items:center;border:1px solid var(--rule);background:var(--paper);padding:7px 10px 7px 12px}
.nav .search-btn kbd{font-family:var(--mono);font-size:10.5px;border:1px solid var(--rule);padding:1px 5px;color:var(--ink-soft)}
.nav .sub{background:var(--ink);color:var(--bone)!important;margin-left:6px}
.nav .sub:hover{text-decoration:none!important;background:var(--graphite)}
.proto{background:var(--graphite);color:#d9cfb6;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:6px 16px}
.proto b{color:var(--bone);font-weight:500}

/* ---------- shared bits ---------- */
.btn{display:inline-flex;gap:10px;align-items:center;background:var(--ink);color:var(--bone);font-size:14px;font-weight:500;padding:12px 18px;text-decoration:none}
.btn:hover{background:var(--graphite)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bone)}
.link{font-size:14px;font-weight:500;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:4px}
.link:hover{text-decoration-color:var(--ink)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:5px 10px;border:1px solid var(--rule);background:var(--paper);color:var(--ink-mid);text-decoration:none;white-space:nowrap}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"],.chip.on{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.chip i{font-style:normal;font-family:var(--mono);font-size:10.5px;opacity:.75}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.section-head h2{font-family:var(--display);font-weight:500;font-size:clamp(34px,4vw,56px);line-height:1}
.section-head p{font-size:14.5px;line-height:1.55;color:var(--ink-mid);max-width:46ch}
.eyebrow{color:var(--ink-soft)}
.plate{background:var(--bone-deep);padding:12px;margin:0}
.plate img,.plate canvas{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--paper)}
.plate figcaption{display:flex;justify-content:space-between;gap:12px;padding-top:10px;color:var(--ink-soft)}
.loading{font-family:var(--mono);font-size:12px;color:var(--ink-soft);padding:20px 0}
main{min-height:60vh}
.page-enter{animation:fadeup .45s ease both}
@keyframes fadeup{from{transform:translateY(8px)}to{transform:none}}

/* ---------- home ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;padding-block:clamp(30px,4.5vw,64px) 6px}
.hero h1{font-family:var(--display);font-weight:500;font-size:clamp(54px,8vw,124px);line-height:.88;letter-spacing:-.02em}
.hero h1 em{font-weight:400}
.hero .sub{font-family:var(--read);font-size:clamp(18px,1.7vw,21px);line-height:1.5;color:var(--ink-mid);max-width:40ch;margin-top:20px}
.latest{border-top:2px solid var(--ink);padding-top:14px;display:grid;gap:10px}
.latest h3{font-family:var(--display);font-size:38px;font-weight:600;line-height:1}
.latest p{font-family:var(--read);font-size:17px;line-height:1.45;color:var(--ink-mid)}
.latest .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:4px}
.hornband{position:relative}
.hornband canvas{display:block;width:100%;height:clamp(250px,31vw,430px);cursor:pointer;touch-action:pan-y}
.hornband .hint{position:absolute;left:var(--gut);top:10px;color:var(--ink-soft)}
.filterbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.filterbar .lbl{color:var(--ink-soft);margin-right:4px}
.filterbar .grow{margin-left:auto}
.blocks-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,4vw,48px);padding-block:30px 52px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(24px,1fr));gap:4px}
.blk{aspect-ratio:1;border:1px solid var(--rule);background:var(--paper);position:relative;overflow:hidden;display:block;transition:opacity .2s,transform .15s}
.blk i{position:absolute;left:0;right:0;bottom:0;background:#8E877B;display:block}
.blk.odd i{background:#5E584E}
.blk:hover,.blk:focus-visible{border-color:var(--ink);transform:translateY(-1px)}
.blk:hover i,.blk:focus-visible i{background:var(--ink)}
.blk.tip{border-color:var(--terra)}
.blk.tip i{background:var(--terra)}
.blk.gap{border-style:dashed;opacity:.45;pointer-events:none}
.grid.filtering .blk:not(.hit){opacity:.18}
.grid.filtering .blk.hit{border-color:var(--ink)}
.grid.filtering .blk.hit i{background:var(--ink)}
.eras{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;margin-top:12px}
.eras div{border-top:2px solid var(--rule);padding-top:7px;min-width:0}
.eras b{display:block;font-family:var(--mono);font-size:10px;color:var(--ink-soft);font-weight:400}
.eras span{font-size:12px;line-height:1.3;display:block;overflow-wrap:anywhere}
.peek{border:1px solid var(--rule);background:var(--bone-deep);align-self:start;min-width:0;position:sticky;top:90px}
.peek .art{aspect-ratio:16/9;background:var(--paper);border-bottom:1px solid var(--rule);overflow:hidden}
.peek .art img,.peek .art canvas{display:block;width:100%;height:100%;object-fit:cover}
.peek .body{padding:14px 16px 18px;display:grid;gap:8px}
.peek h3{font-family:var(--display);font-size:28px;font-weight:600;line-height:1.05}
.peek p{font-family:var(--read);font-size:16px;line-height:1.5;color:var(--ink-mid)}
.mix{display:flex;height:6px;gap:2px}
.mix i{display:block;background:var(--ink-soft)}
.mix i.p{background:var(--terra)}
.counts{font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
.grow-teaser{padding-block:56px;border-top:1px solid var(--rule)}
.mini-gen svg{display:block;width:100%;min-width:640px}
.mini-gen{overflow-x:auto}
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule)}
.door{padding:24px 26px 28px 0;min-width:0;text-decoration:none;display:grid;gap:8px;align-content:start}
.door + .door{padding-left:26px;border-left:1px solid var(--rule)}
.door .ph{background:var(--bone-deep);padding:10px;margin-bottom:8px}
.door .ph img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.door h3{font-family:var(--display);font-size:29px;font-weight:600;line-height:1.05}
.door p{font-family:var(--read);font-size:17px;line-height:1.5;color:var(--ink-mid)}
.door:hover h3{text-decoration:underline;text-decoration-color:var(--terra);text-underline-offset:5px}
.quote-band{background:var(--ink);color:var(--bone);margin-top:56px}
.quote-band .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:end;padding-block:clamp(48px,7vw,96px)}
.quote-band blockquote{margin:0;font-family:var(--display);font-style:italic;font-size:clamp(30px,4.2vw,62px);line-height:1.06;max-width:24ch;transition:opacity .3s}
.quote-band cite{display:block;font-style:normal;margin-top:20px;color:#cfc5ae}
.quote-band cite a{color:var(--bone)}
.quote-band .ctl{display:flex;gap:8px}
.quote-band .ctl button{width:44px;height:44px;border:1px solid #6b655a;color:var(--bone)}
.quote-band .ctl button:hover{background:var(--bone);color:var(--ink)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--rule)}
.stats div{padding:24px 20px 26px 0;min-width:0}
.stats div + div{padding-left:20px;border-left:1px solid var(--rule)}
.stats b{display:block;font-family:var(--display);font-weight:500;font-size:clamp(36px,4vw,58px);line-height:1;font-variant-numeric:lining-nums tabular-nums}
.stats span{display:block;margin-top:6px;font-size:13px;color:var(--ink-mid);line-height:1.45}

/* ---------- episode page ---------- */
.ai-note{margin-top:14px;padding:10px 14px;border-left:3px solid var(--terra);background:var(--bone-deep);font-size:14px;line-height:1.5;color:var(--ink-mid);max-width:80ch}
.crumbs{padding-top:22px;color:var(--ink-soft);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--ink-mid)}
.ep-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,5vw,64px);align-items:center;padding-block:18px 28px}
.ep-head h1{font-family:var(--display);font-weight:500;font-size:clamp(50px,7.5vw,116px);line-height:.9;letter-spacing:-.02em;margin:12px 0 18px}
.ep-head h1.long{font-size:clamp(40px,5vw,76px)}
.ep-head .dek{font-family:var(--read);font-size:clamp(18px,1.7vw,22px);line-height:1.45;color:var(--ink-mid);max-width:40ch}
.ep-head .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;align-items:center}
.player-wrap{position:sticky;top:calc(env(safe-area-inset-top,0px) + 63px);z-index:30}
.player{background:var(--graphite);color:var(--bone);padding:12px 18px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center}
.player .pp{width:42px;height:42px;background:var(--terra);color:var(--ink);display:grid;place-items:center;font-size:15px}
.player .time{font-family:var(--mono);font-size:12px;color:#cfc5ae;font-variant-numeric:tabular-nums;white-space:nowrap}
.player .now-line{grid-column:1/-1;display:flex;gap:14px;align-items:baseline;min-height:20px;font-size:13px;color:#e9dfc6;overflow:hidden}
.player .now-line .mono{color:#a79e8b;flex:none}
.player .now-line span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--read);font-size:15px}
.atomline{position:relative;height:44px;cursor:pointer}
.atomline .base{position:absolute;left:0;right:0;top:27px;height:1px;background:#5a554b}
.atomline .prog{position:absolute;left:0;top:26px;height:3px;background:var(--terra);width:0}
.tick{position:absolute;transform:translateX(-50%);background:#cfc5ae}
.tick.claim{width:1px;height:10px;top:17px}
.tick.quote{width:2px;height:20px;top:7px;background:var(--bone)}
.tick.concept{width:7px;height:7px;top:20px;border-radius:50%;background:transparent;border:1px solid #cfc5ae}
.tick.analogy{width:7px;height:7px;top:20px;background:transparent;border:1px solid #cfc5ae;transform:translateX(-50%) rotate(45deg)}
.tick.reference{width:7px;height:7px;top:20px}
.tick.prediction{width:0;height:0;top:18px;background:transparent;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:9px solid var(--terra)}
.tick.event,.tick.thread{width:9px;height:2px;top:23px}
.tick.now{outline:2px solid var(--terra);outline-offset:2px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;color:#cfc5ae;text-transform:uppercase;letter-spacing:.06em;grid-column:1/-1}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{display:inline-block;width:8px;height:8px;border:1px solid #cfc5ae}
.legend i.q{width:2px;height:12px;background:var(--bone);border:0}
.legend i.c{border-radius:50%}
.legend i.a{transform:rotate(45deg)}
.legend i.r{background:#cfc5ae}
.legend i.p{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:9px solid var(--terra);border-top:0}
.legend i.cl{width:1px;height:10px;background:#cfc5ae;border:0}
.legend a{margin-left:auto;color:var(--bone)}
.minute{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);padding-block:40px;border-bottom:1px solid var(--rule)}
.minute h2{font-family:var(--display);font-size:34px;font-weight:500;line-height:1;margin-bottom:14px}
.minute .arg{font-family:var(--read);font-size:20px;line-height:1.55;color:var(--ink)}
.minute .foil{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule)}
.minute .foil p{font-family:var(--read);font-size:17px;line-height:1.5;color:var(--ink-mid);margin-top:6px}
.keylines{display:grid;gap:14px;align-content:start}
.keyline{border-left:2px solid var(--ink);padding:2px 0 2px 16px;cursor:pointer}
.keyline:hover{border-left-color:var(--terra)}
.keyline q{font-family:var(--display);font-style:italic;font-size:23px;line-height:1.22;quotes:"\201C" "\201D"}
.keyline .mono{display:block;margin-top:6px;color:var(--ink-soft)}
.ep-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(24px,4vw,56px);padding-block:30px 60px}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.passages{list-style:none;margin:0;padding:0}
.psg{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;padding:14px 8px 14px 0;border-top:1px solid var(--rule);cursor:pointer;scroll-margin-top:200px}
.psg:hover{background:linear-gradient(90deg,transparent,rgba(232,222,194,.7))}
.psg .ts{font-family:var(--mono);font-size:12px;color:var(--ink-mid);padding-top:4px}
.psg .ts small{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;margin-top:3px;color:var(--ink-soft)}
.psg p{font-family:var(--read);font-size:18px;line-height:1.55;color:var(--ink-mid);max-width:70ch}
.psg.quote p{font-family:var(--display);font-size:24px;font-style:italic;line-height:1.3;color:var(--ink)}
.psg.prediction .ts small{color:var(--terra-deep)}
.psg.now{background:var(--bone-deep)}
.psg .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.psg .tags a,.psg .tags button{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-mid);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.psg .tags a:hover{color:var(--ink)}
.psg mark{background:rgba(199,122,74,.28);color:inherit}
.margin{display:grid;gap:28px;align-content:start}
.margin section{border-top:2px solid var(--ink);padding-top:12px}
.margin h4{margin:0 0 10px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.margin p{font-family:var(--read);font-size:15.5px;line-height:1.5;color:var(--ink-mid)}
.margin .chips{display:flex;gap:6px;flex-wrap:wrap}
.card{background:var(--ink);color:var(--bone);padding:22px 20px 16px;aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:space-between}
.card q{font-family:var(--display);font-style:italic;font-size:22px;line-height:1.22;quotes:none;overflow:hidden}
.card .foot{display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#cfc5ae;border-top:1px solid #4a463e;padding-top:10px}
.card .foot b{color:var(--terra);font-weight:500}
.copybtn{margin-top:8px;font-size:12.5px;text-decoration:underline;text-underline-offset:3px;color:var(--ink-mid)}
.pn{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.pn a{padding:22px 0;text-decoration:none;display:grid;gap:6px;min-width:0}
.pn a + a{text-align:right;border-left:1px solid var(--rule);padding-left:20px}
.pn a:first-child{padding-right:20px}
.pn h3{font-family:var(--display);font-size:26px;font-weight:600;line-height:1.1}
.pn a:hover h3{text-decoration:underline;text-decoration-color:var(--terra);text-underline-offset:5px}
@supports (animation-timeline: scroll()){
  .readbar{position:fixed;left:0;right:0;top:0;height:3px;background:var(--terra);transform-origin:0 50%;z-index:60;animation:grow linear both;animation-timeline:scroll(root)}
  @keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
.readbar{display:none}
.readbar.on{display:block}

/* ---------- ideas ---------- */
.ideas-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:end;padding-block:clamp(30px,5vw,64px) 26px}
.ideas-head h1{font-family:var(--display);font-weight:500;font-size:clamp(52px,7.5vw,112px);line-height:.9;letter-spacing:-.02em}
.ideas-head p{font-family:var(--read);font-size:19px;line-height:1.5;color:var(--ink-mid);max-width:44ch}
.gen{overflow-x:auto;border-top:1px solid var(--ink);padding-top:10px}
.gen svg{display:block;width:100%;min-width:860px}
.gen svg text{font-family:var(--mono);fill:var(--ink-soft)}
.gen .row{cursor:pointer}
.gen .row .lab{font-family:var(--ui);font-size:13px;fill:var(--ink)}
.gen .row:hover .lab,.gen .row:focus .lab{text-decoration:underline}
.gen .row:hover .bg{fill:rgba(232,222,194,.8)}
.idea-head{padding-block:18px 28px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:end}
.idea-head h1{font-family:var(--display);font-weight:500;font-size:clamp(52px,8vw,124px);line-height:.9;letter-spacing:-.02em;margin-top:12px}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink)}
.facts div{padding:12px 12px 14px 0;min-width:0}
.facts div + div{padding-left:12px;border-left:1px solid var(--rule)}
.facts b{display:block;font-family:var(--display);font-size:32px;font-weight:500;line-height:1}
.facts span{display:block;font-size:12px;color:var(--ink-soft);margin-top:4px;line-height:1.35}
.strip{overflow-x:auto;padding-bottom:6px}
.strip svg{display:block;width:100%;min-width:720px}
.strip svg text{font-family:var(--mono);fill:var(--ink-soft)}
.then-now{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--rule);margin-top:40px}
.then-now article{padding:28px 32px 32px 0;min-width:0}
.then-now article + article{padding-left:32px;border-left:1px solid var(--rule)}
.then-now .mono{color:var(--ink-soft)}
.then-now blockquote{margin:12px 0 0;font-family:var(--display);font-size:clamp(23px,2.3vw,30px);line-height:1.25;color:var(--ink)}
.then-now article + article blockquote{color:var(--ink)}
.then-now .arrow{font-family:var(--mono);font-size:11px;color:var(--terra-deep)}
.idea-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);padding-block:44px 60px;border-top:1px solid var(--rule)}
.path{list-style:none;margin:0;padding:0;counter-reset:p}
.path li{border-top:1px solid var(--rule)}
.path a{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;padding:14px 0;text-decoration:none}
.path a b{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--terra-deep);padding-top:5px}
.path a h3{font-family:var(--display);font-size:24px;font-weight:600;line-height:1.1}
.path a p{font-family:var(--read);font-size:15.5px;line-height:1.45;color:var(--ink-mid);margin-top:4px}
.path a:hover h3{text-decoration:underline;text-decoration-color:var(--terra);text-underline-offset:5px}
.lines{display:grid;gap:18px}
.lines a{text-decoration:none;border-left:2px solid var(--ink);padding-left:16px;display:block}
.lines a:hover{border-left-color:var(--terra)}
.lines q{font-family:var(--display);font-style:italic;font-size:22px;line-height:1.25;quotes:"\201C" "\201D"}
.lines .mono{display:block;margin-top:6px;color:var(--ink-soft)}
.related{display:flex;gap:8px;flex-wrap:wrap}
.idea-horn{margin-top:36px}
.idea-horn canvas{display:block;width:100%;height:clamp(200px,22vw,300px)}

/* ---------- episodes archive ---------- */
.arch-head{padding-block:clamp(30px,5vw,60px) 20px}
.arch-head h1{font-family:var(--display);font-weight:500;font-size:clamp(52px,7.5vw,112px);line-height:.9;letter-spacing:-.02em}
.arch-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:18px 0}
.arch-tools input{font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--rule);background:var(--paper);min-width:0;flex:1 1 260px;color:var(--ink)}
.era-group{border-top:1px solid var(--ink);padding-top:16px;margin-top:34px}
.era-group header{display:flex;justify-content:space-between;gap:16px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}
.era-group h2{font-family:var(--display);font-size:32px;font-weight:500}
.eprow{display:grid;grid-template-columns:52px minmax(0,1fr) 120px;gap:16px;padding:12px 0;border-top:1px solid var(--rule);text-decoration:none;align-items:baseline}
.eprow:hover{background:linear-gradient(90deg,transparent,rgba(232,222,194,.8))}
.eprow b{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink-soft)}
.eprow h3{font-family:var(--display);font-size:23px;font-weight:600;line-height:1.1}
.eprow p{font-family:var(--read);font-size:15.5px;line-height:1.45;color:var(--ink-mid);margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.eprow .m{font-family:var(--mono);font-size:11px;color:var(--ink-soft);text-align:right}

/* ---------- search ---------- */
.search{position:fixed;inset:0;z-index:80;background:rgba(28,26,22,.45);display:grid;place-items:start center;padding:max(60px,8vh) 16px 16px}
.search[hidden]{display:none}
.search .box{background:var(--bone);width:min(820px,100%);max-height:80vh;display:grid;grid-template-rows:auto auto 1fr;box-shadow:0 20px 60px rgba(28,26,22,.35)}
.search input{font:inherit;font-family:var(--display);font-size:30px;padding:18px 20px;border:0;border-bottom:1px solid var(--rule);background:var(--paper);color:var(--ink);width:100%;outline:none}
.search .meta{padding:8px 20px;color:var(--ink-soft);display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--rule)}
.search .res{overflow:auto;padding:6px 0 12px}
.search .grp{padding:10px 20px 4px;color:var(--terra-deep)}
.search .hit{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;padding:10px 20px;text-decoration:none;cursor:pointer}
.search .hit:hover,.search .hit.sel{background:var(--bone-deep)}
.search .hit b{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--ink-soft);padding-top:3px}
.search .hit span{font-family:var(--read);font-size:16px;line-height:1.45;color:var(--ink-mid)}
.search .hit strong{font-family:var(--display);font-size:20px;font-weight:600;color:var(--ink);display:block;line-height:1.15}
.search mark{background:rgba(199,122,74,.3);color:inherit}
.search .empty{padding:20px;color:var(--ink-soft);font-size:14px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);margin-top:20px}
footer .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:30px;padding-block:36px 48px}
footer h3{font-family:var(--display);font-size:28px;font-weight:600}
footer p{font-size:13.5px;line-height:1.6;color:var(--ink-mid);margin-top:8px;max-width:60ch}
footer .keys{font-family:var(--mono);font-size:11px;color:var(--ink-soft);line-height:2}
footer kbd{font-family:var(--mono);border:1px solid var(--rule);padding:1px 5px;background:var(--paper)}

/* ---------- view transitions ---------- */
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}
::view-transition-group(epplate){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero,.ep-head,.minute,.ep-body,.ideas-head,.idea-head,.idea-cols,.blocks-wrap{grid-template-columns:minmax(0,1fr)}
  .peek{position:static}
  .eras{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:10px}
  .stats,.facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats div:nth-child(3),.facts div:nth-child(3){padding-left:0;border-left:0}
  .doors{grid-template-columns:minmax(0,1fr)}
  .door,.door + .door{padding:22px 0;border-left:0;border-bottom:1px solid var(--rule)}
  footer .wrap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .top{position:static}
  .top .wrap{gap:10px}
  .nav{width:100%;overflow-x:auto;flex-wrap:nowrap}
  .nav a,.nav button{flex:none}
  .player-wrap{top:env(safe-area-inset-top,0px)}
  .player{grid-template-columns:auto minmax(0,1fr)}
  .player .time{grid-column:2;grid-row:1;text-align:right}
  .atomline{grid-column:1/-1}
  .then-now{grid-template-columns:minmax(0,1fr)}
  .then-now article + article{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  .eprow{grid-template-columns:40px minmax(0,1fr)}
  .eprow .m{display:none}
  .hornband .hint,.nav .long,.nav kbd{display:none}
  .quote-band .wrap{grid-template-columns:minmax(0,1fr)}
  .pn h3{font-size:20px}
  .eras{grid-template-columns:repeat(3,minmax(0,1fr))}
  .search input{font-size:24px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

[hidden]{display:none!important}
img{max-width:100%}
.article{max-width:740px;margin:0 auto;padding-block:clamp(30px,5vw,64px) 60px}
.article h1{font-family:var(--display);font-weight:500;font-size:clamp(44px,6vw,84px);line-height:.95;letter-spacing:-.02em;margin:10px 0 28px}
.article .body{font-family:var(--read);font-size:20px;line-height:1.65;color:var(--ink-mid)}
.article .body p{margin:0 0 1.1em}
.article .body h2,.article .body h3{font-family:var(--display);font-weight:600;color:var(--ink);margin:1.6em 0 .5em;line-height:1.1}
.article .body h2{font-size:34px}.article .body h3{font-size:27px}
.article .body img{display:block;margin:1.4em 0;background:var(--bone-deep);padding:10px}
.article .body a{color:var(--ink)}
.article .body figure{margin:1.4em 0}
.article .body figcaption{font-family:var(--mono);font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
.prerender ol{padding-left:0;list-style:none}