/* Medieval Engineering · companion sites
   Brand guide v2.2, section 8 (Channel/branding/brand-guide): parchment and warm ink, oxblood for the machine and the hero
   band, timber lettering for the hero and chapter titles, IM Fell French Canon and EB Garamond for the rest, Plex Mono labels.
   The dark theme's highlight is parchment: no coral or terracotta anywhere. */

@font-face { font-family: 'EB Garamond'; src: url('../fonts/EBGaramond-normal-400-700.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url('../fonts/EBGaramond-italic-400-700.woff2') format('woff2'); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'IM Fell French Canon'; src: url('../fonts/IMFellFrenchCanon-normal-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IM Fell French Canon'; src: url('../fonts/IMFellFrenchCanon-italic-400.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/IBMPlexMono-normal-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/IBMPlexMono-normal-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --paper: #f3ecdc;
  --paper-2: #ebe2cc;
  --paper-3: #e1d6bc;
  --ink: #1d1a16;
  --ink-2: #4d463c;
  --ink-3: #645b4e;
  --rule: #9a8e76;
  --rule-soft: #cfc3a7;
  --accent: #7a1f12;          /* links (underlined), key words, buttons, score bars; parchment in the dark theme */
  --accent-2: #9b2d1c;        /* hover and pressed */
  --on-accent: #f3ecdc;       /* text on an accent fill */
  --red-wash: #f0d9cf;        /* callout background */
  --hero: #7a1f12;            /* the oxblood hero band, in both themes (deeper in dark) */
  --ev-attested: #1f2933;
  --ev-reconstructed: #1d4ed8;
  --ev-assumed: #c2410c;
  --ev-illustrative: #6b7280;
  --display: 'IM Fell French Canon', 'EB Garamond', Garamond, 'Times New Roman', serif;
  --body: 'EB Garamond', Garamond, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --measure: 66ch;
  --gutter: clamp(16px, 4vw, 40px);
  --bar-h: 52px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #16130f; --paper-2: #1e1a15; --paper-3: #2a251e;
    --ink: #ece3d0; --ink-2: #c3b8a2; --ink-3: #958a76;
    --rule: #6f6553; --rule-soft: #3a342a;
    --accent: #ece3d0; --accent-2: #ffffff; --on-accent: #7a1f12; --red-wash: #3a1d16; --hero: #5f160b;
    --ev-attested: #d9d4c8; --ev-reconstructed: #7aa2ff; --ev-assumed: #f08a4b; --ev-illustrative: #9ca3af;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #16130f; --paper-2: #1e1a15; --paper-3: #2a251e;
  --ink: #ece3d0; --ink-2: #c3b8a2; --ink-3: #958a76;
  --rule: #6f6553; --rule-soft: #3a342a;
  --accent: #ece3d0; --accent-2: #ffffff; --on-accent: #7a1f12; --red-wash: #3a1d16; --hero: #5f160b;
  --ev-attested: #d9d4c8; --ev-reconstructed: #7aa2ff; --ev-assumed: #f08a4b; --ev-illustrative: #9ca3af;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 12px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 clamp(17px, 1.05rem + 0.25vw, 20px)/1.55 var(--body);
  font-variant-numeric: oldstyle-nums proportional-nums;
  overflow-x: hidden;
}
/* faint laid-paper grain */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .26 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg, video { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--accent-2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0; letter-spacing: .005em; }
p { margin: 0 0 .9em; }
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums lining-nums; }
.sc { font-variant: small-caps; letter-spacing: .06em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--ink); color: var(--paper); padding: 8px 12px; }
.skip:focus { left: 8px; }

/* ---------------------------------------------------------------- top bar */
.bar {
  position: sticky; top: 0; z-index: 30; height: var(--bar-h);
  display: flex; align-items: center; gap: 14px; padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule-soft);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; white-space: nowrap; flex: none; }
.brand .wordmark { height: 22px; width: auto; }
.brand .glyph { height: 30px; width: auto; }
.brand .back { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 640px) { .brand .wordmark { height: 15px; } }

