/* Nordglade Public Laboratory — design system
   Route B · Register. Newsreader (voice) + Martian Mono (machine).
   Paper and mineral are equal-status modes. Offset register channel.

   Revision 3 — mobile-first architecture:
   · base styles describe the SMALL screen; every query is min-width and adds
     structure upward. No max-width queries remain.
   · breakpoints: 421 / 561 / 621 / 761 / 821 / 901 / 1041
   · every grid child keeps min-width:0 and every 1fr is minmax(0,1fr)
   · long mono strings wrap rather than widen their track */

/* ——————————————————————————— faces ———————————————————————————
   Self-hosted. A page on this site makes no request to a third party,
   fonts included: a reader's address is never handed to anyone to read
   the argument for inspectable software.
   Both families are SIL OFL 1.1 and the licences ship beside the files
   in fonts/. These are the same latin-subset variable cuts Google
   served, fetched once and committed — Newsreader v26 (one file per
   style, wght 200–800 and opsz 6–72 in the file) and Martian Mono v6
   (one file, wght 100–800, SemiExpanded width instance).
   The declared weight ranges below are narrower than the files on
   purpose: they are the ranges the old hosted stylesheet declared, so
   an unintended bold clamps to 600 or 500 exactly as it does now
   instead of reaching a heavier cut nobody designed against.
   unicode-range is the subset boundary as fetched. → (U+2192) sits
   outside it and outside both fonts, so it falls back — as it already
   did. */
