/* ==========================================================================
   RABBIT HØLE — the shared ink
   One stylesheet for every interior page. The holding page (/index.html)
   carries its own copy of this ink and is left alone until the site opens.

   The law: flat ink. Paper doesn't glow. Names are serif, labels are mono.
   Grouping by rules between things, never borders around them.
   Hierarchy by scale. Decoration by ink.
   ========================================================================== */

:root {
  --paper: #f1ebdd;
  --ink: #171614;
  --blood: #8f1d2c;
  --cobalt: #164d87;
  --fade: #6d6759; /* photocopy grey for paper stock — metadata and hairlines only */
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --measure: 40rem;
}

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

html {
  min-width: 20rem;
  background: var(--paper);
  color: var(--ink);
}

body {
  margin: 0;
  min-height: 100svh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 16% 18%, rgb(23 22 20 / 0.025) 0 0.7px, transparent 0.9px) 0 0 / 6px 6px,
    radial-gradient(circle at 78% 67%, rgb(23 22 20 / 0.02) 0 0.6px, transparent 0.9px) 0 0 / 9px 9px,
    var(--paper);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.6;
}

/* Photocopier pass over everything, uniformly. */
body::after {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  content: "";
  opacity: 0.15;
  background-image:
    repeating-linear-gradient(3deg, transparent 0 3px, rgb(23 22 20 / 0.028) 4px),
    repeating-linear-gradient(93deg, transparent 0 5px, rgb(255 255 255 / 0.18) 6px);
  mix-blend-mode: multiply;
}

.page {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
  padding-inline: var(--gutter);
}

/* ---------- the two type registers ---------- */

