.iso{
  --anatomy-page:#0b0b0b;--anatomy-card:#131313;--anatomy-text:#a3a3a3;--anatomy-strong:#e6e6e6;--anatomy-muted:#6e6e6e;
  --anatomy-paper:#131313;--anatomy-face:#1b1b1b;--anatomy-top:#1c1c1c;
  --anatomy-shade-0:#0f0f0f;--anatomy-shade-1:#121212;--anatomy-shade-2:#151515;--anatomy-shade-3:#181818;
  --anatomy-lit-top:#262626;--anatomy-lit-shade:#1d1d1d;
  --anatomy-hi:#d4d4d4;--anatomy-mid:#6a6a6a;--anatomy-lo:#3e3e3e;--anatomy-faint:#2a2a2a;--anatomy-lit:#ffffff;
  --anatomy-halo:#050505;--anatomy-halo-opacity:.9;--anatomy-dot:#e6e6e6;
  --anatomy-red:#ff6b6b;--anatomy-green:#6be0a0;--anatomy-blue:#6b9bff;
  --anatomy-weight:.6px;--anatomy-ease:cubic-bezier(.32,.72,0,1);
  --anatomy-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --anatomy-lift:inset 0 1px 0 0 #ffffff0a,inset 0 0 0 1px #ffffff06,0 0 0 1px #00000026,0 1px 1px -.5px #00000014,0 3px 3px -1.5px #00000014,0 6px 6px -3px #00000014,0 12px 12px -6px #00000014;
}
.iso[data-theme="light"]{
  --anatomy-page:#f2f2ef;--anatomy-card:#fbfbfa;--anatomy-text:#57575a;--anatomy-strong:#18181a;--anatomy-muted:#8c8c90;
  --anatomy-paper:#fbfbfa;--anatomy-face:#ffffff;--anatomy-top:#ffffff;
  --anatomy-shade-0:#dcdcd9;--anatomy-shade-1:#e5e5e2;--anatomy-shade-2:#ededea;--anatomy-shade-3:#f4f4f1;
  --anatomy-lit-top:#ffffff;--anatomy-lit-shade:#eeeeeb;
  --anatomy-hi:#26262a;--anatomy-mid:#8a8a8f;--anatomy-lo:#b4b4b8;--anatomy-faint:#d4d4d6;--anatomy-lit:#000000;
  --anatomy-halo:#8a8a80;--anatomy-halo-opacity:.32;--anatomy-dot:#3a3a3e;
  --anatomy-red:#e5484d;--anatomy-green:#30a46c;--anatomy-blue:#3e63dd;
  --anatomy-lift:inset 0 1px 0 0 #ffffff,0 0 0 1px #0000000f,0 1px 1px -.5px #0000000a,0 3px 3px -1.5px #0000000a,0 6px 6px -3px #0000000a,0 12px 12px -6px #0000000a;
}
.iso-svg{display:block;width:100%;height:auto;overflow:visible}
.iso-svg path,.iso-svg circle{vector-effect:non-scaling-stroke}
.iso-fill{fill:var(--anatomy-paper);stroke:none}
.iso-solid[data-lit]>.iso-fill{fill:var(--anatomy-face)}
.iso-shade,.iso-top{stroke:none}
.iso-shade[data-shade="0"]{fill:var(--anatomy-shade-0)}
.iso-shade[data-shade="1"]{fill:var(--anatomy-shade-1)}
.iso-shade[data-shade="2"]{fill:var(--anatomy-shade-2)}
.iso-shade[data-shade="3"]{fill:var(--anatomy-shade-3)}
.iso-top{fill:var(--anatomy-top)}
.iso-solid[data-lit]>.iso-top{fill:var(--anatomy-lit-top)}
.iso-solid[data-lit]>.iso-shade{fill:var(--anatomy-lit-shade)}
.iso-solid[data-seamless]>.iso-shade,.iso-solid[data-seamless]>.iso-top{stroke-width:.4;stroke-linejoin:round}
.iso-solid[data-seamless]>.iso-shade[data-shade="0"]{stroke:var(--anatomy-shade-0)}
.iso-solid[data-seamless]>.iso-shade[data-shade="1"]{stroke:var(--anatomy-shade-1)}
.iso-solid[data-seamless]>.iso-shade[data-shade="2"]{stroke:var(--anatomy-shade-2)}
.iso-solid[data-seamless]>.iso-shade[data-shade="3"]{stroke:var(--anatomy-shade-3)}
.iso-solid[data-seamless]>.iso-top{stroke:var(--anatomy-top)}
.iso-solid[data-seamless][data-lit]>.iso-top{stroke:var(--anatomy-lit-top)}
.iso-solid[data-seamless][data-lit]>.iso-shade{stroke:var(--anatomy-lit-shade)}
.iso-solid[data-lit]>.iso-edge{stroke:var(--anatomy-lit)}
.iso-halo{fill:var(--anatomy-halo);stroke:none;filter:blur(9px);opacity:var(--anatomy-halo-opacity);transform:translateY(3px)}
.iso-line{fill:none;stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight);stroke-linecap:round;stroke-linejoin:round}
.iso-line[data-tone="hi"]{stroke:var(--anatomy-hi)}
.iso-line[data-tone="mid"]{stroke:var(--anatomy-mid)}
.iso-line[data-tone="lo"]{stroke:var(--anatomy-lo)}
.iso-line[data-tone="faint"]{stroke:var(--anatomy-faint)}
.iso-line[data-tone="lit"]{stroke:var(--anatomy-lit)}
.iso-line[data-tone="red"]{stroke:var(--anatomy-red)}
.iso-line[data-tone="green"]{stroke:var(--anatomy-green)}
.iso-line[data-tone="blue"]{stroke:var(--anatomy-blue)}
.iso-line[data-dotted]{stroke-dasharray:.01 3.5;stroke-width:1}
.iso-line[data-dashed]{stroke-dasharray:3 3}
.iso-line[data-flow]{stroke-dasharray:2 6}
.iso-wire-end{fill:var(--anatomy-paper);stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight)}
.iso-wire[data-tone="hi"] .iso-wire-end{stroke:var(--anatomy-hi)}
.iso-wire[data-tone="mid"] .iso-wire-end{stroke:var(--anatomy-mid)}
.iso-wire[data-tone="faint"] .iso-wire-end{stroke:var(--anatomy-faint)}
.iso-wire[data-tone="lit"] .iso-wire-end{stroke:var(--anatomy-lit)}
.iso-dots circle{fill:var(--anatomy-dot);stroke:none;opacity:.32}
.iso-dots[data-tone="hi"] circle{opacity:.85}
.iso-dots[data-tone="mid"] circle{opacity:.45}
.iso-dots[data-tone="lo"] circle{opacity:.22}
.iso-dots[data-tone="faint"] circle{opacity:.12}
.iso-face-text{fill:var(--anatomy-mid);font-family:var(--anatomy-mono);letter-spacing:.04em}
.iso-face-text[data-tone="hi"]{fill:var(--anatomy-hi)}
.iso-face-text[data-tone="lo"]{fill:var(--anatomy-lo)}
.iso-face-text[data-tone="faint"]{fill:var(--anatomy-faint)}
.tb-body{fill:var(--anatomy-shade-2);stroke:none}
.tb-shine{fill:var(--anatomy-top);stroke:none}
.tb-shade{fill:var(--anatomy-shade-0);stroke:none}
.tb-ring{fill:none;stroke:var(--anatomy-lo);stroke-width:.45;stroke-linecap:butt;stroke-linejoin:round}
.tb-ring[data-tone="mid"]{stroke:var(--anatomy-mid)}
.tb-ring[data-tone="faint"]{stroke:var(--anatomy-faint)}
.tb-ring[data-tone="hi"]{stroke:var(--anatomy-hi)}
@keyframes iso-flow{to{stroke-dashoffset:-32}}
@keyframes iso-pulse{0%,100%{opacity:.18}12%{opacity:1}40%{opacity:.18}}
.iso-line[data-flow]{animation:iso-flow 1600ms linear infinite}
.iso-dots circle[data-pulse]{animation:iso-pulse 1600ms steps(1,end) infinite;animation-delay:var(--pulse-at,0ms)}
.iso-figure{margin:32px 0 36px}
.iso-plate{position:relative;padding:52px 24px;border-radius:0;background:var(--anatomy-card);box-shadow:0 0 0 1px var(--anatomy-mid);--anatomy-paper:var(--anatomy-card)}
.iso-plate-corners{position:absolute;inset:18px 20px;pointer-events:none}
.iso-plate-corner{position:absolute;color:var(--anatomy-muted);font-family:var(--anatomy-mono);font-size:10.5px;line-height:1;letter-spacing:.04em;white-space:nowrap}
.iso-plate-corner[data-corner="fig"]{top:0;left:0;color:var(--anatomy-text)}
.iso-plate-corner[data-corner="title"]{top:0;right:0;text-transform:uppercase;letter-spacing:.1em}
.iso-plate-corner[data-corner="hint"]{bottom:0;left:0;text-transform:uppercase;letter-spacing:.1em}
.iso-plate-corner[data-corner="readout"]{right:0;bottom:0;color:var(--anatomy-text);font-variant-numeric:tabular-nums}
.iso-plate .iso-svg{margin:0 auto}
.iso-legend{display:grid;gap:8px;margin-top:12px;color:var(--anatomy-muted);font-size:13px;line-height:1.55}
.iso-keys{display:flex;flex-wrap:wrap;gap:6px 18px}
.iso-key{display:inline-flex;align-items:center;gap:7px}
.iso-swatch{width:16px;height:10px;flex:none;overflow:visible}
.iso-swatch path{fill:none;stroke:var(--anatomy-hi);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.iso-swatch[data-mark="raised"] path,.iso-swatch[data-mark="flat"] path{stroke:var(--anatomy-mid)}
.iso-swatch[data-mark="lit"] path{stroke:var(--anatomy-lit)}
.iso-swatch[data-mark="dim"] path{stroke:var(--anatomy-lo)}
.iso-swatch[data-mark="dotted"] path{stroke-dasharray:.01 3;stroke-width:1.4}
.iso-swatch[data-mark="dashed"] path{stroke-dasharray:3 2.5}
.iso-swatch[data-mark="red"] path{stroke:var(--anatomy-red)}
.iso-swatch[data-mark="green"] path{stroke:var(--anatomy-green)}
.iso-swatch[data-mark="blue"] path{stroke:var(--anatomy-blue)}
.iso-swatch-crease{stroke:var(--anatomy-lo)!important}
@media (max-width:560px){.iso-plate{padding:48px 12px 70px}.iso-plate-corner[data-corner="hint"]{bottom:18px}}
@media (prefers-reduced-motion:reduce){.iso-line[data-flow],.iso-dots circle[data-pulse]{animation:none}}
/* Fig. 1 · Global 7500. The drawing keeps its original tones (warm paper, neutral
   greys, a black lit accent in light and white in dark); only the text and rules
   around it follow the site's livery palette. The kit reads every colour from
   these tokens. */
.g7 {
  --g7-gold: #b38a45;
  --g7-rule: color-mix(in srgb, var(--g7-gold) 55%, transparent);

  /* the drawing */
  --anatomy-page: #f7f5f0;
  --anatomy-card: #f7f5f0;
  --anatomy-paper: #f7f5f0;
  --anatomy-face: #fffefb;
  --anatomy-top: #fffefb;
  --anatomy-shade-0: #dad6cd;
  --anatomy-shade-1: #e4e0d8;
  --anatomy-shade-2: #ebe8e1;
  --anatomy-shade-3: #f2f0ea;
  --anatomy-lit-top: #ffffff;
  --anatomy-lit-shade: #ebe7df;
  --anatomy-hi: #26262a;
  --anatomy-mid: #8a8a8f;
  --anatomy-lo: #b4b4b8;
  --anatomy-faint: #d4d4d6;
  --anatomy-lit: #000000;
  --anatomy-dot: #3a3a3e;
  --anatomy-halo: #857f70;
  --anatomy-halo-opacity: 0.32;
  --g7-glass: #9fa1a5;
  --g7-void: #4a4b4e;
  --g7-spinner: #d9d9d6;

  /* the words around it: livery charcoal and gold deep */
  --anatomy-text: #4a4f51;
  --anatomy-strong: #4a4f51;
  --anatomy-muted: #7d5f2a;
  margin: 0;
}
[data-theme="dark"] .g7 {
  --anatomy-page: #121211;
  --anatomy-card: #121211;
  --anatomy-paper: #121211;
  --anatomy-face: #1b1b1b;
  --anatomy-top: #1c1c1c;
  --anatomy-shade-0: #0f0f0f;
  --anatomy-shade-1: #121212;
  --anatomy-shade-2: #151515;
  --anatomy-shade-3: #181818;
  --anatomy-lit-top: #262626;
  --anatomy-lit-shade: #1d1d1d;
  --anatomy-hi: #d4d4d4;
  --anatomy-mid: #6a6a6a;
  --anatomy-lo: #3e3e3e;
  --anatomy-faint: #2a2a2a;
  --anatomy-lit: #ffffff;
  --anatomy-dot: #e6e6e6;
  --anatomy-halo: #050505;
  --anatomy-halo-opacity: 0.9;
  --g7-glass: #090909;
  --g7-void: #050505;
  --g7-spinner: #262626;

  --anatomy-text: #f4f3f1;
  --anatomy-strong: #f4f3f1;
  --anatomy-muted: #c9c9cb;
}

/* ── layout: the plate, and beside it the description and the index ───── */
.g7 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 252px;
  column-gap: 36px;
  align-items: start;
}
.g7 .iso-plate {
  padding: 46px 18px 44px;
  background: var(--anatomy-card);
  box-shadow: 0 0 0 1px var(--g7-rule);
}
.g7-stage {
  position: relative;
  outline: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.g7-stage:focus-visible {
  outline: 1px solid var(--anatomy-hi);
  outline-offset: 6px;
}
.g7-svg {
  overflow: visible;
}
.g7-shadow {
  opacity: calc(var(--anatomy-halo-opacity) * 0.55);
}
.g7-glass {
  fill: var(--g7-glass);
  stroke: none;
}
.g7-void {
  fill: var(--g7-void);
  stroke: none;
}
.g7-spinner {
  fill: var(--g7-spinner);
  stroke: none;
}

/* selection: the chosen assembly becomes the one lit accent, the rest step down */
.g7-stage[data-focus] .it:not([data-on]):not([data-piece="stand"]) {
  --anatomy-hi: var(--anatomy-mid);
  --anatomy-mid: var(--anatomy-lo);
}
.g7-stage[data-focus] .it[data-piece="stand"] {
  --anatomy-mid: var(--anatomy-lo);
}
.it[data-on] {
  --anatomy-hi: var(--anatomy-lit);
  --anatomy-mid: var(--anatomy-hi);
}
.it[data-on] .iso-top {
  fill: var(--anatomy-lit-top);
}
.it[data-on] .iso-shade {
  fill: var(--anatomy-lit-shade);
}
.it[data-on] [data-seamless] > .iso-shade {
  stroke: var(--anatomy-lit-shade);
}
.it[data-on] [data-seamless] > .iso-top {
  stroke: var(--anatomy-lit-top);
}
.it path {
  transition: fill 240ms var(--anatomy-ease), stroke 240ms var(--anatomy-ease);
}

/* ── side column ───────────────────────────────────────────────────────── */
.g7-side {
  display: grid;
  gap: 30px;
  padding-top: 4px;
  color: var(--anatomy-text);
}
.g7-label {
  margin: 0 0 10px;
  font-family: var(--anatomy-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--anatomy-muted);
}
.g7-detail {
  min-height: 11.5em;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--g7-rule);
}
.g7-detail-name {
  margin: 0 0 8px;
  color: var(--anatomy-strong);
  font-size: 19px;
  line-height: 1.3;
}
.g7-detail-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}
.g7-parts {
  list-style: none;
  margin: 0;
  padding: 0;
}
.g7-part {
  display: flex;
  gap: 12px;
  align-items: baseline;
  width: 100%;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--anatomy-text);
  font: inherit;
  font-size: 15.5px;
  text-align: left;
  cursor: pointer;
}
.g7-num {
  font-family: var(--anatomy-mono);
  font-size: 10.5px;
  color: var(--anatomy-muted);
  font-variant-numeric: tabular-nums;
}
.g7-part:hover .g7-name,
.g7-part[data-on] .g7-name,
.g7-part[aria-pressed="true"] .g7-name {
  color: var(--anatomy-strong);
  text-decoration: underline;
  text-decoration-color: var(--g7-gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.g7-part:focus-visible,
.g7-btn:focus-visible {
  outline: 1px solid var(--anatomy-hi);
  outline-offset: 2px;
}
.g7-controls {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.g7-btn {
  padding: 6px 11px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: inset 0 0 0 1px var(--g7-rule);
  color: var(--anatomy-text);
  font-family: var(--anatomy-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.g7-btn:hover,
.g7-btn[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px var(--g7-gold);
  color: var(--anatomy-strong);
}
.g7-note {
  margin: 0;
  color: var(--anatomy-muted);
  font-size: 13px;
  font-style: italic;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .g7 {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }
  .g7-side {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px 28px;
  }
  .g7-detail {
    min-height: 0;
    border-bottom: 0;
    padding-bottom: 0;
  }
  .g7-note {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px) {
  .g7 .iso-plate {
    padding: 40px 0 56px;
    overflow: hidden;
  }
  .g7 .iso-plate .g7-svg {
    width: 120%;
    max-width: none;
    margin: -4% 0 0 -10%;
  }
  .g7 .iso-plate-corner[data-corner="title"] {
    display: none;
  }
  .g7-side {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .it path {
    transition: none;
  }
}

/* Design tokens, then layout, then components.
   Typography does most of the work: Newsreader for reading, IBM Plex Mono for
   labels, dates and the figure's technical annotations. */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/fonts/newsreader-normal.woff2") format("woff2-variations"), url("/fonts/newsreader-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url("/fonts/newsreader-italic.woff2") format("woff2-variations"), url("/fonts/newsreader-italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/fonts/plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("/fonts/plex-mono-500.woff2") format("woff2");
}

:root {
  --serif: "Newsreader", "Iowan Old Style", "Charter", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* scale: 4px base; type in a 1.2 ratio around 18px */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --t-label: 11px;
  --t-small: 14.5px;
  --t-body: 19px;
  --t-lede: 22px;
  --t-h2: 24px;
  --t-h1: 40px;

  --wide: 1200px;
  --measure: 640px;
  --margin: 168px; /* the label column on wide screens */
  --gutter: 48px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);

  /* the livery palette */
  --charcoal: #4a4f51; /* Livery Charcoal: dark ground, text */
  --gold: #b38a45; /* Cheatline Gold: lines only */
  --white: #f4f3f1; /* Livery White: light ground */
  --wing-grey: #c9c9cb; /* Wing Grey: secondary on dark */
  --gold-deep: #7d5f2a; /* Gold Deep: gold text on light */

  --paper: var(--white);
  --ink: var(--charcoal);
  --ink-2: color-mix(in srgb, var(--charcoal) 86%, var(--white));
  --muted: color-mix(in srgb, var(--charcoal) 72%, var(--white));
  --label: var(--gold-deep);
  --rule: color-mix(in srgb, var(--gold) 38%, var(--white));
  --rule-2: color-mix(in srgb, var(--gold) 70%, var(--white));
  --line: var(--gold);
  --todo-bg: color-mix(in srgb, var(--gold) 20%, var(--white));
  --todo-ink: var(--gold-deep);
  --select: color-mix(in srgb, var(--gold) 28%, var(--white));
  color-scheme: light;
}
html[data-theme="dark"] {
  --paper: var(--charcoal);
  --ink: var(--white);
  --ink-2: var(--wing-grey);
  --muted: var(--wing-grey);
  --label: var(--wing-grey);
  --rule: color-mix(in srgb, var(--gold) 45%, var(--charcoal));
  --rule-2: color-mix(in srgb, var(--gold) 75%, var(--charcoal));
  --todo-bg: color-mix(in srgb, var(--gold) 30%, var(--charcoal));
  --todo-ink: var(--white);
  --select: color-mix(in srgb, var(--gold) 40%, var(--charcoal));
  color-scheme: dark;
}

/* the figure reads its own palette tokens (figure.css); it takes the site's type */
.g7 {
  --anatomy-mono: var(--mono);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: 1.65;
  font-optical-sizing: auto;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection {
  background: var(--select);
}
a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line);
  text-underline-offset: 0.18em;
  transition: text-decoration-color 160ms var(--ease);
}
a:hover {
  text-decoration-color: currentColor;
}
:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}
img {
  max-width: 100%;
  height: auto;
}
.skip {
  position: absolute;
  left: var(--s4);
  top: -100px;
  padding: var(--s2) var(--s3);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: var(--t-label);
}
.skip:focus {
  top: var(--s4);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── frame ─────────────────────────────────────────────────────────────── */
.wrap {
  width: min(var(--wide), 100% - 2 * var(--s5));
  margin-inline: auto;
}
.label,
.meta,
.site-nav a {
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  padding-block: var(--s6);
}
.wordmark {
  text-decoration: none;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.site-nav ul {
  display: flex;
  gap: var(--s5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  color: var(--muted);
  text-decoration: none;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
}

.site-footer {
  margin-top: var(--s9);
  padding-block: var(--s5) var(--s7);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s3) var(--s5);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.06em;
}
.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer a {
  color: var(--muted);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--ink);
}

/* ── editorial rows: a margin label beside a measured column ───────────── */
.row {
  display: grid;
  grid-template-columns: var(--margin) minmax(0, var(--measure));
  column-gap: var(--gutter);
  padding-block: var(--s7) 0;
}
.row > .label {
  margin: 0;
  padding-top: 0.55em;
  color: var(--label);
}
.row > .label a {
  color: inherit;
  text-decoration: none;
}
.row > .label a:hover {
  color: var(--ink);
}
.row-more {
  margin: var(--s4) 0 0;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.row-more a {
  color: var(--muted);
  text-decoration: none;
}
.row-more a:hover {
  color: var(--ink);
}

/* ── prose ─────────────────────────────────────────────────────────────── */
.prose > :first-child {
  margin-top: 0;
}
.prose p,
.prose ul,
.prose ol,
.prose blockquote,
.prose pre {
  margin: 0 0 1.05em;
}
.prose h2 {
  margin: 2em 0 0.6em;
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.prose h3 {
  margin: 1.6em 0 0.5em;
  font-size: var(--t-body);
  font-weight: 600;
}
.prose ul,
.prose ol {
  padding-left: 1.2em;
}
.prose li {
  margin-bottom: 0.35em;
}
.prose li::marker {
  color: var(--muted);
}
.prose blockquote {
  padding-left: var(--s4);
  border-left: 1px solid var(--rule-2);
  color: var(--ink-2);
  font-style: italic;
}
.prose code {
  font-family: var(--mono);
  font-size: 0.78em;
  padding: 0.1em 0.3em;
  background: var(--rule);
}
.prose pre {
  padding: var(--s4);
  overflow-x: auto;
  border: 1px solid var(--rule);
  font-size: 15px;
  line-height: 1.55;
}
.prose pre code {
  padding: 0;
  background: none;
  font-size: 13px;
}
.prose hr {
  margin: var(--s7) 0;
  border: 0;
  border-top: 1px solid var(--rule);
}
.intro {
  font-size: var(--t-lede);
  line-height: 1.6;
}
.intro strong {
  font-weight: 600;
}
.todo {
  padding: 0.02em 0.12em;
  background: var(--todo-bg);
  color: var(--todo-ink);
  font-style: italic;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ── lists: writing and projects ───────────────────────────────────────── */
.entries {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.entry {
  border-bottom: 1px solid var(--rule);
}
.entry > a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--s2) var(--s5);
  padding-block: var(--s4);
  text-decoration: none;
}
.entry-title {
  font-size: var(--t-body);
  line-height: 1.35;
}
.entry > a:hover .entry-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.entry .meta {
  color: var(--label);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.entry-desc {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-small);
  line-height: 1.55;
}
.tag {
  display: inline-block;
  margin-left: var(--s2);
  padding: 0 0.45em;
  border: 1px solid var(--rule-2);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 0.2em;
  line-height: 1.6;
}
.post-tags {
  margin: var(--s3) 0 0;
}
.post-tags .tag {
  margin: 0 var(--s2) 0 0;
}
.year {
  margin: var(--s7) 0 var(--s3);
  color: var(--label);
}

.projects {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.project {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s1) var(--s5);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: var(--s6);
}
.project h3 {
  margin: 0;
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.35;
}
.project .meta {
  color: var(--label);
  white-space: nowrap;
}
.project p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-small);
  line-height: 1.55;
}
.project .project-link {
  margin-top: var(--s2);
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.06em;
}

/* ── pages ─────────────────────────────────────────────────────────────── */
.page-head {
  padding-block: var(--s7) var(--s2);
}
.page-head .label {
  margin: 0 0 var(--s4);
  color: var(--label);
}
.page-head h1 {
  margin: 0;
  font-size: var(--t-h1);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 60;
}
.page-head .lede {
  margin: var(--s4) 0 0;
  color: var(--ink-2);
  font-size: var(--t-lede);
  line-height: 1.5;
}
.page-body {
  padding-top: var(--s6);
}
.notice {
  margin: 0 0 var(--s6);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--rule-2);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.02em;
}
.article-foot {
  margin-top: var(--s8);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
}
.article-foot a {
  color: var(--muted);
  text-decoration: none;
}
.article-foot a:hover {
  color: var(--ink);
}

/* ── the exhibit ───────────────────────────────────────────────────────── */
.exhibit {
  padding-top: var(--s2);
}
.exhibit .g7-part,
.exhibit .g7-detail-text,
.exhibit .g7-detail-name,
.exhibit .g7-note {
  font-family: var(--serif);
}
.exhibit .g7-detail-name {
  font-weight: 500;
}

/* ── narrow screens ────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  :root {
    --t-body: 18px;
    --t-lede: 20px;
    --t-h1: 34px;
  }
  .row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s3);
  }
  .row > .label {
    padding-top: 0;
  }
}
@media (max-width: 640px) {
  .wrap {
    width: calc(100% - 2 * var(--s4));
  }
  .site-header {
    flex-direction: column;
    gap: var(--s3);
    padding-block: var(--s5);
  }
  .site-nav ul {
    gap: var(--s4);
  }
  .entry > a,
  .project {
    grid-template-columns: minmax(0, 1fr);
  }
  .entry .meta {
    order: -1;
  }
  .project .meta {
    order: -1;
    white-space: normal;
  }
  .row {
    padding-top: var(--s6);
  }
}
@media (prefers-reduced-motion: reduce) {
  a {
    transition: none;
  }
}
@media print {
  .site-nav,
  .exhibit {
    display: none;
  }
}