/* AZURE VOID: the rack, the cable, the output stage.
   Consumes tokens.css only. Section rules are scoped under the section id.
   Nothing in here invents a colour: every value is a token.                     */

/* ---------------------------------------------------------------- ground */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--void);
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body-ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-body);
  padding-top: 4.25rem;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  font-weight: 700;
  line-height: var(--lh-head);
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--fg); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--fg-strong); }

img, svg { max-width: 100%; }

/* every display rule in this file must lose to the hidden attribute, or a
   control the script has not enabled yet shows up as a dead button with no
   script running. The patch keys depend on this. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-0);
}

::selection { background: var(--chrome); color: var(--void); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: fixed; top: 0.5rem; left: 0.5rem; z-index: var(--z-skip);
  transform: translateY(-160%);
  background: var(--chrome); color: var(--void);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-small);
  letter-spacing: var(--track-mark); text-transform: uppercase; text-decoration: none;
  padding: 0.7rem 1.1rem;
}
.skip-link:focus { transform: translateY(0); }

/* ---------------------------------------------------------------- roles */
.chassis {
  width: min(100% - 2.5rem, var(--chassis-w));
  margin-inline: auto;
}
@media (max-width: 30rem) {
  .chassis { width: min(100% - 1.6rem, var(--chassis-w)); }
}

.section {
  padding-block: var(--section-pad);
  border-top: 1px solid var(--line);
}
.section:first-of-type { border-top: 0; }

.mark {
  font-family: var(--font-display);
  font-size: var(--t-mark);
  font-weight: 700;
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-4);
}

.head {
  font-size: var(--t-h2);
  max-width: 20ch;
  margin-bottom: var(--s-5);
}

.copy { max-width: var(--measure); }
.copy + .copy { margin-top: var(--s-4); }
.copy--lead { font-size: var(--t-lead); color: var(--fg); max-width: 46ch; }
.copy--wide { max-width: 68ch; color: var(--muted); }

.aside-head {
  font-size: var(--t-mark);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: var(--s-2);
}
.aside-head + .copy { margin-bottom: var(--s-5); }

.dot {
  display: inline-block; width: 3px; height: 3px;
  background: var(--hair); vertical-align: 0.24em; margin-inline: 0.45em;
}

.decal {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--void); background: var(--steel-lit);
  padding: 0.1em 0.42em; vertical-align: 0.1em;
}

/* the one button, in three strengths. Square, engraved, metal. */
.key {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--t-small); font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--fg); background: var(--bg-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  padding: 0.68rem 1.05rem;
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.key:hover { background: var(--bg-4); color: var(--fg-strong); border-color: var(--chrome-2); }
.key--go { background: var(--chrome); color: var(--void); border-color: var(--chrome); }
.key--go:hover { background: var(--chrome-3); color: var(--void); }
.key--small { padding: 0.5rem 0.8rem; font-size: var(--t-mark); }
.key[disabled] { color: var(--hair); border-color: var(--line); background: var(--bg-2); cursor: not-allowed; }

.lamp {
  display: inline-block;
  font-family: var(--font-display); font-size: var(--t-mark); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.22rem 0.5rem; border: 1px solid var(--line-strong);
  color: var(--fg); white-space: nowrap;
}
.lamp--on { border-color: var(--chrome-2); }
.lamp--low { border-style: dashed; }
.lamp--out { color: var(--muted); border-color: var(--line); text-decoration: line-through; }
.lamp--hold { color: var(--muted); border-style: dotted; }
.lamp--played { color: var(--muted); border-color: var(--line); }

/* reveals: the page is complete without them */
.js .reveal > * { opacity: 0; transform: translateY(16px); }
.js .reveal.is-inview > * {
  opacity: 1; transform: none;
  transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
}
.js .reveal.is-inview > *:nth-child(2) { transition-delay: 70ms; }
.js .reveal.is-inview > *:nth-child(3) { transition-delay: 140ms; }
.js .reveal.is-inview > *:nth-child(4) { transition-delay: 210ms; }
.js .reveal.is-inview > *:nth-child(5) { transition-delay: 280ms; }
.js .reveal.is-inview > *:nth-child(6) { transition-delay: 350ms; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal > * { opacity: 1; transform: none; }
  .js .reveal.is-inview > * { transition: none; }
}

/* ---------------------------------------------------------------- the rail */
.rail {
  position: fixed; inset: 0 0 auto; z-index: var(--z-rail);
  background: var(--void-2);
  border-bottom: 1px solid var(--line-strong);
  box-shadow: 0 1px 0 rgba(238, 240, 244, 0.05) inset;
}
.rail-in {
  display: flex; align-items: center; gap: var(--s-5);
  min-height: 4.25rem;
}
.rail-mark {
  display: flex; flex-direction: column; text-decoration: none; line-height: 1.1;
  padding-right: var(--s-5); border-right: 1px solid var(--line);
}
.rail-mark b {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.02rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-strong);
}
.rail-mark i {
  font-style: normal; font-size: 0.66rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted);
}
.rail-nav ul { display: flex; gap: var(--s-5); }
.rail-nav a {
  font-family: var(--font-display); font-size: var(--t-mark); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
}
.rail-nav a:hover { color: var(--fg); }
.rail-nav a[aria-current] { color: var(--fg-strong); border-bottom-color: var(--chrome-2); }