.display,
.wordmark,
h1,
h2 {
  font-family: "Arial Narrow", "Liberation Sans Narrow", Impact, sans-serif;
  font-stretch: condensed;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.mono,
.metadata,
.footer-copy,
.dateline,
.nav {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

/* ---------- masthead (interior size) ---------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 4vw, 4rem);
  min-height: clamp(4.5rem, 9vh, 6.5rem);
  border-bottom: 2px solid var(--ink);
}

.brand {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1vw, 1rem);
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}

.mini-listener {
  width: clamp(1.5rem, 2.2vw, 2.1rem);
  height: auto;
  flex: 0 0 auto;
}

.wordmark {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  line-height: 0.84;
  letter-spacing: -0.055em;
}

.brandtext {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

.strap {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(0.68rem, 0.85vw, 0.8rem);
  letter-spacing: 0.01em;
  color: var(--ink);
}

.metadata {
  margin: 0;
  font-size: clamp(0.62rem, 0.9vw, 0.85rem);
  text-align: right;
}

.catalogue {
  color: var(--blood);
}

.slash {
  padding-inline: 0.8em;
}

/* ---------- links: printed, not chrome ---------- */

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

a:hover,
a:focus-visible {
  color: var(--blood);
}

/* ---------- the main column ---------- */

main {
  width: 100%;
  max-width: 56rem;
  margin-inline: auto;
  padding-block: clamp(2rem, 5vh, 4.5rem) clamp(2.5rem, 6vh, 5rem);
}

/* ---------- the stream (articles index) ---------- */

.section-head {
  margin: 0 0 0.4rem;
  font-size: clamp(2.6rem, 5.5vw, 4.6rem);
  letter-spacing: -0.055em;
}

.section-note {
  max-width: var(--measure);
  margin: 0 0 2.5rem;
  font-style: italic;
  color: var(--fade);
}

.entry {
  padding-block: 1.6rem 1.9rem;
  border-top: 1px solid var(--ink);
}

.entry:first-of-type {
  border-top: 2px solid var(--ink);
}

.entry .dateline {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  color: var(--fade);
}

.entry h2 {
  margin: 0 0 0.45rem;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  letter-spacing: -0.045em;
}

.entry h2 a {
  text-decoration: none;
}

.entry h2 a:hover,
.entry h2 a:focus-visible {
  color: var(--blood);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.08em;
}

.entry .standfirst {
  max-width: var(--measure);
  margin: 0;
  font-style: italic;
  font-size: 1.02rem;
}

/* The lead piece runs bigger. Hierarchy by scale, one item large. */
.entry.lead h2 {
  font-size: clamp(2.8rem, 7vw, 5.6rem);
  letter-spacing: -0.055em;
}

/* Empty state — the honest version. */
.nothing {
  padding-block: 3.5rem 4rem;
  border-top: 2px solid var(--ink);
}

.nothing .stamp {
  margin: 0 0 1.2rem;
}

.nothing p {
  max-width: var(--measure);
  margin: 0;
  font-style: italic;
  color: var(--fade);
}

/* ---------- the stamp ---------- */

.stamp {
  display: inline-block;
  margin: 0;
  border: clamp(2px, 0.2vw, 3px) solid var(--blood);
  padding: 0.3em 0.55em 0.27em;
  color: var(--blood);
  font-family: "Arial Narrow", "Liberation Sans Narrow", Impact, sans-serif;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  font-stretch: condensed;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: rotate(-0.2deg);
  box-shadow: inset 0 0 0 1px rgb(143 29 44 / 0.14);
}

/* Section stamps — a column's name is a mode stamp. Ink, never blood:
   seven red stamps a week would spend the accent everywhere. */
.stamp--ink {
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgb(23 22 20 / 0.14);
}

.stamp--small {
  font-size: clamp(0.95rem, 1.6vw, 1.35rem);
  border-width: 2px;
  padding: 0.32em 0.55em 0.28em;
}

/* ---------- an article page ---------- */

.piece-head {
  margin-block: 0 2.6rem;
}

.piece-head .dateline {
  margin: 0 0 0.9rem;
  font-size: 0.72rem;
  color: var(--fade);
}

.piece-head h1 {
  max-width: 14ch;
  margin: 0 0 1rem;
  font-size: clamp(3rem, 7.5vw, 6.4rem);
  line-height: 0.84;
  letter-spacing: -0.06em;
}

.piece-head .standfirst {
  max-width: var(--measure);
  margin: 0;
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
}

.piece-body {
  max-width: var(--measure);
}

.piece-body p {
  margin-block: 0 1.1em;
  font-size: 1.02rem;
}

.piece-body h2 {
  margin-block: 2.2em 0.6em;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  letter-spacing: -0.03em;
}

.piece-body blockquote {
  margin: 1.6em 0;
  padding-left: 1.2rem;
  border-left: 2px solid var(--ink);
  font-style: italic;
}

.piece-body hr {
  width: 4rem;
  margin: 2.2em 0;
  border: 0;
  border-top: 2px solid var(--ink);
}

/* The plate — a piece's photograph, photocopied and pasted flat. */
.plate {
  max-width: var(--measure);
  margin: 0 0 2.4rem;
}

.plate img {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--ink);
  filter: contrast(1.04);
}

.plate .photocredit {
  margin: 0.55rem 0 0;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  text-align: right;
  color: var(--fade);
}

/* The verdict. Inline, blood, slightly askew — a rubber stamp on the page. */
.taped {
  display: inline-block;
  margin-left: 0.3rem;
  transform: rotate(-2.5deg);
}

/* The record card — the fact box a zine runs beside a review.
   A box because a card IS a box; mono facts, serif titles, dotted leaders. */
.recordcard {
  max-width: var(--measure);
  margin: 2.6rem 0 0;
  border: 2px solid var(--ink);
  padding: 1.1rem 1.3rem 1.2rem;
}

.recordcard .rc-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.35rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.recordcard .rc-facts {
  margin: 0 0 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--ink);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--fade);
}

.rc-track {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding-block: 0.18rem;
  font-size: 0.95rem;
}

.rc-track .no {
  flex: 0 0 1.3rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--fade);
}

.rc-track .leader {
  flex: 1;
  min-width: 1.5rem;
  border-bottom: 1px dotted var(--fade);
  transform: translateY(-0.25em);
}

.rc-track .len {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--fade);
}

.rc-track .note {
  font-style: italic;
  font-size: 0.85rem;
  color: var(--fade);
  white-space: nowrap;
}

.rc-track .t a {
  color: inherit;
  text-decoration: none;
}

.rc-track .t a:hover,
.rc-track .t a:focus-visible {
  color: var(--blood);
  text-decoration: underline;
}

@media (max-width: 600px) {
  .rc-track {
    flex-wrap: wrap;
  }

  .rc-track .note {
    white-space: normal;
  }
}

/* The shop's hello — the colophon set the way the app says it:
   the whole page in the warm italic, addressed to the reader. */
.hello p {
  max-width: var(--measure);
  margin: 0 0 1.15em;
  font-style: italic;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.6;
}

