/* october tooth — main stylesheet
   monochrome: black, white, grey. no decorative colour anywhere in the chrome.
   the content — photos, paintings, audio, writing — carries the visual interest.
   type does the rest: a heavy grotesque for the wordmark, sub-line, titles and
   prose, and a mono for every number, label and caption. state is shown with a
   small dot, filled or hollow, never with colour. */

/* --script is kept, unused, for anyone who wants the copperplate sub-line back:
   AcroterionJF is a licensed Jukebox script we can't ship, so it's named first
   and a locally installed copy or an adobe fonts kit wins automatically; pinyon
   script is the self-hosted stand-in, roundhands cover a failed load. nothing
   in the chrome asks for it today, so the font is no longer preloaded. */
@font-face {
  font-family: "Pinyon Script";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/pinyon-script-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #101010;
  --ink-soft: #2e2e2e;
  --mid: #6b6b6b;
  --faint: #9b9b9b;
  --rule: #dcdcdc;
  --shade: #f3f3f3;
  --shade-hi: #e9e9e9;
  --paper: #fff;

  --sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --script: "AcroterionJF", "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;

  --gutter: 30px;
  --measure: 62ch;
}

* {
  box-sizing: border-box;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

.page {
  max-width: 860px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============ the status mark ============
   one pattern for every bit of state on the site: hollow = off / archived,
   filled = on / live. never a colour, never a badge. */

.dot {
  display: inline-block;
  flex: none;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--faint);
  border-radius: 50%;
  background: transparent;
}

.dot.is-on {
  border-color: var(--ink);
  background: var(--ink);
}

.dot.is-half {
  border-color: var(--ink);
  border-width: 3px;
  background: transparent;
}

/* ============ masthead ============ */

.masthead {
  padding: clamp(26px, 5vw, 46px) var(--gutter) 0;
}

.wordmark {
  display: block;
  color: var(--ink);
  font-size: clamp(38px, 9.4vw, 82px);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-decoration: none;
}

/* the sub-line is set in the same grotesque as the wordmark, italic and five
   pixels down from the old script line at every width, so it reads as the
   second line of one lockup rather than a separate flourish. */
.masthead-sub {
  margin: 6px 0 0;
  font-family: var(--sans);
  font-size: clamp(16px, calc(4.2vw - 5px), 25px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink);
}

/* nav — plain text, no boxes. weight and spacing do the work. */

.nav {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: clamp(18px, 3vw, 26px);
  padding-bottom: 16px;
  border-bottom: 3px solid var(--ink);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nav a {
  color: var(--mid);
  text-decoration: none;
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 5px;
}

.nav a.is-here {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* archive — hover / focus reveals the recent tapes */

.nav-drop {
  position: relative;
}

.nav-drop > a::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 7px;
  vertical-align: 2px;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
}

.nav-panel {
  position: absolute;
  top: 100%;
  left: -14px;
  z-index: 20;
  width: min(400px, calc(100vw - 2 * var(--gutter)));
  margin-top: 16px;
  padding: 14px 4px 6px;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(16, 16, 16, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
}

/* a transparent bridge across the gap, so the pointer can travel from the
   link into the panel without the panel closing under it */
.nav-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
}

.nav-drop:hover .nav-panel,
.nav-drop:focus-within .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-panel-key {
  display: block;
  padding: 0 14px 10px;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--faint);
}

.nav-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  text-transform: none;
  letter-spacing: 0;
}

.nav-row:hover,
.nav-row:focus-visible {
  background: var(--shade);
  text-decoration: none;
}

.nav-row-no {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.nav-row-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}

.nav-row-date {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--faint);
}

.nav-panel-all {
  display: block;
  margin-top: 6px;
  padding: 11px 14px;
  border-top: 1px solid var(--rule);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--ink) !important;
}

.nav-panel-empty {
  display: block;
  padding: 0 14px 12px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--mid);
}

.page-body {
  flex: 1;
}

/* ============ footer ============ */