.telltale {
  margin-left: auto;
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-size: var(--t-mark); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--line); padding: 0.32rem 0.6rem;
  background: var(--void);
}
.telltale-key { color: var(--hair); }
.telltale-val { color: var(--fg); }
/* live state is text first: the label changes, and the frame gains an edge */
.telltale.is-live { border-color: var(--live-edge); }
.telltale.is-live .telltale-val { color: var(--fg-strong); }

.bay-open { display: none; }

@media (max-width: 62rem) {
  .rail-nav, .rail-book { display: none; }
  .bay-open { display: inline-flex; margin-left: auto; }
  .telltale { margin-left: 0; }
}
@media (max-width: 34rem) {
  .rail-mark { border-right: 0; padding-right: 0; }
  .telltale { display: none; }
}

/* the bay: mobile navigation as a patch bay drawer */
.bay {
  position: fixed; inset: 0; z-index: var(--z-bay);
  background: var(--void);
  padding: var(--s-7) var(--s-5);
  display: none;
  overflow-y: auto;
}
.bay.is-open { display: block; }
.bay-close { margin-bottom: var(--s-6); }
.bay nav ul { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.bay nav a {
  display: flex; align-items: baseline; gap: var(--s-4);
  background: var(--void-2); padding: var(--s-4) var(--s-5);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-h3);
  text-decoration: none; color: var(--fg);
}
.bay nav a small { font-size: var(--t-mark); color: var(--hair); letter-spacing: 0.16em; }
.bay nav a:hover { background: var(--void-3); color: var(--fg-strong); }
.bay > .key--go { margin-top: var(--s-6); }