/* The indicia — the colophon's small-print card. Shares the record card's
   box; rows are label (mono), leader, value (serif). */
.indicia .row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding-block: 0.24rem;
}

.indicia .k {
  flex: 0 0 auto;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--fade);
}

.indicia .leader {
  flex: 1;
  min-width: 1.5rem;
  border-bottom: 1px dotted var(--fade);
  transform: translateY(-0.25em);
}

.indicia .v {
  font-size: 0.95rem;
  text-align: right;
}

/* Small Ads — set as a real classifieds page: narrow ruled columns,
   mixed ad sizes, category heads, box numbers. No tilt: ads in strict
   columns sit straight (the Settings lesson). */
.smallads-sheet {
  max-width: 46rem;
  margin-top: 0.4rem;
  border-top: 2px solid var(--ink);
  padding-top: 1.4rem;
  columns: 2;
  column-gap: 2.4rem;
  column-rule: 1px solid var(--ink);
}

.smallads-sheet .ad {
  break-inside: avoid;
  margin: 0 0 1.5rem;
}

.smallads-sheet .ad p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

/* The display ad: boxed, larger — the one that paid for its space. */
.ad--display {
  border: 2px solid var(--ink);
  padding: 1.05rem 1.1rem 0.75rem;
}

.ad--display p:first-child {
  font-size: 1.26rem;
  line-height: 1.4;
}

/* A line ad: a category head, a rule, the copy. */
.ad--line .ad-cat {
  margin: 0 0 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--ink);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* The coupon: dashed, because it's asking for something. */
.ad--coupon {
  border: 2px dashed var(--ink);
  padding: 1rem 1.1rem 0.75rem;
}

/* Every ad carries its box number, small and grey, bottom right. */
.smallads-sheet .boxno {
  margin-top: 0.5rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--fade);
  text-align: right;
}

@media (max-width: 600px) {
  .smallads-sheet {
    columns: 1;
  }
}

/* The dig notebook — Tonight We Went Digging. The piece IS the log:
   every cut annotated in surfacing order; the keeper's entry breaks open. */
.digline {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--measure);
  margin: 0 0 0.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--ink);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.dig {
  max-width: var(--measure);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dig li {
  padding: 0.85rem 0 0.95rem;
  border-bottom: 1px solid var(--ink);
}

.dig .cutline {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
}

.dig .no {
  flex: 0 0 1.4rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--fade);
}

.dig .artist {
  font-weight: 700;
  font-size: 1.02rem;
}

.dig .cut {
  font-style: italic;
  font-size: 1.02rem;
}

.dig .leader {
  flex: 1;
  min-width: 1.5rem;
  border-bottom: 1px dotted var(--fade);
  transform: translateY(-0.25em);
}

.dig .verdict {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--fade);
}

.dig .note {
  margin: 0.35rem 0 0 2rem;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--fade);
}

/* The keeper: reversed out — the shop's permanent "this one" —
   and its note set roman, full ink. (Class is `keeper`, NOT `taped`:
   the stamp's rotation class must never land on a row.) */
.dig li.keeper .cutline {
  background: var(--ink);
  color: var(--paper);
  padding: 0.35rem 0.5rem;
  margin-inline: -0.5rem;
}

.dig li.keeper .no,
.dig li.keeper .verdict {
  color: var(--paper);
}

.dig li.keeper .leader {
  border-color: rgb(128 128 128 / 0.6);
}

.dig li.keeper .note {
  margin-top: 0.8rem;
  font-style: normal;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink);
}

.dig .verdict.veto {
  color: var(--blood);
}

/* THE NIGHT PAGE — the one inverted plate in the print run.
   The app's Deep End palette bleeding into print. Swapping the four
   ink tokens flips the whole system; the keeper bar comes free. */
body.night {
  --paper: #0a0908;
  --ink: #e8e2d3;
  --blood: #c03b2e;
  --fade: #8a857a;
  background: var(--paper);
  color: var(--ink);
}

/* The photocopier on a negative: speckle, drum streaks, scan lines. */
body.night::after {
  opacity: 0.5;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 16% 18%, rgb(232 226 211 / 0.05) 0 0.7px, transparent 1px) 0 0 / 5px 5px,
    radial-gradient(circle at 78% 67%, rgb(232 226 211 / 0.04) 0 0.6px, transparent 1px) 0 0 / 9px 9px,
    repeating-linear-gradient(2deg, transparent 0 2px, rgb(232 226 211 / 0.022) 3px),
    repeating-linear-gradient(91deg, transparent 0 70px, rgb(232 226 211 / 0.018) 95px, transparent 130px),
    repeating-linear-gradient(89deg, transparent 0 220px, rgb(232 226 211 / 0.012) 260px, transparent 310px);
}

