/* Recommended direction: the Hang (surface), the Field (structure), the Catalogue (archive),
   set in one type system. Serif = Peter's voice and editorial text. Sans = the institution.
   Mono = the machine: dates, codes, measurements. Cyan = measured. Amber = interpreted. Violet = Peter: his words, his record, his own rating. Red = a fault. */
@font-face { font-family: "Caslon"; src: url(/fonts/libre-caslon.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Caslon"; src: url(/fonts/libre-caslon-italic.woff2) format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken"; src: url(/fonts/hanken-grotesk.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(/fonts/ibm-plex-mono-400-latin.woff2) format("woff2"); font-display: swap; }
/* The same files under their published names, which the Oracle's canvas figures ask for (public/js/constellation.js). */
@font-face { font-family: "Libre Caslon Text"; src: url(/fonts/libre-caslon.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url(/fonts/libre-caslon-italic.woff2) format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url(/fonts/hanken-grotesk.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/ibm-plex-mono-400-latin.woff2) format("woff2"); font-weight: 400 500; font-display: swap; }

:root {
  --ground: #131211; --raise: #1a1917; --line: #2d2b28; --text: #ebe6dc; --muted: #95907f; --faint: #8b8678; --dim: #5d5a52; --low: #e08a55;
  --empty: #24221f; --cyan: #7accd6; --amber: #dda15a; --red: #ea5a36; --peter: #b49ce1; --peter-deep: #3a2e50; --gold: #e1c167;
  --serif: "Caslon", Georgia, serif; --sans: "Hanken", system-ui, sans-serif; --mono: "Plex Mono", ui-monospace, monospace;
  --gut: 48px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--text); }
body { font-family: var(--sans); font-size: 16.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: .05em; text-transform: uppercase; }
.serif { font-family: var(--serif); }
.muted { color: var(--muted); }
.xref { border-bottom: 1px solid var(--dim); }
.xref:hover { border-color: var(--text); }

header.top { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: baseline;
  padding: 18px var(--gut); background: rgba(19,18,17,.94); border-bottom: 1px solid var(--line); }
.mark { color: var(--gold); font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.mark span { font-weight: 400; color: var(--muted); letter-spacing: .02em; text-transform: none; margin-left: 10px; font-size: 15px; }
header nav { display: flex; gap: 30px; font-size: 15px; color: var(--muted); }
header nav a:hover { color: var(--text); }
/* The line under the header: "Your path" on the left, the page's walk-through (where it has one) on the right. The path
   never wraps; site.js drops its oldest places until it fits beside the player. */
.pathbar { display: flex; align-items: center; gap: 20px; padding: 0 var(--gut); border-bottom: 1px solid var(--line); }
.pathbar:not(.has-listen):has(> .trail[hidden]) { display: none; }
.trail { padding: 9px 0; color: var(--faint); display: flex; gap: 10px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
.trail a { color: var(--muted); } .trail a:last-child { color: var(--text); }
.trail i { font-style: normal; color: var(--faint); }
footer.foot { padding: 28px var(--gut) 40px; color: var(--faint); font-size: 14px; border-top: 1px solid var(--line); margin-top: 80px; }

/* Marginal notes. Observed: computed by the page from the records (cyan ring).
   Neon: text Neon wrote, from Step 3 drafts (amber ring); unsigned until the Neon page. */
.observed, .neon-note { display: flex; gap: 12px; line-height: 1.45; }
.observed::before, .neon-note::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; }
.observed { color: var(--muted); font-size: 15px; }
.observed::before { border: 1px solid var(--cyan); }
.neon-note { color: var(--text); font-family: var(--serif); font-style: italic; font-size: 18px; margin-top: 16px; }
.neon-note::before { border: 1px solid var(--amber); margin-top: 8px; }
.wall-label .neon-note { font-size: 16.5px; margin-top: 22px; max-width: 220px; }
.measured { color: var(--cyan); }

/* ---------- Landing ---------- */
.hang { display: grid; grid-template-columns: 1fr 220px; gap: 44px; align-items: end; min-height: calc(100svh - 60px); padding: 4vh var(--gut) 8vh; }
.hang figure { margin: 0; height: 100%; display: flex; align-items: center; justify-content: center; }
.hang img { max-width: 100%; max-height: 70svh; display: block; }
.wall-label { padding-bottom: 7vh; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.wall-label .t { font-family: var(--mono); color: var(--text); font-size: 15px; display: block; margin-bottom: 8px; }
.wall-label a { display: inline-block; margin-top: 14px; color: var(--text); }

.intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 90px; padding: 110px var(--gut) 110px; border-top: 1px solid var(--line); }
.intro h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3vw, 42px); line-height: 1.25; margin: 0; }
.intro h1 span { color: var(--muted); }
.bio dl { margin: 0; display: grid; grid-template-columns: 76px 1fr; row-gap: 11px; font-size: 16px; line-height: 1.6; }
.bio dt { font-family: var(--mono); font-size: 13px; color: var(--faint); padding-top: 3px; }
.bio dd { margin: 0; }

.section-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; padding: 0 var(--gut) 20px; }
.section-head h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; margin: 0; }
.section-head p { margin: 6px 0 0; color: var(--muted); font-size: 15px; max-width: 44em; }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 70px var(--gut) 0; border-top: 1px solid var(--line); }
.pair > div { padding: 26px 40px 10px 0; }
.pair > div + div { padding-left: 40px; border-left: 1px solid var(--line); }
.pair .lab { margin-bottom: 14px; display: block; }
.pair blockquote { margin: 0; font-family: var(--serif); font-size: 25px; line-height: 1.38; }
.pair cite { display: block; font-style: normal; margin-top: 14px; color: var(--faint); }
.pair .claim { font-family: var(--serif); font-size: 25px; line-height: 1.38; margin: 0 0 14px; }
.pair .stat { color: var(--muted); font-size: 15px; }

.doors { display: grid; grid-template-columns: repeat(3, 1fr); margin: 110px var(--gut) 0; border-top: 1px solid var(--line); }
.doors a { padding: 20px 26px 30px 0; border-bottom: 1px solid var(--line); }
.doors b { display: block; font-family: var(--serif); font-weight: 400; font-size: 23px; margin-bottom: 5px; }
.doors span { color: var(--muted); font-size: 15px; }