/* ================================================================ 01 RACK */
#rack-01 {
  padding-top: clamp(2.5rem, 1rem + 5vw, 5rem);

  & .rack-kicker {
    display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6);
    margin-bottom: var(--s-5);
  }
  & h1 {
    font-size: var(--t-h1);
    line-height: var(--lh-tight);
    letter-spacing: -0.022em;
    max-width: 16ch;
    margin-bottom: var(--s-5);
  }
  & .copy--lead { margin-bottom: var(--s-8); }

  & .rack {
    position: relative;
    border: 1px solid var(--line-strong);
    background:
      repeating-linear-gradient(90deg, rgba(216, 219, 226, 0.035) 0 1px, transparent 1px 7px),
      var(--void-2);
    padding: var(--s-5);
  }
  & .cable-field {
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: var(--z-cable); pointer-events: none; overflow: visible;
  }
  & .cable {
    fill: none;
    stroke: url(#ramp);
    stroke-width: 2.5;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(184, 88, 254, 0.35));
  }

  & .rack-rows {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
    gap: var(--s-4);
  }

  & .module {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "no body" "out out" "patch patch" "feed feed";
    gap: var(--s-3) var(--s-4);
    align-content: start;
    background: var(--plate);
    border: 1px solid var(--line);
    border-radius: var(--r-1);
    padding: var(--s-4);
    box-shadow: var(--shadow-plate);
  }
  /* screw heads, top and bottom, like a real panel */
  & .module::before, & .module::after {
    content: ""; position: absolute; width: 5px; height: 5px;
    border-radius: var(--r-round);
    background: var(--void-4);
    box-shadow: 0 0 0 1px var(--line-strong);
  }
  & .module::before { left: 6px; top: 6px; }
  & .module::after { right: 6px; bottom: 6px; }

  & .module-no {
    grid-area: no;
    font-family: var(--font-display); font-weight: 800;
    font-size: var(--t-mark); letter-spacing: 0.14em;
    color: var(--hair);
    border: 1px solid var(--line); padding: 0.15rem 0.35rem; height: fit-content;
  }
  & .module-body { grid-area: body; }
  & .module-name {
    font-size: var(--t-h3);
    letter-spacing: -0.015em;
  }
  & .module-name a { text-decoration: none; color: var(--fg-strong); }
  & .module-name a:hover { text-decoration: underline; }
  & .module-spec {
    font-size: var(--t-small); color: var(--muted); margin-top: 0.15rem;
  }

  & .module-out {
    grid-area: out;
    display: flex; align-items: center; gap: 0.5rem;
    border-top: 1px solid var(--line); padding-top: var(--s-3);
    font-family: var(--font-display); font-size: var(--t-mark); font-weight: 700;
    letter-spacing: var(--track-mark); text-transform: uppercase; color: var(--hair);
  }
  & .module-state {
    margin-left: auto; color: var(--fg-strong);
    border: 1px solid var(--live-edge); padding: 0.1rem 0.4rem;
  }
  & .module-patch { grid-area: patch; justify-content: center; width: 100%; }
  & .module-feed {
    grid-area: feed;
    font-size: var(--t-mark); letter-spacing: 0.05em;
    color: var(--muted); text-decoration-style: dotted;
  }
  & .module-feed:hover { color: var(--fg); }

  /* THE LIVE STATE. Gradient plus a shape change plus a word change, never
     the gradient alone: the jack fills, the panel gains an edge, the button
     relabels itself, and the word "Patched" appears. */
  & .module.is-patched {
    border-color: var(--live-edge);
    background:
      var(--live-soft),
      var(--plate);
  }
  & .module.is-patched .module-patch {
    border-color: transparent;
    background-image: var(--live);
    color: var(--void);
    position: relative;
  }
  & .module.is-patched .module-no { color: var(--fg); border-color: var(--line-strong); }

  & .module.is-patched .socket {
    border-color: var(--live-2);
    background-image: var(--live);
  }

  & .outstage { margin-top: var(--s-5); }

  & .outstage-routed {
    font-family: var(--font-display); font-weight: 600;
    font-size: var(--t-h3); color: var(--fg-strong);
    margin-top: var(--s-4);
  }

  & .outstage-plain { margin-top: var(--s-5); }
  & .outstage-plain-head { font-size: var(--t-h3); margin-bottom: var(--s-3); }
  & .outstage-plain ul { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
  & .outstage-plain li {
    display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
    border-top: 1px solid var(--line); padding-top: var(--s-2);
    font-size: var(--t-small);
  }
  & .outstage-plain .unset { color: var(--muted); text-decoration-style: dotted; }

  & .rack-foot {
    margin-top: var(--s-4); font-size: var(--t-small); color: var(--muted);
    max-width: 68ch;
  }
}
/* with the script running, the plain list is replaced by the routed player.
   With no script there is nothing to patch, so the routing line goes away too
   rather than reporting on a mechanic the visitor cannot reach. */
.js #rack-01 .outstage-plain { display: none; }
html:not(.js) #rack-01 .outstage-routed,
html:not(.js) .telltale { display: none; }

/* ================================================================ THE PLAYER
   Shared by the rack's output stage and by the release page. One facade
   component: our own tokens, our own type, nothing third party until a press. */
.socket {
  width: 15px; height: 15px; border-radius: var(--r-round);
  border: 2px solid var(--hair);
  background: var(--void);
  box-shadow: 0 0 0 1px var(--void-4);
  flex: none;
  display: inline-block;
}
.socket--in { width: 17px; height: 17px; }