/* Toner dust: fixed-seed turbulence, tiled. */
body.night::before {
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  content: "";
  opacity: 0.05;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='34'/%3E%3CfeColorMatrix values='0 0 0 0 0.91 0 0 0 0 0.89 0 0 0 0 0.83 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* HEAVY ROTATION — Wednesday. The only column about repeat listening,
   the only one with a future tense. NOT a chart: no positions, no play
   counts, no movement, and NO dotted leaders (a leader joins a label to
   a figure, and there are no figures on this page). Light paper only. */

/* The memorial band. FOR AN ARTIST ALREADY IN HEAVY ROTATION THE WEEK
   THEY DIED. If that condition is not met, no band. Never red. Never on
   body.night (the band is this column's, and this column prints on paper). */
.band--memorial {
  max-width: var(--measure);
  margin: 1.6rem 0 1.4rem;
  padding: 0.8rem 0.6rem 0.7rem;
  background: var(--ink);
  color: var(--paper);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  text-align: center;
}

/* ON THE DECK head (cf. .digline). */
.rotline {
  max-width: var(--measure);
  margin: 0 0 1.6rem;
  padding: 0.7rem 0 0.6rem;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid rgb(23 22 20 / 0.22);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.rotline b {
  display: block;
  font-weight: 600;
}

.rotline span {
  display: block;
  margin-top: 0.25rem;
  color: var(--fade);
}

/* Connector lines are prose, not labels: serif italic, full ink. */
.leadin {
  max-width: var(--measure);
  margin: 0 0 1.2rem;
  font-style: italic;
  font-size: 1.1rem;
}

/* The one that broke open. */
.rot-lead {
  max-width: var(--measure);
  margin: 0 0 2.2rem;
}

.rot-lead .who {
  display: block;
  margin-bottom: 0.1rem;
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1.05;
}

.rot-lead .cut {
  margin: 0 0 0.7rem;
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.2;
}

/* Cut titles link out to Apple Music: quiet hairline, not the full underline. */
.rot-lead .cut a,
.deck .cut a,
.stack .cut a {
  text-decoration: none;
  border-bottom: 1px solid rgb(23 22 20 / 0.22);
}

.rot-lead .cut a:hover,
.rot-lead .cut a:focus-visible,
.deck .cut a:hover,
.deck .cut a:focus-visible,
.stack .cut a:hover,
.stack .cut a:focus-visible {
  color: var(--blood);
  border-color: var(--blood);
}

/* Where a chart would have put figures: a mono line of context. */
.rot-lead .figs {
  margin: 0 0 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgb(23 22 20 / 0.22);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--fade);
}

.rot-lead p.body {
  margin: 0 0 0.85rem;
}

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

/* The deck: what has been on. Unnumbered, unranked. */
.deck {
  max-width: var(--measure);
  margin: 0 0 2.2rem;
  padding: 0;
  list-style: none;
}

.deck li {
  padding: 0.9rem 0 0.85rem;
  border-bottom: 1px solid rgb(23 22 20 / 0.12);
}

/* Artist and title are ONE unit and never separate; whatever follows
   (the taped flag, the source) is what wraps. */
.deck .head {
  white-space: nowrap;
}

.deck .who {
  font-weight: 700;
  font-size: 1.02rem;
}

.deck .cut {
  font-style: italic;
  font-size: 1.02rem;
}

.deck .src,
.stack .src {
  margin-left: 0.6rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--fade);
  white-space: nowrap;
}

/* RED BUDGET: the taped flag (a callback to a tape) is the page's one
   red mark, and only when a single cut carries it. Two or more and they
   all set in ink: add class `manytaped` to the .deck. Same law family as
   the dig's TAPED stamp. (Class is `taped-flag`, never `taped`.) */
.deck .taped-flag {
  margin-left: 0.6rem;
  padding: 0.15rem 0.35rem 0.1rem;
  border: 1px solid var(--blood);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--blood);
  white-space: nowrap;
}

.deck.manytaped .taped-flag {
  border-color: rgb(23 22 20 / 0.22);
  color: var(--fade);
}

