/* Press coverage — /press and /press/<slug>. Loaded after style.css, so the
   :root tokens, .btn, .eyebrow and the shared .pq quote treatment are already
   in play. .pq itself lives in style.css because the homepage and the song
   pages show press quotes too and never load this file.

   Editorial, not promotional. The job of this page is to let a booker or a
   writer see in five seconds that independent people have covered the band —
   which argues for restraint. No logo wall, no scrolling marquee, no badges. */

.wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 24px; }

/* ---------- masthead (/press) ---------- */
/* Six crops of the band's own gear tiled edge to edge, each tinted a different
   palette colour. The tiles are decorative -- aria-hidden with empty alt -- and
   the masthead reads fine with images off, since the type sits on its own scrim
   rather than depending on the photos being there.
   Legibility is bought in three places, and the split is the whole point:
   the tiles are levelled in make_press_header.py, a light veil sits over the
   whole band, and a local ellipse darkens only where the words are. */
.pz-mast { position: relative; overflow: hidden; padding: 0 0 4px; }

.pz-tiles {
  position: absolute; inset: 0; display: flex; pointer-events: none;
}
.pz-tile { position: relative; flex: 1 1 0; min-width: 0; }
.pz-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Desaturated so the tint lands on luminance rather than fighting the stage
     lighting, which is already magenta. No brightness() here on purpose: the
     tiles are levelled individually in make_press_header.py, and a blanket
     multiplier would just re-impose the unevenness that fixed. */
  filter: grayscale(1) contrast(1.02);
}
.pz-tile::after {
  content: ""; position: absolute; inset: 0;
  background: var(--tint); mix-blend-mode: color;
}
/* The veil, and it is deliberately light. An earlier version ran 0.82-0.88 and
   the gear vanished -- the header read as one picture at each end with a black
   hole between them. Legibility is bought locally instead, by the scrim behind
   the text block below, so the imagery can stay visible right across the band. */
.pz-mast::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    var(--ink) 0%, rgba(20, 11, 28, 0.34) 16%,
    rgba(20, 11, 28, 0.38) 80%, var(--ink) 100%);
}

.pz-mast-in {
  position: relative; z-index: 1;
  text-align: center; padding: 62px 24px 10px; max-width: 900px; margin: 0 auto;
}
/* Local contrast for the type, rather than flattening the whole header to get
   it. An ellipse centred on the text, fading out well before the edges, so the
   tiles either side stay legible as gear. */
.pz-mast-in::before {
  content: ""; position: absolute; z-index: -1;
  inset: -34px -10% -18px;
  background: radial-gradient(ellipse 66% 94% at 50% 50%,
    rgba(20, 11, 28, 0.95) 0%, rgba(20, 11, 28, 0.86) 54%, transparent 82%);
  /* A light touch of blur, and light on purpose: measured, the ellipse above is
     doing nearly all the work (the 13px eyebrow scores 7.05:1 at 4px of blur and
     7.12:1 at 9px). So this is set at the point where it stops the tiles' fine
     detail buzzing under small type, and no further -- past that it just softens
     gear the header exists to show. */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}
.pz-mast-in .eyebrow {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--tangerine); margin: 0 0 14px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}
.pz-mast-in h1 { margin: 0 0 16px; }
.pz-big {
  display: block;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(40px, 9vw, 96px); line-height: 0.98;
  letter-spacing: 0.02em; color: var(--cream);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.75);
}
.pz-c { color: var(--green); }
/* The searchable half of the title. Inside the h1 on purpose -- it is real
   heading text, just set as a strapline. */
.pz-h1-sub {
  display: block; margin-top: 12px;
  font-family: var(--mono); font-weight: 400;
  font-size: clamp(11px, 1.5vw, 13.5px); letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--cream);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95);
}
.pz-mast-in .lede {
  color: var(--cream); font-size: 18px; line-height: 1.5;
  max-width: 46ch; margin: 0 auto;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95);
}
.pz-credit {
  text-align: center; margin: 0; padding: 14px 24px 0;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--cream-dim); opacity: 0.65;
}
.pz-credit a { color: inherit; }
.pz-credit a:hover { color: var(--cyan); }

