/* Extracted from index.html so it satisfies style-src 'self'.
   Inline blocks are refused by the production CSP; that is deliberate,
   so keep new rules in this file rather than in a <style> tag. */

/* ══════════════════════════════════════════════════════════════════════════
   SITE B — THE MONOGRAPH

   A different ARGUMENT from site A, not a different colourway.
     A argues: every claim I make has a number attached to it.
     B argues: I think about this work, and here is the thinking.

   So the structure is a printed monograph. Each product is a numbered spread
   with one large plate, a case note, and an honest paragraph on what was hard.
   The evidence is not a metric, it is the quality of the reasoning.

   Ground is bright stock, deliberately far from site A's slate and from the
   cream that keeps recurring across this whole portfolio. Deep ultramarine is
   the only chroma, used the way a printer uses a second plate.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --stock:#FBFBF9;
  --stock-2:#F1F1ED;
  --ink:#14171C;
  --ink-2:#4A4F58;
  --ink-3:#5D636C;         /* measured: #787E88 was 3.94:1 on the stock and failed 38 elements. This is 5.06:1 on the darkest ground it sits on. */
  --rule:#D8D8D2;
  --blue:#1F3A93;          /* the second plate */
  --blue-soft:#E4E8F4;

  --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px; --s-10:140px;

  --f-display:"Fraunces",Georgia,"Times New Roman",serif;
  --f-text:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;

  --gut:clamp(20px,5vw,80px);
  --measure:34rem;
}
*,*::before,*::after{box-sizing:border-box}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body{
  margin:0;background:var(--stock);color:var(--ink);
  font-family:var(--f-text);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}   /* height:auto or the height="1000" attribute pins every screenshot at 1000px tall */
h1,h2,h3,p,dl,dd,figure,ul{margin:0}
ul{list-style:none;padding:0}
a{color:inherit}
:where(a,button):focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* one container, one right edge. The jury measured four different right
   boundaries inside a single 900px screen, which is what undid the whitespace. */
.wrap{max-width:1120px;margin-inline:auto;padding-inline:var(--gut)}
.title h1,.title__sub p,.essay__in,.close h2,.close p{max-width:none}

/* ── the colophon bar: a monograph states its own edition ─────────────── */
.colophon{
  border-bottom:1px solid var(--rule);
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
}
.colophon .wrap{display:flex;flex-wrap:wrap;gap:6px 28px;padding-block:12px}
.colophon .r{margin-left:auto}
@media (max-width:700px){ .colophon .r{margin-left:0} }

/* ── title page ───────────────────────────────────────────────────────── */
.title{padding-block:clamp(40px,6.5vw,86px) clamp(28px,4vw,52px);border-bottom:1px solid var(--rule)}
.title h1{
  font-family:var(--f-display);
  font-size:clamp(2.9rem,8.6vw,7.4rem);
  font-weight:600;line-height:.94;letter-spacing:-.028em;
  max-width:15ch;font-optical-sizing:auto;
}
.title h1 em{font-style:italic;color:var(--blue)}
.title__sub{
  margin-top:clamp(24px,3.4vw,44px);
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:var(--s-6) clamp(28px,5vw,90px);align-items:end;
}
.title__sub p{font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.5;color:var(--ink-2)}
.title__sub p b{color:var(--ink);font-weight:600}
.spec{display:grid;grid-template-columns:auto 1fr;gap:2px var(--s-4);font-size:14px}
.spec dt{color:var(--ink-3);white-space:nowrap}
.spec dd{color:var(--ink);font-weight:500}
/* the four numbers, on the title page, because a reader who bounces at the fold
   should still have left with evidence rather than an assertion of taste. */