.deck .note,
.stack .note {
  max-width: 58ch;
  margin: 0.35rem 0 0;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--fade);
}

/* STACKED UP: the queue. A section heading in the display face
   (hierarchy by scale; a second reversed band would compete with the
   memorial band). All one artist: the head carries the name, entries
   are titles only. */
.blockhead {
  max-width: var(--measure);
  margin: 0 0 0.2rem;
  padding-top: 1rem;
  border-top: 2px solid var(--ink);
  font-family: "Arial Narrow", "Liberation Sans Narrow", Impact, sans-serif;
  font-size: clamp(1.7rem, 3.4vw, 2.1rem);
  font-stretch: condensed;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.blocknote {
  max-width: var(--measure);
  margin: 0 0 1.3rem;
  font-style: italic;
  font-size: 1.1rem;
}

.stack {
  max-width: var(--measure);
  margin: 0 0 1.8rem;
  padding: 0;
  list-style: none;
}

.stack li {
  padding: 0.7rem 0 0.65rem;
  border-bottom: 1px solid rgb(23 22 20 / 0.12);
}

.stack .cut {
  font-style: italic;
  font-size: 1.02rem;
}

/* The foot line mirrors the lead-in: same voice, same face. */
.counted {
  max-width: var(--measure);
  margin: 0 0 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(23 22 20 / 0.22);
  font-style: italic;
  font-size: 1.1rem;
}

/* Filed under — the crate dividers a piece sits behind.
   The label is mono (it's a label); the tags are serif italic (they're names). */
.filed {
  max-width: var(--measure);
  margin-top: 2.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--ink);
  font-size: 1.02rem;
}

.filed .label {
  margin-right: 0.6rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--fade);
}

.filed a {
  font-style: italic;
  text-decoration: none;
}

.filed a:hover,
.filed a:focus-visible {
  color: var(--blood);
  text-decoration: underline;
}

.filed .sep {
  padding-inline: 0.45em;
  color: var(--fade);
}

/* A crate's own page (/tags/<slug>/): the divider name is a NAME, so it
   sets in serif — the one page head in the site that isn't condensed caps. */
h1.crate-name {
  max-width: 18ch;
  font-family: Georgia, "Times New Roman", serif;
  font-stretch: normal;
  font-weight: 700;
  font-size: clamp(2.5rem, 5.2vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-transform: none;
}

/* The crates (/tags/) — every divider in the shop.
   Dotted leaders and right-hand figures: statement language, index job. */
.crates {
  max-width: 46rem;
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: clamp(2rem, 5vw, 4rem);
}

.crate-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  break-inside: avoid;
  padding-block: 0.4rem;
}

.crate-row .name {
  font-size: 1.1rem;
  text-decoration: none;
}

.crate-row .name:hover,
.crate-row .name:focus-visible {
  color: var(--blood);
  text-decoration: underline;
}

.crate-row .leader {
  flex: 1;
  min-width: 2rem;
  border-bottom: 1px dotted var(--fade);
  transform: translateY(-0.25em);
}

.crate-row .count {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  color: var(--fade);
}

@media (max-width: 600px) {
  .crates {
    columns: 1;
  }
}

/* End mark. The interior colophon glyph. */
.endmark {
  margin-top: 2.6rem;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1.4rem;
}

/* ---------- footer ---------- */

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: clamp(3.5rem, 7vh, 5rem);
  padding-block: 1rem;
  border-top: 2px solid var(--ink);
}

.footer-copy {
  margin: 0;
  font-size: clamp(0.62rem, 0.9vw, 0.8rem);
}

.nav {
  margin: 0 0 0 auto;
  font-size: clamp(0.62rem, 0.9vw, 0.8rem);
}

.nav a {
  text-decoration: none;
}

.nav a:hover,
.nav a:focus-visible {
  text-decoration: underline;
}

.nav .here {
  color: var(--blood);
}

/* ---------- accessibility & small screens ---------- */

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 20;
  padding: 0.75rem 1rem;
  color: var(--paper);
  background: var(--ink);
  font-family: sans-serif;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

@media (max-width: 600px) {
  .masthead {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.4rem;
    padding-block: 1rem;
  }

  .metadata {
    text-align: left;
  }
}

@media (prefers-contrast: more) {
  body::after {
    display: none;
  }
}

@media print {
  body::after {
    display: none;
  }
}