.outstage {
  border: 1px solid var(--line-strong);
  background: var(--void-3);
  padding: var(--s-5);
}
.outstage-top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  border-bottom: 1px solid var(--line); padding-bottom: var(--s-3);
}
.outstage-top .mark { margin: 0; color: var(--fg); }
.outstage-in {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-size: var(--t-mark); font-weight: 700;
  letter-spacing: var(--track-mark); text-transform: uppercase; color: var(--hair);
}
.outstage.is-live .socket--in { border-color: var(--live-1); background-image: var(--live); }

.out-plate { margin-top: var(--s-4); }
.out-plate-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-small);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg);
}
.out-plate-conn {
  font-size: var(--t-mark); color: var(--muted);
  border: 1px dashed var(--line-strong); padding: 0.1rem 0.4rem;
}
/* which platform the patched feed lives on: a nameplate, never a colour */
.out-plate-badge {
  font-size: var(--t-mark); color: var(--fg);
  border: 1px solid var(--line-strong); padding: 0.1rem 0.4rem;
  letter-spacing: 0.1em;
}
.out-plate.is-connected .out-plate-conn {
  border-style: solid; border-color: var(--live-edge); color: var(--fg-strong);
}
.out-plate-note {
  font-size: var(--t-small); color: var(--muted); max-width: 66ch; margin-top: var(--s-3);
}
/* the Spotify preview line: small, honest, and only shown for a Spotify feed */
.out-plate-caveat {
  font-size: var(--t-mark); color: var(--muted); max-width: 66ch; margin-top: var(--s-2);
  letter-spacing: 0.04em;
}
.gate {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
  margin-top: var(--s-4);
}
.out-plate-clock {
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-mono-num);
  letter-spacing: 0.1em; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* the level ladder. The ramp is live state, so an idle ladder is plain metal
   and only a connected plate puts the ramp behind the segments. */
.ladder {
  margin-top: var(--s-4);
  height: 10px;
  display: flex; gap: 0;
  background: var(--void-2);
  border: 1px solid var(--line);
}
.out-plate.is-connected .ladder { background-image: var(--live); }
.ladder-seg {
  flex: 1 1 auto;
  background: var(--void-2);
  border-right: 1px solid var(--void-3);
  transition: background var(--dur-1) linear;
}
.ladder-seg:last-child { border-right: 0; }
.ladder-seg.is-lit { background: transparent; }

.out-plate-frame:not(:empty) { margin-top: var(--s-5); }
.out-plate-frame iframe {
  display: block; width: 100%; border: 1px solid var(--line-strong);
  background: var(--void-2);
}
/* SoundCloud's widget takes its height from us; Spotify's controller sets its
   own height attribute, which the [height] guard leaves alone */
.out-plate-frame iframe:not([height]) { height: 166px; }
.out-plate-status {
  margin-top: var(--s-3); font-size: var(--t-small); color: var(--muted);
}
.out-plate-status:empty { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .ladder-seg { transition: none; }
  .key { transition: none; }
}

/* ================================================================ 02 CATALOGUE */
#catalogue-02 {
  & .catalogue {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-top: var(--s-6);
  }
  & .entry {
    display: flex; gap: var(--s-4);
    background: var(--void-2);
    padding: var(--s-5);
  }
  & .entry:hover { background: var(--void-3); }
  & .sleeve {
    flex: none; width: 74px; height: 74px;
    border: 1px solid var(--line-strong);
    background-color: var(--void);
  }
  & .sleeve--1 { background-image: repeating-linear-gradient(0deg, var(--steel) 0 1px, transparent 1px 6px); }
  & .sleeve--2 { background-image: repeating-linear-gradient(90deg, var(--steel) 0 1px, transparent 1px 9px); }
  & .sleeve--3 { background-image: repeating-linear-gradient(45deg, var(--steel) 0 1px, transparent 1px 8px); }
  & .sleeve--4 { background-image: repeating-linear-gradient(135deg, var(--steel) 0 1px, transparent 1px 5px); }
  & .sleeve--5 { background-image: repeating-radial-gradient(circle at 50% 50%, var(--steel) 0 1px, transparent 1px 9px); }
  & .sleeve--6 { background-image: repeating-linear-gradient(0deg, var(--steel) 0 1px, transparent 1px 12px), repeating-linear-gradient(90deg, var(--steel) 0 1px, transparent 1px 12px); }

  & .entry-name { font-size: var(--t-h3); }
  & .entry-name a { color: var(--fg-strong); text-decoration-color: var(--line-strong); }
  & .entry-spec { font-size: var(--t-small); color: var(--muted); margin-top: 0.2rem; }
  & .entry-note { font-size: var(--t-small); margin-top: var(--s-3); max-width: 42ch; }

  & .feed { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
  & .feed-link {
    display: flex; flex-direction: column; gap: 0.05rem;
    border: 1px solid var(--line); padding: 0.32rem 0.55rem;
    text-decoration: none;
  }
  & .feed-link b {
    font-family: var(--font-display); font-size: var(--t-mark); font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg);
  }
  & .feed-link span { font-size: 0.66rem; color: var(--muted); letter-spacing: 0.04em; }
  & .feed-link:hover { border-color: var(--chrome-2); background: var(--void-4); }
}

