@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&family=Space+Mono:wght@400;700&family=Architects+Daughter&display=swap');
@font-face{font-family:'PP Right Gothic';src:url('fonts/PPRightGothic-Light.woff2') format('woff2'),url('fonts/PPRightGothic-Light.woff') format('woff');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'PP Right Gothic';src:url('fonts/PPRightGothic-Medium.woff2') format('woff2'),url('fonts/PPRightGothic-Medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'PP Right Gothic';src:url('fonts/PPRightGothic-Bold.woff2') format('woff2'),url('fonts/PPRightGothic-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Old London';src:url('fonts/OldLondon.ttf') format('truetype');font-weight:400;font-display:swap}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#000;
  --blue:#0000ff;          /* dots, and the only hover colour */
  --paper:#fff;
  --hair:rgba(0,0,0,.16);
  --dot:60px;              /* dot grid pitch */
  --doty:50px;
  --toc:'EB Garamond',Georgia,serif;   /* the table-of-contents face */
}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,Arimo,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-size:15px;
}
a{color:var(--ink);text-decoration:none;transition:color .12s}
a:hover{color:var(--blue)}
.wrap{padding:0 14px;display:flex;flex-direction:column;min-height:100vh}

/* ── header: pills left · wordmark centre · pill right ── */
.topbar{
  position:sticky;top:0;z-index:200;background:var(--paper);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:16px;padding:13px 14px 12px;margin:0 -14px 30px;
  border-bottom:1px solid var(--hair);
}
.navpills{grid-column:3;grid-row:1;justify-self:end}
.burger{grid-column:1;grid-row:1;justify-self:start;display:none;flex-direction:column;gap:4px;
  border:0;background:none;cursor:pointer;padding:5px 2px;width:26px}
.burger span{display:block;height:1.5px;width:100%;background:var(--ink)}
.burger:hover span{background:var(--blue)}
/* the landing page opens with the contents window already up — keep the
   burger reachable at every width so closing it isn't a one-way door */
body.landing .burger{display:flex}
/* ── table of contents: a little pop-up window ──
   z-index sits BELOW the sticky topbar (200) on purpose, so the wordmark
   stays visible and on top the whole time the window is open.          */
.drop{position:fixed;inset:0;z-index:150;display:none;align-items:center;
  justify-content:center;padding:78px 22px 44px;
  background:rgba(255,255,255,.93)}
.drop.on{display:flex}
.drop-card{position:relative;width:100%;max-width:372px;background:#fff;
  border:1px solid var(--ink);border-radius:0;padding:0;display:block;
  box-shadow:4px 4px 0 rgba(0,0,0,.24)}
