/* Myles Mode webfonts — downloaded from Google Fonts (latin subset) */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_ds/myles-mode-design-system-18ac1888-a860-44fa-9314-e99a9aa9bbc3/fonts/archivo-black-normal-400.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: 200 800;
  font-display: swap;
  src: url(/_ds/myles-mode-design-system-18ac1888-a860-44fa-9314-e99a9aa9bbc3/fonts/newsreader-italic-200-800.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: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/_ds/myles-mode-design-system-18ac1888-a860-44fa-9314-e99a9aa9bbc3/fonts/newsreader-normal-200-800.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: 'Space Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/_ds/myles-mode-design-system-18ac1888-a860-44fa-9314-e99a9aa9bbc3/fonts/space-mono-italic-400.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: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_ds/myles-mode-design-system-18ac1888-a860-44fa-9314-e99a9aa9bbc3/fonts/space-mono-normal-400.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: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_ds/myles-mode-design-system-18ac1888-a860-44fa-9314-e99a9aa9bbc3/fonts/space-mono-normal-700.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;
}

/* Myles Mode — color tokens
   Sampled from the brand banner: pure black field, white mark,
   and an ember ramp running deep red-orange → hot amber. */
:root {
  /* Base — ink (warm blacks) */
  --ink-0: #000000;
  --ink-1: #0E0B08;
  --ink-2: #191410;
  --ink-3: #261E16;
  --ink-4: #3A2E21;

  /* Base — paper (warm off-whites, for long reads) */
  --paper-0: #FFFFFF;
  --paper-1: #F6F0E6;
  --paper-2: #EDE4D4;
  --paper-3: #E0D3BD;

  /* Base — ember ramp (from the banner) */
  --ember-100: #FFE8C2;
  --ember-200: #FFD08A;
  --ember-300: #FFB347;
  --ember-400: #FF9A1F;
  --ember-500: #F27A0C;
  --ember-600: #D85C04;
  --ember-700: #B04102;
  --ember-800: #6E2A02;
  --ember-900: #2E1403;

  /* Semantic — surfaces */
  --surface-page: var(--ink-1);          /* default: dark-first */
  --surface-raised: var(--ink-2);
  --surface-card: var(--ink-2);
  --surface-read: var(--paper-1);        /* long-form reading surface */
  --surface-accent: var(--ember-500);

  /* Semantic — text on dark */
  --text-display: #FFFFFF;
  --text-body: rgba(255, 255, 255, 0.86);
  --text-muted: rgba(255, 255, 255, 0.55);
  --text-accent: var(--ember-400);

  /* Semantic — text on paper */
  --text-display-on-paper: var(--ink-1);
  --text-body-on-paper: #241C13;
  --text-muted-on-paper: rgba(36, 28, 19, 0.6);
  --text-accent-on-paper: var(--ember-600);

  /* Semantic — lines & focus */
  --border-hard: #FFFFFF;                 /* on dark: solid white rules */
  --border-soft: rgba(255, 255, 255, 0.22);
  --border-hard-on-paper: var(--ink-1);
  --border-soft-on-paper: rgba(14, 11, 8, 0.25);
  --focus-ring: var(--ember-400);

  /* Semantic — feedback (used sparingly; warning doubles as brand) */
  --warn: var(--ember-500);
  --danger: #D8330E;
  --ok: #6F8F3A;
}

/* Myles Mode — typography tokens
   Three voices:
   1. Archivo Black — the SHOUT. Headlines, wordmark, pull numbers. Always uppercase.
   2. Newsreader — the ESSAY. Body copy, pull quotes (italic), 3,000-word reads.
   3. Space Mono — the MARGINALIA. Kickers, dates, tags, footnote markers, captions. */
:root {
  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;

  /* Scale (desktop) */
  --type-display-xl: 72px;   /* hero headlines */
  --type-display-lg: 48px;   /* essay titles */
  --type-display-md: 32px;   /* section heads */
  --type-display-sm: 22px;   /* card titles */
  --type-quote: 30px;        /* pull quotes, Newsreader italic */
  --type-body-lg: 21px;      /* essay body */
  --type-body: 18px;         /* standfirst / dek, UI prose */
  --type-meta: 13px;         /* mono kickers, dates, tags */
  --type-meta-sm: 11px;      /* fine print */

  /* Behavior */
  --leading-display: 0.96;   /* headlines set tight, almost touching */
  --leading-quote: 1.25;
  --leading-body: 1.72;      /* generous for long reads */
  --leading-meta: 1.4;
  --tracking-display: -0.01em;
  --tracking-meta: 0.14em;   /* mono meta is uppercase + spaced */
}

/* Myles Mode — spacing, borders, radii, shadows, motion */
:root {
  /* Spacing — 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 144px;

  /* Layout */
  --measure-read: 680px;     /* essay column */
  --measure-wide: 1200px;    /* page shell */

  /* Radii — the brand is SHARP. No rounding, anywhere. */
  --radius-0: 0px;

  /* Borders — hard 2px rules; 1px only for fine table lines */
  --border-w: 2px;
  --border-w-heavy: 4px;

  /* Shadows — hard offset print shadows, never blurred */
  --shadow-press: 4px 4px 0 var(--ink-0);
  --shadow-press-ember: 4px 4px 0 var(--ember-500);
  --shadow-press-lg: 8px 8px 0 var(--ink-0);

  /* Motion — quick and matter-of-fact; no bounce, no float */
  --ease-snap: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 180ms; /* @kind other */
}

/* Myles Mode — minimal base layer + utility classes used across cards/kits */
* { box-sizing: border-box; }

body.mm {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-serif);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

.mm-display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--text-display);
  margin: 0;
}

.mm-meta {
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  line-height: var(--leading-meta);
}

.mm-serif { font-family: var(--font-serif); }

::selection { background: var(--ember-500); color: var(--ink-0); }