@font-face{
  font-family:"Newsreader";
  font-style:normal;
  font-weight:300 600;
  font-display:swap;
  src:url(fonts/newsreader-v26-latin-var.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Newsreader";
  font-style:italic;
  font-weight:300 600;
  font-display:swap;
  src:url(fonts/newsreader-v26-latin-italic-var.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Martian Mono";
  font-style:normal;
  font-weight:300 500;
  font-stretch:100%;
  font-display:swap;
  src:url(fonts/martian-mono-v6-latin-var.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ——————————————————————————— tokens ——————————————————————————— */
:root{
  --ns:"Newsreader",Georgia,"Times New Roman",serif;
  --mm:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --measure:680px;--channel:168px;--maxw:1180px;
  --gut:clamp(16px,4vw,48px);--gap:clamp(18px,4vw,48px);
  --band:clamp(40px,7vw,96px);
}
:root,[data-theme="light"]{
  color-scheme:light;
  --ground:#F4F2EC;--plate:#FBFAF6;--sunk:#EDE8DE;
  --ink:#111311;--body:#2A2C29;--clay:#655C50;--faint:#6C6458;
  --accent:#24402F;--accent-ink:#FBFAF6;--accent-soft:#24402F12;
  --rule:#C9C6BC;--fine:#DEDAD0;
  --code-bg:#101410;--code-ink:#E4E9E2;--code-dim:#7D8A7C;--code-grn:#4ADE80;--code-rule:#2A312B;
}
[data-theme="dark"]{
  color-scheme:dark;
  --ground:#0F1311;--plate:#171C19;--sunk:#1E211C;
  --ink:#F0EDE4;--body:#DAD6CB;--clay:#A79D91;--faint:#989085;
  --accent:#84B392;--accent-ink:#0F1311;--accent-soft:#84B39216;
  --rule:#2A312C;--fine:#20251F;
  --code-bg:#0A0D0A;--code-ink:#E4E9E2;--code-dim:#828F81;--code-grn:#5BE68D;--code-rule:#222A23;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--body);font-family:var(--ns);font-size:17px;line-height:1.6;font-variation-settings:"opsz" 17;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background .25s ease,color .25s ease}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.15;color:var(--ink);font-variation-settings:"opsz" 40;overflow-wrap:break-word}
p{margin:0;overflow-wrap:break-word}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--accent) 32%,transparent);transition:border-color .15s ease,color .15s ease;overflow-wrap:break-word}
a:hover{border-bottom-color:var(--accent)}
a.plain{border-bottom:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
::selection{background:var(--accent-soft)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ——————————————————————————— utility type ——————————————————————————— */
.mono{font-family:var(--mm)}
.mark-label{font-family:var(--mm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);line-height:1.7}
.mark-label.a{color:var(--accent)}
.interp{font-style:italic;color:var(--clay)}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-ink);font-family:var(--mm);font-size:12px;letter-spacing:.07em;text-transform:uppercase;padding:11px 16px;z-index:200;border-bottom:0}
.skip:focus{left:8px;top:8px}

/* ——————————————————————————— shell ———————————————————————————
   Base: the nav is its own full-width row beneath the wordmark, so the
   destinations stay as readable text at any width. It moves inline at 621. */
.topbar{position:sticky;top:0;z-index:60;background:color-mix(in oklab,var(--ground) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--fine)}
.topbar-in{max-width:var(--maxw);margin:0 auto;padding:12px var(--gut);display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;min-width:0}
.wordmark{display:flex;align-items:center;gap:9px;font-family:var(--ns);font-size:17px;color:var(--ink);border-bottom:0;letter-spacing:-0.01em;min-width:0}
.wordmark:hover{border-bottom:0}
.wordmark .dot{width:11px;height:11px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.wordmark b{font-weight:500;white-space:nowrap}
.nav{display:flex;order:3;width:100%;margin-left:0;border-top:1px solid var(--fine);padding-top:9px;gap:2px 4px;flex-wrap:wrap;min-width:0}
.nav a{font-family:var(--mm);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--clay);padding:7px 9px;border-bottom:0;border-radius:2px;white-space:nowrap}
.nav a:hover{color:var(--ink);background:var(--sunk)}
.nav a[aria-current="page"]{color:var(--accent);background:var(--accent-soft)}
.tgl{background:none;border:1px solid var(--rule);color:var(--clay);font-family:var(--mm);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;padding:8px 13px;border-radius:999px;cursor:pointer;flex:0 0 auto;white-space:nowrap;margin-left:auto}
.tgl:hover{border-color:var(--ink);color:var(--ink)}

/* ——————————————————————————— page grid ———————————————————————————
   Base: one column, the register channel running inline above its band.
   At 901 the channel takes its own column and the measure offsets right. */
.page{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);min-width:0}
.band{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding-block:var(--band);border-bottom:1px solid var(--fine);min-width:0}
.band>*{min-width:0}
.band>.ch,.band>.co,.band>.wide,.band>.full{grid-column:1}
.band.tight{padding-block:clamp(26px,4vw,52px)}
.band.last{border-bottom:0}
.ch{display:flex;flex-flow:row wrap;align-items:baseline;gap:7px 18px;padding-top:0;min-width:0}
.ch .n{font-family:var(--mm);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.ch .k{font-family:var(--mm);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);line-height:1.5;overflow-wrap:break-word}
.ch .k b{display:block;color:var(--body);font-weight:400;letter-spacing:.02em;text-transform:none;font-size:13px;margin-left:0;overflow-wrap:break-word}
/* the channel label IS the section title, so it is marked up as the heading.
   Martian Mono carries no optical-size axis — clear the inherited setting. */
.ch h2.k,.ch h3.k{font-weight:400;font-variation-settings:normal}
/* evidence exception: the recording earns the full container width, because the
   measured legibility floor for interface text is around 820px. Nothing else breaks out. */
.band.bleed{grid-template-columns:minmax(0,1fr)}
.band.bleed>.ch{margin-bottom:16px}
.band.bleed>.full{grid-column:1}

/* ——————————————————————————— display type ——————————————————————————— */
.display{font-size:clamp(28px,4.6vw,54px);letter-spacing:-0.022em;line-height:1.1;font-variation-settings:"opsz" 60;color:var(--ink);max-width:30ch;text-wrap:pretty;overflow-wrap:break-word}
.display em{font-style:italic}
.h-page{font-size:clamp(25px,3.8vw,42px);letter-spacing:-0.02em;font-variation-settings:"opsz" 46;max-width:28ch;text-wrap:pretty}
.h-sec{font-size:clamp(19px,2.4vw,26px);letter-spacing:-0.015em;font-variation-settings:"opsz" 30;max-width:34ch;text-wrap:pretty}
.h-sub{font-size:18px;font-weight:500;letter-spacing:-0.01em;color:var(--ink)}
.lede{font-size:clamp(17px,1.9vw,20px);line-height:1.55;color:var(--clay);max-width:60ch;text-wrap:pretty}
.prose>p{max-width:66ch;text-wrap:pretty}
.prose>p+p{margin-top:14px}
.prose b,.prose strong{font-weight:600;color:var(--ink)}
.stance{font-size:clamp(21px,3vw,34px);line-height:1.3;letter-spacing:-0.018em;color:var(--ink);max-width:34ch;font-variation-settings:"opsz" 40;text-wrap:pretty}
/* Subcopy under the thesis — deliberately smaller and quieter than .stance so it
   reads as an explanation of where the standard applies, not as a third claim.
   It describes what software does; it must never describe what is on offer. */
.hero-sub{font-size:clamp(16.5px,1.9vw,19px);line-height:1.55;color:var(--clay);max-width:52ch;margin-top:clamp(16px,2.2vw,24px);text-wrap:pretty}

/* ——————————————————————————— the fixed four-part record ——————————————————————————— */
.record{border-top:1px solid var(--ink);margin-top:8px}
.slot{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:clamp(18px,2.6vw,26px) 0;border-bottom:1px solid var(--fine);min-width:0}
.slot>*{min-width:0}
.slot:last-child{border-bottom:1px solid var(--ink)}
.slot-n{font-family:var(--mm);font-size:11.5px;letter-spacing:.06em;color:var(--accent);padding-top:0}
.slot-q{font-size:clamp(18px,2.2vw,23px);letter-spacing:-0.015em;color:var(--ink);margin-bottom:12px;font-variation-settings:"opsz" 28}
.slot-b{max-width:64ch;min-width:0}
.slot-b>*+*{margin-top:11px}
/* compact method: number, question and gloss on one line from 761 up */
.record.compact{border-top:1px solid var(--rule)}
.record.compact .slot{grid-template-columns:minmax(0,1fr);gap:8px 20px;padding:15px 0;align-items:baseline}
.record.compact .slot:last-child{border-bottom:1px solid var(--rule)}
.record.compact .slot-n{padding-top:2px}
.record.compact .slot-q{font-size:17.5px;margin-bottom:0;letter-spacing:-0.01em;font-variation-settings:"opsz" 22}
.record.compact .slot-b{font-size:15.5px;line-height:1.55;color:var(--clay);max-width:58ch}
.hero-attrib{font-family:var(--mm);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-top:clamp(20px,3vw,32px);display:flex;gap:12px;align-items:center;flex-wrap:wrap;line-height:1.7}
.hero-attrib::before{content:"";width:26px;height:1px;background:var(--rule);flex:0 0 auto}
.hero-attrib b{color:var(--body);font-weight:400}
/* closing statement: the homepage returns to its own idea at display scale */
.close-line{margin-top:clamp(32px,5vw,60px);padding-top:clamp(24px,3.5vw,36px);border-top:1px solid var(--rule)}
.close-line p{font-family:var(--ns);font-size:clamp(22px,3.4vw,34px);line-height:1.25;letter-spacing:-0.02em;color:var(--ink);max-width:26ch;font-variation-settings:"opsz" 36}
.close-line p em{font-style:italic;display:inline-block}

/* evidence text — machine-emitted, mono, inside a plate */
.ev{font-family:var(--mm);font-size:12.5px;line-height:1.85;background:var(--code-bg);color:var(--code-ink);border:1px solid var(--code-rule);border-radius:2px;padding:14px 15px;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}
.ev .dim{color:var(--code-dim)}
.ev .grn{color:var(--code-grn)}
.ev-cap{font-family:var(--mm);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);margin-top:9px;line-height:1.7}

