*{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#252c23; --ink2:#1b2118; --paper:#f4f1e8; --paper2:#eae7db;
  --accent:#e84600; --accent2:#ff5a1f; --mist:#d9d6ce; --line:rgba(37,44,35,.22); --linelt:rgba(244,241,232,.22);
  --serif:"Fraunces",Georgia,serif; --sans:"Space Grotesk",system-ui,sans-serif; --mono:"Space Mono",monospace;
}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:15px/1.8 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
em{font-style:italic}
@media (hover:hover) and (pointer:fine){body,a,button,select,input,summary,canvas,label{cursor:none}}
.wrap{max-width:1460px;margin:0 auto;padding:0 clamp(20px,4.5vw,72px)}

/* ---- grain / progress / cursor ---- */
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.055;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
#progress{position:fixed;top:0;left:0;height:4px;width:0;background:var(--accent);z-index:200}
#cursor{position:fixed;left:0;top:0;z-index:300;pointer-events:none;display:none}
@media (hover:hover) and (pointer:fine){#cursor{display:block}}
#cursor .dot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%);
 transition:width .25s,height .25s,background .25s,border .25s;display:flex;align-items:center;justify-content:center}
#cursor.link .dot{width:34px;height:34px;background:transparent;border:1.5px solid var(--accent)}
#cursor.act .dot{width:58px;height:58px;background:var(--accent);border:0}
#cursor .lbl{font:700 9px/1 var(--mono);letter-spacing:.12em;color:#fff;opacity:0;transition:.2s}
#cursor.act .lbl{opacity:1}

/* ---- nav ---- */
.nav{position:fixed;inset:0 0 auto;z-index:120;display:flex;justify-content:space-between;align-items:center;
 padding:14px clamp(20px,4.5vw,72px);transition:.35s;color:var(--paper)}
.nav.solid{background:rgba(27,33,24,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--linelt)}
.logo{font:600 21px var(--serif)}
.logo b{color:var(--accent)}
.logo span{font:10px var(--mono);letter-spacing:.3em;opacity:.65;margin-left:14px}
.links{display:flex;gap:clamp(12px,2.2vw,30px)}
.links a{font:12px var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:6px 2px;position:relative;opacity:.75;transition:.25s}
.links a:hover{opacity:1}
.links a.on{opacity:1;color:var(--accent)}
.links a.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent)}