/* ================================================================ 03 ADVANCE */
#advance-03 {
  & .advance-split {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
    gap: var(--s-8);
    margin-top: var(--s-6);
    align-items: start;
  }
  & .advance-aside {
    border: 1px solid var(--line); background: var(--void-2); padding: var(--s-5);
  }
  & .aside-list { display: grid; gap: var(--s-3); font-size: var(--t-small); }
  & .aside-list li { border-top: 1px solid var(--line); padding-top: var(--s-3); }
  & .aside-list a { color: var(--muted); }
}
@media (max-width: 58rem) {
  #advance-03 .advance-split { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* the form kit, shared by all three forms on this site */
.advance, .nearby-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4) var(--s-5);
}
.advance > p, .advance > div:not(.field), .advance > .field--wide,
.nearby-form > p, .nearby-form > div:not(.field) { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label {
  font-family: var(--font-display); font-size: var(--t-mark); font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--fg);
}
.field .hint {
  display: block; font-family: var(--font-body); font-size: var(--t-small);
  letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--muted);
  margin-top: 0.2rem;
}
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: var(--t-body); color: var(--fg-strong);
  background: var(--void-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  padding: 0.62rem 0.7rem;
  width: 100%;
}
.field textarea { resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--chrome-2); }
/* invalid is carried by a word, a border weight and a rule, never by colour */
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea {
  border-color: var(--chrome-3);
  border-left-width: 4px;
}
.field-err {
  font-size: var(--t-small); color: var(--fg-strong);
  font-weight: 600;
}
.field-err::before { content: "Fix: "; font-family: var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--t-mark); }

.decoy { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.advance-errors {
  border: 1px solid var(--chrome-2); background: var(--void-3);
  padding: var(--s-4) var(--s-5);
}
.advance-errors h3 { font-size: var(--t-h3); margin-bottom: var(--s-2); }
.advance-errors ul { display: grid; gap: 0.3rem; list-style: disc; padding-left: 1.1rem; }
.advance-errors a { color: var(--fg-strong); }

.advance-nojs, .advance-draft {
  font-size: var(--t-small); color: var(--muted);
  border-left: 2px solid var(--line-strong); padding-left: var(--s-4);
}
.js .advance-nojs { display: none; }
.advance-status:not(:empty) {
  font-size: var(--t-small); color: var(--fg-strong);
  border: 1px solid var(--line-strong); padding: var(--s-3) var(--s-4);
}
.advance-fallback {
  border: 1px solid var(--line-strong); background: var(--void-2); padding: var(--s-4);
}
.advance-fallback textarea {
  width: 100%; margin-top: var(--s-2);
  font-family: var(--font-body); font-size: var(--t-small);
  background: var(--void); color: var(--fg); border: 1px solid var(--line);
  padding: var(--s-3);
}
.advance-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }

@media (max-width: 40rem) {
  .advance, .nearby-form { grid-template-columns: 1fr; }
}

