/* Hallmark · shape: Map / Diagram (draw 336a0e) · genre: editorial · theme: Riso (deal 3/3, seed album-release-electronic-press-91f4·3c05b0e9·2026-10-26·r0) · redesign: full
 * hero: Banner (/), Banner (/epk.html) · nav: masthead, centred wordmark over a blue rule · footer: colophon block · imagery: the sleeve in two drums, one library photograph (mixing console, duotone), the stage plot and route map drawn from real data · signature: the listening desk printing in two drums, the pink meter overprinting the blue into purple
 * axes: light/grotesk-heavy/chromatic-pink · posture: committed · contrast: pass · fold: pass · job: listen (album), book (press kit) · copy: verbatim · v2.0.0 */
/* Hallmark · dropped buyers-title, bio-short-title, bio-long-title · the closing band is left out by the draw, and the two bio cards became one switcher whose tabs name each length */
/* Hallmark · answered F4 · the ink-filled segments are the selected state of a tab or radio, not an action; the pink .btn--primary is the only filled control */
/* Hallmark · answered F7 · fields, dialogs and the desk share the 1.5px blue rule on purpose: in riso every frame prints from the one blue drum */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: R, the desk and the record index both list the titles; the index carries side B and the notes fold into a switcher so the desk stays one screen */
/* Hallmark · waive 38iii · one word, Night, prints in both drums in the hero head only · the riso misregistered word is the theme's signature, placed once on the album page */
/* Hallmark · waive 80 · the sleeve is the record for sale, an <img> of the cover artwork · the album cover is the product this page sells */
@import url("./tokens.css");
@import url("./base.css");

/* June & the Satellites: page tokens, derived from the two drums */
:root {
  --bar-rest: color-mix(in oklab, var(--color-muted) 35%, transparent);
  --meter-off: color-mix(in oklab, var(--color-ink) 10%, transparent);
  --backdrop: color-mix(in oklab, var(--color-accent-ink) 55%, transparent);
  --rule-ink: 1.5px solid var(--color-ink);
  --nav-height: 72px;
}

/* ---------- Chrome ---------- */

.skip-link { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip-link:focus-visible { top: var(--space-md); }

.demo-notice { margin: 0; padding: var(--space-xs) var(--gutter); background: var(--color-paper-2); color: var(--color-ink); font-size: var(--text-sm); text-align: center; }
.demo-notice p { max-width: none; }

.masthead { border-bottom: var(--rule-ink); }
.masthead__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-md); min-height: var(--nav-height); }
.wordmark { color: var(--color-ink); font: var(--display-weight) clamp(1.375rem, 1rem + 1.3vw, 2.125rem) / 1 var(--font-display); letter-spacing: var(--tracking-display); text-decoration: none; white-space: nowrap; }
.wordmark:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 3px; }
.masthead__action { justify-self: end; font-weight: 500; font-size: var(--text-sm); color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.25em; white-space: nowrap; }
.masthead__action:hover { text-decoration-thickness: 4px; }

.site-nav { position: relative; justify-self: start; }
.site-nav__toggle { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-sm); border: 1.5px solid var(--color-ink); border-radius: var(--radius-card); background: transparent; color: var(--color-ink); font: 500 var(--text-sm) / 1 var(--font-body); cursor: pointer; }
.site-nav__toggle:active { transform: translate(1px, 1px); }
.site-nav__icon, .site-nav__icon::before, .site-nav__icon::after { display: block; width: 1rem; height: 1.5px; background: currentColor; }
.site-nav__icon { position: relative; }
.site-nav__icon::before, .site-nav__icon::after { content: ""; position: absolute; left: 0; }
.site-nav__icon::before { top: -5px; }
.site-nav__icon::after { top: 5px; }
.site-nav__list { display: none; margin: 0; padding: 0; list-style: none; }
.site-nav__list a { display: block; padding: var(--space-xs) 0; color: var(--color-ink); font-weight: 500; font-size: var(--text-sm); text-decoration: none; }
.site-nav__list a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.site-nav--open .site-nav__list { display: block; position: absolute; left: 0; top: calc(100% + var(--space-sm)); z-index: var(--z-dropdown); min-width: 12rem; padding: var(--space-xs) var(--space-md); background: var(--color-paper); border: var(--rule-ink); }
@media (min-width: 60rem) {
  .site-nav__toggle { display: none; }
  .site-nav__list { display: flex; gap: var(--space-lg); }
}
@media (max-width: 30rem) {
  .site-nav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .site-nav__toggle { width: 44px; justify-content: center; padding: 0; }
}