@font-face { font-family:"OCR-B"; src:url("/_ds/myles-mode-design-system-18ac1888-a860-44fa-9314-e99a9aa9bbc3/fonts/ocr-b.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"IBM Plex Serif"; font-style:normal; font-weight:400; src:url("/_ds/myles-mode-design-system-18ac1888-a860-44fa-9314-e99a9aa9bbc3/fonts/ibm-plex-serif-400.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"IBM Plex Serif"; font-style:italic; font-weight:400; src:url("/_ds/myles-mode-design-system-18ac1888-a860-44fa-9314-e99a9aa9bbc3/fonts/ibm-plex-serif-400i.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"IBM Plex Serif"; font-style:normal; font-weight:600; src:url("/_ds/myles-mode-design-system-18ac1888-a860-44fa-9314-e99a9aa9bbc3/fonts/ibm-plex-serif-600.woff2") format("woff2"); font-display:swap; }
/* Fallback faces sized to the real fonts' metrics (measured from the woff2 files), so text set in the
   system font while the webfont loads occupies the same lines. size-adjust = avg advance ratio;
   the overrides are the webfont's ascent/descent/line-gap divided by size-adjust. */
/* One fallback face per platform serif; a face whose local() font is absent is skipped, so the
   stack lands on whichever exists with the ratio measured for it. (Georgia: macOS/iOS/Windows;
   Noto Serif: Android; DejaVu Serif: Linux labs such as PageSpeed; Times/Liberation: the rest.) */
@font-face { font-family:"Plex Fallback Georgia"; src:local("Georgia"); size-adjust:109%; ascent-override:94%; descent-override:25.2%; line-gap-override:0%; }
@font-face { font-family:"Plex Fallback Noto"; src:local("Noto Serif"), local("NotoSerif-Regular"), local("Droid Serif"); size-adjust:98%; ascent-override:104.6%; descent-override:28.1%; line-gap-override:0%; }
@font-face { font-family:"Plex Fallback DejaVu"; src:local("DejaVu Serif"), local("DejaVuSerif"); size-adjust:92%; ascent-override:111.4%; descent-override:29.9%; line-gap-override:0%; }
@font-face { font-family:"Plex Fallback Times"; src:local("Times New Roman"), local("Liberation Serif"), local("Tinos"); size-adjust:118%; ascent-override:86.9%; descent-override:23.3%; line-gap-override:0%; }
@font-face { font-family:"OCR-B Fallback"; src:local("Courier New"), local("Menlo"), local("Liberation Mono"), local("DejaVu Sans Mono"); size-adjust:144.5%; ascent-override:89.1%; descent-override:22.4%; line-gap-override:0.7%; }
@font-face { font-family:"Archivo Fallback"; src:local("Arial Black"), local("Arial-Black"); size-adjust:86%; ascent-override:102%; descent-override:24.4%; line-gap-override:0%; }
@font-face { font-family:"Archivo Fallback Linux"; src:local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("DejaVu Sans Bold"); size-adjust:126%; ascent-override:69.7%; descent-override:16.7%; line-gap-override:0%; }
:root {
  --font-serif:"IBM Plex Serif", "Plex Fallback Georgia", "Plex Fallback Noto", "Plex Fallback DejaVu", "Plex Fallback Times", Georgia, serif;
  --font-display:"Archivo Black", "Archivo Fallback", "Archivo Fallback Linux", "Arial Black", sans-serif;
  --bg:#050403;
  --panel-bg:rgba(8,6,4,.92);
  --ember:#F27A0C;
  --amber:#FF9A1F;
  --hot:#FFB347;
  --green:#2BFF88;
  --text:rgba(255,236,214,.88);
  --dim:rgba(255,190,120,.68);   /* 6.0:1 on the panel (was .5 = 3.7:1, below AA) */
}
html { background:var(--bg); -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body {
  margin:0; color:var(--text); font-family:var(--font-serif, Georgia, serif);
  background-image:
    radial-gradient(ellipse 120% 90% at 50% -10%, rgba(242,122,12,.07), transparent 60%),
    linear-gradient(rgba(242,122,12,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242,122,12,.05) 1px, transparent 1px);
  background-size:auto, 44px 44px, 44px 44px;
  min-height:100vh;
  display:flex; flex-direction:column;
}
#bgfx { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:var(--bg); }
.bg-topo { position:absolute; inset:-3%; background:url("/assets/topo-bg.webp") center/cover no-repeat; opacity:.4; animation:topoflicker 9s steps(1) infinite; will-change:transform,opacity; }
@keyframes topoflicker {
  0%,100% { opacity:.4; transform:none; }
  41% { opacity:.4; } 42% { opacity:.3; } 42.5% { opacity:.46; } 43% { opacity:.4; }
  87% { opacity:.4; transform:none; } 88% { opacity:.34; transform:translateX(7px); }
  88.6% { transform:translateX(-5px); } 89.2% { opacity:.4; transform:none; }
}
.bg-topo.clone { opacity:0; filter:hue-rotate(105deg) saturate(2.4); mix-blend-mode:screen; animation:topoglitch 13s steps(1) infinite; }
@keyframes topoglitch {
  0%,100% { opacity:0; }
  31% { opacity:0; } 31.5% { opacity:.22; transform:translate(-9px,2px); clip-path:inset(18% 0 52% 0); }
  32.1% { opacity:0; }
  54% { opacity:0; } 54.4% { opacity:.16; transform:translate(6px,-1px); clip-path:inset(64% 0 8% 0); }
  54.9% { opacity:0; }
  78% { opacity:0; } 78.5% { opacity:.2; transform:translate(10px,3px); clip-path:inset(38% 0 34% 0); }
  79.2% { opacity:0; }
}
.bg-sweep { position:absolute; left:0; right:0; top:0; height:9vh; background:linear-gradient(rgba(242,122,12,0), rgba(242,122,12,.13), rgba(242,122,12,0)); animation:bgsweep 12s linear infinite; will-change:transform; }
@keyframes bgsweep { 0% { transform:translateY(-12vh); } 100% { transform:translateY(112vh); } }
@media (max-width:720px) { .bg-topo.clone { display:none; } }
@media (prefers-reduced-motion: reduce) { .bg-topo, .bg-topo.clone, .bg-sweep, #bgfx::after, .statusline .dot { animation:none; } .bg-topo.clone { display:none; } .glitch::before, .glitch::after { display:none; } }
/* CRT scanlines + flicker */
/* CRT scanlines live inside the fixed background layer, so they texture the
   wallpaper and panel edges but never sit on top of the reading surface. */
#bgfx::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:5;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  animation:crt 7s infinite steps(1);
}
@keyframes crt {
  0%,100% { opacity:.85; } 92% { opacity:.85; }
  93% { opacity:.55; } 93.5% { opacity:.95; } 94% { opacity:.7; } 95% { opacity:.85; }
}
a { color:var(--amber); text-decoration:none; }
a:hover { color:#fff; }
.mono, .kicker, nav.site a, .row .date, .row .venue, .meta, .panel-bar, .statusline, a.btn, .readlink
  { font-family:"OCR-B", "OCR-B Fallback", var(--font-mono, "Space Mono", monospace); }

/* ---------- header ---------- */
.statusline { display:flex; align-items:center; gap:10px; font-size:10px; letter-spacing:.2em; color:var(--green); text-transform:uppercase; }
.statusline .dot { width:7px; height:7px; background:var(--green); box-shadow:0 0 8px var(--green); animation:blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity:0; } }

/* ---------- stripes / chrome ---------- */
.stripes { height:10px; background:repeating-linear-gradient(-45deg, var(--ember) 0 14px, transparent 14px 28px); opacity:.85; }
.wrap { max-width:1180px; margin:0 auto; padding:0 40px; }
.kicker { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--amber); }
.kicker::before { content:"> "; color:var(--green); }
h1.kicker { margin:0; font-weight:400; font-size:10px; }
.skip { position:absolute; left:-9999px; top:0; z-index:100; background:var(--ember); color:#000; font-family:"OCR-B", monospace; font-size:12px; padding:8px 16px; text-transform:uppercase; letter-spacing:.14em; }
.skip:focus { left:0; color:#000; }
a:focus-visible { outline:2px solid var(--amber); outline-offset:3px; }
/* clipped shapes lose an outside ring to their clip-path; these draw it inside */
.readlink:focus-visible { outline:2px solid #000; outline-offset:-5px; }
.picklist a:focus-visible, .nextlist a:focus-visible, a.featured:focus-visible, a.row:focus-visible { outline:2px solid var(--amber); outline-offset:-4px; }

/* ---------- panels ---------- */
.panel { position:relative; border:2px solid var(--ember); background:var(--panel-bg); margin:28px 0 0;
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  box-shadow:0 0 24px rgba(242,122,12,.12), inset 0 0 60px rgba(242,122,12,.04); }
/* ---------- the panel bar: the site's chrome ----------
   One bar does what a header and a title bar did: the mark (home), the three tabs, the search field.
   It sticks to the top of the viewport while the panel is in view, so the frame docks as you read.
   The active tab is a trapezoid in the panel's own dark, wider at its base, so it reads as open into
   the content below rather than painted on the bar. */
.panel-bar { position:sticky; top:0; z-index:30; display:flex; align-items:stretch; height:42px; background:var(--ember); color:#000; padding:0 30px 0 0; }
.pb-mark { display:flex; align-items:center; flex:none; padding:0 16px 0 18px; }
.pb-mark img { height:19px; width:auto; display:block; filter:brightness(0); }
.pb-mark:hover img, .pb-mark:focus-visible img { filter:none; }
.pb-mark:focus-visible { outline:none; background:rgba(0,0,0,.14); }
.pb-tabs { display:flex; align-items:stretch; min-width:0; }
/* every tab is the same trapezoid, its sides 30° off vertical (a 24px run over the 42px bar): between the
   steep tab of the first version and the site's 45° cuts. The active one is filled with the panel's dark and
   opens into the content below; a tab under the pointer or keyboard focus darkens. No dividers. */
.pb-tabs .tab { --slant:24px; position:relative; display:flex; align-items:center; gap:8px; padding:0 30px; font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:11px; font-weight:400; letter-spacing:.16em; text-transform:uppercase; color:#000; text-decoration:none; white-space:nowrap; outline:none;
  clip-path:polygon(var(--slant) 0, calc(100% - var(--slant)) 0, 100% 100%, 0 100%); }
.pb-tabs .tab:hover, .pb-tabs .tab:focus-visible { background:rgba(0,0,0,.14); }
.pb-tabs .tab.active { background:#0a0805; color:var(--amber); }
.pb-tabs .tab.active:hover, .pb-tabs .tab.active:focus-visible { background:#0a0805; color:#fff; }
.pb-tabs .arr { font-size:11px; }
/* search: the prompt glyph, which opens the search page */
.pb-slink { display:flex; align-items:center; margin-left:auto; padding:0 14px; color:#000; text-decoration:none; }
.pb-slink svg { display:block; width:16px; height:16px; }
.pb-slink:hover, .pb-slink:focus-visible { color:#fff; outline:none; }
.panel-body { padding:40px; }

/* ---------- glitch headings ---------- */
.glitch { position:relative; display:inline-block; max-width:100%; overflow-wrap:break-word; }
.glitch::before, .glitch::after { content:attr(data-text); content:attr(data-text) / ""; position:absolute; left:0; top:0; width:100%; overflow:hidden; pointer-events:none; }
.glitch::before { color:var(--green); z-index:-1; clip-path:inset(20% 0 55% 0); transform:translate(-3px,0); animation:gl1 4.6s infinite steps(1); opacity:0; }
.glitch::after { color:#fff; z-index:-2; clip-path:inset(60% 0 15% 0); transform:translate(3px,0); animation:gl2 5.3s infinite steps(1); opacity:0; }
@keyframes gl1 { 0%,100%{opacity:0} 10%{opacity:.9; clip-path:inset(10% 0 70% 0)} 11.5%{opacity:0} 48%{opacity:.8; clip-path:inset(45% 0 30% 0); transform:translate(-5px,-2px)} 49.5%{opacity:0} 76%{opacity:.9; clip-path:inset(70% 0 5% 0)} 77%{opacity:0} }
@keyframes gl2 { 0%,100%{opacity:0} 22%{opacity:.7; clip-path:inset(55% 0 20% 0)} 23%{opacity:0} 60%{opacity:.8; clip-path:inset(15% 0 65% 0); transform:translate(5px,2px)} 61.5%{opacity:0} 88%{opacity:.6; clip-path:inset(80% 0 2% 0)} 89%{opacity:0} }

.tl { display:inline; }
/* forced line breaks at every width; glitch layers get the same breaks so they stay registered */
h1.display.stack .tl { display:block; }
h1.display.stack::before, h1.display.stack::after { white-space:pre-line; }
h1.display { font-family:var(--font-display); text-transform:uppercase; line-height:.94; letter-spacing:-0.015em; color:#fff; margin:14px 0 18px; font-size:clamp(30px,6vw,68px); text-shadow:0 0 18px rgba(242,122,12,.35); max-width:100%; overflow-wrap:break-word; hyphens:auto; }
.page-title { font-family:var(--font-display); text-transform:uppercase; line-height:.92; letter-spacing:-0.015em; color:#fff; margin:12px 0 0; font-size:clamp(30px,5vw,56px); text-shadow:0 0 18px rgba(242,122,12,.35); max-width:100%; overflow-wrap:break-word; hyphens:auto; }

/* ---------- about ---------- */
/* the bio and the portrait share one row, top and bottom edges flush. At the panel's full width the bio is
   set (20px/1.5) so its eight lines stand exactly as tall as the photo; narrower, the row shrinks and
   the bio scales with it (to a 17px floor) while the photo fills whatever height the text needs, trimming
   its sides at the frame rather than leaving a gap above or below. */
.about-grid { display:grid; grid-template-columns:minmax(300px,1.2fr) minmax(320px,1fr); gap:56px; align-items:stretch; container-type:inline-size; }
.about-left { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
/* minmax(0,1fr) + min-width:0 — grid items default to min-width:auto, so a
   nowrap button or wide image sets a floor the viewport can't honour at 320px */
@media (max-width:880px){ .about-grid { grid-template-columns:minmax(0,1fr); gap:26px; }
  .about-grid > * { min-width:0; } }
.bio { font-size:20px; line-height:1.6; color:var(--text); margin:22px 0 0; max-width:620px; }
.bio + .bio { margin-top:16px; }
@media (min-width:881px){ .bio { font-size:clamp(17px, 1.97cqw, 20px); line-height:1.5; } }
.bio a { color:var(--amber); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(242,122,12,.5); }
.bio a:hover { color:#fff; }
/* the frame's aspect-ratio is the photo's, so the row is never shorter than the photo; stretched in both
   axes (explicitly: a grid item with a ratio only stretches when told to) it then fills its column and the
   row's full height */
.portrait { position:relative; box-sizing:content-box; aspect-ratio:1400/937; border:2px solid var(--ember); padding:0; margin:0; justify-self:stretch; align-self:stretch; }
/* the photo keeps its own proportions at the row's height, centred in the frame, which clips what doesn't fit;
   the face box sits on the photo itself (.pstage), so its percentages hold whatever the trim */
.pclip { position:absolute; inset:0; display:flex; justify-content:center; overflow:hidden; }
.pstage { position:relative; flex:none; height:100%; min-width:100%; aspect-ratio:1400/937; }
.pstage img { display:block; width:100%; height:100%; object-fit:cover; }
.portrait::before, .portrait::after { content:""; position:absolute; width:26px; height:26px; border:3px solid var(--green); z-index:2; }
.portrait::before { top:-8px; left:-8px; border-right:0; border-bottom:0; }
.portrait::after { bottom:-8px; right:-8px; border-left:0; border-top:0; }
.facebox { position:absolute; left:45%; top:18%; width:19%; height:36%; border:2px solid var(--green); box-shadow:0 0 12px rgba(43,255,136,.35); opacity:0; transition:opacity 200ms steps(3); pointer-events:none; z-index:3; }
.facebox::before, .facebox::after { content:""; position:absolute; width:10px; height:10px; }
.facebox::before { top:-6px; right:-6px; border-top:2px solid var(--green); border-right:2px solid var(--green); }
.facebox::after { bottom:-6px; left:-6px; border-bottom:2px solid var(--green); border-left:2px solid var(--green); }
.facelabel { position:absolute; bottom:calc(100% + 2px); left:-2px; background:var(--green); color:#000; font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:5px; font-weight:700; letter-spacing:.18em; padding:2px 6px; white-space:nowrap; }
body.scrolled .facebox { animation:faceseek 2.4s step-end forwards; }
@keyframes faceseek {
  0%   { opacity:0; left:9%;  top:18%; width:11%; height:15%; }
  4%   { opacity:1; left:9%;  top:18%; width:11%; height:15%; }
  13%  { opacity:0; }
  16%  { opacity:1; left:76%; top:10%; width:13%; height:18%; }
  27%  { opacity:0; }
  30%  { opacity:1; left:37%; top:68%; width:15%; height:17%; }
  41%  { opacity:0; }
  44%  { opacity:1; left:12%; top:52%; width:10%; height:12%; }
  52%  { opacity:0; }
  55%  { opacity:1; left:47%; top:20%; width:19%; height:36%; }
  63%  { left:44%; top:17%; }
  71%  { left:45.6%; top:18.4%; }
  79%  { left:45%; top:18%; width:19%; height:36%; }
  100% { opacity:1; left:45%; top:18%; width:19%; height:36%; }
}
@media (prefers-reduced-motion: reduce) { body.scrolled .facebox { animation:none; opacity:1; } }

/* ---------- featured slot ---------- */
a.featured { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:0; border:1px solid rgba(242,122,12,.5); background:rgba(242,122,12,.05); color:var(--text); margin:0 0 34px; transition:background 120ms steps(2); }
a.featured:hover { background:rgba(242,122,12,.12); }
a.featured:hover .ft { color:#fff; }
.feat-img { position:relative; overflow:hidden; border-right:1px solid rgba(242,122,12,.4); }
.feat-img img { display:block; width:100%; height:100%; min-width:0; object-fit:cover; }
.feat-img::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(5,4,3,0) 60%, rgba(5,4,3,.5)); pointer-events:none; }
.feat-body { padding:24px 26px; display:flex; flex-direction:column; justify-content:center; }
.feat-tag { font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--green); margin-bottom:10px; }
.feat-tag::before { content:"● "; }
.ft { font-family:var(--font-serif); font-size:30px; line-height:1.2; color:var(--amber); margin:0 0 10px; overflow-wrap:normal; }
.fsub { font-style:italic; font-size:15px; line-height:1.5; color:rgba(255,236,214,.75); margin:0 0 14px; }
.fmeta { font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
@media (max-width:720px){
  a.featured { grid-template-columns:1fr; }
  .feat-img { border-right:0; border-bottom:1px solid rgba(242,122,12,.4); aspect-ratio:16/10; }
  .feat-body { padding:18px 16px; }
  .ft { font-size:24px; }
}

/* ---------- writing list ---------- */
.rows { border-top:2px solid var(--ember); }
.rows a.row:last-child { border-bottom:2px solid var(--ember); }
/* Three typographic jobs: Archivo Black for the headline you are reading, the serif for essays you might read next
   (index rows, Recent work, Read next, the featured card), OCR-B for controls, dates, labels and machine-facing text.
   A row is two columns: title and subtitle together, then a metadata column whose units never break inside. */
a.row { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:36px; align-items:start; padding:26px 22px; border-bottom:1px solid rgba(242,122,12,.35); color:var(--text); transition:none; text-decoration:none; }
a.row:hover, a.row:visited, a.row:focus { text-decoration:none; }
a.row:hover { background:var(--ember); color:#000; text-shadow:none; }
a.row:hover .t, a.row:hover .sub, a.row:hover .rm { color:#000; opacity:1; }
.row .rt { display:block; min-width:0; }
.row .t { display:block; font-family:var(--font-serif); font-size:23px; line-height:1.3; color:var(--amber); overflow-wrap:normal; }
.row .sub { display:block; font-style:italic; font-size:15px; line-height:1.5; color:rgba(255,236,214,.75); margin-top:5px; }
.row .rm { display:flex; flex-direction:column; align-items:flex-end; gap:7px; padding-top:9px; font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); white-space:nowrap; }


/* ---------- article ---------- */
.article-body p { font-size:19px; line-height:1.75; margin:0 0 26px; max-width:66ch; }
.article-body h2 { font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:15px; line-height:1.35; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); margin:56px 0 20px; font-weight:400; scroll-margin-top:84px; }
.article-body h2::before { content:"> "; color:var(--green); }
.subtitle, .article-body p.subtitle { font-style:italic; font-size:22px; line-height:1.5; color:var(--dim); margin:0 0 40px; max-width:none; }
/* ---------- full-text essay prose ---------- */
.lede { border-left:4px solid var(--ember); background:rgba(242,122,12,.06); padding:18px 24px; margin:0 0 34px; }
.lede p { margin:0 0 12px; font-size:18px; line-height:1.6; color:rgba(255,236,214,.95); }
.lede p:last-child { margin-bottom:0; }
.article-body h2 + p { margin-top:0; }
.article-body h2.seclabel { font-size:11px; line-height:1.4; letter-spacing:.18em; margin:0 0 14px; scroll-margin-top:84px; }
.article-body blockquote { margin:26px 0; padding:4px 0 4px 22px; border-left:2px solid rgba(242,122,12,.5); font-style:italic; color:rgba(255,236,214,.8); }
/* a quotation whose own formatting is the point: set roman so its bold, italic and underlines read as the source's */
.article-body blockquote.verbatim { font-style:normal; }
.article-body blockquote.verbatim u { text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,236,214,.6); }
.article-body img { max-width:100%; height:auto; }
.wrap-article { max-width:860px; }
.wrap-ledger { max-width:960px; }
/* every prose block on the ledger page shares one right edge; only the tables and stat boxes go full width */
.wrap-ledger .article-body .lede-plain, .wrap-ledger .article-body .ledger-defs, .wrap-ledger .article-body .ledger-cov,
.wrap-ledger .article-body .ledger-gen, .wrap-ledger .article-body .ledger-note, .wrap-ledger .unavail { max-width:660px; }
/* panel is already at the reading measure, so let content fill it edge to edge */
.wrap-article .article-body p, .wrap-article .article-body .essay,
.wrap-article .article-body .lede, .wrap-article .article-body .srcnote,
.wrap-article .article-body ol, .wrap-article .article-body ul,
.wrap-article .toc, .wrap-article .next, .wrap-article .subscribe, .wrap-article .apparatus,
.wrap-article .companion-line, .wrap-article .term-more { max-width:none; }
.article-body .essay { max-width:66ch; }
.article-body .essay p, .article-body .essay ol, .article-body .essay ul, .article-body .essay blockquote { max-width:none; }
.article-body .essay figure { max-width:100%; margin:34px 0; margin-left:0; margin-right:0; }
.article-body .lede, .article-body .srcnote { max-width:66ch; }
.companion-line { max-width:66ch; margin:-14px 0 34px; font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:11px; line-height:1.8; letter-spacing:.06em; color:var(--dim); }
.companion-line .k { color:var(--green); margin-right:6px; }
.companion-line a { color:var(--amber); }
.article-body figure { margin:34px auto; max-width:80%; border:1px solid rgba(242,122,12,.35); background:rgba(0,0,0,.35); }
.article-body figure img { display:block; width:100%; min-width:0; height:auto; }
.article-body figcaption { font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:11px; line-height:1.6; letter-spacing:.04em; color:var(--dim); padding:10px 14px; border-top:1px solid rgba(242,122,12,.3); }
.article-body figure.gallery { padding:0; }
/* a 12-column grid; each image carries a span class chosen at build time so every row is full (6 images = 3 + 3,
   5 = 3 + 2, 7 = 4 + 3). The grid's background is the hairline between tiles, so an empty cell would show as a block
   of it — the row plan is what keeps that from happening. */
.galgrid { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:2px; background:rgba(242,122,12,.35); }
.galgrid .g3 { grid-column:span 3; } .galgrid .g4 { grid-column:span 4; } .galgrid .g6 { grid-column:span 6; } .galgrid .g12 { grid-column:span 12; }
/* minmax(0,...) is load-bearing: grid items default to min-width:auto, so a
   2880px-wide image would otherwise force the track and overflow the page. */
.galgrid img { display:block; width:100%; min-width:0; max-width:100%; height:100%; object-fit:contain; aspect-ratio:4/3; background:#000; }
.galgrid a.galitem { display:block; min-width:0; }
figure.gallery figcaption { border-top:1px solid rgba(242,122,12,.3); }
/* embeds: a tweet is quoted text with its author line; a video is a still that opens the source; a Substack-hosted clip is a note */
.article-body figure.embed blockquote { margin:0; padding:16px 20px 8px; border-left:0; font-style:normal; color:rgba(255,236,214,.9); }
.article-body figure.embed blockquote p { margin:0 0 10px; font-size:17px; line-height:1.6; max-width:none; }
.article-body figure.embed .galgrid { border-top:1px solid rgba(242,122,12,.3); }
.article-body figure.video a { display:block; position:relative; text-decoration:none; }
.article-body figure.video img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }   /* YouTube's 4:3 still, letterbox cropped */
.article-body figure.video .play { position:absolute; left:14px; bottom:14px; font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); background:rgba(0,0,0,.78); border:1px solid rgba(255,154,31,.5); padding:8px 12px; }
.article-body figure.video-note { padding:14px 18px; }
.article-body figure.video-note p { margin:0; font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:12px; line-height:1.7; letter-spacing:.04em; color:var(--dim); max-width:none; }
/* phones: two tiles per row; an odd last tile takes the full row rather than leaving a hole */
@media (max-width:560px){ .galgrid .g3, .galgrid .g4 { grid-column:span 6; } .galgrid a.galitem:last-child:nth-child(odd) { grid-column:span 12; } }
.article-body ol, .article-body ul { max-width:66ch; padding-left:22px; margin:0 0 26px; }
.article-body li { font-size:19px; line-height:1.75; margin-bottom:10px; }
.article-body a { text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(242,122,12,.6); }
.article-body hr { border:0; border-top:1px solid rgba(242,122,12,.35); margin:34px 0; }
.cwarn { display:flex; margin:0 0 30px; border:1px solid rgba(255,154,31,.45); background:rgba(242,122,12,.06); }
.cwarn::before { content:""; flex:none; width:12px; background:repeating-linear-gradient(-45deg, var(--ember) 0 7px, #0b0906 7px 14px); }
.cwarn .cwin { padding:13px 18px; }
.cwlabel { display:block; font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--hot); margin-bottom:5px; }
.cwarn p { margin:0; font-size:15px; line-height:1.55; font-style:normal; color:rgba(255,236,214,.78); max-width:none; }
@media (max-width:720px){ .cwarn p { font-size:14px; } }
/* ---------- onward journeys (review build) ---------- */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.seclabel { font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--amber); margin:0 0 14px; font-weight:400; }
.seclabel::before { content:"> "; color:var(--green); }

/* homepage: recent work */
.picks { margin-top:44px; padding-top:28px; border-top:1px solid rgba(242,122,12,.35); }
@media (max-width:880px){ .picks { margin-top:46px; padding-top:0; border-top:0; } }   /* the photo's frame already closes the About block */
.picklist { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.picklist a { display:flex; flex-direction:column; gap:8px; height:100%; padding:16px 16px 16px; border:1px solid rgba(242,122,12,.4); background:rgba(242,122,12,.04); color:inherit; text-decoration:none;
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); transition:background 120ms steps(2), border-color 120ms; }
.picklist a:hover { background:rgba(242,122,12,.12); border-color:var(--amber); }
.picklist .pt { font-family:var(--font-serif); font-size:21px; line-height:1.25; color:var(--amber); overflow-wrap:normal; }
.picklist .ps { font-style:italic; font-size:15px; line-height:1.5; color:rgba(255,236,214,.82); }
.picklist .pm { margin-top:auto; font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); padding-top:6px; }

/* writing index: reading paths */
.paths { margin-top:44px; }
.pathgrid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px 40px; }
.path .pname { font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,236,214,.9); margin:0 0 10px; }
.path ol { margin:0; padding-left:1.5em; }
.path li { font-size:16px; line-height:1.55; margin:0 0 6px; }
.path li::marker { font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:11px; color:var(--dim); }
.path a { color:var(--amber); }
.path .why { display:block; font-style:italic; font-size:14px; color:rgba(255,236,214,.72); }

/* article: byline, contents, next reads, newsletter */
.article-body .byline { font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin:-22px 0 34px; }
.article-body .byline a { color:var(--amber); text-decoration:none; border-bottom:1px solid rgba(242,122,12,.5); }
.article-body .byline a:hover { color:#fff; }
.toc { margin:0 0 34px; max-width:66ch; }
.toc details { border:1px solid rgba(242,122,12,.35); background:rgba(242,122,12,.04); }
.toc summary { cursor:pointer; list-style:none; padding:11px 16px; font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); }
.toc summary::-webkit-details-marker { display:none; }
.toc summary::before { content:"+ "; color:var(--green); }
.toc details[open] summary::before { content:"\2013  "; }
.toc ol { margin:0; padding:4px 18px 14px 40px; }
.toc li { font-size:15px; line-height:1.6; margin:4px 0; }
.toc li::marker { font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:11px; color:var(--dim); }
.toc a { color:rgba(255,236,214,.9); }
.toc a:hover { color:var(--amber); }
.next { margin-top:52px; padding-top:26px; border-top:1px solid rgba(242,122,12,.4); max-width:66ch; }
.article-body .nextlist { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.article-body .nextlist li { margin:0; padding:0; font-size:inherit; }
.nextlist a { display:block; padding:14px 16px; border:1px solid rgba(242,122,12,.4); color:inherit; text-decoration:none; background:rgba(242,122,12,.04); transition:background 120ms steps(2), border-color 120ms; }
.nextlist a:hover { background:rgba(242,122,12,.12); border-color:var(--amber); }
.nextlist .nt { font-family:var(--font-serif); font-size:21px; line-height:1.25; color:var(--amber); display:block; margin-bottom:6px; overflow-wrap:normal; }
.nextlist .nw { font-size:15px; line-height:1.55; font-style:italic; color:rgba(255,236,214,.8); }
.subscribe { margin-top:28px; max-width:66ch; padding:20px 22px; border:1px solid rgba(43,255,136,.35); background:rgba(43,255,136,.04); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 24px; }
.subscribe .st { font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--green); margin:0 0 6px; }
.subscribe p { margin:0; font-size:16px; line-height:1.55; color:rgba(255,236,214,.86); max-width:44ch; }
.subscribe .readlink { margin:0; flex:none; }
.term-more { max-width:66ch; margin:0 0 40px; }
.term-more summary { cursor:pointer; list-style:none; font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); padding:10px 0; border-top:1px solid rgba(242,122,12,.3); border-bottom:1px solid rgba(242,122,12,.3); }
.term-more summary::-webkit-details-marker { display:none; }
.term-more summary::before { content:"+ "; color:var(--green); }
.term-more[open] summary::before { content:"\2013  "; }
.term-more[open] summary { border-bottom:0; }
.term-more p { font-size:17px; line-height:1.7; }
.term-more .inner { padding:14px 0 4px; border-bottom:1px solid rgba(242,122,12,.3); }
@media (max-width:840px){ .picklist { grid-template-columns:1fr; } .pathgrid { grid-template-columns:1fr; } }
@media (max-width:720px){ .article-body .byline { margin:-14px 0 26px; } .subscribe { padding:16px; } .toc, .next, .subscribe, .term-more { max-width:none; } }

/* ---------- print: a clean page for long essays ---------- */
@media print {
  #bgfx, footer.site, .skip, .panel-bar, .stripes, .facebox, .toc, .next, .subscribe, .readlink, .picks, .paths, .glitch::before, .glitch::after { display:none !important; }
  html, body { background:#fff !important; color:#000 !important; }
  .panel { border:0 !important; box-shadow:none !important; clip-path:none !important; background:#fff !important; margin:0 !important; }
  .panel-body { padding:0 !important; }
  .wrap { padding:0 !important; max-width:none !important; }
  h1.display, .page-title { color:#000 !important; text-shadow:none !important; font-size:28pt !important; }
  .article-body, .article-body p, .article-body li, .lede p, .subtitle, .definition p, .essay .footnotes p, .article-body blockquote { color:#000 !important; font-size:11.5pt !important; line-height:1.5 !important; max-width:none !important; }
  .article-body h2 { color:#000 !important; font-size:11pt !important; }
  .kicker, .byline, .srcnote, .meta, .article-body figcaption { color:#333 !important; }
  .definition { border-left:2pt solid #000 !important; background:none !important; }
  a { color:#000 !important; text-decoration:underline; }
  .essay a[href^="http"]::after { content:" (" attr(href) ")"; font-size:8.5pt; color:#444; word-break:break-all; }
  .essay sup.fnref a::after { content:none; }
  figure { break-inside:avoid; }
  .article-body figure, .article-body .essay figure { background:none !important; border:0 !important; }
  .article-body figure img { max-width:70% !important; }
  .article-body figcaption { border:0 !important; padding:6pt 0 !important; font-size:8.5pt !important; }
  .term-more summary { display:none; }
  .term-more, .term-more .inner { border:0 !important; padding:0 !important; }
}

/* ---------- machines: terms, ledger, search ---------- */
.greentext, .machine-terms { font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:13px; line-height:1.7; color:var(--green); white-space:pre-wrap; margin:0 0 30px; padding:16px 18px; border:1px solid rgba(43,255,136,.3); background:rgba(43,255,136,.04); max-width:66ch; overflow-wrap:anywhere; }
.machine-terms { margin-bottom:34px; }
.article-body .terms { max-width:66ch; padding-left:1.4em; margin:0 0 18px; }
.article-body .terms li { font-size:17px; line-height:1.65; margin:0 0 12px; overflow-wrap:anywhere; }
.article-body .terms a, .article-body .meta a { overflow-wrap:anywhere; }
.article-body .terms li::marker { font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:12px; color:var(--amber); }
.article-body .terms-coda, .article-body .lede-plain { max-width:66ch; font-size:17px; line-height:1.65; color:rgba(255,236,214,.85); }
.article-body .terms-coda { font-style:italic; margin:0 0 40px; }
.article-body .lede-plain { margin:0 0 30px; }
.ledger-stats { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin:0 0 36px; }
.ledger-stats div { border:1px solid rgba(242,122,12,.4); padding:12px 14px; background:rgba(242,122,12,.04); display:flex; flex-direction:column; }
.ledger-stats .ln { display:block; font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-bottom:6px; }
.ledger-stats .lv { display:block; margin-top:auto; font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:15px; color:var(--amber); white-space:nowrap; }
.tscroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 34px; }
.tscroll:focus-visible { outline:2px solid var(--green); outline-offset:6px; }
table.ledger { width:100%; min-width:600px; border-collapse:collapse; margin:0 0 34px; font-size:15px; }
.tscroll > table.ledger { margin:0; }
/* fixed columns: the page column takes what is left, so one odd path never squeezes the others */
table.ledger.recent { table-layout:fixed; min-width:760px; }
table.ledger.recent col.c-when { width:124px; } table.ledger.recent col.c-name { width:150px; }
table.ledger.recent col.c-ver { width:212px; } table.ledger.recent col.c-res { width:100px; }
table.ledger.recent td:nth-child(2), table.ledger.recent td:nth-child(4), table.ledger td.ver { overflow-wrap:anywhere; }
table.ledger th { text-align:left; font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); font-weight:400; padding:0 18px 8px 0; border-bottom:1px solid rgba(242,122,12,.4); white-space:nowrap; }
table.ledger td { padding:9px 18px 9px 0; border-bottom:1px solid rgba(242,122,12,.16); vertical-align:top; color:rgba(255,236,214,.88); }
table.ledger th:last-child, table.ledger td:last-child { padding-right:0; }
table.ledger td.num, table.ledger th.num { text-align:right; font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); white-space:nowrap; }
table.ledger .lk { display:block; margin:3px 0 0; font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--green); }
table.ledger.recent td:first-child { font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:12px; white-space:nowrap; color:var(--dim); }
.article-body .ledger-note { font-style:italic; font-size:17px; color:rgba(255,236,214,.75); margin:0 0 30px; }
.article-body .ledger-gen { font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:10px; line-height:1.9; letter-spacing:.08em; color:var(--dim); margin:8px 0 0; }
.search { max-width:66ch; margin:0 0 22px; }
.search-line { display:flex; align-items:stretch; border:1px solid rgba(43,255,136,.4); background:rgba(43,255,136,.04); }
.search-line .prompt { font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); color:var(--green); font-size:16px; padding:0 4px 0 14px; display:flex; align-items:center; }
.search-line input { flex:1; min-width:0; background:transparent; border:0; outline:0; color:#fff; font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:15px; padding:13px 8px; }
.search-line input::placeholder { color:rgba(255,236,214,.55); }
.search-line:focus-within { border-color:var(--green); box-shadow:0 0 0 2px rgba(43,255,136,.35), 0 0 14px rgba(43,255,136,.25); }
/* phones: the field takes the whole first row, the button sits beneath it */
@media (max-width:480px){ .search-line { flex-wrap:wrap; } .search-line input { flex:1 1 60%; } .search-line .readlink { flex:1 1 100%; margin:0 6px 6px; justify-content:center; } }
.search-line input:focus-visible { outline:none; }
.search-method { margin-top:-6px; }
.search-line .readlink { margin:6px; height:34px; align-self:center; }
.search-out { max-width:66ch; margin:0 0 30px; font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:13px; line-height:1.7; }
.search-out .oline { white-space:pre-wrap; overflow-wrap:anywhere; }
.search-out .ask { color:var(--dim); margin-bottom:10px; }
.search-out .quote { color:var(--green); font-family:var(--font-serif); font-size:17px; line-height:1.6; margin-top:14px; }
.search-out .cite { color:var(--amber); margin-bottom:6px; }
.search-out .cite a { color:var(--amber); }
.search-out .silence, .search-out .wait { color:rgba(255,236,214,.7); }
.search-out .mode { color:var(--dim); margin-top:18px; font-size:11px; }
table.ledger td.ver { font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:11px; letter-spacing:.04em; color:rgba(255,236,214,.75); }
table.ledger .vp { display:block; }
table.ledger td a, table.ledger .path-dead { overflow-wrap:anywhere; }
table.ledger .revline { display:block; margin-top:2px; font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:10px; letter-spacing:.02em; color:var(--dim); }
table.ledger td.num { font-size:13px; }
table.ledger .warn { color:var(--amber); }
table.ledger .net { display:block; font-size:10px; color:var(--dim); margin-top:2px; }
table.ledger td.rev, .search-out .rev { font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:11px; color:var(--dim); }
.establishes { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px 40px; margin:40px 0 30px; padding-top:24px; border-top:1px solid rgba(242,122,12,.35); }
.article-body .establishes p { font-size:15px; line-height:1.6; color:rgba(255,236,214,.8); max-width:none; margin:0; }
.article-body .establishes .seclabel { margin-top:0; }   /* the grid's own padding sets the distance from the rule above */
.article-body .terms-note { max-width:66ch; font-size:15px; line-height:1.6; color:rgba(255,236,214,.75); margin:-14px 0 30px; }
.search-out .qflag { font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:10px; letter-spacing:.08em; color:var(--amber); border:1px solid rgba(255,154,31,.5); padding:1px 6px; margin-left:6px; }
.search-out details.octx { margin:2px 0 8px 14px; }
.search-out details.octx summary { cursor:pointer; font-size:11px; color:var(--dim); list-style:none; }
.search-out details.octx summary::before { content:"+ "; color:var(--green); }
.search-out details.octx[open] summary::before { content:"\2013  "; }
.search-out .octx-body { font-family:var(--font-serif); font-size:15px; line-height:1.6; color:rgba(255,236,214,.9); padding:8px 0 4px; }
.search-out .octx-body .dim { color:rgba(255,236,214,.5); }
.unavail { border:1px solid rgba(255,154,31,.6); background:rgba(242,122,12,.07); padding:18px 20px; margin:0 0 30px; max-width:66ch; }
.article-body .unavail p { margin:0; font-size:16px; line-height:1.6; }
.article-body .ledger-defs, .article-body .ledger-cov { font-size:14px; line-height:1.6; color:rgba(255,236,214,.72); max-width:66ch; margin:-18px 0 30px; }
.article-body .ledger-cov { margin:18px 0 6px; font-style:italic; }
table.ledger.sources { min-width:0; }
table.ledger.sources td { white-space:normal; overflow-wrap:anywhere; font-size:14px; }
table.ledger.sources td a { font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:11px; }
@media (max-width:720px){ table.ledger.sources th { white-space:normal; } table.ledger.sources td, table.ledger.sources th { padding-right:8px; font-size:12px; } }
table.ledger .path-dead { color:rgba(255,236,214,.55); }
table.ledger .ns { display:block; margin:3px 0 0; font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:9px; letter-spacing:.1em; color:var(--dim); text-transform:uppercase; }
.search-out .note { color:rgba(255,236,214,.78); font-family:var(--font-serif); font-size:14px; line-height:1.55; margin:2px 0 6px 14px; }
@media (max-width:720px){ .establishes { grid-template-columns:1fr; } }
@media (max-width:720px){ .ledger-stats { grid-template-columns:repeat(2, minmax(0,1fr)); } table.ledger { font-size:14px; } .greentext, .machine-terms { font-size:12px; padding:12px; } }
@media print { .machine-terms, .search, .search-out { display:none !important; } }

.apparatus { max-width:66ch; margin:44px 0 0; padding:18px 20px; border:1px solid rgba(43,255,136,.35); background:rgba(43,255,136,.04); }
.article-body .apparatus .seclabel { margin:0 0 10px; }
.article-body .apparatus p { font-size:16px; line-height:1.6; margin:0; color:rgba(255,236,214,.86); }
.article-body .apparatus a { color:var(--amber); }
.headrow { display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.headrow .kicker { margin:0; }
.searchlink { font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); text-decoration:none; border-bottom:1px solid rgba(242,122,12,.5); }
.searchlink:hover { color:#fff; }

/* ---------- footnotes ---------- */
.essay sup.fnref { font-size:.6em; line-height:0; vertical-align:baseline; position:relative; top:-.6em; }
.essay sup.fnref a { font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); text-decoration:none; color:var(--amber); padding:0 1px; }
.essay sup.fnref a:hover { color:#fff; }
.essay .footnotes { margin-top:48px; padding-top:22px; border-top:1px solid rgba(242,122,12,.4); position:relative; }
.essay .footnotes .seclabel { font-size:12px; margin:0 0 16px; }
.essay .footnotes ol { margin:0; padding-left:1.6em; }
.essay .footnotes li { margin:0 0 16px; padding-left:4px; }
.essay .footnotes li::marker { font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:12px; color:var(--amber); }
.essay .footnotes p { font-size:16px; line-height:1.65; margin:0 0 12px; color:rgba(255,236,214,.82); }
.essay .footnotes li:target { background:rgba(242,122,12,.07); outline:1px solid rgba(242,122,12,.35); outline-offset:8px; }
.essay .fnback { text-decoration:none; margin-left:4px; color:var(--amber); }
.essay sup.fnref:target a { color:#fff; text-shadow:0 0 8px rgba(242,122,12,.8); }
/* sticky header would otherwise cover a jumped-to anchor */
.essay sup.fnref { scroll-margin-top:94px; }
.essay .footnotes li { scroll-margin-top:134px; }  /* room for the > NOTES label above note 1 */
@media (max-width:720px){ .essay .footnotes p { font-size:15px; } }

.srcnote { font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--dim); border-top:1px solid rgba(242,122,12,.35); border-bottom:1px solid rgba(242,122,12,.35); padding:14px 0; margin:0 0 34px; }
.srcnote a { color:var(--amber); }
@media (max-width:720px){ .lede { padding:14px 14px 14px 16px; } .article-body .lede p { font-size:17px; line-height:1.55; } .article-body li { font-size:17px; } .article-body .essay, .article-body .lede, .article-body .srcnote { max-width:none; } .article-body figure, .article-body .essay figure { margin:24px 0; max-width:100%; } }
.definition { border-left:4px solid var(--ember); background:rgba(242,122,12,.06); padding:20px 26px; margin:0 0 44px; }
.definition p { font-family:var(--font-serif, Georgia, serif); font-size:24px; line-height:1.6; color:#fff; margin:0; font-style:normal; }
.readlink { display:inline-flex; align-items:center; gap:8px; height:34px; box-sizing:border-box; padding:0 18px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; background:var(--ember); color:#000; text-decoration:none; white-space:nowrap; margin:14px 18px 0 0; clip-path:polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); transition:background 120ms steps(2); }
.readlink:hover { background:#fff; color:#000; text-shadow:none; }
.article-body a.readlink, .search-line .readlink { text-decoration:none; }
button.readlink { appearance:none; -webkit-appearance:none; border:0; line-height:1; cursor:pointer; }
.meta a.ret { white-space:nowrap; }
.meta { font-size:12px; letter-spacing:.06em; color:var(--dim); border-top:1px solid rgba(242,122,12,.35); padding-top:22px; margin-top:52px; line-height:2.1; }

/* ---------- footer ---------- */
main { flex:1 0 auto; padding-bottom:96px; }
footer.site { margin-top:auto; }
footer.site .bar { border-top:2px solid var(--ember); background:#000; }
footer.site .inner { max-width:1180px; margin:0 auto; padding:26px 40px; display:flex; align-items:baseline; justify-content:space-between; gap:22px 48px; flex-wrap:wrap; }
footer.site a, footer.site .sys { font-family:"OCR-B", "OCR-B Fallback", var(--font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
footer.site a:hover { color:#fff; }
footer.site .sys em { color:var(--green); font-style:normal; }
footer.site .fgrid { display:grid; grid-template-columns:auto auto; gap:14px 28px; align-items:baseline; }
footer.site .lab { text-align:right; color:rgba(255,236,214,.5); }   /* labels: neutral and a step quieter than the links */
footer.site .lab::before { content:"> "; color:var(--green); }
footer.site .flinks { display:flex; flex-wrap:wrap; gap:8px 24px; }
@media (max-width:720px){
  footer.site .inner { flex-direction:column; align-items:flex-start; gap:22px; }
  footer.site .fgrid { grid-template-columns:1fr; gap:10px 0; }
  footer.site .lab { text-align:left; }
  footer.site .lab + .flinks { margin-bottom:10px; }
  footer.site .flinks { gap:10px 20px; }
  footer.site a, footer.site .sys { font-size:11px; letter-spacing:.14em; }
  footer.site .flinks.people > :first-child { flex-basis:100%; }   /* the newsletter alone on its line; RSS, Search, Contact share the next */
}
@media (max-width:400px){
  footer.site .flinks { gap:10px 12px; }
  footer.site a, footer.site .sys { letter-spacing:.08em; }
}

/* ---------- mobile ---------- */
@media (max-width:960px){ a.row { column-gap:24px; padding:24px 14px; } .row .t { font-size:21px; } }
/* small tablets: the bar keeps the text field but gives it less room */
@media (max-width:880px){
  .pb-tabs .tab { padding:0 22px; letter-spacing:.12em; }
}
@media (max-width:720px) {
  .statusline { display:none; }
  .panel-bar { height:40px; padding-right:26px; }
  .pb-mark { padding:0 12px 0 14px; } .pb-mark img { height:17px; }
  /* phones: the search icon steps out of the bar (Search stays a footer link) and the three tabs share the
     whole run from the mark to the corner, keeping the desktop letter-spacing; the padding here is the floor
     at 320px, and the run stops growing at 410px, where each tab carries the desktop's 30px of padding */
  .pb-slink { display:none; }
  .pb-tabs { flex:1 1 auto; max-width:410px; }
  .pb-tabs .tab { --slant:20px; flex:1 1 auto; justify-content:center; padding:0 12px; font-size:10.5px; letter-spacing:.16em; }
  .wrap { padding:0 18px; }
  .panel { margin-top:18px; }
  .panel-body { padding:22px 18px; }
  .bio { font-size:19px; margin:16px 0 0; }
  .bio + .bio { margin:12px 0 18px; }
  .page-title { font-size:clamp(26px,7.6vw,40px); }
  h1.display { font-size:clamp(26px,7.6vw,40px); hyphens:none; }
  h1.display.longword { font-size:clamp(21px,7vw,40px); }   /* "Geoengineering" stays whole at 320px */
  h1.display .tl { display:block; }
  .glitch::before, .glitch::after { display:none; }
  a.row { padding:20px 8px; grid-template-columns:1fr; row-gap:10px; }
  .row .t { font-size:20px; }
  .row .rm { flex-direction:row; align-items:baseline; gap:0 12px; padding-top:0; flex-wrap:wrap; }
  .row .rm .venue::before { content:"\00b7"; margin-right:12px; }
  .subtitle, .article-body p.subtitle { font-size:18px; margin-bottom:30px; }
  .article-body p { font-size:18px; }
  .definition p { font-size:20px; }
  .readlink { margin:12px 12px 0 0; }
  /* long labels (mylesbadger.substack.com) are nowrap and overran the panel
     on narrow phones — let them wrap instead of spilling */
  .readlink { white-space:normal; height:auto; min-height:34px; padding:7px 14px;
              max-width:100%; overflow-wrap:anywhere; letter-spacing:.08em; }
  main { padding-bottom:56px; }
  footer.site .inner { padding:22px 18px; }
}
/* phones: the mark and three tabs share one bar down to 320px. The bar's right padding only has to keep the
   last tab's top corner clear of the panel's corner cut (the tab's own slant already gives back 12px) */
@media (max-width:479px){
  .panel-bar { padding-right:12px; }
  .pb-mark { padding:0 8px 0 10px; } .pb-mark img { height:15px; }
  .pb-tabs .tab { --slant:12px; padding:0 8px; font-size:10px; letter-spacing:.16em; gap:5px; }
  .pb-tabs .arr { display:none; }
}
/* the narrowest phones: a point smaller so the spacing survives */
@media (max-width:359px){
  .pb-mark { padding:0 6px 0 8px; } .pb-mark img { height:13px; }
  .pb-tabs .tab { --slant:10px; padding:0 6px; font-size:9px; letter-spacing:.12em; gap:4px; }
  .pb-tabs .arr { display:none; }
}
/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  #bgfx::after { animation:none; }
  .glitch::before, .glitch::after { display:none; }
  .statusline .dot { animation:none; }
}