/* the window's title bar, same idiom as the .pop scatter windows */
.drop-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#000;padding:4px 5px 5px 11px}
.drop-bar .bt{font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:.17em;
  text-transform:uppercase;color:#fff;white-space:nowrap}
.drop-x{border:1px solid #fff;background:none;cursor:pointer;color:#fff;
  font-family:'Space Mono',monospace;font-size:10px;line-height:1;
  padding:2px 5px 3px;transition:background .12s,color .12s}
.drop-x:hover{background:#fff;color:#000}
.drop-body{padding:15px 18px 17px}
/* the three rows carry the same red blackletter as the page titles */
.drop-card a{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  font-family:'PP Right Gothic','Helvetica Neue',Helvetica,sans-serif;color:#c0202b;font-weight:700;
  text-transform:uppercase;
  font-size:clamp(19px,5vw,23px);letter-spacing:.01em;line-height:1.2;
  padding:11px 2px;transition:color .14s}
.drop-card a+a{border-top:1px solid var(--hair)}
.drop-card a .pg{font-variant-numeric:lining-nums;opacity:.92}
.drop-card a:active,.drop-card a:hover{color:var(--blue)}
.drop-card a:hover .pg{color:var(--blue)}
/* the library at the foot of the window — the same door as the footer's,
   deliberately unlabelled */
.toc-arc{display:flex!important;justify-content:center;padding:14px 2px 4px!important;
  border-top:1px solid var(--hair);margin-top:4px;color:rgba(0,0,0,.62)}
.toc-arc:hover{color:var(--blue)}
.toc-arc svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;display:block}

/* ── the landing: four FRAKTA receipts, one per category ──
   assets/receipt.webp is the photographed IKEA care label, keyed off its
   background with every printed word erased. Nothing is baked into the
   image: the numeral, the category and its lines are HTML sitting over the
   blank run below the barcode cluster, so they stay links and stay legible.
   Percentages are measured off that render (708x2192, cluster ends 23.4%).
   Deliberately NOT the gothic — a care label is printed in small mono.  */
.drop{overflow:auto}
.rec-rack{position:relative;display:flex;gap:clamp(10px,2.2vw,30px);
  align-items:flex-start;justify-content:center;width:100%;max-width:1180px;
  padding:6px 0 10px}
.rec{position:relative;display:block;flex:0 1 clamp(150px,17vw,246px);
  container-type:inline-size;line-height:0;text-decoration:none;
  filter:drop-shadow(5px 10px 13px rgba(0,0,0,.18));
  transition:transform .3s cubic-bezier(.22,.86,.3,1),filter .3s ease}
.rec-img{display:block;width:100%;height:auto;
  filter:grayscale(1) contrast(1.02);transition:filter .3s ease}
.rec:hover{transform:translateY(-9px) rotate(-.5deg);
  filter:drop-shadow(7px 16px 20px rgba(0,0,0,.26))}
.rec:hover .rec-img,.rec:active .rec-img,.rec.lit .rec-img{filter:none}
.rec-txt{position:absolute;left:11%;right:9%;top:26.5%;bottom:12%;
  display:flex;flex-direction:column;line-height:1.3;text-align:left}
.rec-no{font-family:'Space Mono',monospace;font-size:5.4cqw;letter-spacing:.2em;
  color:rgba(0,0,0,.45)}
.rec-title{font-family:'Space Mono',monospace;font-weight:700;font-size:9.4cqw;
  letter-spacing:-.01em;text-transform:uppercase;color:#111;margin-top:.15em;
  line-height:1.05}
.rec:hover .rec-title{color:#c0202b}
.rec-rule{display:block;height:1px;background:rgba(0,0,0,.34);margin:7% 0 6%}
.rec-line{font-family:'Space Mono',monospace;font-size:4.9cqw;line-height:1.75;
  letter-spacing:.01em;color:rgba(0,0,0,.62)}
.rec-x{position:absolute;top:-2px;right:0;border-color:#111;color:#111;z-index:3;
  background:rgba(255,255,255,.7)}
.rec-x:hover{background:#111;color:#fff}
.rec-arc{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);
  color:rgba(0,0,0,.6)}
.rec-arc:hover{color:var(--blue)}
.rec-arc svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;display:block}
/* each one feeds down from above, a beat apart. The plain state is the
   finished state, so a suppressed transition just leaves them hanging. */
.rec{transform-origin:50% 0;
  transition:transform .3s cubic-bezier(.22,.86,.3,1),filter .3s ease,
             clip-path .85s cubic-bezier(.22,.86,.3,1),opacity .4s ease}
.rec.feeding{transform:translateY(-58%) rotate(-1.6deg);
  clip-path:inset(0 0 100% 0);opacity:0;transition:none}
.rec.fed{transform:none;clip-path:none;opacity:1}
.drop.on .rec{transition-delay:calc(var(--i) * .11s)}
@media(prefers-reduced-motion:reduce){
  .rec,.rec.feeding{transition:none;transform:none;clip-path:none;opacity:1}
}
@media(max-width:820px){
  .drop{padding:70px 14px 30px;align-items:flex-start}
  .rec-rack{flex-wrap:wrap;gap:14px 12px;max-width:520px}
  .rec{flex:0 1 calc(50% - 6px)}
  .rec-arc{position:static;transform:none;margin:16px auto 0}
}
.drop-card a.drawn{font-family:'Architects Daughter',cursive;
  font-size:clamp(20px,5.6vw,25px);letter-spacing:.05em;text-transform:uppercase;
  padding-top:clamp(14px,4vw,20px)}
.drop-card a.drawn .t{transform:rotate(-.7deg);display:inline-block}
.drop-card a.drawn .pg{font-family:'Architects Daughter',cursive;
  transform:rotate(1.1deg);display:inline-block}
.toc-sign{font-family:'Architects Daughter',cursive;color:#fff;
  font-size:clamp(26px,7.4vw,36px);letter-spacing:.06em;text-transform:uppercase;
  margin:clamp(46px,13vw,74px) 0 0;opacity:.92;line-height:1.25}
.pillrow{display:flex}
.pill{
  border:1px solid var(--ink);padding:6px 13px 5px;
  font-size:10.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  line-height:1;white-space:nowrap;background:#f2f2f1;
  transition:color .12s,border-color .12s,background .12s;
}
.pillrow .pill+.pill{margin-left:-1px}
.pillrow .pill:first-child{border-radius:3px 0 0 3px}
.pillrow .pill:last-child{border-radius:0 3px 3px 0}
.pill:hover{color:var(--blue);border-color:var(--blue);background:#fff;position:relative;z-index:1}
.pill.icon{display:flex;align-items:center;padding:5px 9px}
.pill.icon svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linejoin:round;stroke-linecap:round;display:block}
.right{justify-self:end}
.right .pill{border-radius:3px}
.wordmark{
  font-family:'PP Right Gothic','Helvetica Neue',Helvetica,sans-serif;
  font-weight:700;font-size:25px;line-height:1;letter-spacing:.005em;
  text-transform:uppercase;white-space:nowrap;
  grid-column:2;grid-row:1;justify-self:center;
}

/* ── page title block (Kiko's "SS26 MENSWEAR / Video Runway") ── */
.pagehead{padding:10px 0 0}
.pagetitle{font-family:'PP Right Gothic','Helvetica Neue',Helvetica,sans-serif;font-size:21px;
  font-weight:700;text-transform:uppercase;color:#c0202b;letter-spacing:.01em;line-height:1.15}
.sublinks{display:flex;gap:18px;padding:3px 0 0}
.sublinks a{font-size:12px;letter-spacing:.01em}

/* ── index: the wall of type ── */
.index{padding:26px 0 0}
.sec{
  font-size:10.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(0,0,0,.45);margin:40px 0 12px;padding-bottom:7px;border-bottom:1px solid var(--hair);
}
.sec:first-child{margin-top:0}
.row{display:block;font-size:clamp(26px,3.5vw,52px);font-weight:700;letter-spacing:-.035em;
  line-height:1.1;text-transform:uppercase}

/* ── project pages ── */
.meta{
  display:flex;flex-wrap:wrap;gap:0 34px;
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.03em;
  text-transform:uppercase;color:rgba(0,0,0,.62);
  padding:16px 0;border-bottom:1px solid var(--hair);
}
.psub{font-size:16px;font-style:italic;color:rgba(0,0,0,.7);padding:2px 0 0}
.plates{margin:0}
.plates img{display:block;width:100%;height:auto;margin:0 0 14px;
  border:1px solid var(--hair)}
.note{font-family:'Space Mono',monospace;font-size:11.5px;line-height:1.85;
  text-transform:uppercase;letter-spacing:.03em;padding:34px 0;color:rgba(0,0,0,.6)}
.back{display:inline-block;font-family:'Space Mono',monospace;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;margin:8px 0 0}

/* ── archive ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin:22px 0 0}
.grid a{display:block;aspect-ratio:1/1;overflow:hidden}
.grid img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);transition:filter .15s}
.grid a:hover img,.grid a:active img,.grid a.lit img{filter:none}
.empty{font-family:'Space Mono',monospace;font-size:11.5px;line-height:1.9;
  text-transform:uppercase;letter-spacing:.03em;padding:36px 0;color:rgba(0,0,0,.6)}
#lb{position:fixed;inset:0;background:rgba(255,255,255,.98);display:none;z-index:99;
  align-items:center;justify-content:center;padding:40px}
#lb.on{display:flex}
#lb img{max-width:100%;max-height:100%;object-fit:contain}
#lb .x{position:absolute;top:20px;right:24px;font-family:'Space Mono',monospace;
  font-size:11px;letter-spacing:.09em;cursor:pointer}
.up{padding:22px 0 0}
.up input[type=file]{font-family:'Space Mono',monospace;font-size:12px}
.up p{font-family:'Space Mono',monospace;font-size:11.5px;line-height:1.9;margin:14px 0 0;
  letter-spacing:.03em}
.btn{display:inline-block;font-family:'Space Mono',monospace;font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;border:1px solid var(--ink);
  border-radius:3px;padding:9px 16px;transition:all .12s}
.btn:hover{color:var(--blue);border-color:var(--blue)}

/* ── home ── */
.home{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;padding:30px 0 0}
.bio p{font-family:'Space Mono',monospace;font-size:12.5px;line-height:1.75;margin:0 0 14px;max-width:62ch}
.homelinks{display:flex;flex-direction:column;align-items:flex-end;gap:5px;
  font-family:'Space Mono',monospace;font-size:12.5px}
.enter{padding:44px 0 0}

/* ── ojas-style ruled lattice ── */
.lattice{display:grid;grid-template-columns:repeat(4,1fr);gap:54px 26px;margin:30px 0 0}
.cell{display:flex;flex-direction:column;padding:0;border:0;background:none}
.cell .ct{font-size:11.5px;font-weight:400;line-height:1.4;letter-spacing:.01em;
  text-transform:uppercase}
.cell .cm{font-size:11.5px;line-height:1.5;color:rgba(0,0,0,.55);margin-top:3px}
.cell .cimg{order:-1;margin:0 0 11px;display:flex;align-items:flex-end;
  justify-content:center;min-height:250px}
.cell .cimg img{display:block;max-width:100%;max-height:290px;width:auto;height:auto;
  object-fit:contain}
.cell:hover .ct{color:var(--blue)}
.latsec{grid-column:1/-1;padding:6px 0 0;font-family:'PP Right Gothic','Helvetica Neue',Helvetica,sans-serif;
  font-size:19px;color:#c0202b;letter-spacing:.01em}

/* ── home: header, the dot field, footer ── */
.homefield{flex:1}

/* ── locked cell: cover image shows, a small tag marks it ── */
.cell .lockflag{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--blue);margin-top:6px}

/* ── mobile: MSCHF wall of type (desktop keeps the lattice) ── */
.mobile-index{display:none}
.mobile-index.always{display:block;position:relative;z-index:20}
.mi-sec{font-family:'PP Right Gothic','Helvetica Neue',Helvetica,sans-serif;font-size:19px;
  color:#c0202b;margin:30px 0 14px;letter-spacing:.01em}
.mi-sec:first-child{margin-top:6px}
.mi-row{display:block;font-size:clamp(19px,6.1vw,40px);font-weight:700;
  letter-spacing:-.035em;line-height:1.12;text-transform:uppercase;color:var(--ink);
  overflow-wrap:break-word}
.mi-row:active,.mi-row:hover{color:var(--blue)}

/* ── project page: hero left, tiles + text right ── */
.pj-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:34px;padding:22px 0 0;align-items:start}
.pj-left{position:sticky;top:62px;height:calc(100vh - 128px);display:flex;
  align-items:center;justify-content:center}
.pj-hero{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.pj-hero img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);transition:opacity .18s,filter .3s ease}
.pj-hero:hover img,.pj-hero:active img,.pj-hero.lit img{filter:none}
.pj-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:16px 0 22px}
.pj-tiles button{border:0;padding:0;background:none;cursor:pointer;display:block;
  aspect-ratio:1/1;overflow:hidden}
.pj-tiles img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1);transition:filter .15s,opacity .15s}
.pj-tiles button:hover img,.pj-tiles button:active img,
.pj-tiles button.sel img{filter:none}
.pj-tiles button.sel{outline:1px solid var(--blue);outline-offset:2px}
/* a project with a hundred-odd pictures reads as a contact sheet, not tiles.
   NB: not ".sheet" — that name is already taken further down for the stack. */
.pj-tiles.contact{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px;
  margin:26px 0 8px}

/* lightbox */
.lb{position:fixed;inset:0;z-index:130;display:none;align-items:center;
  justify-content:center;background:rgba(255,255,255,.97);padding:54px 16px}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:100%;object-fit:contain}
.lb .x,.lb .nav{position:absolute;border:0;background:none;cursor:pointer;
  font-family:'Space Mono',monospace;color:var(--ink);padding:8px 12px}
.lb .x{top:14px;right:16px;font-size:20px}
.lb .nav{top:50%;transform:translateY(-50%);font-size:26px}
.lb .prev{left:10px} .lb .next{right:10px}
.lb .x:hover,.lb .nav:hover{color:var(--blue)}
.lb .count{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.09em;
  color:rgba(0,0,0,.55)}

@media(max-width:820px){
  .pj-split{grid-template-columns:1fr;gap:16px}
  .pj-left{position:static;height:auto;order:-1}
  .pj-hero{height:auto}
  .pj-hero img{max-height:62vh}
  .pj-tiles{grid-template-columns:repeat(3,1fr)}
}

/* ── project page: portfolio layout, responsive ── */
.pj-title{font-size:clamp(22px,3.1vw,38px);font-weight:700;letter-spacing:-.03em;
  line-height:1.08;text-transform:uppercase;padding:24px 0 0}
.pj-sub{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(0,0,0,.6);padding:8px 0 0}
.pj-body{column-count:2;column-gap:44px;padding:26px 0 0;
  font-size:13.5px;line-height:1.62;color:rgba(0,0,0,.82);max-width:1100px}
.pj-body p{margin:0 0 14px;break-inside:avoid}
.pj-quote{font-size:clamp(15px,1.7vw,21px);font-style:italic;color:#9d7037;
  text-align:center;padding:30px 8%;line-height:1.45}
.pj-plates{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:14px;padding:18px 0 0}
.pj-plates figure{margin:0}
.pj-plates img{display:block;width:100%;height:auto;border:1px solid var(--hair)}
.pj-plates .wide{grid-column:1/-1}
@media(max-width:820px){
  .pj-body{column-count:1;font-size:14px}
  .pj-plates{grid-template-columns:1fr;gap:10px}
}

/* ── writing: article grid, colour on hover ── */
.proposal{border:1px solid var(--ink);border-radius:3px;background:#fff;
  padding:24px 26px;margin:6px 0 34px;max-height:none}
.proposal-in{max-width:none}
.proposal .promo-body{columns:2;column-gap:38px}
.proposal .promo-body p{break-inside:avoid}
@media(max-width:820px){.proposal{padding:20px 18px}.proposal .promo-body{columns:1}}

/* ── the tiled index, shared by Writing and Projects ──
   Black and white until you reach for it: `:hover` for a mouse, `:active`
   for a finger, `.lit` where a component pins the colour on. Every tiled
   image on the site uses this same trio. */
.wgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 22px;margin:0 0 10px}
.wcard{display:flex;flex-direction:column}
.wimg{aspect-ratio:4/3;overflow:hidden;background:#f3f3f2}
.wimg img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1);transition:filter .22s ease,transform .5s ease}
.wcard:hover .wimg img,.wcard:active .wimg img,.wcard.lit .wimg img{
  filter:none;transform:scale(1.02)}
.wt{font-size:11.5px;line-height:1.45;letter-spacing:.01em;text-transform:uppercase;
  margin-top:9px}
.wcard:hover .wt,.wcard.lit .wt{color:var(--blue)}
@media(max-width:1180px){.wgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.wgrid{grid-template-columns:repeat(2,1fr);gap:26px 14px}}

/* ── curriculum vitae ── */
.cv{padding:26px 0 0}
.cv-contact{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.03em;
  padding-bottom:20px;border-bottom:1px solid var(--ink)}
.cv-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 46px}
.cv-sec{font-family:'PP Right Gothic','Helvetica Neue',Helvetica,sans-serif;font-size:19px;
  color:#c0202b;letter-spacing:.01em;margin:30px 0 0;padding:9px 0;
  border-bottom:1px solid var(--ink)}
.cv-item{display:grid;grid-template-columns:104px 1fr;gap:0 16px;
  padding:14px 0;border-bottom:1px solid var(--hair)}
.cv-when{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:rgba(0,0,0,.55);line-height:1.65}
.cv-org{font-size:13px;font-weight:700;letter-spacing:.01em;line-height:1.3}
.cv-org span{font-weight:400;color:rgba(0,0,0,.62)}
.cv-where{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(0,0,0,.55);margin:3px 0 0}
.cv-body{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;
  transition:grid-template-rows .34s ease,opacity .22s ease,margin-top .3s ease}
.cv-body>div{overflow:hidden;min-height:0;
  font-size:12.5px;line-height:1.6;color:rgba(0,0,0,.78);max-width:60ch}
.cv-item{cursor:default;transition:border-color .2s}
.cv-item:hover{border-bottom-color:rgba(0,0,0,.45)}
.cv-item:hover .cv-body,.cv-item:focus-within .cv-body{
  grid-template-rows:1fr;opacity:1;margin-top:8px}
.cv-item:hover .cv-org{color:var(--blue)}
/* no hover on touch — just show everything */
@media(hover:none){.cv-body{grid-template-rows:1fr;opacity:1;margin-top:8px}}
.cv-list{font-family:'Space Mono',monospace;font-size:11px;line-height:1.95;
  padding:12px 0;color:rgba(0,0,0,.75)}
.cv-list b{font-weight:700;color:var(--ink);margin-right:10px}
@media(max-width:820px){.cv-cols{grid-template-columns:1fr;gap:0}
  .cv-item{grid-template-columns:1fr;gap:6px}}

/* ── landing: lithograph, then the smoke rises and the site appears ── */
.intro{position:fixed;inset:0;z-index:2;display:flex;align-items:center;
  justify-content:center;padding:28px;transition:opacity .9s ease}
.intro img{display:block;max-width:min(340px,62vw);height:auto}
.smoke{position:fixed;left:0;right:0;bottom:0;height:0;z-index:3;pointer-events:none;
  transition:height 2s cubic-bezier(.4,0,.5,1), opacity 1.1s ease;
  background:linear-gradient(to top,#fff 0%,#fff 62%,rgba(255,255,255,.86) 80%,
    rgba(255,255,255,.42) 92%,rgba(255,255,255,0) 100%)}
.smoke.rise{height:270%}
.site{opacity:0;transition:opacity 1.2s ease;display:flex;flex-direction:column;
  min-height:100vh}