/* ---------- Controls ---------- */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1.5px solid transparent; border-radius: var(--radius-card); font: var(--display-weight) 0.9375rem / 1 var(--font-display); letter-spacing: 0; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:active { transform: translate(1px, 1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: color-mix(in oklab, var(--color-accent) 82%, var(--color-ink)); color: var(--color-paper); }
.btn--secondary { border-color: var(--color-ink); background: transparent; color: var(--color-ink); }
.btn--secondary:hover { background: var(--color-ink); color: var(--color-paper); }
.btn--small { min-height: 44px; padding: 0 var(--space-md); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }

/* ---------- Hero: Banner ---------- */

.hero { padding-block: var(--space-xl) var(--space-xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: center; gap: var(--space-2xl); }
.hero__title { max-width: 11ch; margin-bottom: var(--space-lg); font-size: clamp(3.25rem, 1rem + 7.4vw, 8rem); line-height: 0.9; }
.hero__lede { margin-bottom: var(--space-xl); color: var(--color-ink-2); }
.hero__meta { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.hero__cover { justify-self: end; width: min(100%, 26rem); margin: 0; }
.hero__cover img { width: 100%; border-radius: var(--radius-card); }

/* The one misregistered word: the pink drum settles into its offset once. */
.misreg { position: relative; display: inline-block; isolation: isolate; }
.misreg::after { content: attr(data-text) / ""; position: absolute; inset: 0; z-index: -1; color: var(--color-accent); transform: translate(2px, 3px); pointer-events: none; animation: settle var(--dur-long) var(--ease-out) both; }
@keyframes settle { from { transform: translate(0, 0); } to { transform: translate(2px, 3px); } }
@media (prefers-reduced-motion: reduce) { .misreg::after { animation: none; } }

@media (max-width: 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .hero__cover { justify-self: start; width: min(100%, 22rem); }
}
/* Phones: the cover steps down so the desk still reaches the first screen. */
@media (max-width: 40rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) 7.5rem; align-items: end; gap: var(--space-md); }
  .hero__text { display: contents; }
  .hero__title { grid-column: 1 / -1; grid-row: 1; margin-bottom: 0; }
  .hero__lede { grid-column: 1; grid-row: 2; margin-bottom: 0; align-self: center; }
  .hero__cover { grid-column: 2; grid-row: 2; justify-self: end; width: 7.5rem; }
  .hero .actions { grid-column: 1 / -1; grid-row: 3; }
  .hero__meta { grid-column: 1 / -1; grid-row: 4; margin-top: 0; }
}

/* ---------- Shared section parts ---------- */

main > section { padding-block: var(--space-2xl) var(--space-3xl); }
.head-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--space-lg) var(--gap-columns); margin-bottom: var(--space-2xl); }
.head-split .lead { color: var(--color-ink-2); }
@media (max-width: 60rem) { .head-split { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-xl); } }

.num { font-variant-numeric: tabular-nums lining-nums; }
.link-button { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--color-ink); font: 500 var(--text-sm) / 1 var(--font-body); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.25em; white-space: nowrap; cursor: pointer; }
.link-button:hover { text-decoration-thickness: 4px; }
.link-button:active { transform: translate(1px, 1px); }

