body{margin:0;font-size:14px;font-family:system-ui}img{max-width:100%}[hidden]{display:none!important}


:root{
  color-scheme:light;
  --paper:#f2f0eb; --paper-2:#e9e6df; --ink:#121212; --ink-2:#4b4b48; --ink-3:#8a8984; --rule:#d4d1c8; --rule-2:#b9b6ad;
  --noise:#c46a24; --noise-soft:rgba(196,106,36,.10); --noise-line:rgba(196,106,36,.55);
  --weight:#3d6b46; --weight-soft:rgba(61,107,70,.10); --weight-line:rgba(61,107,70,.55);
  --g1:#c9c7bf; --g2:#a8a69e; --g3:#7d7c76; --g4:#4f4e4a;
  --glass:rgba(242,240,235,.55);
    
  --img-op:.10;
  --fd:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif; --fb:"Libre Franklin","Franklin Gothic","Helvetica Neue",Arial,sans-serif; --fm:"Libre Franklin","Franklin Gothic","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#0e0e0e; --paper-2:#161616; --ink:#ececea; --ink-2:#b5b4af; --ink-3:#7c7b76; --rule:#2a2a28; --rule-2:#3c3c39;
    --noise:#d98a44; --noise-soft:rgba(217,138,68,.12); --noise-line:rgba(217,138,68,.6);
    --weight:#7fbf8a; --weight-soft:rgba(127,191,138,.12); --weight-line:rgba(127,191,138,.6);
    --g1:#3a3a38; --g2:#5a5a57; --g3:#8a8985; --g4:#bcbbb5;
    --glass:rgba(14,14,14,.55);
    --img-op:.06;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0e0e0e; --paper-2:#161616; --ink:#ececea; --ink-2:#b5b4af; --ink-3:#7c7b76; --rule:#2a2a28; --rule-2:#3c3c39;
  --noise:#d98a44; --noise-soft:rgba(217,138,68,.12); --noise-line:rgba(217,138,68,.6);
  --weight:#7fbf8a; --weight-soft:rgba(127,191,138,.12); --weight-line:rgba(127,191,138,.6);
  --g1:#3a3a38; --g2:#5a5a57; --g3:#8a8985; --g4:#bcbbb5;
  --glass:rgba(14,14,14,.55);
  --img-op:.06;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--fb);font-size:17px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important} .lens{transform:none!important;opacity:1!important;filter:none!important} .glass{display:none}}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--rule-2)}
a:hover{text-decoration-color:var(--ink)}
a:focus-visible,button:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
h1,h2,h3{font-family:var(--fd);font-weight:400;margin:0;line-height:1.05;text-wrap:balance;letter-spacing:-.005em}
h1{font-size:clamp(46px,7.4vw,112px);font-variation-settings:"opsz" 96}
h2{font-size:clamp(34px,4.6vw,64px);font-variation-settings:"opsz" 72}
h3{font-size:clamp(22px,2.2vw,28px);font-variation-settings:"opsz" 36}
p{margin:0 0 1.15em}
.mono{font-family:var(--fm);font-size:12px;letter-spacing:.02em;color:var(--ink-2)}
.mono.up{letter-spacing:.03em;font-size:12px;color:var(--ink-3)}
.wrap{max-width:1140px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.prose{max-width:62ch;font-size:clamp(17px,1.35vw,19px)}
.prose.big{font-size:clamp(19px,1.7vw,23px);line-height:1.5;font-weight:300;max-width:56ch}
.prose.big strong{font-weight:500}
sup.n{font-family:var(--fm);font-size:.55em;color:var(--ink-3);margin-left:2px;vertical-align:.6em}
sup.n a{text-decoration:none}
.noise{color:var(--noise);font-weight:500}
.weight{color:var(--weight);font-weight:500}
.frag{font-family:var(--fd);font-style:italic;font-size:1.06em}
img{max-width:100%}

/* grain + glass */
#grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:70;opacity:.06;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");mix-blend-mode:multiply}
:root[data-theme="dark"] #grain{mix-blend-mode:screen;opacity:.08}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #grain{mix-blend-mode:screen;opacity:.08}}
.glass{position:fixed;left:0;right:0;height:11vh;pointer-events:none;z-index:60;backdrop-filter:blur(5px) saturate(1.15) brightness(1.02);-webkit-backdrop-filter:blur(5px) saturate(1.15) brightness(1.02)}
.glass.t{top:0;-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 45%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 45%,transparent 100%);background:linear-gradient(180deg,var(--glass),transparent 80%)}
.glass.b{bottom:0;-webkit-mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.6) 45%,transparent 100%);mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.6) 45%,transparent 100%);background:linear-gradient(0deg,var(--glass),transparent 80%)}
.glass::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent)}
.glass.t::after{bottom:0}.glass.b::after{top:0}
.lens{transform-origin:50% 50%;will-change:transform,opacity;transition:none}
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--ink);z-index:80}

