/* Slot designs — shared band styling + the three designs' own art.
   Token-driven (--bg/--ink/--accent/--surface) like every template, so all
   32 palettes and the custom mixer work unchanged. */

.pg-wall, .pg-player, .pg-folio2 {
  background: var(--bg); color: var(--ink);
  container-type: inline-size;
}
.pg-wall *, .pg-player *, .pg-folio2 * { box-sizing: border-box; }

/* ——— shared bands ——— */
.dz-h {
  font-size: clamp(.72rem, 1.6cqw, .82rem); letter-spacing: .2em;
  text-transform: uppercase; opacity: .6; margin-bottom: 1rem; font-weight: 700;
}
.dz-prose {
  font-size: clamp(1rem, 2cqw, 1.15rem); line-height: 1.75;
  max-width: 62ch; opacity: .9;
}
.dz-nums { display: flex; flex-wrap: wrap; gap: clamp(1.4rem, 5cqw, 3.4rem); }
.dz-num { display: flex; flex-direction: column; gap: .2rem; }
.dz-num-v {
  font-size: clamp(2rem, 6cqw, 3.6rem); line-height: .9; font-weight: 800;
  letter-spacing: -.03em; color: var(--accent);
}
.dz-num-l {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; opacity: .6;
}
/* the embed is capped at 900px but was never centred, so in designs whose
   band is wider than that — Now Streaming, Wall — it sat hard against the
   left edge with a gap beside it */
.dz-lead-media { max-width: 900px; margin: 0 auto 1rem; }
.dz-more-media { max-width: 900px; margin-inline: auto; }
.dz-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 22cqw, 240px), 1fr));
}
.dz-shot { margin: 0; }
.dz-shot img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; display: block;
}
.dz-shot figcaption {
  font-size: .7rem; letter-spacing: .04em; opacity: .55; margin-top: .4rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dz-links { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.dz-link {
  color: inherit; text-decoration: none; font-weight: 600;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  padding-bottom: 1px;
}
.dz-link:hover { border-color: var(--accent); color: var(--accent); }

/* The contact button on a PUBLISHED page. It is a <button> rather than an
   <a> precisely because it has no href to harvest — so it needs the button
   chrome stripped back to look exactly like the links beside it. */
.dz-link.dz-mail {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  border-radius: 0;
  padding: 0 0 1px;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
}
.dz-link.dz-mail:hover { border-color: var(--accent); color: var(--accent); }

.dz-closing {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  opacity: .45; padding: clamp(2rem, 6cqw, 4rem) 0 clamp(1.4rem, 4cqw, 2.4rem);
}
.pg-wall .tracks, .pg-player .tracks, .pg-folio2 .tracks { max-width: 900px; }

/* ——— WALL ——— */
.pg-wall .wl-hero { position: relative; min-height: 92vh; display: grid; align-items: end; overflow: hidden; }
.pg-wall .wl-wall {
  position: absolute; inset: 0; display: grid; gap: 2px;
  grid-template-columns: repeat(auto-fill, minmax(clamp(90px, 11cqw, 150px), 1fr));
  grid-auto-rows: clamp(120px, 15cqw, 200px);
  filter: grayscale(1) contrast(1.05) brightness(.5);
}
.pg-wall .wl-wall--one { grid-template-columns: 1fr; grid-auto-rows: 100vh; filter: grayscale(.2) brightness(.55); }
.pg-wall .wl-brick { overflow: hidden; }
.pg-wall .wl-brick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-wall .wl-hero-copy {
  position: relative; padding: clamp(1.4rem, 5cqw, 4rem);
  background: linear-gradient(to top, color-mix(in srgb, var(--bg) 92%, transparent), transparent);
}
.pg-wall .wl-eyebrow {
  font-size: .74rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .8rem;
}
.pg-wall .wl-title {
  font-family: var(--font-black, var(--font-sans)); text-transform: uppercase;
  font-size: clamp(2.6rem, 12cqw, 8rem); line-height: .86; letter-spacing: -.03em;
}
.pg-wall .wl-sub {
  margin-top: 1rem; letter-spacing: .22em; text-transform: uppercase;
  font-size: clamp(.72rem, 1.7cqw, .9rem); opacity: .8;
}
.pg-wall .wl-body { padding: clamp(2rem, 6cqw, 5rem) clamp(1.4rem, 5cqw, 4rem); display: grid; gap: clamp(2.4rem, 7cqw, 5rem); }
.pg-wall .wl-nums { padding-bottom: .5rem; }

/* ——— PLAYER ——— */
.pg-player .pl-top {
  display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: flex-end; justify-content: space-between;
  padding: clamp(1.6rem, 5cqw, 3.4rem) clamp(1.4rem, 5cqw, 4rem) clamp(1rem, 3cqw, 2rem);
}
.pg-player .pl-eyebrow {
  font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--accent);
  margin-bottom: .6rem;
}
.pg-player .pl-title {
  font-family: var(--font-sans); font-weight: 800; letter-spacing: -.035em;
  font-size: clamp(2rem, 7cqw, 4.4rem); line-height: .95;
}
.pg-player .pl-sub { margin-top: .5rem; opacity: .7; font-size: clamp(.9rem, 2cqw, 1.1rem); }
.pg-player .pl-stage { padding: 0 clamp(1.4rem, 5cqw, 4rem); }
.pg-player .pl-lead {
  max-width: 1000px; margin: 0 auto; border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--ink) 22%, transparent);
}
.pg-player .pl-lead--still { margin: 0 auto; }
.pg-player .pl-lead--still img { width: 100%; display: block; }
.pg-player .pl-lead--still figcaption { font-size: .74rem; opacity: .6; padding: .6rem; }
.pg-player .pl-body {
  padding: clamp(2.4rem, 7cqw, 5rem) clamp(1.4rem, 5cqw, 4rem);
  display: grid; gap: clamp(2.4rem, 7cqw, 4.5rem);
}
.pg-player .pl-nums { align-self: flex-end; }