/* A choice between a few: tabs or radios in one segmented row. */
.seg { display: flex; flex-wrap: wrap; margin: 0; padding: 0; border: 0; }
.seg legend { width: 100%; margin-bottom: var(--space-xs); font-weight: 500; font-size: var(--text-sm); color: var(--color-muted); }
.seg > button, .seg > label { display: inline-flex; align-items: center; min-height: 44px; margin-left: -1.5px; padding: 0 var(--space-md); border: 1.5px solid var(--color-ink); background: var(--color-paper); color: var(--color-ink); font: 500 var(--text-sm) / 1 var(--font-body); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.seg > :first-child, .seg > legend + input + label { margin-left: 0; }
.seg > button:hover, .seg > label:hover { background: var(--color-paper-2); }
.seg > button[aria-selected="true"], .seg > input:checked + label { background: var(--color-ink); color: var(--color-paper); }
.seg > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.seg > input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.seg > button:active, .seg > label:active { transform: translate(1px, 1px); }

/* ---------- The listening desk (signature) ---------- */

.desk { display: grid; grid-template-columns: 15rem minmax(0, 1fr) 20rem; border: var(--rule-ink); background: var(--color-paper); }
.desk > * { padding: var(--space-lg); min-width: 0; }
.desk > * + * { border-left: 1px solid var(--color-rule); }

.desk__tracks { display: grid; align-content: start; gap: var(--space-lg); }
.dial { width: 5.5rem; height: 5.5rem; }
.dial__ring { fill: none; stroke: var(--color-ink); stroke-width: 1.5; stroke-dasharray: 2 4; }
.dial__ticks line { stroke: var(--color-ink); stroke-width: 3; }
.dial__knob { transform-origin: 60px 60px; transform: rotate(var(--dial-angle, -54deg)); transition: transform var(--dur-long) var(--ease-out); }
.dial__knob circle { fill: var(--color-ink); }
.dial__knob line { stroke: var(--color-accent); stroke-width: 4; stroke-linecap: round; }

.track-buttons { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-rule); }
.track-buttons button { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); align-items: baseline; width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-xs); border: 0; border-bottom: 1px solid var(--color-rule); background: transparent; color: var(--color-ink); font: var(--display-weight) var(--text-md) / 1.15 var(--font-display); text-align: left; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.track-buttons .num { font: 500 var(--text-sm) / 1 var(--font-body); color: var(--color-muted); }
.track-buttons button:hover { background: var(--color-paper-2); }
.track-buttons button:active { transform: translate(1px, 1px); }
.track-buttons button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-ink); }
.track-buttons button[aria-pressed="true"] .num { color: var(--color-accent-ink); }

.desk__main { display: grid; align-content: start; gap: var(--space-md); }
.desk__now { display: flex; align-items: baseline; gap: var(--space-sm); font: var(--display-weight) var(--text-xl) / 1.05 var(--font-display); letter-spacing: var(--tracking-display); }
.desk__now .num { font: 500 var(--text-md) / 1 var(--font-body); color: var(--color-muted); letter-spacing: 0; }
.desk__key { margin-top: calc(-1 * var(--space-xs)); font-size: var(--text-sm); color: var(--color-muted); }
.desk__scope { width: 100%; height: 10rem; background: var(--color-paper-2); border-radius: var(--radius-card); }
.desk__status { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }

.transport { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); }
.transport__play { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg) 0 var(--space-md); border: 1.5px solid transparent; border-radius: var(--radius-card); background: var(--color-accent); color: var(--color-accent-ink); font: var(--display-weight) 0.9375rem / 1 var(--font-display); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.transport__play:hover { background: color-mix(in oklab, var(--color-accent) 82%, var(--color-ink)); color: var(--color-paper); }
.transport__play:active { transform: translate(1px, 1px); }
.transport__play:disabled { opacity: 0.55; cursor: not-allowed; }
.transport__icon { width: 0; height: 0; border-left: 0.7rem solid currentColor; border-top: 0.42rem solid transparent; border-bottom: 0.42rem solid transparent; }
.is-playing .transport__icon { width: 0.65rem; height: 0.8rem; border: 0; border-left: 0.2rem solid currentColor; border-right: 0.2rem solid currentColor; }
.transport__scrub { display: grid; gap: var(--space-2xs); min-width: 0; }
.transport__time { font-size: var(--text-sm); color: var(--color-muted); }
.transport__mute { min-height: 44px; padding: 0 var(--space-md); border: 1.5px solid var(--color-ink); border-radius: var(--radius-card); background: transparent; color: var(--color-ink); font: 500 var(--text-sm) / 1 var(--font-body); cursor: pointer; }
.transport__mute:hover { background: var(--color-paper-2); }
.transport__mute:active { transform: translate(1px, 1px); }
.transport__mute[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); }