/* pending content — visibly marked, never mistaken for finished text */
.ph{display:block;border:1px dashed var(--accent);border-radius:2px;background:var(--accent-soft);padding:13px 15px;min-width:0}
.ph-tag{font-family:var(--mm);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:500;display:block;margin-bottom:9px}
.ph-b{font-family:var(--mm);font-size:12.5px;line-height:1.8;color:var(--body);overflow-wrap:break-word}
.ph-b em{font-family:var(--ns);font-style:italic;font-size:15.5px;color:var(--clay)}
.ph-legend{display:flex;gap:11px;align-items:flex-start;font-family:var(--mm);font-size:11.5px;line-height:1.7;color:var(--clay);border:1px dashed var(--rule);border-radius:2px;padding:13px 15px;min-width:0}
.ph-legend .sw{width:16px;height:16px;border:1px dashed var(--accent);background:var(--accent-soft);flex:0 0 auto;margin-top:2px;border-radius:2px}

/* ——————————————————————————— media plate — 2:1, never 16:9 ——————————————————————————— */
/* Media plate. The aspect ratio belongs to the artifact, not to the system:
   each recording sets --ar to its own dimensions so nothing is letterboxed or
   cropped to a house format. Entry 01's 2:1 is the default. */
.plate{border:1px solid var(--rule);background:var(--plate);border-radius:2px;overflow:hidden;min-width:0}
.plate-media{aspect-ratio:var(--ar,1920/962);background:#0A0D0A;position:relative;display:block}
.plate-media video,.plate-media img{width:100%;height:100%;max-width:100%;object-fit:contain;display:block}
.plate-bar{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;padding:12px 15px;border-top:1px solid var(--fine);font-family:var(--mm);font-size:11.5px;letter-spacing:.04em;color:var(--faint);line-height:1.7;min-width:0}
.plate-bar b{color:var(--body);font-weight:400}
.plate-bar>span{min-width:0;overflow-wrap:break-word}
.figcap{font-family:var(--mm);font-size:12.5px;line-height:1.8;color:var(--clay);margin-top:12px;max-width:62ch;overflow-wrap:break-word}
.figcap .prov{color:var(--faint)}

/* ——————————————————————————— scroll reveal ———————————————————————————
   Progressive enhancement: the pre-reveal state exists only under html.js,
   so with JavaScript unavailable every band renders visible. Only opacity
   and transform animate — no layout-affecting property. */
:root{--rv-ease:cubic-bezier(0.16,1,0.3,1);--rv-dur:620ms;--rv-shift:20px;--rv-stagger:110ms}
[id],.band{scroll-margin-top:clamp(70px,12vh,120px)}
html.js .reveal>*{transition:opacity var(--rv-dur) var(--rv-ease),transform var(--rv-dur) var(--rv-ease)}
html.js .reveal:not(.is-visible)>*{opacity:0;transform:translateY(var(--rv-shift))}
html.js .reveal.is-visible>.co,
html.js .reveal.is-visible>.wide,
html.js .reveal.is-visible>.full{transition-delay:var(--rv-stagger)}
/* the hero reveals on load, never on scroll */
html.js .reveal.hero>*{--rv-shift:12px}
/* interaction must never wait on motion */
.topbar,.topbar *,.skip,.plate-media,.plate-media *{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
  html.js .reveal:not(.is-visible)>*{opacity:1;transform:none}
  html.js .reveal>*{transition:none;transition-delay:0ms}
}
/* Staggered items: cards on the portfolio, slots inside an entry record.
   The observed unit is the ITEM, not its container — a two-card band is taller
   than the viewport, so revealing the container by its top edge means the lower
   card has finished animating before the reader ever reaches it. Items arriving
   together still step via the nth-child delays below. */
html.js .stagger>.card,html.js .record.stagger>.slot{transition:opacity var(--rv-dur) var(--rv-ease),transform var(--rv-dur) var(--rv-ease)}
html.js .stagger>.card:not(.is-visible),html.js .record.stagger>.slot:not(.is-visible){opacity:0;transform:translateY(var(--rv-shift))}
html.js .stagger>*:nth-child(2){transition-delay:90ms}
html.js .stagger>*:nth-child(3){transition-delay:180ms}
html.js .stagger>*:nth-child(4){transition-delay:270ms}
@media (prefers-reduced-motion:reduce){
  html.js .stagger>.card:not(.is-visible),html.js .record.stagger>.slot:not(.is-visible){opacity:1;transform:none}
  html.js .stagger>.card,html.js .record.stagger>.slot{transition:none;transition-delay:0ms}
}

/* ——————————————————————————— experiment card — record sheet ——————————————————————————— */
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,3vw,30px);min-width:0}
.cards>*{min-width:0}
/* two columns only when several real entries exist and the viewport allows */
.cards.multi{grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr))}
.card{border:1px solid var(--rule);background:var(--plate);border-radius:2px;display:flex;flex-direction:column;min-width:0;transition:border-color .18s ease,background .18s ease}
.card:hover{border-color:var(--accent)}
.card:focus-within{outline:2px solid var(--accent);outline-offset:4px}
.card-strip{display:flex;flex-wrap:wrap;gap:9px 18px;align-items:baseline;padding:13px clamp(16px,2.4vw,22px);border-bottom:1px solid var(--fine);font-family:var(--mm);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);line-height:1.7}
.card-no{color:var(--accent);font-weight:500;font-size:13px;letter-spacing:.02em}
.card-status{color:var(--body);border:1px solid var(--rule);padding:3px 9px;border-radius:2px;white-space:nowrap}
.card-strip .right{margin-left:auto;display:flex;gap:9px 16px;flex-wrap:wrap}
/* the frame is hidden until there is width for it to mean anything (1041) */
.card-body{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,34px);padding:clamp(20px,3vw,34px)}
.card.featured .card-body{grid-template-columns:minmax(0,1fr)}
.card-title{font-size:clamp(23px,3.1vw,36px);letter-spacing:-0.022em;font-variation-settings:"opsz" 42;line-height:1.1;margin-bottom:15px}
.card-title a{color:var(--ink);border-bottom:1px solid transparent}
.card-title a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.card-inquiry{font-style:italic;color:var(--clay);font-size:clamp(16.5px,1.8vw,19px);line-height:1.5;max-width:46ch;margin-bottom:18px;text-wrap:pretty}
.card-obs{font-size:16px;line-height:1.6;color:var(--body);max-width:52ch;text-wrap:pretty}
.card-frame{display:none;min-width:0;flex-direction:column;gap:9px}
.card-frame img{width:100%;aspect-ratio:var(--ar,1920/962);object-fit:contain;border:1px solid var(--rule);border-radius:2px;background:#0A0D0A}
.card-frame .cap{font-family:var(--mm);font-size:10.5px;line-height:1.7;color:var(--faint);letter-spacing:.03em}
.card-limit{border-top:1px solid var(--fine);padding:15px clamp(16px,2.4vw,22px);display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:baseline;background:var(--accent-soft)}
.card-limit .lk{font-family:var(--mm);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);font-weight:500;white-space:nowrap}
.card-limit .lb{font-size:15.5px;line-height:1.5;color:var(--ink);max-width:64ch;text-wrap:pretty}
.card-open{border-top:1px solid var(--fine);padding:14px clamp(16px,2.4vw,22px);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.card-open .meta{font-family:var(--mm);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.open-link{font-family:var(--mm);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--accent);border-bottom:1px solid var(--accent);padding:10px 15px;border-radius:2px;display:inline-flex;align-items:center;gap:10px;color:var(--accent);white-space:nowrap}
.open-link:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.open-link .arw{font-family:var(--mm);transition:transform .18s ease}
.card:hover .open-link .arw{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.card:hover .open-link .arw{transform:none}}

/* ——————————————————————————— portfolio index: text-led ———————————————————————————
   Base: one column. 421 adds the entry number as a gutter. 821 adds the
   right-hand status column. Year groups appear once the record spans years. */
.ledger{border-top:1px solid var(--ink);margin-top:6px}
.ledger-year{display:flex;align-items:baseline;gap:14px;padding:22px 0 10px;font-family:var(--mm);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--fine)}
.ledger-year .count{color:var(--faint);letter-spacing:.06em}
.entry{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:clamp(22px,3.4vw,34px) 0;border-bottom:1px solid var(--fine);align-items:start;min-width:0}
.entry>*{min-width:0}
.entry:last-of-type{border-bottom:1px solid var(--ink)}
.entry-n{font-family:var(--mm);font-size:14px;color:var(--accent);letter-spacing:.02em;padding-top:0}
.entry-t{font-size:clamp(21px,2.8vw,30px);letter-spacing:-0.02em;font-variation-settings:"opsz" 34;margin-bottom:10px}
.entry-t a{color:var(--ink);border-bottom:1px solid transparent}
.entry-t a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.entry-q{font-style:italic;color:var(--clay);font-size:17px;line-height:1.5;max-width:56ch;margin-bottom:14px;text-wrap:pretty}
.entry-meta{display:flex;flex-wrap:wrap;gap:7px 16px;font-family:var(--mm);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);line-height:1.7}
.entry-side{grid-column:1;font-family:var(--mm);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);text-align:left;line-height:1.85;padding-top:0;overflow-wrap:break-word}
.entry-side b{display:block;color:var(--accent);font-weight:500}
.ledger-end{font-family:var(--mm);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding-top:18px;display:flex;gap:12px;align-items:center;line-height:1.7;overflow-wrap:break-word}
.ledger-end::before{content:"";width:26px;height:1px;background:var(--rule);flex:0 0 auto}