/* ================================================================ 04 SLOTS */
#slots-04 {
  & .slots-scroll { overflow-x: auto; margin-top: var(--s-6); border: 1px solid var(--line); }
  & .slots { width: 100%; border-collapse: collapse; min-width: 44rem; }
  & .slots th, & .slots td {
    text-align: left; padding: var(--s-4) var(--s-4);
    border-bottom: 1px solid var(--line);
    font-size: var(--t-small);
    vertical-align: middle;
  }
  & .slots th {
    font-family: var(--font-display); font-size: var(--t-mark); font-weight: 700;
    letter-spacing: var(--track-mark); text-transform: uppercase; color: var(--muted);
    background: var(--void-2);
  }
  & .slots tbody tr:hover { background: var(--void-2); }
  & .slots time { font-family: var(--font-display); font-weight: 700; color: var(--fg-strong); letter-spacing: 0.02em; }
  & .slot-tix { font-family: var(--font-display); font-weight: 700; font-size: var(--t-mark); letter-spacing: 0.1em; text-transform: uppercase; }
  & .slot-none { color: var(--muted); font-size: var(--t-mark); letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--font-display); font-weight: 700; }
  & tr.is-played td { color: var(--hair); }
  & tr.is-played time { color: var(--muted); }

  & .nearby {
    margin-top: var(--s-7);
    border: 1px solid var(--line); background: var(--void-2); padding: var(--s-5);
    max-width: 46rem;
  }
  & .nearby-head { font-size: var(--t-h3); margin-bottom: var(--s-2); }
  & .nearby .copy { margin-bottom: var(--s-5); color: var(--muted); }
}

/* ================================================================ 05 ROOMS */
#rooms-05 {
  background: var(--void-2);

  & .rooms-split {
    display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr);
    gap: var(--s-8); align-items: start; margin-top: var(--s-5);
  }
  & .rooms-text .copy { max-width: 60ch; }
  & .rooms-gear { border: 1px solid var(--line); padding: var(--s-5); background: var(--void-3); }
  & .gear { display: grid; gap: var(--s-3); }
  & .gear li {
    display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s-3);
    border-top: 1px solid var(--line); padding-top: var(--s-3);
    font-size: var(--t-small);
  }
  & .gear b {
    font-family: var(--font-display); font-size: var(--t-mark); font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  }
}
@media (max-width: 58rem) {
  #rooms-05 .rooms-split { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* ================================================================ 06 RUNS */
#runs-06 {
  & .runs {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1px; background: var(--line); border: 1px solid var(--line);
    margin-top: var(--s-6);
  }
  & .run { background: var(--void-2); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
  & .run-name { font-size: var(--t-h3); }
  & .run-spec { font-size: var(--t-small); color: var(--muted); }
  & .run-note { font-size: var(--t-small); }
  & .run p:last-child { margin-top: auto; }
}

/* ================================================================ 07 SEND */
#send-07 {
  background: var(--void-2);

  & .send-split {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
    gap: var(--s-8); align-items: start; margin-top: var(--s-5);
  }
  & .send-aside { border: 1px solid var(--line); background: var(--void-3); padding: var(--s-5); }
  & .send-aside .copy { font-size: var(--t-small); }
}
@media (max-width: 58rem) {
  #send-07 .send-split { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* ================================================================ LOAD OUT */
.mains {
  border-top: 1px solid var(--line-strong);
  padding-block: var(--s-8) var(--s-7);
  background: var(--void);
}
.mains-split {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--s-8);
}
.mains-mark {
  font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-strong);
  margin-bottom: var(--s-3);
}
.mains .copy { font-size: var(--t-small); color: var(--muted); }
.mains-links { display: grid; gap: var(--s-2); margin-top: var(--s-4); font-size: var(--t-small); }
.draw-list { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.draw-list li {
  display: flex; align-items: baseline; gap: var(--s-4);
  border-top: 1px solid var(--line); padding-top: var(--s-2);
}
.draw-list b {
  font-family: var(--font-display); font-weight: 800; font-size: var(--t-body);
  color: var(--fg-strong); min-width: 6.5rem; font-variant-numeric: tabular-nums;
}
.draw-list span { font-size: var(--t-small); color: var(--muted); }
.draw-stamp { margin-top: var(--s-3); font-size: var(--t-mark); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hair); font-family: var(--font-display); font-weight: 700; }
.mains-foot {
  margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--line);
  font-size: var(--t-small); color: var(--hair);
}
@media (max-width: 58rem) {
  .mains-split { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* ================================================================ BANNER (interior) */
.banner {
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  background:
    repeating-linear-gradient(90deg, rgba(216, 219, 226, 0.03) 0 1px, transparent 1px 7px),
    var(--void-2);
}
.crumbs {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  font-family: var(--font-display); font-size: var(--t-mark); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--hair);
  margin-bottom: var(--s-4);
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--fg); text-decoration: underline; }
.banner h1 { font-size: clamp(2rem, 1.2rem + 3.6vw, 3.8rem); max-width: 18ch; }
.banner .copy { margin-top: var(--s-4); }