input[type="range"] { width: 100%; height: 2rem; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 1.5px; background: var(--color-ink); }
input[type="range"]::-moz-range-track { height: 1.5px; background: var(--color-ink); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 0.85rem; height: 1.5rem; margin-top: -0.7rem; border: 0; border-radius: var(--radius-card); background: var(--color-accent); }
input[type="range"]::-moz-range-thumb { width: 0.85rem; height: 1.5rem; border: 0; border-radius: var(--radius-card); background: var(--color-accent); }

.stems { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; border: 0; }
.stems legend { width: 100%; margin-bottom: var(--space-xs); font-weight: 500; font-size: var(--text-sm); color: var(--color-muted); }
.stems button { min-height: 44px; padding: 0 var(--space-md); border: 1.5px solid var(--color-ink); border-radius: var(--radius-card); background: transparent; color: var(--color-muted); font: 500 var(--text-sm) / 1 var(--font-body); text-decoration: line-through; cursor: pointer; }
.stems button:hover { background: var(--color-paper-2); }
.stems button:active { transform: translate(1px, 1px); }
.stems button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); text-decoration: none; }

.notes { display: grid; align-content: start; gap: var(--space-md); }
.notes__title { font-size: var(--text-title); }
.notes__panel { font-size: var(--text-md); }
.js .notes__panel[hidden] { display: none; }
.credits { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-rule); }
.credits li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--space-sm); padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); font-size: var(--text-sm); }
.credits__name { font-weight: 500; }
.credits__role { color: var(--color-muted); }

@media (max-width: 80rem) {
  .desk { grid-template-columns: 15rem minmax(0, 1fr); }
  .notes { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--color-rule); }
}
@media (max-width: 48rem) {
  .desk { grid-template-columns: minmax(0, 1fr); }
  .desk > * + * { border-left: 0; border-top: 1px solid var(--color-rule); }
  .desk__tracks { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .dial { width: 4rem; height: 4rem; }
  .transport { grid-template-columns: auto minmax(0, 1fr); }
  .transport__mute { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- The record, as an index ---------- */

.record h2 { margin-bottom: var(--space-2xl); }
.index { width: 100%; border-collapse: collapse; border-top: var(--rule-ink); }
.index thead th { padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); font-weight: 500; font-size: var(--text-sm); color: var(--color-muted); text-align: left; }
.index td, .index tbody th { padding: var(--space-md) var(--space-md) var(--space-md) 0; border-bottom: 1px solid var(--color-rule); text-align: left; vertical-align: baseline; }
.index tbody th[scope="row"] { font: var(--display-weight) var(--text-title) / 1.15 var(--font-display); letter-spacing: var(--tracking-display); }
.index td.num { width: 4rem; color: var(--color-muted); }
.index td:last-child { width: 8rem; text-align: right; padding-right: 0; }
.index__side th { padding-top: var(--space-xl) !important; font-weight: 500; font-size: var(--text-sm); color: var(--color-muted); }
.index__quiet { font-size: var(--text-sm); color: var(--color-muted); }
.index tbody tr:not(.index__side) { height: 4.75rem; }

/* ---------- The room ---------- */

.room__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--space-3xl); }
.room__photo { aspect-ratio: 4 / 3; min-height: 440px; margin: 0; border-radius: var(--radius-card); }
.room__text h2 { margin-bottom: var(--space-xl); }
.facts { margin: 0; border-top: var(--rule-ink); }
.facts > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); }
.facts dt { font-weight: 500; font-size: var(--text-sm); color: var(--color-muted); padding-top: 0.15em; }
.facts dd { margin: 0; }
@media (max-width: 60rem) { .room__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .room__photo { min-height: 0; } }

/* ---------- The offer, on the light pink screen ---------- */

.offer { background: var(--color-paper-2); overflow-x: clip; }
.offer__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; gap: var(--space-3xl); }
.offer__panel { display: grid; gap: var(--space-lg); align-content: start; }
.offer__tab { display: grid; gap: var(--space-lg); }
.offer__ships { font-size: var(--text-sm); color: var(--color-muted); }