/* ——————————————————————————— small parts ——————————————————————————— */
.kv{border-top:1px solid var(--rule)}
.kv-row{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;padding:14px 0;border-bottom:1px solid var(--fine);min-width:0}
.kv-row>*{min-width:0}
.kv-k{font-family:var(--mm);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);padding-top:0;line-height:1.7}
.kv-v{font-size:16px;line-height:1.55;max-width:64ch;overflow-wrap:break-word}
.kv-v code{font-family:var(--mm);font-size:12.5px;background:var(--sunk);padding:1px 5px;border-radius:2px;overflow-wrap:anywhere}
.limit{border-left:2px solid var(--accent);background:var(--accent-soft);padding:16px 18px;border-radius:0 2px 2px 0;min-width:0}
.limit-t{font-family:var(--mm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:10px}
.limit-b{font-size:16.5px;line-height:1.55;color:var(--ink);max-width:62ch;text-wrap:pretty}
details.disc{border-top:1px solid var(--fine);padding-top:2px}
details.disc summary{cursor:pointer;list-style:none;font-family:var(--mm);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--clay);padding:15px 0;display:flex;align-items:center;gap:10px;line-height:1.6}
details.disc summary::-webkit-details-marker{display:none}
details.disc summary::after{content:"+";font-family:var(--mm);font-size:14px;color:var(--accent);flex:0 0 auto}
details.disc[open] summary::after{content:"–"}
details.disc summary:hover{color:var(--ink)}
.disc-body{padding-bottom:20px}
.bnote{padding:15px 0;border-top:1px solid var(--fine)}
.bnote:first-child{border-top:0}
.bnote-h{display:flex;gap:11px;align-items:baseline;flex-wrap:wrap;margin-bottom:9px;min-width:0}
.bnote-id{font-family:var(--mm);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:3px 8px;border-radius:2px;white-space:nowrap;flex:0 0 auto}
.bnote-t{font-size:16px;font-weight:500;color:var(--ink);min-width:0}
.bnote-b{font-size:15.5px;line-height:1.55;color:var(--clay);max-width:66ch}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-family:var(--mm);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--rule);color:var(--clay);padding:5px 10px;border-radius:2px}
.chip.a{border-color:var(--accent);color:var(--accent)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:clamp(18px,3vw,34px);min-width:0}
.cols>*{min-width:0}
.col-k{font-family:var(--mm);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;line-height:1.6}
.col-b{font-size:15.5px;line-height:1.55;color:var(--clay);max-width:38ch}
.rule{border:0;border-top:1px solid var(--fine);margin:clamp(24px,4vw,40px) 0}
.scroll-x{overflow-x:auto;min-width:0;-webkit-overflow-scrolling:touch}