/* drawn brand files come in a parchment and an ink version: show the one for the theme (manual toggle included) */
.on-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .on-light { display: none !important; }
  :root:not([data-theme="light"]) .on-dark { display: block !important; }
}
:root[data-theme="dark"] .on-light { display: none !important; }
:root[data-theme="dark"] .on-dark { display: block !important; }
.chapnav { flex: 1; min-width: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 85%, transparent); }
.chapnav::-webkit-scrollbar { display: none; }
.chapnav a {
  flex: none; padding: 6px 10px; border-radius: 2px; color: var(--ink-2); text-decoration: none;
  font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.chapnav a:hover { color: var(--ink); background: var(--paper-2); }
.chapnav a[aria-current="true"] { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.bar .btn { flex: none; }
@media (max-width: 640px) { .brand span { display: none; } }

/* ---------------------------------------------------------------- buttons and chips */
.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px;
  border: 1px solid var(--ink); border-radius: 2px; background: transparent; color: var(--ink);
  font: 500 13px/1.1 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); }
.btn.small { min-height: 32px; padding: 6px 12px; font-size: 11.5px; }
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn[aria-disabled="true"]:hover { background: transparent; color: var(--ink); }
.btn svg { width: 14px; height: 14px; flex: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--rule); border-radius: 2px;
  font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
a.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.watch::before { content: '▶'; font-size: 9px; color: var(--accent); }
.chip.model::before { content: '◇'; color: var(--accent); }
.chip[aria-disabled="true"] { border-style: dashed; color: var(--ink-3); }
.chip[aria-disabled="true"]::before { color: var(--ink-3); }
.src { font: 500 .62em/1 var(--mono); color: var(--ink-3); vertical-align: .35em; letter-spacing: .02em; white-space: nowrap; }
a.src { text-decoration: none; color: var(--ink-3); }
a.src:hover { color: var(--accent); }