/* ---------- The field ---------- */
.controls { display: flex; justify-content: space-between; align-items: baseline; padding: 0 var(--gut) 14px; gap: 20px; flex-wrap: wrap; }
.arrange { display: flex; gap: 22px; font-size: 15px; color: var(--muted); align-items: baseline; }
.arrange button[aria-pressed=true] { color: var(--text); box-shadow: inset 0 -1px var(--text); }
.legend { display: flex; gap: 18px; color: var(--muted); }
.legend i { display: inline-block; width: 13px; height: 8px; margin-right: 6px; }
.field-wrap { position: relative; margin: 8px var(--gut) 0; }
.field { position: relative; }
.tile { position: absolute; left: 0; top: 0; background: linear-gradient(180deg, rgba(216,208,191,.3), rgba(216,208,191,.17)); box-shadow: inset 0 0 0 1px rgba(216,208,191,.2); transition: transform .9s cubic-bezier(.2,.7,.1,1), opacity .4s; }
.tile img { width: 100%; height: 100%; display: block; object-fit: cover; }
.tile.carry { outline: 1px solid #fff; outline-offset: 1px; z-index: 2; box-shadow: 0 0 14px rgba(255,255,255,.22); }
/* Adopted from the luminous test: only the followed set gets more contrast; no glow on data or text. */
.field.carrying .tile:not(.carry) { opacity: .42; }
.tile .tick { position: absolute; left: -2px; right: -2px; height: 2px; background: var(--cyan); }
.axis { position: relative; height: 58px; border-top: 1px solid var(--line); margin-top: 6px; }
.axis span { position: absolute; top: 9px; transform: translateX(-50%); color: var(--muted); white-space: nowrap; }
.axis span.ph { top: 32px; transform: none; color: var(--text); }
.axis span.ph em { font-style: normal; color: var(--muted); margin-left: 6px; text-transform: none; font-family: var(--sans); letter-spacing: 0; font-size: 14px; }
.axis span.col { line-height: 1.5; text-align: center; }
.axis span.col b { display: block; color: var(--text); font-weight: 400; }
.axis span.col.none b { color: var(--faint); }
.hover { position: absolute; pointer-events: none; z-index: 5; background: var(--raise); border: 1px solid var(--line); padding: 10px 12px; font-size: 14px; line-height: 1.5; width: 210px; display: none; }
.hover img { width: 100%; margin-bottom: 8px; display: block; }

.setpanel { display: grid; grid-template-columns: 4fr 5fr 4fr; gap: 48px; margin: 34px var(--gut) 0; padding-top: 24px; border-top: 1px solid var(--line); }
.setpanel h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 0 0 8px; }
.setpanel .facts { color: var(--muted); font-size: 15px; line-height: 1.8; }
.setpanel .facts b { color: var(--text); font-weight: 400; font-family: var(--mono); font-size: 14px; }
.setpanel .strip { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-end; }
.setpanel .strip img { height: 46px; display: block; }
.see { font-size: 16px; }
.see a { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.see a .mono { width: 56px; flex: none; color: var(--cyan); padding-top: 2px; }
.see .observed { padding: 12px 0 0; }

/* ---------- Work: the layers ---------- */
.work { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr); min-height: calc(100svh - 60px); }
.work .plate { position: sticky; top: 60px; height: calc(100svh - 60px); display: flex; align-items: center; justify-content: center; padding: 40px; border-right: 1px solid var(--line); }
.plate-in { position: relative; display: inline-block; }
.plate-in img { display: block; max-width: 100%; max-height: calc(100svh - 160px); }
.grid9 { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); pointer-events: none; opacity: 0; transition: opacity .5s; }
.grid9.on { opacity: 1; }
.grid9 div { border: 1px solid rgba(122,204,214,.45); display: flex; align-items: flex-start; justify-content: flex-end; padding: 6px 8px; }
.grid9 div span { font-family: var(--mono); font-size: 13px; color: var(--ground); background: var(--cyan); padding: 1px 5px; }
.layers { padding: 34px 40px 60px; }
.layer-index { list-style: none; margin: 0 0 26px; padding: 0; border-top: 1px solid var(--line); }
.layer-index li a { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 16px; }
.layer-index li a .mono { color: var(--faint); padding-top: 2px; }
.layer-index li a em { font-style: normal; color: var(--faint); font-size: 14px; }
.layer-index li.on a { color: var(--text); }
.layer-index li.on a .mono { color: var(--text); }
.layer-index li.past a { color: var(--text); }
.layer h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; margin: 0 0 4px; }
.layer .kicker { margin-bottom: 18px; display: block; color: var(--muted); }
.layer .kicker.measured { color: var(--cyan); }
.layer dl { display: grid; grid-template-columns: 100px 1fr; row-gap: 9px; margin: 0 0 24px; font-size: 16px; }
.layer dt { font-family: var(--mono); font-size: 13px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; padding-top: 3px; }
.layer dd { margin: 0; }
.layer p { margin: 0 0 14px; line-height: 1.6; }
.rungs { margin: 6px 0 22px; }
.rung { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 14px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.rung .bar { display: grid; grid-template-columns: repeat(4, 1fr) 30px; gap: 3px; align-items: center; }
.rung .bar b { font-weight: 400; color: var(--cyan); text-align: right; text-transform: none; }
.rung .bar i { height: 6px; background: var(--empty); }
.rung .bar i.f { background: var(--cyan); }
.rung .part { color: var(--muted); font-size: 14px; line-height: 1.4; }
.read { font-family: var(--serif); font-size: 20px; line-height: 1.6; }
.draft { color: var(--amber); }
.neighbours { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 20px; }
.neighbours a { display: block; }
.neighbours img { height: 44px; display: block; }
.neighbours .empty { width: 60px; height: 32px; background: var(--empty); display: block; }

/* ---------- Material ---------- */
.mat { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; padding: 64px var(--gut) 0; }
.mat h1 { font-family: var(--serif); font-weight: 400; font-size: 44px; margin: 8px 0 6px; line-height: 1.05; }
.mat .orig { font-size: 17px; color: var(--muted); margin-bottom: 30px; }
.card dl { display: grid; grid-template-columns: 110px 1fr; row-gap: 9px; margin: 0; font-size: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.card dt { font-family: var(--mono); font-size: 13px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; padding-top: 3px; }
.card dd { margin: 0; }
.era { margin-top: 10px; }
.era .row { display: grid; grid-template-columns: 44px 1fr; align-items: center; height: 15px; }
.era .row .c { color: var(--faint); font-size: 12.5px; }
.era .row .lane { position: relative; height: 100%; border-bottom: 1px solid #1f1e1c; }
.era .row .lane i { position: absolute; top: 5px; height: 5px; background: #4a4842; }
.era .row .lane em { position: absolute; left: 0; top: 0; font-style: normal; font-size: 13px; color: var(--faint); }
.era .row.me .c { color: var(--text); } .era .row.me .lane i { background: var(--text); }
.era .months { position: relative; height: 24px; }
.era .months span { position: absolute; top: 8px; transform: translateX(-50%); color: var(--faint); }
.mat .works { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.mat .works img { height: 54px; display: block; }
.mat .works .empty { width: 100px; height: 54px; background: var(--empty); }

/* ---------- Oracle ---------- */
.oracle { padding: 64px var(--gut) 0; }
.oracle .lead { display: grid; grid-template-columns: 7fr 4fr; gap: 64px; align-items: end; }
.oracle h1 { font-family: var(--serif); font-weight: 400; font-size: 48px; line-height: 1.12; margin: 10px 0 0; }
.oracle .grade { display: flex; gap: 22px; color: var(--muted); }
.oracle .grade b { color: var(--cyan); font-weight: 400; }
.verbatim { font-family: var(--mono); font-size: 14px; line-height: 1.6; color: var(--muted); border-left: 1px solid var(--cyan); padding-left: 14px; margin: 18px 0 0; text-transform: none; letter-spacing: 0; }
.claims { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; margin-top: 16px; border-top: 1px solid var(--line); }
.claims div { display: grid; grid-template-columns: 1fr 96px; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 16.5px; }
.claims .v { text-align: right; } .claims .v.confirmed { color: var(--cyan); } .claims .v.weakening { color: var(--muted); }
.ledger { display: flex; gap: 46px; margin-top: 26px; color: var(--muted); font-size: 15px; }
.ledger b { display: block; font-family: var(--serif); font-weight: 400; font-size: 34px; color: var(--text); }

/* ---------- Neon ---------- */
.neon { display: grid; grid-template-columns: 5fr 6fr; gap: 80px; padding: 80px var(--gut) 0; }
.neon .passed { border-top: 1px solid var(--line); }
.neon .passed .neon-note { padding: 14px 0; border-bottom: 1px solid var(--line); }
.neon .passed .where, .neon .passed a.where { display: block; font-family: var(--mono); font-style: normal; font-size: 13px; color: var(--faint); margin-top: 4px; letter-spacing: .05em; text-transform: uppercase; }
.neon h1 { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.2; margin: 0 0 26px; }
.neon p { font-family: var(--serif); font-size: 21px; line-height: 1.6; margin: 0 0 18px; }
.neon blockquote { margin: 30px 0; padding-left: 22px; border-left: 1px solid var(--amber); font-family: var(--serif); font-size: 23px; line-height: 1.45; }
.neon blockquote cite { display: block; font-style: normal; margin-top: 12px; color: var(--faint); }
.neon .sample { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 140px 1fr; gap: 24px; }
.neon .sample img { width: 140px; display: block; }
.neon .sample p { font-size: 19px; font-style: italic; }

@media (max-width: 820px) {
  :root { --gut: 16px; }
  header nav { display: none; }
  .hang { grid-template-columns: 1fr; min-height: auto; gap: 16px; padding: 18px var(--gut) 50px; }
  .wall-label { padding: 0; }
  .intro { grid-template-columns: 1fr; gap: 40px; padding: 60px var(--gut); }
  .section-head { flex-direction: column; align-items: start; gap: 8px; }
  .pair { grid-template-columns: 1fr; } .pair > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .pair blockquote, .pair .claim { font-size: 21px; }
  .doors { grid-template-columns: 1fr; }
  .setpanel { grid-template-columns: 1fr; gap: 26px; }
  .work { grid-template-columns: 1fr; } .work .plate { position: static; height: auto; padding: 16px; border-right: 0; }
  .layers { padding: 20px var(--gut) 40px; }
  .mat, .neon, .oracle .lead { grid-template-columns: 1fr; gap: 36px; } .mat h1 { font-size: 40px; } .oracle h1 { font-size: 32px; }
  .claims { grid-template-columns: 1fr; }
  .axis span.ph em { display: none; }
}

/* ---------- Additions after the design review ---------- */
.skip { position: absolute; left: -999px; top: 8px; background: var(--text); color: var(--ground); padding: 8px 12px; z-index: 20; }
.skip:focus { left: 8px; }
a:focus-visible, button:focus-visible, .tile:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
main:focus { outline: none; }
.menu-btn { display: none; font-size: 15px; color: var(--text); padding: 10px 0 10px 16px; min-height: 44px; }
.menu-sheet { position: fixed; z-index: 9; left: 0; right: 0; top: 57px; bottom: 0; background: var(--ground); padding: 18px var(--gut); display: flex; flex-direction: column; overflow: auto; }
.menu-sheet[hidden] { display: none; }
.menu-sheet a { font-family: var(--serif); font-size: 26px; padding: 12px 0; border-bottom: 1px solid var(--line); }
footer.foot { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
footer.foot a { color: var(--muted); } footer.foot a[aria-current=true] { color: var(--text); box-shadow: inset 0 -1px var(--text); }

.tile.shown { cursor: pointer; }
.viewtoggle { color: var(--faint); margin-bottom: 18px; }
.viewtoggle a { color: var(--muted); } .viewtoggle a[aria-current=true] { color: var(--text); box-shadow: inset 0 -1px var(--text); }
.layer-index { list-style: none; margin: 0 0 26px; padding: 0; border-top: 1px solid var(--line); }
.layer .next, .next { margin-top: 26px; }
.neighbours img.self { outline: 1px solid var(--text); outline-offset: 2px; }
.rel { margin-bottom: 8px; } .rel > .mono { color: var(--muted); display: block; margin-bottom: 6px; }
.pull { margin: 28px 0 0; font-family: var(--serif); font-size: 21px; line-height: 1.45; }
.pull cite { display: block; font-style: normal; margin-top: 10px; color: var(--faint); }
.era a.row { color: inherit; }
.era a.row:hover .c { color: var(--text); }
.claims-sec { margin: 80px var(--gut) 0; }

/* Exhibition-first work view: the painting dominates, layers open below it. */
.work-ex { padding: 3vh var(--gut) 0; }
.ex-plate { display: flex; justify-content: center; min-height: 72svh; align-items: center; }
.ex-plate .plate-in img { max-height: 76svh; max-width: 100%; }
.ex-label { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; align-items: baseline; margin: 22px auto 0; color: var(--muted); font-size: 14.5px; }
.ex-label > .mono { color: var(--text); font-size: 14.5px; }
.ex-label .viewtoggle { margin: 0; }
.ex-index .layer-index { display: flex; justify-content: center; flex-wrap: wrap; border: 0; margin: 26px auto 0; gap: 0; }
.ex-index .layer-index li a { display: block; border: 0; padding: 8px 16px; font-size: 16px; }
.ex-index .layer-index li a em, .ex-index .layer-index li a .mono { display: none; }
.ex-index .layer-index li.on a { box-shadow: inset 0 -1px var(--text); }
.ex-layer { max-width: 720px; margin: 34px auto 0; padding-top: 30px; border-top: 1px solid var(--line); }
.ex-hint { text-align: center; margin-top: 18px; font-size: 15px; }

/* Oracle evidence band */
.scroll-x { position: relative; }
.band { position: absolute; left: 0; right: 0; }
.band .gridline { position: absolute; left: 0; right: 0; border-top: 1px dashed #263033; }
.band .gridline span { position: absolute; right: 0; top: -16px; color: var(--faint); text-transform: none; }
.band .mark { position: absolute; width: 17px; height: 3px; background: var(--cyan); }
.band .band-label { position: absolute; left: 0; top: -26px; color: var(--cyan); }
.band .mark.lite { height: 7px; background: transparent; border: 1px solid var(--cyan); opacity: .8; }
.band-key { position: absolute; right: 0; top: -28px; display: flex; gap: 20px; color: var(--muted); text-transform: none; letter-spacing: 0; }
.band-key i.k { display: inline-block; width: 14px; height: 3px; background: var(--cyan); margin-right: 7px; vertical-align: 3px; }
.band-key i.k.lite { height: 7px; background: transparent; border: 1px solid var(--cyan); vertical-align: 1px; }
@media (max-width: 820px) { .band-key { top: auto; bottom: -160px; flex-direction: column; gap: 4px; } }

/* Phone contact sheet */
.sheet { margin: 26px var(--gut) 0; border-top: 1px solid var(--line); }
.sheet-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.sheet-row.on { box-shadow: inset 2px 0 var(--text); padding-left: 12px; }
.sheet-head { display: flex; justify-content: space-between; font-size: 14.5px; margin-bottom: 8px; }
.sheet-strip { display: flex; gap: 6px; overflow-x: auto; align-items: center; scrollbar-width: none; }
.sheet-strip a { flex: none; } .sheet-strip img { height: 52px; display: block; }
.sheet-strip .kept { flex: none; color: var(--faint); padding: 0 6px; }

@media (prefers-reduced-motion: reduce) {
  .tile, .grid9 { transition: none !important; }
  html { scroll-behavior: auto; }
}
@media (max-width: 820px) {
  .menu-btn { display: block; }
  .layer-index li a { min-height: 44px; align-items: center; }
  .ex-plate { min-height: auto; } .ex-index .layer-index { justify-content: flex-start; }
  .ex-index .layer-index li a { padding: 12px 12px; }
  .scroll-x { overflow-x: auto; } .scroll-x .field-wrap { min-width: 760px; }
  .setpanel .strip img { height: 52px; }
  footer.foot { flex-direction: column; }
}

/* ---------- Generated site additions ---------- */
footer.foot { margin-top: 100px; }
footer.foot a { color: var(--muted); border-bottom: 1px solid var(--line); }
.page-head { padding: 56px var(--gut) 10px; }
.page-head .kicker { display: block; color: var(--muted); margin-bottom: 10px; }
.page-head h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4vw, 52px); line-height: 1.08; margin: 0 0 12px; }
.page-head p { color: var(--muted); max-width: 46em; margin: 0; }
.next-routes { margin: 56px var(--gut) 0; border-top: 1px solid var(--line); }
.next-routes h2 { font-family: var(--mono); font-weight: 400; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin: 18px 0 6px; }
.next-routes a { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.next-routes a b { font-weight: 400; } .next-routes a span { color: var(--muted); font-size: 15px; text-align: right; }
.next-routes a:hover b { box-shadow: inset 0 -1px var(--text); }
.catalogue { margin: 26px var(--gut) 0; border-top: 1px solid var(--line); }
.catalogue .row { display: grid; grid-template-columns: 80px 80px 100px 1fr 110px; gap: 18px; align-items: center; padding: 8px 0; border-bottom: 1px solid #23211e; font-size: 15px; }
.catalogue .row .th img { max-height: 40px; max-width: 76px; display: block; }
.catalogue .row .t { font-family: var(--mono); } .catalogue .row .d, .catalogue .row .s { font-family: var(--mono); font-size: 13.5px; color: var(--muted); }
.catalogue .row .s { text-align: right; } .catalogue .row.kept .t { color: var(--muted); }
.catalogue .ni { font-family: var(--mono); font-size: 12.5px; color: var(--faint); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 32px; margin: 26px var(--gut) 0; border-top: 1px solid var(--line); }
.cards a { display: block; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cards b { font-family: var(--serif); font-weight: 400; font-size: 22px; display: block; }
.cards span { color: var(--muted); font-size: 15px; }
.cards .none b { color: var(--faint); }
.kept-note { margin: 30px var(--gut); max-width: 640px; color: var(--muted); }
.explain { margin: 18px 0 22px; padding: 14px 18px; border-left: 1px solid var(--line); color: var(--muted); font-size: 16px; }
.explain blockquote { margin: 8px 0 0; font-family: var(--serif); font-size: 19px; color: var(--text); }
.record dl { display: grid; grid-template-columns: 170px 1fr; row-gap: 9px; margin: 0 0 22px; font-size: 16px; }
.record dt { font-family: var(--mono); font-size: 13px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; padding-top: 3px; }
.record dd { margin: 0; }
.section { padding: 0 var(--gut); margin-top: 48px; }
@media (max-width: 820px) {
  .catalogue .row { grid-template-columns: 56px 68px 1fr 105px; gap: 10px; } .catalogue .row .p { display: none; }
  .record dl { grid-template-columns: 120px 1fr; }
  .next-routes a { grid-template-columns: 1fr; gap: 2px; } .next-routes a span { text-align: left; }
}
.arrange a.arr { color: inherit; padding: 0 0 4px; }
.arrange a.arr[aria-pressed=true] { color: var(--text); box-shadow: inset 0 -1px var(--text); }
svg.evidence { width: 100%; height: auto; display: block; margin-top: 18px; overflow: visible; }
.evidence .g { stroke: #263033; stroke-dasharray: 3 3; } .evidence .gl { fill: var(--muted); font: 13px var(--mono); }
.evidence .k { fill: var(--empty); } .evidence .s { fill: #6f6b62; }
.evidence .m { fill: var(--cyan); } .evidence .ml { fill: none; stroke: var(--cyan); stroke-width: 1; }
.sheet { display: none; }
@media (max-width: 820px) { .sheet { display: block; } .field-host[data-dim="1"] .axis span.ph em { display: none; } }
.trail[hidden] { display: flex !important; visibility: hidden; }
.menu-sheet[hidden] { display: none !important; }

/* ---------- Round 2 (2026-10-10): a story for strangers, readable type, basics first ---------- */
body { font-size: 17px; }
.lead-p { font-size: 19px; line-height: 1.6; color: var(--text) !important; max-width: 40em; }
.button { display: inline-block; margin-top: 22px; padding: 12px 20px; border: 1px solid var(--muted); font-size: 15px; color: var(--text); }
.button:hover, .button:focus-visible { border-color: var(--text); background: var(--raise); }
a { text-underline-offset: 3px; }
.deep a, .details a, .step-text p a { border-bottom: 1px solid var(--dim); }

/* The hook: the scale of the year, in one screen */
.hook { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 56px; align-items: center; min-height: calc(100svh - 60px); padding: 4vh var(--gut); }
.hook-art { margin: 0; }
.hook-art img { width: 100%; max-height: 74svh; object-fit: contain; object-position: left center; display: block; }
.hook-art figcaption { margin-top: 14px; color: var(--muted); font-size: 15px; }
.hook-art figcaption b { color: var(--text); font-family: var(--mono); font-weight: 400; }
.hook-who { font-family: var(--mono); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.hook-num { font-family: var(--serif); font-size: clamp(96px, 13vw, 190px); line-height: .9; margin: 0; }
.hook-line { font-family: var(--serif); font-size: clamp(28px, 3vw, 42px); margin: 6px 0 22px; }
.hook-sub { font-size: 19px; line-height: 1.55; color: var(--muted); max-width: 22em; margin: 0 0 30px; }
.hook-cue { font-size: 17px; border-bottom: 1px solid var(--muted); }

/* Numbered steps */
.step { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; align-items: start; padding: 110px var(--gut) 0; }
.step.wide { grid-template-columns: 1fr; gap: 26px; }
.step-n { position: absolute; top: 112px; left: var(--gut); font-family: var(--mono); font-size: 14px; color: var(--faint); }
.step-text { padding-left: 46px; max-width: 46em; }
.step-text h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4vw, 54px); line-height: 1.08; margin: 0 0 18px; }
.step-text p { font-size: 19px; line-height: 1.6; margin: 0 0 16px; }
.step.wide .field-host, .step.wide .evidence, .step.wide .gallery { margin-left: 46px; }
.step-foot { padding-left: 46px; display: flex; flex-wrap: wrap; gap: 30px; align-items: end; justify-content: space-between; }
.step-foot .pull { margin: 0; max-width: 32em; }
.step-side .plate-in img { width: 100%; max-width: 560px; }
.caption { color: var(--muted); font-size: 15px; margin-top: 10px; }
.step .rungs { max-width: 620px; }
.step .neon-note { font-size: 22px; margin: 22px 0 6px; }

/* Twelve works */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 34px 28px; }
.gallery a { display: block; }
.gallery img { width: 100%; aspect-ratio: 180 / 110; object-fit: contain; background: var(--raise); display: block; }
.gallery span { display: block; margin-top: 10px; font-size: 15px; color: var(--muted); }
.gallery b { display: block; font-family: var(--mono); font-weight: 400; color: var(--text); }

/* A work: basics first */
.work-hero { display: flex; justify-content: center; padding: 32px var(--gut) 0; }
.work-hero img { max-width: 100%; max-height: 80svh; display: block; }
.details { max-width: 860px; margin: 40px auto 0; padding: 0 var(--gut); }
.details h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 60px); margin: 0 0 18px; }
.basics { display: grid; grid-template-columns: 170px 1fr; margin: 0; border-top: 1px solid var(--line); }
.basics dt, .basics dd { padding: 14px 0; border-bottom: 1px solid var(--line); margin: 0; }
.basics dt { color: var(--muted); font-size: 17px; }
.basics dd { font-size: 20px; }
.toc { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; font-size: 16px; }
.toc a { color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.toc a:hover { color: var(--text); }
.deep { max-width: 860px; margin: 64px auto 0; padding: 30px var(--gut) 0; border-top: 1px solid var(--line); }
.deep h2 { font-family: var(--serif); font-weight: 400; font-size: 32px; margin: 0 0 16px; }
.deep p { font-size: 17.5px; line-height: 1.65; }
.deep .neighbours img { height: 64px; }
.facts-list { display: grid; grid-template-columns: 170px 1fr; row-gap: 10px; margin: 14px 0 18px; font-size: 17px; }
.facts-list dt { color: var(--muted); } .facts-list dd { margin: 0; }
.measured-sec { max-width: 1100px; }
.measure-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: start; }
.measure-grid .plate-in img { width: 100%; display: block; }

/* Archive */
.archive-doors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 28px; margin: 34px var(--gut) 0; border-top: 1px solid var(--line); }
.archive-doors a { padding: 20px 0 26px; border-bottom: 1px solid var(--line); }
.archive-doors b { display: block; font-family: var(--serif); font-weight: 400; font-size: 24px; margin-bottom: 6px; }
.archive-doors span { color: var(--muted); font-size: 15.5px; }
.filters { margin: 56px var(--gut) 0; display: grid; gap: 12px; }
.filters > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters .mono { width: 70px; color: var(--faint); }
.chip { padding: 6px 12px; border: 1px solid var(--line); font-size: 14.5px; color: var(--muted); }
.chip.on { border-color: var(--text); color: var(--text); }
.catalogue .row { font-size: 16px; }

@media (max-width: 900px) {
  .hook { grid-template-columns: 1fr; gap: 28px; min-height: auto; padding-top: 24px; }
  .hook-num { font-size: 110px; }
  .step { grid-template-columns: 1fr; gap: 30px; padding-top: 80px; }
  .step-n { top: 82px; }
  .step-text, .step-foot { padding-left: 0; } .step-text { padding-top: 26px; }
  .step.wide .field-host, .step.wide .evidence, .step.wide .gallery { margin-left: 0; }
  .basics, .facts-list { grid-template-columns: 120px 1fr; }
  .basics dd { font-size: 18px; }
  .measure-grid { grid-template-columns: 1fr; }
  .archive-doors { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; gap: 20px 14px; }
}

/* ---------- Peter's figures, placed across the site ---------- */
.constellation-holder { position: absolute; left: -99999px; top: 0; width: 1100px; height: 0; overflow: hidden; visibility: hidden; }
.fig-slot { margin: 40px var(--gut) 0; }
.fig-slot > section { margin: 0 auto; max-width: 1240px; }
.step .fig-slot, .step .own-fig { margin: 30px 0 0 46px; }
.own-fig section { max-width: 1240px; }
.constellation.own-fig { --faint: #8b8678; --red: #ea5a36; --red-deep: #6e2a1c; }
.year-figs, .oracle-chapter { padding: 0 var(--gut); margin-top: 90px; }
.chapter-head { max-width: 1240px; margin: 0 auto 6px; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 18px; }
.chapter-head .n { font-family: var(--mono); font-size: 14px; color: var(--faint); padding-top: 14px; }
.chapter-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4vw, 48px); line-height: 1.1; margin: 0; }
.chapter-head p { grid-column: 2; color: var(--muted); font-size: 18px; margin: 8px 0 0; max-width: 40em; }
.oracle-chapter .fig-slot, .year-figs .fig-slot { margin-left: 0; margin-right: 0; }
.fig-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 60px 56px; max-width: 1240px; margin: 40px auto 0; }
.fig-duo .fig-slot { margin: 0; }
.mini-field .field-wrap { margin: 18px 0 0; }
.mini-era { margin-top: 18px; }
@media (max-width: 900px) { .step .fig-slot, .step .own-fig { margin-left: 0; } .chapter-head { grid-template-columns: 1fr; } .chapter-head p { grid-column: 1; } }
.month { padding: 0 var(--gut); margin-top: 56px; }
.month-h { font-family: var(--serif); font-weight: 400; font-size: 32px; margin: 0 0 20px; display: flex; gap: 16px; align-items: baseline; }
.month-h .mono { color: var(--faint); }
.own-era { max-width: 1240px; margin: 20px auto 0; }
.own-era .era .row, .mini-era .era .row { height: 20px; }
.own-era .era .row .c { font-size: 13px; } .own-era .era .row .lane i { top: 7px; height: 7px; }
.deep .mini-field .constellation section { border-top: 0; padding-top: 6px; }
.deep .own-fig h2 { font-size: 24px; }
/* The era chart in the palette of Peter's figures: stone for papers in use, cyan for the one in focus. */
.era .row .lane i { background: #b9b1a1; opacity: .55; height: 6px; border-radius: 3px; }
.era .row.me .lane i { background: var(--cyan); opacity: 1; }
.era .row.me .c { color: var(--cyan); }
.era .row:hover .lane i { opacity: .9; }

/* ---------- Method ---------- */
.method-head { max-width: 1240px; }
.method-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 36px; }
.method-stats div { background: var(--ground); padding: 20px 22px; }
.method-stats b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 4.4vw, 56px); color: var(--cyan); line-height: 1; }
.method-stats span { display: block; color: var(--muted); font-size: 15px; margin-top: 8px; }
.method-toc { max-width: 1240px; margin: 28px auto 0; padding: 0 var(--gut); display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; }
.method-toc a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); }
.method-toc a:hover { color: var(--text); border-color: var(--cyan); }
#overview, #photograph, #measure, #read, #rate, #test, #lineage, #research, #limits { scroll-margin-top: 80px; }
.oracle-chapter .own-fig { margin: 40px 0 0; }
.own-fig .stage svg { width: 100%; height: auto; display: block; }
.own-fig .stage text { font-family: var(--sans); }
.own-fig .stage text.mono, .own-fig .stage .tk, .own-fig .stage .ax { font-family: var(--mono); }
.pipe-list { display: none; list-style: none; padding: 0; margin: 0; }
@media (max-width: 760px) {
  .pipe-wide { display: none !important; }
  .pipe-list { display: grid; gap: 8px; }
  .pipe-list li { display: grid; grid-template-columns: 34px 1fr; gap: 2px 10px; border-left: 2px solid var(--cyan); padding: 10px 12px; background: var(--raise); }
  .pipe-list li.m { border-color: var(--text); } .pipe-list li.a { border-color: var(--amber); }
  .pipe-list li > span.mono { grid-row: span 2; color: var(--faint); font-size: 13px; padding-top: 4px; }
  .pipe-list b { font-family: var(--serif); font-weight: 400; font-size: 22px; }
  .pipe-list li > span:last-child { color: var(--muted); font-size: 15px; }
}
.views { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 34px 26px; max-width: 1240px; margin: 36px auto 0; }
.view { margin: 0; }
.view img { width: 100%; height: auto; display: block; background: var(--raise); }
.view figcaption { font-size: 16px; color: var(--muted); margin-top: 12px; line-height: 1.5; }
.view figcaption b { display: block; color: var(--text); font-family: var(--serif); font-weight: 400; font-size: 22px; margin-bottom: 4px; }
.method-note { max-width: 46em; margin: 30px auto 0 82px; color: var(--muted); font-size: 17px; line-height: 1.6; }
.stage .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; border-top: 0; }
.pair img { width: 100%; height: auto; display: block; }
.measure-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 30px; align-items: center; margin-top: 26px; }
.big-num b { display: block; font-family: var(--serif); font-weight: 400; font-size: 58px; color: var(--cyan); line-height: 1; }
.big-num span { color: var(--muted); font-size: 15px; }
.inkbar { max-width: 640px; }
.facts-grid { max-width: 1240px; margin: 36px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.facts-grid > div { background: var(--ground); padding: 20px 22px; }
.facts-grid span { color: var(--faint); font-size: 13px; letter-spacing: .04em; }
.facts-grid b { display: block; font-family: var(--serif); font-weight: 400; font-size: 40px; color: var(--cyan); margin: 6px 0 4px; }
.facts-grid p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.geo { position: relative; }
.geo img { width: 100%; display: block; filter: grayscale(1) brightness(.62); }
.geo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.geo .grid path { stroke: var(--text); stroke-opacity: .22; }
.geo .gl text { fill: var(--text); fill-opacity: .55; font-family: var(--mono); font-size: 15px; }
.geo .vt { fill: var(--amber); font-family: var(--mono); font-size: 16px; }
.boards { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; align-items: start; }
.boards img { width: 100%; height: auto; display: block; }
.ladders { display: grid; gap: 4px; font-size: 14px; overflow-x: auto; }
.lad-row { display: grid; grid-template-columns: minmax(150px, 1.3fr) repeat(5, minmax(96px, 1fr)); gap: 4px; min-width: 680px; }
.lad-row > span { background: var(--raise); padding: 12px 10px; font-family: var(--mono); letter-spacing: .03em; color: var(--muted); display: flex; align-items: center; }
.lad-row > span.mid { box-shadow: inset 0 -2px 0 var(--line); }
.lad-row > span.on { background: var(--cyan); color: var(--ground); font-weight: 600; }
.lad-row > span[role=rowheader] { background: none; font-family: var(--sans); color: var(--text); flex-direction: column; align-items: flex-start; }
.lad-row > span[role=rowheader] b { font-weight: 500; font-size: 16px; }
.lad-row > span[role=rowheader] small { color: var(--muted); font-size: 13px; letter-spacing: 0; }
.lad-head > span { background: none !important; color: var(--faint); font-size: 12.5px; padding: 4px 10px; }
.reads { display: grid; gap: 4px; overflow-x: auto; }
.rd-row { display: grid; grid-template-columns: minmax(150px, 1.4fr) repeat(5, minmax(84px, 1fr)) 70px; gap: 4px; min-width: 640px; }
.rd-row > span { background: var(--raise); padding: 10px; text-align: center; font-family: var(--serif); font-size: 24px; color: var(--text); }
.rd-row > span small { display: block; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.rd-row > span[role=rowheader] { background: none; text-align: left; font-family: var(--sans); font-size: 16px; display: flex; align-items: center; }
.rd-row > span.r3, .rd-row > span.r4 { box-shadow: inset 0 0 0 1px var(--cyan); }
.rd-row > span.r0, .rd-row > span.r1 { color: var(--low); }
.rd-row > span.mean { background: none; color: var(--cyan); }
.rd-head > span { background: none !important; font-size: 12px !important; color: var(--faint) !important; font-family: var(--mono) !important; }
div.evidence { max-width: 1240px; margin: 36px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 18px 26px; }
.evidence h3 { grid-column: 1 / -1; font-size: 13px; color: var(--faint); font-weight: 400; letter-spacing: .05em; margin: 0; }
.ev { border-top: 1px solid var(--line); padding-top: 12px; }
.ev b { font-family: var(--serif); font-weight: 400; font-size: 21px; }
.ev p { margin: 6px 0 0; font-size: 16px; line-height: 1.55; color: var(--text); }
.ev p.wk { color: var(--muted); font-size: 15px; }
.ev p.wk span { font-size: 11.5px; color: var(--faint); margin-right: 6px; }
.rules { max-width: 1240px; margin: 36px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.rules > div { border: 1px solid var(--line); padding: 18px 20px; display: grid; gap: 6px; align-content: start; }
.rules > div.fired { border-color: var(--red); }
.rules span { color: var(--faint); font-size: 12.5px; }
.rules b { font-family: var(--serif); font-weight: 400; font-size: 22px; }
.rules p { margin: 0; color: var(--text); font-size: 16px; }
.rules em { font-style: normal; color: var(--cyan); font-size: 14.5px; font-family: var(--mono); margin-top: 6px; }
.calc { display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px; }
.calc > div { border: 1px solid var(--line); padding: 18px 22px; flex: 1 1 200px; }
.calc > div.res { border-color: var(--cyan); }
.calc span { display: block; color: var(--faint); font-size: 12.5px; }
.calc b { display: block; font-family: var(--serif); font-weight: 400; font-size: 52px; color: var(--text); line-height: 1.1; }
.calc .res b { color: var(--cyan); }
.calc small { color: var(--muted); font-family: var(--mono); font-size: 13.5px; }
.calc i { align-self: center; font-style: normal; color: var(--faint); font-size: 26px; }
.scatter { max-width: 420px; margin: 0 auto; }
.scatter .tk { fill: var(--muted); font-size: 12px; }
.scatter .ax { fill: var(--muted); font-size: 12px; letter-spacing: .06em; }
.lineage { list-style: none; max-width: 1240px; margin: 36px auto 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0; border-top: 1px solid var(--line); }
.lineage li { padding: 18px 18px 22px 0; border-top: 3px solid var(--line); margin-top: -2px; }
.lineage li.now { border-top-color: var(--cyan); }
.lineage .when { color: var(--faint); font-size: 13px; }
.lineage .v { color: var(--cyan); font-size: 14px; margin-left: 10px; }
.lineage b { display: block; font-family: var(--serif); font-weight: 400; font-size: 21px; margin: 8px 0 6px; }
.lineage p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.research { max-width: 1240px; margin: 36px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.research article { border: 1px solid var(--line); padding: 22px 24px; background: var(--raise); }
.research h3 { font-family: var(--serif); font-weight: 400; font-size: 23px; margin: 0 0 6px; line-height: 1.2; }
.research span { color: var(--faint); font-size: 13px; display: block; margin-bottom: 12px; }
.research p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text); }
.limits { max-width: 52em; margin: 30px auto 0 82px; display: grid; gap: 16px; }
.limits p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--muted); }
.limits b { color: var(--text); font-weight: 500; }
@media (max-width: 760px) {
  .method-note, .limits { margin-left: 0; }
  .stage .pair, .boards { grid-template-columns: 1fr; }
  .measure-row { grid-template-columns: 1fr; gap: 14px; }
}
.constellation.own-fig .cap { font-size: 17px; line-height: 1.55; max-width: 64ch; }
.facts-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .facts-grid.three { grid-template-columns: 1fr; }
  .lad-row { min-width: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
  .lad-row > span { font-size: 9.5px; letter-spacing: 0; padding: 9px 3px; justify-content: center; text-align: center; overflow-wrap: anywhere; }
  .lad-row > span[role=rowheader] { grid-column: 1 / -1; padding: 12px 0 2px; align-items: flex-start; text-align: left; }
  .lad-head > span:first-child { display: none; }
  .rd-row { min-width: 0; grid-template-columns: repeat(5, minmax(0, 1fr)) 44px; gap: 3px; }
  .rd-row > span { font-size: 20px; padding: 8px 2px; }
  .rd-row > span small { display: none; }
  .rd-row > span[role=rowheader] { grid-column: 1 / -1; font-size: 15px; padding: 10px 0 0; }
  .rd-head > span:first-child { display: none; }
}
#how, #found, #sure, #asked { scroll-margin-top: 80px; }
.oflow { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr 1.2fr; gap: 14px; }
.ostep { border: 1px solid var(--line); background: var(--raise); padding: 18px 20px; position: relative; display: grid; align-content: start; gap: 8px; }
.ostep + .ostep::before { content: "→"; position: absolute; left: -13px; top: 18px; color: var(--faint); background: var(--ground); font-size: 15px; }
.ostep > span.mono { color: var(--faint); font-size: 12.5px; letter-spacing: .05em; }
.ostep > b { font-family: var(--serif); font-weight: 400; font-size: 30px; color: var(--cyan); line-height: 1.1; }
.ostep p { margin: 0; color: var(--text); font-size: 15.5px; line-height: 1.5; }
.ostep ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14.5px; color: var(--muted); line-height: 1.4; }
.ostep ul b { color: var(--text); font-weight: 500; display: block; }
.osrc { display: grid; gap: 7px; }
.osrc > div { display: grid; grid-template-columns: minmax(0, 1fr) 70px 30px; gap: 8px; align-items: center; }
.osrc span b { display: block; font-weight: 500; font-size: 14.5px; }
.osrc small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.osrc i { height: 8px; background: var(--cyan); opacity: .7; justify-self: start; }
.osrc .ctl i { background: var(--muted); }
.osrc .ctl b { color: var(--muted); }
.osrc em { font-style: normal; font-size: 13px; color: var(--muted); text-align: right; }
.ogr { display: grid; gap: 10px; }
.ogr > div { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.ogr em { font-style: normal; font-family: var(--serif); font-size: 26px; text-align: right; }
.ogr span { font-size: 14.5px; color: var(--muted); line-height: 1.4; }
.ogr .s em { color: var(--cyan); } .ogr .l em { color: var(--text); } .ogr .x em { color: var(--faint); }
@media (max-width: 1000px) { .oflow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .oflow { grid-template-columns: 1fr; } .ostep + .ostep::before { content: "↓"; left: 18px; top: -13px; } }
.step-foot .btns { display: flex; flex-wrap: wrap; gap: 12px; }
/* ---------- work pages, deep ---------- */
.work-line { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.35; color: var(--text); max-width: 34em; margin: 10px 0 26px; }
.reading-why { font-size: 16px; max-width: 46em; }
.profile { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr); gap: 0; margin: 22px 0 30px; border-top: 1px solid var(--line); max-width: 60em; }
.profile dt, .profile dd { padding: 11px 0; border-bottom: 1px solid var(--line); margin: 0; font-size: 16.5px; }
.profile dt { color: var(--faint); font-family: var(--mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; padding-top: 14px; }
.profile dd { color: var(--text); line-height: 1.5; }
.read-text { max-width: 38em; }
.read-text p { font-family: var(--serif); font-size: clamp(19px, 1.7vw, 22px); line-height: 1.6; margin: 0 0 1.05em; color: var(--text); }
.read-sec .own-fig { margin: 34px 0 0; }
.read-sec .own-fig section { max-width: none; }
.read-intro { font-size: 17px; color: var(--muted); max-width: 46em; }
.triple { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.triple img { width: 100%; height: auto; display: block; }
.ev-sum { grid-column: 1 / -1; font-family: var(--serif); font-size: 21px; line-height: 1.5; margin: 0; color: var(--text); max-width: 40em; }
.read-sec .evidence, .read-sec .rules { margin-left: 0; margin-right: 0; }
.read-sec .method-note { margin-left: 0; }
@media (max-width: 760px) {
  .triple { grid-template-columns: 1fr; }
  .profile { grid-template-columns: 1fr; } .profile dt { border-bottom: 0; padding-bottom: 0; } .profile dd { padding-top: 4px; }
}
.deep.read-sec { max-width: 1180px; }
.read-sec > h2, .read-sec > .read-intro { max-width: 860px; }
/* ---------- The Year ---------- */
#idea, #room, #output, #record, #turn, #floor, #field, #qualities { scroll-margin-top: 80px; }
.oracle-chapter .pull, .oracle-chapter blockquote.pull { max-width: 40em; margin: 40px auto 0 82px; font-size: clamp(22px, 2.2vw, 27px); border-left: 2px solid var(--line); padding-left: 24px; }
.oracle-chapter .pull.big { font-size: clamp(26px, 3vw, 38px); line-height: 1.3; border-left-color: var(--peter); max-width: 30em; }
.starts { max-width: 1240px; margin: 36px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.starts > div { border-top: 3px solid var(--line); padding-top: 14px; }
.starts > div:nth-child(2) { border-top-color: var(--cyan); }
.starts span { color: var(--faint); font-size: 14px; } .starts b { display: block; font-family: var(--serif); font-weight: 400; font-size: 28px; margin: 6px 0; }
.starts p { margin: 0; font-size: 17px; color: var(--muted); line-height: 1.55; }
.room { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 30px; align-items: center; }
.plan .tk, .yr .tk { fill: var(--muted); font-family: var(--mono); font-size: 12.5px; }
.room-facts { display: grid; gap: 22px; }
.room-facts b { display: block; font-family: var(--serif); font-weight: 400; font-size: 44px; color: var(--cyan); line-height: 1; }
.room-facts span { color: var(--muted); font-size: 16px; }
.weeks { list-style: none; padding: 0; max-width: 1240px; margin: 30px auto 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 0 26px; }
.weeks li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.weeks li > span { grid-row: span 2; color: var(--faint); font-size: 13px; padding-top: 3px; }
.weeks b { font-weight: 500; font-size: 15.5px; } .weeks small { color: var(--muted); font-size: 13px; font-family: var(--mono); }
.weeks li > p { grid-column: 2; margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
/* About: the artist statement, in Peter's voice (2026-10-22). */
.statement { max-width: 40em; margin: 40px auto 0 82px; border-left: 2px solid var(--peter); padding-left: 24px; font-family: var(--serif); font-size: clamp(19px, 1.9vw, 23px); line-height: 1.6; }
.statement p { margin: 0 0 1.1em; }
.statement cite { display: block; font-style: normal; color: var(--faint); margin-top: 6px; }
@media (max-width: 760px) {
  .oracle-chapter .pull, .oracle-chapter blockquote.pull, .statement { margin-left: 0; }
  .room { grid-template-columns: 1fr; }
}
/* ---------- work page depths ---------- */
.gauge, .hero-views, .descend { display: none; }
.js-depth .gauge { display: flex; }
.js-depth .descend:not([hidden]) { display: grid; }
.js-depth .work-depth[data-level="3"] .hero-views, .js-depth .work-depth[data-level="4"] .hero-views { display: flex; }
.js-depth .toc.no-depth { display: none; }
.hero-stack { position: relative; }
.hero-stack img { display: block; width: 100%; height: auto; transition: opacity .6s ease; }
.hero-stack img.v-stretched, .hero-stack img.v-classes { position: absolute; inset: 0; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; }
.hero-stack[data-view="stretched"] .v-stretched, .hero-stack[data-view="classes"] .v-classes { opacity: 1; }
.hero-views { gap: 6px; justify-content: center; margin: 14px auto 0; flex-wrap: wrap; }
.hero-views button { font: inherit; font-size: 14.5px; color: var(--muted); background: var(--raise); border: 1px solid var(--line); padding: 8px 14px; cursor: pointer; }
.hero-views button[aria-pressed="true"] { color: var(--ground); background: var(--cyan); border-color: var(--cyan); }
.descend { margin: 44px 0 6px; width: 100%; text-align: left; font: inherit; color: var(--text); background: linear-gradient(180deg, var(--raise), var(--ground)); border: 1px solid var(--line); border-left: 3px solid var(--cyan); padding: 20px 24px; cursor: pointer; gap: 4px; transition: border-color .2s, transform .2s; }
.descend:hover, .descend:focus-visible { border-color: var(--cyan); transform: translateY(-2px); }
.descend span { color: var(--cyan); font-size: 13px; letter-spacing: .05em; }
.descend b { font-family: var(--serif); font-weight: 400; font-size: 28px; }
.descend b::after { content: "  ↓"; color: var(--cyan); font-family: var(--sans); font-size: 20px; }
.descend small { color: var(--muted); font-size: 15px; }
.gauge { position: fixed; left: 18px; top: 50%; transform: translateY(-50%); flex-direction: column; gap: 0; z-index: 20; }
.gauge button { font: inherit; background: none; border: 0; padding: 0 0 26px; cursor: pointer; display: grid; grid-template-columns: 14px auto; gap: 12px; align-items: start; text-align: left; position: relative; color: var(--faint); }
.gauge button:not(:last-child)::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: 0; width: 2px; background: var(--line); }
.gauge button.done:not(:last-child)::before { background: var(--cyan); opacity: .5; }
.gauge i { width: 14px; height: 14px; border: 2px solid var(--dim); border-radius: 50%; background: var(--ground); margin-top: 2px; transition: background .3s, border-color .3s; }
.gauge button.done i { border-color: var(--cyan); background: var(--cyan); }
.gauge button[aria-current] i { box-shadow: 0 0 0 5px color-mix(in srgb, var(--cyan) 22%, transparent); }
.gauge b { display: block; font-weight: 500; font-size: 14.5px; color: var(--muted); }
.gauge button.done b { color: var(--text); }
.gauge small { display: block; max-width: 0; overflow: hidden; white-space: nowrap; font-size: 12.5px; color: var(--muted); transition: max-width .35s ease; }
.gauge:hover small, .gauge:focus-within small { max-width: 260px; }
.gauge:hover { background: color-mix(in srgb, var(--ground) 92%, transparent); padding: 14px 16px 0 0; margin: -14px 0 0 -2px; }
@keyframes arrive { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.arrive { animation: arrive .7s cubic-bezier(.2, .7, .2, 1) both; }
@media (prefers-reduced-motion: reduce) { .arrive { animation: none; } .hero-stack img { transition: none; } }
@media (max-width: 1360px) { .gauge { left: 8px; } .gauge small { display: none; } .gauge b { font-size: 0; } .gauge button { padding-bottom: 22px; gap: 0; } }
@media (max-width: 760px) {
  .gauge { left: 50%; top: auto; bottom: 12px; transform: translateX(-50%); flex-direction: row; background: color-mix(in srgb, var(--raise) 94%, transparent); border: 1px solid var(--line); border-radius: 40px; padding: 8px 14px; gap: 6px; }
  .gauge button { padding: 0 8px; grid-template-columns: auto; gap: 0; }
  .gauge button:not(:last-child)::before { display: none; }
  .gauge b { font-size: 12.5px; } .gauge button[aria-current] b { color: var(--cyan); }
  .gauge i { display: none; }
}
@media (max-width: 760px) { .js-depth body, .js-depth main { padding-bottom: 40px; } }
.work-hero { flex-direction: column; align-items: center; }
.hero-stack { max-width: 100%; }
.hero-stack img.v-photo { max-height: 80svh; width: auto; max-width: 100%; }
.hero-stack img.v-stretched, .hero-stack img.v-classes { box-shadow: none; }
/* the depth gauge: one floating pill at the foot of the screen, every width */
.gauge, .gauge:hover { left: 50%; top: auto; bottom: 16px; transform: translateX(-50%); flex-direction: row; align-items: center; margin: 0;
  background: color-mix(in srgb, var(--raise) 94%, transparent); border: 1px solid var(--line); border-radius: 40px; padding: 8px 10px; gap: 2px;
  }
.gauge button, .gauge button:not(:last-child) { padding: 6px 14px; grid-template-columns: 12px auto; gap: 9px; align-items: center; border-radius: 30px; }
.gauge button:not(:last-child)::before { display: none; }
.gauge button[aria-current] { background: color-mix(in srgb, var(--cyan) 14%, transparent); }
.gauge i { width: 12px; height: 12px; margin: 0; }
.gauge b, .gauge button b { font-size: 14.5px; }
.gauge small { display: none; }
.gauge .lv-tip { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--raise); border: 1px solid var(--line); padding: 6px 10px; font-size: 13px; color: var(--muted); pointer-events: none; opacity: 0; transition: opacity .2s; }
.gauge button:hover .lv-tip, .gauge button:focus-visible .lv-tip { opacity: 1; }
.gauge::after { content: ""; }
@media (max-width: 1360px) { .gauge b, .gauge button b { font-size: 14px; } .gauge small { display: none; } }
@media (max-width: 760px) { .gauge button, .gauge button:not(:last-child) { padding: 6px 10px; min-height: 44px; min-width: 44px; grid-template-columns: auto; } .gauge i { display: none; } .gauge b, .gauge button b { font-size: 12.5px; } .gauge .lv-tip { display: none; } }
.js-depth .work-depth { padding-bottom: 60px; }
[data-lv] { scroll-margin-top: 76px; }
/* ---------- Materials ---------- */
#table, #specimens, #lighter, #sources, #out, #together, #when, #bottles { scroll-margin-top: 80px; }
.lanes a text { cursor: pointer; } .lanes a:hover text { fill: var(--cyan) !important; }
.specimens { max-width: 1240px; margin: 36px auto 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 370px), 1fr)); gap: 16px; }
.specimens.one { grid-template-columns: minmax(0, 860px); justify-content: start; margin-left: 82px; }
.specimen { display: grid; gap: 14px; align-content: start; border: 1px solid var(--line); background: var(--raise); padding: 20px 22px; color: inherit; text-decoration: none; transition: border-color .2s; }
a.specimen:hover { border-color: var(--cyan); }
.specimen.unused { opacity: .62; }
.sp-head span { color: var(--cyan); font-size: 14px; } .sp-head b { display: block; font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.25; margin: 4px 0; }
.sp-head small { color: var(--muted); font-size: 14px; }
.spec { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.spec-g { display: grid; align-content: start; gap: 3px; position: relative; }
.spec-g > span.mono { font-size: 11.5px; color: var(--faint); letter-spacing: .05em; }
.spec-g b { font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--text); line-height: 1.1; }
.spec-g b.sm { font-size: 17px; font-family: var(--sans); text-transform: none; } .spec-g b.na { font-size: 15px; font-family: var(--sans); color: var(--faint); font-weight: 400; }
.spec-g small { color: var(--muted); font-size: 13px; }
.spec-g > i { display: block; height: 4px; background: var(--cyan); opacity: .7; margin-top: 4px; }
.sz { display: flex; gap: 4px; } .sz em { width: 22px; height: 8px; border: 1px solid var(--muted); } .sz em.f { background: var(--cyan); border-color: var(--cyan); }
.sp-use { color: var(--muted); font-size: 14px; font-family: var(--mono); border-top: 1px solid var(--line); padding-top: 10px; }
.twob { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: start; }
.outs { max-width: 1240px; margin: 36px auto 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 16px; }
.outs.one { grid-template-columns: minmax(0, 560px); margin-left: 82px; }
.out { border-top: 2px solid var(--line); padding-top: 12px; display: grid; gap: 8px; align-content: start; }
.o-head { display: flex; justify-content: space-between; } .o-head a, .o-head span.mono { color: var(--cyan); font-size: 15px; text-decoration: none; } .o-head span { color: var(--muted); font-size: 14px; }
.tri { display: flex; height: 14px; background: var(--raise); }
.tri i { display: block; height: 100%; } .tri .t-SA { background: #a8a49a; } .tri .t-SHP { background: var(--cyan); } .tri .t-PT { background: #5d5a52; } .tri .t-T { background: var(--red-deep, #6e2a1c); }
.out small { color: var(--muted); font-size: 13px; font-family: var(--mono); }
.prof { display: grid; gap: 6px; margin-top: 6px; }
.tk-p { color: var(--faint); font-size: 13px; margin: 2px 0 0; }
.mat-strip { display: flex; gap: 8px; overflow: hidden; margin-top: 28px; }
.mat-strip img { height: 120px; width: auto; display: block; }
.mat-grid { max-width: 1240px; margin: 30px auto 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px 14px; }
.mat-grid a { color: var(--muted); text-decoration: none; font-size: 13px; } .mat-grid img { width: 100%; height: auto; display: block; margin-bottom: 6px; }
@media (max-width: 760px) {
  .specimens.one, .outs.one { margin-left: 0; } .twob { grid-template-columns: 1fr; }
}
/* ---------- Neon ---------- */
#who, #source, #traced, #doors, #honest, #all { scroll-margin-top: 80px; }
.npath { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.npath { padding-top: 26px; }
.npath li { --c: var(--cyan); border: 1px solid var(--line); background: var(--raise); padding: 22px 18px 18px; position: relative; }
/* one route through every step: a line along the top, a lit node where each step joins it */
.npath li::after { content: ""; position: absolute; left: 18px; top: -19px; width: 13px; height: 13px; border-radius: 50%; background: var(--ground); border: 2px solid var(--c); box-shadow: 0 0 0 4px var(--ground); }
.npath li::before { content: ""; position: absolute; left: 0; right: -14px; top: -13px; height: 1px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 30%, transparent)); }
.npath li:last-child::before { right: 0; }
.npath li.a { --c: var(--amber); } .npath li.r { --c: var(--peter); } .npath li.c { --c: var(--cyan); }
.npath span { color: var(--c); font-size: 12px; letter-spacing: .06em; } .npath b { display: block; font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 6px 0; }
.npath p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.trace { max-width: 1240px; margin: 36px auto 0; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 34px; align-items: start; }
.tr-img { position: sticky; top: 90px; color: var(--muted); text-decoration: none; font-size: 13px; } .tr-img img { width: 100%; display: block; margin-bottom: 8px; }
.tr-rows { display: grid; gap: 0; }
.tr { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; padding: 18px 0; border-top: 1px solid var(--line); }
.tr-s { margin: 0; font-family: var(--serif); font-size: 20px; line-height: 1.5; color: var(--text); }
.tr-e { border-left: 2px solid var(--k); padding-left: 14px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.tr-e span { display: block; color: var(--k); font-size: 11.5px; letter-spacing: .06em; margin-bottom: 4px; }
.trace-neon { max-width: 860px; margin: 30px auto 0 82px; } .trace-neon > span { color: var(--amber); font-size: 12px; letter-spacing: .06em; }
.doors { max-width: 1240px; margin: 36px auto 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 26px 22px; }
.door .d-head { display: flex; justify-content: space-between; align-items: baseline; } .door b { font-family: var(--serif); font-weight: 400; font-size: 22px; }
.door .d-head span { color: var(--muted); } .d-bar { display: block; height: 4px; background: var(--raise); margin: 8px 0 12px; } .d-bar i { display: block; height: 100%; background: var(--amber); }
.door a { text-decoration: none; color: inherit; display: block; } .door a > span { color: var(--faint); font-size: 12.5px; }
.door .neon-note { font-size: 16px; }
.failures { max-width: 1240px; margin: 36px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 16px; }
.failures > div { border-top: 3px solid var(--red); padding-top: 14px; } .failures span { color: var(--faint); font-size: 13px; }
.failures b { display: block; font-family: var(--serif); font-weight: 400; font-size: 23px; margin: 6px 0; } .failures p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.readings { max-width: 1240px; margin: 36px auto 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 26px 20px; }
.readings a { text-decoration: none; color: inherit; } .readings img { width: 100%; height: auto; display: block; } .readings span { display: block; color: var(--faint); font-size: 12px; margin: 8px 0 4px; }
.readings p { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.45; color: var(--text); }
@media (max-width: 760px) { .npath { grid-template-columns: 1fr; gap: 30px; } .npath li::before { left: 24px; right: auto; top: -30px; width: 1px; height: 30px; background: var(--c); } .npath li:first-child::before { display: none; } .trace, .tr { grid-template-columns: 1fr; } .tr-img { position: static; } .trace-neon { margin-left: 0; } }
/* ---------- Archive ---------- */
#record, #scale, #claims, #records, #check { scroll-margin-top: 80px; }
.npath.prov { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.scale { max-width: 1240px; margin: 36px auto 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.sc { background: var(--ground); padding: 18px 20px; }
.sc span { color: var(--faint); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.sc b { display: block; font-family: var(--serif); font-weight: 400; font-size: 34px; color: var(--cyan); margin: 6px 0 4px; line-height: 1.1; }
.sc p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.prooflist { max-width: 1240px; margin: 36px auto 0; display: grid; gap: 14px; }
.lg { border: 1px solid var(--line); border-left: 3px solid var(--muted); padding: 20px 24px; display: grid; gap: 12px; }
.lg.k-s { border-left-color: var(--cyan); } .lg.k-m { border-left-color: var(--amber); } .lg.k-w { border-left-color: var(--red); }
.cl-h { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; flex-wrap: wrap; }
.cl-h h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.3; }
.verdict { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.k-s .verdict { color: var(--cyan); } .k-m .verdict { color: var(--amber); } .k-w .verdict { color: var(--red); }
.cl-b { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.cl-b span { color: var(--faint); font-size: 11.5px; letter-spacing: .06em; } .cl-b p { margin: 4px 0 0; font-size: 16px; line-height: 1.55; color: var(--text); }
.cl-b > div:last-child p { color: var(--muted); }
#records .archive-doors, #records .filters, #records .catalogue { margin-left: 0; margin-right: 0; }
@media (max-width: 900px) { .npath.prov { grid-template-columns: 1fr; gap: 30px; } .npath.prov li::before { left: 24px; right: auto; top: -30px; width: 1px; height: 30px; background: var(--c); } .npath.prov li:first-child::before { display: none; } .cl-b { grid-template-columns: 1fr; gap: 12px; } }
/* ---------- About, field guide ---------- */
.faq { max-width: 900px; margin: 30px auto 0 82px; display: grid; gap: 4px; }
.faq details { border-top: 1px solid var(--line); padding: 14px 0; } .faq summary { cursor: pointer; list-style: none; } .faq summary::-webkit-details-marker { display: none; }
.faq h3 { display: inline; font-family: var(--serif); font-weight: 400; font-size: 23px; } .faq p { margin: 10px 0 6px; font-size: 17.5px; line-height: 1.6; color: var(--text); }
.byline { color: var(--faint); font-size: 13px; margin-top: 14px; }
.guide .chapter-head p { color: var(--text); font-size: 18.5px; line-height: 1.65; }
.guide-cards { max-width: 1240px; margin: 20px auto 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 16px; }
.guide-cards a { border: 1px solid var(--line); background: var(--raise); padding: 22px 24px; text-decoration: none; color: inherit; display: grid; gap: 8px; }
.guide-cards a:hover { border-color: var(--cyan); } .guide-cards span { color: var(--cyan); font-size: 13px; } .guide-cards b { font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.25; } .guide-cards p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.ptable { max-width: 1240px; margin: 30px auto 0; display: grid; gap: 2px; }
.ptable a { display: grid; grid-template-columns: 60px minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 10px 12px; background: var(--raise); color: var(--text); text-decoration: none; font-size: 15px; }
.ptable a:hover { background: color-mix(in srgb, var(--cyan) 10%, var(--raise)); } .ptable b { color: var(--cyan); font-weight: 400; } .ptable span:not(:nth-child(2)) { color: var(--muted); }
.ptable.ink a { grid-template-columns: 60px minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, .8fr); }
.flaws-guide { max-width: 1240px; margin: 30px auto 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.flaws-guide > div { border-top: 3px solid var(--red); padding-top: 12px; } .flaws-guide b { font-family: var(--serif); font-weight: 400; font-size: 22px; display: block; }
.flaws-guide span { color: var(--faint); font-size: 12.5px; } .flaws-guide p { margin: 6px 0 0; color: var(--muted); font-size: 15.5px; }
.guide-line { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
@media (max-width: 760px) { .faq { margin-left: 0; } .ptable a, .ptable.ink a { grid-template-columns: 50px minmax(0, 1fr); } .ptable a span:nth-child(n+3) { grid-column: 2; } }
/* nav: hover and current page */
header.top nav a { position: relative; padding: 6px 0; transition: color .2s; }
header.top nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
header.top nav a:hover { color: var(--text); } header.top nav a:hover::after, header.top nav a:focus-visible::after { transform: scaleX(1); }
header.top nav a[aria-current="page"] { color: var(--text); } header.top nav a[aria-current="page"]::after { transform: scaleX(1); }
.menu-sheet a[aria-current="page"] { color: var(--cyan); }
/* pace chart hover */
.evidence .pc .hit { fill: transparent; } .evidence .pc { cursor: pointer; outline: none; }
.evidence .pc:hover .hit, .evidence .pc:focus .hit { fill: var(--cyan); fill-opacity: .09; }
.evidence .pc:hover .k, .evidence .pc:focus .k { fill-opacity: 1; stroke: var(--cyan); stroke-width: 1; }
.site-tip { position: fixed; z-index: 60; pointer-events: none; background: var(--raise); border: 1px solid var(--cyan); padding: 10px 14px; font-size: 14px; line-height: 1.5; color: var(--text); box-shadow: 0 12px 40px rgba(0,0,0,.6); max-width: 300px; }
.site-tip b { display: block; font-family: var(--mono); font-weight: 400; color: var(--cyan); font-size: 13px; margin-bottom: 4px; }
.site-tip span { display: block; color: var(--muted); } .site-tip span.v { color: var(--text); }
.portrait { margin: 34px 0 0; max-width: 1240px; } .portrait img { width: 100%; height: auto; display: block; } .portrait figcaption { color: var(--faint); font-size: 12.5px; margin-top: 8px; }

/* disputed sentences in a reading */
mark.disputed { background: none; color: inherit; border-bottom: 2px dotted var(--peter); }
.dispute-note { border-left: 2px solid var(--peter); padding: 4px 0 4px 16px; margin: -6px 0 22px; font-size: 15.5px; line-height: 1.55; color: var(--muted); max-width: 38em; }
.dispute-note span { display: block; color: var(--peter); font-size: 11.5px; letter-spacing: .06em; margin-bottom: 4px; }
/* ---------- review phase 2: entrance, navigation, works ---------- */
.hook-title { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 5.6vw, 84px); line-height: 1; margin: 0 0 22px; }
.hook-title span { display: block; color: var(--gold); font-size: .62em; margin-top: 10px; }
.hook-sub { color: var(--text); max-width: 26em; }
.hook-go { margin: 0; }
.button.solid { background: var(--text); color: var(--ground); border-color: var(--text); } .button.solid:hover { background: var(--cyan); border-color: var(--cyan); }
.hook-fact { color: var(--faint); font-size: 13px; margin: 22px 0 0; }
.step:not(:has(.step-n)) .step-text, .step:not(:has(.step-n)) .step-foot { padding-left: 0; }
.gallery.edit { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.gallery.pair2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery img { width: 100%; height: auto; object-fit: contain; }
.route-index { list-style: none; padding: 0; margin: 30px 0 0; columns: 2 380px; column-gap: 56px; }
.route-index li { break-inside: avoid; padding: 0 0 18px; }
.route-index li:first-child { column-span: all; padding-bottom: 28px; }
.route-index a { color: inherit; text-decoration: none; font-size: 16px; line-height: 1.5; }
.route-index b { font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--text); border-bottom: 1px solid var(--dim); }
.route-index span { color: var(--muted); }
.route-index li:first-child b { font-size: clamp(30px, 3.4vw, 42px); } .route-index li:first-child span { display: block; max-width: 34em; margin-top: 6px; font-size: 18px; }
.route-index a:hover b, .route-index a:focus-visible b { border-bottom-color: var(--text); }
.route-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; margin-top: 26px; }
.route-cards a { border: 1px solid var(--line); padding: 20px 22px; text-decoration: none; color: inherit; display: grid; gap: 6px; transition: border-color .2s, transform .2s; }
.route-cards a:hover, .route-cards a:focus-visible { border-color: var(--cyan); transform: translateY(-2px); }
.route-cards b { font-family: var(--serif); font-weight: 400; font-size: 24px; } .route-cards span { color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.route-cards.enquire { max-width: 1240px; margin: 20px auto 0; }
header.top nav { align-items: center; }
.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-item > a::before { content: "▾"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); font-size: .7em; color: var(--faint); transition: color .2s; }
.nav-item:hover > a::before, .nav-item:focus-within > a::before { color: var(--cyan); }
header.top nav { gap: 38px; }
header.top nav a.within { color: var(--text); }
/* the panel hangs under its section; the padding bridges the gap so the pointer can travel down to it */
.nav-sub { position: absolute; left: -18px; top: 100%; padding-top: 14px; z-index: 50; white-space: nowrap; visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .18s ease, transform .18s ease, visibility 0s .18s; }
.nav-item:hover .nav-sub, .nav-item:focus-within .nav-sub { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
/* the option reads exactly like the section above it: same type, same cyan underline drawn on hover */
.nav-sub > div { padding: 10px 18px 12px; background: var(--raise); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
@media (prefers-reduced-motion: reduce) { .nav-sub { transition: none; transform: none; } }
@media (max-width: 1040px) { header.top nav { gap: 30px; } .mark span { display: none; } }
.menu-sheet a.sheet-sub { font-size: 20px; padding: 10px 0 10px 22px; color: var(--muted); border-left: 2px solid var(--line); border-bottom: 1px solid var(--line); }
.nav-enquire { border: 1px solid var(--muted); padding: 7px 14px !important; color: var(--text) !important; } .nav-enquire:hover { border-color: var(--cyan); }
.menu-sheet a small { display: block; color: var(--muted); font-size: 13px; }
.works-filters .find { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.works-filters input { font: inherit; font-size: 16px; color: var(--text); background: var(--raise); border: 1px solid var(--line); padding: 10px 14px; min-width: 220px; }
.works-filters input:focus { outline: none; border-color: var(--cyan); } .find-msg { color: var(--cyan); font-size: 13px; }
.works-filters .gap { margin-left: 22px; } .chip { min-height: 36px; display: inline-flex; align-items: center; }
.works-grid { padding: 0 var(--gut); margin-top: 24px; } .works-list { margin: 24px var(--gut) 0; }
.works-list .row .p { color: var(--muted); }
.enquire-btn { margin: 26px 0 0; border-color: var(--cyan); }
.work-nav { max-width: 860px; margin: 60px auto 0; padding: 0 var(--gut); display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; }
.work-nav a { border: 1px solid var(--line); padding: 14px 18px; text-decoration: none; color: var(--text); display: grid; gap: 2px; min-height: 60px; } .work-nav a:hover { border-color: var(--cyan); }
.work-nav .wn-next { text-align: right; } .work-nav .wn-back { text-align: center; } .work-nav span.mono { color: var(--faint); font-size: 12px; } .work-nav b { font-family: var(--serif); font-weight: 400; font-size: 20px; }
@media (max-width: 760px) { .gallery.pair2 { grid-template-columns: 1fr; } .works-filters .gap { margin-left: 0; display: block; margin-top: 8px; } .work-nav { grid-template-columns: 1fr 1fr; } .work-nav .wn-back { grid-column: 1 / -1; order: 3; } }
.step:not(:has(.step-n)).wide .gallery, .step:not(:has(.step-n)).wide .evidence, .step:not(:has(.step-n)) .fig-slot, .step:not(:has(.step-n)) .own-fig { margin-left: 0; }
/* ---------- review phase 3: zoom, detail, touch ---------- */
.hero-tools { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; margin-top: 14px; }
.hero-tools .button { margin-top: 0; padding: 9px 16px; cursor: pointer; background: none; font: inherit; font-size: 14.5px; } .hero-tools span { color: var(--faint); font-size: 12.5px; }
.detail-crop { margin: 34px 0 0; } .detail-crop button { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; width: 100%; }
.detail-crop img { width: 100%; height: auto; display: block; } .detail-crop figcaption { color: var(--faint); font-size: 12.5px; margin-top: 8px; }
.zoombox { position: fixed; inset: 0; z-index: 200; background: rgba(10, 9, 8, .97); display: grid; place-items: center; overflow: hidden; touch-action: none; }
.zoombox img { max-width: 96vw; max-height: 88vh; cursor: grab; transform-origin: center; user-select: none; will-change: transform; }
.zoom-bar { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; z-index: 2; }
.zoom-bar button { font: inherit; font-size: 17px; color: var(--text); background: var(--raise); border: 1px solid var(--muted); min-width: 48px; min-height: 48px; padding: 0 16px; cursor: pointer; }
.zoom-bar button:hover, .zoom-bar button:focus-visible { border-color: var(--cyan); outline: none; }

/* ---------- Every chart answers the pointer: a mark with data-tip lights up and shows its figures ---------- */
svg .tp { cursor: pointer; outline: none; }
svg .tp .hit { fill: transparent; transition: fill-opacity .15s; }
svg .tp:hover .hit, svg .tp:focus-visible .hit { fill: var(--cyan); fill-opacity: .1; }
svg .tp:hover > rect:not(.hit), svg .tp:focus-visible > rect:not(.hit), svg .tp:hover > path, svg .tp:focus-visible > path { filter: brightness(1.5); }
svg .tp:hover > rect:not(.hit):not([fill^="url"]), svg .tp:focus-visible > rect:not(.hit):not([fill^="url"]) { stroke: var(--cyan); stroke-width: 1; }
svg .tp > circle { transition: r .15s, fill-opacity .15s; }
svg .tp.dot:hover > circle, svg .tp.dot:focus-visible > circle { r: 7; fill-opacity: 1; stroke: var(--text); stroke-opacity: 1; stroke-width: 1.6; }
svg .tp.ev:hover > circle, svg .tp.ev:focus-visible > circle { r: 6; } svg .tp.ev:hover text, svg .tp.ev:focus-visible text { fill: var(--amber) !important; }
svg .tp:hover > text, svg .tp:focus-visible > text { fill: var(--text); }
[data-tip].tph { transition: border-color .15s, background-color .15s; } [data-tip].tph:hover, [data-tip].tph:focus-visible { border-color: var(--cyan); background-color: color-mix(in srgb, var(--cyan) 8%, transparent); outline: none; }
@media (prefers-reduced-motion: reduce) { svg .tp > circle, svg .tp .hit { transition: none; } }

/* Method: the twenty-three rebuilds */
.rebuilds { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 4px; }
.rb { --g: var(--faint); border: 1px solid var(--line); border-top: 3px solid var(--g); background: var(--raise); padding: 14px 0 12px; text-align: center; cursor: default; }
.rb b { font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--text); }
.g0 { --g: var(--faint); } .g1 { --g: #6f6b62; } .g2 { --g: #a8a49a; } .g3 { --g: #2f8f9a; } .g4 { --g: var(--cyan); }
.rb.g4 { background: color-mix(in srgb, var(--cyan) 16%, var(--raise)); } .rb.g4 b { color: var(--cyan); }
.rb-key { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 16px; font-size: 13.5px; color: var(--muted); }
.rb-key span { display: inline-flex; align-items: center; gap: 8px; } .rb-key i { width: 18px; height: 3px; background: var(--g); } .rb-key b { font-weight: 500; color: var(--text); }
@media (max-width: 900px) { .rebuilds { grid-template-columns: repeat(8, minmax(0, 1fr)); } .rb b { font-size: 18px; } }

/* Oracle opening: the text, and beside it every test of the run as a dot */
.oracle-head { display: grid; grid-template-columns: minmax(0, 46em) minmax(0, 460px); justify-content: space-between; gap: 20px 64px; align-items: end; }
.sieve { margin: 0 0 6px; } .sieve canvas { display: block; cursor: crosshair; }
.sieve figcaption { margin-top: 14px; display: grid; gap: 6px; color: var(--muted); font-size: 13.5px; }
.sieve figcaption .mono { color: var(--faint); font-size: 12px; }
.sv-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; } .sv-key b { color: var(--text); font-weight: 500; }
.sv-key i { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); margin-left: 12px; } .sv-key i:first-child { margin-left: 0; }
.sv-key i.l { opacity: .45; } .sv-key i.x { background: var(--text); opacity: .2; }
@media (max-width: 1040px) { .oracle-head { grid-template-columns: 1fr; } .sieve { max-width: 440px; margin-top: 26px; } }

/* Studio photographs */
.photo { margin: 34px 0 0; max-width: 1240px; } .photo img { width: 100%; height: auto; display: block; background: var(--raise); }
.photo figcaption { color: var(--faint); font-size: 12.5px; margin-top: 10px; }
.photo.in-chapter { margin: 30px auto 0; } .step .photo { margin-top: 40px; }

/* Neon: the year alongside. About: the wager */
.lineage.alongside { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 0 28px; }
.lineage.alongside li.now { border-top-color: var(--amber); } .lineage.alongside li.now .v { color: var(--amber); }
.wager { max-width: 1240px; margin: 36px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 22px 36px; }
.wager > div { border-top: 3px solid var(--line); padding-top: 14px; } .wager > div:first-child { border-top-color: var(--peter); }
.wager .mono { color: var(--faint); font-size: 12.5px; } .wager p { margin: 10px 0 0; font-size: 17.5px; line-height: 1.6; color: var(--text); }

/* Neon: her history */
.pull.hers { border-left-color: var(--amber) !important; color: var(--amber); } .pull.hers cite { color: var(--faint); }
.named { max-width: 1240px; margin: 20px auto 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px 48px; align-items: center; }
.named .pull { margin-left: 82px; } .emblem-fig { margin: 0; } .emblem { width: 100%; max-width: 520px; display: block; } .emblem-fig figcaption { color: var(--faint); font-size: 12px; text-align: center; }
.npath b.q { font-size: 21px; line-height: 1.25; }
.council { max-width: 1240px; margin: 36px auto 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .council.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.council > div { border: 1px solid var(--line); border-top: 3px solid var(--line); background: var(--raise); padding: 16px 18px 20px; transition: border-color .2s, transform .2s; }
.council > div.a { border-top-color: var(--amber); } .council > div.c { border-top-color: var(--cyan); } .council > div:hover { border-color: var(--muted); transform: translateY(-2px); }
.council .mono { color: var(--faint); font-size: 12px; } .council b { display: block; font-family: var(--serif); font-weight: 400; font-size: 23px; margin: 8px 0; } .council p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.laws { max-width: 1240px; margin: 36px auto 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 22px; }
.laws > div { border-top: 3px solid var(--amber); padding-top: 12px; } .laws .mono { color: var(--faint); font-size: 12px; } .laws b { display: block; font-family: var(--serif); font-weight: 400; font-size: 21px; margin: 6px 0; } .laws p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.method-stats.in-body { max-width: 1240px; margin: 40px auto 0; }
.tr-intro { color: var(--muted); font-size: 16px; margin: 0 0 16px; max-width: 44em; }
@media (max-width: 1000px) { .council, .council.four, .laws { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .named { grid-template-columns: 1fr; } .named .pull { margin-left: 0; } }
@media (max-width: 560px) { .council, .council.four, .laws { grid-template-columns: 1fr; } }

/* Opening: why any of this exists */
.why { padding: 120px var(--gut) 0; max-width: calc(1240px + 2 * var(--gut)); }
.why h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.06; margin: 14px 0 0; max-width: 17em; }
.why .photo { margin-top: 44px; }
.why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 64px; margin-top: 64px; }
.why-grid h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 22px; color: var(--muted); margin: 0 0 16px; }
.why-grid p { font-size: 19px; line-height: 1.6; margin: 0 0 16px; max-width: 34em; }
.why .pull { margin: 22px 0 22px; padding-left: 22px; border-left: 2px solid var(--line); font-size: 22px; max-width: 26em; }
.why .pull.peter { border-left-color: var(--peter); } .why .pull.big { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.25; margin-top: 0; }
.tally { margin: 72px 0 0; max-width: 1240px; }
.tally-marks { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 4px; }
.tally-marks i { display: block; box-shadow: inset 0 0 0 1px var(--dim); }
.tally-marks i.on { background: var(--text); box-shadow: none; opacity: .82; }
.tally figcaption { margin-top: 18px; color: var(--muted); font-size: 16px; line-height: 1.55; max-width: 44em; }
.band-mark { margin: 0 0 56px; } .band-mark img { display: block; width: 100%; height: auto; max-height: 120px; object-fit: cover; }
.band-mark figcaption { margin-top: 8px; color: var(--faint); font-size: 12px; }
.why-foot { margin: 36px 0 0; font-size: 17px; color: var(--muted); }
@media (max-width: 900px) { .why { padding-top: 80px; } .why-grid { grid-template-columns: 1fr; gap: 44px; } }

/* Works: a compact top so paintings show without scrolling */
.works-top { padding: 26px var(--gut) 0; }
.wt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.wt-row h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3vw, 40px); line-height: 1; margin: 0; }
.wt-count { color: var(--muted); font-size: 12.5px; }
.wt-tools { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; border: 0 !important; }
.wt-tools > div { display: flex; align-items: center; gap: 6px; margin: 0; } .wt-tools input { padding: 7px 12px; min-width: 170px; font-size: 15px; }
.wt-more { margin: 12px 0 0 !important; padding: 0 !important; border: 0 !important; }
.wt-more summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; cursor: pointer; } .wt-more summary::-webkit-details-marker { display: none; }
.wt-more summary .chip::after { content: " ▾"; font-size: .8em; margin-left: 4px; } .wt-more[open] summary .chip::after { content: " ▴"; }
.wt-note { color: var(--faint); font-size: 14px; cursor: default; } .wt-note a { color: var(--muted); }
.wt-more > div { margin-top: 10px; }
.works-top + .gallery, .works-top + script + .gallery, .works-top ~ .works-grid, .works-top ~ .works-list { margin-top: 22px; }
@media (max-width: 760px) { .wt-tools { margin-left: 0; } .works-top { padding-top: 18px; } }

/* Neon: her portrait beside the opening */
.neon-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px 56px; align-items: center; max-width: 1340px; }
.neon-portrait { margin: 0; } .neon-portrait img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.neon-portrait figcaption { color: var(--faint); font-size: 12px; margin-top: 10px; }
@media (max-width: 1000px) { .neon-top { grid-template-columns: 1fr; } }