.sleeve-show { position: relative; width: min(74%, 27rem); }
.sleeve-show .sleeve { position: relative; z-index: 1; width: 100%; border-radius: var(--radius-card); }
.sleeve-show .record { position: absolute; top: 3%; left: 3%; width: 94%; transform: translateX(30%); transition: transform var(--dur-long) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.record__vinyl { fill: var(--color-ink); }
.record__smoke { fill: var(--color-accent); opacity: 0; mix-blend-mode: multiply; transition: opacity var(--dur-short) var(--ease-out); }
.sleeve-show[data-color="cobalt"] .record__smoke { opacity: 0.55; }
.record__grooves circle { stroke: color-mix(in oklab, var(--color-paper) 18%, transparent); stroke-width: 1; }
.record__label { fill: var(--color-accent); }
.record__text { font: var(--display-weight) 18px var(--font-display); fill: var(--color-accent-ink); }
.record__text--small { font: 500 12px var(--font-body); }
.record__hole { fill: var(--color-paper-2); }
.sleeve-show .files { position: absolute; z-index: 2; right: -18%; bottom: -6%; width: 70%; padding: var(--space-md); border: var(--rule-ink); background: var(--color-paper); font-size: var(--text-sm); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.files p { margin-bottom: var(--space-xs); font-weight: 500; }
.files ul { margin: 0; padding: 0; list-style: none; color: var(--color-muted); }
/* Without the script both pieces show; the edition tabs set data-edition. */
.js .sleeve-show[data-edition="lp"] .files { opacity: 0; transform: translateY(var(--space-md)); }
.js .sleeve-show[data-edition="digital"] .record { opacity: 0; transform: translateX(0); }

/* The price as a two-ink figure: the number in blue, a pink tab overprinting part of it. */
.price { display: flex; align-items: baseline; gap: var(--space-sm); }
.price__amount { position: relative; isolation: isolate; font: var(--display-weight) var(--text-display-s) / 1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.price__amount::after { content: ""; position: absolute; left: 38%; right: -0.25em; top: 18%; bottom: 8%; background: var(--color-accent); mix-blend-mode: multiply; }
.price__note { font-size: var(--text-sm); color: var(--color-muted); }

.rows { margin: 0; border-top: var(--rule-ink); }
.rows > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid color-mix(in oklab, var(--color-ink) 22%, transparent); }
.rows dt { font-weight: 500; font-size: var(--text-sm); color: var(--color-muted); padding-top: 0.15em; }
.rows dd { margin: 0; }
.reserved { padding: var(--space-sm) var(--space-md); border: var(--rule-ink); background: var(--color-paper); }
@media (max-width: 60rem) { .offer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); } .sleeve-show .files { right: -30%; } }
@media (max-width: 40rem) { .sleeve-show .files { right: -4%; width: 80%; } }

/* ---------- The tour: the route, then the dates ---------- */

.route { margin: 0 0 var(--space-2xl); }
.route svg { width: 100%; height: auto; overflow: visible; }
.route__line { fill: none; stroke: var(--color-ink); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 10 6; }
.route__line--pink { stroke: var(--color-accent); stroke-dasharray: none; stroke-width: 6; mix-blend-mode: multiply; opacity: 0.55; }
.route__node circle { fill: var(--color-paper); stroke: var(--color-ink); stroke-width: 2; }
.route__node--sold-out circle { fill: var(--color-ink); }
.route__node--low circle { fill: var(--color-accent); }
.route__node a { text-decoration: none; }
.route__node a:focus-visible { outline: none; }
.route__node a:focus-visible circle { stroke: var(--color-focus); stroke-width: 4; }
.route__node a:hover circle { fill: var(--color-paper-2); }
.route__city { font: var(--display-weight) 22px var(--font-display); fill: var(--color-ink); letter-spacing: -0.4px; }
.route__date { font: 500 15px var(--font-body); fill: var(--color-muted); }