/* site-wide back-to-home affordance, fixed upper-left on every page but the
   homepage. Dark pill with light text regardless of theme, so it stays
   legible over both a dark essay hero and the light paper background. */
.site-nav{position:fixed;top:max(16px,env(safe-area-inset-top) + 8px);left:max(16px,env(safe-area-inset-left) + 8px);z-index:200}
.site-nav a{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;background:rgba(16,16,15,.6);color:#f4f2ec;font-family:var(--fm);font-size:12px;letter-spacing:.03em;text-decoration:none;white-space:nowrap;border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px) saturate(1.2);-webkit-backdrop-filter:blur(6px) saturate(1.2);box-shadow:0 2px 10px rgba(0,0,0,.18);transition:background .2s ease,transform .2s ease}
.site-nav a:hover{background:rgba(16,16,15,.82)}
.site-nav a:active{transform:translateY(1px)}
.site-nav a:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:520px){.site-nav a{padding:8px 12px;font-size:11px}}


/* energy tags */
.tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--fm);font-size:13px;letter-spacing:.01em;color:var(--ink-2)}
.tag::before{display:none}
.key-dot{width:10px;height:10px;border-radius:50%;cursor:pointer;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.key-dot:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tag.n{color:var(--noise)}.tag.w{color:var(--weight)}

/* hero */
#hero{position:relative;min-height:88vh;display:grid;align-items:end;overflow:hidden;background:#0a0a0a;color:#ececea}
#hero .art{position:absolute;inset:0;background-size:cover;background-position:center 100%;filter:grayscale(1) contrast(1.08);opacity:.62;transform:scale(1.04);will-change:transform}
#hero .art.color{filter:none;opacity:0;transition:opacity 1.2s ease}
#hero.on .art.color{opacity:.55}
#hero .fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.15),rgba(10,10,10,.05) 40%,rgba(10,10,10,.92) 100%)}
#hero canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#hero .wrap{position:relative;padding-top:24vh;padding-bottom:56px;width:100%}
#hero h1{max-width:12ch;color:#f4f2ec}
#hero h1 .d{position:relative;display:inline-block;white-space:nowrap}
#hero h1 .d svg{position:absolute;left:-4%;right:-4%;bottom:-.08em;width:108%;height:.42em;overflow:visible}
#hero h1 .d path{fill:none;stroke:#f4f2ec;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 1.1s .5s cubic-bezier(.6,0,.2,1) forwards;opacity:.92}
@keyframes draw{to{stroke-dashoffset:0}}
#hero .by{margin-top:26px;font-family:var(--fm);font-size:12px;letter-spacing:.08em;color:#c9c7bf;display:flex;gap:26px;flex-wrap:wrap}
@media (max-width:700px){#hero .art{opacity:.4;background-position:70% 100%}#hero.on .art.color{opacity:.3}}
#hero .sub{font-family:var(--fd);font-style:italic;font-size:clamp(20px,2.4vw,30px);max-width:26ch;margin:22px 0 0;color:#dedcd5;line-height:1.25}

/* interlude */
.interlude{padding:clamp(56px,10vh,120px) 0;border-bottom:1px solid var(--rule);position:relative;isolation:isolate}
.interlude::before{content:"";position:absolute;inset:-20px;z-index:-1;background-image:var(--addl);background-repeat:no-repeat;background-position:48% 42%;background-size:230%;opacity:var(--img-op);filter:blur(4px) saturate(.8)}
.interlude .prose{font-family:var(--fd);font-size:clamp(22px,2.6vw,34px);line-height:1.3;max-width:34ch;font-weight:400}
.interlude .prose p{margin:0 0 .6em}
.interlude .where{font-family:var(--fd);font-style:italic;font-size:14px;letter-spacing:.01em;color:var(--ink-3);margin-bottom:22px}

/* chapters */
.ch{padding:clamp(64px,9vh,110px) 0 40px;border-bottom:1px solid var(--rule)}
.ch.n,.ch.w,.ch.nw{position:relative;isolation:isolate}
.ch.n::before,.ch.w::before,.ch.nw::before{content:"";position:absolute;inset:-20px;z-index:-1;background-repeat:no-repeat;opacity:var(--img-op);filter:blur(4px) saturate(.8)}
#noise::before{background-image:var(--bg1);background-position:14% 65%;background-size:200%}
#weight::before{background-image:var(--bg2);background-position:20% 30%;background-size:210%}
#thesis::before{background-image:var(--bg3);background-position:60% 85%;background-size:230%}
#meet::before{background-image:var(--bg4);background-position:82% 8%;background-size:190%}
#close::before{background-image:var(--bg5);background-position:50% 40%;background-size:220%}
/* the Daisy Sessions section carries its own texture over the continuous span */
#sessions{position:relative;isolation:isolate}
#sessions::before{content:"";position:absolute;inset:-20px;z-index:-1;background-image:var(--bg8);background-repeat:no-repeat;background-position:40% 30%;background-size:210%;opacity:var(--img-op);filter:blur(4px) saturate(.8)}
/* one continuous bg stretched across the paper → theory → tracks span */
.bgspan{position:relative;isolation:isolate}
.bgspan::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--bg7);background-repeat:no-repeat;background-position:center;background-size:100% 100%;opacity:var(--img-op);filter:blur(4px) saturate(.8)}
.chhead{display:grid;gap:16px;max-width:900px;margin-bottom:38px}
.chhead .lede{font-family:var(--fd);font-style:italic;font-size:clamp(20px,2vw,25px);color:var(--ink-2);line-height:1.35;max-width:44ch}