/* Section pages: the opening text, and beside it one small figure of what the page holds */
/* the figure sits out at the page's right edge, in the space the text column leaves empty */
.head-top { display: grid; grid-template-columns: minmax(0, 46em) minmax(0, 500px); justify-content: space-between; gap: 24px 64px; align-items: center; }
.head-fig { margin: 0 0 4px; } .head-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.head-fig figcaption { color: var(--faint); font-size: 11.5px; line-height: 1.6; margin-top: 12px; }
.hf-t { fill: var(--faint); font-family: var(--mono); font-size: 8px; letter-spacing: .06em; }
.hf-year a.tp:hover rect, .hf-year a.tp:focus-visible rect { fill-opacity: 1; stroke: var(--text); stroke-width: 1.2; }
.hf-archive rect.s { fill: #a8a49a; } .hf-archive rect.k { fill: var(--dim); } .hf-archive rect.l { fill: transparent; stroke: var(--dim); stroke-width: 1; }
.hf-archive a.tp:hover rect, .hf-archive a.tp:focus-visible rect { fill: var(--cyan); stroke: var(--cyan); filter: none; }
.hf-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-bottom: 4px; color: var(--muted); }
.hf-key i { width: 9px; height: 9px; margin-left: 10px; } .hf-key i:first-child { margin-left: 0; } .hf-key i.s { background: rgba(233,225,204,.85); width: 14px; height: 8px; } .hf-key i.k { background: rgba(233,225,204,.16); box-shadow: inset 0 0 0 1px rgba(233,225,204,.3); width: 14px; height: 8px; } .hf-key i.l { border: 1px dashed rgba(233,225,204,.45); width: 14px; height: 8px; }
.hf-m { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: center; } .hf-m img { width: 100%; display: block; }
.hf-lads { display: grid; gap: 2px; } .hf-lad { display: grid; grid-template-columns: 126px auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 5px 6px; font-size: 13px; white-space: nowrap; border: 1px solid transparent; cursor: default; }
.hf-lad em { font-style: normal; font-size: 10.5px; color: var(--cyan); } .pips { display: inline-flex; gap: 3px; } .pips i { width: 13px; height: 7px; background: var(--empty); } .pips i.below { background: var(--cyan-deep, #2f5c62); } .pips i.on { background: var(--cyan); }
.hf-sum { display: flex; justify-content: space-between; align-items: baseline; border: 1px solid transparent; border-top: 1px solid var(--line); margin-top: 6px; padding: 8px 6px 0; cursor: default; }
.hf-sum .mono { font-size: 10.5px; color: var(--faint); } .hf-sum b { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1; color: var(--cyan); }
.hf-k { fill: var(--cyan); font-family: var(--mono); font-size: 10px; letter-spacing: .07em; } .hf-n { fill: var(--text); font-family: var(--serif); font-size: 17px; }
.hf-guide a.gl:hover .hf-n, .hf-guide a.gl:focus-visible .hf-n { fill: var(--cyan); } .hf-guide a.gl:hover circle { r: 6; } .hf-guide a.gl > path { filter: none !important; }
@media (max-width: 1040px) { .head-top { grid-template-columns: 1fr; } .head-fig { max-width: 460px; margin-top: 22px; } }

.hf-stroke { position: relative; border: 1px solid var(--line); } .hf-stroke img { display: block; width: 100%; height: auto; } .hf-stroke svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hf-stroke .hf-k { font-size: 28px; } .hf-stroke .hf-n { font-size: 42px; }
.hf-guide a.gl:hover rect, .hf-guide a.gl:focus-visible rect { stroke-opacity: 1; fill-opacity: 1; filter: none; } .hf-guide a.gl circle { transition: r .15s; } .hf-guide a.gl:hover circle { r: 16; }

.method-head:has(.head-top) { max-width: none; } .method-head:has(.head-top) > .method-stats, .method-head:has(.head-top) > nav { max-width: 1240px; }
.method-head:has(.head-top) > .method-stats, .method-head:has(.head-top) > nav { margin-right: auto; }
.method-head:has(.head-top) > nav.method-toc { margin-left: 0; }

/* Neon's note on a work page (2026-10-15): near the top, framed like a lit label. Amber hairline, two brighter
   corners, a faint warm wash from the top left; the text in the serif italic at reading size. */
.neon-frame { position: relative; margin: 34px 0 40px; padding: 36px 44px 26px; max-width: 46em;
  border: 1px solid rgba(221,161,90,.22);
  background: radial-gradient(130% 120% at 0% 0%, rgba(221,161,90,.075), rgba(221,161,90,0) 62%), var(--raise); }
.neon-frame::before, .neon-frame::after { content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; }
.neon-frame::before { top: -1px; left: -1px; border-top: 1px solid var(--amber); border-left: 1px solid var(--amber); }
.neon-frame::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--amber); border-right: 1px solid var(--amber); }
.nf-body p { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(19px, 1.85vw, 22px); line-height: 1.62;
  color: var(--text); text-wrap: pretty; hanging-punctuation: first; }
