:root{
  --paper:#FFFFFF; --paper-2:#F4F0F4; --ink:#2A1B2D; --ink-2:#4E3D52; --ink-3:#7F7083;
  --rule:#E5DDE5; --gold:#C9A14A; --gold-ink:#9A7424; --blue:#3A2A4A;
  --measure:38rem; --gutter:clamp(1.25rem,4vw,3.5rem);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pencil:#6E2E66;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
html[data-theme="dark"]{--paper:#17101B;--paper-2:#221929;--ink:#F0E8F0;--ink-2:#CBBFCC;--ink-3:#948796;--rule:#352A39;--gold:#D9B35E;--gold-ink:#E4C274;--blue:#B9A6D0;--pencil:#D4A1CF}
html{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
.marg{font-family:var(--mono);font-size:.78rem;letter-spacing:.01em;color:var(--pencil)}
.marg.quiet{color:var(--ink-3)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:1.125rem;line-height:1.6;font-optical-sizing:auto;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration-color:var(--gold);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-color:currentColor}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--gold);color:#2A1B2D}

/* ---------- frame: the whole site reads like one long script page ---------- */
.frame{max-width:72rem;margin:0 auto;padding:0 var(--gutter)}
/* guide: a sticky strip that tells you where you are */
.guide{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);margin:0 calc(-1*var(--gutter));padding:0 var(--gutter)}
.guide .row{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:3.2rem}
.guide .brand{font-family:var(--serif);font-size:1.15rem;font-weight:500;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.guide .brand em{font-style:italic;color:var(--gold-ink);font-weight:400;font-size:.9rem;margin-left:.35rem}
.guide .steps{display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:none;font-family:var(--mono);font-size:.74rem}
.guide .steps::-webkit-scrollbar{display:none}
.guide .steps a{text-decoration:none;color:var(--ink-3);padding:.35rem .55rem;border-radius:2px;white-space:nowrap;position:relative}
.guide .steps a:hover{color:var(--ink)}
.guide .steps a.on{color:var(--pencil)}
.guide .steps a.on::before{content:"";position:absolute;left:.55rem;right:.55rem;bottom:-.05rem;height:1px;background:var(--pencil)}
.guide .toggle{font-family:var(--mono);font-size:.74rem;color:var(--ink-3);background:none;border:1px solid var(--rule);border-radius:999px;padding:.3rem .7rem;cursor:pointer;white-space:nowrap}
.guide .toggle:hover{color:var(--ink);border-color:var(--ink-3)}
.guide .bar{height:1px;background:var(--pencil);width:0;transition:width .15s linear;margin:0 calc(-1*var(--gutter))}
.guide .here{font-family:var(--mono);font-size:.74rem;color:var(--ink-3);display:none}
.guide .here{display:none}
@media(max-width:60rem){.guide .row{gap:.6rem}.guide .steps{flex:1;min-width:0;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,#000 85%,transparent)}}
@media (prefers-reduced-motion:reduce){.guide .bar{transition:none}}

/* ---------- hero: one full fold, composed like a plate ---------- */
.hero{display:flex;flex-direction:column;padding:1.6rem 0 0}
.hero-mid{padding:clamp(2.5rem,7vh,5rem) 0 clamp(2rem,5vh,3.5rem)}
.hero-top{display:flex;justify-content:space-between;gap:1rem;padding-bottom:1.1rem;border-bottom:1px solid var(--rule)}
.hero h1 i{font-style:italic;font-weight:300;color:var(--gold-ink)}
.hero-index{border-top:1px solid var(--rule);padding-top:.4rem;display:grid;grid-template-columns:1fr}
@media(min-width:60rem){.hero-index{grid-template-columns:1fr;max-width:46rem}}
.hero-index a{display:grid;grid-template-columns:1.6rem 7.5rem 1fr;gap:0 .6rem;align-items:baseline;padding:.45rem 0;border-bottom:1px solid var(--rule);text-decoration:none}
.hero-index a:hover .t{text-decoration:underline;text-decoration-color:var(--gold)}
.hero-index .n{font-family:var(--mono);font-size:.74rem;color:var(--pencil)}
.hero-index .t{font-size:1.05rem}
.hero-index .d{font-family:var(--sans);font-size:.85rem;color:var(--ink-3);line-height:1.4}
@media(max-width:44rem){.hero-index a{grid-template-columns:1.6rem 1fr}.hero-index .d{grid-column:2}}

/* Size the masthead to its column so the title stays on one line. */
.hero-mid{container-type:inline-size}
.hero h1{
  font-size:min(6.4vw,5.75rem);
  font-size:min(7.65cqi,5.75rem);
  line-height:1.06;
  letter-spacing:-.045em;
  font-weight:400;
  margin:0 0 1.6rem;
  white-space:nowrap;
}
.hero p.lead{font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.45;color:var(--ink-2);max-width:40rem;margin:0 0 1.8rem}
.hero .clip{display:flex;gap:.9rem;align-items:center;text-decoration:none;max-width:26rem}
.hero button.clip{cursor:pointer;background:none;border:0;padding:0;color:inherit;font:inherit;text-align:left}
.hero .clip-dialog{max-width:calc(100vw - 2rem);padding:.75rem;border:1px solid var(--rule);border-radius:5px;background:var(--paper);color:var(--ink)}
.hero .clip-dialog::backdrop{background:rgba(16,12,18,.78)}
.hero .clip-dialog form{display:flex;justify-content:flex-end;margin:0 0 .5rem}
.hero .clip-dialog button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.hero .clip-dialog.landscape .clip-player{width:min(56rem,calc(100vw - 4rem),calc((100dvh - 6rem) * 16 / 9));aspect-ratio:16/9}
.hero .clip-dialog.social .clip-player{width:min(34rem,calc(100vw - 4rem));height:min(38rem,calc(100dvh - 8rem));aspect-ratio:auto}
.hero .clip-dialog .clip-source{display:block;margin-top:.5rem;font-size:.85rem}
.hero .clip-dialog .clip-source[hidden]{display:none}
.hero .clip-player{display:block;width:min(20rem,calc(100vw - 4rem),calc((100dvh - 6rem) * .5625));aspect-ratio:9/16;border:0;border-radius:3px;background:var(--paper-2)}
.hero .clip .ph{flex:0 0 4.4rem;width:4.4rem;aspect-ratio:9/16;border-radius:3px;background:var(--paper-2);overflow:hidden;display:block}
.hero .clip img{width:100%;height:100%;object-fit:cover;display:block}
.hero .clip .tx{display:block;min-width:0}
.hero .clip .tx>span{display:block}
.hero .clip .t{font-size:1.05rem;line-height:1.3;margin:.15rem 0 .1rem}
.hero .clip .by{font-family:var(--sans);font-size:.82rem;color:var(--ink-3)}
.hero .clip:hover .t{text-decoration:underline;text-decoration-color:var(--gold)}
.hero .tee{margin:0;display:grid;gap:.5rem;font-family:var(--sans);font-size:.95rem;line-height:1.5;color:var(--ink-3)}
.hero .tee .wide{display:block;max-width:40rem;padding-bottom:.5rem;border-bottom:1px solid var(--rule)}
.hero .tee .deep{display:block;max-width:22rem;color:var(--ink-2)}
.hero .aside{font-family:var(--sans);font-size:.95rem;line-height:1.55;color:var(--ink-2);border-left:2px solid var(--pencil);padding-left:1.1rem;max-width:26rem}
.hero .marg{display:block;margin-bottom:1.2rem}
.hero .aside p{margin:0 0 .8rem}
.hero .aside a{text-decoration:none;border-bottom:1px solid var(--gold)}

/* ---------- sections ---------- */
section.block{padding:clamp(3rem,7vw,5.5rem) 0;border-top:1px solid var(--rule)}
.guide + section.block{border-top:0}
section.block>.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem 3rem}
@media(min-width:60rem){section.block>.grid{grid-template-columns:4fr 8fr}}
.block .side{align-self:start}
@media(min-width:60rem){.block .side{position:sticky;top:1.5rem}}
.block .side .marg{display:block;margin-bottom:.9rem}
.block h2{font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.15;letter-spacing:-.015em;font-weight:400;margin:0;text-wrap:balance;max-width:20ch}
.block .body{max-width:var(--measure)}
.block .body p{margin:0 0 1.15rem}
.block .body p:last-child{margin-bottom:0}
.beats p{display:grid;grid-template-columns:2.2rem 1fr;gap:0 .6rem;margin:0 0 1.3rem;font-size:1.2rem;line-height:1.5}
.beats p .marg{padding-top:.45rem}
.beats strong{font-weight:500}

/* ---------- essay index ---------- */
.essays{list-style:none;margin:0;padding:0;max-width:none}
.essays li{border-top:1px solid var(--rule);padding:1.6rem 0;display:grid;grid-template-columns:minmax(0,1fr);gap:.4rem 1.6rem}
@media(min-width:44rem){.essays li{grid-template-columns:1fr 9.5rem}}
.essays li:last-child{border-bottom:1px solid var(--rule)}
.essays h3{margin:0 0 .35rem;font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.2;letter-spacing:-.012em;font-weight:400}
.essays h3 a{text-decoration:none}
.essays h3 a:hover{text-decoration:underline}
.essays .dek{margin:0;color:var(--ink-2);max-width:var(--measure)}
.essays .meta{font-family:var(--mono);font-size:.78rem;color:var(--ink-3);line-height:1.6}
.essays .no{font-family:var(--mono);font-size:.78rem;color:var(--pencil);display:block;margin-bottom:.35rem}
.essays .meta .draft{color:var(--pencil)}
@media(min-width:44rem){.essays .meta{text-align:right}}
.essays .thumb{grid-column:1/-1;margin-top:.6rem;aspect-ratio:16/7;object-fit:cover;border-radius:3px;filter:saturate(.85)}
@media(min-width:44rem){.essays .thumb{display:none}}

/* ---------- work / research lists ---------- */
.list{list-style:none;margin:0;padding:0}
.list li{padding:1.1rem 0;border-top:1px solid var(--rule)}
.list li:last-child{border-bottom:1px solid var(--rule)}
.list h3{margin:0 0 .25rem;font-size:1.25rem;font-weight:500;line-height:1.3}
.list h3 a{text-decoration:none}
.list h3 a:hover{text-decoration:underline}
.list p{margin:0;color:var(--ink-2);max-width:var(--measure)}
.list .where{font-family:var(--mono);font-size:.78rem;color:var(--ink-3);display:block;margin-top:.45rem}
.list .status{color:var(--pencil)}
/* work */
.work h3.kind{font-family:var(--mono);font-size:.78rem;font-weight:400;color:var(--pencil);margin:2.2rem 0 .9rem}
.work h3.kind:first-child{margin-top:0}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:1.2rem 1.2rem;list-style:none;margin:0;padding:0}
.vgrid a{text-decoration:none;display:block}
.vgrid .th{aspect-ratio:16/9;object-fit:cover;width:100%;border-radius:3px;background:var(--paper-2);filter:saturate(.9)}
.vgrid .t{display:block;margin:.55rem 0 .1rem;font-size:1.05rem;line-height:1.3}
.vgrid .f{font-family:var(--mono);font-size:.74rem;color:var(--ink-3);line-height:1.5}
.feature{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem 1.6rem;margin:0 0 .5rem}
@media(min-width:44rem){.feature{grid-template-columns:7fr 5fr}}
.feature .th{aspect-ratio:16/9;object-fit:cover;width:100%;border-radius:3px;background:var(--paper-2);color:transparent}
.feature .th.poster{aspect-ratio:auto;height:auto}
.feature h4{margin:0 0 .2rem;font-size:1.35rem;font-weight:500;line-height:1.25}
.feature .sub{margin:0 0 .6rem;font-style:italic;color:var(--ink-2)}
.feature p{margin:0 0 .6rem;color:var(--ink-2)}
.feature .credits{font-family:var(--mono);font-size:.74rem;color:var(--ink-3);line-height:1.7;margin:.6rem 0 0}
.feature .credits span{color:var(--ink-2)}
.events{list-style:none;margin:0;padding:0}
.events li{padding:1.1rem 0;border-top:1px solid var(--rule)}
.events li:last-child{border-bottom:1px solid var(--rule)}
.events h4{margin:0 0 .2rem;font-size:1.2rem;font-weight:500;line-height:1.3}
.events .where{font-family:var(--mono);font-size:.74rem;color:var(--ink-3);display:block;margin-bottom:.5rem}
.events p{margin:0;color:var(--ink-2);max-width:var(--measure)}
.strip{display:grid;grid-template-columns:repeat(6,1fr);gap:.4rem;margin:.8rem 0 .2rem}
.strip img{aspect-ratio:1;object-fit:cover;width:100%;border-radius:2px}
.events .more{font-family:var(--mono);font-size:.78rem;display:inline-block;margin-top:.6rem}
.sites{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1.4rem;list-style:none;margin:0;padding:0}
.sites img{aspect-ratio:16/10;object-fit:cover;object-position:top;width:100%;border-radius:3px;border:1px solid var(--rule)}
.sites h4{margin:.6rem 0 .2rem;font-size:1.15rem;font-weight:500}
.sites p{margin:0;color:var(--ink-2);font-size:1rem}
/* reading log */
.reading{list-style:none;margin:0;padding:0}
.reading li{display:grid;grid-template-columns:minmax(0,1fr);gap:.3rem 1.4rem;padding:1rem 0;border-top:1px solid var(--rule)}
@media(min-width:44rem){.reading li{grid-template-columns:9rem 1fr}}
.reading li:last-child{border-bottom:1px solid var(--rule)}
.reading .id{font-family:var(--mono);font-size:.78rem;color:var(--ink-3);line-height:1.6;padding-top:.15rem}
.reading h3{margin:0 0 .15rem;font-size:1.1rem;font-weight:500;line-height:1.35}
.reading h3 a{text-decoration:none}
.reading h3 a:hover{text-decoration:underline}
.reading .who{font-family:var(--mono);font-size:.78rem;color:var(--ink-3);margin:0 0 .35rem}
.reading p.note{margin:0;color:var(--ink-2);max-width:var(--measure);font-size:1.05rem}
/* diagram */
.diagram{margin:0 0 2rem;max-width:var(--measure)}
.diagram svg{width:100%;height:auto;display:block}
.diagram .cap{font-family:var(--mono);font-size:.78rem;color:var(--ink-3);margin:.6rem 0 0;line-height:1.6}

/* ---------- contact ---------- */
.contact .body p{font-size:1.2rem}
.contact .ways{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;font-family:var(--sans);font-size:.95rem;margin-top:1.4rem}
.contact .ways a{text-decoration:none;border-bottom:1px solid var(--gold)}

footer{border-top:1px solid var(--rule);padding:2rem 0 3rem;font-family:var(--sans);font-size:.85rem;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between}
footer a{text-decoration:none;color:var(--ink-2)}

/* ---------- essay page ---------- */
.essay-head{padding:clamp(3rem,8vw,6rem) 0 2rem;max-width:46rem}
.essay-head .series{font-family:var(--mono);font-size:.78rem;color:var(--pencil);margin:0 0 1.2rem}
.essay-head h1{font-size:clamp(2rem,5vw,3.6rem);line-height:1.08;letter-spacing:-.02em;font-weight:400;margin:0 0 1rem;text-wrap:balance}
.essay-head .dek{font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.45;color:var(--ink-2);margin:0 0 1.4rem;font-style:italic;font-weight:300}
.essay-head .meta{font-family:var(--mono);font-size:.78rem;color:var(--ink-3)}
.cover{max-width:46rem;margin:0 0 2.5rem;border-radius:3px;overflow:hidden}
.cover img{width:100%;aspect-ratio:16/9;object-fit:cover}
.prose{max-width:var(--measure);font-size:1.2rem;line-height:1.62;padding-bottom:3rem}
.prose p{margin:0 0 1.35rem}
.prose h3,.prose h4{font-weight:500;letter-spacing:-.01em;line-height:1.25;margin:2.6rem 0 .9rem}
.prose h3{font-size:1.55rem}
.prose h4{font-size:1.3rem;color:var(--ink-2)}
.prose blockquote{margin:2rem 0;padding:0 0 0 1.2rem;border-left:2px solid var(--gold);font-size:1.3rem;line-height:1.45;font-style:italic;font-weight:300;color:var(--ink)}
.prose ul,.prose ol{padding-left:1.3rem;margin:0 0 1.35rem}
.prose li{margin:0 0 .55rem}
.prose li::marker{color:var(--gold-ink)}
.prose figure{margin:2rem 0}
.prose figure img{border-radius:3px}
.prose figure.video{aspect-ratio:16/9}
.prose figure.video iframe{width:100%;height:100%;border:0;border-radius:3px}
.prose figure.diagram{width:48rem;max-width:calc(100vw - 2*var(--gutter));margin:2.2rem 0}
.prose aside.note{font-family:var(--sans);font-size:.95rem;line-height:1.55;background:var(--paper-2);padding:1rem 1.2rem;border-radius:3px;margin:1.6rem 0;color:var(--ink-2)}
.prose a{text-decoration-color:var(--gold)}
.essay-foot{border-top:1px solid var(--rule);padding:2rem 0 3rem;max-width:46rem;font-family:var(--sans);font-size:.95rem;color:var(--ink-2)}
.essay-foot p{margin:0 0 .6rem}
.essay-foot .next{font-family:var(--serif);font-size:1.35rem;line-height:1.3;margin-top:1.4rem}
.essay-foot .next a{text-decoration:none}
.essay-foot .next a:hover{text-decoration:underline}