/* opener: art with riding text */
.opener{position:relative;height:135vh;background:#0a0a0a;color:#ececea}
.opener .stage{position:sticky;top:0;height:100vh;overflow:hidden}
.opener .art{position:absolute;inset:-10% 0;background-size:cover;background-position:center;will-change:transform;filter:contrast(1.05)}
.opener .art.bw{filter:grayscale(1) contrast(1.1)}
.opener .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.85) 0%,rgba(10,10,10,.45) 45%,rgba(10,10,10,.1) 100%)}
.opener .box{position:absolute;left:clamp(18px,6vw,80px);bottom:12vh;max-width:min(560px,86vw);will-change:transform}
.opener .box h2{color:#f4f2ec;font-size:clamp(38px,5.6vw,80px)}
.opener .box p{color:#dedcd5;font-size:clamp(17px,1.5vw,20px);max-width:44ch;margin-top:18px;font-weight:300}
.opener .box .tag{color:#c9c7bf}
.opener .box .tag.n{color:var(--noise)} .opener .box .tag.w{color:var(--weight)}
.opener .cap{position:absolute;right:clamp(18px,4vw,40px);bottom:18px;font-family:var(--fm);font-size:12px;letter-spacing:.01em;color:#a9a7a0}

/* big figure strip */
.figs{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:34px 0}
.figs .f{padding:22px 16px 18px;border-right:1px solid var(--rule);position:relative}
.figs .f:last-child{border-right:0}
.figs .f .v{font-family:var(--fd);font-size:clamp(30px,4.6vw,64px);line-height:1;font-variation-settings:"opsz" 72;font-variant-numeric:tabular-nums;color:var(--ink-3)}
.figs .f.hi .v{color:var(--ink)}
.figs .f .l{font-family:var(--fm);font-size:12.5px;letter-spacing:0;color:var(--ink-3);margin-top:10px}
.figs .f.hi .l{color:var(--ink-2)}
.figs .f .eq{position:absolute;right:-13px;top:50%;transform:translateY(-50%);font-family:var(--fd);font-size:28px;color:var(--noise);background:var(--paper);padding:0 2px;z-index:2}
@media (max-width:720px){.figs{grid-template-columns:repeat(5,minmax(120px,1fr));overflow-x:auto}}
.bigcompare{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(12px,3vw,40px);margin:24px 0 8px}
.bigcompare .v{font-family:var(--fd);font-size:clamp(72px,14vw,200px);line-height:.95;font-variation-settings:"opsz" 96;font-variant-numeric:tabular-nums}
.bigcompare .v small{display:block;font-family:var(--fm);font-size:13px;letter-spacing:.01em;color:var(--ink-2);margin-top:12px}
.bigcompare .eq{font-family:var(--fd);font-size:clamp(48px,8vw,120px);color:var(--noise);line-height:1}
.bigcompare .r{text-align:right}

/* charts (no cards) */
.fig{border-top:1px solid var(--rule-2);padding-top:12px;margin:26px 0 8px}
.fig .t{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline;margin-bottom:12px}
.fig .t b{font-family:var(--fb);font-weight:600;font-size:14px}
.fig .t span{font-family:var(--fm);font-size:11.5px;color:var(--ink-3);letter-spacing:.02em}
.fig svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--fm)}
.fig svg text{fill:var(--ink-2);font-size:11px}
.fig svg text.v{fill:var(--ink);font-weight:500;font-family:var(--fb);font-size:12px}
.fig svg text.ax{fill:var(--ink-3);font-size:10.5px}
.fig svg text.big{font-family:var(--fd);font-size:22px;fill:var(--ink)}
.fig svg .grid{stroke:var(--rule);stroke-width:1}
.fig svg .axis{stroke:var(--rule-2);stroke-width:1}
.hit{cursor:crosshair}.hit:focus{outline:none}.hit:focus-visible{stroke:var(--ink);stroke-width:2px}
.sm{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 32px;border-top:1px solid var(--rule-2)}
.sm .cell{padding:16px 0 12px;border-bottom:1px solid var(--rule)}
.sm .cell h5{font-family:var(--fb);font-weight:600;font-size:13px;margin:0 0 2px}
.sm .cell .cap{font-family:var(--fm);font-size:11px;color:var(--ink-3);margin:0 0 8px}
.sm .cell svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--fm)}
.sm .cell svg text{fill:var(--ink-2);font-size:10.5px}
.sm .cell svg .grid{stroke:var(--rule)}.sm .cell svg .axis{stroke:var(--rule-2)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(28px,5vw,64px);align-items:start}
.two.rev{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
@media (max-width:900px){.two,.two.rev{grid-template-columns:1fr}}
.stick{position:sticky;top:12vh}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--fm);font-size:11px;color:var(--ink-2);margin:10px 0 0}
.legend i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}

