/* Self-hosted fonts (SIL Open Font License 1.1): Cormorant Garamond, Source Serif 4, IBM Plex Mono. Latin and Latin Extended subsets. */
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/CormorantGaramond-italic-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/CormorantGaramond-italic-400-latin.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: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url(fonts/CormorantGaramond-italic-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url(fonts/CormorantGaramond-italic-500-latin.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: 'Cormorant Garamond'; font-style: italic; font-weight: 600; font-display: swap; src: url(fonts/CormorantGaramond-italic-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 600; font-display: swap; src: url(fonts/CormorantGaramond-italic-600-latin.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: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/CormorantGaramond-normal-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/CormorantGaramond-normal-400-latin.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: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/CormorantGaramond-normal-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/CormorantGaramond-normal-500-latin.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: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/CormorantGaramond-normal-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/CormorantGaramond-normal-600-latin.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: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/IBMPlexMono-normal-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/IBMPlexMono-normal-400-latin.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: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/IBMPlexMono-normal-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/IBMPlexMono-normal-500-latin.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: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/SourceSerif4-italic-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/SourceSerif4-italic-400-latin.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: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/SourceSerif4-normal-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/SourceSerif4-normal-400-latin.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: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/SourceSerif4-normal-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/SourceSerif4-normal-600-latin.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; }
/* Layout: a reading column with a margin beside it. The margin is where the status of a claim lives
   (observed / calculated / inferred), and where notebook lines and sources sit. On phones the margin
   notes drop in under the paragraph they belong to.
   Concept: the page is the lamp. In light mode the page colour is the bright field of the microscope,
   so computed images have no frame: the specimen sits directly on the light. */
:root {
  --page: #f1f1ee;        /* the bright field */
  --page-2: #e7e7e3;      /* a step down, for benches and panels */
  --ink: #1d1e1f;
  --ink-2: #4c4e50;
  --ink-3: #85878a;
  --rule: #d3d3cf;
  --brass: #876728;       /* the instrument: calculation, controls, focus */
  --brass-soft: #ece3d0;
  --haem: #4d4886;        /* haematoxylin: inference */
  --haem-soft: #e2e1ee;
  --field: #f1f1ee;       /* bright field colour for computed images */
  --surround: #f1f1ee;    /* what lies outside an image: in light mode, the page itself */
  --feather: 1;           /* light mode: images fade into the page */
  --display: "Cormorant Garamond", "Iowan Old Style", Garamond, Georgia, serif;
  --body: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --page: #141515; --page-2: #1c1d1d; --ink: #e6e5e1; --ink-2: #b0b0ab; --ink-3: #7c7d79; --rule: #2e2f2e;
  --brass: #d3aa60; --brass-soft: #33291a; --haem: #aaa6e8; --haem-soft: #25243a; --field: #e9e8e3; --surround: #0b0b0b; --feather: 0;
  color-scheme: dark; } }
:root[data-theme="dark"] {
  --page: #141515; --page-2: #1c1d1d; --ink: #e6e5e1; --ink-2: #b0b0ab; --ink-3: #7c7d79; --rule: #2e2f2e;
  --brass: #d3aa60; --brass-soft: #33291a; --haem: #aaa6e8; --haem-soft: #25243a; --field: #e9e8e3; --surround: #0b0b0b; --feather: 0;
  color-scheme: dark; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--body); font-size: 1.07rem; line-height: 1.64;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
main { max-width: 60rem; margin: 0 auto; padding-block: 0 6rem; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; text-wrap: balance; margin: 0; line-height: 1.08; }
h1 { font-size: clamp(2.6rem, 7vw, 4.4rem); font-style: italic; font-weight: 600; letter-spacing: -0.005em; }
h2 { font-size: clamp(2rem, 4.6vw, 2.8rem); font-weight: 500; }
h3 { font-size: 1.5rem; font-weight: 500; }
p { margin: 0; }
a { color: inherit; text-decoration-color: var(--brass); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 2px; }
.label { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .9em; }
.stack { display: flex; flex-direction: column; gap: 1.1rem; }
.stack > * { min-width: 0; }

/* Reading column + margin */
.row { display: grid; grid-template-columns: minmax(0, 37rem) minmax(0, 15rem); gap: 0 2.6rem; }
.row > .body { grid-column: 1; }
.row > aside { grid-column: 2; font-size: .84rem; line-height: 1.5; color: var(--ink-2); padding-top: .25rem; }
@media (max-width: 820px) { .row { grid-template-columns: minmax(0, 1fr); } .row > aside { grid-column: 1; padding: .2rem 0 .4rem 1rem; border-left: 1px solid var(--rule); margin-top: .7rem; } }
aside .note + .note { margin-top: .9rem; }

/* Claim status marks: a typographic mark, not a pill */
.claim { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.claim::before { content: ""; width: .55rem; height: .55rem; display: inline-block; margin-right: .45rem; vertical-align: -.02rem; }
.claim.obs { color: var(--ink-2); } .claim.obs::before { border: 1.5px solid var(--ink-2); border-radius: 50%; }
.claim.calc { color: var(--brass); } .claim.calc::before { background: var(--brass); border-radius: 1px; transform: rotate(45deg) scale(.85); }
.claim.inf { color: var(--haem); } .claim.inf::before { background: var(--haem); border-radius: 50%; }
.claim.syn { color: var(--ink-3); } .claim.syn::before { border: 1.5px dashed var(--ink-3); border-radius: 1px; }

/* Masthead */
.mast { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-block: 1.1rem; border-bottom: 1px solid var(--rule); }
.mark { font-family: var(--display); font-size: 1.35rem; font-style: italic; }
.mast .tools { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.seg button { font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; background: transparent; color: var(--ink-2); border: 0; padding: .38rem .65rem; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--rule); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--page); }
.seg-wrap { display: inline-flex; align-items: center; gap: .5rem; }

/* Chain map */
.chain { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.chain::before { content: ""; position: absolute; left: 10%; right: 10%; top: .62rem; border-top: 1px solid var(--rule); }
.link { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; position: relative; }
.link i { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1.5px solid var(--ink-3); background: var(--page); display: block; }
.link.lit i { background: var(--ink); border-color: var(--ink); }
.link.here i { box-shadow: 0 0 0 4px var(--page), 0 0 0 5.5px var(--brass); }
.link b { font-family: var(--display); font-weight: 500; font-size: 1.15rem; }
.link span { font-family: var(--mono); font-size: .68rem; color: var(--ink-3); }
@media (max-width: 520px) { .link b { font-size: .95rem; } .link span { font-size: .6rem; } }

/* Front door */
.door { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.4rem; padding-block: 1rem 3.5rem; }
.door canvas { width: min(100%, 60rem); aspect-ratio: 1200 / 520; display: block; }
.door .q { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.7rem, 4.4vw, 2.6rem); line-height: 1.2; max-width: 30ch; text-wrap: balance; }
.door .meta { font-family: var(--mono); font-size: .76rem; color: var(--ink-3); }
.begin { font-family: var(--body); font-size: 1rem; background: var(--ink); color: var(--page); border: 0; padding: .7rem 1.5rem; border-radius: 2px; cursor: pointer; text-decoration: none; }

/* Computed images: in light mode the specimen floats on the page (the image's bright field is the page colour,
   and its edges are feathered into it); in dark mode each image sits in a bright eyepiece field */
.specimen { display: block; width: 100%; aspect-ratio: 1; }
.eyepiece { overflow: hidden; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .eyepiece { border-radius: 50%; background: var(--surround); } }
:root[data-theme="dark"] .eyepiece { border-radius: 50%; background: var(--surround); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .door canvas { border-radius: 260px / 50%; } }
:root[data-theme="dark"] .door canvas { border-radius: 260px / 50%; }

section.block { padding-block: 3.6rem 0; display: flex; flex-direction: column; gap: 1.6rem; }
.divider { height: 1px; background: var(--rule); margin-top: 3.6rem; }
.sys-head { display: flex; flex-direction: column; gap: .5rem; }
.sys-head .what { font-size: .92rem; color: var(--ink-2); max-width: 44rem; }

/* Pair of images */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
@media (max-width: 620px) { .pair { grid-template-columns: minmax(0, 1fr); } }
.pair figure { margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.pair figcaption { font-size: .86rem; color: var(--ink-2); line-height: 1.5; }
.slot { aspect-ratio: 1; border: 1px dashed var(--ink-3); border-radius: 3px; display: grid; place-items: center; text-align: center; padding: 18%; font-size: .9rem; color: var(--ink-3); }

/* Prediction */
.choices { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--rule); }
.choice { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .6rem; padding: .95rem .2rem; border-bottom: 1px solid var(--rule); cursor: pointer; }
.choice:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
.choice .k { font-family: var(--display); font-size: 1.4rem; line-height: 1; color: var(--ink-3); padding-top: .1rem; }
.choice .why { display: block; font-size: .86rem; color: var(--ink-3); margin-top: .2rem; }
.choice[aria-checked="true"] .k { color: var(--ink); }
.choice[aria-checked="true"] .k::after { content: " \2022"; color: var(--brass); }
.choices[data-locked="true"] .choice:not([aria-checked="true"]) { opacity: .5; cursor: default; }
.commit { align-self: flex-start; font-family: var(--body); font-size: .98rem; background: var(--ink); color: var(--page); border: 0; padding: .6rem 1.3rem; border-radius: 2px; cursor: pointer; }
.commit:disabled { opacity: .35; cursor: not-allowed; }

/* "What you can now say" */
.say { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); padding-block: 1.3rem 1.5rem; display: flex; flex-direction: column; gap: .8rem; }
.say p.big { font-family: var(--display); font-size: clamp(1.45rem, 3.2vw, 1.85rem); line-height: 1.3; font-weight: 500; }

/* Bench */
.bench { background: var(--page-2); padding: 1.3rem; border-radius: 2px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: 1.6rem; }
@media (max-width: 760px) { .bench { grid-template-columns: minmax(0, 1fr); padding: 1rem; } }
svg.plot { width: 100%; height: auto; display: block; }
svg.plot text { font-family: var(--mono); font-size: 11px; fill: var(--ink-2); }
@media (max-width: 560px) { svg.plot text { font-size: 18px; } }
.ctl { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; }
.ctl label { display: flex; justify-content: space-between; gap: .5rem; }
.ctl label .num { color: var(--brass); }
input[type=range] { width: 100%; accent-color: var(--brass); }
.readout { font-family: var(--mono); font-size: .78rem; line-height: 1.8; color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: .6rem; }
.readout b { color: var(--ink); font-weight: 500; }
.live { font-size: .92rem; border-left: 2px solid var(--brass); padding-left: .8rem; }
.strip { width: 100%; height: 34px; display: block; }

/* Deep */
details.deep { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
details.deep summary { cursor: pointer; list-style: none; padding-block: .9rem; display: flex; gap: .7rem; align-items: baseline; font-family: var(--display); font-size: 1.35rem; font-weight: 500; }
details.deep summary::-webkit-details-marker { display: none; }
details.deep summary::before { content: "+"; font-family: var(--mono); font-size: 1rem; color: var(--brass); width: 1rem; }
details.deep[open] summary::before { content: "\2212"; }
details.deep .stack { padding-bottom: 1.2rem; }
.eq { font-family: var(--mono); font-size: .95rem; padding: .8rem 0 .8rem 1rem; border-left: 2px solid var(--brass); overflow-x: auto; }
table.vals { border-collapse: collapse; width: 100%; font-size: .88rem; }
table.vals th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: .3rem .8rem .3rem 0; border-bottom: 1px solid var(--ink-3); }
table.vals td { padding: .4rem .8rem .4rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tablewrap { overflow-x: auto; }

/* History */
.history { border-left: 2px solid var(--haem); padding-left: 1.3rem; }
.history .label { color: var(--haem); }

/* Notebook and handoff */
.notebook { font-size: .95rem; display: flex; flex-direction: column; gap: 0; }
.notebook li { list-style: none; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .6rem; padding: .7rem 0; border-bottom: 1px solid var(--rule); }
.notebook ol { padding: 0; margin: 0; }
.notebook .n { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); padding-top: .2rem; }
.notebook li.new .n { color: var(--brass); }
.notebook .pred { display: block; font-size: .8rem; color: var(--ink-3); font-family: var(--mono); margin-top: .2rem; }
.handoff { background: var(--page-2); padding: 2rem 1.6rem; display: flex; flex-direction: column; gap: 1.4rem; align-items: center; text-align: center; }
.handoff .q { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 3.6vw, 2.1rem); line-height: 1.25; max-width: 28ch; }
.handoff .chain { width: 100%; max-width: 34rem; }