@media (max-width: 700px) {
  /* Six slivers on a phone is stripes, not gear. Drop to three tiles. */
  .pz-tile:nth-child(n + 4) { display: none; }
  .pz-mast-in { padding-top: 44px; }
}

/* ---------- article page hero ---------- */
.pc-hero { text-align: center; padding: 58px 24px 20px; max-width: 820px; margin: 0 auto; }
.pc-hero .eyebrow {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--tangerine); margin: 0 0 12px;
}
.pc-hero h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(34px, 6.5vw, 62px); line-height: 1.05;
  letter-spacing: 0.03em; margin: 0 0 14px; color: var(--cream);
}
.pc-hero .lede {
  color: var(--cream-dim); font-size: 18px; line-height: 1.5;
  max-width: 46ch; margin: 0 auto;
}

/* An article page leads with someone else's headline, so it is set left and a
   notch smaller than the section title on /press — it is a document, not a
   banner. */
.pc-art { text-align: left; padding-bottom: 8px; }
.pc-art h1 { font-size: clamp(27px, 4.4vw, 42px); max-width: 24ch; }

.pc-crumbs {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  color: var(--cream-dim); margin: 0 0 18px;
}
.pc-crumbs a { color: var(--cream-dim); text-decoration: none; }
.pc-crumbs a:hover { color: var(--green); }
.pc-crumbs span { opacity: 0.55; margin: 0 4px; }
.pc-crumbs [aria-current] { opacity: 1; color: var(--cream); margin: 0; }

/* ---------- sections ---------- */
.s { padding: 34px 0 6px; border-top: 1px solid var(--hairline); margin-top: 30px; }
.s:first-child { border-top: 0; margin-top: 0; }
.s h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(22px, 3vw, 28px); letter-spacing: 0.02em;
  margin: 0 0 18px; color: var(--green);
}
.s h2 em { font-style: italic; }
.s p { color: var(--cream-dim); line-height: 1.68; max-width: 66ch; margin: 0 0 14px; }
.s p em { color: var(--cream); font-style: italic; }
#summary p { color: var(--cream); font-size: 18px; }

.pk-note { font-size: 14px; color: var(--cream-dim); }
.pk-note a { color: var(--cyan); }

.pc-empty { font-size: 17px; }
.pc-empty a { color: var(--cyan); }

/* ---------- the shared meta line ---------- */
/* publication · type · date. Mono and small everywhere it appears, so a piece of
   coverage is identifiable at a glance whichever surface you meet it on. */
.pc-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cream-dim);
  margin: 0 0 10px !important;
}
.pc-pub { color: var(--tangerine); }
.pc-type {
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 2px 9px; font-size: 10.5px; letter-spacing: 0.14em;
}

/* ---------- the numbered list ---------- */
/* One list, not "featured" plus "everything" -- at three reviews that printed
   the same items twice and read as filler. Position 01 carries the weight, and
   `lead:` in the source decides who holds it.
   Each item sets --accent, cycled through the palette by the generator. */
.pz-list { list-style: none; margin: 0; padding: 0; display: grid; }

.pz-item {
  display: grid; grid-template-columns: auto 1fr; gap: 0 24px;
  padding: 30px 0; border-top: 1px solid var(--hairline);
}
.pz-list .pz-item:first-child { border-top: 0; padding-top: 4px; }
.pz-item[hidden] { display: none; }

.pz-num {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(30px, 5vw, 58px); line-height: 0.9;
  color: var(--accent); opacity: 0.85;
  font-variant-numeric: tabular-nums;
}
.pz-lead .pz-num { font-size: clamp(38px, 7vw, 82px); }

.pz-body { min-width: 0; }   /* lets long headlines wrap instead of pushing out */

.pz-item h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(21px, 2.8vw, 28px); line-height: 1.16;
  letter-spacing: 0.02em; margin: 0 0 14px; text-wrap: balance;
}
.pz-lead h2 { font-size: clamp(26px, 4.4vw, 44px); margin-bottom: 18px; }
.pz-item h2 a { color: var(--cream); text-decoration: none; }
.pz-item h2 a:hover { color: var(--accent); }

.pz-pull { margin: 0 0 16px; padding-left: 16px; border-left: 3px solid var(--accent); }
.pz-pull p {
  margin: 0; color: var(--cream-dim); font-size: 16.5px; line-height: 1.55;
  font-style: italic; max-width: 62ch;
}
.pz-lead .pz-pull p { color: var(--cream); font-size: 19px; max-width: 56ch; }
.pz-pull p em { font-style: normal; }