/* interior blocks reused by the release page and the styleguide */
.slab { border: 1px solid var(--line); background: var(--void-2); padding: var(--s-5); }
.slab + .slab { margin-top: var(--s-4); }
.rows { display: grid; gap: 0; }
.rows li {
  display: grid; grid-template-columns: 2.5rem 1fr auto; gap: var(--s-4);
  align-items: baseline;
  border-top: 1px solid var(--line); padding: var(--s-3) 0;
  font-size: var(--t-small);
}
.rows li b { font-family: var(--font-display); font-weight: 700; color: var(--fg-strong); }
.rows li span { color: var(--muted); font-variant-numeric: tabular-nums; }
.pairs { display: grid; gap: var(--s-3); font-size: var(--t-small); }
.pairs li { display: grid; grid-template-columns: 10rem 1fr; gap: var(--s-4); border-top: 1px solid var(--line); padding-top: var(--s-3); }
.pairs b { font-family: var(--font-display); font-size: var(--t-mark); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 34rem) {
  .pairs li, .rows li { grid-template-columns: 1fr; gap: var(--s-1); }
}

/* ================================================================ RELEASE PAGE */
#release-stage-02 {
  & .lone { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
  & .lone-link {
    margin-top: var(--s-4); font-size: var(--t-small);
  }
  & .lone-link a { color: var(--muted); text-decoration-style: dotted; }
  & .lone-link a:hover { color: var(--fg); }
  & .release-feeds { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
  & .feed-link {
    display: flex; flex-direction: column; gap: 0.05rem;
    border: 1px solid var(--line); padding: 0.32rem 0.55rem;
    text-decoration: none;
  }
  & .feed-link b {
    font-family: var(--font-display); font-size: var(--t-mark); font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg);
  }
  & .feed-link span { font-size: 0.66rem; color: var(--muted); letter-spacing: 0.04em; }
  & .feed-link:hover { border-color: var(--chrome-2); background: var(--void-4); }
}
@media (min-width: 62rem) {
  #release-stage-02 .lone { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; }
}

#release-tracks-03 {
  & .tracklist {
    margin-top: var(--s-6);
    border: 1px solid var(--line);
  }
  & .track {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    gap: var(--s-4);
    align-items: baseline;
    padding: var(--s-4) var(--s-5);
    background: var(--void-2);
    border-bottom: 1px solid var(--line);
  }
  & .track:last-child { border-bottom: 0; }
  & .track:hover { background: var(--void-3); }
  & .track-no {
    font-family: var(--font-display); font-weight: 800; font-size: var(--t-mark);
    letter-spacing: 0.16em; color: var(--hair);
  }
  & .track-name { font-size: var(--t-h3); }
  & .track-note { font-size: var(--t-small); color: var(--muted); margin-top: 0.25rem; max-width: 54ch; }
  & .track-time {
    font-family: var(--font-display); font-weight: 700; font-size: var(--t-mono-num);
    color: var(--fg-strong); font-variant-numeric: tabular-nums; white-space: nowrap;
  }
}
@media (max-width: 34rem) {
  #release-tracks-03 .track { grid-template-columns: 3rem minmax(0, 1fr); }
  #release-tracks-03 .track-time { grid-column: 2; }
}

#release-credits-04 {
  & .split { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
  & .slab + .slab { margin-top: 0; }
}
@media (min-width: 58rem) {
  #release-credits-04 .split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

#release-stems-05 {
  & .stems { margin-top: var(--s-6); border-bottom: 1px solid var(--line); }
  & .stem-name { color: var(--fg-strong); }
}

#release-out-06 {
  & .release-keys { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
}