/* ——— FOLIO ——— */
.pg-folio2 { font-family: var(--font-serif, Georgia, serif); }
.pg-folio2 .fo-head {
  padding: clamp(3rem, 9cqw, 7rem) clamp(1.4rem, 6cqw, 5rem) clamp(1.6rem, 4cqw, 3rem);
  text-align: center;
}
.pg-folio2 .fo-eyebrow {
  font-family: var(--font-ui, sans-serif); font-size: .7rem; letter-spacing: .34em;
  text-transform: uppercase; opacity: .55; margin-bottom: 1.4rem;
}
.pg-folio2 .fo-title {
  font-size: clamp(2.4rem, 8cqw, 5.4rem); line-height: 1.02; letter-spacing: -.02em; font-weight: 400;
}
.pg-folio2 .fo-sub {
  margin-top: 1rem; font-style: italic; opacity: .72; font-size: clamp(1rem, 2.2cqw, 1.3rem);
}
.pg-folio2 .fo-plate {
  margin: 0 auto; max-width: 1100px; padding: 0 clamp(1.4rem, 6cqw, 5rem);
}
.pg-folio2 .fo-plate img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.pg-folio2 .fo-plate figcaption {
  font-family: var(--font-ui, sans-serif); font-size: .72rem; letter-spacing: .1em;
  opacity: .55; margin-top: .7rem; text-align: center;
}
.pg-folio2 .fo-body {
  max-width: 1100px; margin: 0 auto;
  padding: clamp(2.4rem, 7cqw, 5rem) clamp(1.4rem, 6cqw, 5rem);
  display: grid; gap: clamp(2.4rem, 7cqw, 4.5rem);
}
.pg-folio2 .dz-h { font-family: var(--font-ui, sans-serif); }
.pg-folio2 .dz-prose { font-size: clamp(1.05rem, 2.2cqw, 1.28rem); line-height: 1.8; }

@container (max-width: 640px) {
  .pg-wall .wl-hero { min-height: 78vh; }
  .dz-nums { gap: 1.2rem; }
}

/* ——————————————————————————————————————————————————————————————————————
   RECTO — the open book.

   Three devices carry the whole design:
     1. THE COVER      a plate on the verso, a printed field of type on the recto
     2. THE GUTTER     one hairline down the page, section heads set in the margin
     3. THE PLATES     pictures break the grid and run edge to edge, numbered

   Every colour is --bg / --ink / --accent / --surface or a color-mix of them,
   so all 32 palettes hold. Small accent text is mixed toward --ink because a
   few palettes (parchment, moss-gold) put accent close to their background.

   There is deliberately NO page-load keyframe: the editor repaints the stage
   on every keystroke, so an entrance animation would replay while the owner
   types. Motion lives in hover and focus, where it can only ever be asked for.
   —————————————————————————————————————————————————————————————————————— */

.pg-recto {
  --rc-pad:   clamp(1.15rem, 5cqw, 4.5rem);   /* page margin */
  --rc-rail:  clamp(5.2rem, 13cqw, 11rem);    /* the margin the heads sit in */
  --rc-gap:   clamp(.9rem, 3.4cqw, 2.6rem);
  --rc-rule:  color-mix(in srgb, var(--ink) 20%, transparent);
  --rc-hair:  color-mix(in srgb, var(--ink) 10%, transparent);
  --rc-quiet: color-mix(in srgb, var(--ink) 62%, var(--bg));
  --rc-mark:  color-mix(in srgb, var(--accent) 72%, var(--ink));

  background: var(--bg); color: var(--ink);
  container-type: inline-size;
  font-family: 'Spectral', var(--font-serif), Georgia, serif;
  font-weight: 400;
}
.pg-recto * { box-sizing: border-box; }
.pg-recto ol, .pg-recto li { list-style: none; margin: 0; padding: 0; }

/* ——— 1. THE COVER ——— */
.pg-recto .rc-cover {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  min-height: 88vh;
}
.pg-recto .rc-cover--type { grid-template-columns: minmax(0, 1fr); min-height: 72vh; }

.pg-recto .rc-lead { position: relative; margin: 0; overflow: hidden; background: var(--surface); }
.pg-recto .rc-lead img { width: 100%; height: 100%; min-height: 52vh; object-fit: cover; display: block; }
.pg-recto .rc-lead figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3rem clamp(.9rem, 2.4cqw, 1.6rem) clamp(.8rem, 2cqw, 1.2rem);
  font: 400 clamp(.6rem, 1.2cqw, .7rem)/1.4 var(--font-mono), monospace;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
  background: linear-gradient(to top,
    color-mix(in srgb, var(--bg) 94%, transparent),
    color-mix(in srgb, var(--bg) 74%, transparent) 45%, transparent);
}

.pg-recto .rc-copy {
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: clamp(.85rem, 2.2cqw, 1.4rem);
  padding: clamp(2.6rem, 6cqw, 5rem) clamp(1.15rem, 5cqw, 4.5rem) clamp(1.8rem, 5cqw, 4rem);
  /* laid-paper texture: hairlines every 7px at 4% ink — felt, never seen */
  background-color: var(--surface);
  background-image: repeating-linear-gradient(0deg,
    color-mix(in srgb, var(--ink) 4%, transparent) 0 1px, transparent 1px 7px);
}
.pg-recto .rc-logo { max-height: clamp(28px, 5cqw, 46px); width: auto; margin-bottom: auto; }

.pg-recto .rc-eyebrow {
  position: relative; padding-left: clamp(2.4rem, 6cqw, 4.2rem);
  font: 500 clamp(.6rem, 1.25cqw, .72rem)/1.4 var(--font-mono), monospace;
  letter-spacing: .3em; text-transform: uppercase; color: var(--rc-mark);
}
.pg-recto .rc-eyebrow::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: clamp(1.7rem, 4.4cqw, 3.2rem); height: 2px; background: var(--accent);
}
.pg-recto .rc-title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(2.5rem, 8.4cqw, 6rem); line-height: .93; letter-spacing: -.015em;
  text-wrap: balance; overflow-wrap: break-word; hyphens: auto;
}
.pg-recto .rc-cover--type .rc-title { font-size: clamp(2.8rem, 11.5cqw, 8rem); max-width: 14ch; }
.pg-recto .rc-sub {
  font-style: italic; max-width: 42ch;
  font-size: clamp(1rem, 2.2cqw, 1.32rem); line-height: 1.45;
  color: color-mix(in srgb, var(--ink) 80%, var(--surface));
}
.pg-recto .rc-nums {
  margin-top: clamp(.5rem, 1.6cqw, 1.1rem);
  padding-top: clamp(.95rem, 2.4cqw, 1.5rem);
  border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  gap: clamp(1.3rem, 5cqw, 3.4rem);
}
.pg-recto .dz-num-v {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.9rem, 5.4cqw, 3.3rem); letter-spacing: -.02em; color: var(--accent);
}
.pg-recto .dz-num-l {
  font: 500 clamp(.58rem, 1.15cqw, .66rem)/1.3 var(--font-mono), monospace;
  letter-spacing: .2em; text-transform: uppercase; opacity: 1;
  color: color-mix(in srgb, var(--ink) 64%, var(--surface));
}