.site-footer {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-top: 70px;
  padding: 22px var(--gutter) 40px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.site-footer a {
  color: var(--mid);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-footer-mark {
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.1em;
}

/* ============ header image — full width, given room ============ */

.header-image {
  margin-top: clamp(22px, 4vw, 38px);
  background: var(--shade);
}

.header-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ============ date + title block ============ */

.tape-meta {
  padding: clamp(24px, 4vw, 40px) var(--gutter) 0;
}

.tape-date {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
}

.tape-title {
  margin: 10px 0 0;
  font-size: clamp(32px, 6.6vw, 58px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.032em;
  color: var(--ink);
}

/* ============ the deck ============
   no chassis, no glass, no lamps. a heavy rule, a large counter, and the
   tracklist doing the work. */

.deck {
  margin: clamp(28px, 5vw, 48px) 0 0;
  padding: 0 var(--gutter);
}

.deck-plate {
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 20px 0 22px;
}

.deck-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(16px, 4vw, 46px);
}

.deck-cue {
  min-width: 0;
  flex: 1;
}

.deck-state {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mid);
}

.deck-word {
  color: var(--ink);
}

.deck-track {
  margin: 10px 0 0;
  font-size: clamp(19px, 3vw, 26px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.018em;
}

.deck-of {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

/* the now-playing mark — a filled ball that pops in and spins while the tape
   runs. same monochrome logic as the dots: solid = running. */

.np {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  opacity: 0;
  transform: scale(0.5);
  transform-origin: left center;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.deck.is-playing .np {
  opacity: 1;
  transform: scale(1);
  animation: np-pop 0.42s cubic-bezier(0.18, 1.5, 0.4, 1) both;
}

/* the hop and the spin ride on separate elements — one transform each */

.np-hop {
  display: block;
  flex: none;
  line-height: 0;
}

.deck.is-playing .np-hop {
  animation: np-hop 0.78s ease-in-out infinite;
}

.np-ball {
  display: block;
  width: 22px;
  height: 22px;
  animation: np-spin 1.1s linear infinite;
  animation-play-state: paused;
}

.np-ball-body {
  fill: var(--ink);
}

.np-ball-pip {
  fill: var(--paper);
}

.deck.is-playing .np-ball {
  animation-play-state: running;
}

@keyframes np-spin {
  to { transform: rotate(360deg); }
}

@keyframes np-pop {
  0% { opacity: 0; transform: scale(0.4); }
  60% { opacity: 1; transform: scale(1.14); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes np-hop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.np-name {
  max-width: 30ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ink);
  font-weight: 700;
}

/* clock */

.deck-clock {
  flex: none;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.deck-elapsed {
  display: block;
  font-family: var(--mono);
  font-size: clamp(34px, 7.4vw, 56px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.deck-len {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--faint);
}

.deck-flag {
  display: none;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
}

.deck-flag.is-on {
  display: block;
}

/* scrub — a hairline that fills as the tape runs */

.scrub-wrap {
  margin-top: 22px;
}

.scrub {
  --p: 0%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 16px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.scrub::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(to right, var(--ink) var(--p), var(--rule) var(--p));
}

.scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 3px;
  height: 15px;
  margin-top: -6px;
  border: 0;
  border-radius: 0;
  background: var(--ink);
}

.scrub::-moz-range-track {
  height: 3px;
  background: var(--rule);
}

.scrub::-moz-range-progress {
  height: 3px;
  background: var(--ink);
}

.scrub::-moz-range-thumb {
  width: 3px;
  height: 15px;
  border: 0;
  border-radius: 0;
  background: var(--ink);
}

.scrub:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* transport — text keys, no boxes */

.deck-controls {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.transport {
  display: flex;
  align-items: stretch;
  gap: clamp(14px, 3vw, 26px);
}

/* the transport keys are the loudest control on the page: a large drawn glyph
   over the same small mono legend, still on a hairline rather than in a box */

.key {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 20px 13px;
  border: 2px solid var(--rule);
  background: none;
  cursor: pointer;
  color: var(--mid);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* play is the page's primary control, so it keeps full ink at rest and runs
   a size larger than stop */

.key--play {
  color: var(--ink);
  border-color: var(--ink);
}

.key:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--shade);
}

.key:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.key.is-down {
  color: var(--ink);
  font-weight: 700;
  border-color: var(--ink);
}

.key-glyph {
  display: block;
  line-height: 0;
}

.key-icon {
  display: block;
  width: clamp(15px, 3.4vw, 19px);
  height: clamp(15px, 3.4vw, 19px);
  fill: currentColor;
}

/* play doubles as pause — the glyph follows the legend */

.key--play .key-icon--pause,
.key--play.is-down .key-icon--play {
  display: none;
}

.key--play.is-down .key-icon--pause {
  display: block;
}

/* level — the one remaining slider, a hairline like the scrub */

.level {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 1 200px;
}

.level-key {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}

.level input[type="range"] {
  --p: 85%;
  flex: 1;
  min-width: 90px;
}

/* tracklist */

.tape-contents {
  padding: 0 var(--gutter);
}

.contents-key {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
}

.tracklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tracklist li + li {
  border-top: 1px solid var(--rule);
}

.track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 2px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ink);
  font-family: inherit;
  text-align: left;
}

.track:hover {
  background: var(--shade);
}

.track:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.deck.is-playing .track.is-cued .dot {
  animation: beat 2.4s ease-in-out infinite;
}

@keyframes beat {
  50% { opacity: 0.28; }
}

/* a smaller cousin of the now-playing ball, bouncing its way along the row of
   whichever track is running. it travels in the empty lane below the type, so
   it never crosses a word. */

.hop-ball {
  position: absolute;
  left: 2px;
  bottom: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
}

.deck.is-playing .track.is-cued .hop-ball {
  opacity: 1;
  animation: hop-travel 4.2s ease-in-out infinite alternate,
             hop-bounce 0.66s infinite;
}

@keyframes hop-travel {
  from { left: 2px; }
  to { left: calc(100% - 12px); }
}

@keyframes hop-bounce {
  0% { bottom: 2px; animation-timing-function: cubic-bezier(0.22, 0.7, 0.36, 1); }
  50% { bottom: 12px; animation-timing-function: cubic-bezier(0.64, 0, 0.78, 0.34); }
  100% { bottom: 2px; }
}

.track-no {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.track.is-cued .track-no {
  color: var(--mid);
}

.track-title {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.track.is-cued .track-title {
  font-weight: 800;
}

.track-duration {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--mid);
  font-variant-numeric: tabular-nums;
}

/* listen links — plain underlined text */

.listen-links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding: 22px var(--gutter) 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.listen-links a {
  color: var(--mid);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
}

.listen-links a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ============ notes ============ */

.tape-notes {
  padding: clamp(34px, 6vw, 56px) var(--gutter) 0;
}

.notes-key {
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mid);
}

.notes-body {
  max-width: var(--measure);
  color: var(--ink-soft);
}

.notes-body p {
  margin: 0 0 1.1em;
  font-size: 18px;
  line-height: 1.62;
}

.notes-body p:first-child {
  font-size: 21px;
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -0.012em;
}

.notes-body p:last-child {
  margin-bottom: 0;
}

/* ============ media ============
   no cards, no borders, no forced squares. each image keeps its own shape;
   the caption line is what unifies the run. */

.media-flow {
  display: flex;
  flex-direction: column;
  gap: clamp(34px, 5vw, 58px);
  padding: clamp(34px, 6vw, 58px) var(--gutter) 0;
}

.media-card {
  margin: 0;
  width: 100%;
}

/* each image is as wide as its own shape allows: a landscape photo fills the
   column, a tall one is held back so it can't run off the screen — and the
   caption line under it always matches the image's real width. --ar comes from
   the file's own dimensions, read at build time. */
.media-card--img {
  width: min(100%, calc(82vh * var(--ar, 10)));
  max-width: 100%;
}

.media-img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--shade);
}

.media-video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--shade);
}