/* ——————————————————————————— rhythm ———————————————————————————
   The site's default density is uniform: channel plus measure, band after band.
   `.air` is the deliberate exception — a band carrying one statement and a lot
   of space, placed between two dense bands to give the page dynamic range.
   Rule: never two in a row, and never more than one per page per screenful. */
.band.air{padding-block:clamp(52px,9vw,124px)}

/* A finding at display scale. NOT a quotation: no quote marks, because the
   verbatim interview lines are held in the record below until checked against
   the source. This states what the artifact established, and says whose it is. */
.finding{font-size:clamp(24px,4.2vw,42px);line-height:1.2;letter-spacing:-0.022em;color:var(--ink);max-width:30ch;font-variation-settings:"opsz" 44;text-wrap:pretty}
.finding-who{font-family:var(--mm);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-top:clamp(18px,2.6vw,28px);display:flex;align-items:center;gap:12px;flex-wrap:wrap;line-height:1.7}
.finding-who::before{content:"";width:26px;height:1px;background:var(--accent);flex:0 0 auto}
.finding-note{font-family:var(--mm);font-size:11.5px;line-height:1.75;color:var(--clay);margin-top:clamp(20px,3vw,32px);padding-top:16px;border-top:1px solid var(--fine);max-width:64ch}

/* Homepage evidence plate. Gated to ≥901px on purpose: below that the frame is
   too narrow for interface text to be legible, and an illegible screenshot is
   decoration. Nothing lives only here — the entry page carries it at full size. */