.proof{
  grid-column:1/-1;margin-top:var(--s-5);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
}
.proof div{background:var(--stock);padding:12px 14px}
.proof dt{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.proof dd{
  font-family:var(--f-display);font-weight:600;font-size:clamp(1.4rem,2.4vw,1.95rem);
  letter-spacing:-.02em;margin-top:4px;line-height:1;
}
.proof dd span{
  display:block;font-family:var(--f-text);font-weight:400;font-size:12.5px;
  color:var(--ink-2);margin-top:5px;letter-spacing:0;
}
@media (max-width:820px){ .title__sub{grid-template-columns:minmax(0,1fr)} }

/* ── a spread ─────────────────────────────────────────────────────────────
   B2 stacked: heading, then a full-width plate, then body. That is the seam
   failure — one horizontal line separating all the type from all the figure —
   and it cost 1,570px per plate to deliver 110 words. Measured: 11 to 18px of
   page per word, against 4px/word in the essay block, which is the part that
   actually reads as substantial.

   So the plate and the writing now share horizontal space. Height becomes
   max(text, figure) instead of text + figure, which buys back roughly half
   the page, and the room goes back into evidence rather than into air.
   ────────────────────────────────────────────────────────────────────────── */
.spread{padding-block:clamp(30px,3.6vw,52px);border-bottom:1px solid var(--rule)}
.spread__no{
  font-family:var(--f-display);font-size:13px;font-weight:600;
  letter-spacing:.16em;color:var(--blue);margin-bottom:var(--s-3);
  display:flex;gap:14px;align-items:baseline;
}
.spread__no i{font-style:normal;color:var(--ink-3);letter-spacing:.1em}
.spread__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:var(--s-5) clamp(28px,4.2vw,64px);align-items:start;
}
.spread h2{
  font-family:var(--f-display);font-size:clamp(1.9rem,3.6vw,3rem);
  font-weight:600;line-height:1;letter-spacing:-.022em;
}
.spread h2 a{text-decoration:none;border-bottom:2px solid var(--blue-soft)}
.spread h2 a:hover{border-bottom-color:var(--blue)}
.spread__standfirst{
  margin-top:var(--s-3);
  font-size:clamp(1.02rem,1.15vw,1.16rem);line-height:1.45;color:var(--ink);
  max-width:38ch;
}
.spread__txt > p{margin-top:var(--s-4);color:var(--ink-2);font-size:16px}
.spread figure{margin:0}
.spread figure img{width:100%;border:1px solid var(--rule)}
.spread figcaption{
  margin-top:9px;font-size:12.5px;color:var(--ink-3);letter-spacing:.02em;
}
.spread figcaption b{color:var(--ink-2);font-weight:600}

/* the record: the evidence that was missing. Four rows of fact per plate,
   set as a definition list so it reads as a specification, not a caption. */
.fact{
  margin-top:var(--s-4);border-top:1px solid var(--rule);
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:0;font-size:13.5px;
}
.fact dt{
  padding:7px 0 0;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;
}
.fact dd{padding:7px 0 0;margin:0;color:var(--ink-2);border-bottom:1px solid var(--rule)}
.fact dt{border-bottom:1px solid var(--rule);padding-bottom:7px;padding-right:var(--s-5)}
.fact dd{padding-bottom:7px}
.fact dd b{color:var(--ink);font-weight:600}
/* status carries a glyph and a word, never colour alone */
.fact .live::before{content:"●";color:var(--blue);font-size:8px;margin-right:7px;vertical-align:2px}

/* the honest paragraph: what was actually hard */
.hard{
  border-left:2px solid var(--blue);padding-left:var(--s-4);margin-top:var(--s-5);
}
.hard h3{
  font-family:var(--f-display);font-size:1.02rem;font-weight:600;
  font-style:italic;color:var(--blue);margin-bottom:5px;
}
.hard p{font-size:15px;color:var(--ink-2)}
.tools{
  margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--rule);
  font-size:12.5px;color:var(--ink-3);letter-spacing:.02em;
}
.tools b{color:var(--ink-2);font-weight:600;margin-right:6px}
@media (max-width:900px){
  .spread__grid{grid-template-columns:minmax(0,1fr)}
  .spread__standfirst{max-width:none}
}
@media (max-width:520px){
  .fact{grid-template-columns:minmax(0,1fr);gap:0}
  .fact dt{border-bottom:0;padding-bottom:0}
  .fact dd{padding-top:2px}
}