/* tooltip panel */
#tip{position:fixed;pointer-events:none;background:var(--ink);color:var(--paper);font-family:var(--fb);font-size:12.5px;line-height:1.45;padding:14px 14px 12px;max-width:min(420px,92vw);opacity:0;transition:opacity .1s;z-index:90;border:1px solid rgba(255,255,255,.12)}
#tip::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--noise),var(--weight))}
#tip h6{margin:0 0 6px;font-family:var(--fd);font-weight:400;font-size:17px;line-height:1.1}
#tip .k{font-family:var(--fm);font-size:11.5px;letter-spacing:0;opacity:.7;margin:8px 0 4px}
#tip table{border-collapse:collapse;width:100%;font-size:12px}
#tip td{padding:2px 8px 2px 0;vertical-align:top;border-top:1px solid rgba(255,255,255,.1)}
#tip td.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
#tip td.h{font-weight:600}
#tip .words{font-family:var(--fm);font-size:11px;opacity:.85;line-height:1.5}
#tip .bar{display:inline-block;height:6px;background:var(--paper);opacity:.7;vertical-align:middle;margin-right:6px}

/* controls */
.picker{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);margin:0 0 20px}
.picker button{font-family:var(--fm);font-size:11.5px;letter-spacing:.04em;padding:10px 12px;border:0;background:transparent;color:var(--ink-3);cursor:pointer;min-height:38px;border-bottom:2px solid transparent}
.picker button:hover{color:var(--ink)}
.picker button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--weight)}
select{font:inherit;font-family:var(--fm);font-size:12px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule-2);padding:6px 0;min-height:34px}
.songlist{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-family:var(--fm);font-size:12px}
.songlist li{display:grid;grid-template-columns:130px 1fr auto;gap:10px;align-items:center}
.songlist .bar{height:6px;background:var(--weight)}
.songlist .n{color:var(--ink-3);font-variant-numeric:tabular-nums}