/* System specimen */
.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; }
.sw { display: flex; flex-direction: column; gap: .35rem; font-size: .8rem; color: var(--ink-2); }
.sw i { display: block; height: 3.2rem; border: 1px solid var(--rule); border-radius: 2px; }
.sw b { font-family: var(--mono); font-weight: 500; font-size: .72rem; color: var(--ink); }
.types { display: flex; flex-direction: column; gap: 1rem; }
.types div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; align-items: baseline; border-bottom: 1px solid var(--rule); padding-bottom: .8rem; }
@media (max-width: 560px) { .types div { grid-template-columns: minmax(0, 1fr); gap: .2rem; } }
.render-cmp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 620px) { .render-cmp { grid-template-columns: minmax(0, 1fr); } }
.render-cmp figure { margin: 0; display: flex; flex-direction: column; gap: .4rem; font-size: .82rem; color: var(--ink-2); }
.render-cmp figure b { font-family: var(--mono); font-weight: 500; font-size: .74rem; color: var(--ink); letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
/* Chapter-page additions to the shared visual system */
.lede { font-family: var(--display); font-size: 1.45rem; font-weight: 500; line-height: 1.4; color: var(--ink); }
.caption { font-size: .85rem; color: var(--ink-2); line-height: 1.5; }
.print { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .print { border-radius: 4px; background: var(--field); } }
:root[data-theme="dark"] .print { border-radius: 4px; background: var(--field); }
canvas.night { display: block; width: 100%; aspect-ratio: 1; border-radius: 3px; background: #0b0b0b; }
.series { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 760px) { .series { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.series figure { margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.series figcaption { font-family: var(--mono); font-size: .74rem; color: var(--ink-2); line-height: 1.5; }
.series figure.best figcaption { color: var(--brass); }
.lamps { display: grid; grid-template-columns: repeat(2, minmax(0, 16rem)); gap: 1.6rem; justify-content: start; }
@media (max-width: 520px) { .lamps { grid-template-columns: minmax(0, 1fr); } }
.lamps figure { margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.lamps figcaption { font-size: .86rem; color: var(--ink-2); line-height: 1.5; }
.verdict { border-left: 2px solid var(--ink-3); padding-left: 1rem; }
.verdict.right { border-color: var(--brass); }
.ghost { font-family: var(--mono); font-size: .76rem; background: transparent; color: var(--ink); border: 1px solid var(--rule); padding: .45rem .7rem; border-radius: 2px; cursor: pointer; }
.tryit ol { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .4rem; }
.contribute { border: 1px dashed var(--ink-3); padding: .9rem 1.1rem; border-radius: 3px; font-size: .92rem; color: var(--ink-2); }
.contribute b { display: block; font-family: var(--mono); font-weight: 500; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--haem); margin-bottom: .3rem; }
.diagram { margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.diagram svg { width: 100%; max-width: 40rem; height: auto; display: block; }
.diagram svg text { font-family: var(--mono); font-size: 11px; fill: var(--ink-2); }
@media (max-width: 560px) { .diagram svg text { font-size: 15px; } }
.closing { font-family: var(--display); font-size: 1.45rem; font-weight: 500; line-height: 1.4; }
.history-inline { border-left: 2px solid var(--haem); padding-left: 1rem; }
.history-inline .label { color: var(--haem); }
.notebook-line { max-width: 34rem; font-size: .98rem; }
.notebook-line .label { color: var(--brass); }
ol.sources { padding-left: 1.2rem; margin: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .86rem; color: var(--ink-2); }
footer.block { margin-top: 2rem; border-top: 1px solid var(--rule); }
section.block + section.block { border-top: 1px solid var(--rule); }
.seg button:disabled { opacity: .55; cursor: default; }
.bench-row2 { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: 1.6rem; align-items: start; border-top: 1px solid var(--rule); padding-top: 1.2rem; }
@media (max-width: 760px) { .bench-row2 { grid-template-columns: minmax(0, 1fr); } }
#svg-curve text { font-size: 13px; }
@media (max-width: 560px) { #svg-curve text { font-size: 20px; } }
a.mark { color: inherit; text-decoration: none; }
.orders { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.orders button { font-family: var(--mono); font-size: .74rem; min-width: 2.4rem; padding: .3rem .4rem; border: 1px solid var(--rule); background: var(--page); color: var(--ink); border-radius: 2px; cursor: pointer; }
.orders button[aria-pressed="true"] { text-decoration: line-through; color: var(--ink-3); background: transparent; }
.ctl.locked { opacity: .5; }
.ctl select { font: inherit; font-size: .88rem; background: var(--page); color: var(--ink); border: 1px solid var(--rule); padding: .3rem; border-radius: 2px; max-width: 100%; }
ol.chapters { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
ol.chapters li > a, ol.chapters li > div { display: grid; grid-template-columns: 2.4rem minmax(0, 15rem) minmax(0, 1fr) auto; gap: .4rem 1rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none; }
ol.chapters li > a:hover b { text-decoration: underline; text-decoration-color: var(--brass); }
ol.chapters .n { font-family: var(--display); font-size: 1.6rem; color: var(--ink-3); }
ol.chapters b { font-family: var(--display); font-weight: 500; font-size: 1.4rem; }
ol.chapters span:not(.n) { color: var(--ink-2); font-size: .95rem; }
ol.chapters em { font-style: normal; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); }
ol.chapters li.soon { opacity: .55; } ol.chapters li.soon em { color: var(--ink-3); }
@media (max-width: 680px) { ol.chapters li > a, ol.chapters li > div { grid-template-columns: 2.4rem minmax(0, 1fr); } ol.chapters span:not(.n), ol.chapters em { grid-column: 2; } }
.door h1.q { font-style: italic; }
.wide-fig { margin: 0; display: flex; flex-direction: column; gap: .6rem; }
canvas.fringe-strip { display: block; width: 100%; height: 90px; border-radius: 3px; background: #0b0b0b; }
#presets button { min-width: 0; }
.swatch-row { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; align-items: center; }
.swatch { width: 6rem; height: 6rem; border-radius: 3px; border: 1px solid var(--rule); }
canvas.mlstrip { width: 100%; height: 26px; display: block; border-radius: 2px; }
.ctl input[type=checkbox] { width: 1.1rem; height: 1.1rem; accent-color: var(--brass); }
.buildup { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
@media (max-width: 640px) { .buildup { grid-template-columns: minmax(0, 1fr); } }
.clicks { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 4px; max-width: 30rem; }
.clicks i { display: block; aspect-ratio: 1; border-radius: 50%; background: var(--rule); }
.clicks i.on { background: var(--brass); }
.clicks.small { max-width: 18rem; gap: 3px; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
@media (max-width: 640px) { .three { grid-template-columns: minmax(0, 1fr); } }
.three figure { margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.three figcaption { font-size: .82rem; color: var(--ink-2); }
.row-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.links-answer b { font-family: var(--display); font-weight: 600; font-size: 1.15rem; }
#cv-front { width: 100%; aspect-ratio: 1200 / 520; display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #cv-front { border-radius: 260px / 50%; } }
:root[data-theme="dark"] #cv-front { border-radius: 260px / 50%; }
.navlink { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; }
.navlink:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--brass); }
.door .lede { max-width: 36rem; font-family: var(--body); font-size: 1.07rem; line-height: 1.64; text-align: left; display: flex; flex-direction: column; gap: .9rem; color: var(--ink-2); }
/* Thresholds: a plate and a few lines in another register, before the chapter begins. */
.threshold { display: flex; flex-direction: column; align-items: center; gap: 1.8rem; padding-block: .6rem 3rem; }
.threshold .plate { margin: 0; width: 100%; }
.threshold .plate img { display: block; width: 100%; height: auto; max-height: 68vh; object-fit: cover; border-radius: 2px; background: var(--page-2); }
.threshold figcaption { font-family: var(--mono); font-size: .64rem; letter-spacing: .05em; line-height: 1.6; color: var(--ink-3); margin-top: .7rem; max-width: 60rem; }
.threshold .hook { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.36; max-width: 32ch; text-align: center; text-wrap: pretty; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .threshold .plate img { animation: plate-in 2.2s cubic-bezier(.2,.6,.2,1) both; }
  .threshold .hook { animation: rise-in 1.4s .6s cubic-bezier(.2,.6,.2,1) both; }
  [id^="reveal"]:not([hidden]) { animation: rise-in 1s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes plate-in { from { opacity: 0; filter: brightness(1.8) blur(6px); } to { opacity: 1; filter: none; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
canvas.table-cv { display: block; width: 100%; height: auto; border-radius: 2px; background: #0c0b0a; }
.portrait { margin: 0 0 1.2rem; }
.portrait img { display: block; width: 100%; max-width: 15rem; height: auto; border-radius: 2px; margin-bottom: .5rem; }
/* Front door: the lamp switching on, once per visit. */
.lamp-on { display: none; }
.lamp-first .lamp-on { display: block; position: fixed; inset: 0; z-index: 50; pointer-events: none; background: radial-gradient(ellipse at 50% 32%, rgba(255,236,200,.0) 0%, #0b0b0a 0%); animation: lamp-fade 2.4s .35s cubic-bezier(.4,0,.2,1) both; }
.lamp-first .lamp-on::after { content: ""; position: absolute; left: 50%; top: 32%; width: 40vmax; height: 40vmax; margin: -20vmax 0 0 -20vmax; border-radius: 50%; background: radial-gradient(circle, rgba(255,240,214,.55), rgba(255,240,214,0) 65%); animation: lamp-glow 1.6s cubic-bezier(.2,.7,.2,1) both; }
.lamp-first #cv-front { animation: focus-pull 3s .5s cubic-bezier(.2,.6,.2,1) both; }
.lamp-first .door .q, .lamp-first .door .lede, .lamp-first .door .meta { animation: rise-in 1.4s 1.6s cubic-bezier(.2,.6,.2,1) both; }
@keyframes lamp-fade { 0% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes lamp-glow { 0% { transform: scale(.05); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes focus-pull { from { filter: blur(9px); opacity: .4; } to { filter: none; opacity: 1; } }
.continue a { font-family: var(--body); font-size: 1rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--brass); padding-bottom: 2px; }
.room-label { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: .4rem 0 .2rem; }
.room2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 2rem; align-items: start; margin-top: 3.2rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.room2-plate { margin: 0; }
.room2-plate img { display: block; width: 100%; height: auto; border-radius: 2px; }
.room2-plate figcaption { font-family: var(--mono); font-size: .64rem; letter-spacing: .04em; line-height: 1.6; color: var(--ink-3); margin-top: .6rem; }
.room-intro { font-family: var(--display); font-style: italic; font-size: clamp(1.2rem, 2.2vw, 1.45rem); line-height: 1.45; }
@media (max-width: 760px) { .room2 { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; } }
.handoff-links { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; justify-content: center; }
.swatches { display: flex; gap: 1rem; }
.swatches > div { display: flex; flex-direction: column; gap: .35rem; }
.swatch { display: block; width: 5.5rem; height: 3.2rem; border-radius: 2px; border: 1px solid var(--rule); }
.notebook .guess { display: block; font-family: var(--mono); font-size: .72rem; line-height: 1.6; color: var(--ink-3); margin-top: .25rem; }
.notebook .guess b { font-weight: 500; color: var(--ink-2); margin-right: .4rem; }
.notebook .guess.kept::before { content: "\25CF"; color: var(--brass); margin-right: .45rem; font-size: .6rem; }
.notebook .guess.changed::before { content: "\25CB"; color: var(--ink-3); margin-right: .45rem; font-size: .6rem; }
.plate-sm { display: block; width: 100%; max-height: 26rem; object-fit: contain; border-radius: 2px; background: var(--page-2); }
canvas.chart-cv { background: rgb(236,230,214); }
canvas.moon-cv { max-width: 32rem; margin-inline: auto; aspect-ratio: 1; }
/* Chapter 12: the live counter. */
.counter { display: flex; flex-direction: column; gap: .8rem; }
.counter-top { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 1.4rem; align-items: center; }
@media (max-width: 560px) { .counter-top { grid-template-columns: minmax(0, 1fr); } .counter-top canvas { max-width: 12rem; } }
.counter .count { font-family: var(--display); font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.1; }
.counter .count .num { font-size: 1em; }
.pair.tight { gap: .8rem; }
/* How this was made */
.made-table td { vertical-align: top; }
.made-table td:first-child { white-space: nowrap; font-family: var(--display); font-size: 1.05rem; }
ul.plain { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .6rem; }
.file-grid { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.file-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto auto; gap: 1rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--rule); }
.file-row .n { font-family: var(--mono); font-size: .8rem; color: var(--ink-3); }
.file-row a { font-family: var(--mono); font-size: .76rem; color: var(--ink-2); }
.made-link { font-size: .95rem; color: var(--ink-2); }
.made-link a { color: var(--ink); }
.handoff .bridge { max-width: 34rem; color: var(--ink-2); font-size: .98rem; }
/* Front door: the spectrum map */
.spectrum-map { margin: 0; width: min(100%, 60rem); display: flex; flex-direction: column; gap: .5rem; }
.smap { position: relative; height: 8.5rem; }
.smap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.smap-marks { position: absolute; inset: 0; }
.smark { position: absolute; transform: translateX(-50%); min-width: 1.7rem; height: 1.7rem; padding: 0 .35rem; border-radius: 1rem; display: grid; place-items: center; font-family: var(--mono); font-size: .72rem; text-decoration: none; color: var(--ink); background: var(--page); border: 1px solid var(--brass); }
.smark:hover, .smark:focus-visible { background: var(--brass); color: var(--page); }
.smark.top { top: 0; }
.smark.bot { top: 64%; margin-top: .35rem; }
.smark.narrow { display: none; }
@media (max-width: 640px) { .smark.wide { display: none; } .smark.narrow { display: grid; } }
.spectrum-map figcaption { font-family: var(--mono); font-size: .66rem; letter-spacing: .04em; color: var(--ink-3); text-align: center; }
.epi-entry { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
/* Epilogue */
svg.argument text { font-family: var(--mono); font-size: 13px; fill: var(--ink-2); }
.timeline { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; max-width: 46rem; }
.timeline li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1.2rem; padding: 1rem 0; border-top: 1px solid var(--rule); }
.timeline .yr { font-family: var(--display); font-size: 1.5rem; line-height: 1.1; color: var(--ink-2); }
.timeline .who { font-weight: 600; margin-bottom: .2rem; }
.timeline .lane { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-left: .5rem; font-weight: 400; }
.timeline .lane-w .lane { color: var(--brass); }
.timeline .where { font-family: var(--mono); font-size: .72rem; margin-top: .3rem; }
.timeline .where a { color: var(--ink-2); }
@media (max-width: 560px) { .timeline li { grid-template-columns: minmax(0, 1fr); gap: .3rem; } }
.moves, .unknowns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2rem; margin-top: .6rem; }
@media (max-width: 760px) { .moves, .unknowns { grid-template-columns: minmax(0, 1fr); } }
.moves .label, .unknowns .label { color: var(--brass); margin-bottom: .3rem; }
details.qa { border-top: 1px solid var(--rule); padding: .7rem 0; }
details.qa summary { cursor: pointer; font-family: var(--display); font-size: 1.2rem; line-height: 1.35; }
details.qa p { margin-top: .5rem; color: var(--ink-2); }
details.qa a { font-family: var(--mono); font-size: .74rem; color: var(--ink-2); margin-left: .3rem; }
/* Photograph slots stay in the source for Daniel's images, but are not shown to visitors. */
figure:has(> .slot) { display: none; }
.pair:has(> figure > .slot) { grid-template-columns: minmax(0, 1fr); max-width: 36rem; margin-inline: auto; }