/* ── the ticker: the only part of this page that is not hand written ─────
   Rendered from data/activity.json, which a scheduled job rebuilds from the
   real repo histories. Source lines only: generated output and research dumps
   are excluded, because the naive count is 441k and that number would not
   survive being asked about. The page says which it is, out loud. */
.tick{border-block:1px solid var(--ink);background:var(--stock-2)}
.tick .wrap{padding-block:clamp(24px,3.2vw,44px)}
.tick__hd{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-4);align-items:baseline;margin-bottom:var(--s-5)}
.tick__hd h2{font-family:var(--f-display);font-weight:600;font-size:clamp(1.4rem,2.7vw,2.1rem);letter-spacing:-.024em}
.tick__hd h2 em{font-style:italic;color:var(--blue)}
.tick__hd b{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:400}
.tick__now{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--ink);margin-bottom:var(--s-5);
}
.tick__now > div{background:var(--stock);padding:var(--s-4)}
.tick__now dt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.tick__now dd{
  margin:7px 0 0;font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.tick__now dd span{
  display:block;font-family:var(--f-text);font-weight:400;font-size:12.5px;
  color:var(--ink-2);margin-top:7px;letter-spacing:0;line-height:1.4;
}
/* the monthly series, as bars that are readable without colour */
.bars{display:grid;gap:2px}
.bar{
  display:grid;grid-template-columns:4.6rem minmax(0,1fr) auto;
  gap:var(--s-4);align-items:center;padding-block:5px;
}
.bar__m{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.bar__t{height:19px;background:var(--stock);border:1px solid var(--rule);position:relative;overflow:hidden}
.bar__f{position:absolute;inset:0 auto 0 0;background:var(--blue);opacity:.16;border-right:2px solid var(--blue)}
.bar__n{
  position:absolute;left:9px;top:50%;transform:translateY(-50%);
  font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;
}
.bar__c{font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.tick__note{margin-top:var(--s-4);font-size:12.5px;color:var(--ink-3);max-width:64ch}
@media (max-width:640px){
  .tick__hd{grid-template-columns:minmax(0,1fr)}
  .bar{grid-template-columns:3.9rem minmax(0,1fr);row-gap:0}
  .bar__c{grid-column:2;text-align:left;padding-bottom:4px}
}


/* ── the interview: ported, not rebuilt ──────────────────────────────────
   The backend (api/chat.js) and the client (js/chat.js) already exist and are
   hardened: Haiku 4.5 over a private corpus, canary post-filter, Upstash rate
   limiting, input caps, server-owned system prompt. None of that is touched.
   The client only requires five ids (chat-form, chat-input, chat-send,
   chat-log, chat-chips), so this is new markup against the same contract.

   The old styling belonged to the old site. Re-set in this page's language:
   a plate, like every other plate, so the assistant reads as part of the
   monograph rather than a widget dropped onto it. */
.talk{border-top:1px solid var(--rule);background:var(--stock-2)}
.talk .wrap{padding-block:clamp(36px,5vw,72px)}
.talk__hd{max-width:44rem;margin-bottom:clamp(20px,2.6vw,32px)}
.talk__hd h2{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.06;letter-spacing:-.024em;
}
.talk__hd h2 em{font-style:italic;color:var(--blue)}
.talk__hd p{margin-top:var(--s-4);color:var(--ink-2);max-width:var(--measure)}

.chat__card{border:1px solid var(--ink);background:var(--stock)}
.chat__log{
  min-height:220px;max-height:min(48vh,420px);overflow-y:auto;
  padding:clamp(16px,2.2vw,26px);display:flex;flex-direction:column;gap:var(--s-5);
}
.chat__log:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.chat__msg{display:grid;gap:5px}
.chat__msg-label{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.chat__msg--user{justify-items:end;text-align:right}
.chat__bubble{
  font-size:15.5px;line-height:1.55;color:var(--ink);max-width:56ch;
  border-left:2px solid var(--blue);padding-left:var(--s-4);
}
.chat__msg--user .chat__bubble{
  border-left:0;border-right:2px solid var(--rule);
  padding-left:0;padding-right:var(--s-4);color:var(--ink-2);
}
.chat__msg--error .chat__bubble{border-left-color:var(--ink-3);color:var(--ink-2)}
/* thinking state carries a word, never motion alone */
.chat__bubble--thinking{color:var(--ink-3)}
.chat__dots span{
  display:inline-block;width:4px;height:4px;margin-left:3px;border-radius:50%;
  background:var(--ink-3);animation:chatdot 1.1s infinite ease-in-out;
}
.chat__dots span:nth-child(2){animation-delay:.16s}
.chat__dots span:nth-child(3){animation-delay:.32s}
@keyframes chatdot{0%,60%,100%{opacity:.25}30%{opacity:1}}

.chat__chips{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:0 clamp(16px,2.2vw,26px) var(--s-4);
}
.chat__chips--compact{padding-bottom:var(--s-3)}
.chat__chip{
  font:inherit;font-size:13px;color:var(--ink-2);cursor:pointer;
  background:var(--stock);border:1px solid var(--rule);padding:7px 12px;
}
.chat__chip:hover{border-color:var(--blue);color:var(--blue)}
.chat__chip[disabled]{opacity:.45;cursor:default}

.chat__form{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-3);
  align-items:end;border-top:1px solid var(--rule);
  padding:var(--s-4) clamp(16px,2.2vw,26px);
}
.chat__input{
  font:inherit;font-size:15.5px;color:var(--ink);background:none;
  border:0;resize:none;padding:8px 0;max-height:140px;
}
.chat__input:focus{outline:none}
.chat__input::placeholder{color:var(--ink-3)}
.chat__send{
  font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
  background:var(--ink);color:var(--stock);border:1px solid var(--ink);
  padding:10px 20px;
}
.chat__send:hover{background:var(--blue);border-color:var(--blue)}
.chat__send[disabled]{opacity:.45;cursor:default}
.chat__note{
  margin-top:var(--s-4);font-size:13px;color:var(--ink-3);max-width:var(--measure);
}
.chat__note a{color:var(--ink-2)}
@media (max-width:560px){
  .chat__form{grid-template-columns:minmax(0,1fr)}
  .chat__send{width:100%}
}


/* ── the assistant, as a launcher ────────────────────────────────────────
   It first lived as a section near the foot of the page, which put it at
   9,357px on a 10,800px document. Almost nobody scrolls that far, so the
   best thing on the page was the least reachable thing on it.

   The trap here is that a floating chat launcher is a very well worn widget
   shape (round bubble, drop shadow, chirpy icon) and dropping one onto a
   monograph would read as third party software bolted to the page. So it is
   square, hairline, ink and blue, set in the page's own faces, and it says a
   word rather than only showing an icon.

   Both devices get the same gesture: tap or click to open. On a phone the
   panel becomes a sheet, because a 380px floating card on a 390px screen is
   a desktop layout wearing a costume. */
.ask{
  position:fixed;right:clamp(14px,2.2vw,28px);bottom:clamp(14px,2.2vw,28px);
  z-index:70;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-text);font-size:14.5px;font-weight:600;color:var(--stock);
  background:var(--ink);border:1px solid var(--ink);cursor:pointer;
  padding:13px 18px;box-shadow:0 6px 26px rgba(20,23,28,.18);
  transition:background .18s ease,border-color .18s ease;
}
.ask:hover{background:var(--blue);border-color:var(--blue)}
.ask__dot{
  width:7px;height:7px;border-radius:50%;background:var(--stock);flex:none;
}
/* one close control, not two: the panel header owns it */
html[data-ask="open"] .ask{display:none}

.panel{
  position:fixed;right:clamp(14px,2.2vw,28px);bottom:calc(clamp(14px,2.2vw,28px) + 62px);
  z-index:69;width:min(420px,calc(100vw - 28px));
  background:var(--stock);border:1px solid var(--ink);
  box-shadow:0 14px 44px rgba(20,23,28,.22);
  display:none;flex-direction:column;max-height:min(620px,calc(100vh - 120px));
}
.panel[data-open="1"]{display:flex}
@media (prefers-reduced-motion:no-preference){
  .panel[data-open="1"]{animation:panelIn .26s cubic-bezier(.2,.8,.3,1) both}
  @keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}
.panel__hd{
  padding:16px 18px;border-bottom:1px solid var(--rule);background:var(--stock-2);
  position:relative;
}
/* the sheet hides the launcher on a phone, so it carries its own way out */
.panel__close{
  position:absolute;top:10px;right:12px;font:inherit;font-size:22px;line-height:1;
  color:var(--ink-3);background:none;border:0;cursor:pointer;padding:6px 10px;
}
.panel__close:hover{color:var(--ink)}
.panel__hd h2{
  font-family:var(--f-display);font-weight:600;font-size:1.22rem;letter-spacing:-.018em;
}
.panel__hd h2 em{font-style:italic;color:var(--blue)}
.panel__hd p{margin-top:5px;font-size:12.5px;color:var(--ink-2)}
.panel__ft{
  padding:10px 18px 14px;border-top:1px solid var(--rule);
  font-size:11.5px;color:var(--ink-3);
}
.panel__ft a{color:var(--ink-2)}
/* on a phone it is a sheet, not a floating card */
@media (max-width:560px){
  .panel{
    left:0;right:0;bottom:0;width:100%;max-height:86vh;
    border-left:0;border-right:0;border-bottom:0;
  }
  .ask{right:14px;bottom:14px}
}

/* the inline invitation, so the assistant is discoverable without hunting */
.close__ask{
  margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:baseline;
}
.close__ask p{margin:0;color:var(--ink-2);max-width:40ch}
.close__ask button{
  font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;color:var(--blue);
  background:none;border:0;border-bottom:2px solid var(--blue-soft);padding:0 0 2px;
}
.close__ask button:hover{border-bottom-color:var(--blue)}

/* ══ GRAFTED ══════════════════════════════════════════════════════════════
   Round 3 produced three designs. This is the monograph's chassis, which won
   on look, carrying the two modules the other two beat it on.

     from THE SYSTEM : the decision matrix. It was the only module anywhere
                       that made the method concrete instead of asserting it.
     from THE LOG    : dated continuity. Specific, checkable, and it is the
                       only evidence that this is a habit and not a story.

   Both are re-set in this page's own type system. The matrix used a mono
   face on its home page; there is no mono here, so the structure comes
   across and the styling does not. Graft the idea, not the CSS.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── the method, as a matrix ──────────────────────────────────────────── */
.meth{padding-block:clamp(36px,5vw,72px);border-bottom:1px solid var(--rule);background:var(--stock-2)}
.meth__hd{margin-bottom:clamp(20px,2.6vw,34px);max-width:46rem}
.meth__hd h2{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.06;letter-spacing:-.024em;
}
.meth__hd h2 em{font-style:italic;color:var(--blue)}
.meth__hd p{margin-top:var(--s-4);color:var(--ink-2);max-width:var(--measure)}

.mx{border:1px solid var(--ink);background:var(--stock)}
.mx__hd,.mx__row{
  display:grid;
  grid-template-columns:2.6rem minmax(0,1.12fr) minmax(0,1fr) minmax(0,1fr);
  gap:0;
}
.mx__hd{border-bottom:1px solid var(--ink);background:var(--stock-2)}
.mx__hd > div{
  padding:10px var(--s-4);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);border-left:1px solid var(--rule);
}
.mx__hd > div:first-child{border-left:0}
/* the column that is the actual claim of the page gets the weight */
.mx__hd .mine,.mx__row .mine{border-left:2px solid var(--ink);border-right:2px solid var(--ink)}
.mx__hd .mine{color:var(--ink);font-weight:700;background:var(--blue-soft)}
.mx__row{border-top:1px solid var(--rule)}
.mx__row:first-of-type{border-top:0}
.mx__row > div{padding:var(--s-4);border-left:1px solid var(--rule)}
.mx__row > div:first-child{border-left:0}
/* the row's output, spanning the content columns, so no column has to stretch
   to match another one's length */
.mx__out{
  grid-column:2/-1;border-left:0!important;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 var(--s-4);
  align-items:baseline;background:var(--stock-2);
}
.mx__out b{
  margin:0;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;
}
.mx__out span{font-size:14px;color:var(--ink-2)}
.mx__n{
  font-family:var(--f-display);font-weight:600;font-size:1.25rem;color:var(--blue);
  display:flex;justify-content:center;font-variant-numeric:tabular-nums;
}
.mx__row h3{font-family:var(--f-display);font-weight:600;font-size:1.12rem;letter-spacing:-.012em;margin-bottom:5px}
.mx__row p{font-size:14.5px;color:var(--ink-2);line-height:1.5}
.mx__row .mine{background:var(--blue-soft)}
.mx__row .mine p{color:var(--ink)}
@media (max-width:940px){
  /* the header row cannot survive one column, so each cell carries its own key */
  .mx__hd{display:none}
  .mx__row{grid-template-columns:2.4rem minmax(0,1fr)}
  .mx__row > div:not(.mx__n){grid-column:2;border-left:0;padding-top:var(--s-3)}
  .mx__row > div:not(.mx__n):first-of-type{padding-top:var(--s-4)}
  .mx__row .mine{border-right:0;border-left:2px solid var(--ink);margin-left:0}
  .mx__out{grid-column:2;grid-template-columns:minmax(0,1fr);gap:4px}
  .mx__row .key::before{
    content:attr(data-key);display:block;font-size:10.5px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--ink-3);margin-bottom:5px;
  }
  .mx__n{padding-top:var(--s-4)}
}