.media-embed {
  position: relative;
  width: 100%;
  background: var(--shade);
}

.media-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* caption — number + title, one typographic pattern for every item */

.media-cap {
  margin-top: 12px;
  padding-top: 9px;
  border-top: 1px solid var(--ink);
}

.cap-line {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid);
}

.cap-no {
  flex: none;
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cap-title {
  flex: 1;
  min-width: 0;
}

/* a note attached to one item, revealed on click */

.cap {
  display: block;
}

.cap > summary {
  cursor: pointer;
  list-style: none;
}

.cap > summary::-webkit-details-marker {
  display: none;
}

.cap > summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.cap-more {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--faint);
  font-size: 10px;
  letter-spacing: 0.2em;
}

.cap-more::after {
  content: "+";
  font-size: 12px;
  line-height: 1;
  color: var(--ink);
}

.cap[open] .cap-more::after {
  content: "\2212";
}

.cap > summary:hover .cap-more,
.cap > summary:hover .cap-title {
  color: var(--ink);
}

.cap-note {
  max-width: var(--measure);
  padding: 12px 0 4px;
  color: var(--ink-soft);
}

.cap-note p {
  margin: 0 0 0.9em;
  font-size: 16px;
  line-height: 1.6;
}

.cap-note p:last-child {
  margin-bottom: 0;
}