.evidence-band{display:none}

/* ——————————————————————————— footer — bibliographic, no funnel ——————————————————————————— */
.foot{border-top:1px solid var(--ink);margin-top:clamp(28px,5vw,64px)}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:clamp(28px,4vw,48px) var(--gut) clamp(40px,6vw,72px);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap);min-width:0}
.foot-in>*{min-width:0}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:24px;min-width:0}
.foot-cols>*{min-width:0}
.foot .fk{font-family:var(--mm);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:8px;line-height:1.6}
.foot .fv{font-size:15px;line-height:1.55;color:var(--clay);overflow-wrap:break-word}
.foot .fv a{color:var(--clay);border-bottom-color:color-mix(in oklab,var(--clay) 30%,transparent)}
.foot .fv a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ═══════════════════════════ 421px — small phone → phone ═══════════════════════════ */
@media (min-width:421px){
  .entry{grid-template-columns:48px minmax(0,1fr);gap:12px}
  .entry-n{padding-top:5px}
  .entry-side{grid-column:2;padding-top:4px}
}

/* ═══════════════════════════ 561px — phone → large phone ═══════════════════════════ */
@media (min-width:561px){
  .nav a{font-size:11.5px;padding:7px 11px}
  .tgl{font-size:11px}
  .ch .n{font-size:11px}
  .ch .k{font-size:10.5px}
  .ch .k b{display:inline;margin-left:6px;font-size:12.5px}
  .slot{grid-template-columns:30px minmax(0,1fr);gap:16px}
  .slot-n{font-size:11px;padding-top:7px}
  .record.compact .slot{grid-template-columns:30px minmax(0,1fr)}
  .card-limit{grid-template-columns:auto minmax(0,1fr);gap:14px}
  .entry-meta,.entry-side,.ledger-end{font-size:11px}
  .plate-bar{font-size:11px}
  .figcap{font-size:12px}
  .kv-k,.ev-cap,.col-k,.limit-t{font-size:10.5px}
  .foot .fk{font-size:10.5px}
  .ph-tag{font-size:10px}
  details.disc summary{font-size:11px}
}