/* ── the working log: continuity, compressed ──────────────────────────── */
.wlog{padding-block:clamp(36px,5vw,72px);border-bottom:1px solid var(--rule)}
.wlog__hd{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-4);align-items:baseline;margin-bottom:var(--s-5)}
.wlog__hd h2{font-family:var(--f-display);font-weight:600;font-size:clamp(1.55rem,3vw,2.35rem);letter-spacing:-.022em}
.wlog__hd h2 em{font-style:italic;color:var(--blue)}
.wlog__hd b{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:400}
.wrows{border-top:1px solid var(--ink)}
.wr{
  display:grid;grid-template-columns:5.2rem 7.6rem minmax(0,1fr);
  gap:var(--s-3) var(--s-5);padding-block:12px;border-bottom:1px solid var(--rule);
}
.wr:hover{background:var(--stock-2)}
.wr__d{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums;padding-top:2px}
.wr__p span{font-size:11.5px;letter-spacing:.05em;border:1px solid var(--rule);padding:2px 8px;color:var(--ink-2);white-space:nowrap}
.wr h3{font-size:15.5px;font-weight:600;letter-spacing:-.008em}
.wr h3 mark{
  background:none;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);border:1px solid var(--blue-soft);padding:2px 7px;margin-left:10px;
  vertical-align:2px;white-space:nowrap;
}
.wr p{margin-top:3px;font-size:14.5px;color:var(--ink-2);max-width:74ch}
@media (max-width:820px){
  .wlog__hd{grid-template-columns:minmax(0,1fr)}
  .wr{grid-template-columns:minmax(0,1fr);gap:4px}
  .wr__d{padding-top:0}
  .wr__p span{display:inline-block}
}