.media-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}

.media-link:hover {
  color: var(--mid);
}

/* ============ prev / next + forward note ============
   prev / next carries its own weight — a heavy rule and larger keys. the
   forward line stays quiet underneath it. */

.tape-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(48px, 7vw, 76px);
  padding: 24px var(--gutter);
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}

.pager-key {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: clamp(14px, 2.6vw, 17px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.pager-key:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.pager-key.is-off {
  opacity: 0;
  pointer-events: none;
}

.forward-note {
  padding: 20px var(--gutter) 0;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--mid);
}

.forward-note a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ============ archive — a dense data table ============ */

.archive-list {
  padding: clamp(26px, 4vw, 40px) var(--gutter) 0;
}

.archive-head {
  margin: 0 0 18px;
  font-size: clamp(30px, 6vw, 50px);
  font-weight: 800;
  letter-spacing: -0.032em;
  text-transform: uppercase;
  line-height: 1;
}

.archive {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.archive th {
  padding: 0 10px 8px;
  border-bottom: 2px solid var(--ink);
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
  white-space: nowrap;
}

.archive td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}

.archive tbody tr:nth-child(even) {
  background: var(--shade);
}

.archive tbody tr:hover {
  background: var(--shade-hi);
}

.archive .c-dot {
  width: 26px;
  padding-right: 0;
}

.archive .c-no {
  width: 52px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--mid);
}

.archive .c-title a {
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.012em;
  text-decoration: none;
}

.archive .c-title a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.archive .c-tracks,
.archive .c-date {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  white-space: nowrap;
}

.archive .c-tracks {
  width: 62px;
  text-align: right;
}

.archive .c-date {
  width: 118px;
  text-align: right;
}

.archive-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 16px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

.archive-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.archive-empty {
  font-size: 18px;
  color: var(--mid);
}

/* ============ about + empty state ============ */

.about-body {
  max-width: var(--measure);
  padding: clamp(26px, 4vw, 44px) var(--gutter) 0;
  color: var(--ink-soft);
}

.about-head {
  margin: 0 0 22px;
  font-size: clamp(30px, 6vw, 50px);
  font-weight: 800;
  letter-spacing: -0.032em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink);
}

.about-body p {
  margin: 0 0 1.1em;
  font-size: 18px;
  line-height: 1.62;
}

.about-body p:first-of-type {
  font-size: 21px;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.empty-state {
  max-width: var(--measure);
  padding: clamp(26px, 4vw, 44px) var(--gutter) 0;
  color: var(--ink-soft);
}

.empty-key {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mid);
}

