:root {
  color-scheme: dark;
  --ground: #17191c;
  --panel: #232733;
  --raised: #333946;
  --paper: #ffffff;
  --ink: #dce0e6;
  --muted: #a6acb4;
  --line: #ffffff24;
  --blue: #8bb8ee;
  --code: #181a1d;
  --code-ink: #d5d9df;
  --green: #aad84c;
  --red: #ef7177;
  --stage: #101216;
  --caution: #e5bd77;
  --hover: #ffffff0b;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", "Cascadia Code", monospace;
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--ground); }
body { margin: 0; color: var(--ink); font: 14px/1.5 var(--sans); }
button, input, textarea, select { font: inherit; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
button { color: inherit; }
a { color: inherit; text-underline-offset: 3px; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
button, select, summary { border-radius: 4px; }
.skip-link { position: fixed; top: 8px; left: 12px; z-index: 100; padding: 8px 12px; background: var(--raised); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.topbar { height: 72px; padding: 0 28px; display: flex; align-items: center; gap: 48px; border-bottom: 1px solid var(--line); background: var(--ground); }
.wordmark { text-decoration: none; font-family: Georgia, serif; font-weight: 600; font-size: 25px; letter-spacing: -.6px; white-space: nowrap; }
.wordmark small { display: none; }
.primary-nav { display: flex; gap: 6px; height: 100%; align-items: center; }
.primary-nav a { padding: 6px 10px; border-radius: 4px; text-decoration: none; font-size: 13px; color: var(--muted); }
.primary-nav a:hover { background: #ffffff08; color: var(--ink); }
.primary-nav a.active { color: var(--ink); box-shadow: 0 2px var(--blue); border-radius: 0; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.utility-link, .app-link { border: 0; padding: 6px 0; background: none; font-size: 13px; color: var(--muted); text-decoration: none; }
.utility-link:hover, .app-link:hover { color: var(--ink); }
.app-link span { margin-left: 3px; }
.explore-main { height: calc(100dvh - 72px); min-height: 440px; }
.playhouse { height: 100%; display: grid; grid-template-rows: minmax(0,1fr) 30px; }
.example-label, .document-dot { display: none; }
.quick-example, .example-picker summary { min-height: 32px; padding: 6px 10px; border: 0; background: none; color: var(--muted); font-size: 13px; white-space: nowrap; }
.quick-example:hover, .example-picker summary:hover { background: #ffffff09; color: var(--ink); }
.quick-example.active { color: var(--blue); background: #4f8fd619; }
.example-picker { position: relative; }
.example-picker summary { display: flex; gap: 10px; align-items: center; list-style: none; }
.example-picker summary::-webkit-details-marker { display: none; }
.example-picker[open] > summary { color: var(--ink); background: var(--raised); }
.picker-popover > label { display: block; margin-bottom: 8px; font-size: 12px; color: var(--muted); }
#example-search, #catalog-search { width: 100%; height: 38px; padding: 0 10px; border: 1px solid #586170; border-radius: 4px; background: var(--code); color: var(--ink); }
input::placeholder { color: #969da7; }
.picker-results { margin-top: 8px; max-height: min(420px,60vh); overflow-y: auto; }
.picker-results button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; border: 0; padding: 10px 8px; background: none; text-align: left; font-size: 13px; }
.picker-results button:hover, .picker-results button.active { background: var(--hover); }
.picker-results button.active { color: var(--blue); }
.picker-results small { color: var(--muted); font-size: 11px; text-align: right; }
.picker-empty { margin: 12px 8px 4px; color: var(--muted); font-size: 13px; }
#engine-state { font-size: 12px; color: var(--muted); }
.workbench { min-height: 0; display: grid; grid-template-columns: minmax(0, var(--source-width,44%)) 6px minmax(0,1fr); }
.source-pane { min-width: 0; min-height: 0; display: grid; grid-template-rows: 44px minmax(0,1fr) auto; }
.source-pane { background: var(--code); border-right: 1px solid var(--line); }
.editor-host { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.editor-host #source { display: block; width: 100%; height: 100%; padding: 0; border: 0; outline-offset: -2px; }
.auto-format { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.auto-format input { accent-color: var(--blue); }
.runtime-state { display: none; }
.format-dialog { width: min(620px,calc(100vw - 24px)); max-height: 85dvh; padding: 24px; border: 1px solid #586170; border-radius: 6px; background: var(--panel); color: var(--ink); }
.format-dialog::backdrop { background: #0009; }
.format-dialog header, .format-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.format-dialog h2 { margin: 0; font-size: 19px; font-weight: 550; }
.format-dialog p { color: var(--muted); font-size: 13px; }
.format-dialog button { padding: 6px 10px; background: var(--raised); border: 1px solid var(--line); }
.format-presets { display: flex; gap: 8px; padding: 8px 0 16px; }
#format-options > label { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; border-top: 1px solid var(--line); }
#format-options strong, #format-options small { display: block; }
#format-options strong { font: 13px var(--mono); font-weight: 500; }
#format-options small { color: var(--muted); font-size: 12px; margin-top: 3px; }
#format-options select { min-width: 100px; color: var(--ink); background: var(--code); padding: 6px; border: 1px solid #586170; }
#format-options input { accent-color: var(--blue); }
.format-dialog footer { margin-top: 20px; font-size: 12px; }
.output-pane { min-width: 0; min-height: 0; display: grid; grid-template-rows: 44px minmax(0,1fr) auto; background: var(--stage); }
.output-pane.paged { grid-template-rows: 44px auto minmax(0,1fr) auto; }
.output-pane:has(.layout-notes:not([hidden])) { grid-template-rows: 44px auto minmax(0,1fr) auto auto; }
.pane-bar { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.pane-bar > div:first-child { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pane-index { display: none; }
.pane-bar h1, .pane-bar h2 { margin: 0; font: 500 13px var(--sans); color: var(--muted); }
.pane-bar small { color: var(--muted); font-size: 12px; }
.pane-actions { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.pane-actions button, .view-switch button { min-height: 30px; padding: 5px 8px; border: 0; background: none; color: var(--muted); font-size: 12px; }
.pane-actions button:hover:not(:disabled) { color: var(--ink); background: var(--hover); }
.view-switch { display: flex; gap: 2px; padding: 2px; background: var(--ground); border-radius: 5px; }
.view-switch button { min-height: 26px; padding: 3px 9px; }
.view-switch button.active { color: var(--ink); background: var(--raised); }
#source-size { margin-right: 6px; font-size: 11px; font-variant-numeric: tabular-nums; }
#source { display: block; width: 100%; min-height: 0; resize: none; border: 0; padding: 22px 24px; background: var(--code); color: var(--code-ink); font: 14px/1.7 var(--mono); tab-size: 2; caret-color: var(--blue); }
#source::selection { background: #4f8fd640; }
.diagnostics { min-height: 36px; max-height: 130px; padding: 8px 16px; overflow: auto; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.5; }
.diagnostic-ok { color: var(--muted); }
.diagnostic-error { display: grid; gap: 3px; width: 100%; padding: 3px 0; border: 0; background: none; color: var(--red); text-align: left; font: inherit; }
.diagnostic-error small { color: var(--muted); font: inherit; }
.paper-stage { position: relative; min-height: 0; padding: 32px; overflow: auto; background: var(--stage); }
.paper { position: relative; min-height: 260px; padding: 40px 32px; display: grid; align-content: start; background: var(--paper); color: #111; }
.paper svg { width: 100%; height: auto; display: block; }
.paper.pages { display: block; padding: 0; background: none; }
.paper.pages .sheet { margin: 0 auto 24px; background: white; color: #111; max-width: none; }
.sheet figcaption { padding: 4px; background: var(--stage); color: var(--muted); text-align: center; font-size: 11px; }
.loading-message { margin: 40px auto; color: #68717d; font-size: 13px; }
.ss-cursor { position: absolute; z-index: 8; left: 0; width: 2px; opacity: 0; pointer-events: none; background: #3978bb; }
.ss-cursor.on { opacity: .85; }
.transport { min-height: 44px; display: grid; grid-template-columns: auto auto minmax(60px,1fr) auto auto; align-items: center; gap: 10px; padding: 6px 16px; border-top: 1px solid var(--line); background: var(--panel); }
.transport button { min-height: 30px; padding: 4px 8px; border: 0; background: none; color: var(--ink); font-size: 13px; }
.transport button:hover:not(:disabled) { background: var(--hover); }
.transport input { width: 100%; accent-color: var(--blue); }
#time-readout, #bar-readout { white-space: nowrap; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
/* The bar readout holds a dash until the first performance is known. Reserving
   the room it will need keeps the transport from re-columning underneath it. */
#bar-readout { min-width: 3.6em; }
.workbench-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-top: 1px solid var(--line); color: var(--muted); background: var(--ground); font-size: 11px; }
.workbench-footer > span:nth-child(2) { display: none; }
/* The tally is a dash until the first engraving lands. Everything to its right
   is packed against it, so give the count its slot up front instead of shoving
   the Embed button sideways the moment the engine answers. */
#score-count { flex: 0 1 11em; font-variant-numeric: tabular-nums; }
.workbench-footer a { text-decoration: none; }
.workbench-footer a:hover { color: var(--blue); }
.embed-dialog { width: min(640px,calc(100vw - 32px)); max-height: 85vh; padding: 0; border: 1px solid #586170; border-radius: 6px; background: var(--panel); color: var(--ink); }
.embed-dialog::backdrop { background: #07090bb3; }
.dialog-card { padding: 20px; }
.dialog-card > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.eyebrow { display: none; }
.dialog-card h2 { margin: 0; font-size: 19px; font-weight: 600; }
.dialog-close { width: 32px; height: 32px; border: 0; background: none; font-size: 24px; color: var(--muted); }
.dialog-close:hover { background: var(--hover); }
.embed-options article { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); }
.embed-options article > span { display: none; }
.embed-options h3 { margin: 0 0 4px; font-size: 14px; font-weight: 550; }
.embed-options p { margin: 0; color: var(--muted); font-size: 13px; }
.embed-options code { font-family: var(--mono); }
.embed-options button, .embed-options a { display: inline-block; padding: 7px 10px; border: 1px solid #586170; border-radius: 4px; background: var(--raised); color: var(--ink); font-size: 12px; text-decoration: none; white-space: nowrap; }
.copy-status { min-height: 1.5em; margin: 12px 0 0; color: var(--muted); font-size: 12px; }
.catalog-shell { width: min(100% - 48px,1080px); margin: 0 auto; padding: 48px 0 80px; }
.catalog-lead { display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: end; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.catalog-lead h1 { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -.7px; }
.catalog-intro p { margin: 0 0 16px; font-size: 14px; color: var(--muted); }
.catalog-intro label { display: block; margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.catalog-list article { display: grid; grid-template-columns: minmax(0,1fr) 140px 130px; gap: 24px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); }
.catalog-number { display: none; }
.catalog-list h2 { margin: 0 0 6px; font-size: 17px; font-weight: 550; }
.catalog-list p { max-width: 600px; margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.catalog-list code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #bec6d2; font: 12px var(--mono); }
.catalog-list small { color: var(--muted); font-size: 12px; }
.catalog-list a { justify-self: end; color: var(--blue); font-size: 12px; text-decoration: none; }
.catalog-list a:hover { text-decoration: underline; }
.catalog-empty { padding: 24px 0; color: var(--muted); }
@media(max-width: 1000px) {
  .topbar { gap: 20px; padding-inline: 16px; }
  .paper-stage { padding: 20px; }
  .paper { padding: 28px 20px; }
  #engine-state { font-size: 11px; }
  #source-size, #render-meta { display: none; }
}
@media(max-width: 760px) {
  .topbar { height: auto; min-height: 54px; flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .wordmark { font-size: 17px; }
  .topbar-actions { gap: 12px; }
  .primary-nav { order: 3; width: 100%; gap: 6px; }
  .primary-nav a { padding: 5px 10px; }
  .explore-main { height: auto; min-height: 0; }
  .playhouse { height: auto; grid-template-rows: auto 34px; }
  .workbench { grid-template-columns: 1fr; }
  .source-pane { height: 390px; border-right: 0; border-bottom: 1px solid var(--line); }
  .output-pane { height: min(650px,85dvh); min-height: 360px; }
  .pane-bar { padding-inline: 12px; }
  .paper-stage { padding: 16px; }
  .paper { padding: 28px 18px; min-height: 200px; }
  .picker-results { max-height: 45vh; }
  .transport { padding-inline: 12px; gap: 6px; grid-template-columns: auto auto 1fr auto; }
  #bar-readout { display: none; }
  .catalog-shell { width: calc(100% - 32px); padding-top: 28px; }
  .catalog-lead { grid-template-columns: 1fr; gap: 20px; }
  .catalog-list article { grid-template-columns: 1fr auto; gap: 12px; }
  .catalog-list article > div { grid-column: 1/-1; }
  .embed-options article { grid-template-columns: 1fr; gap: 12px; }
  .embed-options article > :last-child { justify-self: start; }
}
@media(prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

:root[data-theme="light"] { color-scheme: light; --ground: #f2f4f8; --panel: #fff; --raised: #e4e9f1; --ink: #253249; --muted: #59677c; --line: #ccd4df; --blue: #285ea2; --code: #fafbfd; --code-ink: #253249; --red: #b42c3d; --green: #487222; --stage: #dfe5ed; --caution: #8a5810; --hover: #2532490b; }
.source-workspace { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr); }
.source-workspace.with-wiki { grid-template-columns: minmax(0,var(--editor-width,50%)) 6px minmax(0,1fr); }
.source-pane { border-right: 0; }
.splitter { background: var(--ground); border-inline: 1px solid var(--line); cursor: col-resize; touch-action: none; position: relative; z-index: 2; }
.splitter:hover, .splitter:focus-visible { background: var(--blue); }
.resizing { cursor: col-resize; user-select: none; }
.resizing iframe, .resizing canvas { pointer-events: none; }
.wiki-pane { min-width: 0; min-height: 0; display: grid; grid-template-rows: 44px minmax(0,1fr); background: var(--panel); }
.wiki-pane h2 { margin: 0; font-size: 13px; font-weight: 500; }
.wiki-pane iframe { width: 100%; height: 100%; border: 0; }
.wiki-pane a { font-size: 11px; white-space: nowrap; }
.page-controls { display: flex; flex-wrap: wrap; gap: 8px 12px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 11px; align-items: center; }
.page-controls label { display: flex; align-items: center; gap: 5px; }
.page-controls select { padding: 3px; max-width: 95px; color: var(--ink); background: var(--ground); border: 1px solid var(--line); }
.layout-notes { margin: 0; padding: 7px 14px; font-size: 12px; color: var(--muted); background: var(--panel); max-height: 72px; overflow: auto; }
/* theme.js stamps the opening view on the root before the first paint. Holding
   the page bar's own row open from that first layout — the real bar, merely not
   yet drawn, so its height is exact — keeps the stage where it is when the first
   paginated render arrives. The !important answers the global [hidden] rule. */
:root[data-score-view="pages"] .output-pane { grid-template-rows: 44px auto minmax(0,1fr) auto; }
:root[data-score-view="pages"] .page-controls[hidden] { display: flex !important; visibility: hidden; }
.with-wiki .source-pane .pane-bar { flex-wrap: wrap; padding-block: 5px; gap: 3px; }
.with-wiki .source-pane { grid-template-rows: auto minmax(0,1fr) auto; }
.with-wiki .source-pane .pane-actions { flex-wrap: wrap; }
@media(max-width: 760px) {
  .topbar { height: auto; min-height: 72px; }
  .workbench, .workbench.with-wiki { grid-template-columns: minmax(0,1fr); }
  #score-splitter { display: none; }
  .source-workspace.with-wiki { grid-template-columns: minmax(0,1fr); }
  #wiki-splitter { display: none; }
  .wiki-pane { height: 440px; }
  .source-pane .pane-actions { gap: 2px; }
  .source-pane .pane-bar { padding-inline: 8px; gap: 4px; }
  .auto-format { font-size: 11px; }
  .output-pane { height: 650px; }
  .workbench-footer { font-size: 10px; }
  .example-picker summary { padding-inline: 4px; }
}

.diagnostic-row { display:flex; gap:8px; align-items:start; padding:3px 0; }
.diagnostic-message { display:grid; gap:3px; width:100%; padding:0; border:0; background:none; color:inherit; text-align:left; font:inherit; }
.diagnostic-message:disabled { opacity:1; }
.diagnostic-message small { color:var(--muted); font:inherit; }
.diagnostic-row.error { color:var(--red); }
.diagnostic-row.caution { color:var(--caution); }
.dismiss-caution { border:0; background:none; color:var(--muted); font-size:18px; line-height:1; padding:4px; }
.restore-cautions { border:0; background:none; padding:4px 8px; color:var(--blue); font:inherit; text-decoration:underline; }

/* Document status shares the existing header; the removed example row gives
   its full 48px back to editing and engraving. */
.pane-bar > div.document-state { display: grid; gap: 1px; flex: 1; min-width: 0; }
#document-name, #engine-state { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#document-name { color: var(--ink); font-weight: 550; }
#engine-state { font-size: 10px; line-height: 1.2; }
.source-pane .pane-actions { flex-shrink: 0; }
.output-bar { gap: 8px; }
.output-bar > div:first-child { flex-shrink: 0; }
.output-bar .example-picker { margin-left: auto; }
.picker-popover { position: absolute; z-index: 30; right: 0; top: calc(100% + 8px); width: min(420px,calc(100vw - 24px)); padding: 12px; border: 1px solid #586170; border-radius: 6px; background: var(--panel); }
@media(max-width: 760px) {
  .output-bar { padding-inline: 8px; gap: 4px; }
  .output-bar .example-picker { position: static; }
  .output-bar { position: relative; }
  .output-bar .picker-popover { right: 8px; width: calc(100% - 16px); }
}

.site-credit { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.site-credit a { color: inherit; }


/* ── Shell continuity between Explore and About ────────────────────────────
   Both pages ship the same top bar markup and metrics. Where the browser
   supports cross-document view transitions the bar and the wordmark are the
   same box either side of the navigation, so moving between the two reads as
   one place rather than two documents. Everywhere else it is an ordinary
   navigation and nothing is lost.                                          */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
.wordmark { view-transition-name: wordmark; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ── About ─────────────────────────────────────────────────────────────────
   One page, scrolled. Full-bleed bands alternate ground so each section reads
   as its own place, and the composition inside a band follows what its copy
   actually is: prose, two pillars, route cards, a roadmap, or prose beside a
   real engraving. Georgia carries the writing; the interface sans carries
   everything that is not his voice.                                        */

.about-page {
  --wrap: 1360px;
  --pad: clamp(20px, 4vw, 56px);
  --measure: 64ch;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --sheet: var(--paper);
}
.about-page main { display: block; }
.band-inner { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }

/* Jump bar */
.jumpbar { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: var(--ground); }
.jumpbar-inner { display: flex; gap: 4px; max-width: var(--wrap); margin: 0 auto; padding: 8px var(--pad); overflow-x: auto; scrollbar-width: none; }
.jumpbar-inner::-webkit-scrollbar { display: none; }
.jumpbar a { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 9px; padding: 6px 12px 6px 8px; border: 1px solid transparent; color: var(--muted); font-size: 12.5px; text-decoration: none; white-space: nowrap; }
.jumpbar b { display: grid; place-items: center; width: 21px; height: 19px; border: 1px solid var(--line); font: 500 10.5px/1 var(--sans); }
.jumpbar a:hover { color: var(--ink); border-color: var(--line); }
.jumpbar a[aria-current="true"] { color: var(--ink); border-color: var(--line); }
.jumpbar a[aria-current="true"] b { border-color: var(--ink); background: var(--ink); color: var(--ground); }

/* Bands */
.band { padding-block: clamp(3.25rem, 6vw, 5.5rem); border-top: 1px solid var(--line); scroll-margin-top: 52px; }
.band-alt { background: var(--panel); }
.band-open { padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 0; }
.band-head { display: flex; align-items: baseline; gap: clamp(14px, 1.6vw, 22px); margin-bottom: clamp(1.8rem, 3vw, 2.6rem); padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.band-head .mark { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 34px; border: 1px solid var(--line); color: var(--muted); font: 500 15px/1 var(--sans); font-style: normal; }
.about-page h2 { margin: 0; color: var(--ink); font: 500 clamp(26px, 3vw, 38px)/1.1 var(--serif); letter-spacing: -.015em; }

/* Opening band */
.open-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.about-page h1 { margin: 0; max-width: 15ch; color: var(--ink); font: 400 clamp(38px, 5.6vw, 74px)/1.03 var(--serif); letter-spacing: -.022em; }
.about-page .lead { max-width: 52ch; margin: clamp(18px, 2vw, 26px) 0 0; color: var(--ink); font: 400 clamp(18px, 1.5vw, 21px)/1.6 var(--serif); }

.idcard { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 20px; align-content: start; }
.about-page .portrait { position: relative; grid-column: 1; grid-row: 1 / span 4; display: grid; place-items: center; aspect-ratio: 1; border: 1px solid var(--line); background: var(--ground); overflow: hidden; }
.band-alt .portrait { background: var(--panel); }
.portrait-staff { position: absolute; left: 0; right: 0; top: 50%; height: 41px; transform: translateY(-50%); color: var(--line); background: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 10px); }
.portrait-monogram { position: relative; padding: 0 .18em; background: var(--ground); color: var(--ink); font: 400 34px/1 var(--serif); letter-spacing: .04em; }
.band-alt .portrait-monogram { background: var(--panel); }
/* Drop a portrait at src/about/brandon.jpg and it covers the plate. Absent, the
   background simply does not paint and the monogram stands in. */
.portrait-photo { position: absolute; inset: 0; background: url("/about/brandon.jpg") center/cover no-repeat; }
.rail-name, .rail-role, .rail-site, .rail-status { grid-column: 2; margin: 0; }
.rail-name { color: var(--ink); font: 600 17px/1.3 var(--sans); }
.rail-role { margin-top: 4px; color: var(--muted); font-size: 13.5px; }
.rail-site { margin-top: 10px; font-size: 13.5px; }
.rail-site a { color: var(--blue); text-decoration: none; border-bottom: 1px solid transparent; }
.rail-site a:hover { border-bottom-color: currentColor; }
.rail-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 5px 11px 5px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; justify-self: start; }
.rail-status span { width: 6px; height: 6px; border-radius: 50%; background: var(--caution); }
.rail-credits { max-width: var(--measure); margin: 2.4rem 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font: 400 11.5px/1.65 var(--sans); }

/* Prose */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.15em; }
.prose > h3 + * { margin-top: .75em; }
.prose > * + h3 { margin-top: 2em; }
.about-page .prose p { margin: 0; color: var(--ink); font: 400 clamp(17px, 1.15vw, 18.5px)/1.75 var(--serif); }
.about-page .prose h3, .pillar h3 { margin: 0; color: var(--ink); font: 600 clamp(17px, 1.4vw, 19px)/1.35 var(--serif); }
.about-page .list { margin: 0; padding-left: 1.1em; display: grid; gap: .6em; }
.about-page .list li { color: var(--ink); font: 400 clamp(16.5px, 1.1vw, 18px)/1.65 var(--serif); }
.about-page .list li::marker { color: var(--muted); }
.about-page code { padding: .1em .34em; border: 1px solid var(--line); border-radius: 3px; background: var(--hover); font: 500 .86em/1 var(--mono); }
.about-page .aside { padding-left: 20px; border-left: 2px solid var(--line); color: var(--muted); }
.about-page .warn { display: flex; gap: .7em; color: var(--caution); }
.about-page .warn::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-top: .62em; border-radius: 50%; background: currentColor; }
.prose-after { margin-top: clamp(1.8rem, 3vw, 2.4rem); }

/* Two pillars */
.pillars { display: grid; gap: clamp(1.6rem, 3vw, 3rem); }
.pillar p { margin: 0; max-width: 44ch; color: var(--ink); font: 400 clamp(17px, 1.1vw, 18px)/1.72 var(--serif); }
.pillar strong { display: block; margin-bottom: .5em; color: var(--ink); font-weight: 600; }

/* Prose beside a real engraving */
.two-up { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.two-up .prose { max-width: 56ch; }

.example { margin: 0; display: grid; gap: 0; align-items: stretch; }
.example-source { min-width: 0; padding: 18px 20px; border: 1px solid var(--line); background: var(--code); overflow-x: auto; }
.example-source pre { margin: 0; }
.example-source code { padding: 0; border: 0; border-radius: 0; background: none; color: var(--code-ink); font: 400 12.5px/1.7 var(--mono); white-space: pre; }
.example-paper { padding: clamp(14px, 1.6vw, 24px); border: 1px solid var(--line); border-top: 0; background: var(--sheet); }
.example-paper img { display: block; width: 100%; height: auto; }
.example figcaption { margin-top: 12px; max-width: 58ch; color: var(--muted); font: 400 12.5px/1.6 var(--sans); }
.example-wide { margin-top: clamp(2.5rem, 4vw, 3.5rem); }

/* Get started */
.routes { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); }
.route { display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 1.8vw, 24px); background: var(--ground); }
.band-alt .route { background: var(--panel); }
.route-status { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: var(--muted); font: 500 11.5px/1 var(--sans); }
.route-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.route-live .route-status { color: var(--green); }
.route-prealpha .route-status { color: var(--caution); }
.route-planned .route-status { color: var(--muted); }
.route-planned { opacity: .82; }
.route-title { margin: 0; color: var(--ink); font: 600 clamp(16px, 1.2vw, 18px)/1.3 var(--serif); }
.route-line { margin: 0; flex: 1; color: var(--muted); font: 400 14px/1.6 var(--sans); }
.route-line a, .route-cta { color: var(--blue); text-decoration: none; border-bottom: 1px solid transparent; }
.route-cta { align-self: start; font: 500 13px/1 var(--sans); padding-bottom: 3px; border-bottom-color: color-mix(in srgb, var(--blue) 45%, transparent); }
.route-cta:hover, .route-line a:hover { border-bottom-color: currentColor; }

/* Roadmap */
.roadmap { display: grid; gap: clamp(1.8rem, 3vw, 2.6rem); margin-top: clamp(2rem, 3vw, 2.8rem); }
.rm-col h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--ink); font: 600 13px/1 var(--sans); letter-spacing: .01em; }
.rm-col h3 span { margin-left: auto; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.rm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.rm-landed .rm-dot { background: var(--green); }
.rm-building .rm-dot { background: var(--caution); }
.rm-planned .rm-dot { background: var(--muted); }
.rm-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.rm-col li { padding: 11px 0; border-bottom: 1px solid var(--line); }
.rm-col li:last-child { border-bottom: 0; }
.rm-item { margin: 0; color: var(--ink); font: 500 14.5px/1.4 var(--sans); }
.rm-line { margin: 4px 0 0; color: var(--muted); font: 400 13px/1.55 var(--sans); }
.rm-source { display: inline-block; margin-top: 6px; color: var(--muted); font: 400 11.5px/1.5 var(--mono); overflow-wrap: anywhere; }
a.rm-source { color: var(--blue); text-decoration: none; border-bottom: 1px solid transparent; }
a.rm-source:hover { border-bottom-color: currentColor; }
.rm-planned li { opacity: .85; }

/* Footer */
.about-footer { padding-block: clamp(2.4rem, 4vw, 3.4rem) clamp(3rem, 5vw, 4.5rem); border-top: 1px solid var(--line); }
.about-page .about-links { display: flex; flex-wrap: wrap; gap: 14px 30px; margin: 0 0 22px; font-size: 14px; }
.about-page .about-links a { padding-bottom: 2px; border-bottom: 1px solid transparent; color: var(--blue); text-decoration: none; }
.about-page .about-links a:hover { border-bottom-color: currentColor; }
.about-footer p { max-width: var(--measure); margin: 0; color: var(--muted); font: 400 13.5px/1.7 var(--sans); }
.about-footer a { color: inherit; }

@media (min-width: 720px) {
  .routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roadmap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .idcard { grid-template-columns: 132px minmax(0, 1fr); }
  .portrait-monogram { font-size: 38px; }
}

@media (min-width: 1000px) {
  .open-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: end; }
  .two-up { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .example-wide { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
  .example-wide .example-paper { border-top: 1px solid var(--line); border-left: 0; }
  .example-wide figcaption { grid-column: 1 / -1; }
  .routes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .routes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .band-head { align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .about-page * { transition: none !important; }
  html { scroll-behavior: auto; }
}