/* ============================================================
   PICA FUNK RECORDS — styles.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --paper:        #E8E4D7;
  --paper-deep:   #DDD7C6;
  --paper-soft:   #EFEBDF;
  --ink:          #121110;
  --ink-soft:     #232220;
  --rule:         #1A1A18;
  --hair:         rgba(18, 17, 16, 0.18);
  --muted:        #6B6660;
  --red:          #C8102E;

  --hair-w:       1px;
  --rule-w:       2px;
  --slab-w:       8px;
  --gutter:       clamp(16px, 1.8vw, 28px);
  --pad-x:        clamp(20px, 4vw, 64px);
  --max:          1480px;

  --t-mono:       'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --t-italic:     'Instrument Serif', Georgia, serif;
  --t-block:      'Archivo Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper);
  color: var(--ink);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--t-mono);
  font-size: 13px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "ss01", "ss02", "calt" 1;
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

button {
  font: inherit;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}

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

/* ---------------- Grain overlay -------------------- */
.grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  mix-blend-mode: multiply;
  opacity: 0.35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.07  0 0 0 0 0.06  0 0 0 0 0.06  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

/* ---------------- Top status bar -------------------- */
.statusbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 6px var(--pad-x);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: var(--hair-w) solid var(--hair);
  background: var(--paper);
}
.statusbar .dot {
  width: 7px; height: 7px;
  background: var(--red);
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  animation: blink 1.6s steps(2, end) infinite;
}
.statusbar .sep { color: var(--muted); }
.statusbar .right { margin-left: auto; display: flex; gap: 18px; color: var(--muted); }
@keyframes blink { 50% { opacity: 0.15; } }

/* ---------------- Marquee ticker ------------------- */
.marquee {
  position: relative;
  z-index: 2;
  border-bottom: var(--rule-w) solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  padding: 9px 0;
}
.marquee-track {
  display: inline-flex;
  white-space: nowrap;
  gap: 60px;
  font-family: var(--t-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  animation: scroll 48s linear infinite;
  will-change: transform;
}
.marquee-track .pill {
  display: inline-flex; align-items: center; gap: 14px;
}
.marquee-track .pill em {
  font-family: var(--t-italic);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: #F2EDDD;
  font-size: 14px;
}
.marquee-track .marker {
  color: var(--red);
}
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------------- Nav ------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--paper);
  border-bottom: var(--rule-w) solid var(--ink);
  padding: 14px var(--pad-x);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}