.empty-state p {
  font-size: 18px;
  line-height: 1.6;
}

.empty-state a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============ mailing list ============ */

.join-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 18px;
  max-width: var(--measure);
  margin-top: 40px;
  padding: 22px var(--gutter) 0;
  border-top: 1px solid var(--rule);
}

.join-form input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  border-bottom: 2px solid var(--ink);
  background: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
}

.join-form input::placeholder {
  color: var(--faint);
}

.join-form input:focus {
  outline: none;
  background: var(--shade);
}

.join-form button {
  flex: none;
  padding: 10px 20px;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

    .join-powered-by {
      margin: 6px 0 0;
      font-size: 10px;
      color: var(--text-muted, #666);
    }

    .join-powered-by a {
      color: inherit;
    }

    .join-form button:hover {
  background: var(--ink-soft);
}

/* ============ narrow screens ============ */

@media (max-width: 620px) {
  :root {
    --gutter: 20px;
  }
   
  .home-panel {
    max-width: 300px;
  }

   .home-hero {
  padding-top: 60px;
}
   
  .deck-top {
    flex-direction: column;
    gap: 18px;
  }

  .deck-clock {
    text-align: left;
  }

  .deck-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .transport {
    gap: 14px;
  }

  .key {
    flex: 1;
  }

  .level {
    flex: 1 1 auto;
  }

  .nav {
    gap: 18px;
  }

  .nav-panel {
    left: 0;
  }

  .archive .c-tracks {
    display: none;
  }

  .archive .c-date {
    width: 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .np-ball,
  .deck.is-playing .np-ball,
  .deck.is-playing .np-hop,
  .deck.is-playing .track.is-cued .dot {
    animation: none;
  }

  .deck.is-playing .np {
    animation: none;
    transform: none;
  }

  /* the row already carries a filled dot, so the travelling ball just goes */
  .deck.is-playing .track.is-cued .hop-ball {
    opacity: 0;
    animation: none;
  }

  .np,
  .nav-panel {
    transition: opacity 0.14s ease;
    transform: none;
  }
}

/* ============ homepage ============ */

.home-hero {
  min-height: 100dvh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.home-panel {
  background: var(--paper);
  border: 1px solid var(--ink);
  max-width: 380px;
  width: 100%;
}

.home-panel-bar {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px;
}

.home-panel-body {
  padding: 20px;
}

.home-tagline {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink);
  margin: 0 0 20px;
}

.home-links {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--mono);
  font-size: 13px;
}

.home-links a {
  color: var(--ink);
  text-decoration: underline;
}

.home-links a:hover {
  color: var(--ink-soft);
}

.home-empty {
  color: var(--text-muted, #666);
}

.home-show {
  border-top: 1px solid var(--ink);
  padding-top: 16px;
}

.home-show-poster {
  width: 100%;
  display: block;
  margin-bottom: 8px;
}

.home-show-text {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
}

a.home-show-text {
  text-decoration: underline;
}

.home-about-link {
  margin-top: 0;
  font-family: var(--mono);
  font-size: 13px;
}

.home-about-link a {
  color: var(--ink);
  text-decoration: underline;
}

.home-hero {
   width: 100vw;
   margin-left: calc(50% - 50vw);
   margin-right: calc(50% - 50vw);
}

/* ============ shop ============ */

.shop-body {
  padding: 80px 20px;
  text-align: center;
}

.shop-status {
  margin: 0 0 20px;
}

.shop-note {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink);
}

.shop-note a {
  color: var(--ink);
  text-decoration: underline;
}

/* ============ shows ============ */

.shows-list {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

.show-entry {
  border-top: 1px solid var(--ink);
  padding: 24px 0;
}

.show-entry:first-of-type {
  border-top: none;
}

.show-poster {
  width: 100%;
  display: block;
  margin-bottom: 10px;
}

.show-text {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
}

a.show-text {
  text-decoration: underline;
}

.shows-empty {
  font-family: var(--mono);
  color: var(--text-muted, #666);
}