/* ═══════════════════════════ 621px — nav goes inline ═══════════════════════════ */
@media (min-width:621px){
  .topbar-in{gap:12px 18px}
  .nav{order:0;width:auto;margin-left:auto;border-top:0;padding-top:0;gap:2px}
  .tgl{margin-left:0}
  .kv-row{grid-template-columns:172px minmax(0,1fr);gap:clamp(12px,2.5vw,26px)}
  .kv-k{padding-top:5px}
}

/* ═══════════════════════════ 761px — method onto one line ═══════════════════════════ */
@media (min-width:761px){
  .record.compact .slot{grid-template-columns:30px minmax(0,200px) minmax(0,1fr)}
}

/* ═══════════════════════════ 821px — index gains its status column ═══════════════════════════ */
@media (min-width:821px){
  .entry{grid-template-columns:64px minmax(0,1fr) 138px;gap:clamp(12px,3vw,30px)}
  .entry-side{grid-column:3;text-align:right;padding-top:6px}
}

/* ═══════════════════════════ 901px — the register channel takes its column ═══════════════════════════ */
@media (min-width:901px){
  .evidence-band{display:grid}
  .band{grid-template-columns:var(--channel) minmax(0,var(--measure)) minmax(0,1fr);gap:var(--gap)}
  .band>.ch{grid-column:1}
  .band>.co{grid-column:2}
  .band>.wide{grid-column:2 / -1}
  .band>.full{grid-column:2 / -1}
  .band.bleed{grid-template-columns:minmax(0,1fr)}
  .band.bleed>.ch{grid-column:1;flex-flow:row wrap;align-items:baseline;gap:7px 20px;padding-top:0}
  .band.bleed>.ch .k b{display:inline;margin-left:6px}
  .band.bleed>.full{grid-column:1}
  .ch{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:10px;padding-top:6px}
  .ch .k{line-height:1.7}
  .ch .k b{display:block;margin-left:0}
  .foot-in{grid-template-columns:var(--channel) minmax(0,1fr)}
}

/* ═══════════════════════════ 1041px — the evidence frame earns its place ═══════════════════════════ */
@media (min-width:1041px){
  .card.featured .card-body{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .card.featured .card-frame{display:flex}
}