/* ---- buttons / chips / tags ---- */
.btn{display:inline-flex;align-items:center;gap:10px;font:700 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;
 padding:15px 30px;border-radius:999px;background:var(--accent);color:#fff;border:1.5px solid var(--accent);transition:.3s}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.ghost{background:transparent;color:inherit;border:1.5px solid currentColor}
.btn.ghost:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.tag{font:10px var(--mono);letter-spacing:.16em;text-transform:uppercase;border:1px solid currentColor;border-radius:999px;padding:5px 12px;opacity:.75}
.chip{display:inline-flex;align-items:center;gap:8px;font:11px var(--mono);letter-spacing:.08em;border:1.5px solid var(--line);
 border-radius:999px;padding:9px 15px;background:transparent;color:inherit;transition:.22s;text-transform:uppercase}
.chip i{width:8px;height:8px;border-radius:50%;flex:none}
.chip:hover{border-color:var(--accent)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.dark .chip{border-color:var(--linelt)}
.dark .chip.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---- sections ---- */
.sec{padding:clamp(84px,11vw,160px) 0}
.dark{background:var(--ink);color:var(--paper)}
.cream{background:var(--paper2)}
.sec-head{display:flex;align-items:flex-end;gap:26px;margin-bottom:clamp(40px,6vw,84px);flex-wrap:wrap}
.secnum{font:italic 600 clamp(58px,8vw,120px)/0.9 var(--serif);color:transparent;-webkit-text-stroke:1.5px currentColor;opacity:.85}
.sec-head h2{font:600 clamp(30px,4.4vw,58px)/1.06 var(--serif);letter-spacing:-.01em}
.sec-head h2 em{color:var(--accent)}
.kick{font:11px var(--mono);letter-spacing:.32em;text-transform:uppercase;opacity:.6;display:flex;align-items:center;gap:12px}
.kick::before{content:"";width:38px;height:2px;background:var(--accent)}
.lede{max-width:760px;font-size:16.5px;opacity:.85}
.rule{border:0;border-top:1.5px solid var(--line)}
.dark .rule{border-color:var(--linelt)}

/* ---- hero (home) ---- */
.hero{min-height:100svh;background:var(--ink);color:var(--paper);position:relative;display:flex;flex-direction:column;
 justify-content:center;padding:150px clamp(20px,5vw,90px) 120px;overflow:hidden}
h1.display{font:600 clamp(58px,10.5vw,180px)/0.98 var(--serif);letter-spacing:-.02em;margin:28px 0 34px}
h1.display .it{font-style:italic;color:var(--accent);font-weight:500}
h1.display .ol{color:transparent;-webkit-text-stroke:2px var(--mist)}
.hero .lede{max-width:640px;font-size:17px}
.hero-cta{display:flex;gap:16px;margin-top:44px;flex-wrap:wrap}
.sticker{position:absolute;font:600 15px var(--serif);background:var(--mist);color:var(--ink);padding:12px 20px;border-radius:4px;
 box-shadow:0 14px 30px rgba(0,0,0,.35);touch-action:none;user-select:none;
 transform:translate(var(--tx,0),var(--ty,0)) rotate(var(--r,0deg));transition:box-shadow .2s}
.sticker:hover{box-shadow:0 22px 44px rgba(0,0,0,.5);z-index:9}
.sticker.org{background:var(--accent);color:#fff}
.sticker small{display:block;font:9px var(--mono);letter-spacing:.14em;opacity:.7;margin-top:2px}
@media(max-width:900px){.sticker{display:none}}
.hero-foot{position:absolute;left:clamp(20px,5vw,90px);right:clamp(20px,5vw,90px);bottom:30px;display:flex;
 justify-content:space-between;font:10px var(--mono);letter-spacing:.28em;opacity:.55;text-transform:uppercase}

/* ---- marquee ---- */
.marq{overflow:hidden;white-space:nowrap;border-top:1.5px solid var(--linelt);border-bottom:1.5px solid var(--linelt);
 padding:16px 0;background:var(--ink2);color:var(--mist)}
.marq-in{display:inline-flex;animation:marq 42s linear infinite;font:italic 500 18px var(--serif)}
.marq-in span{padding:0 34px}
.marq-in b{color:var(--accent);font-weight:500}
@keyframes marq{to{transform:translateX(-50%)}}
.marq.lt{background:var(--accent);color:#fff;border:0}
.marq.lt b{color:var(--ink)}

/* ---- project rows ---- */
.prow{position:relative;display:grid;grid-template-columns:120px 1fr minmax(230px,400px) 80px;gap:26px;align-items:center;
 padding:clamp(30px,4vw,54px) 22px;border-top:1.5px solid var(--linelt);overflow:hidden}
.prow:last-of-type{border-bottom:1.5px solid var(--linelt)}
.prow::before{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleY(0);transform-origin:bottom;transition:.45s cubic-bezier(.7,0,.2,1);z-index:0}
.prow:hover::before{transform:scaleY(1)}
.prow>*{position:relative;z-index:1;transition:.3s}
.pidx{font:11px var(--mono);letter-spacing:.2em;opacity:.6}
.prow h3{font:600 clamp(30px,4.6vw,62px)/1.02 var(--serif)}
.prow p{font-size:13.5px;opacity:.75}
.parr{font-size:30px;justify-self:end;transition:.35s}
.prow:hover{color:#fff}
.prow:hover .pidx{opacity:.9}
.prow:hover .parr{transform:translate(10px,-10px) rotate(45deg)}

/* ---- about teaser ---- */
.teaser{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(44px,7vw,120px);align-items:start}
.pull{font:italic 500 clamp(28px,3.6vw,50px)/1.25 var(--serif)}
.pull b{color:var(--accent);font-weight:500}
.txt p{margin-bottom:18px;opacity:.85;font-size:15.5px}

/* ---- stats ---- */
.stats{display:flex;gap:clamp(28px,6vw,90px);flex-wrap:wrap}
.stat b{font:600 clamp(54px,7vw,110px)/1 var(--serif);color:var(--accent)}
.stat span{display:block;font:10px var(--mono);letter-spacing:.26em;text-transform:uppercase;margin-top:8px;opacity:.65}

/* ---- subpage hero ---- */
.p-hero{padding:clamp(160px,22vh,260px) clamp(20px,6vw,96px) 60px;color:var(--paper)}
.p-hero.dark{background:var(--ink)}
.p-hero h1{font:600 clamp(46px,8.5vw,132px)/1 var(--serif);letter-spacing:-.02em;margin-top:22px}
.p-hero h1 em{color:var(--accent)}
.p-hero .lede{margin-top:26px}

/* ---- atlas stage ---- */
.ui-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.toggle{display:inline-flex;border:1.5px solid var(--linelt);border-radius:999px;overflow:hidden}
.toggle button{border:0;background:transparent;padding:12px 24px;font:700 11px var(--mono);letter-spacing:.14em;color:var(--paper);opacity:.6;transition:.25s}
.toggle button.on{background:var(--accent);opacity:1}
.axl{display:inline-flex;align-items:center;gap:8px;font:10px var(--mono);letter-spacing:.14em;opacity:.7;text-transform:uppercase}
select{border:1.5px solid var(--linelt);background:var(--ink);color:var(--paper);border-radius:999px;padding:10px 16px;font:12px var(--mono)}
.stage-wrap{position:relative;height:clamp(480px,72vh,760px);border:1.5px solid var(--linelt);border-radius:10px;overflow:hidden;background:var(--ink2)}
.stage-wrap canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.tip{position:absolute;display:none;pointer-events:none;background:var(--accent);color:#fff;padding:8px 14px;
 font:11px var(--mono);letter-spacing:.06em;border-radius:3px;white-space:nowrap;z-index:6;transform:translate(16px,-140%)}
.tip b{font-weight:700}
.hint{font:10.5px var(--mono);letter-spacing:.14em;opacity:.5;text-align:right;margin-top:10px;text-transform:uppercase}
.legend{display:flex;gap:10px;flex-wrap:wrap}

/* how to read strip */
.readstrip{border-top:1.5px solid var(--linelt);border-bottom:1.5px solid var(--linelt);padding:30px 0;margin-top:56px;
 display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,60px)}
.readstrip h4{font:italic 500 24px var(--serif);margin-bottom:10px}
.readstrip p{font-size:13.5px;opacity:.8}
.readstrip ul{list-style:none;font:12px var(--mono);line-height:2.1;opacity:.8}
.readstrip ul li::before{content:"— ";color:var(--accent)}

/* ---- dimension cards ---- */
.dimgrid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1.5px solid var(--line);border-left:1.5px solid var(--line)}
.dimc{border-right:1.5px solid var(--line);border-bottom:1.5px solid var(--line);padding:clamp(26px,3vw,44px);position:relative;transition:.3s;background:transparent}
.dimc:hover{background:var(--ink);color:var(--paper)}
.dimc .dn{font:italic 600 40px var(--serif);color:var(--accent)}
.dimc h4{font:600 clamp(20px,2vw,27px) var(--serif);margin:10px 0 4px}
.dimc .poles{font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin-bottom:14px}
.dimc .poles em{color:var(--accent);padding:0 8px}
.dimc .q{font:italic 500 17px/1.5 var(--serif)}
.dimc p.d{font-size:13.5px;opacity:.85;margin-top:10px}
.dimc .o{font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.55;margin-top:14px}
@media(max-width:900px){.dimgrid{grid-template-columns:1fr}}

/* ---- compare ---- */
.cmp-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.cmp-controls input{flex:1;min-width:220px;border:1.5px solid var(--line);background:transparent;border-radius:999px;
 padding:13px 20px;font:13px var(--mono);color:inherit}
.cmp-controls input:focus{outline:none;border-color:var(--accent)}
.fchips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.fchips .lbl{font:10px var(--mono);letter-spacing:.2em;opacity:.55;align-self:center;margin-right:4px;text-transform:uppercase}
.results{display:flex;gap:8px;flex-wrap:wrap;padding:18px 0;border-top:1.5px solid var(--line)}
.results .chip.off{opacity:.28;pointer-events:none}
.sel-slots{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:8px 0 26px}
.slot{display:inline-flex;align-items:center;gap:12px;font:600 16px var(--serif);border:1.5px solid var(--accent);
 background:var(--accent);color:#fff;border-radius:999px;padding:10px 12px 10px 20px}
.slot:nth-child(2){background:var(--ink);border-color:var(--ink)}
.slot:nth-child(3){background:#a97e2f;border-color:#a97e2f}
.slot button{border:0;background:rgba(255,255,255,.25);color:#fff;width:22px;height:22px;border-radius:50%;font:12px var(--mono)}
.slot.empty{background:transparent;border:1.5px dashed var(--line);color:inherit;font:11px var(--mono);letter-spacing:.16em;opacity:.5;text-transform:uppercase;padding:14px 22px}
.examples{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:34px}
.examples>span{font:10px var(--mono);letter-spacing:.2em;opacity:.55;text-transform:uppercase}
.cmp-viz{display:grid;grid-template-columns:minmax(340px,460px) 1fr;gap:clamp(30px,5vw,70px);align-items:start}
.cmp-viz canvas{width:100%;height:400px}
.cmp-empty{font:italic 500 22px var(--serif);opacity:.5;padding:60px 0;text-align:center;grid-column:1/-1}
table.ctab{width:100%;border-collapse:collapse;font:13px var(--mono)}
.ctab th{font:10px var(--mono);letter-spacing:.14em;text-transform:uppercase;text-align:left;opacity:.6;padding:8px 10px;border-bottom:1.5px solid var(--line)}
.ctab td{padding:10px;border-bottom:1px dashed var(--line)}
.ctab td:first-child{font-family:var(--sans);font-weight:600}
.ctab .pos{color:var(--accent);font-weight:700}
.ctab .neg{opacity:.65}
.ctab .spread{color:var(--accent)}
.dist{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.dist .chip{pointer-events:none}

/* ---- findings ---- */
.finding{display:grid;grid-template-columns:minmax(160px,230px) 1fr 1.3fr;gap:clamp(22px,4vw,64px);padding:44px 0;border-top:1.5px solid var(--linelt)}
.finding:last-of-type{border-bottom:1.5px solid var(--linelt)}
.f-tag{font:italic 500 22px var(--serif);color:var(--accent)}
.f-pair{font:600 clamp(24px,2.8vw,40px)/1.2 var(--serif)}
.f-pair span{display:block;font:11px var(--mono);letter-spacing:.14em;opacity:.55;margin-top:10px;text-transform:uppercase}
.finding p{font-size:14px;opacity:.8}
@media(max-width:900px){.finding{grid-template-columns:1fr}}

/* ---- pair rail ---- */
.rail{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 6px 30px;scrollbar-width:thin}
.pcard{min-width:min(660px,92vw);scroll-snap-align:start;border:1.5px solid var(--line);background:var(--paper);padding:clamp(24px,3vw,40px)}
.pc-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ava{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
 font:600 22px var(--serif);background:var(--accent);color:#fff;flex:none}
.ava.b{background:var(--ink);color:var(--paper)}
.pc-head h4{font:600 clamp(24px,2.6vw,36px)/1.1 var(--serif)}
.pc-head h4 em{color:var(--accent);padding:0 10px}
.pc-q{font:italic 500 17px var(--serif);opacity:.7;margin:12px 0 14px}
.pcard canvas{width:100%;height:250px;display:block;margin:6px 0 16px}
.pc-rev{border-left:4px solid var(--accent);padding:6px 0 6px 18px;font:italic 500 16.5px/1.6 var(--serif);margin-bottom:14px}
.pcard>p:last-child{font-size:13.5px;opacity:.8}

/* ---- cross dialogues ---- */
.cross{border-top:1.5px solid var(--linelt);padding:clamp(44px,5.5vw,72px) 0;display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(30px,5vw,90px)}
.cross:last-of-type{border-bottom:1.5px solid var(--linelt)}
.cross h3{font:600 clamp(28px,3.6vw,48px)/1.15 var(--serif);margin-bottom:14px}
.cross h3 em{color:var(--accent)}
.c-q{font:italic 500 15.5px/1.6 var(--serif);opacity:.7;margin-bottom:6px}
.c-sub{font:11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.cross p{font-size:15px;opacity:.85;margin-bottom:14px}
.c-rev{font:italic 500 17px/1.6 var(--serif);border-left:3px solid var(--accent);padding-left:18px;margin-top:18px}
@media(max-width:900px){.cross{grid-template-columns:1fr}}

/* ---- method ---- */
.method{max-width:860px}
.method p{margin-bottom:18px;font-size:15.5px;opacity:.85}
.mnotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5px;background:var(--line);border:1.5px solid var(--line);margin-top:40px}
.mnotes div{background:var(--paper2);padding:28px;font-size:13px;opacity:.9}
.mnotes b{display:block;font:italic 500 16px var(--serif);margin-bottom:8px}

/* ---- lessons ---- */
.lesson{border-top:1.5px solid var(--line)}
.lesson summary{display:grid;grid-template-columns:74px 1fr auto;gap:20px;align-items:baseline;padding:28px 0;cursor:pointer;list-style:none}
.lesson summary::-webkit-details-marker{display:none}
.l-num{font:italic 600 24px var(--serif);color:var(--accent)}
.lesson h4{font:600 clamp(21px,2.2vw,29px) var(--serif)}
.l-eq{font:italic 400 13.5px var(--serif);opacity:.6;text-align:right;max-width:340px}
.l-body{padding:0 0 40px 94px;max-width:900px}
.l-body h5{font:10px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:20px 0 8px}
.l-body p{opacity:.85;font-size:14.5px;margin-bottom:8px}
.l-body ul{list-style:none;margin-bottom:8px}
.l-body ul li{padding:3px 0 3px 22px;position:relative;font-size:14px;opacity:.85}
.l-body ul li::before{content:"→";position:absolute;left:0;color:var(--accent)}
.l-take{border-left:4px solid var(--accent);padding:10px 0 10px 20px;font:italic 500 17px/1.6 var(--serif);margin:22px 0}
@media(max-width:900px){.l-body{padding-left:0}.lesson summary{grid-template-columns:54px 1fr}.l-eq{display:none}}

/* ---- essays / dialogue ---- */
.essay{border-top:1.5px solid var(--line);padding:clamp(34px,4.5vw,58px) 0;display:grid;grid-template-columns:80px 1.1fr 1fr;gap:clamp(20px,3vw,50px)}
.essay .e-num{font:italic 600 22px var(--serif);opacity:.4}
.essay h4{font:600 clamp(24px,2.6vw,36px)/1.2 var(--serif)}
.themes{font:10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-top:14px}
.essay .e-abs{font-size:14.5px;opacity:.85}
@media(max-width:900px){.essay{grid-template-columns:1fr}}
.dlg{border-top:1.5px solid var(--linelt);padding:clamp(38px,5vw,62px) 0;display:grid;grid-template-columns:80px 1.2fr 1fr;gap:clamp(20px,3vw,50px)}
.dlg h4{font:600 clamp(24px,2.6vw,36px)/1.2 var(--serif)}
.dlg .role{font:italic 400 14px var(--serif);opacity:.65;margin-top:8px}
.dlg p{font-size:14.5px;opacity:.85;margin-bottom:12px}
blockquote{border-left:3px solid var(--accent);padding-left:18px;font:italic 500 16.5px/1.7 var(--serif);margin:16px 0}
@media(max-width:900px){.dlg{grid-template-columns:1fr}}

/* ---- drawer / toast ---- */
.drawer{position:fixed;top:0;right:0;height:100%;width:min(480px,100%);background:var(--paper);color:var(--ink);
 border-left:2px solid var(--ink);z-index:180;transform:translateX(105%);transition:transform .55s cubic-bezier(.25,.8,.25,1);overflow-y:auto;padding:34px 32px 60px}
.drawer.open{transform:none;box-shadow:-40px 0 90px rgba(0,0,0,.35)}
.drawer-x{position:absolute;top:18px;right:20px;border:1.5px solid var(--ink);background:transparent;width:36px;height:36px;border-radius:50%;font:13px var(--mono)}
.d-kick{font:10px var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.drawer h3{font:600 40px/1.1 var(--serif)}
.d-en{font:italic 500 16px var(--serif);opacity:.6}
.d-note{font-size:13.5px;opacity:.8;margin:14px 0 18px;border-left:3px solid var(--mist);padding-left:14px}
#radar{width:100%;height:300px;display:block}
.brow{display:grid;grid-template-columns:150px 1fr 40px;gap:12px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line);font:11px var(--mono)}
.bn{letter-spacing:.04em;opacity:.7;text-transform:uppercase}
.btrack{position:relative;height:3px;background:rgba(37,44,35,.14)}
.btrack i{position:absolute;top:-2px;height:7px;border-radius:4px}
.bv{text-align:right;font-weight:700;color:var(--accent)}
.bv.n{color:var(--ink)}
#toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,90px);background:var(--ink);color:var(--paper);
 font:12px var(--mono);letter-spacing:.08em;padding:14px 26px;border-radius:999px;z-index:400;transition:.4s;display:flex;gap:10px;align-items:center}
#toast::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
#toast.show{transform:translate(-50%,0)}

/* ---- footer ---- */
.foot{background:var(--ink);color:var(--paper);padding:clamp(70px,9vw,130px) clamp(20px,4.5vw,72px) 40px;position:relative}
.foot h2{font:600 clamp(46px,8vw,130px)/1 var(--serif);letter-spacing:-.02em}
.foot h2 em{color:var(--accent)}
.foot .sub{font:italic 400 17px var(--serif);opacity:.6;margin-top:12px}
.foot-grid{display:flex;justify-content:space-between;gap:44px;flex-wrap:wrap;margin:56px 0 80px;font:12px var(--mono);letter-spacing:.08em;opacity:.75}
.foot-grid a{display:block;padding:5px 0;text-transform:uppercase}
.foot-grid a:hover{color:var(--accent)}
.copy{font:10px var(--mono);letter-spacing:.2em;opacity:.45;border-top:1px solid var(--linelt);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;text-transform:uppercase}

/* ---- reveal ---- */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s,transform .9s cubic-bezier(.2,.65,.2,1)}
.rv.in{opacity:1;transform:none}
@media(max-width:900px){
 .links{overflow-x:auto;max-width:60vw;scrollbar-width:none}
 .teaser{grid-template-columns:1fr}
 .cmp-viz{grid-template-columns:1fr}
 .readstrip{grid-template-columns:1fr}
 .prow{grid-template-columns:60px 1fr 50px}.prow p{display:none}
}

/* ---- 图例修复：浅底胶囊，让彩色圆点清晰可辨 ---- */
#legend .chip{background:rgba(244,241,232,.07);border-color:var(--linelt);color:var(--paper)}
#legend .chip:not(.on){opacity:.4}
#legend .chip.on{background:var(--paper);border-color:var(--paper);color:var(--ink)}
/* ---- 所有 chip 圆点加描边，浅色圆点在浅色背景上也能看清 ---- */
.chip i{box-shadow:0 0 0 1.5px rgba(37,44,35,.28)}
#legend .chip i{box-shadow:0 0 0 2px rgba(244,241,232,.85)}
#legend .chip.on i{box-shadow:0 0 0 2px var(--ink)}