/* ==========================================================================
   THE LONG WAY ROUND — Thursday's recall sheet.
   Scoped to body.lwr where it has to override the shared ink; everything
   else is this column's own furniture. Full spec in the project doc
   claude/the-long-way-round-format.md.
   ========================================================================== */

/* THIS COLUMN RUNS THE FULL PAGE WIDTH, gutter to gutter, so every rule on
   it lines up with the masthead's. That is what makes Thursday physically
   wider than Tuesday and Wednesday: density, not decoration. Nothing on the
   page is long-form prose, so the wide measure costs nothing (the closing
   line keeps its own cap). */
body.lwr main {
  max-width: none;
}

/* The filed-under list is capped at the measure everywhere else; on a
   full-bleed sheet that leaves it stranded mid-page, so it runs the width
   here too. The closing line keeps its cap: one short italic sentence
   floated across 70rem would read as a stray. */
body.lwr .filed {
  max-width: none;
}

/* ====================================================================
   THE RECALL SHEET — The Long Way Round, Thursday.

   The page-type: the sheet taped to the side of a desk that records
   how the signal got from the source to the master. It exists so the
   path can be run again. That is what "show your working" means here:
   the reader can re-patch the night for themselves.

   THE PATH RUNS ACROSS, not down (David, 26 Aug: a vertical stack is
   a list, and Tuesday and Wednesday are already lists on the standard
   measure). Two bands of three. The rule along the top of each band
   IS the signal; the track markers are knocked out of it. The sheet
   takes the FULL page width, so Thursday is physically wider than the
   columns either side of it: density, not decoration.

   Discipline (v0.9): borrow the FORM, never the copywriting. No jokes
   about gain or compression, and NO STUDIO JARGON IN THE COPY: they
   are tracks, not patches (David, 27 Aug). VIA carries a real fact: a
   credit, a year, a label, a session, who left whose band. If the
   working is not checkable it is not working.
   ==================================================================== */

/* The head, cf. .digline and .rotline. Spans the sheet, not the
   measure: it is the rule the whole band hangs under. */
.trackline {
  margin: 0 0 2.4rem;
  padding: 0.7rem 0 0.6rem;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid rgb(23 22 20 / 0.22);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.trackline b { display: block; font-weight: 600; }
.trackline .arrow { padding-inline: 0.6em; color: var(--fade); }
.trackline > span { display: block; margin-top: 0.25rem; color: var(--fade); }

/* The band. Slots are fixed and the layout never reflows: three
   across, two down, always. (The Counter's rule, 4c.) */
.band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 2rem;
  margin: 0 0 0.2rem;
}

.band .cell { position: relative; padding: 1.6rem 0 1.9rem; border-top: 2px solid var(--ink); }

/* The signal crossing the gutter between one cell and the next.
   NOT on the first cell of a band: there is nothing to its left,
   and a stub reaching into the margin is a rule that lies. */
.band .cell:not(:nth-child(3n + 1))::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2rem;
  width: 2rem;
  border-top: 2px solid var(--ink);
}

/* The track marker: mono, knocked out of the rule it sits on. */
.band .no {
  position: absolute;
  top: -0.66rem;
  left: 0;
  padding-right: 0.5rem;
  background: var(--paper);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--fade);
}

.band .who { display: block; font-weight: 700; font-size: 1.25rem; line-height: 1.15; }
.band .cut { display: block; font-style: italic; font-size: 1.12rem; line-height: 1.2; }

.band .cut a { text-decoration: none; border-bottom: 1px solid rgb(23 22 20 / 0.22); }
.band .cut a:hover, .band .cut a:focus-visible { color: var(--blood); border-color: var(--blood); }

.band .src {
  display: block;
  margin-top: 0.4rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--fade);
}

/* THE WORKING. The evidence sets ROMAN and full ink: it is the one
   thing on the page that has to be checkable, and this publication
   reserves italic fade for muttering. Same move as the dig's keeper
   note, for the same reason. Same size in EVERY cell, including the
   big ends: scale marks the ends of the journey, never the weight
   of the evidence. */
.band .via { margin: 0.75rem 0 0; font-size: 0.9rem; line-height: 1.55; }

.band .via .lab {
  margin-right: 0.42rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--fade);
}

/* Optional. One muttered line, the dig's register, where a stop wants
   a reaction as well as a reason. Never carries the working. */
.band .aside { margin: 0.4rem 0 0; font-style: italic; font-size: 0.88rem; color: var(--fade); }