/* tables */
.tblwrap{overflow:auto;border-top:1px solid var(--rule-2)}
table.data{border-collapse:collapse;width:100%;font-family:var(--fm);font-size:12px}
table.data th,table.data td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--rule);vertical-align:top;white-space:nowrap}
table.data th{font-weight:500;font-size:12px;letter-spacing:0;color:var(--ink-3);background:var(--paper);position:sticky;top:0;cursor:pointer;user-select:none}
table.data th:hover{color:var(--ink)}
table.data th[aria-sort]::after{content:" ↓";color:var(--ink)} table.data th[aria-sort="ascending"]::after{content:" ↑"}
table.data td.num,table.data th.num{text-align:right;font-variant-numeric:tabular-nums}
table.data tr.d td{background:var(--paper-2)}
table.data tbody tr:hover td{color:var(--ink);background:var(--paper-2)}
table.ledger{border-collapse:collapse;width:100%;font-size:14px;font-family:var(--fb)}
table.ledger td{padding:12px 14px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
table.ledger td:first-child{width:30%;font-weight:500}
table.ledger td:nth-child(2){width:12%;font-family:var(--fm);font-size:12.5px;letter-spacing:0}
.v-yes{color:var(--ink)} .v-part{color:var(--noise)} .v-no{color:var(--ink-3);text-decoration:line-through}
details{border-top:1px solid var(--rule-2);padding:14px 0}
details summary{cursor:pointer;font-family:var(--fd);font-size:clamp(22px,2.4vw,30px);list-style:none;display:flex;justify-content:space-between;align-items:baseline}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-family:var(--fm);font-size:18px;color:var(--ink-3)}
details[open] summary::after{content:"–"}
details .in{padding-top:18px}

/* album strip in charts */
.artdot{width:22px;height:22px;object-fit:cover;display:block}
.refs{font-family:var(--fb);font-size:13.5px;line-height:1.55;color:var(--ink-2);columns:2;column-gap:40px}
.refs ol{margin:0;padding-left:22px}.refs li{break-inside:avoid;margin-bottom:8px}
@media (max-width:760px){.refs{columns:1}}
footer{padding:48px 0 80px;font-family:var(--fm);font-size:11.5px;color:var(--ink-3);line-height:1.6}
/* a way out of an essay: every piece ends with the road back */
.foot-nav{display:inline-flex;flex-wrap:wrap;gap:0 22px;margin-top:10px}
.foot-nav a{text-decoration:none;border-bottom:1px solid var(--rule-2);padding-bottom:2px}
.foot-nav a:hover{border-bottom-color:var(--ink);color:var(--ink)}
.rank-foot{padding:44px 0 72px;border-top:1px solid var(--rule);font-family:var(--fm);font-size:11.5px;
  color:var(--ink-3);line-height:1.6}
.rank-foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.rank-foot em{font-style:italic}
.thanks-nav{margin-top:38px;font-family:var(--fm);font-size:12px;letter-spacing:.05em;text-transform:uppercase}