.nav .brand {
  font-family: var(--t-block);
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.nav .brand .mark {
  width: 22px; height: 22px;
  background: var(--ink);
  position: relative;
  display: inline-block;
}
.nav .brand .mark::after {
  content: "";
  position: absolute;
  inset: 6px;
  background: var(--red);
}
.nav .links {
  display: flex;
  gap: 28px;
  justify-content: center;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nav .links a {
  position: relative;
  padding: 4px 0;
}
.nav .links a[data-active="true"]::before {
  content: "[";
  position: absolute;
  left: -10px;
  color: var(--red);
}
.nav .links a[data-active="true"]::after {
  content: "]";
  position: absolute;
  right: -10px;
  color: var(--red);
}
.nav .actions {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------------- Reusable bits ---------------------- */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}
.eyebrow {
  font-family: var(--t-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow .acc { color: var(--red); }
.hr-ink { border: 0; border-top: var(--rule-w) solid var(--ink); }
.hr-hair { border: 0; border-top: var(--hair-w) solid var(--hair); }
.col-text { max-width: 60ch; }

/* ---------------- HERO --------------------------------- */
.hero {
  position: relative;
  padding: clamp(40px, 6vw, 96px) var(--pad-x) clamp(28px, 4vw, 64px);
  border-bottom: var(--rule-w) solid var(--ink);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: end;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.6fr 1fr; gap: 56px; }
}

.hero-title {
  font-family: var(--t-italic);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(72px, 16vw, 248px);
  line-height: 0.84;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.hero-title .row {
  display: block;
  position: relative;
}
.hero-title .row:nth-child(2) {
  padding-left: clamp(40px, 8vw, 140px);
}
.hero-title .row .punct {
  color: var(--red);
}
.hero-title .glyph {
  display: inline-block;
  vertical-align: baseline;
  font-family: var(--t-block);
  font-style: normal;
  font-size: 0.22em;
  letter-spacing: -0.02em;
  transform: translateY(-1.2em);
  padding: 0 0.25em;
  border: var(--hair-w) solid var(--hair);
  color: var(--muted);
  margin-left: 0.15em;
}

.hero-meta {
  display: grid;
  gap: 14px;
  align-content: end;
  padding-top: 12px;
}
.hero-meta dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 18px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero-meta dt {
  color: var(--muted);
}
.hero-meta dd {
  color: var(--ink);
}
.hero-meta dd .star {
  color: var(--red);
  margin-right: 6px;
}

.hero-strip {
  margin-top: clamp(28px, 4vw, 52px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 900px) {
  .hero-strip { grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
}
.hero-strip .manifesto {
  font-family: var(--t-italic);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.hero-strip .manifesto .red { color: var(--red); }
.hero-strip .small p { margin-bottom: 0.8em; font-size: 12.5px; }

/* ---------------- Section header ----------------------- */
.section {
  border-bottom: var(--rule-w) solid var(--ink);
  padding: clamp(36px, 4vw, 72px) var(--pad-x);
}
.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: clamp(24px, 3vw, 44px);
}
@media (min-width: 900px) {
  .section-head {
    grid-template-columns: auto 1fr auto;
    align-items: end;
    gap: 36px;
  }
}
.section-head h2 {
  font-family: var(--t-block);
  font-size: clamp(40px, 7vw, 92px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.section-head h2 em {
  font-family: var(--t-italic);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink-soft);
  display: inline-block;
  transform: translateY(0.05em);
}
.section-head .lede {
  font-size: 13px;
  max-width: 36ch;
  color: var(--ink-soft);
}
.section-head .count {
  font-family: var(--t-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  white-space: nowrap;
}

/* ---------------- Releases grid ------------------------ */
.releases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: var(--hair-w) solid var(--hair);
  border-left: var(--hair-w) solid var(--hair);
}
@media (min-width: 700px) {
  .releases-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  .releases-grid { grid-template-columns: repeat(4, 1fr); }
}

.release-card {
  position: relative;
  border-right: var(--hair-w) solid var(--hair);
  border-bottom: var(--hair-w) solid var(--hair);
  padding: 16px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  background: var(--paper);
  transition: background 0.25s ease;
}
.release-card:hover { background: var(--paper-soft); }
.release-card .meta-top {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.release-card .meta-top .cat { color: var(--ink); }
.release-card .meta-bottom {
  display: grid;
  gap: 2px;
  font-size: 12px;
}
.release-card .meta-bottom .artist {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.release-card .meta-bottom .title {
  font-family: var(--t-italic);
  font-style: italic;
  font-size: 16px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.release-card .meta-bottom .fmt {
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
}
.release-card[data-status="forthcoming"] .meta-top .cat::before {
  content: "○ ";
  color: var(--red);
}
.release-card[data-status="sold_out"] .fmt .stk {
  color: var(--red);
}

/* ---------------- Cover art (5 variants) ---------------- */
.cover {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--paper-deep);
  color: var(--ink);
  overflow: hidden;
  border: var(--hair-w) solid var(--ink);
  container-type: inline-size;
}
.cover[data-accent="true"] { background: #E8E4D7; }

/* Variant A */
.cover[data-variant="A"] {
  display: grid;
  place-items: center;
  background: var(--paper);
}
.cover[data-variant="A"] .numeral {
  font-family: var(--t-block);
  font-size: 46cqi;
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.cover[data-variant="A"][data-accent="true"] .numeral { color: var(--red); }
.cover[data-variant="A"] .corner-tl,
.cover[data-variant="A"] .corner-br {
  position: absolute;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.cover[data-variant="A"] .corner-tl { top: 10px; left: 10px; }
.cover[data-variant="A"] .corner-br { bottom: 10px; right: 10px; text-align: right; }

/* Variant B */
.cover[data-variant="B"] {
  display: grid;
  grid-template-rows: 1fr auto auto auto 1fr;
  padding: 14px;
  gap: 10px;
  background: var(--paper);
}
.cover[data-variant="B"] .frame {
  border: var(--hair-w) solid var(--ink);
  height: 14cqi;
  align-self: start;
}
.cover[data-variant="B"] .artist {
  font-family: var(--t-block);
  font-size: 5.6cqi;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.cover[data-variant="B"] .ttl {
  font-family: var(--t-italic);
  font-style: italic;
  font-size: 11cqi;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.cover[data-variant="B"][data-accent="true"] .ttl { color: var(--red); }
.cover[data-variant="B"] .footer {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  align-self: end;
  display: flex;
  justify-content: space-between;
  border-top: var(--hair-w) solid var(--hair);
  padding-top: 8px;
  margin-top: 8px;
}

/* Variant C */
.cover[data-variant="C"] {
  background: var(--paper-soft);
  display: grid;
  place-items: center;
  padding: 18px;
}
.cover[data-variant="C"] .stamp {
  border: 2px solid var(--ink);
  padding: 10px 14px;
  text-align: center;
  width: 78%;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: grid;
  gap: 6px;
  position: relative;
}
.cover[data-variant="C"] .stamp::before {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px dashed var(--ink);
  pointer-events: none;
}
.cover[data-variant="C"] .stamp .big {
  font-family: var(--t-italic);
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 6px 0;
  line-height: 1;
}
.cover[data-variant="C"][data-accent="true"] .stamp .big { color: var(--red); }
.cover[data-variant="C"] .stamp .rule { border-top: 1px solid var(--ink); margin: 6px 0; }

/* Variant D */
.cover[data-variant="D"] {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.cover[data-variant="D"]::before {
  content: "";
  position: absolute;
  inset: -10%;
  background-image: radial-gradient(rgba(232, 228, 215, 0.18) 1px, transparent 1.6px);
  background-size: 7px 7px;
  pointer-events: none;
}
.cover[data-variant="D"] .stack {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 3cqi;
  transform: rotate(-10deg) translateY(-2%);
  padding: 0 6%;
}
.cover[data-variant="D"] .stack .line {
  font-family: var(--t-block);
  font-size: 14cqi;
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.cover[data-variant="D"] .stack .line.italic {
  font-family: var(--t-italic);
  font-style: italic;
  text-transform: none;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.cover[data-variant="D"][data-accent="true"] .stack .line.italic { color: var(--red); }
.cover[data-variant="D"] .corner {
  position: absolute;
  bottom: 10px; left: 10px;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.7;
}

/* Variant E */
.cover[data-variant="E"] {
  background: var(--paper);
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  padding: 14px;
}
.cover[data-variant="E"] .top {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  align-items: flex-start;
}
.cover[data-variant="E"] .marks {
  display: flex;
  justify-content: center;
  gap: 8cqi;
  align-items: center;
}
.cover[data-variant="E"] .marks .sq {
  width: 18cqi; height: 18cqi;
  background: var(--ink);
}
.cover[data-variant="E"] .marks .sq.b {
  background: transparent;
  border: 2px solid var(--ink);
}
.cover[data-variant="E"][data-accent="true"] .marks .sq.a { background: var(--red); }
.cover[data-variant="E"] .bot {
  align-self: end;
  font-family: var(--t-italic);
  font-style: italic;
  font-size: 6.4cqi;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Real covers — brutalist overlay */
.cover-real {
  background: var(--ink);
  padding: 0;
}
.cover-real img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.02) saturate(0.95);
}
.cover-real .overlay-cat {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: stretch;
  font-family: var(--t-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  z-index: 2;
}
.cover-real .overlay-cat-prefix {
  background: var(--ink);
  color: var(--paper);
  padding: 5px 7px;
}
.cover-real .overlay-cat-num {
  background: var(--paper);
  color: var(--ink);
  padding: 5px 7px;
  font-weight: 700;
}
.cover-real[data-accent="true"] .overlay-cat-num {
  background: var(--red);
  color: var(--paper);
}
.cover-real .overlay-fmt {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: var(--paper);
  color: var(--ink);
  padding: 5px 7px;
  font-family: var(--t-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  z-index: 2;
}
.cover-real .overlay-edge {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 6px;
  background: var(--red);
  z-index: 2;
}

/* Artist roster thumbs */
.roster .thumb {
  width: 56px;
  height: 56px;
  display: block;
  object-fit: cover;
  border: 1px solid var(--ink);
  background: var(--paper-deep);
  filter: contrast(1.02);
}
.roster .row.with-thumb {
  grid-template-columns: 56px 1fr;
  gap: 18px;
}
@media (min-width: 900px) {
  .roster .row.with-thumb {
    grid-template-columns: 64px 90px minmax(220px, 1fr) minmax(180px, 0.8fr) auto;
    gap: 28px;
  }
  .roster .thumb { width: 64px; height: 64px; }
}

/* ---------------- Artists list ------------------------- */
.roster {
  border-top: var(--rule-w) solid var(--ink);
}
.roster .row {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: baseline;
  gap: 24px;
  padding: 18px 0;
  border-bottom: var(--hair-w) solid var(--hair);
  position: relative;
  transition: padding-left 0.25s ease;
}
@media (min-width: 900px) {
  .roster .row {
    grid-template-columns: 110px minmax(280px, 1fr) minmax(180px, 0.8fr) auto;
    gap: 36px;
  }
}
.roster .row:hover {
  padding-left: 14px;
  background: var(--paper-soft);
}
.roster .num {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
}
.roster .name {
  font-family: var(--t-italic);
  font-style: italic;
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.roster .bio {
  font-size: 13px;
  color: var(--ink-soft);
  max-width: 48ch;
}
.roster .loc {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  white-space: nowrap;
}
.roster .arrow {
  font-family: var(--t-mono);
  font-size: 14px;
  color: var(--ink);
  opacity: 0.35;
}
.roster .row:hover .arrow { opacity: 1; color: var(--red); }

/* ---------------- Roster preview (homepage) ------------ */
.preview-roster {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 28px;
}
@media (min-width: 900px) {
  .preview-roster { grid-template-columns: repeat(3, 1fr); }
}
.preview-roster a {
  font-family: var(--t-italic);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  padding: 8px 0;
  border-bottom: var(--hair-w) solid var(--hair);
}
.preview-roster a:hover { color: var(--red); text-decoration: none; }

/* ---------------- Footer ------------------------------- */
.footer {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(36px, 4vw, 56px) var(--pad-x);
}
.footer .grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .footer .grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
}
.footer h4 {
  font-family: var(--t-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #B9B5A5;
  margin-bottom: 14px;
}
.footer .mast {
  font-family: var(--t-italic);
  font-style: italic;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.footer .mast .acc { color: var(--red); }
.footer ul { list-style: none; display: grid; gap: 6px; font-size: 12.5px; }
.footer .sub {
  margin-top: 22px;
  display: flex;
  gap: 6px;
  align-items: stretch;
  max-width: 380px;
}
.footer .sub input {
  flex: 1;
  background: transparent;
  border: 1px solid #5A5650;
  color: var(--paper);
  font: inherit;
  padding: 8px 10px;
  font-size: 12px;
  outline: none;
}
.footer .sub input::placeholder { color: #8A867E; }
.footer .sub input:focus { border-color: var(--paper); }
.footer .sub button {
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  padding: 0 14px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.footer .sub button:hover { background: var(--red); color: var(--paper); }

.footer .bottom {
  margin-top: clamp(28px, 4vw, 48px);
  padding-top: 18px;
  border-top: 1px solid #2C2A28;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 36px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #918C7E;
}

/* ---------------- Catalog list (releases page) --------- */
.cat-list {
  border-top: var(--rule-w) solid var(--ink);
}
.cat-list .row {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 18px;
  padding: 16px 0;
  border-bottom: var(--hair-w) solid var(--hair);
  align-items: center;
  font-size: 12.5px;
}
@media (min-width: 900px) {
  .cat-list .row {
    grid-template-columns: 86px 1.5fr 2fr 0.9fr 0.7fr 0.6fr;
    gap: 28px;
  }
}
.cat-list .row .cat {
  font-weight: 700;
  letter-spacing: 0.06em;
}
.cat-list .row .artist {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
}
.cat-list .row .title {
  font-family: var(--t-italic);
  font-style: italic;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.cat-list .row .fmt,
.cat-list .row .date,
.cat-list .row .stat {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.cat-list .row .stat[data-status="in_print"] { color: var(--ink); }
.cat-list .row .stat[data-status="sold_out"] { color: var(--red); }
.cat-list .row .stat[data-status="forthcoming"] { color: var(--muted); }
.cat-list .row .stat[data-status="forthcoming"]::before { content: "○ "; }

/* ---------------- Page header (sub-pages) -------------- */
.page-head {
  padding: clamp(40px, 6vw, 96px) var(--pad-x) clamp(28px, 4vw, 56px);
  border-bottom: var(--rule-w) solid var(--ink);
  display: grid;
  gap: 16px;
}
.page-head h1 {
  font-family: var(--t-italic);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(72px, 14vw, 200px);
  line-height: 0.85;
  letter-spacing: -0.025em;
}
.page-head h1 .acc { color: var(--red); }
.page-head .lede {
  font-size: 14px;
  max-width: 56ch;
  color: var(--ink-soft);
}

/* ---------------- utility -------------------------------- */
.flex { display: flex; }
.gap-12 { gap: 12px; }
.gap-24 { gap: 24px; }
.between { justify-content: space-between; }
.center { align-items: center; }
.uppercase { text-transform: uppercase; letter-spacing: 0.1em; }

.no-mobile { display: none; }
@media (min-width: 900px) { .no-mobile { display: inherit; } }