.pc-more {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent, var(--green));
  text-decoration: none;
}
.pc-more:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- filter chips ---------- */
.pc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.pc-chip {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; cursor: pointer;
  background: none; color: var(--cream-dim);
  border: 1px solid var(--hairline); border-radius: 999px; padding: 6px 14px;
}
.pc-chip:hover { color: var(--cream); border-color: var(--cream-dim); }
.pc-chip[aria-pressed="true"] {
  color: var(--ink); background: var(--green); border-color: var(--green);
}
.pc-chip:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ---------- publication strip ---------- */
.pc-strip-head {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cream-dim); margin: 0 0 16px !important;
}
.pc-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px;
}
.pc-strip a {
  display: inline-flex; align-items: center; text-decoration: none;
  color: var(--cream-dim);
}
/* Restrained by default, colour on hover. A row of competing brand palettes
   fights the page; these are citations, not sponsors. */
.pc-strip img {
  height: 26px; width: auto; filter: grayscale(1); opacity: 0.7;
  transition: filter 0.16s ease, opacity 0.16s ease;
}
.pc-strip a:hover img { filter: none; opacity: 1; }
.pc-strip span {
  font-family: var(--display); font-size: 17px; letter-spacing: 0.03em;
  transition: color 0.16s ease;
}
.pc-strip a:hover span { color: var(--cream); }

/* ---------- article page ---------- */
/* The provenance block. This is the part of the page that has to be unmissable:
   a visitor must never come away thinking the band wrote its own review. */
.pc-origin { border-top: 0; margin-top: 8px; padding-top: 6px; }
.pc-origin p {
  font-family: var(--mono); font-size: 13px; line-height: 1.6;
  color: var(--cream-dim); margin: 0 0 16px;
}
.pc-origin a { color: var(--cyan); }
.pc-origin .btn { font-family: var(--display); }
.pc-origin .btn:hover { color: inherit; }

.pc-disclose {
  font-size: 13.5px !important; color: var(--cream-dim);
  border-left: 2px solid var(--hairline); padding-left: 14px;
}

.pc-songs { display: flex; flex-wrap: wrap; gap: 10px; }
.pc-song {
  font-family: var(--display); font-size: 16px; letter-spacing: 0.02em;
  text-decoration: none; color: var(--cream);
  border: 1px solid var(--hairline); border-radius: 999px; padding: 7px 16px;
}
.pc-song:hover { border-color: var(--magenta); color: var(--magenta); }

.pc-rels { display: grid; gap: 2px; margin-bottom: 14px; }
.pc-rel {
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
  padding: 12px 2px; border-bottom: 1px solid var(--hairline);
  text-decoration: none;
}
.pc-rel:hover .pc-rel-title { color: var(--magenta); }
.pc-rel-pub {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--tangerine); min-width: 14ch;
}
.pc-rel-title { color: var(--cream); font-size: 16px; line-height: 1.35; }

#related { padding-bottom: 20px; }

@media (max-width: 620px) {
  .pc-rel-pub { min-width: 0; }
  /* The numeral drops above the text rather than beside it -- at this width a
     two-column split leaves the headline about twelve characters wide. */
  .pz-item { grid-template-columns: 1fr; gap: 6px; }
  .pz-num { font-size: 30px; }
  .pz-lead .pz-num { font-size: 38px; }
}

/* Nothing here animates on its own, so there is no motion to suppress — only
   the hover transitions, which a reduced-motion reader still should not get. */
@media (prefers-reduced-motion: reduce) {
  .pc-strip img, .pc-strip span { transition: none; }
}

/* ---------- paid-campaign disclosure ---------- */
/* A footnote now, not a paragraph. Small and quiet, sitting under everything
   else at the foot of the page. */
.pz-disclose, .pc-disclose {
  margin: 34px 0 0 !important;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 11px !important; letter-spacing: 0.06em;
  color: var(--cream-dim); opacity: 0.7;
}
.pz-disclose a, .pc-disclose a { color: inherit; }
.pz-disclose a:hover, .pc-disclose a:hover { color: var(--cyan); }