/* ---- THE TWO ENDS RUN BIGGER (David, 26 Aug) ----
   Hierarchy by scale, and here the scale means something: these are
   the two records you can hold in your head, and everything between
   them is the working. IN is the top-left cell and OUT is the
   bottom-right, so the pair sits on the band's diagonal and the page
   carries the distance without drawing it. */
.band .cell--end .who,
.band .cell--end .cut { font-size: clamp(1.6rem, 2.7vw, 2.15rem); line-height: 1.08; }
.band .cell--end .cut { margin-top: 0.1rem; }
.band .cell--end .src { margin-top: 0.55rem; }

/* OUT reverses out: the publication's permanent "this one" mark,
   already doing this job on the dig's keepers and The Vault's found
   names. The bar goes on the WRAPPER, not on the name and the title
   separately, so the artist and the cut stay one continuous run.
   box-decoration-break keeps the ends square when it wraps. */
/* Each bar is its own block sized to its text, never an inline
   background: a reversed inline that wraps overlaps itself and
   clips the type. Blocks also mean a long name simply makes its
   own bar taller instead of breaking the cell. */
.band .cell--out .who,
.band .cell--out .cut {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 0.1em 0.26em 0.14em;
  background: var(--ink);
  color: var(--paper);
  line-height: 1.16;
}

.band .cell--out .cut { margin-top: 0.18rem; }
.band .cell--out .headwrap { display: block; }
.band .cell--out .cut a { border-bottom-color: rgb(241 235 221 / 0.4); }

/* The top band: the head takes the measure it needs and the mark
   fills the hole the h1's 14ch max-width leaves on the right, the
   way the front page pairs a title with its plate. */
.sheet-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1rem, 2.5vw, 2.2rem);
  /* Centred, not top-aligned: the mark is taller than the head block
     and overhangs it evenly, so the two read as one masthead-height
     object rather than a glyph parked next to a title. */
  align-items: center;
}

/* Flat ink, currentColor, no box and no credit: this is a printer's
   cut pasted onto the page, not a photograph, so it skips the plate's
   rule and duotone entirely. It picks up the page grain for free. */
.mark {
  justify-self: end;
  /* Sized to carry the head block, roughly a quarter of the page.
     Anything smaller reads as a dingbat rather than as the piece's
     artwork. The head keeps enough column to break the h1 after
     "TO" and stay on two lines. */
  width: clamp(7rem, 26vw, 22rem);
  height: auto;
}

/* What the trip turned up. One line in fade, tight under the band
   because it belongs to the diagram rather than to the prose. */
.learned {
  margin: 0 0 2.6rem;
  padding: 0.8rem 0 0;
  border-top: 2px solid var(--ink);
  font-size: 0.95rem;
  color: var(--fade);
}

.learned .lab {
  margin-right: 0.5rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

/* The landing. This page's only real prose, and its length is
   David's call each week. It sits UNDER the band rather than inside
   the OUT cell, so a long week never blows the grid open. */
.landing { max-width: var(--measure); margin: 0 0 2.2rem; }
.landing p { margin: 0 0 0.85rem; font-size: 1.02rem; }
.landing p:last-child { margin-bottom: 0; }

/* The foot line, as Wednesday's. Same voice, same face. */
.counted { max-width: var(--measure); margin: 0; padding-top: 1.1rem; border-top: 1px solid rgb(23 22 20 / 0.22); font-style: italic; font-size: 1.1rem; }

/* Taped callback, borrowed unchanged from Heavy Rotation, red budget
   and all: one flag on the page is red, two or more and they all set
   in ink (add `manytaped` to the .band). */
.band .taped-flag {
  display: inline-block;
  margin-top: 0.45rem;
  padding: 0.15rem 0.35rem 0.1rem;
  border: 1px solid var(--blood);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--blood);
  white-space: nowrap;
}

.band.manytaped .taped-flag { border-color: rgb(23 22 20 / 0.22); color: var(--fade); }

/* One band of three below about 900px, one column below 620px.
   The path still runs across for as long as the paper allows. */
@media (max-width: 900px) {
  .band { grid-template-columns: repeat(2, 1fr); }
  .band .cell::after { display: none; }
  .band .cell:not(:nth-child(2n + 1))::after { display: block; }
}

@media (max-width: 620px) {
  .band { grid-template-columns: 1fr; gap: 0; }
  .band .cell::after { display: none !important; }
}