/* ---- fonts/fonts.css from the Outlying Audio design system, every file embedded as a data: URI ---- */
/* Outlying Audio — @font-face rules with paths relative to this file, for previews and pages that link it directly. Same files as tokens.json type.fonts. */
@font-face { font-family: "Kaushan Script"; src: url("fonts/KaushanScript-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Outlying Panel Sans"; src: url("fonts/OutlyingPanelSans.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Outlying Panel Sans"; src: url("fonts/OutlyingPanelSans-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "DejaVu Sans"; src: url("fonts/DejaVuSans.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DejaVu Sans"; src: url("fonts/DejaVuSans-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "DejaVu Sans Condensed"; src: url("fonts/DejaVuSansCondensed-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "DejaVu Math TeX Gyre"; src: url("fonts/DejaVuMathTeXGyre.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("fonts/CourierPrime-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DejaVu Serif"; src: url("fonts/DejaVuSerif.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DejaVu Serif"; src: url("fonts/DejaVuSerif-Italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "DejaVu Serif"; src: url("fonts/DejaVuSerif-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }



/* ---- tokens.json from the design system, as CSS variables ---- */
:root {
  --ground: #000000;
  --ground-raised: #0e0e0e;
  --hairline: #2c2c2c;
  --hairline-print: #404040;
  --gold: #d4af37;
  --gold-highlight: #e4c862;
  --gold-shade: #c6a11f;
  --on-gold: #000000;
  --ink: #eeeeee;
  --ink-soft: #d4d4d4;
  --ink-muted: #aaaaaa;
  --panel-edge: #d0d2cd;
  --fr4-window: #b2a783;
  --jack-input: #1a1c17;
  --jack-special: #a32421;
  --led-red: #c51605;
  --led-red-halo: #faa8a6;
  --led-yellow: #f9e409;
  --led-yellow-halo: #fef9d2;
  --led-green: #14b626;
  --led-green-halo: #b9f5be;
  --led-blue: #0658e1;
  --led-blue-halo: #c3c7f6;
  --led-pink: #ff94af;
  --led-pink-halo: #ffe0e8;
  --led-white: #d2d1d1;
  --led-white-halo: #ffffff;
  --led-bipolar-mix: #d864ff;
  --led-bipolar-mix-halo: #e4a4ff;
  --lens-pink: #ffe4f1;
  --lens-pink-edge: #ffc4e1;
  --lens-green: #d2ffd3;
  --lens-green-edge: #96ff97;
  --lens-yellow: #ffffd2;
  --lens-yellow-edge: #ffff94;
  --lens-white: #ffffff;
  --lens-white-edge: #d2d1d1;
  --lens-red: #ffe0de;
  --lens-red-edge: #ffa59e;
  --lens-blue: #e0e6ff;
  --lens-blue-edge: #a9b9ff;
  --qr-black: #000001;
  --qr-ground: #ffffff;
  --sea-night: #020a14;
  --sea-deep: #04101f;
  --sea: #0a2440;
  --sea-crest: #143a63;
  --foam: #e8edf1;
  --moonlight: #b9c7d8;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 112px;
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-pill: 999px;
  --font-brush: "Kaushan Script", cursive;
  --font-sans: "DejaVu Sans", Verdana, sans-serif;
  --font-panel: "Outlying Panel Sans", "DejaVu Sans", sans-serif;
  --font-condensed: "DejaVu Sans Condensed", "DejaVu Sans", sans-serif;
  --font-numeral: "DejaVu Math TeX Gyre", "DejaVu Serif", serif;
  --font-telegram: "Courier Prime", "Courier New", monospace;
  --font-serif: "DejaVu Serif", Georgia, serif;
}


/* ---- components/bundle.css from the design system, unchanged ---- */
/* Outlying Audio — component styles. Values come from tokens.css (var(--…)); nothing here re-declares a token. */

.oa { background: var(--ground); color: var(--ink); font-family: var(--font-serif); font-size: 16px; line-height: 26px; -webkit-font-smoothing: antialiased; }
.oa *, .oa *::before, .oa *::after { box-sizing: border-box; }
.oa-panel { font-family: var(--font-panel); text-transform: uppercase; letter-spacing: .03em; }
.oa-numeral { font-family: var(--font-numeral); }
.oa-gold { color: var(--gold); }
.oa-muted { color: var(--ink-muted); }
.oa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.oa-tagline { font-family: var(--font-serif); font-size: 22px; line-height: 32px; letter-spacing: .01em; color: var(--ink-soft); }
.oa-heading { font-family: var(--font-panel); text-transform: uppercase; letter-spacing: .1em; font-size: 28px; line-height: 34px; font-weight: 400; color: var(--ink); margin: 0 0 var(--space-4); }
.oa-section { font-family: var(--font-panel); text-transform: uppercase; letter-spacing: .1em; font-size: 15px; line-height: 20px; font-weight: 400; color: var(--ink); margin: 0 0 var(--space-4); }
.oa-note { font-size: 13px; line-height: 20px; color: var(--ink-muted); margin: 0 0 var(--space-4); max-width: 60em; }
.oa-cap { font-size: 12px; line-height: 18px; color: var(--ink-muted); margin-top: var(--space-2); }

/* ---------- Figures (logo lockups) ---------- */
.oa-fig { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-4); padding: var(--space-6); background: var(--ground); outline: 1px solid var(--hairline); }
.oa-fig__art { display: flex; align-items: center; justify-content: center; min-height: 150px; }
.oa-fig figcaption { font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.oa-fig--light { background: var(--ink); outline: none; }
.oa-fig--light figcaption { color: var(--ground); }

/* ---------- Buttons and links: pills, like the slots cut in the panels ---------- */
.oa-btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-panel); text-transform: uppercase; letter-spacing: .08em; font-size: 14px; line-height: 16px; padding: 13px 24px; border: 2px solid var(--gold); border-radius: var(--radius-pill); background: var(--gold); color: var(--on-gold); text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.oa-btn:hover { background: var(--gold-highlight); border-color: var(--gold-highlight); }
.oa-btn--ghost { background: transparent; color: var(--gold); }
.oa-btn--ghost:hover { background: transparent; color: var(--gold-highlight); }
.oa-btn:focus-visible, .oa-link:focus-visible, .oa-nav a:focus-visible, .oa-rack__mod:focus-visible, .oa-manifest__row:focus-visible, .oa-shore__dot:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.oa-btn[disabled] { background: transparent; border-color: var(--hairline); color: var(--ink-muted); cursor: not-allowed; }
.oa-link { color: var(--gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.oa-link:hover { color: var(--gold-highlight); }

/* ---------- Telegram: dispatches from the island. Plain text on the ground: no card, no rule, no cursor ---------- */
.oa-telegram { font-family: var(--font-telegram); font-size: clamp(18px, 2.2vw, 23px); line-height: 1.5; color: var(--ink); text-transform: uppercase; letter-spacing: .02em; min-height: 4.5em; }
.oa-telegram--plain { text-transform: none; letter-spacing: 0; color: var(--ink-soft); font-size: 19px; line-height: 26px; min-height: 0; }

/* ---------- Site header ---------- */
.oa-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--hairline); }
.oa-header__logo { display: block; line-height: 0; }
/* current page: a thin gold squircle, like the section outlines on Ngong Ping's panel (default) ... */
.oa-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.oa-nav a { font-family: var(--font-panel); text-transform: uppercase; letter-spacing: .08em; font-size: 14px; line-height: 16px; color: var(--ink); text-decoration: none; padding: 5px 13px; border: 1.5px solid transparent; border-radius: 13px; corner-shape: squircle; }
.oa-nav a:hover { color: var(--gold); }
.oa-nav a[aria-current="page"] { border-color: var(--gold); color: var(--ink); }
/* ... or, as an alternative, a gold line under a gold label */
.oa-nav--line { gap: var(--space-5); }
.oa-nav--line a { padding: 6px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; }
.oa-nav--line a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }
@media (max-width: 520px) { .oa-nav a { font-size: 12.5px; letter-spacing: .06em; padding: 4px 9px; } .oa-nav--line a { padding: 4px 0; } }

/* ---------- Module hero ---------- */
.oa-hero { display: grid; grid-template-columns: auto 1fr; gap: var(--space-8); align-items: center; padding: var(--space-8) var(--space-6); }
.oa-hero__panel { height: 460px; width: auto; display: block; }
.oa-hero__kicker { font-family: var(--font-panel); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; line-height: 16px; color: var(--ink-muted); }
.oa-hero__name { font-family: var(--font-brush); font-size: 80px; line-height: 88px; color: var(--ink); margin: var(--space-2) 0 0; font-weight: 400; }
.oa-hero__descriptor { font-family: var(--font-panel); text-transform: uppercase; letter-spacing: .03em; font-size: 15px; line-height: 18px; color: var(--ink); margin-top: var(--space-1); }
.oa-hero__lead { font-size: 19px; line-height: 30px; max-width: 34em; margin: var(--space-6) 0 var(--space-5); }
.oa-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
@media (max-width: 760px) { .oa-hero { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-6) var(--space-4); } .oa-hero__panel { height: 60vh; } }

/* ---------- Module navigation: rack, shoreline, manifest ---------- */
.oa-rack { overflow-x: auto; padding-bottom: 28px; }
.oa-rack__row + .oa-rack__row { margin-top: var(--space-3); }
.oa-rack__row { display: flex; gap: 1px; align-items: flex-start; min-width: max-content; }
.oa-rack__mod { position: relative; display: block; flex: none; transition: transform .2s ease, filter .2s ease; filter: brightness(.82); }
.oa-rack__mod:hover, .oa-rack__mod:focus-visible { filter: none; transform: translateY(-4px); }
.oa-rack__name { position: absolute; left: 50%; top: calc(100% + 14px); transform: translateX(-50%); white-space: nowrap; font-family: var(--font-brush); font-size: 22px; line-height: 24px; color: var(--ink); opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.oa-rack__mod:hover .oa-rack__name, .oa-rack__mod:focus-visible .oa-rack__name { opacity: 1; }
.oa-shore { display: grid; grid-template-columns: auto 1fr; gap: var(--space-6); align-items: center; }
.oa-shore__dots { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }
.oa-shore__dot { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid transparent; border-radius: var(--radius-pill); background: transparent; cursor: pointer; opacity: .45; transition: opacity .2s ease; }
.oa-shore__dot:hover, .oa-shore__dot.is-on { opacity: 1; }
.oa-shore__dot.is-on { border-color: var(--gold); }
.oa-manifest { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gold); }
.oa-manifest__row { display: grid; grid-template-columns: 56px minmax(140px, 1.1fr) 2fr 56px; align-items: center; gap: var(--space-4); padding: 10px 4px; border-bottom: 1px solid var(--hairline); color: inherit; text-decoration: none; }
.oa-manifest__row:hover, .oa-manifest__row.is-on { background: var(--ground-raised); }
.oa-manifest__group { font-family: var(--font-panel); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; line-height: 14px; color: var(--ink-muted); padding: 22px 6px 8px; list-style: none; }
button.oa-manifest__row { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--hairline); text-align: left; font: inherit; cursor: pointer; }
/* the index: manifest beside a sticky preview of the row in focus */
.oa-index { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; }
.oa-index__preview { position: sticky; top: 24px; align-self: start; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; }
.oa-index__preview img { height: min(520px, 70vh); width: auto; display: block; }
.oa-index__name { font-family: var(--font-brush); font-size: 48px; line-height: 52px; margin: 0; font-weight: 400; }
.oa-index__desc { font-family: var(--font-panel); text-transform: uppercase; letter-spacing: .05em; font-size: 13px; line-height: 16px; margin-top: 6px; }
.oa-index__text { font-size: 15px; line-height: 24px; color: var(--ink-soft); }
@media (max-width: 860px) { .oa-index { grid-template-columns: 1fr; } .oa-index__preview { display: none; } .oa-manifest__row { grid-template-columns: 40px minmax(0, 1fr) 44px; } .oa-manifest__desc { grid-column: 2; grid-row: 2; margin-top: -6px; } .oa-manifest__hp { grid-column: 3; grid-row: 1; } }
/* short list: a gold label in capitals and one line of text, on hairlines. Any content: shows, news, changes. */
.oa-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.oa-list li { display: grid; grid-template-columns: minmax(120px, 11em) minmax(0, 1fr); gap: var(--space-4); padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.oa-list__label { font-family: var(--font-panel); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; line-height: 24px; color: var(--gold); }
.oa-list__text { font-size: 16px; line-height: 24px; color: var(--ink-soft); }
@media (max-width: 520px) { .oa-list li { grid-template-columns: 1fr; gap: 2px; } }
.oa-manifest__icon { display: grid; place-items: center; }
.oa-manifest__name { font-family: var(--font-brush); font-size: 30px; line-height: 36px; }
.oa-manifest__desc { font-family: var(--font-panel); text-transform: uppercase; letter-spacing: .04em; font-size: 13px; line-height: 16px; color: var(--ink-soft); }
.oa-manifest__hp { font-family: var(--font-numeral); font-size: 18px; text-align: right; color: var(--ink); }
.oa-manifest__hp small { font-family: var(--font-panel); font-size: 11px; margin-left: 2px; color: var(--ink-muted); text-transform: uppercase; }

/* ---------- Night sea and footer ---------- */
.oa-sea { display: block; width: 100%; height: clamp(150px, 27vh, 270px); }
.oa-footer { background: var(--ground); padding: 20px var(--space-6) 28px; display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.oa-footer__mail { font-family: var(--font-serif); color: var(--ink-muted); font-size: 15px; user-select: all; }
:root { --oa-sea-h: clamp(150px, 27vh, 270px); }
.oa-sea-fixed { position: fixed; left: 0; right: 0; bottom: var(--oa-sea-bottom, 0px); width: 100%; height: var(--oa-sea-h); pointer-events: none; display: none; }
.oa-sea-fixed--back { z-index: 0; } .oa-sea-fixed--front { z-index: 5; }
body[data-sea="fixed"] .oa-sea-fixed--front, body[data-sea="fixed"][data-meet="back"] .oa-sea-fixed--back, body[data-sea="fixed"][data-meet="front"] .oa-sea-fixed--back { display: block; }
body[data-sea="fixed"] .oa-sea { display: none; }
body[data-sea="fixed"] { padding-bottom: calc(var(--oa-sea-h) * .6 + var(--oa-sea-bottom, 0px)); }
body[data-sea="fixed"][data-meet="behind"] { padding-bottom: calc(var(--oa-sea-h) * .85 + var(--oa-sea-bottom, 0px)); }
body[data-sea="fixed"][data-foot="below"] .oa-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; }
/* ---------- Night weather: one fixed, transparent layer behind everything ---------- */
.oa-weather { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }

/* ---------- Manual ---------- */
.oa-page { background: var(--ground); color: var(--ink); font-family: var(--font-serif); font-size: 14px; line-height: 22px; }
.oa-cover { position: relative; background: var(--ground); flex: none; box-shadow: 0 0 0 1px var(--hairline); }
.oa-table { width: 100%; border-collapse: collapse; font-family: var(--font-serif); font-size: 14px; line-height: 20px; }
.oa-table th { text-align: left; font-family: var(--font-panel); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; line-height: 14px; font-weight: 400; color: var(--ink-muted); padding: 0 var(--space-3) var(--space-3) 0; border-bottom: 1px solid var(--gold); }
.oa-table td { padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: 1px solid var(--hairline); vertical-align: middle; color: var(--ink); }
.oa-table tbody tr:first-child td { padding-top: 18px; }
.oa-table td.oa-label-cell { font-family: var(--font-panel); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.oa-table .todo { color: var(--ink-muted); font-style: italic; }
.oa-sym { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 44px; vertical-align: middle; }
.oa-sym svg { display: block; }
.oa-normal-mini { display: inline-block; vertical-align: -3px; margin-right: 4px; }

.oa-callout { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
.oa-callout svg { width: 20px; height: auto; fill: var(--gold); margin-top: 2px; }
.oa-callout__title { font-family: var(--font-brush); font-size: 22px; line-height: 26px; color: var(--gold); margin-bottom: var(--space-1); }
.oa-patchname { font-family: var(--font-brush); font-size: 30px; line-height: 38px; color: var(--ink); margin-bottom: var(--space-3); }

.oa-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.oa-steps li { counter-increment: step; display: grid; grid-template-columns: 32px 1fr; gap: var(--space-3); padding: var(--space-2) 0; }
.oa-steps li::before { content: counter(step); font-family: var(--font-panel); font-size: 13px; line-height: 21px; width: 24px; height: 24px; border: 1.5px solid var(--gold); border-radius: var(--radius-pill); color: var(--gold); text-align: center; }

/* ---------- Panel parts and grammar ---------- */
.oa-partgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-5) var(--space-4); }
.oa-partcell { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.oa-partcell__art { height: 80px; display: flex; align-items: center; justify-content: flex-start; }
.oa-partcell figcaption { display: flex; flex-direction: column; font-size: 12px; line-height: 17px; color: var(--ink-muted); }
.oa-partcell figcaption .oa-panel, .oa-jm figcaption .oa-panel, .oa-fig2 figcaption .oa-panel { font-size: 12px; color: var(--ink); }
.oa-jm, .oa-fig2 { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.oa-jm figcaption, .oa-fig2 figcaption { display: flex; flex-direction: column; font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.oa-keyrow { display: flex; gap: var(--space-6); flex-wrap: wrap; justify-content: center; font-size: 12px; line-height: 18px; color: var(--ink-muted); margin-top: var(--space-4); }
.oa-keyrow span { display: inline-flex; align-items: center; gap: var(--space-2); }

.oa-led { display: inline-block; width: 30px; height: 15px; border-radius: var(--radius-pill); background: var(--fr4-window); }
.oa-led--round { width: 13px; height: 13px; }
.oa-led.is-red { background: linear-gradient(135deg, var(--led-red-halo), var(--led-red)); box-shadow: var(--glow-red); }
.oa-led.is-yellow { background: linear-gradient(135deg, var(--led-yellow-halo), var(--led-yellow)); box-shadow: var(--glow-yellow); }
.oa-led.is-green { background: linear-gradient(135deg, var(--led-green-halo), var(--led-green)); box-shadow: var(--glow-green); }
.oa-led.is-blue { background: linear-gradient(135deg, var(--led-blue-halo), var(--led-blue)); box-shadow: var(--glow-blue); }
.oa-led.is-bipolar { background: linear-gradient(135deg, var(--led-bipolar-mix-halo), var(--led-bipolar-mix)); box-shadow: var(--glow-bipolar-mix); }
.oa-led.is-pink { background: linear-gradient(135deg, var(--led-pink-halo), var(--led-pink)); box-shadow: var(--glow-pink); }
.oa-led.is-white { background: linear-gradient(135deg, var(--led-white-halo), var(--led-white)); box-shadow: 0 0 14px 3px rgba(255,255,255,.4); }
/* An LED seen directly through a hole: a paler lens, radial from the centre (Express) */
.oa-lens { display: inline-block; width: 15px; height: 15px; border-radius: 50%; }
.oa-lens.is-red { background: radial-gradient(circle, var(--lens-red) 0%, var(--lens-red-edge) 75%); }
.oa-lens.is-yellow { background: radial-gradient(circle, var(--lens-yellow) 0%, var(--lens-yellow-edge) 75%); }
.oa-lens.is-green { background: radial-gradient(circle, var(--lens-green) 0%, var(--lens-green-edge) 75%); }
.oa-lens.is-blue { background: radial-gradient(circle, var(--lens-blue) 0%, var(--lens-blue-edge) 75%); }
.oa-lens.is-pink { background: radial-gradient(circle, var(--lens-pink) 0%, var(--lens-pink-edge) 75%); }
.oa-lens.is-white { background: radial-gradient(circle, var(--lens-white) 0%, var(--lens-white-edge) 100%); }




/* ---- this page ---- */
:root {
  /* rack scale, px per panel millimetre: at most 2.6, smaller on short screens so the whole rack (171 mm of rows) clears the sea, never below 1.6 */
  /* space above the first headline: 56 px on an 800 px-high screen, growing with the screen height up to 120 px (balances the opening view) */
  --top-space: clamp(56px, calc(56px + (100vh - 800px) * .5), 120px);
  --mm: max(1.6px, min(2.6px, calc((100vw - 64px) / 425), calc((100vh - var(--oa-sea-h) - var(--top-space) - 187px) / 172)));
  --oa-sea-h: clamp(110px, 21vh, 240px);                /* night sea height (design system default: clamp(150px, 27vh, 270px)) */
  --hmm: 3.6px;                                         /* module info scale */
  color-scheme: dark;
}
html { background: var(--ground); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ground); }
[hidden] { display: none !important; }

.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 7; display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); padding: 16px 32px 30px; background: linear-gradient(to bottom, var(--ground) 0, var(--ground) 70%, rgba(0,0,0,0)); pointer-events: none; }
.site-header > * { pointer-events: auto; }
/* logo: the full lockup when it fits beside the menu, else the island alone, else the island and a menu button */
.site-logo { display: block; line-height: 0; flex: none; }
.site-logo img { display: block; height: 28px; width: auto; max-width: none; }
.site-header[data-mode="full"] .logo-island, .site-header:not([data-mode="full"]) .logo-full { display: none; }
.nav-toggle { display: none; width: 44px; height: 44px; margin: -8px -10px -8px 0; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle:hover { color: var(--gold); }
.nav-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.site-header[data-mode="burger"] .nav-toggle { display: inline-flex; }
.site-header[data-mode="burger"] .site-nav { display: none; position: absolute; top: calc(100% - 22px); right: 16px; flex-direction: column; align-items: stretch; gap: 4px; padding: 10px; background: var(--ground); border: 1px solid var(--hairline); }
.site-header[data-mode="burger"].is-open .site-nav { display: flex; }
.site-header[data-mode="burger"] .site-nav a { padding: 12px 16px; font-size: 14px; }
.nav-measure { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none !important; flex-wrap: nowrap; white-space: nowrap; }
.oa-nav a[aria-current="location"] { border-color: var(--gold); color: var(--ink); }
.oa-nav a:not([href]) { cursor: default; }

.site-main { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: calc(var(--header-h, 76px) + var(--top-space)) 32px 96px; }
/* the opening line, as a telegram (Courier Prime capitals, typed in) */
#modules { margin-top: 0; scroll-margin-top: calc(var(--header-h, 76px) + var(--top-space)); }
#modules-h { margin-bottom: 44px; }   /* room for a hovered 1U module's name between the headline and the rack */
.site-section { margin-top: var(--space-8); scroll-margin-top: 120px; }
/* sections divided by a hairline, with generous space either side (as in the module-index study) */
.ruled { margin-top: 96px; padding-top: 112px; }   /* section spacing (the dividing lines are gone; the space is unchanged) */
.site-section.ruled { scroll-margin-top: 40px; }

/* The rack is not a scroll area where it fits its column: names and enlarged modules simply overlap the space around it.
   Only where it is wider than its column (phones) does it scroll, and then sideways only; its padding holds the names. */
.rack { overflow: visible; }
.rack.is-scroll { overflow-x: auto; overflow-y: hidden; padding: 40px 6px 44px; margin: -40px -6px -44px; }   /* the padding holds the names without adding to the section spacing */
.rack-row { display: flex; gap: 1px; align-items: flex-start; min-width: max-content; }
.rack-row + .rack-row { margin-top: 1px; }   /* the same as the gap between modules */
.rack-mod { position: relative; z-index: 1; display: block; flex: none; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; filter: brightness(.78); transition: transform .2s ease, filter .2s ease; }
.rack-mod img { display: block; width: 100%; height: 100%; max-width: none; }
.rack-mod:hover, .rack-mod:focus-visible, .rack-mod.is-on { filter: none; transform: scale(1.03); z-index: 3; }
.rack-mod.is-on { z-index: 2; }
.rack-name { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-brush); font-size: 21px; line-height: 24px; color: var(--ink); opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.rack-row:first-child .rack-name { bottom: calc(100% + 7px); }    /* 1U row: name above */
.rack-row:last-child .rack-name { top: calc(100% + 7px); }        /* 3U row: name below, as close as the 1U names */
.rack-mod:hover .rack-name, .rack-mod:focus-visible .rack-name { opacity: 1; }
.rack-mod:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.rack-mod.is-on::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -6px; height: 2px; background: var(--gold); }
.rack-row:first-child .rack-mod.is-on::after { bottom: auto; top: -6px; }    /* 1U row: bar above, clear of the 3U row */
.rack-mod.is-on:hover::after, .rack-mod.is-on:focus-visible::after { opacity: 0; }   /* the name takes the bar's place */
/* the module under the pointer (or the selected one), read out below the whole rack */
/* the hint under the rack: "Click" where there is a mouse, "Tap" on touch screens */
.rack-hint { margin: 46px 0 0; font-family: var(--font-panel); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.hint-tap { display: none; }
@media (hover: none) { .hint-click { display: none; } .hint-tap { display: inline; } }
.rack-readout { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; min-height: 52px; margin-top: 4px; }
.rack-readout__name { font-family: var(--font-brush); font-size: 40px; line-height: 48px; color: var(--ink); }
.rack-readout__desc { font-family: var(--font-panel); text-transform: uppercase; letter-spacing: .05em; font-size: 15px; line-height: 18px; color: var(--ink); }
.rack-readout__dims { font-family: var(--font-serif); font-size: 18px; line-height: 24px; color: var(--ink-muted); }
/* coming modules: existing panel art with every colour turned grey; not selectable */
.rack-ghost { position: relative; flex: none; }
.rack-ghost img { display: block; width: 100%; height: 100%; max-width: none; }

.mod { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.mod-panel { display: block; max-width: none; }
.mod-panel[hidden], .mod-x[hidden] { display: none; }
.mod-panels { display: flex; align-items: flex-start; gap: 2px; }   /* a module and its expander, side by side as in a case */
.mod-x { margin: 0 0 var(--space-4); }
.mod-x__head { margin: 0 0 4px; font-family: var(--font-panel); font-weight: normal; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; line-height: 20px; color: var(--ink); }
.mod-x__text { margin: 0; font-family: var(--font-serif); font-size: 16px; line-height: 26px; color: var(--ink-soft); max-width: 36em; }
.mod .oa-hero__lead { margin: var(--space-5) 0 var(--space-3); }
/* paragraphs and lists inside module texts */
.oa-hero__lead p, .mod-x__text p { margin: 0 0 .7em; }
.oa-hero__lead ol, .oa-hero__lead ul, .mod-x__text ol, .mod-x__text ul { margin: 0 0 .7em; padding-left: 1.5em; }
.oa-hero__lead li, .mod-x__text li { margin: 0 0 .45em; padding-left: .2em; }
.oa-hero__lead li::marker, .mod-x__text li::marker { color: var(--gold); font-family: var(--font-panel); }
.oa-hero__lead > :last-child, .mod-x__text > :last-child, .oa-hero__lead li:last-child, .mod-x__text li:last-child { margin-bottom: 0; }
.mod-spec { display: flex; flex-wrap: wrap; gap: 6px 32px; margin: 0; }
.mod-spec div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.mod-spec dd .nw { white-space: nowrap; }   /* wrap between words, never at the hyphen */
.mod-spec dt { font-family: var(--font-panel); text-transform: uppercase; letter-spacing: .08em; font-size: 14px; line-height: 20px; color: var(--ink); }
.mod-spec dd { margin: 0; font-family: var(--font-serif); font-size: 16px; line-height: 24px; color: var(--ink-soft); }
.mod .oa-hero__actions { align-items: center; }
.bench { display: inline-flex; align-items: center; font-family: var(--font-panel); text-transform: uppercase; letter-spacing: .08em; font-size: 14px; line-height: 16px; padding: 13px 24px; border: 2px solid var(--hairline); border-radius: var(--radius-pill); color: var(--ink-muted); }
.oa-btn:not([href]) { cursor: default; }

.about p { font-size: 17px; line-height: 28px; color: var(--ink-soft); max-width: 36em; margin: 0 0 var(--space-4); }
/* upcoming shows: a ShortList with the date in gold panel capitals and the show as an off-white link that turns gold */
.contact-line { font-size: 17px; line-height: 28px; color: var(--ink-soft); max-width: 36em; margin: 0; }
.mail-link { color: var(--ink); text-decoration: none; }
.mail-link:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
.mail-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.copy-btn { margin-left: 10px; vertical-align: 2px; font-family: var(--font-panel); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; line-height: 14px; padding: 4px 10px; color: var(--ink-soft); background: transparent; border: 1px solid var(--hairline); border-radius: var(--radius-pill, 999px); cursor: pointer; }
.copy-btn:hover { color: var(--gold); border-color: var(--gold); }
.copy-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.copy-btn.is-done { color: var(--gold); border-color: var(--gold); }
.mail-note { margin: 14px 0 0; font-size: 15px; line-height: 24px; color: var(--ink-soft); }
.shows-intro { font-size: 17px; line-height: 28px; color: var(--ink-soft); margin: 0 0 var(--space-5); }
.shows-list li { grid-template-columns: minmax(150px, 17em) minmax(0, 1fr); align-items: baseline; }
.shows-list .oa-list__label { color: var(--gold); font-size: 14px; }
.shows-list .oa-list__text { font-size: 17px; }
.shows-list a { color: var(--ink); text-decoration: none; }
.shows-list a:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
.shows-list a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }


.foot-contact { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.foot-contact:hover .oa-footer__mail, .foot-contact:focus-visible .oa-footer__mail { color: var(--gold); }   /* hovering the address or the bottle */
.foot-contact:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.foot-bottle { display: block; flex: none; }   /* the message in a bottle, from the design system */
/* iOS 26 Safari never draws fixed elements under its floating toolbar, but it paints that zone in the background colour
   of a fixed element touching the bottom edge (at least 80 % wide and 3 px tall). This strip, hidden under the sea,
   gives it the colour of the sea's bottom edge (black), so the toolbar zone continues the sea and never shows page content. */
.sea-chin { position: fixed; left: 0; right: 0; bottom: 0; height: 12px; background-color: #000; z-index: 4; pointer-events: none; }
.oa-footer { margin-bottom: calc(var(--oa-sea-h) * .12); position: relative; z-index: 1; background: transparent; }

@media (max-width: 760px) {
  :root { --top-space: clamp(36px, calc(56px + (100vh - 800px) * .5), 120px); }   /* short phones: a little less space above the headline, so the whole rack clears the sea */
  :root { --hmm: 2.5px; }
  .site-header { padding: 10px 16px 20px; }
  .site-main { padding: calc(var(--header-h, 58px) + var(--top-space)) 16px 72px; }
  #modules { scroll-margin-top: calc(var(--header-h, 58px) + var(--top-space)); }
  .site-section { margin-top: var(--space-7); }
  .ruled { margin-top: 48px; padding-top: 56px; }
  /* panels up to 8 hp keep their text beside them; wider ones stack */
  .mod { gap: var(--space-5); align-items: start; }
  .mod.mod--wide { grid-template-columns: 1fr; }
  .mod .oa-hero__name { font-size: 42px; line-height: 50px; margin-top: 0; }
  .mod .oa-hero__descriptor { font-size: 13px; line-height: 16px; }
  .mod .oa-hero__lead { font-size: 16px; line-height: 25px; margin: var(--space-4) 0 var(--space-3); }
  .mod .oa-hero__actions { margin-top: var(--space-5); }
  .mod .oa-btn, .mod .bench { padding: 11px 18px; font-size: 13px; }
  .rack-readout__name { font-size: 32px; line-height: 40px; }
  .shows-list li { grid-template-columns: 1fr; gap: 2px; }
  .oa-footer { padding-left: 16px; padding-right: 16px; }
  .oa-footer > img { height: 22px !important; }   /* the logo only, not the bottle */
}