/* ——— 2. THE GUTTER ——— */
.pg-recto .rc-body { padding-inline: var(--rc-pad); }
.pg-recto .rc-band {
  display: grid;
  grid-template-columns: var(--rc-rail) minmax(0, 1fr);
  column-gap: var(--rc-gap);
  padding-block: clamp(2.2rem, 6cqw, 4.4rem);
  border-top: 1px solid var(--rc-rule);
  /* the printed gutter: a 1px rule down the page, drawn per band so that
     contiguous bands read as one continuous line */
  background-image: linear-gradient(var(--rc-hair), var(--rc-hair));
  background-size: 1px 100%;
  background-position: calc(var(--rc-rail) + var(--rc-gap) / 2) 0;
  background-repeat: no-repeat;
}
.pg-recto .rc-band > * { grid-column: 2; min-width: 0; }
.pg-recto .rc-band > .dz-h {
  grid-column: 1; grid-row: 1;
  position: sticky; top: clamp(.9rem, 3cqw, 2.2rem); align-self: start;
  margin: 0; padding-top: .3em;
}
.pg-recto .dz-h {
  font: 500 clamp(.6rem, 1.2cqw, .7rem)/1.5 var(--font-mono), monospace;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--rc-quiet); opacity: 1;
}
.pg-recto .rc-band > .dz-h::before {
  content: ''; display: block; width: 1.5rem; height: 2px;
  background: var(--accent); margin-bottom: .8rem;
}

.pg-recto .dz-prose {
  font-size: clamp(1.02rem, 1.95cqw, 1.16rem); line-height: 1.75;
  max-width: 62ch; opacity: 1; color: color-mix(in srgb, var(--ink) 90%, var(--bg));
}
/* the preface reads a size up and opens on a drop cap — the one flourish */
.pg-recto .rc-lede .dz-prose {
  font-size: clamp(1.14rem, 2.5cqw, 1.5rem); line-height: 1.58; max-width: 46ch;
}
.pg-recto .rc-lede .dz-prose::first-letter {
  float: left; font-family: var(--font-serif); font-weight: 400;
  font-size: 3.4em; line-height: .76; color: var(--accent);
  padding-right: .07em; margin-top: .04em;
}

/* ——— the contents page ——— */
.pg-recto .rc-index-list { columns: 2; column-gap: clamp(1.4rem, 4cqw, 3.2rem); }
.pg-recto .rc-idx {
  break-inside: avoid;
  display: grid; grid-template-columns: 2.3rem minmax(0, 1fr);
  gap: .55rem; align-items: baseline;
  padding: .55rem 0; border-bottom: 1px solid var(--rc-hair);
}
.pg-recto .rc-idx-n {
  font: 500 .62rem/1 var(--font-mono), monospace;
  letter-spacing: .12em; color: var(--rc-mark);
}
.pg-recto .rc-idx-t {
  font-size: clamp(.94rem, 1.7cqw, 1.04rem); line-height: 1.35;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.pg-recto .rc-idx:hover .rc-idx-t { transform: translateX(5px); }

/* ——— 3. THE PLATES ——— */
.pg-recto .rc-plates { display: block; background-image: none; }
.pg-recto .rc-plates > .dz-h { position: static; margin-bottom: clamp(1.1rem, 3cqw, 1.9rem); }
.pg-recto .rc-plate-grid {
  margin-inline: calc(-1 * var(--rc-pad));   /* break the measure, run to the edges */
  display: grid; grid-auto-flow: dense;
  /* min() against 48% guarantees two columns at any width — a big plate can
     never span more tracks than exist, so nothing ever overflows */
  grid-template-columns: repeat(auto-fill, minmax(min(clamp(148px, 17cqw, 240px), 48%), 1fr));
  gap: clamp(4px, .8cqw, 10px);
}
.pg-recto .rc-pl {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 3 / 4; background: var(--surface);
}
.pg-recto .rc-pl--big { grid-column: span 2; grid-row: span 2; }
.pg-recto .rc-pl img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.pg-recto .rc-pl::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.pg-recto .rc-pl:hover img { transform: scale(1.045); }
.pg-recto .rc-pl:hover::after { transform: scaleX(1); }
.pg-recto .rc-pl-n {
  position: absolute; top: .5rem; left: .55rem; z-index: 2;
  font: 500 .58rem/1 var(--font-mono), monospace; letter-spacing: .12em;
  color: var(--ink); padding: .32rem .4rem; border-radius: 2px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(6px);
}
.pg-recto .rc-pl figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 2.2rem .6rem .6rem;
  font: 400 clamp(.62rem, 1.1cqw, .7rem)/1.35 var(--font-mono), monospace;
  letter-spacing: .04em; color: var(--ink);
  text-shadow: 0 1px 3px var(--bg);
  background: linear-gradient(to top,
    color-mix(in srgb, var(--bg) 95%, transparent),
    color-mix(in srgb, var(--bg) 82%, transparent) 55%, transparent);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-clamp: 2; overflow: hidden;
}

/* ——— media, tracks, links, colophon ——— */
.pg-recto .dz-lead-media, .pg-recto .dz-more-media { max-width: 920px; }
.pg-recto .dz-lead-media { margin-bottom: clamp(.7rem, 2cqw, 1.1rem); }

.pg-recto .tracks { max-width: 920px; border-top: 1px solid var(--rc-rule); }
.pg-recto .track-row {
  border-bottom: 1px solid var(--rc-hair); min-height: 58px;
  transition: background .25s ease;
}
.pg-recto .track-row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.pg-recto .track-row strong {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(1.02rem, 2cqw, 1.22rem); letter-spacing: -.005em;
}
.pg-recto .tr-num { color: var(--rc-mark); }

.pg-recto .dz-links { gap: .55rem 1.5rem; }
.pg-recto .dz-link {
  font: 500 clamp(.72rem, 1.4cqw, .8rem)/1.4 var(--font-mono), monospace;
  letter-spacing: .07em;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  padding-bottom: 2px; transition: color .2s ease, border-color .2s ease;
}
.pg-recto .dz-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.pg-recto .dz-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }

.pg-recto .rc-colophon {
  border-top: 1px solid var(--rc-rule); text-align: center;
  padding: clamp(2.2rem, 6cqw, 3.8rem) var(--rc-pad) clamp(2rem, 5cqw, 3rem);
}
.pg-recto .rc-colophon::before {   /* a printer's lozenge, purely a mark */
  content: ''; display: block; width: 6px; height: 6px; margin: 0 auto 1.3rem;
  background: var(--accent); transform: rotate(45deg);
}
.pg-recto .dz-closing {
  font: 500 clamp(.6rem, 1.15cqw, .68rem)/1.5 var(--font-mono), monospace;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--rc-quiet); opacity: 1; padding: 0;
}

/* ——— the book closes to a single column ——— */
@container (max-width: 780px) {
  .pg-recto .rc-cover { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pg-recto .rc-lead img { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
  .pg-recto .rc-copy { padding-top: clamp(1.8rem, 7cqw, 3rem); }
  .pg-recto .rc-band {
    grid-template-columns: minmax(0, 1fr);
    background-image: none;
    row-gap: clamp(.9rem, 3cqw, 1.4rem);
  }
  .pg-recto .rc-band > * { grid-column: 1; }
  .pg-recto .rc-band > .dz-h { grid-column: 1; grid-row: 1; position: static; }
  .pg-recto .rc-band > .dz-h::before { margin-bottom: .55rem; }
  .pg-recto .rc-index-list { columns: 1; }
  .pg-recto .rc-lede .dz-prose::first-letter { font-size: 2.9em; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-recto .rc-pl img, .pg-recto .rc-pl::after,
  .pg-recto .rc-idx-t, .pg-recto .track-row { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   VINYL (slots) — the shared bands, wearing the record shop's typography.
   tpl-vinyl.css supplies the sleeves, discs and stamp; this only makes the
   dz-* bands look like they were printed on the same press.
   ══════════════════════════════════════════════════════════════════════ */
.pg-vinyl .v-zone { padding: 0 0 clamp(28px, 5cqw, 56px); }
.pg-vinyl .dz-h {
  font-family: 'Archivo Black', 'Libre Franklin', sans-serif;
  font-size: clamp(1.1rem, 2.6cqw, 1.9rem);
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0 0 .6em;
}
.pg-vinyl .dz-prose {
  font-family: 'Spectral', Georgia, serif;
  font-size: clamp(.95rem, 1.5cqw, 1.08rem);
  line-height: 1.65;
  max-width: 62ch;
}
.pg-vinyl .dz-story, .pg-vinyl .dz-own, .pg-vinyl .dz-media, .pg-vinyl .dz-tracks {
  margin: 0 0 clamp(20px, 3.4cqw, 40px);
}
/* the crate head and the band heads share one rule */
.pg-vinyl .v-crate-head h2, .pg-vinyl .v-shelf-head {
  font-family: 'Archivo Black', 'Libre Franklin', sans-serif;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.pg-vinyl .dz-tracks .dz-h { margin-bottom: .8em; }
.pg-vinyl .track-row {
  display: grid;
  grid-template-columns: 2.4em 1fr auto;
  gap: .6em 1em;
  align-items: baseline;
  padding: .55em 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.pg-vinyl .tr-num {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .78em;
  opacity: .55;
}
.pg-vinyl .track-row strong {
  font-family: 'Spectral', Georgia, serif;
  font-weight: 500;
  font-size: 1.02em;
}
.pg-vinyl .tr-pub {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .72em;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .6;
  text-align: right;
}
.pg-vinyl .dz-links { display: flex; flex-wrap: wrap; gap: .5em 1.2em; }
.pg-vinyl .dz-link {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .82em;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: .15em;
}
.pg-vinyl .dz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 18cqw, 200px), 1fr));
  gap: clamp(8px, 1.4cqw, 16px);
}
.pg-vinyl .dz-shot img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.pg-vinyl .dz-shot figcaption {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .7em;
  text-transform: uppercase;
  letter-spacing: .03em;
  opacity: .65;
  margin-top: .4em;
}
.pg-vinyl .dz-closing {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .72em;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .55;
  margin: clamp(24px, 4cqw, 48px) 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   CREDITS CRAWL (slots) — title cards. tpl-creditscrawl.css supplies the
   black stage and the type; these rules place the shared bands as cards and
   give the new plate and montage their room.
   ══════════════════════════════════════════════════════════════════════ */
.pg-creditscrawl .cc-plate { padding: clamp(24px, 6cqw, 72px) clamp(16px, 5cqw, 64px); }
.pg-creditscrawl .cc-plate img { width: 100%; max-height: 78cqh; object-fit: cover; display: block; }
.pg-creditscrawl .cc-plate figcaption {
  font: 500 clamp(.68rem, 1.1cqw, .8rem)/1.5 'DM Mono', ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: .14em; opacity: .6; margin-top: .9em; text-align: center;
}
.pg-creditscrawl .cc-card .dz-h,
.pg-creditscrawl .cc-role {
  font: 500 clamp(.66rem, 1cqw, .78rem)/1.6 'DM Mono', ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: .22em; opacity: .55; margin: 0 0 1.6em; text-align: center;
}
.pg-creditscrawl .dz-prose {
  font-size: clamp(1rem, 1.7cqw, 1.22rem); line-height: 1.75; text-align: center;
  max-width: 46ch; margin-inline: auto; text-wrap: balance;
}
.pg-creditscrawl .dz-story, .pg-creditscrawl .dz-own,
.pg-creditscrawl .dz-media, .pg-creditscrawl .dz-tracks, .pg-creditscrawl .dz-contact {
  margin: 0 auto; max-width: 62ch;
}
.pg-creditscrawl .cc-cluster {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(88px, 12cqw, 150px);
  gap: 6px; justify-content: center; padding: clamp(20px, 4cqw, 48px) 16px; opacity: .8;
}
.pg-creditscrawl .cc-cluster img { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; }
.pg-creditscrawl .cc-wall {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(56px, 8cqw, 104px), 1fr));
  gap: 3px; padding: 0 clamp(12px, 3cqw, 40px);
}
.pg-creditscrawl .cc-wall img { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; opacity: .72; }
.pg-creditscrawl .cc-montage { padding: clamp(28px, 6cqw, 80px) 0; }
.pg-creditscrawl .track-row {
  display: grid; grid-template-columns: 2.6em 1fr auto; gap: .5em 1em;
  align-items: baseline; padding: .5em 0; text-align: left;
}
.pg-creditscrawl .tr-num, .pg-creditscrawl .tr-pub {
  font: 500 .72em/1.5 'DM Mono', ui-monospace, monospace; opacity: .5;
  text-transform: uppercase; letter-spacing: .08em;
}
.pg-creditscrawl .dz-links { display: flex; flex-wrap: wrap; gap: .6em 1.4em; justify-content: center; }
.pg-creditscrawl .dz-link {
  font: 500 .8em/1.5 'DM Mono', ui-monospace, monospace; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink); text-decoration: none; opacity: .8;
}
.pg-creditscrawl .dz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.pg-creditscrawl .cc-end-title {
  font-size: clamp(1.4rem, 4cqw, 2.6rem); text-align: center;
  letter-spacing: .04em; margin: clamp(40px, 8cqw, 96px) 0 0; opacity: .9;
}

/* ═══════════════════════════════════════════════════════════════════════
   ANALOG (slots) — the tape box and its paperwork.
   ══════════════════════════════════════════════════════════════════════ */
.pg-analog .al-body { padding: 0 clamp(16px, 4cqw, 56px) clamp(32px, 6cqw, 72px); }
.pg-analog .al-body > section { margin: 0 0 clamp(28px, 4.5cqw, 56px); }
.pg-analog .dz-h {
  font: 500 clamp(.68rem, 1.1cqw, .8rem)/1.6 'DM Mono', ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: .2em; opacity: .6;
  margin: 0 0 1.2em; padding-bottom: .7em;
  border-bottom: 1px dashed color-mix(in srgb, var(--ink) 28%, transparent);
}
.pg-analog .dz-prose {
  font-family: 'Spectral', Georgia, serif;
  font-size: clamp(.98rem, 1.6cqw, 1.14rem); line-height: 1.72; max-width: 64ch;
}
.pg-analog .al-cues { display: grid; gap: .1em; }
.pg-analog .al-cue { display: grid; grid-template-columns: 2.6em 1fr; gap: .8em; align-items: baseline; padding: .45em 0; }
.pg-analog .al-idx { font: 500 .74em/1 'DM Mono', ui-monospace, monospace; opacity: .45; }
.pg-analog .al-cue-t { font-family: 'Spectral', Georgia, serif; font-size: 1.02em; }
.pg-analog .al-frames-row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 20cqw, 220px), 1fr));
  gap: clamp(8px, 1.6cqw, 18px);
}
.pg-analog .al-frame { margin: 0; }
.pg-analog .al-frame img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.pg-analog .al-frame figcaption,
.pg-analog .dz-shot figcaption {
  font: 500 .7em/1.5 'DM Mono', ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: .06em; opacity: .55; margin-top: .5em;
}
.pg-analog .track-row {
  display: grid; grid-template-columns: 2.6em 1fr auto; gap: .5em 1em;
  align-items: baseline; padding: .5em 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--ink) 24%, transparent);
}
.pg-analog .tr-num, .pg-analog .tr-pub {
  font: 500 .74em/1.5 'DM Mono', ui-monospace, monospace; opacity: .5;
  text-transform: uppercase; letter-spacing: .05em;
}
.pg-analog .track-row strong { font-family: 'Spectral', Georgia, serif; font-weight: 500; }
.pg-analog .dz-links { display: flex; flex-wrap: wrap; gap: .5em 1.2em; }
.pg-analog .dz-link {
  font: 500 .8em/1.5 'DM Mono', ui-monospace, monospace; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--accent); padding-bottom: .12em;
}
.pg-analog .al-cr {
  font: 500 .7em/1.6 'DM Mono', ui-monospace, monospace; text-transform: uppercase;
  letter-spacing: .12em; opacity: .45; margin: clamp(24px, 4cqw, 48px) 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   REGISTER (slots) — the municipal grid.
   ══════════════════════════════════════════════════════════════════════ */
.pg-register .rg-body { padding: 0 clamp(16px, 4cqw, 56px) clamp(32px, 6cqw, 72px); }
.pg-register .rg-body > section, .pg-register .rg-anhang, .pg-register .rg-bestand, .pg-register .rg-abzuege {
  margin: 0 0 clamp(28px, 4.5cqw, 60px);
}
.pg-register .rg-anhang, .pg-register .rg-bestand, .pg-register .rg-abzuege { padding: 0 clamp(16px, 4cqw, 56px); }
.pg-register .dz-h, .pg-register .rg-sechead h2, .pg-register .rg-sechead-h {
  font: 700 clamp(.66rem, 1cqw, .76rem)/1.6 'Inter', 'Libre Franklin', sans-serif;
  text-transform: uppercase; letter-spacing: .18em;
  margin: 0 0 1.1em; padding-bottom: .6em;
  border-bottom: 2px solid var(--ink);
}
.pg-register .dz-prose {
  font-size: clamp(.95rem, 1.5cqw, 1.06rem); line-height: 1.65; max-width: 58ch;
}
.pg-register .rg-rows { display: grid; }
.pg-register .rg-frow {
  display: grid; grid-template-columns: 4.2em 1fr 2em; gap: 1em;
  align-items: baseline; padding: .5em 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
}
.pg-register .rg-c-nr, .pg-register .rg-c-fol {
  font: 500 .76em/1.4 'DM Mono', ui-monospace, monospace; opacity: .55;
  font-variant-numeric: tabular-nums;
}
.pg-register .rg-c-fol { text-align: right; }
/* min() so the track can yield on a phone — a hard 140px minimum is exactly
   how a three-up row starts scrolling sideways at 390 */
.pg-register .rg-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: clamp(12px, 2.4cqw, 32px);
}
/* the poster name: sized to its own track and allowed to break only when a
   word genuinely cannot fit. The old rule paired huge type with
   `overflow-wrap: anywhere`, which snapped ROWAN into ROWA / N. */
.pg-register .rg-name {
  font-size: clamp(2.4rem, 10.5cqw, 7.5rem);
  line-height: .88;
  overflow-wrap: break-word;
  hyphens: none;
}
/* the old .rg-stat was a cell in a 12-column grid and still carries
   `grid-column: span 12` — in this grid that makes one stat twelve tracks
   wide, which is precisely the 40px of sideways scroll the check caught */
.pg-register .rg-stats .rg-stat { grid-column: auto; min-width: 0; }
.pg-register .rg-statnum { font-size: clamp(2.4rem, 7cqw, 5rem); line-height: .9; letter-spacing: -.03em; }
.pg-register .rg-statlbl {
  font: 700 .7em/1.5 'Inter', sans-serif; text-transform: uppercase;
  letter-spacing: .12em; margin-top: .6em; opacity: .65;
}
.pg-register .rg-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(clamp(96px, 14cqw, 150px), 100%), 1fr));
  gap: clamp(6px, 1.2cqw, 14px);
}
.pg-register .rg-strip-fig { margin: 0; min-width: 0; }
.pg-register .rg-strip-fig img, .pg-register .dz-shot img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.05);
}
.pg-register .rg-strip-fig figcaption, .pg-register .dz-shot figcaption {
  font: 500 .66em/1.4 'DM Mono', ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: .04em; opacity: .55; margin-top: .4em;
}
.pg-register .track-row {
  display: grid; grid-template-columns: 3.2em 1fr auto; gap: .5em 1em;
  align-items: baseline; padding: .5em 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.pg-register .tr-num, .pg-register .tr-pub {
  font: 500 .74em/1.5 'DM Mono', ui-monospace, monospace; opacity: .55;
  text-transform: uppercase; letter-spacing: .06em; font-variant-numeric: tabular-nums;
}
.pg-register .dz-links { display: flex; flex-wrap: wrap; gap: .5em 1.4em; }
.pg-register .dz-link {
  font: 700 .78em/1.5 'Inter', sans-serif; text-transform: uppercase;
  letter-spacing: .08em; color: var(--accent); text-decoration: none;
}
.pg-register .rg-colo {
  font: 500 .68em/1.6 'DM Mono', ui-monospace, monospace; text-transform: uppercase;
  letter-spacing: .1em; opacity: .45; margin: clamp(24px, 4cqw, 48px) 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   THE LAST FIVE (slots) — shared band furniture per design. Each old
   stylesheet still supplies the art (the wall, the console, the phosphor);
   these rules only make the dz-* bands belong to it.
   ══════════════════════════════════════════════════════════════════════ */

/* ── OPEN FIELD · broadsheet ───────────────────────────────────────────── */
/* the old .of-body was a flex ROW, which handed the media band 104px and
   stacked the picture desk into a ribbon. The page runs in one column and the
   newspaper columns live INSIDE the bio and the headline stack, where they
   belong. */
.pg-openfield .of-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 0 clamp(16px, 4cqw, 56px) clamp(32px, 6cqw, 72px);
}
.pg-openfield .of-body > * { margin: 0 0 clamp(24px, 4cqw, 52px); min-width: 0; }
.pg-openfield .of-ticker {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: clamp(10px, 2.4cqw, 30px);
  margin: clamp(10px, 2cqw, 20px) 0 0;
}
.pg-openfield .of-stat-block { display: flex; align-items: baseline; gap: .5em; }
.pg-openfield .of-stat-val { font-size: clamp(1.3rem, 3cqw, 2.2rem); line-height: 1; font-weight: 800; }
.pg-openfield .of-stat-lbl {
  font: 700 .64em/1.4 'Libre Franklin', sans-serif;
  text-transform: uppercase; letter-spacing: .14em; opacity: .6;
}
.pg-openfield .dz-h, .pg-openfield .of-heads-label, .pg-openfield .of-insets-label {
  font: 700 clamp(.66rem, 1cqw, .78rem)/1.6 'Libre Franklin', sans-serif;
  text-transform: uppercase; letter-spacing: .16em;
  margin: 0 0 1em; padding-bottom: .6em; border-bottom: 2px solid var(--ink);
}
.pg-openfield .dz-prose {
  font-family: 'Spectral', Georgia, serif;
  font-size: clamp(.98rem, 1.6cqw, 1.1rem); line-height: 1.62;
}
.pg-openfield .of-bio-col .dz-prose { columns: 2 22ch; column-gap: clamp(16px, 3cqw, 40px); }
.pg-openfield .of-bio-col .dz-prose::first-letter {
  float: left; font-size: 3.4em; line-height: .78; padding: .06em .1em 0 0; font-weight: 700;
}
.pg-openfield .of-heads-col { columns: 2 16ch; column-gap: clamp(16px, 3cqw, 40px); }
.pg-openfield .of-hl { break-inside: avoid; display: grid; grid-template-columns: 2.2em 1fr; gap: .6em; padding: .4em 0; }
.pg-openfield .of-hl-num { font: 500 .74em/1.6 'DM Mono', ui-monospace, monospace; opacity: .5; }
.pg-openfield .of-hl-t { font-family: 'Spectral', Georgia, serif; font-size: 1.02em; }
.pg-openfield .of-insets-row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(clamp(120px, 20cqw, 220px), 100%), 1fr));
  gap: clamp(10px, 2cqw, 22px);
}
.pg-openfield .of-inset { margin: 0; min-width: 0; }
.pg-openfield .of-inset img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.pg-openfield .of-cutline {
  font: 500 .7em/1.5 'DM Mono', ui-monospace, monospace; opacity: .6; margin-top: .5em;
}

/* ── INVENTORY · the ledger ────────────────────────────────────────────── */
.pg-inventory .inv-zone, .pg-inventory .inv-ledger-section, .pg-inventory .inv-specimens-section {
  padding: 0 clamp(16px, 4cqw, 56px); margin: 0 0 clamp(28px, 4.5cqw, 60px);
}
.pg-inventory .dz-h, .pg-inventory .inv-section-head h2 {
  font: 700 clamp(.66rem, 1cqw, .78rem)/1.6 'Libre Franklin', sans-serif;
  text-transform: uppercase; letter-spacing: .18em;
  margin: 0 0 1em; padding-bottom: .6em;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
}
.pg-inventory .dz-prose { font-size: clamp(.95rem, 1.5cqw, 1.06rem); line-height: 1.68; max-width: 60ch; }
.pg-inventory .inv-ledger { display: grid; }
.pg-inventory .inv-row {
  display: grid; grid-template-columns: 4.4em 1fr auto; gap: 1em;
  align-items: baseline; padding: .5em 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.pg-inventory .inv-row-num, .pg-inventory .inv-row-ref, .pg-inventory .inv-spec-ref {
  font: 500 .74em/1.5 'DM Mono', ui-monospace, monospace; opacity: .5;
  font-variant-numeric: tabular-nums;
}
.pg-inventory .inv-specimen-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(clamp(100px, 15cqw, 170px), 100%), 1fr));
  gap: clamp(8px, 1.6cqw, 18px);
}
.pg-inventory .inv-specimen { margin: 0; min-width: 0; }
.pg-inventory .inv-specimen img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.pg-inventory .inv-specimen figcaption {
  display: grid; gap: .15em; margin-top: .45em;
  font: 500 .66em/1.45 'DM Mono', ui-monospace, monospace; opacity: .6;
}
.pg-inventory .inv-holdings { display: flex; flex-wrap: wrap; gap: clamp(16px, 3cqw, 44px); margin-top: clamp(16px, 3cqw, 36px); }
.pg-inventory .inv-holdings-line { display: block; font-size: clamp(1.6rem, 4cqw, 3rem); line-height: 1; }
.pg-inventory .inv-holdings-label {
  display: block; margin-top: .4em;
  font: 500 .68em/1.4 'DM Mono', ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: .1em; opacity: .6;
}

/* ── TERMINAL · the session ────────────────────────────────────────────── */
.pg-terminal .dz-h {
  font: 400 clamp(.72rem, 1.1cqw, .84rem)/1.6 'Space Mono', ui-monospace, monospace;
  text-transform: lowercase; letter-spacing: .04em; opacity: .7; margin: 0 0 .9em;
}
.pg-terminal .dz-h::before { content: '# '; opacity: .5; }
.pg-terminal .dz-prose {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: clamp(.82rem, 1.3cqw, .94rem); line-height: 1.75; max-width: 74ch;
}
.pg-terminal .tm-tree-list { display: grid; }
.pg-terminal .tm-line { display: grid; grid-template-columns: 3.4em 1fr; gap: .4em; padding: .18em 0; }
.pg-terminal .tm-tree { opacity: .45; }
.pg-terminal .tm-line, .pg-terminal .tm-t { font-family: 'Space Mono', ui-monospace, monospace; font-size: .9em; }
.pg-terminal .tm-img-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(clamp(96px, 14cqw, 170px), 100%), 1fr));
  gap: clamp(6px, 1.2cqw, 14px);
}
.pg-terminal .tm-frame { margin: 0; min-width: 0; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); padding: 4px; }
.pg-terminal .tm-frame img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.pg-terminal .tm-frame figcaption, .pg-terminal .dz-shot figcaption {
  font: 400 .68em/1.4 'Space Mono', ui-monospace, monospace; opacity: .6; margin-top: .35em;
}
.pg-terminal .track-row {
  display: grid; grid-template-columns: 2.8em 1fr auto; gap: .4em 1em;
  align-items: baseline; padding: .28em 0;
  font-family: 'Space Mono', ui-monospace, monospace; font-size: .88em;
}
.pg-terminal .tr-num, .pg-terminal .tr-pub { opacity: .5; font-size: .86em; }
.pg-terminal .dz-links { display: flex; flex-wrap: wrap; gap: .5em 1.4em; }
.pg-terminal .dz-link {
  font: 400 .86em/1.5 'Space Mono', ui-monospace, monospace;
  color: var(--accent); text-decoration: none;
}
.pg-terminal .dz-link::before { content: '→ '; opacity: .6; }
.pg-terminal .tm-exit {
  font: 400 .8em/1.6 'Space Mono', ui-monospace, monospace;
  opacity: .45; margin: clamp(20px, 3cqw, 40px) 0 0;
}

/* ── ARCHIVE WALL · plates carved into the mosaic ──────────────────────── */
.pg-archive-wall .aw-plate { padding: clamp(24px, 5cqw, 64px) clamp(16px, 4cqw, 56px); }
.pg-archive-wall .dz-h, .pg-archive-wall .aw-kicker {
  font: 700 clamp(.64rem, 1cqw, .76rem)/1.6 'Libre Franklin', sans-serif;
  text-transform: uppercase; letter-spacing: .2em; opacity: .7; margin: 0 0 1em;
}
.pg-archive-wall .dz-prose { font-size: clamp(.98rem, 1.6cqw, 1.14rem); line-height: 1.7; max-width: 60ch; }
.pg-archive-wall .aw-ledger { display: grid; }
.pg-archive-wall .aw-row {
  display: grid; grid-template-columns: 2.6em 1fr; gap: .8em;
  align-items: baseline; padding: .42em 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.pg-archive-wall .aw-num { font: 500 .74em/1.5 'DM Mono', ui-monospace, monospace; opacity: .45; }
.pg-archive-wall .aw-stats { display: flex; flex-wrap: wrap; gap: clamp(16px, 3cqw, 48px); }
.pg-archive-wall .aw-stat b { display: block; font-size: clamp(1.8rem, 4.5cqw, 3.4rem); line-height: 1; }
.pg-archive-wall .aw-stat span {
  display: block; margin-top: .4em;
  font: 700 .66em/1.4 'Libre Franklin', sans-serif;
  text-transform: uppercase; letter-spacing: .14em; opacity: .6;
}
.pg-archive-wall .dz-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(clamp(100px, 15cqw, 180px), 100%), 1fr));
  gap: clamp(6px, 1.2cqw, 14px);
}
.pg-archive-wall .dz-shot img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.pg-archive-wall .dz-shot figcaption {
  font: 500 .68em/1.45 'DM Mono', ui-monospace, monospace; opacity: .55; margin-top: .4em;
}
.pg-archive-wall .track-row {
  display: grid; grid-template-columns: 2.6em 1fr auto; gap: .4em 1em;
  align-items: baseline; padding: .45em 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.pg-archive-wall .tr-num, .pg-archive-wall .tr-pub {
  font: 500 .72em/1.5 'DM Mono', ui-monospace, monospace; opacity: .5;
  text-transform: uppercase; letter-spacing: .06em;
}
.pg-archive-wall .dz-links { display: flex; flex-wrap: wrap; gap: .5em 1.4em; }
.pg-archive-wall .dz-link {
  font: 700 .78em/1.5 'Libre Franklin', sans-serif; text-transform: uppercase;
  letter-spacing: .08em; color: var(--accent); text-decoration: none;
}
.pg-archive-wall .aw-archive-note {
  font: 500 .7em/1.6 'DM Mono', ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: .12em; opacity: .45;
  margin: clamp(20px, 3cqw, 40px) 0 0;
}

/* ── PATCHBAY · the console ────────────────────────────────────────────── */
.pg-patch .p-zone { padding: 0 clamp(16px, 4cqw, 56px); margin: 0 0 clamp(26px, 4.4cqw, 56px); }
.pg-patch .dz-h {
  font: 800 clamp(.68rem, 1.1cqw, .8rem)/1.6 'Libre Franklin', sans-serif;
  text-transform: uppercase; letter-spacing: .14em;
  margin: 0 0 1em; padding-bottom: .55em; border-bottom: 2px solid var(--accent);
}
.pg-patch .dz-prose { font-size: clamp(.95rem, 1.55cqw, 1.08rem); line-height: 1.66; max-width: 62ch; }
.pg-patch .p-queue .p-track {
  display: grid; grid-template-columns: 2.4em 1fr 1.4em; gap: .6em;
  align-items: baseline; padding: .5em 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.pg-patch .p-track span { font: 500 .74em/1.5 'DM Mono', ui-monospace, monospace; opacity: .5; }
.pg-patch .p-track i { color: var(--accent); font-style: normal; }
.pg-patch .track-row {
  display: grid; grid-template-columns: 2.4em 1fr auto; gap: .4em 1em;
  align-items: baseline; padding: .45em 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.pg-patch .tr-num, .pg-patch .tr-pub {
  font: 500 .74em/1.5 'DM Mono', ui-monospace, monospace; opacity: .5;
  text-transform: uppercase; letter-spacing: .06em;
}
.pg-patch .dz-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(clamp(100px, 15cqw, 180px), 100%), 1fr));
  gap: clamp(6px, 1.4cqw, 16px);
}
.pg-patch .dz-shot img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.pg-patch .dz-shot figcaption {
  font: 500 .68em/1.45 'DM Mono', ui-monospace, monospace; opacity: .6; margin-top: .4em;
}
.pg-patch .dz-links { display: flex; flex-wrap: wrap; gap: .5em 1.2em; }
.pg-patch .dz-link {
  font: 800 .78em/1.5 'Libre Franklin', sans-serif; text-transform: uppercase;
  letter-spacing: .08em; color: var(--accent); text-decoration: none;
}
.pg-patch .p-foot { padding: clamp(24px, 5cqw, 64px) clamp(16px, 4cqw, 56px); }
.pg-patch .p-colophon {
  font: 500 .7em/1.6 'DM Mono', ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: .12em; opacity: .45;
  margin: clamp(20px, 3cqw, 40px) 0 0;
}

/* Two more inherited layouts that squeezed the shared bands, same family of
   bug as Open Field's flex row: the old .inv-opening put the name block in a
   narrow flex track (the story read at 251px of 980), and .tm-extra is a
   three-column grid the owner's text blocks fell into one-per-column. */
.pg-inventory .inv-opening-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(12px, 3cqw, 40px); align-items: start; }
.pg-inventory .inv-name-block { min-width: 0; }
.pg-terminal .tm-extra { display: block; }
.pg-terminal .tm-extra .tm-output { width: auto; }

/* Readable-copy safe area.
   Several intentionally full-bleed systems put their pictures and rules on the
   page edge. The words should not follow them there: retain the visual bleed
   while keeping visitor-facing copy at least one comfortable finger-width in. */
.pg-recto, .pg-filmography, .pg-streaming, .pg-nocturne,
.pg-vinyl, .pg-terminal, .pg-openfield {
  --copy-safe: clamp(14px, 2cqw, 24px);
}
.pg-recto .rc-pl figcaption { padding-inline: var(--copy-safe); box-sizing: border-box; }
.pg-filmography .dz-closing { padding-inline: var(--copy-safe); box-sizing: border-box; }
.pg-streaming :is(.dz-h, .dz-prose, .dz-closing, figcaption),
.pg-nocturne :is(.dz-h, .dz-prose, .dz-closing, figcaption),
.pg-vinyl :is(.dz-h, .dz-prose, .dz-closing),
.pg-terminal :is(.dz-h, .dz-prose, .dz-closing) {
  padding-inline: var(--copy-safe);
  box-sizing: border-box;
}
.pg-streaming .dz-links, .pg-nocturne .dz-links {
  padding-inline: var(--copy-safe);
  box-sizing: border-box;
}
.pg-openfield .of-cutline { padding-inline: var(--copy-safe); box-sizing: border-box; }

/* NOW STREAMING — the plain body. The featured shelf above (.ns-band) has
   real padding; .ns-body and .ns-block, which carry Synopsis, tracks,
   gallery, own text and contact, had NONE at all — every section butted
   straight against the next with no gap, so Synopsis ran straight into
   whatever followed it. Same horizontal measure as .ns-band, same vertical
   rhythm used for the other slot designs' body wrappers. */
.pg-streaming .ns-body {
  padding: clamp(1.6rem, 4cqw, 3rem) clamp(1.4rem, 5cqw, 4rem) clamp(2.4rem, 6cqw, 4.6rem);
}
.pg-streaming .ns-block { margin: 0 0 clamp(28px, 5cqw, 56px); }
.pg-streaming .ns-block:last-of-type { margin-bottom: 0; }
/* the accession numeral is a mark, not a headline: uncapped it took 349px of
   a 690px row and left the story reading at 240px */
.pg-inventory .inv-index-num {
  font-size: clamp(1.8rem, 5cqw, 3.6rem);
  line-height: 1;
  opacity: .28;
  font-variant-numeric: tabular-nums;
}