.tour__list { margin: 0; padding: 0; list-style: none; border-top: var(--rule-ink); }
.tour__buyers { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-xl); font: var(--display-weight) var(--text-title) / 1.2 var(--font-display); letter-spacing: var(--tracking-display); }
.tour__row { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-xs) var(--space-lg); padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule); scroll-margin-top: var(--space-3xl); }
.tour__row:target { background: var(--color-paper-2); }
.tour__date { display: grid; font-weight: 500; font-variant-numeric: tabular-nums; }
.tour__time { font-weight: 400; font-size: var(--text-sm); color: var(--color-muted); }
.tour__city { font-size: var(--text-title); }
.tour__venue { font-size: var(--text-sm); color: var(--color-muted); }
.tour__note { color: var(--color-ink); font-weight: 500; }
.tour__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-xs) var(--space-md); }
.tour__status { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); font-weight: 500; font-size: var(--text-sm); }
.tour__status--sold { border: 1.5px dashed var(--color-muted); color: var(--color-muted); }
.tour__status--low { background: var(--color-accent); color: var(--color-accent-ink); }
.tour__nearby { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; font-size: var(--text-sm); color: var(--color-ink); text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.25em; white-space: nowrap; }
.tour__nearby:hover { text-decoration-thickness: 4px; }
@media (max-width: 60rem) {
  .tour__row { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .tour__actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------- Colophon ---------- */

.colophon { padding-block: var(--space-3xl) var(--space-2xl); border-top: var(--rule-ink); background: var(--color-paper); }
.colophon__inner { display: grid; gap: var(--space-md); max-width: 52rem; margin-inline: 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.colophon__inner a { color: var(--color-ink); text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.colophon__mark { font: var(--display-weight) var(--text-xl) / 1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); }
.colophon__credits { color: var(--color-muted); }

/* ---------- Dialogs and fields ---------- */

.dialog { width: min(100% - 2rem, 32rem); max-height: min(85dvh, 44rem); padding: var(--space-xl) var(--space-lg); border: var(--rule-ink); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); overflow: auto; }
.dialog::backdrop { background: var(--backdrop); }
.dialog h2 { margin-bottom: var(--space-md); font-size: var(--text-xl); }
.dialog__item { font-weight: 500; }
.dialog__meta { margin-bottom: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.dialog__total { margin-top: var(--space-md); font-variant-numeric: tabular-nums; }
.dialog__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-lg); }
.dialog p + p { margin-top: var(--space-sm); }
.warn { margin-block: var(--space-sm); padding: var(--space-xs) var(--space-sm); background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-sm); }

.notice { display: grid; gap: var(--space-sm); justify-items: start; margin: var(--space-md) 0; padding: var(--space-md); border: 1.5px dashed var(--color-ink); background: var(--color-paper-2); font-size: var(--text-sm); }
.notice[hidden] { display: none; }
.field { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-md); }
.field label { font-weight: 500; font-size: var(--text-sm); }
.field--short { max-width: 14rem; }
.legend-note { font-weight: 400; color: var(--color-muted); }
input[type="text"], input[type="email"], input[type="date"], select, textarea { width: 100%; min-height: 48px; padding: 0 var(--space-sm); border: 1.5px solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); font: 400 var(--text-md) / 1.4 var(--font-body); outline: 2px solid transparent; outline-offset: -4px; }
textarea { min-height: 6rem; padding-block: var(--space-sm); resize: vertical; }
input:hover, select:hover, textarea:hover { background: var(--color-paper-2); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: var(--color-focus); }
input[aria-invalid], select[aria-invalid] { border-color: var(--color-error); box-shadow: inset 0 0 0 1px var(--color-error); }
input:disabled, select:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.field-error { min-height: 1lh; color: var(--color-error); font-size: var(--text-sm); font-weight: 500; }
.field-error[hidden] { display: block !important; visibility: hidden; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--space-md); }
@media (max-width: 40rem) { .field-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Press kit ---------- */

.hero--epk { padding-block: var(--space-2xl) var(--space-xl); }
.hero__title--wide { max-width: 13ch; }
.hero--epk .hero__lede { max-width: 40ch; }

.at-a-glance { padding-block: var(--space-xl) var(--section-gap-s) !important; }
.glance__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.facts--wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap-columns); }
@media (max-width: 60rem) { .glance__grid, .facts--wide { grid-template-columns: minmax(0, 1fr); } }