/* ── the method essay ─────────────────────────────────────────────────── */
.essay{padding-block:clamp(40px,6vw,84px);border-bottom:1px solid var(--rule);background:var(--stock-2)}
.essay__in{max-width:var(--measure);margin-inline:auto}
.essay h2{
  font-family:var(--f-display);font-size:clamp(1.8rem,3.6vw,2.9rem);
  font-weight:600;line-height:1.05;letter-spacing:-.02em;margin-bottom:var(--s-5);
}
.essay p{margin-bottom:var(--s-4);color:var(--ink-2)}
.essay p:first-of-type{
  font-size:1.2rem;color:var(--ink);
}
.essay p:first-of-type::first-letter{
  font-family:var(--f-display);float:left;font-size:3.6em;line-height:.82;
  padding-right:.08em;font-weight:600;color:var(--blue);
}

/* ── record: the work history as a printed table ──────────────────────── */
.record{padding-block:clamp(40px,6vw,84px);border-bottom:1px solid var(--rule)}
.record h2{
  font-family:var(--f-display);font-size:clamp(1.8rem,3.6vw,2.9rem);
  font-weight:600;letter-spacing:-.02em;margin-bottom:clamp(24px,3vw,40px);
}
.record table{width:100%;border-collapse:collapse;font-size:15px}
.record th{
  text-align:left;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;padding-bottom:10px;border-bottom:1px solid var(--ink);
}
.record td{padding:16px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.record td:first-child{color:var(--ink-3);white-space:nowrap;padding-right:var(--s-5);width:1%}
.record td b{font-weight:600;display:block}
.record td span{color:var(--ink-2);font-size:14px}
.record em{font-style:normal;color:var(--blue);font-weight:600}
@media (max-width:700px){
  .record thead{display:none}
  .record td{display:block;border:0;padding:4px 0}
  .record tr{display:block;padding-block:16px;border-bottom:1px solid var(--rule)}
}

/* ── close ────────────────────────────────────────────────────────────── */
.close{padding-block:clamp(40px,6vw,84px)}
.close h2{
  font-family:var(--f-display);font-size:clamp(2rem,5vw,3.6rem);
  font-weight:600;line-height:1.02;letter-spacing:-.024em;max-width:16ch;
}
.close h2 em{font-style:italic;color:var(--blue)}
.close p{margin-top:var(--s-5);max-width:46ch;color:var(--ink-2)}
.close__acts{margin-top:var(--s-6);display:flex;flex-wrap:wrap;gap:var(--s-3)}
.btn{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-size:15px;font-weight:600;padding:13px 22px;border:1px solid var(--ink);
}
.btn--fill{background:var(--ink);color:var(--stock)}
.btn--fill:hover{background:var(--blue);border-color:var(--blue)}
.btn--line:hover{background:var(--blue-soft)}
.foot{
  border-top:1px solid var(--rule);padding-block:var(--s-6) var(--s-8);
  font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);
}
.foot .wrap{display:flex;flex-wrap:wrap;gap:6px 28px}
.foot .r{margin-left:auto}
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }

/* ══════════════════════════════════════════════════════════════════════════
   INTRO B — IMPOSITION

   A different mechanic and a different argument from A, not a different speed.

     A argues: this is a printed object, and you are watching it print.
     B argues: this is a bound document, and you are watching it open.

   The strongest entry sequence pattern is spatial continuity: the loading
   element physically BECOMES a page element rather than a curtain that lifts
   off something already there. So this opens as a single hairline rule at the
   centre of an empty sheet, which is the only mark on the page. The rule then
   travels up to the top of the page and IS the colophon border. The masthead
   writes into it. Nothing is thrown away.

   The type sets per line rather than per character: a compositor sets a line
   at a time, and per-character reveals read as a website effect while
   per-line reads as typesetting.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  html[data-intro="run"] body > * { opacity: 0 }
  html[data-intro="run"] .imp-sheet { opacity: 1 }

  .imp-sheet {
    position: fixed; inset: 0; z-index: 90; background: var(--stock);
    pointer-events: none;
  }
  /* the one mark on the sheet. It becomes the colophon rule. */
  .imp-rule {
    position: absolute; left: 50%; top: 50%; height: 1px; width: 0;
    background: var(--ink); transform: translate(-50%, -50%);
    will-change: width, top, transform;
  }
  /* the name sets above the rule, the way a title page is set */
  .imp-nm {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%);
    margin-top: -18px; white-space: nowrap;
    font-family: var(--f-display); font-weight: 600;
    font-size: clamp(1.6rem, 4vw, 2.9rem); letter-spacing: -.03em; color: var(--ink);
  }
  .imp-nm i { font-style: normal; display: inline-block; opacity: 0; will-change: opacity, transform }
  .imp-sub {
    position: absolute; left: 50%; top: 50%; transform: translateX(-50%);
    margin-top: 16px; white-space: nowrap; opacity: 0;
    font-family: var(--f-text); font-size: 12px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ink-3);
  }
}