.site.on{opacity:1}
.doors{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;padding:40px 0}
.doors a{display:flex;align-items:baseline;gap:11px;
  font-family:'PP Right Gothic','Helvetica Neue',Helvetica,sans-serif;
  font-size:clamp(26px,3.4vw,40px);color:#c0202b;transition:color .14s}
.doors a:hover{color:var(--blue)}
.doors .n{font-size:.6em;opacity:.7}

/* landing: lithograph at desktop width, xerox + Enter on phones */
body.gatepage{margin:0;height:100%;background:#fff}
.litho{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;padding:34px 28px;gap:30px}
.gatename{font-family:'PP Right Gothic','Helvetica Neue',Helvetica,sans-serif;font-size:clamp(22px,2.7vw,32px);
  color:var(--ink);line-height:1;letter-spacing:.02em;text-align:center}
.gatename:hover{color:var(--blue)}
.sheets{display:flex;align-items:flex-start;justify-content:center;gap:clamp(20px,3.4vw,46px);
  flex-wrap:wrap;line-height:0}
.sheet{display:block;max-width:min(300px,38vw);transition:transform .3s ease}
.sheet:hover{transform:translateY(-3px)}
.sheet img{display:block;width:100%;height:auto}
.xerogate{display:none;min-height:100vh;flex-direction:column;align-items:center;
  justify-content:center;gap:34px;
  background:#f6f5f1 url('xerox.jpg') center/cover no-repeat}
.enterbtn{font-family:'PP Right Gothic','Helvetica Neue',Helvetica,sans-serif;font-size:34px;
  color:#c0202b;border:1px solid rgba(27,26,24,.5);background:rgba(255,255,255,.72);
  padding:12px 40px 14px;border-radius:2px}
.enterbtn:active{color:var(--blue);border-color:var(--blue)}
@media(max-width:820px){
  .litho{display:none}
  .xerogate{display:flex}
}

/* ── home: one plate, rotating, unframed ── */
.hang{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:34px 0 42px}
.plate{position:relative;display:block;max-width:min(215px,42vw);line-height:0}
.plate img{display:block;width:100%;height:auto;transition:opacity 1.2s ease}
.plate img.b{position:absolute;inset:0;opacity:0}
@media(max-width:560px){.plate{max-width:46vw}}

/* ── home: three numbered doors, in a row ── */
.stack{flex:1;min-height:52vh;display:flex;flex-direction:row;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:14px 46px;padding:40px 0;
  position:relative;z-index:20}
.stack a,.stack button{display:flex;align-items:baseline;gap:9px;
  border:0;background:none;cursor:pointer;padding:8px 4px;
  font-family:'PP Right Gothic','Helvetica Neue',Helvetica,sans-serif;font-size:clamp(20px,2.5vw,30px);
  letter-spacing:.01em;color:#c0202b;transition:color .12s}
.stack a:hover,.stack button:hover{color:var(--blue)}
.stack .rn{font-family:'PP Right Gothic','Helvetica Neue',Helvetica,sans-serif;
  font-size:.62em;letter-spacing:.02em;color:#c0202b;opacity:.75}
.stack a:hover .rn,.stack button:hover .rn{color:var(--blue);opacity:1}
@media(max-width:720px){
  .stack{flex-direction:column;gap:14px}
}

/* ── hover scatter: little 90s windows ── */
.scatter{position:fixed;inset:0;z-index:8;pointer-events:none;overflow:hidden}
@keyframes popin{from{opacity:0;transform:scale(.9) rotate(var(--r))}
                 to{opacity:1;transform:scale(1) rotate(var(--r))}}
@keyframes drift{from{transform:translate3d(0,0,0) rotate(var(--r))}
                 to{transform:translate3d(var(--dx),var(--dy),0) rotate(var(--r))}}
.pop{position:absolute;background:#fff;border:1px solid #000;
  box-shadow:3px 3px 0 rgba(0,0,0,.28);animation:popin .22s ease-out both}
.pop .inner{animation:drift 9s ease-in-out infinite alternate}
.pop .bar{display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:#000;color:#fff;font-family:'Space Mono',monospace;font-size:7.5px;
  letter-spacing:.1em;text-transform:uppercase;padding:2px 4px 3px}
.pop .bar b{font-weight:400}
.pop .bar i{font-style:normal;border:1px solid #fff;line-height:1;padding:0 3px}
.pop img{display:block;width:100%;height:auto}
.pop.bw img{filter:grayscale(1) contrast(1.05)}
@media(max-width:720px){.scatter{display:none}}

/* ── coming soon ── */
.soon{flex:1;min-height:52vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;text-align:center}
.soon .big{font-family:'PP Right Gothic','Helvetica Neue',Helvetica,sans-serif;font-size:34px;
  color:#c0202b;letter-spacing:.01em}
.soon .sub{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(0,0,0,.55)}
.soon .dots::after{content:'';animation:dots 1.6s steps(4,end) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}

/* ── home: research proposal window ── */
.promo{position:fixed;inset:0;z-index:110;display:flex;align-items:center;
  justify-content:center;padding:28px 16px;background:rgba(255,255,255,.82)}
.promo.off{display:none}
.promo-card{position:relative;width:100%;max-width:540px;max-height:64vh;overflow-y:auto;
  background:#fff;border:1px solid var(--ink);border-radius:3px;padding:26px 28px 26px}
.promo-x{position:absolute;top:10px;right:12px;border:0;background:none;cursor:pointer;
  font-family:'Space Mono',monospace;font-size:19px;line-height:1;padding:6px 8px;
  color:var(--ink)}
.promo-x:hover{color:var(--blue)}
.promo-title{font-family:'PP Right Gothic','Helvetica Neue',Helvetica,sans-serif;font-size:22px;
  color:#c0202b;letter-spacing:.01em;padding-right:28px}
.promo-sub{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(0,0,0,.55);margin:5px 0 18px;
  padding-bottom:14px;border-bottom:1px solid var(--ink)}
.promo-body p{font-size:12px;line-height:1.62;margin:0 0 11px;color:rgba(0,0,0,.84)}
.promo-body .sign{font-family:'Space Mono',monospace;font-size:11.5px;
  letter-spacing:.05em;margin-top:18px;color:rgba(0,0,0,.7)}
.promo-body em{font-style:italic}
.reveal{opacity:0;pointer-events:none;transition:opacity 1.5s ease}
.reveal.on{opacity:1;pointer-events:auto}
@media(max-width:560px){.promo-card{padding:28px 20px 26px;max-height:88vh}
  .promo-title{font-size:22px}}

/* ── projects: featured work (mirrors the writing page's highlighted article) ── */
.pfeat{border:1px solid var(--ink);border-radius:3px;background:#fff;
  margin:6px 0 34px;padding:0 0 24px;overflow:hidden}
.pfeat-bar{display:flex;align-items:center;gap:14px;padding:8px 12px;
  border-bottom:1px solid var(--hair)}
.pfeat-flag{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(0,0,0,.55);white-space:nowrap}
.pfeat-tiles{display:flex;gap:6px;margin-left:auto}
.pfeat-tiles button{display:block;width:64px;aspect-ratio:4/3;overflow:hidden;
  border:0;padding:0;background:none;cursor:pointer}
.pfeat-tiles img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1);transition:filter .2s ease}
.pfeat-tiles button:hover img,.pfeat-tiles button:active img,
.pfeat-tiles button.lit img{filter:none}
.pfeat-tiles button.sel{outline:1px solid var(--blue);outline-offset:2px}
.pfeat-hero{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:#f3f3f2}
.pfeat-hero img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1);transition:filter .3s ease,transform .6s ease}
.pfeat-hero:hover img,.pfeat-hero:active img,.pfeat.lit .pfeat-hero img{filter:none}
.pfeat-hero:hover img{transform:scale(1.015)}
.pfeat-txt{padding:20px 26px 0}
.pfeat-txt .promo-body{columns:2;column-gap:38px}
.pfeat-txt .promo-body p{break-inside:avoid}
.pfeat-txt .btn{margin-top:16px}
@media(max-width:820px){
  .pfeat-txt{padding:18px 18px 0}
  .pfeat-txt .promo-body{columns:1}
  .pfeat-hero{aspect-ratio:4/3}
  .pfeat-tiles button{width:52px}
  .pfeat-flag{font-size:9px}
}

/* projects index: grid on desktop, the full chapter list on mobile */
.gsec{grid-column:1/-1;margin:22px 0 2px}
.gsec:first-child{margin-top:0}
/* the projects index is the grid at every width now — the old chapter list
   and its hover-scatter are gone, so nothing needs hiding per breakpoint */

/* ── projects: collapsible chapters ── */
.acc-h{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  padding:0}
.acc-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s ease}
.acc.open .acc-b{grid-template-rows:1fr}
.acc-i{overflow:hidden;min-height:0}
.acc-h::after{content:' +';font-size:.62em;vertical-align:middle;opacity:.55}
.acc.open .acc-h::after{content:' –'}

/* ── password modal ── */
.modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;
  justify-content:center;padding:24px;background:rgba(255,255,255,.93)}
.modal.on{display:flex}
.modal .card{width:100%;max-width:400px;border:1px solid var(--ink);border-radius:3px;
  background:#fff;padding:26px 24px 24px}
.modal h2{font-family:'Space Mono',monospace;font-size:11.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;margin-bottom:10px}
.modal p{font-family:'Space Mono',monospace;font-size:11.5px;line-height:1.75;
  color:rgba(0,0,0,.62);margin-bottom:18px}
.modal form{display:flex}
.modal input{flex:1;border:1px solid var(--ink);border-right:0;border-radius:3px 0 0 3px;
  padding:10px 12px;font-family:'Space Mono',monospace;font-size:12px;outline:none;min-width:0}
.modal input:focus{border-color:var(--blue)}
.modal button{border:1px solid var(--ink);border-radius:0 3px 3px 0;cursor:pointer;
  padding:10px 15px;font-family:'Space Mono',monospace;font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;background:rgba(0,0,0,.015)}
.modal button:hover{color:var(--blue);border-color:var(--blue);background:#fff}
.modal .err{color:var(--blue);font-family:'Space Mono',monospace;font-size:11.5px;
  margin-top:11px;min-height:17px}
.modal .skip{display:inline-block;margin-top:6px;font-family:'Space Mono',monospace;
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(0,0,0,.5)}
#vault{display:none}
#vault.on{display:block}
.coverplate{margin:0 0 14px}
.coverplate img{display:block;width:100%;height:auto;border:1px solid var(--hair)}

/* ── gate ── */
.gate{max-width:430px;padding:64px 0 90px}
.gate h2{font-family:'Space Mono',monospace;font-size:12px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;margin-bottom:12px}
.gate p{font-family:'Space Mono',monospace;font-size:11.5px;line-height:1.8;
  color:rgba(0,0,0,.62);margin-bottom:20px}
.gate form{display:flex;gap:0}
.gate input{flex:1;border:1px solid var(--ink);border-right:0;border-radius:3px 0 0 3px;
  padding:10px 12px;font-family:'Space Mono',monospace;font-size:12px;background:#fff;
  outline:none;min-width:0}
.gate input:focus{border-color:var(--blue)}
.gate button{border:1px solid var(--ink);border-radius:0 3px 3px 0;cursor:pointer;
  padding:10px 16px;font-family:'Space Mono',monospace;font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;background:rgba(0,0,0,.015)}
.gate button:hover{color:var(--blue);border-color:var(--blue);background:#fff}
.gate .err{color:var(--blue);font-family:'Space Mono',monospace;font-size:11.5px;
  margin-top:12px;min-height:17px}
#vault{display:none}
#vault.on{display:block}

@media(max-width:1180px){.lattice{grid-template-columns:repeat(3,1fr);gap:46px 22px}}
@media(max-width:820px){
  .lattice{display:none}
  .mobile-index{display:block}
  .navpills{display:none}
  .burger{display:flex}
  .home{grid-template-columns:1fr;gap:22px}
  .homelinks{align-items:flex-start}
}

/* ── footer: archive icon left · email centred · everything else right ── */
footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  background:#fff;padding:9px 18px;margin:0 -14px;
  border-top:1px solid var(--hair);position:relative;z-index:100}
.footspace{margin-top:auto;min-height:180px;flex:0 0 auto}
.fl{display:flex;align-items:center;gap:20px;justify-self:start}
.fc{display:flex;align-items:center;justify-self:center}
.fr{display:flex;align-items:center;gap:20px;justify-self:end}
footer .btn{border:0;border-radius:0;padding:0;background:none;
  font-size:10px;letter-spacing:.09em;color:rgba(0,0,0,.62)}
footer .btn:hover{color:var(--blue);border:0;background:none}
footer .btn.mail{text-transform:none;letter-spacing:.05em}
/* the archive button: a little library */
.arcbtn{display:flex;align-items:center;padding:2px 0;color:rgba(0,0,0,.62);
  transition:color .12s}
.arcbtn:hover{color:var(--blue)}
.arcbtn svg{display:block;width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:820px){
  .topbar{grid-template-columns:1fr auto;row-gap:10px}
  .right{grid-column:2}
  .wordmark{font-size:16px}
  .pillrow{flex-wrap:wrap}
  /* phones: the footer is the library icon and nothing else */
  footer{grid-template-columns:1fr;justify-items:center;gap:0}
  footer .fc,footer .fr{display:none}
  .fl{justify-self:center}
}
/* narrow phones — must come last, it overrides the 820px block above */
@media(max-width:560px){
  .topbar{grid-template-columns:1fr auto 1fr;align-items:center}
  .topbar .wordmark{grid-column:2;justify-self:center;font-size:19px}
  .pill{font-size:9.5px;padding:6px 9px 5px;letter-spacing:.07em}
  .modal .card{padding:22px 18px 20px}
}

/* ══════════════════════════════════════════════════════════════════
   2026-07 cleanup: dot ground · landing gate · roll-and-collapse
   ══════════════════════════════════════════════════════════════════ */

/* ── xerox ground — a photocopied sheet under magenta centre guides and a
   cyan grid. Opt-in per page (landing + home), sits BEHIND content.
   Replaces the old blue dot grid; --dot/--doty still set the pitch.
   The yellow half-pitch subdivisions were removed 2026-07-27.          */
body.dots::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    /* magenta centre guides, the pair Illustrator drops on an artboard */
    linear-gradient(rgba(238,33,154,.46),rgba(238,33,154,.46)),
    linear-gradient(rgba(238,33,154,.46),rgba(238,33,154,.46)),
    /* the photocopied sheet itself */
    url('xerox.jpg');
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-size:
    1px 100%,100% 1px,
    cover;
  background-position:
    50% 0,0 50%,
    left center;
}
/* Phones and tablets get the printed cyan grid: there is no cursor there,
   so the two tracking rules below would have nothing to follow. */
@media(max-width:820px){
  body.dots::before{
    background-image:
      linear-gradient(rgba(238,33,154,.46),rgba(238,33,154,.46)),
      linear-gradient(rgba(238,33,154,.46),rgba(238,33,154,.46)),
      repeating-linear-gradient(90deg,rgba(53,228,232,.62) 0 1px,transparent 1px var(--dot)),
      repeating-linear-gradient(180deg,rgba(53,228,232,.62) 0 1px,transparent 1px var(--doty)),
      url('xerox.jpg');
    background-repeat:no-repeat,no-repeat,repeat,repeat,no-repeat;
    background-size:1px 100%,100% 1px,auto,auto,cover;
    background-position:50% 0,0 50%,0 0,0 0,left center;
  }
}
@media(max-width:560px){body.dots::before{--dot:44px;--doty:38px}}

/* ── the cursor's own pair of cyan guides: one horizontal, one vertical,
   crossing wherever the pointer is. Every page, desktop only.
   Sits above the xerox ground (-1) and below the field (1).            */
/* z-index -1 puts the guides above the xerox ground (also -1, but earlier in
   tree order) and behind every in-flow element, so they read through the
   margins and the empty sheet without slashing across photographs. */
.xhair{display:none;position:fixed;inset:0;z-index:-1;pointer-events:none}
@media(min-width:821px) and (hover:hover) and (pointer:fine){
  .xhair{display:block}
}
.xhair i{position:absolute;background:rgba(53,228,232,.85);
  transition:opacity .3s ease}
.xhair .vx{top:0;bottom:0;left:0;width:1px;transform:translate3d(var(--x,50vw),0,0)}
.xhair .hz{left:0;right:0;top:0;height:1px;transform:translate3d(0,var(--y,50vh),0)}
/* until the pointer has actually moved, they rest on the centre guides */
.xhair.idle i{opacity:.5}
@media(prefers-reduced-motion:reduce){.xhair i{transition:none}}

/* ── the artboard: a magenta trim box with CMYK registration targets,
   drawn inside the empty landing field                              */
body.dots .field::before{
  content:'';position:absolute;inset:14px 6px;pointer-events:none;
  border:1px solid rgba(238,33,154,.38);
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><g fill='none' stroke-width='1'><path d='M12 1v22M1 12h22' stroke='%23111111' opacity='.5'/><path d='M12 6a6 6 0 0 1 6 6' stroke='%2335E4E8'/><path d='M18 12a6 6 0 0 1-6 6' stroke='%23EE219A'/><path d='M12 18a6 6 0 0 1-6-6' stroke='%23FFDE00'/><path d='M6 12a6 6 0 0 1 6-6' stroke='%23111111'/></g></svg>"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><g fill='none' stroke-width='1'><path d='M12 1v22M1 12h22' stroke='%23111111' opacity='.5'/><path d='M12 6a6 6 0 0 1 6 6' stroke='%2335E4E8'/><path d='M18 12a6 6 0 0 1-6 6' stroke='%23EE219A'/><path d='M12 18a6 6 0 0 1-6-6' stroke='%23FFDE00'/><path d='M6 12a6 6 0 0 1 6-6' stroke='%23111111'/></g></svg>"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><g fill='none' stroke-width='1'><path d='M12 1v22M1 12h22' stroke='%23111111' opacity='.5'/><path d='M12 6a6 6 0 0 1 6 6' stroke='%2335E4E8'/><path d='M18 12a6 6 0 0 1-6 6' stroke='%23EE219A'/><path d='M12 18a6 6 0 0 1-6-6' stroke='%23FFDE00'/><path d='M6 12a6 6 0 0 1 6-6' stroke='%23111111'/></g></svg>"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><g fill='none' stroke-width='1'><path d='M12 1v22M1 12h22' stroke='%23111111' opacity='.5'/><path d='M12 6a6 6 0 0 1 6 6' stroke='%2335E4E8'/><path d='M18 12a6 6 0 0 1-6 6' stroke='%23EE219A'/><path d='M12 18a6 6 0 0 1-6-6' stroke='%23FFDE00'/><path d='M6 12a6 6 0 0 1 6-6' stroke='%23111111'/></g></svg>");
  background-repeat:no-repeat;
  background-size:22px 22px;
  background-position:left 8px top 8px,right 8px top 8px,left 8px bottom 8px,right 8px bottom 8px;
}
@media(max-width:560px){body.dots .field::before{inset:10px 2px;background-size:18px 18px}}

/* ── landing gate: name at the head, three doors dead centre ──
   transparent, so the dot ground reads through it                */
body.gate{overflow:hidden}
.lp{position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;
  align-items:center;padding:26px 22px 42px;transition:opacity 1.25s ease}
.lp.gone{opacity:0;pointer-events:none}
.lp-name{font-family:'PP Right Gothic','Helvetica Neue',Helvetica,sans-serif;
  font-size:clamp(26px,4.6vw,52px);line-height:1;letter-spacing:.02em;
  color:var(--ink);text-align:center;display:block}
.lp-rule{width:min(560px,86vw);height:1px;background:var(--ink);opacity:.5;
  margin:clamp(14px,2.4vw,20px) 0 0}
.lp-doors{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(12px,1.8vw,18px);width:100%}
.lp-doors a{display:grid;grid-template-columns:2.6em 1fr;align-items:baseline;
  gap:0 10px;width:min(360px,84vw);
  font-family:var(--toc);font-weight:400;
  font-size:clamp(18px,2.2vw,24px);letter-spacing:.005em;
  border:1px solid var(--ink);border-radius:3px;background:rgba(255,255,255,.86);
  padding:clamp(11px,1.5vw,15px) clamp(16px,2vw,22px) clamp(12px,1.6vw,16px);
  transition:color .16s,border-color .16s,background .16s}
.lp-doors a .rn{text-align:right;opacity:.62;font-variant-numeric:lining-nums}
.lp-doors a:hover,.lp-doors a:active{color:#c0202b;border-color:#c0202b;background:#fff}
.lp-doors a:hover .rn{opacity:1}
.lp-foot{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(0,0,0,.42);text-align:center}
@media(max-width:560px){
  .lp{padding:22px 18px 34px}
  .lp-doors a{grid-template-columns:2.3em 1fr}
}

/* ── roll-and-collapse: hover opens on desktop, tap toggles everywhere ── */
.rolls{position:relative;z-index:20;padding:8px 0 0;
  width:100%;max-width:880px;margin-inline:auto}
.roll{border-top:1px solid var(--ink)}
.rolls>.roll:last-child{border-bottom:1px solid var(--ink)}
.roll-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  width:100%;text-align:left;border:0;background:none;cursor:pointer;
  font-family:var(--toc);font-weight:400;color:var(--ink);
  font-size:clamp(19px,2.5vw,28px);letter-spacing:.015em;line-height:1.15;
  padding:clamp(13px,1.7vw,17px) 2px;transition:color .16s}
.roll-h::after{content:'+';font-family:'Space Mono',monospace;font-size:.52em;
  opacity:.45;transition:opacity .16s}
.roll.open>.roll-h::after{content:'\2013';opacity:.85}
.roll-h:hover,.roll.open>.roll-h{color:#c0202b}
.roll-h:hover::after{opacity:.85}
.roll-b{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .42s cubic-bezier(.4,0,.3,1)}
.roll.open>.roll-b{grid-template-rows:1fr}
.roll-i{overflow:hidden;min-height:0}
.roll-i>*:last-child{margin-bottom:clamp(14px,2vw,22px)}

/* nested chapter / category rolls */
.roll .roll{border-top:1px solid var(--hair);margin-left:clamp(0px,1.4vw,18px)}
.roll .roll .roll-h{font-size:clamp(12px,1.15vw,14px);letter-spacing:.1em;
  text-transform:uppercase;font-family:"Helvetica Neue",Helvetica,Arimo,Arial,sans-serif;
  padding:10px 2px;color:rgba(0,0,0,.62)}
.roll .roll .roll-h:hover,.roll .roll.open>.roll-h{color:#c0202b}

/* leaf rows */
.rrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 20px;
  align-items:baseline;padding:8px 2px 9px;border-bottom:1px solid var(--hair);
  font-size:12.5px;letter-spacing:.02em;text-transform:uppercase;line-height:1.35}
.rrow:last-child{border-bottom:0}
.rrow .rmeta{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.07em;
  color:rgba(0,0,0,.5);white-space:nowrap;text-align:right}
.rrow:hover{color:var(--blue)}
.rrow:hover .rmeta{color:var(--blue)}
.roll-out{display:inline-block;font-family:'Space Mono',monospace;font-size:9.5px;
  letter-spacing:.11em;text-transform:uppercase;color:rgba(0,0,0,.5);
  padding:12px 2px 4px}
.roll-out:hover{color:var(--blue)}
@media(max-width:560px){
  .rrow{grid-template-columns:minmax(0,1fr);gap:3px}
  .rrow .rmeta{text-align:left;white-space:normal}
}

/* ── home: plate above the rolls ── */
.homeplate{display:flex;justify-content:center;padding:6px 0 clamp(22px,3.4vw,38px)}
.homeplate a{display:block;max-width:min(148px,30vw);line-height:0;
  transition:transform .3s ease}
.homeplate a:hover{transform:translateY(-3px)}
.homeplate img{display:block;width:100%;height:auto}

/* ── ticker: Postmodern Tectonics writing, along the foot of every page ──
   `.footspace` already pushes it down, so no margin-top:auto here.        */
@keyframes tkr{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker{overflow:hidden;white-space:nowrap;margin:0 -14px;padding:7px 0;
  border-top:1px solid var(--hair);background:#fff;
  position:relative;z-index:100}
.ticker-track{display:inline-block;white-space:nowrap;animation:tkr 240s linear infinite;
  will-change:transform}
.ticker-track:hover{animation-play-state:paused}
.ticker-track a{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:rgba(0,0,0,.5);padding:0 22px}
.ticker-track a:hover{color:var(--blue)}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ── the landing: an empty dotted field between header and ticker ── */
.field{flex:1;min-height:46vh;position:relative;z-index:1}


/* ── the disco ball: the site's loading indicator ──
   Sits above everything, ignores the pointer, and spins by scrolling its
   facet grid sideways behind a circular clip — cheaper and steadier than
   rotating the sphere itself. Fades in so a fast load never flashes.   */
#disco{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.86);
  z-index:400;pointer-events:none;width:104px;opacity:0;visibility:hidden;
  transition:opacity .28s ease,transform .28s ease}
#disco.on{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
#disco svg{display:block;width:100%;height:auto;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.22))}
@keyframes db-turn{from{transform:translateX(0)}to{transform:translateX(-64px)}}
#disco .db-spin{animation:db-turn 2.6s linear infinite}
@media(prefers-reduced-motion:reduce){
  #disco .db-spin{animation:none}
  #disco{transition:opacity .28s ease}
}