.stage { background: var(--color-paper-2); }
.stage__grid { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--gap-columns); align-items: start; margin-bottom: var(--space-2xl); }
@media (max-width: 64rem) { .stage__grid { grid-template-columns: minmax(0, 1fr); } }
.picker { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-md); }
.chip { min-height: 44px; padding: 0 var(--space-md); border: 1.5px solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); font: 500 var(--text-sm) / 1 var(--font-body); cursor: pointer; }
.chip:hover { background: var(--color-paper-2); }
.chip:active { transform: translate(1px, 1px); }
.chip[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); }
@media (min-width: 48rem) { .picker { display: none; } }

.plot-holder { border: var(--rule-ink); border-radius: var(--radius-card); background: var(--color-paper); }
.plot { width: 100%; height: auto; }
.plot text { font-family: var(--font-body); font-weight: 500; }
.plot__stage { fill: var(--color-paper); stroke: var(--color-ink); stroke-width: 1.5; }
.plot__edge { font-size: 12px; fill: var(--color-muted); }
.plot__zone { fill: var(--color-paper-2); stroke: var(--color-ink); stroke-width: 1.5; transition: fill var(--dur-micro) var(--ease-out); }
.plot__label { font-family: var(--font-display) !important; font-weight: var(--display-weight) !important; font-size: 15px; fill: var(--color-ink); }
.plot__name { font-size: 11px; fill: var(--color-muted); }
.plot__ch { font-size: 11px; fill: var(--color-ink); }
.plot__wedge path { fill: var(--color-ink); }
.plot__wedge text { font-size: 10px; fill: var(--color-ink); }
.plot__power circle { fill: none; stroke: var(--color-accent); stroke-width: 1.5; }
.plot__power text { font-size: 8px; fill: var(--color-ink); }
.plot__hatchline { stroke: var(--color-rule); }
.plot__pos[role="button"] { cursor: pointer; outline: none; }
.plot__pos[role="button"]:hover .plot__zone { fill: var(--color-paper-3); }
.plot__pos[role="button"]:focus-visible .plot__zone { stroke: var(--color-focus); stroke-width: 4; }
.plot__pos[aria-pressed="true"] .plot__zone { fill: var(--color-accent); }
.plot__pos[aria-pressed="true"] text { fill: var(--color-accent-ink); }
.plot__pos[aria-pressed="true"] .plot__hatch { mix-blend-mode: multiply; }

.inspector { display: grid; gap: var(--space-sm); padding: var(--space-lg); border: var(--rule-ink); border-radius: var(--radius-card); background: var(--color-paper); }
.inspector__name { font-size: var(--text-xl); }
.inspector__role { color: var(--color-ink-2); }
.inspector__notes { font-size: var(--text-sm); }

.table-scroll { overflow-x: auto; }
.table-scroll:focus-visible { outline-offset: 4px; }
.input-list { min-width: 46rem; background: var(--color-paper); }
.input-list caption { padding-bottom: var(--space-sm); text-align: left; font: var(--display-weight) var(--text-title) / 1.1 var(--font-display); letter-spacing: var(--tracking-display); }
.input-list td, .input-list tbody th { padding-left: var(--space-sm); }
.input-list thead th { padding-left: var(--space-sm); }
.input-list tbody th[scope="row"] { font: 500 var(--text-md) / 1.3 var(--font-body); letter-spacing: 0; }
.input-list td:last-child { width: auto; text-align: left; font-size: var(--text-sm); }
.input-list tbody tr { transition: background-color var(--dur-micro) var(--ease-out); }
.input-list tbody tr.is-active { background: var(--color-accent); color: var(--color-accent-ink); }
.input-list tbody tr.is-active td.num { color: var(--color-accent-ink); }
.stage__downloads { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); margin-top: var(--space-lg); }

.bios__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.bios__grid h2 { margin-bottom: var(--space-xl); }
.bio { display: grid; gap: var(--space-lg); justify-items: start; padding-top: var(--space-lg); border-top: var(--rule-ink); }
.bio__text { font-size: var(--text-lead); line-height: 1.55; max-width: 60ch; }
.bio__text--short { font-size: var(--text-xl); line-height: 1.4; }
.copy-status { min-height: 1lh; margin-top: var(--space-md); font-weight: 500; font-size: var(--text-sm); }
.js .bio[hidden] { display: none; }
@media (max-width: 60rem) { .bios__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }

.photo-specs th[scope="row"] { font-size: var(--text-title); }
.photo-specs td { font-size: var(--text-sm); }
.photo-specs td.num { white-space: nowrap; }
.photo-specs td:last-child { width: auto; text-align: left; }
@media (max-width: 60rem) {
  .photo-specs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .photo-specs tr { display: grid; gap: var(--space-2xs); padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule); }
  .photo-specs td, .photo-specs th { padding: 0 !important; border: 0 !important; }
}

.reel { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap-columns); align-items: start; }
.reel__frame { margin: 0; }
.reel__frame svg { width: 100%; height: auto; border-radius: var(--radius-card); }
.reel__frame figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); max-width: 60ch; }
.reel__paper { fill: var(--color-paper-2); }
.reel__field { fill: var(--color-ink); }
.reel__sun { fill: var(--color-accent); mix-blend-mode: multiply; }
.reel__type { fill: var(--color-ink); font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: -3px; }
.reel__meta { fill: var(--color-paper); font-family: var(--font-body); font-weight: 500; }
.reel__chapters h2 { font-size: var(--text-xl); margin-bottom: var(--space-md); }
.chapters { margin: 0 0 var(--space-md); padding: 0; list-style: none; border-top: var(--rule-ink); }
.chapters li { display: flex; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); font-weight: 500; }
.chapters .num { color: var(--color-muted); font-weight: 400; }
.reel__note { font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 60rem) { .reel { grid-template-columns: minmax(0, 1fr); } }

.booking { background: var(--color-paper-2); scroll-margin-top: var(--space-xl); }
.booking__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-3xl); align-items: start; }
.booking__head { display: grid; gap: var(--space-md); position: sticky; top: var(--space-xl); }
.booking__progress { font-weight: 500; font-size: var(--text-sm); color: var(--color-muted); }
.stepper { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; counter-reset: step; font-size: var(--text-sm); }
.stepper li { display: flex; align-items: center; gap: var(--space-sm); color: var(--color-muted); counter-increment: step; }
.stepper li::before { content: counter(step); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1.5px solid currentColor; border-radius: 50%; font-variant-numeric: tabular-nums; }
.stepper li[aria-current="step"] { color: var(--color-ink); font-weight: 500; }
.stepper li[aria-current="step"]::before { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.stepper li.is-done { color: var(--color-ink); }
.stepper li.is-done::before { content: "✓"; background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.booking__body { padding: var(--space-xl); border: var(--rule-ink); border-radius: var(--radius-card); background: var(--color-paper); }
.bstep h3 { margin-bottom: var(--space-lg); outline: none; }
.bstep h3:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.notice--info { border-style: solid; }
.choice-group { margin: 0 0 var(--space-md); padding: 0; border: 0; }
.choice-group legend { margin-bottom: var(--space-sm); font-weight: 500; font-size: var(--text-sm); }
.choices { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xs); }
@media (max-width: 40rem) { .choices { grid-template-columns: minmax(0, 1fr); } }
.choice { display: flex; gap: var(--space-sm); align-items: flex-start; padding: var(--space-sm) var(--space-md); border: 1.5px solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-paper); cursor: pointer; }
.choice:hover { background: var(--color-paper-2); }
.choice input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0.2rem 0 0; accent-color: var(--color-ink); }
.choice:has(input:checked) { background: var(--color-accent); color: var(--color-accent-ink); }
.choice:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.choice__name { display: block; font-weight: 500; }
.choice__meta { display: block; font-size: var(--text-sm); color: var(--color-muted); }
.choice:has(input:checked) .choice__meta { color: var(--color-accent-ink); }
.step__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-lg); }
.step__actions--final { padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.booking__note { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }
.review { margin: 0 0 var(--space-sm); border-top: var(--rule-ink); }
.review > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); }
.review dt { font-weight: 500; font-size: var(--text-sm); color: var(--color-muted); padding-top: 0.15em; }
.review dd { margin: 0; overflow-wrap: anywhere; }
.confirmation h3 { font-size: var(--text-xl); max-width: 30ch; }
.confirmation > p { margin-top: var(--space-md); }
@media (max-width: 60rem) {
  .booking__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .booking__head { position: static; }
  .stepper { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
  .booking__body { padding: var(--space-lg) var(--space-md); }
}
@media (max-width: 30rem) { .review > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }