/* ==================== VINYL — a crate of sleeves ==========================
   From lab/15-vinyl.html ("Meadowvale Records").
   Grammar: square sleeves on hairline board, groove-textured CSS discs that
   slide out on hover, Archivo Black album type, Space Mono catalogue numbers,
   duotone covers (accent × grayscale multiply) that survive any palette.
   Wax colour derives from ink so dark palettes read as pale "picture discs" —
   intentional on all 12 palettes. All selectors scoped to .pg-vinyl.        */

/* ── root & local tokens ──────────────────────────────────────────────── */

.pg-vinyl {
  --v-wax:    color-mix(in srgb, var(--ink) 90%, var(--bg));
  --v-wax-hi: color-mix(in srgb, var(--ink) 72%, var(--bg));
  --v-shadow: 0 1px 2px rgba(10, 8, 4, .12), 0 14px 34px rgba(10, 8, 4, .16);
  --v-ease:   cubic-bezier(.22, .9, .24, 1);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  overflow-x: hidden;
}

.pg-vinyl ::selection { background: var(--accent); color: var(--bg); }

.pg-vinyl .v-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: clamp(18px, 4cqw, 56px);
}

.pg-vinyl h1, .pg-vinyl h2, .pg-vinyl h3 {
  font-family: var(--font-black);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.02;
  text-transform: uppercase;
  margin: 0;
}

.pg-vinyl .v-kicker {
  font: 700 10.5px/1.5 'Space Mono', monospace;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}

/* ── header bar ───────────────────────────────────────────────────────── */

.pg-vinyl .v-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px clamp(18px, 4cqw, 56px);
  border-bottom: 1px solid var(--line);
}

.pg-vinyl .v-bar-left { display: flex; align-items: center; gap: 11px; min-width: 0; }

.pg-vinyl .v-logo { max-height: 34px; max-width: 150px; object-fit: contain; }

.pg-vinyl .v-logo-disc {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: radial-gradient(circle, var(--accent) 0 27%, var(--v-wax) 28% 100%);
}
.pg-vinyl .v-logo-disc::after { content: none; }

.pg-vinyl .v-bar-name {
  font-family: var(--font-black);
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pg-vinyl .v-bar-note {
  font: 400 10px/1.5 'Space Mono', monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

/* ── the disc (shared) ────────────────────────────────────────────────── */

.pg-vinyl .v-disc {
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  background:
    radial-gradient(circle at 33% 30%, color-mix(in srgb, var(--bg) 26%, transparent), transparent 42%),
    repeating-radial-gradient(circle, var(--v-wax) 0 1.6px, var(--v-wax-hi) 1.6px 2.1px, var(--v-wax) 2.1px 3.4px),
    var(--v-wax);
  box-shadow: 0 10px 30px rgba(8, 6, 2, .28), inset 0 0 0 1px color-mix(in srgb, var(--bg) 14%, transparent);
}

.pg-vinyl .v-disc::before {
  content: "";
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 210deg,
    transparent 0 8%, color-mix(in srgb, var(--bg) 22%, transparent) 12%, transparent 18%,
    transparent 52%, color-mix(in srgb, var(--bg) 16%, transparent) 58%, transparent 64%);
}

.pg-vinyl .v-disc-label {
  position: absolute; inset: 33.5%;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  display: grid; place-items: center;
  text-align: center;
  padding: 9%;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent);
}

.pg-vinyl .v-disc-label::after {
  content: "";
  position: absolute; width: 9%; height: 9%;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
}

.pg-vinyl .v-disc-label span {
  font: 700 clamp(6px, .9cqw, 9px)/1.6 'Space Mono', monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  transform: translateY(-58%);
}

/* ── the sleeve (shared) ──────────────────────────────────────────────── */

.pg-vinyl .v-sleeve {
  position: relative;
  aspect-ratio: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--v-shadow);
  overflow: hidden;
}

.pg-vinyl .v-sleeve::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .09), transparent 34%),
    linear-gradient(-70deg, rgba(0, 0, 0, .05), transparent 30%);
}

/* Duotone cover: grayscale photograph multiplied over accent ground */
.pg-vinyl .v-duo { position: absolute; inset: 0; background: var(--accent); }
.pg-vinyl .v-duo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.08) brightness(.96);
  mix-blend-mode: multiply;
}
.pg-vinyl .v-duo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--v-wax) 80%, transparent), transparent 46%);
}

.pg-vinyl .v-cat {
  display: flex; justify-content: space-between; gap: 8px;
  font: 400 9.5px/1.5 'Space Mono', monospace;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.pg-vinyl .v-on-img { color: var(--bg); }
.pg-vinyl .v-on-img .v-cat { color: color-mix(in srgb, var(--bg) 78%, transparent); border-color: color-mix(in srgb, var(--bg) 30%, transparent); }

/* ── hero ─────────────────────────────────────────────────────────────── */

.pg-vinyl .v-hero { padding: clamp(40px, 7cqw, 84px) clamp(18px, 4cqw, 56px) clamp(64px, 9cqw, 120px); }

.pg-vinyl .v-stage {
  position: relative;
  width: min(88cqw, 600px);
  margin: clamp(36px, 7cqw, 96px) auto 0;
}

.pg-vinyl .v-hero-disc {
  position: absolute; top: -15.5%; left: 7%; width: 86%;
  transition: transform .9s var(--v-ease);
  z-index: 0;
}
.pg-vinyl .v-stage:hover .v-hero-disc { transform: translateY(-7%) rotate(9deg); }

.pg-vinyl .v-hero-sleeve { z-index: 1; }

.pg-vinyl .v-hero-face {
  position: absolute; inset: 0; z-index: 1;
  padding: clamp(20px, 4.5cqw, 44px);
  display: flex; flex-direction: column;
}

.pg-vinyl .v-hero-face .v-cat {
  font-size: clamp(9px, 1.4cqw, 11px);
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.pg-vinyl .v-title {
  margin-top: auto;
  font-size: clamp(46px, 9.6cqw, 96px);
  line-height: .92;
}
.pg-vinyl .v-title span { display: block; }
.pg-vinyl .v-title .v-alt { color: var(--accent); }
.pg-vinyl .v-on-img .v-title .v-alt { color: color-mix(in srgb, var(--accent) 55%, var(--bg)); }
.pg-vinyl .v-title--md { font-size: clamp(36px, 7.4cqw, 74px); }
.pg-vinyl .v-title--sm { font-size: clamp(26px, 5.4cqw, 54px); overflow-wrap: anywhere; }

.pg-vinyl .v-hero-sub {
  margin-top: 16px;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  border-top: 3px solid currentColor;
  padding-top: 12px;
}

.pg-vinyl .v-hero-sub p {
  margin: 0;
  font-size: clamp(12px, 1.9cqw, 15px);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.pg-vinyl .v-hero-mono {
  font: 400 clamp(9px, 1.4cqw, 11px)/1.5 'Space Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.pg-vinyl .v-on-img .v-hero-mono { color: color-mix(in srgb, var(--bg) 70%, transparent); }

/* matrix runout — the easter line */
.pg-vinyl .v-runout {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  z-index: 2;
  white-space: nowrap;
  font: 400 8.5px/1 'Space Mono', monospace;
  letter-spacing: .3em;
  color: var(--muted);
  opacity: .75;
  max-width: 96%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pg-vinyl .v-hero-sleeve .v-runout { color: color-mix(in srgb, currentColor 60%, transparent); }

/* hype sticker — first stat */
.pg-vinyl .v-hype {
  position: absolute;
  top: clamp(40px, 9%, 64px);
  right: clamp(-16px, -2%, -8px);
  width: clamp(96px, 24%, 148px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  display: grid; place-content: center;
  text-align: center;
  transform: rotate(10deg);
  padding: 12px;
  box-shadow: 0 6px 18px rgba(10, 8, 4, .22);
  z-index: 2;
}

.pg-vinyl .v-hype-val {
  display: block;
  font-family: var(--font-black);
  font-size: clamp(18px, 4cqw, 30px);
  line-height: 1;
}

.pg-vinyl .v-hype-lab {
  display: block;
  font: 700 clamp(8px, 1.4cqw, 10px)/1.4 'Space Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 5px;
}

/* ── stats strip ──────────────────────────────────────────────────────── */

.pg-vinyl .v-stats { border-block: 1px solid var(--line); }

.pg-vinyl .v-stats-row {
  display: flex; flex-wrap: wrap;
  gap: clamp(18px, 4cqw, 54px);
  padding-block: clamp(16px, 2.6cqw, 26px);
}

.pg-vinyl .v-stat { display: flex; align-items: baseline; gap: 10px; }

.pg-vinyl .v-stat-val {
  font-family: var(--font-black);
  font-size: clamp(20px, 3cqw, 30px);
  letter-spacing: -.01em;
}

.pg-vinyl .v-stat-lab {
  font: 400 10px/1.4 'Space Mono', monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── the crate ────────────────────────────────────────────────────────── */

.pg-vinyl .v-crate { padding: clamp(50px, 8cqw, 96px) 0; }

.pg-vinyl .v-crate-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  border-bottom: 3px solid var(--ink);
  padding-bottom: 16px;
  margin-bottom: clamp(24px, 4cqw, 40px);
}

.pg-vinyl .v-crate-head h2 { font-size: clamp(34px, 5.4cqw, 58px); }

.pg-vinyl .v-crate-side {
  margin: 0;
  font: 400 11px/1.9 'Space Mono', monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

.pg-vinyl .v-works {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3cqw, 34px) clamp(18px, 2.6cqw, 30px);
}

.pg-vinyl .v-work { position: relative; }
.pg-vinyl .v-work:hover { z-index: 6; }

.pg-vinyl .v-work-stage { position: relative; }

.pg-vinyl .v-work-disc {
  position: absolute; inset: 3.5% 0 auto 0;
  width: 93%; margin: 0 auto;
  transition: transform .55s var(--v-ease);
  z-index: 0;
}
.pg-vinyl .v-work:hover .v-work-disc { transform: translateX(30%) rotate(17deg); }

.pg-vinyl .v-work .v-sleeve {
  z-index: 1;
  transition: transform .45s var(--v-ease), box-shadow .45s var(--v-ease);
}
.pg-vinyl .v-work:hover .v-sleeve { transform: translate(-7px, -5px) rotate(-1.1deg); }

.pg-vinyl .v-face {
  position: absolute; inset: 0; z-index: 1;
  padding: clamp(16px, 2cqw, 24px);
  display: flex; flex-direction: column;
}

.pg-vinyl .v-st {
  margin-top: auto;
  font-size: clamp(24px, 3cqw, 34px);
  line-height: .98;
  overflow-wrap: anywhere;
}
.pg-vinyl .v-st--md { font-size: clamp(19px, 2.4cqw, 26px); }
.pg-vinyl .v-st--sm { font-size: clamp(15px, 1.9cqw, 20px); }

/* typographic sleeve faces */
.pg-vinyl .v-fx { position: absolute; inset: 0; }
.pg-vinyl .v-fx-rings {
  background: repeating-radial-gradient(circle at 50% 42%,
    var(--surface) 0 13px, color-mix(in srgb, var(--accent) 26%, var(--surface)) 13px 15px);
}
.pg-vinyl .v-fx-stripes {
  background: repeating-linear-gradient(0deg,
    var(--surface) 0 17px, color-mix(in srgb, var(--ink) 10%, var(--surface)) 17px 18px);
}
.pg-vinyl .v-fx-band {
  background: linear-gradient(105deg, var(--surface) 0 62%, var(--accent) 62% 100%);
}

.pg-vinyl .v-tcenter {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  text-align: center;
  padding: 9%;
}

.pg-vinyl .v-tt {
  font-size: clamp(28px, 3.4cqw, 40px);
  line-height: .98;
  overflow-wrap: anywhere;
}
.pg-vinyl .v-tt.v-st--md { font-size: clamp(21px, 2.6cqw, 29px); }
.pg-vinyl .v-tt.v-st--sm { font-size: clamp(16px, 2cqw, 22px); }

.pg-vinyl .v-tsub {
  margin: 10px 0 0;
  font: 400 9.5px/1.5 'Space Mono', monospace;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
}

.pg-vinyl .v-echo {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1.3px var(--accent);
}

.pg-vinyl .v-mirror {
  display: block;
  font-family: var(--font-black);
  font-size: clamp(28px, 3.4cqw, 40px);
  line-height: .98;
  text-transform: uppercase;
  transform: scaleY(-1);
  opacity: .2;
  overflow-wrap: anywhere;
}

/* crate divider — "…and N more in the stacks" */
.pg-vinyl .v-divider {
  aspect-ratio: 1;
  border: 1px dashed color-mix(in srgb, var(--ink) 40%, var(--bg));
  background:
    repeating-linear-gradient(-45deg, transparent 0 14px, color-mix(in srgb, var(--ink) 4%, transparent) 14px 15px),
    var(--bg);
  display: grid; place-content: center;
  text-align: center;
  gap: 8px;
  padding: 12%;
}

.pg-vinyl .v-div-n {
  font-family: var(--font-black);
  font-size: clamp(34px, 4.6cqw, 52px);
  color: var(--accent);
  line-height: 1;
}

.pg-vinyl .v-div-line {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pg-vinyl .v-div-mono {
  font: 400 9.5px/1.5 'Space Mono', monospace;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── back stock shelf ─────────────────────────────────────────────────── */

.pg-vinyl .v-shelf { padding: 0 0 clamp(50px, 8cqw, 90px); }

.pg-vinyl .v-shelf-head {
  font: 400 10.5px/1.6 'Space Mono', monospace;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin: 0 0 16px;
}

.pg-vinyl .v-shelf-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(88px, 11cqw, 132px);
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: thin;
}

.pg-vinyl .v-shelf-row img {
  aspect-ratio: 1;
  width: 100%;
  object-fit: cover;
  display: block;
  border: 1px solid var(--line);
  filter: grayscale(1) contrast(1.05);
  transition: filter .3s ease;
}
.pg-vinyl .v-shelf-row img:hover { filter: none; }

.pg-vinyl .v-shelf-more {
  aspect-ratio: 1;
  border: 1px dashed var(--line);
  display: grid; place-items: center;
  text-align: center;
  font: 700 11px/1.6 'Space Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── now spinning ─────────────────────────────────────────────────────── */

.pg-vinyl .v-spin { padding: 0 0 clamp(54px, 8cqw, 100px); }

.pg-vinyl .v-deck {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--v-shadow);
  padding: clamp(24px, 4cqw, 52px);
  padding-top: clamp(48px, 6cqw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4cqw, 60px);
  align-items: center;
}

/* mono ticker strip along the deck's top edge */
.pg-vinyl .v-ticker {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
  font: 400 9px/1 'Space Mono', monospace;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
}
.pg-vinyl .v-ticker span { display: inline-block; padding-left: 20px; }

@media (prefers-reduced-motion: no-preference) {
  .pg-vinyl .v-ticker span { animation: v-tick 36s linear infinite; }
  @keyframes v-tick { to { transform: translateX(-100%); } }
}

.pg-vinyl .v-platter { position: relative; width: min(100%, 440px); margin: 10px auto 6px; }

.pg-vinyl .v-spin-disc { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .pg-vinyl .v-spin-disc { animation: v-rev 3.6s linear infinite; }
  @keyframes v-rev { to { transform: rotate(360deg); } }
}
.pg-vinyl .v-spin-disc .v-disc-label span { transform: none; font-size: clamp(7px, 1.1cqw, 9.5px); }

.pg-vinyl .v-tonearm {
  position: absolute; top: -4%; right: -2%;
  width: 46%; aspect-ratio: 1;
  pointer-events: none;
  transform: rotate(3deg);
  transform-origin: 82% 14%;
  z-index: 2;
  filter: drop-shadow(0 6px 8px rgba(8, 6, 2, .3));
}
.pg-vinyl .v-arm {
  position: absolute; top: 14%; right: 18%;
  width: 5.5%; height: 74%;
  background: linear-gradient(90deg, var(--muted), var(--ink));
  border-radius: 4px;
}
.pg-vinyl .v-pivot {
  position: absolute; top: 8%; right: 12%;
  width: 17%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, var(--muted), var(--ink) 70%);
}
.pg-vinyl .v-headshell {
  position: absolute; bottom: 2%; right: 14.6%;
  width: 12%; height: 13%;
  background: var(--accent);
  border-radius: 3px;
  transform: rotate(16deg);
}

.pg-vinyl .v-spin-copy h2 { font-size: clamp(30px, 4cqw, 46px); margin: 2px 0 4px; }

.pg-vinyl .v-spin-note {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 46ch;
  margin: 12px 0 20px;
}

/* trackRows (kit markup) styled as the side-A listing */
.pg-vinyl .tracks { border-top: 1px solid var(--line); }

.pg-vinyl .track-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 11px 4px;
  font-size: 14px;
  transition: background .2s, padding-left .25s;
}
.pg-vinyl .track-row:hover {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  padding-left: 10px;
}

.pg-vinyl .tr-num {
  font: 400 10px/1 'Space Mono', monospace;
  color: var(--muted);
  flex: none;
  width: 30px;
}
.pg-vinyl .tr-num::before { content: "A"; }

.pg-vinyl .track-row strong { font-weight: 600; letter-spacing: .01em; }

.pg-vinyl .tr-pub {
  font: 400 10px/1.4 'Space Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: auto;
  text-align: right;
}

.pg-vinyl .tr-links { display: flex; gap: 6px; flex: none; }
.pg-vinyl .tr-links a, .pg-vinyl .tr-links button {
  font: 700 9px/1 'Space Mono', monospace;
  letter-spacing: .08em;
  border: 1px solid var(--line);
  background: none;
  color: var(--muted);
  padding: 5px 7px;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.pg-vinyl .tr-links a:hover, .pg-vinyl .tr-links button:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ── promo reel ───────────────────────────────────────────────────────── */

.pg-vinyl .v-reel { padding: 0 0 clamp(54px, 8cqw, 100px); }

.pg-vinyl .v-yt {
  border: 1px solid var(--line);
  box-shadow: var(--v-shadow);
  background: var(--v-wax);
}

/* ── sleeve-back credits ──────────────────────────────────────────────── */

.pg-vinyl .v-credits { padding: 0 0 clamp(54px, 8cqw, 100px); }

.pg-vinyl .v-back {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--v-shadow);
  padding: clamp(26px, 4.5cqw, 60px);
}

.pg-vinyl .v-runout--top {
  bottom: auto; top: 10px;
  position: absolute; left: 50%; transform: translateX(-50%);
}

.pg-vinyl .v-back h2 { font-size: clamp(30px, 4.6cqw, 52px); }

.pg-vinyl .v-cred-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(28px, 5cqw, 70px);
  margin-top: 26px;
}

.pg-vinyl .v-bio {
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 1.75;
  white-space: pre-line;
}

.pg-vinyl .v-fine {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.pg-vinyl .v-barcode { margin-top: 30px; display: inline-block; }
.pg-vinyl .v-bars {
  width: 168px; height: 44px;
  background: repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 6px,
    transparent 6px 11px, var(--ink) 11px 15px, transparent 15px 17px);
}
.pg-vinyl .v-barcode small {
  display: block;
  font: 400 9px/1 'Space Mono', monospace;
  letter-spacing: .34em;
  color: var(--muted);
  margin-top: 6px;
  text-align: center;
}

/* liner register: territories / publishers / works */
.pg-vinyl .v-lblock h3 {
  font-size: 13px;
  letter-spacing: .14em;
  margin: 26px 0 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 7px;
}
.pg-vinyl .v-lblock:first-child h3 { margin-top: 0; }

.pg-vinyl .v-llead {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

.pg-vinyl .v-llist {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: 4px 6px;
}

.pg-vinyl .v-llist li {
  font: 400 11px/1.7 'Space Mono', monospace;
  letter-spacing: .06em;
  color: var(--ink);
}
.pg-vinyl .v-llist li:not(:last-child)::after { content: " ·"; color: var(--muted); }

.pg-vinyl .v-lmore { color: var(--muted); }

/* ── user sections flex zone ──────────────────────────────────────────── */

.pg-vinyl .v-xzone {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4cqw, 56px) clamp(40px, 6cqw, 80px);
}

/* ── footer: the shop stamp ───────────────────────────────────────────── */

.pg-vinyl .v-foot {
  border-top: 3px solid var(--ink);
  padding: clamp(48px, 7cqw, 88px) 0 34px;
}

.pg-vinyl .v-foot-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(30px, 6cqw, 80px);
  align-items: center;
}

.pg-vinyl .v-stamp {
  width: clamp(190px, 24cqw, 250px);
  aspect-ratio: 1.12;
  border: 3px double var(--accent);
  border-radius: 14px;
  color: var(--accent);
  display: grid; place-items: center;
  text-align: center;
  padding: 20px;
  transform: rotate(-7deg);
  position: relative;
  mask-image: radial-gradient(circle at 30% 20%, #000 55%, rgba(0, 0, 0, .72) 72%, #000);
}
.pg-vinyl .v-stamp::before {
  content: "";
  position: absolute; inset: 9px;
  border: 1.5px solid var(--accent);
  border-radius: 9px;
  opacity: .7;
}
.pg-vinyl .v-stamp span {
  font: 700 clamp(10px, 1.3cqw, 12.5px)/1.8 'Space Mono', monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.pg-vinyl .v-foot-copy h2 { font-size: clamp(28px, 4.4cqw, 50px); margin-bottom: 12px; }

.pg-vinyl .v-foot-note {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 0 22px;
}

.pg-vinyl .v-foot-links { display: flex; gap: 14px 26px; flex-wrap: wrap; }

.pg-vinyl .v-foot-links .soc {
  font: 400 12px/1.4 'Space Mono', monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border: 0;
  border-bottom: 2px solid var(--accent);
  border-radius: 0;
  padding: 0 0 4px;
  background: none;
  transition: color .2s;
}
.pg-vinyl .v-foot-links .soc:hover { color: var(--accent); }

.pg-vinyl .colophon {
  margin: 56px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font: 400 9.5px/1.6 'Space Mono', monospace;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── scroll-reveal (gated on .stage.animate) ──────────────────────────── */

.stage.animate .pg-vinyl > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1),
              transform .7s cubic-bezier(.22, 1, .36, 1);
}
.stage.animate .pg-vinyl > *.in { opacity: 1; transform: none; }

/* ── responsive (container queries) ───────────────────────────────────── */

@container page (max-width: 980px) {
  .pg-vinyl .v-works { grid-template-columns: repeat(2, 1fr); }
  .pg-vinyl .v-deck { grid-template-columns: 1fr; }
  .pg-vinyl .v-cred-grid { grid-template-columns: 1fr; }
  .pg-vinyl .v-foot-grid { grid-template-columns: 1fr; justify-items: start; }
}

@container page (max-width: 620px) {
  .pg-vinyl .v-bar-note { display: none; }
  .pg-vinyl .v-works { grid-template-columns: 1fr; max-width: 430px; margin: 0 auto; }
  .pg-vinyl .v-hero-disc { display: none; }
  .pg-vinyl .v-stage { margin-top: 4px; }
  .pg-vinyl .v-work-disc { display: none; }
  .pg-vinyl .v-work:hover .v-sleeve { transform: none; }
  .pg-vinyl .v-crate-side { text-align: left; }
  .pg-vinyl .v-hype { top: -20px; right: -6px; }
  .pg-vinyl .v-title { font-size: clamp(38px, 12cqw, 56px); }
  .pg-vinyl .v-title--md { font-size: clamp(30px, 9.5cqw, 44px); }
  .pg-vinyl .v-title--sm { font-size: clamp(22px, 7cqw, 34px); }
  .pg-vinyl .v-st { font-size: clamp(24px, 7cqw, 34px); }
  .pg-vinyl .v-tt, .pg-vinyl .v-mirror { font-size: clamp(26px, 8cqw, 38px); }
  .pg-vinyl .tr-pub { display: none; }
}

@container page (max-width: 420px) {
  .pg-vinyl .v-hero { padding-inline: 14px; }
  .pg-vinyl .v-wrap { padding-inline: 14px; }
  .pg-vinyl .v-runout { font-size: 7.5px; letter-spacing: .2em; }
  .pg-vinyl .v-stamp { transform: rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .pg-vinyl .v-stage:hover .v-hero-disc,
  .pg-vinyl .v-work:hover .v-work-disc,
  .pg-vinyl .v-work:hover .v-sleeve { transform: none; }
}