.photo{position:relative;overflow:hidden}
.photo img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1)}
.photo .cap{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;font-family:var(--fm);font-size:11px;letter-spacing:.06em;color:#dedcd5;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent)}
.strip{display:grid;grid-template-columns:1.5fr 1fr;gap:2px;margin:36px 0}
.strip .photo{min-height:280px}
@media (max-width:760px){.strip{grid-template-columns:1fr}}
.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;margin:30px 0}
.timeline .al{position:relative;aspect-ratio:1;overflow:hidden;background:#111}
.timeline .al img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.85) contrast(1.05);transition:filter .5s}
.timeline .al.d img,.timeline .al:hover img{filter:none}
.timeline .al .m{position:absolute;left:0;right:0;bottom:0;padding:10px;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);color:#ececea;font-family:var(--fm);font-size:10.5px;letter-spacing:.04em;line-height:1.5}
.timeline .al .m b{display:block;font-family:var(--fd);font-size:14px;font-weight:400;letter-spacing:0;margin-bottom:2px}
.timeline .al .q{position:absolute;inset:0;padding:12px;font-family:var(--fd);font-style:italic;font-size:clamp(12px,1.25vw,16px);color:#f4f2ec;background:rgba(0,0,0,.55);opacity:0;transition:opacity .3s;line-height:1.3;display:flex;align-items:flex-start}
.timeline .al:hover .q,.timeline .al:focus-within .q{opacity:1}
@media (max-width:720px){.timeline{grid-template-columns:repeat(2,1fr)}.timeline .al .q{opacity:1;background:rgba(0,0,0,.35)}}

/* horizontal reel */
.reel{position:relative;height:260vh;background:#0a0a0a}
.reel-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.reel-img{height:160vh;width:auto;max-width:none;display:block;will-change:transform;filter:contrast(1.03)}
.reel-fade{position:absolute;top:0;bottom:0;width:14vw;pointer-events:none;z-index:2}
.reel-fade.l{left:0;background:linear-gradient(90deg,#0a0a0a,transparent)}
.reel-fade.r{right:0;background:linear-gradient(-90deg,#0a0a0a,transparent)}
.reel-cap{position:absolute;left:clamp(18px,6vw,80px);bottom:10vh;max-width:420px;color:#f4f2ec;z-index:3;background:rgba(10,10,10,.6);padding:18px 20px;backdrop-filter:blur(6px) saturate(1.1);-webkit-backdrop-filter:blur(6px) saturate(1.1)}
.reel-cap p{color:#dedcd5;font-size:15px;line-height:1.5;margin:10px 0 0}
@media (max-width:700px){.reel{height:180vh}.reel-img{height:60vh}.reel-cap{max-width:80vw}}

/* ---------- inline media plates (flat, scroll-revealed) ---------- */
.plate{margin:38px 0;border-top:1px solid var(--rule-2);padding-top:14px}
.plate .t{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline;margin-bottom:12px}
.plate .t b{font-family:var(--fb);font-weight:600;font-size:14px}
.plate .t span{font-family:var(--fm);font-size:11.5px;color:var(--ink-3);letter-spacing:.02em}
.plate figure{margin:0}
.plate img{display:block;width:100%;height:auto;background:#0a0a0a}
.plate figcaption{font-family:var(--fm);font-size:11.5px;color:var(--ink-3);letter-spacing:.02em;margin-top:10px;line-height:1.5}
.plate.narrow figure{max-width:560px;margin:0 auto}
.plate.color img{background:transparent}
.plate.frame img{border:1px solid var(--rule-2)}

/* ---------- citation popover ----------
   Every citation on every essay opens here, beside the sentence it belongs
   to. Nothing scrolls the reader to the end matter; see /assets/js/cite.js. */
sup.n a{cursor:pointer;text-decoration:none;border-bottom:1px solid transparent;padding:0 .5px;
  border-radius:2px;transition:background .18s ease,color .18s ease}
sup.n a.is-cite:hover,sup.n a.is-cite:focus-visible{background:var(--noise-soft);color:var(--noise)}
sup.n a:focus-visible{outline:2px solid var(--noise);outline-offset:1px}
sup.n a[aria-expanded="true"]{background:var(--noise-soft);color:var(--noise)}

#cite-pop{position:absolute;z-index:95;max-width:min(360px,92vw);background:var(--paper);color:var(--ink);
  border:1px solid var(--rule-2);box-shadow:0 14px 44px rgba(0,0,0,.30);padding:18px 18px 15px;
  font-family:var(--fb);font-size:13px;line-height:1.55;
  opacity:0;transform:translateY(-4px);transition:opacity .16s ease,transform .16s ease}
#cite-pop.above{transform:translateY(4px)}
#cite-pop.on{opacity:1;transform:translateY(0)}
#cite-pop::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--noise),var(--weight))}
#cite-pop.is-note::before{background:var(--ink-3)}
#cite-pop .cite-n{font-family:var(--fm);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin:0 34px 8px 0}
#cite-pop .cite-body{color:var(--ink-2)}
#cite-pop.is-note .cite-body{font-style:italic;color:var(--ink)}
#cite-pop .cite-body a{color:var(--ink);text-decoration-color:var(--rule-2)}
#cite-pop .cite-body a:hover{text-decoration-color:var(--ink)}
#cite-pop .cite-x{position:absolute;top:7px;right:9px;width:30px;height:30px;border:0;background:none;
  font-size:20px;line-height:1;cursor:pointer;color:var(--ink-3);padding:0}
#cite-pop .cite-x:hover{color:var(--ink)}
@media (prefers-reduced-motion:reduce){#cite-pop{transition:none}}

/* Home / essays index lives in /assets/css/home.css (scoped to .home-page). */

/* Daisy's floating cutouts (drumhead, dog) and tab sheets live in /albums/daisy/daisy.css */

/* ---------- daisy: pillar cards (thesis breakup) ---------- */
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:38px 0}
.pillars .pillar{background:var(--paper);padding:26px 28px 30px}
.pillars .pillar .pn{font-family:var(--fd);font-size:clamp(28px,3.6vw,46px);line-height:1;color:var(--ink-3);opacity:.5;font-variant-numeric:tabular-nums;margin-bottom:8px}
.pillars .pillar .tag{margin-bottom:14px}
.pillars .pillar p{font-size:clamp(15.5px,1.25vw,17.5px);line-height:1.55;color:var(--ink-2);max-width:46ch;margin:0}
.pillars .pillar.n .pn{color:var(--noise);opacity:1}
.pillars .pillar.w .pn{color:var(--weight);opacity:1}
@media (max-width:720px){.pillars{grid-template-columns:1fr}}