.nf-body p + p { margin-top: 14px; }
.neon-frame figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 24px; }
.nf-draft, .nf-who { white-space: nowrap; }
.nf-sig { display: inline-flex; align-items: center; gap: 12px; font-family: var(--serif); color: var(--amber); font-size: 17px; letter-spacing: .04em; }
.nf-sig::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--amber); }
.nf-draft { color: var(--amber); font-size: 11.5px; opacity: .8; }
.nf-who { margin-left: auto; color: var(--muted); font-size: 11.5px; border-bottom: 0 !important; }
.nf-who:hover { color: var(--text); }
@media (max-width: 700px) {
  .neon-frame { padding: 26px 22px 20px; margin: 28px 0 32px; }
  .nf-body p { font-size: 18.5px; line-height: 1.58; }
}

/* Enquiry form */
.eq-form { display: grid; gap: 22px; max-width: 640px; margin-top: 10px; }
.eq-field { display: grid; gap: 6px; }
.eq-field label { font-size: 17px; color: var(--text); }
.eq-hint { font-size: 15px; color: var(--muted); }
.eq-form input, .eq-form select, .eq-form textarea { font: inherit; font-size: 17px; color: var(--text); background: var(--raise); border: 1px solid var(--line); padding: 12px 14px; width: 100%; border-radius: 0; }
.eq-form textarea { resize: vertical; min-height: 9em; line-height: 1.5; }
.eq-form input:focus-visible, .eq-form select:focus-visible, .eq-form textarea:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; border-color: var(--cyan); }
.eq-form .button { justify-self: start; margin-top: 4px; }
.eq-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.eq-error { border-left: 3px solid var(--red, #c4473a); padding: 10px 16px; background: var(--raise); max-width: 640px; }

/* Who is speaking on a work page (review 2026-10-16): a small label above each block */
.voice { display: block; font-size: 12px; color: var(--faint); margin: 0 0 8px; }
.voice::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 8px; vertical-align: 1px; }
.v-record { color: var(--muted); } .v-engine, .v-measured { color: var(--cyan); }
.v-engine::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.details .voice + .basics, .details .voice + .work-line { margin-top: 0; }
.details .basics + .voice, .details .work-line + .voice { margin-top: 22px; }

/* The depth pill clears the phone's home bar, and the page keeps room beneath it so it never covers the last lines. */
.js-depth .gauge, .js-depth .gauge:hover { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.js-depth .work-depth { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.enquire-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 22px 0 6px; }
.enquire-row .enquire-btn { margin: 0; }
.enquire-row .eq-hint { color: var(--muted); font-size: 14.5px; max-width: 34em; }
/* Scale reference on work pages: the studio table with a standard sheet on it */

/* Visual Mapping (/ink-map), in the constellation's terms: every zone a crisp tile, mono labels, 1px panels, numbers
   for every mark. Two rails above the map put every common choice one click away; the readout beside it gives a
   zone's five measures; the wall below shows each painting the average is made of. Each layer is one hue. */
.nav-sub > div { display: flex; flex-direction: column; gap: 10px; }
.im-tool { max-width: 1240px; margin: 0 auto; padding: 22px var(--gut) 0; display: flex; flex-direction: column; position: relative; }
.im-top, .im-side { display: contents; }
.im-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* read aloud and indexed, never shown */
.im-controls { order: 1; } .im-main { order: 2; } .im-read { order: 3; } .im-key { order: 4; } #im-cards { order: 5; margin-top: 24px; } #im-compare-host { order: 6; }

/* rails: a mono label, then a segmented row of choices */
.im-rail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.im-rl { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.im-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 3px; background: var(--raise); overflow: hidden; }
.im-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-right: 1px solid var(--line); white-space: nowrap; }
.im-chip:last-child { border-right: 0; }
.im-chip:hover { color: var(--text); background: #211f1d; }
.im-chip.on { color: var(--text); background: var(--ground); box-shadow: inset 0 -2px 0 var(--cyan); }
.im-chip:focus-visible { outline: 1px solid var(--text); outline-offset: -3px; }
.im-chip i { font-style: normal; color: var(--dim); font-size: 11px; letter-spacing: 0; }
.im-chip.on i { color: var(--cyan); }
.im-chip.zero { color: var(--dim); }
.im-chip.lay .sw { width: 8px; height: 8px; border-radius: 50%; background: var(--hue); opacity: .45; }
.im-chip.lay.on { box-shadow: inset 0 -2px 0 var(--hue); }
.im-chip.lay.on .sw { opacity: 1; box-shadow: 0 0 8px var(--hue); }
.im-papers .im-chip { padding: 7px 9px; gap: 5px; }
.im-menus { display: flex; flex-wrap: wrap; gap: 8px; }

/* compact menus for the rarer filters */
.im-dd { position: relative; }
.im-dd > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; padding: 6px 30px 6px 12px; border: 1px solid var(--line); background: var(--raise); border-radius: 3px; position: relative; }
.im-dd > summary::-webkit-details-marker { display: none; }
.im-dd > summary::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-70%) rotate(45deg); }
.im-dd[open] > summary { border-color: var(--text); }
.im-dd[open] > summary::after { transform: translateY(-30%) rotate(225deg); }
.im-dd > summary:hover { border-color: var(--muted); }
.im-dd > summary .k { white-space: nowrap; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.im-dd > summary b { font-weight: 500; font-size: 14px; color: var(--text); white-space: nowrap; }
.im-menu { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 260px; max-width: min(380px, 92vw); max-height: 62vh; overflow: auto; background: var(--raise); border: 1px solid var(--dim); border-radius: 3px; box-shadow: 0 24px 60px rgba(0,0,0,.6); padding: 6px; }
.im-dd.right .im-menu { left: auto; right: 0; }
.im-dd.wide .im-menu { min-width: 320px; }
.im-item { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 10px; border-radius: 2px; color: var(--text); font-size: 15px; }
.im-item i { font-style: normal; font-family: var(--mono); font-size: 12.5px; color: var(--faint); text-align: right; }
.im-item:hover, .im-item:focus-visible { background: var(--line); outline: none; }
.im-item.on { background: var(--ground); box-shadow: inset 3px 0 0 var(--cyan); }
.im-item.on span::after { content: " ✓"; color: var(--cyan); }
.im-item.zero { color: var(--dim); }
.im-sub { margin: 12px 10px 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.im-sub:first-child { margin-top: 6px; }
.im-sub.peter { color: var(--peter); }
.im-wall { margin: 10px 10px 6px; color: var(--muted); font-size: 14px; line-height: 1.45; border-left: 2px solid var(--cyan); padding-left: 10px; }

/* the filters in use */
.im-applied { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 12px; min-height: 30px; }
.im-count { color: var(--muted); margin-right: 4px; font-size: 14.5px; }
.im-count b { color: var(--text); font-weight: 600; font-size: 17px; }
.im-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 12px; border: 1px solid var(--dim); border-radius: 999px; font-size: 14px; }
.im-pill span { color: var(--muted); font-size: 16px; line-height: 1; }
.im-pill:hover { border-color: var(--text); } .im-pill:hover span { color: var(--text); }
.im-pill.peter { border-color: var(--peter); color: var(--peter); }
.im-clear { color: var(--muted); font-size: 14px; border-bottom: 1px solid var(--dim); margin-left: 4px; }

/* the map: tiles on near-black, row letters and column numbers outside */
.im-sheet { aspect-ratio: 1252 / 648; width: 100%; }
.im-svg { display: block; width: 100%; height: 100%; }
.im-c { cursor: crosshair; }
.im-c:hover { stroke: #fbf6ec; stroke-opacity: 1; stroke-width: 3; }
.im-svg rect { shape-rendering: geometricPrecision; } .im-w img { image-rendering: pixelated; }
.im-under { display: flex; justify-content: space-between; align-items: center; gap: 10px 24px; margin-top: 10px; flex-wrap: wrap; }
.im-cap { font-family: var(--serif); font-size: 21px; line-height: 1.35; margin: 0; flex: 1 1 420px; }
.im-legend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.im-legend i { width: 150px; height: 8px; border-radius: 1px; }
.im-legend .v { font-family: var(--mono); font-size: 12.5px; color: var(--text); }
.im-legend .u { color: var(--faint); font-size: 13px; }
.im-lead { color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 60em; margin: 8px 0 0; }

/* the readout: one zone's five measures as bars */
.im-read { border: 1px solid var(--line); background: var(--raise); padding: 14px 16px 12px; margin-top: 18px; }
.im-read-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.im-read-h b { font-family: var(--mono); font-weight: 400; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.im-read-h span { color: var(--faint); font-size: 12.5px; }
.im-read-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.im-read-l li { display: grid; grid-template-columns: 7.4em minmax(0, 1fr) 3em; column-gap: 10px; row-gap: 1px; align-items: center; }
.im-read-l .nm { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text); white-space: nowrap; }
.im-read-l .nm i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.im-read-l .bar { height: 6px; background: var(--empty); border-radius: 1px; overflow: hidden; }
.im-read-l .bar b { display: block; height: 100%; }
.im-read-l .v { font-family: var(--mono); font-size: 13px; text-align: right; color: var(--text); }
.im-read-f { margin: 12px 0 0; font-size: 12px; line-height: 1.45; color: var(--faint); }
.im-key { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin: 12px 0 0; border-left: 2px solid var(--line); padding-left: 10px; }
.im-key[hidden] { display: none; }

/* the four ways in and the side-by-side thumbnails */
.im-side-h { color: var(--faint); margin: 0 0 10px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.im-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.im-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); padding: 8px 8px 10px; background: var(--raise); }
.im-card:hover { border-color: var(--muted); }
.im-card.on { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.im-card svg { aspect-ratio: 2 / 1; height: auto; }
.im-card b { font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.2; }
.im-card > span { color: var(--muted); font-size: 14px; line-height: 1.4; }
.im-compare { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.im-mini { display: flex; flex-direction: column; gap: 5px; }
.im-mini svg { aspect-ratio: 2 / 1; height: auto; outline: 1px solid var(--line); }
.im-mini:hover svg { outline-color: var(--muted); }
.im-mini.on svg { outline: 2px solid var(--text); }
.im-mini > span { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.im-mini > span b { font-weight: 400; color: var(--text); }
.im-mini > span .mono { color: var(--dim); }
#im-compare-host:not(:empty) { margin-top: 18px; }
.im-embed { display: block; aspect-ratio: 2 / 1; max-width: 760px; }

/* the wall: every painting in the set as its own small map */
.im-wallsec { max-width: 1240px; margin: 44px auto 0; padding: 0 var(--gut); }
.im-wall-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; border-top: 1px solid var(--line); padding-top: 18px; }
.im-wall-head h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; margin: 0; }
.im-wall-head p { color: var(--muted); font-size: 15px; margin: 0; flex: 1 1 30em; }
.im-wallgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 5px; margin-top: 18px; }
.im-w { display: block; aspect-ratio: 2 / 1; background: #0b0a0c; outline: 1px solid transparent; }
.im-w img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.im-w:hover, .im-w:focus-visible { outline-color: var(--text); }
.im-w.kept { background: transparent; border: 1px dashed var(--line); }

@media (max-width: 820px) {
  .im-rail { gap: 6px 10px; }
  .im-rl { flex-basis: 100%; }
  .im-seg { max-width: 100%; }
  .im-papers { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .im-chip { padding: 7px 10px; }
  .im-menus { width: 100%; }
  .im-dd { flex: 1 1 calc(50% - 4px); }
  .im-dd > summary b { overflow: hidden; text-overflow: ellipsis; }
  .im-dd[open] { flex-basis: 100%; }
  .im-menu { position: static; max-width: none; box-shadow: none; margin-top: 6px; max-height: none; }
  .im-cap { font-size: 19px; flex-basis: 100%; }
  .im-wallgrid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
}
@media (max-width: 520px) { .im-cards { grid-template-columns: 1fr 1fr; } .im-card > span { display: none; } .im-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Wide screens: everything for choosing, reading and comparing on one screen. The two rails on top (the count and
   chosen filters at the end of the first), the map on the left as large as the height allows, the readout, the four
   ways in and the thumbnails on the right, level with the map's tiles. */
@media (min-width: 1280px) {
  .im-tool { --mw: clamp(620px, calc((100vh - 318px) * 1.932), calc(100% - 388px));   /* the screen's height less the header, the path and Listen line, the rails and the caption */ max-width: none; padding-top: 14px; display: grid; grid-template-columns: var(--mw) minmax(340px, 1fr); column-gap: 28px; align-items: start; }
  .im-top { grid-column: 1 / -1; display: block; order: 0; }
  .im-main { grid-column: 1; order: 1; }
  .im-controls { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 24px; }
  .im-controls > .im-rail:first-child { grid-column: 1; grid-row: 1; }
  .im-controls > .im-applied { grid-column: 2; grid-row: 1; justify-content: flex-end; margin: 0 0 10px; }
  .im-controls > .im-rail:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .im-rail .im-menus { margin-left: auto; }
  .im-side { grid-column: 2; order: 2; display: flex; flex-direction: column; padding-top: calc(var(--mw) * 40 / 1252); }
  .im-read { margin-top: 0; }
  #im-cards { margin-top: 14px; }
  .im-side .im-card b { font-size: 15px; }
  .im-side .im-card > span { display: none; }
  .im-side .im-compare { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .im-side .im-mini > span { font-size: 11px; letter-spacing: 0; }
  .comparing .im-side .im-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .comparing .im-side .im-card { padding: 5px 5px 6px; gap: 4px; }
  .comparing .im-side .im-card b { font-size: 12.5px; }
  .im-wallsec { max-width: none; }
  .im-wallgrid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
}
/* Listen: a page's spoken walk-through, compact, at the right end of the path line. Once it has started and the line
   scrolls out of view it docks bottom right, so it can be paused from anywhere. On phones it takes its own row. */
.listen-slot { flex: none; padding: 6px 0; min-height: 50px; display: flex; align-items: center; }
.listen { display: flex; align-items: center; gap: 12px; padding: 0; }
.listen-q { font-family: var(--serif); font-size: 16px; line-height: 1.25; margin: 0; flex: none; color: var(--muted); }
.listen-row { display: flex; align-items: center; gap: 10px; }
.listen-row[hidden] { display: none; }
.listen audio { width: 240px; height: 32px; }
.listen-play { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--muted); background: transparent; color: var(--text); display: grid; place-items: center; cursor: pointer; padding: 0; }
.listen-play:hover, .listen-play:focus-visible { border-color: var(--text); }
.listen-play svg { width: 14px; height: 14px; }
.listen-play .i-pause, .listen.playing .listen-play .i-play { display: none; }
.listen.playing .listen-play .i-pause { display: block; }
.listen-seek { width: 140px; accent-color: var(--cyan); }
.listen-t { flex: none; color: var(--muted); font-size: 13px; min-width: 4.5em; }
.listen.playing .listen-q { color: var(--text); }
.listen.docked { position: fixed; bottom: 16px; right: 16px; z-index: 20; padding: 8px 12px; background: var(--raise); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 6px 24px rgba(0, 0, 0, .5); }
.listen.docked .listen-q { display: none; }
@media (max-width: 760px) {
  .pathbar.has-listen { flex-wrap: wrap; gap: 0; }
  .pathbar.has-listen .trail { flex-basis: 100%; }
  .pathbar.has-listen .trail[hidden] { display: none !important; }
  .listen-slot { flex: 1; padding: 12px 0 14px; }
  .listen { flex-wrap: wrap; gap: 6px 10px; width: 100%; }
  .listen-q { flex-basis: 100%; }
  .listen-row { flex: 1; } .listen-seek { flex: 1; width: auto; min-width: 0; }
  .listen.docked { left: 12px; right: 12px; bottom: 12px; }
}
/* One page column on wide screens: past 1440px the page keeps its 1440px layout, centred, so every block shares one edge. */
:root { --page: 1440px; }
main { max-width: var(--page); margin-inline: auto; }
header.top, footer.foot { padding-inline: max(var(--gut), calc((100% - var(--page)) / 2 + var(--gut))); }
/* Papers: each paper's "what came out" card sits at the top of its constellation tile */
.paper .out { border-top: 0; padding-top: 0; }
.paper.one .paper-text > .out { grid-column: 1 / -1; max-width: 560px; }
/* Oracle: the way to the whole Constellation on one page. In the reading column on narrower screens; floating in the
   right margin where the screen leaves room for it. */
.margin-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; margin-top: 26px; max-width: 34em;
  padding: 16px 20px; border: 1px solid var(--line); border-left: 3px solid var(--cyan); background: var(--raise); color: var(--text); text-decoration: none; transition: border-color .2s, background .2s; }
.margin-card .mono { grid-column: 1; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); }
.margin-card b { grid-column: 1; font: 400 22px/1.2 var(--serif); }
.margin-card span:not(.mono) { grid-column: 1; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.margin-card i { grid-column: 2; grid-row: 1 / 4; font-style: normal; font-size: 26px; color: var(--cyan); transition: transform .2s; }
.margin-card:hover { border-color: var(--cyan); background: #1d1c1a; } .margin-card:hover i { transform: translateX(4px); }
.one-page { display: grid; gap: 10px; max-width: 1240px; margin: 0 auto; padding: 44px 48px; border: 1px solid var(--line); border-left: 3px solid var(--cyan);
  background: radial-gradient(ellipse at 85% 50%, rgba(122, 204, 214, .10), transparent 60%), var(--raise); color: var(--text); text-decoration: none; transition: border-color .2s; }
.one-page .mono { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); }
.one-page b { font: 400 clamp(30px, 3.6vw, 44px)/1.1 var(--serif); }
.one-page span:not(.mono) { color: var(--muted); font-size: 18px; max-width: 40em; }
.one-page i { font-style: normal; color: var(--cyan); font-size: 15px; margin-top: 8px; }
.one-page:hover { border-color: var(--cyan); }
/* The margins (site.js): where the screen leaves at least 210px beside the page's 1344px of content, a column on the right that
   stays in view, and notes on the left level with what they belong to. Elsewhere none of this shows. */
.mcol, .gloss { display: none; }
dfn.term { font-style: normal; }
@media (min-width: 1820px) {
  .mcol { display: grid; align-content: start; gap: 22px; position: fixed; z-index: 5; top: 110px; right: calc(50% - 886px); width: 190px;
    max-height: calc(100vh - 200px); overflow-y: auto; scrollbar-width: none; }
  .mbox[hidden] { display: none; }
  .mbox { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
  .mlab { font: 10.5px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
  .rail a { color: var(--muted); text-decoration: none; padding: 4px 0 4px 12px; border-left: 2px solid var(--line); line-height: 1.35; transition: color .2s, border-color .2s; }
  .rail a:hover { color: var(--text); }
  .rail a.at { color: var(--text); border-left-color: var(--cyan); }
  .mcol .margin-card { margin: 0; padding: 14px 14px 16px; grid-template-columns: 1fr; max-width: none; }
  .mcol .margin-card i { grid-column: 1; grid-row: auto; font-size: 20px; }
  .mcol .margin-card b { font-size: 18px; }
  .mcol .margin-card span:not(.mono) { font-size: 13px; }
  .mleg { border-top: 1px solid var(--line); padding-top: 12px; }
  .mleg .key { display: grid; gap: 6px; font-size: 11px; }
  .mleg .key span { display: flex; align-items: center; gap: 8px; line-height: 1.35; }
  .mleg .key i { flex: none; display: inline-block; width: 18px; height: 3px; }
  .mleg .key i.disc { width: 8px; height: 8px; border-radius: 50%; }
  .mwork svg { width: 100%; height: auto; overflow: visible; }
  .mwork line { stroke: var(--line); stroke-width: 2; }
  .mwork text { font: 8px var(--mono); fill: var(--faint); text-anchor: middle; }
  .mwork circle { fill: var(--cyan); }
  .mwork small { font-size: 11px; color: var(--muted); }
  .mnav { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; }
  .mnav a { font: 12px var(--mono); color: var(--text); text-decoration: none; border: 1px solid var(--line); padding: 6px 9px; }
  .mnav a:hover { border-color: var(--cyan); }
  .myear b { font: 400 22px/1.2 var(--serif); color: var(--text); }
  .myear small { font-size: 11px; }
  /* left margin: a quote, a dispute note or a term, beside its paragraph */
  .side, .gloss { position: absolute; width: 190px; margin: 0 !important; }
  .pull.side { font-size: 15.5px !important; line-height: 1.5; padding-left: 14px; max-width: none; }
  .pull.side cite { display: block; margin-top: 8px; font-size: 10.5px; }
  .dispute-note.side { font-size: 13.5px; }
  .gloss.side { display: block; font-size: 12.5px; line-height: 1.5; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; }
  .gloss b { display: block; font: 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); margin-bottom: 4px; }
  dfn.term { border-bottom: 1px dotted var(--muted); cursor: help; }
  /* the Listen box docks at the foot of the right-hand column */
  .listen.docked { right: calc(50% - 886px); width: 190px; bottom: 24px; flex-wrap: wrap; }
}

/* Brush dividers (Peter, 2026-10-22): the site's horizontal breaks are his own brush lines, each drawn to the length of
   its place by scripts/brush_dividers.py (a shorter one on phones, whose places are shorter). Shown at their own
   proportions, never stretched to fit. */
footer.foot::before, .setpanel::before, .deep::before { content: ""; display: block; background: left center / 100% auto no-repeat; pointer-events: none; }
footer.foot { border-top: 0; }
footer.foot::before { width: 100%; flex: none; aspect-ratio: 2700 / 60; background-image: url(/brush/footer-wide.webp); }
.setpanel { border-top: 0; padding-top: 0; }
.setpanel::before { grid-column: 1 / -1; aspect-ratio: 2500 / 48; background-image: url(/brush/setpanel-wide.webp); margin-bottom: -24px; }
.deep { border-top: 0; }
.deep::before { aspect-ratio: 1530 / 44; background-image: url(/brush/deep-wide.webp); margin-bottom: 24px; }
.deep.read-sec::before { aspect-ratio: 2170 / 52; background-image: url(/brush/readsec-wide-08.webp); }
/* a painting's deeper sections each open under a different stroke, so none repeats down the page */
#date.deep::before { background-image: url(/brush/deep-wide-01.webp); }
#materials.deep::before { background-image: url(/brush/deep-wide-02.webp); }
#related.deep::before { background-image: url(/brush/deep-wide-04.webp); }
.deep .mini-field .constellation section::before { display: none; }
@media (max-width: 700px) {
  footer.foot::before { aspect-ratio: 800 / 27; background-image: url(/brush/footer-narrow.webp); }
  .setpanel::before { aspect-ratio: 800 / 30; background-image: url(/brush/setpanel-narrow.webp); }
  .deep::before, .deep.read-sec::before { aspect-ratio: 800 / 30; background-image: url(/brush/deep-narrow.webp); }
  .deep.read-sec::before { background-image: url(/brush/deep-narrow-08.webp); }
  #date.deep::before { background-image: url(/brush/deep-narrow-01.webp); }
  #materials.deep::before { background-image: url(/brush/deep-narrow-02.webp); }
  #related.deep::before { background-image: url(/brush/deep-narrow-04.webp); }
}
/* The Year page's drawn figures (public/js/year-figs.js): the wall of every sheet, the brush columns of the hours */
.yr-wall, .yr-hours { overflow-x: auto; }
.yr-wall canvas, .yr-hours canvas { display: block; width: 100%; height: auto; }
/* Three sources, drawn (materials.js sources()) */
.src-fig { overflow-x: auto; } .src-fig svg { display: block; width: 100%; min-width: 760px; height: auto; }
.src-fig .tp:focus-visible rect { fill: color-mix(in srgb, var(--cyan) 6%, transparent); outline: none; }
/* Flaws drawn on the sheet (method.js zoneMap) */
.flawsheet { display: block; width: 100%; height: auto; }
.flawsheet .tp:focus-visible rect { fill-opacity: .16; outline: none; }
/* Paper weight held to the light (gsm.js) */
.gsm-fig { display: block; width: 100%; height: auto; }
.gsm-fig a:hover text, .gsm-fig a:focus-visible text { text-decoration: none; } .gsm-fig a:focus-visible rect:first-child { fill: color-mix(in srgb, var(--cyan) 6%, transparent); }
.prof-fig { display: block; width: 100%; height: auto; }
/* Material eras: a thread from first use to last, an ink dab on each photo day (pages.js eraChart) */
.era .row .lane i.thread { height: 1px !important; top: 50% !important; border-radius: 0; background: #b9b1a1; opacity: .35; }
.era .row .lane b.dab { position: absolute; top: 50%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; background: #b9b1a1; opacity: .55; }
.era .row.me .lane i.thread { background: var(--cyan); opacity: .7; } .era .row.me .lane b.dab { background: var(--cyan); opacity: 1; }
.era .row:hover .lane b.dab { opacity: .9; }
.scatter.scatter-pair { max-width: none; width: 100%; } .scatter-pair .tk, .scatter-pair .ax { font-size: 15px; }