/* ================================================================ THE MANUAL */
.swatches {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin-top: var(--s-6);
}
.swatch {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: var(--s-5) var(--s-4);
  font-family: var(--font-display); font-size: var(--t-mark); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.swatch span { font-weight: 400; letter-spacing: 0.06em; opacity: 0.8; }
.swatch--ramp {
  margin-top: var(--s-4);
  background-image: var(--live); color: var(--void);
  border: 1px solid var(--line);
}
.swatch--ramp-deep { color: var(--chrome-3); }

.manual-scroll { overflow-x: auto; margin-top: var(--s-5); border: 1px solid var(--line); }
.manual-table { width: 100%; border-collapse: collapse; min-width: 42rem; }
.manual-table th, .manual-table td {
  text-align: left; padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-small); vertical-align: top;
}
.manual-table th {
  font-family: var(--font-display); font-size: var(--t-mark); font-weight: 700;
  letter-spacing: var(--track-mark); text-transform: uppercase; color: var(--muted);
  background: var(--void-2);
}
.manual-table td:first-child { color: var(--fg-strong); white-space: nowrap; }
.manual-table td { color: var(--muted); }

.manual-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4);
  margin-block: var(--s-4);
  font-size: var(--t-small);
}
.manual-type { border: 1px solid var(--line); background: var(--void-2); padding: var(--s-5); margin-top: var(--s-6); }
.manual-type > * + * { margin-top: var(--s-4); }
.manual-h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h1); line-height: var(--lh-tight); color: var(--fg-strong); letter-spacing: -0.022em; }
.manual-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h2); color: var(--fg-strong); }
.manual-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h3); color: var(--fg-strong); }

.manual-steps { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.manual-steps li {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--s-4);
  border-top: 1px solid var(--line); padding-top: var(--s-3);
  font-size: var(--t-small);
}
.manual-steps b {
  font-family: var(--font-display); font-weight: 800; font-size: var(--t-mark);
  letter-spacing: 0.14em; color: var(--hair);
}
.manual-code {
  margin-top: var(--s-4); overflow-x: auto;
  border: 1px solid var(--line); background: var(--void-2);
  padding: var(--s-4);
  font-size: 0.78rem; line-height: 1.7;
  color: var(--fg);
}
code {
  font-family: var(--font-body); font-weight: 600;
  color: var(--fg-strong);
  background: var(--void-3);
  padding: 0.05em 0.35em;
  border: 1px solid var(--line);
}
.manual-code code { background: none; border: 0; padding: 0; font-weight: 400; }
.socket--live { border-color: var(--live-2); background-image: var(--live); }

/* ================================================================ 404 */
#dead-patch-01 {
  & h1 {
    font-size: var(--t-h1); line-height: var(--lh-tight);
    letter-spacing: -0.022em; max-width: 14ch; margin-bottom: var(--s-5);
  }
  & .deadrack {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--s-3); margin-top: var(--s-7);
    border: 1px solid var(--line-strong);
    background:
      repeating-linear-gradient(90deg, rgba(216, 219, 226, 0.035) 0 1px, transparent 1px 7px),
      var(--void-2);
    padding: var(--s-4);
  }
  & .deadrack-plate {
    display: block; height: 5.5rem;
    background: var(--plate);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-plate);
  }
  & .deadrack-plate--empty {
    background: none;
    border-style: dashed;
    border-color: var(--line-strong);
    box-shadow: none;
  }
  & .deadroutes { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
  & .deadroutes li {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5);
    border-top: 1px solid var(--line); padding-top: var(--s-4);
  }
  & .deadroutes span { font-size: var(--t-small); color: var(--muted); }
}

/* ================================================================ PRINT */
@media print {
  .rail, .bay, .cable-field, .ladder, .out-plate-frame, .skip-link { display: none !important; }
  body { padding-top: 0; background: #fff; color: #000; }
  .section { break-inside: avoid; border-color: #999; }
  a { color: #000; }
}

/* ui-skills baseline typography: even line breaks, no orphan/widow lines.
   Zero-specificity :where() so it never overrides a chassis rule; progressive
   (older browsers ignore text-wrap). Headings balance, running text pretty. */
:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}
:where(body){text-wrap:pretty}