/* ---------------------------------------------------------------- layout */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.prose { max-width: var(--measure); }
section { position: relative; }
.dim-rule { display: flex; align-items: center; gap: 12px; color: var(--rule); margin: 0 auto; max-width: 1180px; padding: 0 var(--gutter); }
.dim-rule i { flex: 1; position: relative; height: 1px; background: currentColor; }
.dim-rule i::before { content: ''; position: absolute; top: -5px; width: 1px; height: 11px; background: currentColor; }
.dim-rule i::after { content: ''; position: absolute; top: -4px; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.dim-rule i:first-child::before { left: 0; }
.dim-rule i:first-child::after { left: 1px; border-right: 9px solid currentColor; }
.dim-rule i:last-child::before { right: 0; }
.dim-rule i:last-child::after { right: 1px; border-left: 9px solid currentColor; }
.dim-rule span { font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }

/* ---------------------------------------------------------------- hero */
.hero { padding: clamp(32px, 6vw, 72px) 0 clamp(36px, 6vw, 64px); background: var(--hero); color: #f3ecdc;
  border-bottom: 6px double #f3ecdc; box-shadow: 0 6px 0 var(--hero); margin-bottom: 6px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.kicker { font: 500 12.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.hero .kicker { color: #f3ecdc; opacity: .85; }
.hero h1.timber img { width: 100%; max-width: 480px; height: auto; }   /* the stacked title at every width: the hero's one big headline */
.hero .lede { font-size: 1.12em; color: #f3ecdc; margin: 22px 0 26px; max-width: 32em; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero .btn { border-color: #f3ecdc; color: #f3ecdc; }
.hero .btn:hover { background: #f3ecdc; color: #7a1f12; }
.hero .btn.primary { background: #f3ecdc; border-color: #f3ecdc; color: #7a1f12; }
.hero .btn.primary:hover { background: #ffffff; border-color: #ffffff; color: #7a1f12; }
.hero .btn[aria-disabled="true"] { opacity: 1; background: transparent; color: #f3ecdc; border-style: dashed; }
.hero .btn[aria-disabled="true"]:hover { background: transparent; color: #f3ecdc; }
.hero .plate { box-shadow: inset 0 0 0 4px var(--paper-2), inset 0 0 0 5px var(--rule); }
.hero .plate .pl-no, .hero .plate .pl-title { background: var(--hero); color: #f3ecdc; }

/* timber headings (brand guide v2.2, section 4): the text stays as real text; the drawn version is a picture of it */
.timber { margin: 0; line-height: 0; }
.timber picture, .timber img { display: block; }
.timber img { height: clamp(40px, 22px + 2.4vw, 60px); width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
@media (max-width: 600px) { .timber img { height: clamp(70px, 23vw, 104px); } }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } .hero .plate { order: -1; } }

/* the engraving-plate frame: a double hairline with plate number and title */
.plate {
  position: relative; margin: 0; padding: 10px; background: var(--paper-2);
  border: 1px solid var(--ink); box-shadow: inset 0 0 0 4px var(--paper-2), inset 0 0 0 5px var(--rule);
}
.plate > .frame { position: relative; overflow: hidden; background: var(--paper-3); }
.plate > .frame > img, .plate > .frame > video { width: 100%; height: 100%; object-fit: cover; }
.plate .pl-no, .plate .pl-title {
  position: absolute; top: -9px; padding: 0 8px; background: var(--paper);
  font: italic 13px/18px var(--display); color: var(--ink-2);
}
.plate .pl-no { left: 16px; }
.plate .pl-title { right: 16px; }

/* ---------------------------------------------------------------- figures */
figure { margin: 0; }
.fig { margin: 0; }
.fig .frame { position: relative; overflow: hidden; background: var(--paper-3); border: 1px solid var(--rule); }
.fig img, .fig video { width: 100%; height: auto; }
.fig.cover .frame { aspect-ratio: 16 / 10; }
.fig.cover img, .fig.cover video { height: 100%; object-fit: cover; }
.fig.tall .frame { aspect-ratio: 4 / 5; }
.fig.tall img { height: 100%; object-fit: cover; }
.fig.contain .frame { background: var(--paper-2); }
.fig.contain img { height: 100%; object-fit: contain; }
figcaption { margin-top: 8px; font-size: .84em; line-height: 1.4; color: var(--ink-2); }
figcaption .fig-no { font-style: italic; color: var(--ink); }
figcaption .credit { display: block; margin-top: 2px; font: 400 11px/1.45 var(--mono); color: var(--ink-3); letter-spacing: .01em; }
figcaption .credit a { color: inherit; }
.ai-tag {   /* quiet: a small dimmed label in the picture's corner, the same in both themes because it sits on the picture */
  position: absolute; right: 6px; bottom: 6px; z-index: 2; padding: 2px 5px; border-radius: 2px;
  background: rgba(22, 19, 15, .32); color: rgba(243, 236, 220, .78);
  font: 400 9px/1.2 var(--mono); letter-spacing: .04em; pointer-events: none;
}
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 20px); }
@media (max-width: 760px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* placeholders: a cross-hatched plate waiting for its picture */
.ph .frame {
  display: grid; place-items: center; text-align: center; padding: 18px;
  background:
    repeating-linear-gradient(45deg, transparent 0 7px, color-mix(in srgb, var(--rule) 22%, transparent) 7px 8px),
    repeating-linear-gradient(-45deg, transparent 0 11px, color-mix(in srgb, var(--rule) 12%, transparent) 11px 12px),
    var(--paper-2);
  border: 1px dashed var(--rule);
}
.ph.cover .frame, .ph:not(.tall):not(.square) .frame { aspect-ratio: 16 / 9; }
.ph.tall .frame { aspect-ratio: 4 / 5; }
.ph.square .frame { aspect-ratio: 1; }
.ph-card { max-width: 30em; background: color-mix(in srgb, var(--paper) 90%, transparent); padding: 10px 14px; border: 1px solid var(--rule-soft); }
.ph-card .code { display: block; font: 500 11px/1.3 var(--mono); letter-spacing: .12em; color: var(--accent); text-transform: uppercase; }
.ph-card .what { display: block; font-family: var(--display); font-size: 1.15em; line-height: 1.2; margin: 3px 0 4px; color: var(--ink); }
.ph-card .spec { display: block; font: 400 11px/1.4 var(--mono); color: var(--ink-3); }

/* ---------------------------------------------------------------- chapter index */
.index { padding: clamp(28px, 5vw, 56px) 0; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); background: color-mix(in srgb, var(--paper-2) 55%, transparent); }
.index h2 { font-size: clamp(28px, 1.5rem + 1vw, 40px); margin-bottom: 6px; }
.index .sub { color: var(--ink-2); margin-bottom: 24px; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.card { display: flex; flex-direction: column; height: 100%; background: var(--paper); border: 1px solid var(--rule); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.card:hover { border-color: var(--accent); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .card, .card:hover { transition: none; transform: none; } }
.card .thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-3); border-bottom: 1px solid var(--rule-soft); }
.card .thumb img, .card .thumb video { width: 100%; height: 100%; object-fit: cover; }
.card .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card .num { font: 500 11px/1 var(--mono); letter-spacing: .12em; color: var(--accent); text-transform: uppercase; display: flex; justify-content: space-between; }
.card h3 { font-size: 23px; }
.card p { margin: 0; font-size: .9em; color: var(--ink-2); line-height: 1.4; }
.card .thumb .ph-mini {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, transparent 0 7px, color-mix(in srgb, var(--rule) 20%, transparent) 7px 8px), var(--paper-2);
  font: 500 10.5px/1.3 var(--mono); color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase;
}

/* ---------------------------------------------------------------- the 3D block */
.model-block { padding: clamp(36px, 6vw, 80px) 0; }
.model-block .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (max-width: 860px) { .model-block .wrap { grid-template-columns: 1fr; } }
.model-block h2 { font-size: clamp(34px, 1.8rem + 2vw, 58px); margin-bottom: 14px; }
.model-stage { aspect-ratio: 4 / 3; }
.model-stage model-viewer { width: 100%; height: 100%; background: var(--paper-2); --poster-color: transparent; }
.model-stage .poster { position: relative; width: 100%; height: 100%; }
.model-stage .poster img { width: 100%; height: 100%; object-fit: cover; }
.model-stage .poster .btn { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); background: var(--paper); }
.model-stage .poster .btn:hover { background: var(--ink); }
.actions-3d { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 14px; }
.fine { font-size: .82em; color: var(--ink-3); font-style: italic; }

/* ---------------------------------------------------------------- chapters */
.chapter { padding: clamp(44px, 7vw, 96px) 0 clamp(20px, 3vw, 32px); }
.ch-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: clamp(20px, 3vw, 32px); padding-bottom: 16px; border-bottom: 1px solid var(--ink); position: relative; }
.ch-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; border-bottom: 1px solid var(--rule-soft); }
.ch-label { margin: 0; font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.ch-sub { margin: 2px 0 2px; font-family: var(--display); font-size: clamp(24px, 1.2rem + 1.2vw, 34px); line-height: 1.15; color: var(--ink); }
.ch-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ch-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.ch-body.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.ch-body.flip > :first-child { order: 2; }
@media (max-width: 860px) { .ch-body, .ch-body.flip { grid-template-columns: 1fr; } .ch-body.flip > :first-child { order: 0; } }
.ch-body > aside { display: flex; flex-direction: column; gap: 22px; }
.lede { font-size: 1.14em; line-height: 1.5; }
h3.sub { font-size: clamp(22px, 1.2rem + .6vw, 28px); margin: 1.6em 0 .5em; }
ul.points, ol.points { padding-left: 0; list-style: none; margin: 0 0 1.2em; }
ul.points li, ol.points li { position: relative; padding-left: 1.6em; margin-bottom: .55em; }
ul.points li::before { content: ''; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border: 1.6px solid var(--accent); border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0 1.4px, transparent 1.9px); }
ol.points { counter-reset: step; }
ol.points li { counter-increment: step; }
ol.points li::before { content: counter(step, upper-roman) '.'; position: absolute; left: 0; font-family: var(--display); color: var(--accent); }
.full { grid-column: 1 / -1; }
.block-gap { margin-top: clamp(24px, 4vw, 40px); }

/* callouts: myth check, the numbers, the quote */
.callout { border: 1px solid var(--ink); padding: 16px 18px 14px; background: var(--paper); position: relative; }
.callout .tag { position: absolute; top: -10px; left: 14px; padding: 0 8px; background: var(--paper); font: 500 11px/20px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.callout p:last-child { margin-bottom: 0; }
.callout.myth .verdict { font-family: var(--display); font-size: 1.25em; color: var(--accent); }
.formula { font: 400 14px/1.7 var(--mono); background: var(--paper-2); border-left: 3px solid var(--accent); padding: 10px 14px; margin: 0 0 1em; overflow-wrap: anywhere; }
blockquote.pull { margin: 1.4em 0; padding: 0; font-family: var(--display); font-style: italic; font-size: clamp(22px, 1.1rem + 1vw, 32px); line-height: 1.25; color: var(--ink); }
blockquote.pull cite { display: block; margin-top: 8px; font: 400 13px/1.4 var(--mono); font-style: normal; color: var(--ink-3); }

/* timeline */
.timeline { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.timeline li { position: relative; padding: 0 0 14px 22px; }
.timeline li::before { content: ''; position: absolute; left: -5px; top: .5em; width: 9px; height: 9px; background: var(--paper); border: 1px solid var(--ink); transform: rotate(45deg); }
.timeline li.key::before { background: var(--accent); border-color: var(--accent); }
.timeline .when { display: block; font: 500 12px/1.3 var(--mono); letter-spacing: .06em; color: var(--accent); }
.timeline .what { font-size: .95em; line-height: 1.4; }

/* people cards */
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 600px) { .people { grid-template-columns: 1fr; } }
.person .fig .frame { aspect-ratio: 4 / 5; }
.person .fig img { height: 100%; object-fit: cover; object-position: center 25%; }
.person h4 { margin: 10px 0 2px; font-family: var(--display); font-weight: 400; font-size: 21px; }
.person .role { font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.person p { font-size: .9em; color: var(--ink-2); line-height: 1.4; margin: 0; }

/* parts table */
details.parts { border: 1px solid var(--rule); background: var(--paper); }
details.parts summary { cursor: pointer; padding: 12px 16px; font: 500 13px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
details.parts summary::-webkit-details-marker { display: none; }
details.parts summary::after { content: '+'; color: var(--accent); font-size: 16px; }
details.parts[open] summary::after { content: '−'; }
.table-scroll { overflow-x: auto; border-top: 1px solid var(--rule-soft); }
table { border-collapse: collapse; width: 100%; font-size: .88em; }
th, td { text-align: left; vertical-align: top; padding: 8px 12px; border-bottom: 1px solid var(--rule-soft); }
th { font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); background: var(--paper-2); position: sticky; top: 0; }
td.id { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
td.dim { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.ev { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/1.3 var(--mono); white-space: nowrap; }
.ev::before { content: ''; width: 10px; height: 10px; border: 2px solid currentColor; }
.ev.attested { color: var(--ev-attested); }
.ev.reconstructed { color: var(--ev-reconstructed); }
.ev.assumed { color: var(--ev-assumed); }
.ev.illustrative { color: var(--ev-illustrative); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 16px; border-top: 1px solid var(--rule-soft); font-size: .85em; color: var(--ink-2); }

/* spec list with two units */
dl.specs { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 1.2em; padding: 14px 16px; border: 1px solid var(--rule); background: var(--paper); }
dl.specs dt { font: 500 12px/1.6 var(--mono); letter-spacing: .04em; color: var(--ink-3); text-transform: uppercase; }
dl.specs dd { margin: 0; }
dl.specs dd .fr { color: var(--ink-3); font-style: italic; }

/* ---------------------------------------------------------------- calculators */
.lab { border: 1px solid var(--ink); background: var(--paper); padding: clamp(16px, 2.4vw, 24px); position: relative; }
.lab .tag { position: absolute; top: -10px; left: 14px; padding: 0 8px; background: var(--paper); font: 500 11px/20px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.lab h3 { font-size: 26px; margin-bottom: 4px; }
.lab .hint { color: var(--ink-2); font-size: .92em; margin-bottom: 14px; }
.lab-grid { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 20px; align-items: start; }
@media (max-width: 520px) { .lab-grid { grid-template-columns: 1fr; } .lab-grid svg { max-width: 160px; margin: 0 auto; } }
.field { margin-bottom: 14px; }
.field label { display: flex; justify-content: space-between; gap: 10px; font: 500 12px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.field output { color: var(--ink); text-transform: none; }
input[type="range"] { width: 100%; accent-color: var(--accent); height: 28px; margin: 0; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.presets button { font: 500 11.5px/1.2 var(--mono); padding: 6px 9px; background: var(--paper-2); border: 1px solid var(--rule); color: var(--ink); border-radius: 2px; cursor: pointer; }
.presets button:hover, .presets button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.readout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); }
.lab-grid .readout { grid-template-columns: 1fr; }
.readout div { background: var(--paper-2); padding: 10px 12px; }
.readout dt { font: 500 10.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.readout dd { margin: 4px 0 0; font: 500 20px/1.15 var(--mono); font-variant-numeric: tabular-nums lining-nums; }
.readout dd small { display: block; font-size: 11px; color: var(--ink-3); font-weight: 400; margin-top: 2px; }
.lab .foot { margin-top: 12px; font-size: .84em; color: var(--ink-3); font-style: italic; }
.lab svg text { font-family: var(--mono); font-size: 9px; fill: var(--ink-2); }

/* ---------------------------------------------------------------- snag list and leaderboard */
.snags { list-style: none; padding: 0; margin: 0 0 1.2em; border: 1px solid var(--rule); background: var(--paper); }
.snags li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--rule-soft); }
.snags li:last-child { border-bottom: 0; }
.snags li::before { content: '✓'; width: 20px; height: 20px; border: 1px solid var(--ink); display: grid; place-items: center; font-size: 13px; color: var(--accent); }
/* the leaderboard as a ledger: one row per machine, four rulers, the total out of 40 (Channel/leaderboard/w-desktop-light.png) */
.ledger-wrap { margin-top: clamp(20px, 3vw, 32px); }
.ledger { border: 1px solid var(--ink); box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--rule); padding: 5px; }
.lg-head, .lg-row { display: grid; grid-template-columns: 52px 112px minmax(170px, 1.3fr) repeat(4, minmax(0, 1fr)) 96px; gap: 0 16px; align-items: center; padding: 10px 12px; }
.lg-head { font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.lg-head .lg-total { text-align: right; }
.lg-row { border-bottom: 1px solid var(--rule-soft); padding-top: 14px; padding-bottom: 14px; }
.lg-row:last-child { border-bottom: 0; }
.lg-new { background: var(--red-wash); }
.lg-rank { font-family: var(--display); font-size: 36px; line-height: 1; color: var(--accent); }
.lg-art { display: flex; align-items: flex-end; justify-content: center; height: 62px; border: 1px solid var(--rule); color: var(--ink); padding: 4px; }
.lg-drawing { height: 100%; width: auto; }
.lg-head .lg-art { border: 0; height: auto; padding: 0; }
.lg-name b { display: block; font: 400 24px/1.1 var(--display); }
.lg-name small { display: block; margin-top: 4px; font: 500 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.lg-score { display: grid; grid-template-columns: 1fr; gap: 2px; }
.lg-cat { display: none; }
.lg-val { font: 500 18px/1 var(--mono); }
.ruler { width: 100%; max-width: 170px; height: auto; }
.r-track { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.2; }
.r-fill { fill: var(--accent); }
.r-tick { stroke: var(--ink-2); stroke-width: 1; }
.r-tick.r-major { stroke-width: 1.4; }
.r-bolt { fill: var(--ink); }
.r-hole { fill: var(--paper); }
.lg-row .lg-total { text-align: right; font: 500 34px/1 var(--mono); color: var(--accent); }
.lg-foot { margin: 10px 0 0; font: 500 11px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.lg-why { margin: 18px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: .92em; }
.lg-why dt { font: 500 12px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.lg-why dd { margin: 0; color: var(--ink-2); }
/* phones and narrow columns: each machine becomes a card with its four rulers */
@media (max-width: 900px) {
  .lg-head { display: none; }
  .lg-row { grid-template-columns: 44px 96px 1fr auto; grid-template-areas: 'rank art name total' 's1 s1 s1 s1' 's2 s2 s2 s2' 's3 s3 s3 s3' 's4 s4 s4 s4'; gap: 6px 12px; }
  .lg-rank { grid-area: rank; } .lg-art { grid-area: art; height: 54px; } .lg-name { grid-area: name; } .lg-row .lg-total { grid-area: total; font-size: 28px; }
  .lg-s1 { grid-area: s1; } .lg-s2 { grid-area: s2; } .lg-s3 { grid-area: s3; } .lg-s4 { grid-area: s4; }
  .lg-score { grid-template-columns: 112px 1fr 40px; align-items: center; gap: 10px; }
  .lg-cat { display: block; font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
  .lg-score .ruler { order: 2; max-width: 240px; }
  .lg-name b { font-size: 20px; } .lg-val { order: 3; text-align: right; font-size: 15px; }
  .lg-why { grid-template-columns: 1fr; gap: 2px; } .lg-why dd { margin-bottom: 10px; }
}

/* ---------------------------------------------------------------- visit, sources, credits */
.visit { padding: clamp(40px, 6vw, 80px) 0; }
.visit h2, .sources h2 { font-size: clamp(30px, 1.6rem + 1.4vw, 46px); margin-bottom: 8px; }
.places { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 18px; }
.place { border: 1px solid var(--rule); background: var(--paper); display: flex; flex-direction: column; }
.place .fig .frame { aspect-ratio: 4 / 3; border: 0; border-bottom: 1px solid var(--rule-soft); }
.place .fig img { height: 100%; object-fit: cover; }
.place .fig figcaption { padding: 0 12px; }
.place .text { padding: 10px 12px 14px; }
.place .no-photo {
  aspect-ratio: 4 / 3; display: grid; place-items: center; border-bottom: 1px solid var(--rule-soft);
  background: repeating-linear-gradient(45deg, transparent 0 7px, color-mix(in srgb, var(--rule) 18%, transparent) 7px 8px), var(--paper-2);
}
.place .no-photo span { font-family: var(--display); font-style: italic; font-size: 30px; color: var(--ink-3); background: var(--paper); padding: 2px 14px; border: 1px solid var(--rule-soft); }
.place h3 { font-size: 21px; margin-bottom: 2px; }
.place .where { font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.place p { margin: 0; font-size: .9em; color: var(--ink-2); line-height: 1.4; }
.sources { padding: clamp(40px, 6vw, 80px) 0; background: var(--paper-2); border-top: 1px solid var(--rule); }
.sources .cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); }
@media (max-width: 860px) { .sources .cols { grid-template-columns: 1fr; } }
.sources h3 { font-size: 24px; margin: 1.2em 0 .5em; }
.sources ol, .sources ul { padding: 0; margin: 0; list-style: none; font-size: .86em; line-height: 1.45; }
.sources li { padding: 6px 0; border-bottom: 1px solid var(--rule-soft); overflow-wrap: anywhere; }
.sources li:target { background: var(--red-wash); }
.sources .code { font: 500 11.5px/1 var(--mono); color: var(--accent); margin-right: 6px; }
.sources cite { font-style: italic; }
.sources p { font-size: .9em; color: var(--ink-2); }

/* ---------------------------------------------------------------- footer */
.foot-site { padding: 36px 0 48px; border-top: 1px solid var(--ink); text-align: center; }
.foot-site .lockup { margin: 0 auto 18px; width: min(420px, 100%); }
.foot-site .lockup img { width: 100%; height: auto; margin: 0 auto; }
.foot-site .sign { font-family: var(--display); font-size: clamp(26px, 1.4rem + 1.2vw, 40px); font-style: italic; margin-bottom: 6px; }
.foot-site p { color: var(--ink-3); font-size: .86em; margin: 4px 0; }
.foot-site .links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.theme-toggle { background: none; border: 1px solid var(--rule); color: var(--ink-2); font: 500 11px/1 var(--mono); padding: 6px 10px; border-radius: 2px; cursor: pointer; letter-spacing: .06em; text-transform: uppercase; }

/* ---------------------------------------------------------------- the 3D page */
body.model-page { display: grid; grid-template-rows: auto auto 1fr auto; min-height: 100vh; min-height: 100dvh; }
.mp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px var(--gutter); border-bottom: 1px solid var(--rule-soft); background: var(--paper); }
.seg { display: inline-flex; border: 1px solid var(--ink); border-radius: 2px; overflow: hidden; }
.seg button { background: transparent; border: 0; padding: 8px 12px; font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.mp-tools .spacer { flex: 1; }
.mp-stage { position: relative; min-height: 420px; background: var(--paper-2); }
.mp-stage iframe, .mp-stage model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--paper-2); }
.mp-note { padding: 10px var(--gutter) 14px; font-size: .82em; color: var(--ink-3); border-top: 1px solid var(--rule-soft); display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between; }
.mv-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 6px 10px; background: color-mix(in srgb, var(--paper) 88%, transparent); font: 500 11px/1.2 var(--mono); color: var(--ink-2); border: 1px solid var(--rule); pointer-events: none; white-space: nowrap; }
.ar-btn { position: absolute; right: 14px; bottom: 14px; }

/* ---------------------------------------------------------------- hub */
.hub-hero { padding: clamp(48px, 9vw, 120px) 0 clamp(28px, 4vw, 48px); text-align: center; }
.hub-hero h1 { margin: 0 auto; width: min(340px, 72vw); line-height: 0; }
.hub-hero h1 img { width: 100%; height: auto; }
.hub-hero p { color: var(--ink-2); font-size: 1.15em; font-style: italic; margin-top: 12px; }
.episodes { list-style: none; padding: 0; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 22px; max-width: 1000px; }