/* Interviews — /interviews and /interviews/<slug>
 *
 * The one place on this site that is long-form reading rather than scanning: a
 * single page here is longer than the whole of /press. Everything below is in
 * service of somebody actually getting to the bottom of it.
 *
 * The answers are set in Libre Baskerville, which the site already ships for the
 * hero clippings. That font was drawn for body text on screens and until now has
 * only ever been used fourteen times, in 300px cards. This is what it is for.
 *
 * Questions are set small, in the mono, in the accent — deliberately quieter and
 * more clipped than the answers. On the page the band should be the loud voice.
 */

.iv-page, .iv-hub { padding: 40px 0 20px; }

/* ---------- shared head ---------- */
/* Both of these are <header> elements, and style.css styles bare `header` for
   the homepage hero: 40px/24px/88px of padding and centred text. Inherited here
   that put 88px of dead space under the byline and centred a long provenance
   line into an awkward two-line wrap. Reset explicitly rather than renaming the
   element -- <header> is the right tag for an article's masthead. */
.iv-head, .iv-hub-head {
  padding: 0;
  text-align: left;
  overflow: visible;
  margin: 0 0 22px;
}
.iv-head h1, .iv-hub-head h1 {
  font-family: var(--display);
  font-weight: 400;
  /* Interview headlines are a sentence, not a label, so they run smaller than a
     song title would and are allowed to wrap to three lines. */
  font-size: clamp(27px, 4vw, 40px);
  line-height: 1.14;
  letter-spacing: 0.01em;
  margin: 0 0 14px;
  text-wrap: balance;
}
.iv-head .eyebrow, .iv-hub-head .eyebrow { color: var(--magenta); }
.iv-origin {
  font-family: var(--mono);
  font-size: 13px; line-height: 1.6;
  color: var(--cream-dim);
  margin: 0;
}
.iv-origin a { color: var(--cream); }
.iv-hub-head .lede {
  font-size: 18px; line-height: 1.5; max-width: 46ch;
  color: var(--cream-dim); margin: 0;
}

/* ---------- the conversation ---------- */
.iv-intro { padding-top: 22px; }
.iv-intro p {
  font-family: var(--serif);
  font-size: 16px; line-height: 1.65;
  color: var(--cream-dim);
  max-width: 62ch;
}
.iv-body { margin: 8px 0 0; }
.iv-turn {
  /* A hairline down the left, in the walking accent, tying a question to the
     answer that belongs to it. With eighteen exchanges on a page, the eye needs
     something structural to hold on to that is not another heading. */
  border-left: 2px solid var(--accent, var(--magenta));
  padding: 0 0 0 22px;
  margin: 0 0 40px;
}
.iv-q {
  font-family: var(--mono);
  font-size: 13px; line-height: 1.62;
  letter-spacing: 0.01em;
  color: var(--cream-dim);
  /* 72ch of 13px mono comes out at roughly the same column width as 62ch of
     17px Baskerville below it. Matching the CHARACTER counts instead would leave
     the question visibly narrower than its own answer, which reads like a
     mistake rather than a hierarchy. */
  max-width: 72ch;
  margin: 0 0 18px;
}
.iv-q em { color: var(--cream); font-style: normal; }
/* The asker's name, once per question, in the accent — so a reader who has
   scrolled away from the top can still tell who is speaking. */
.iv-who {
  display: block;
  color: var(--accent, var(--magenta));
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  margin: 0 0 7px;
}
.iv-a {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.68;
  color: var(--cream);
  /* 62ch, not the 66ch the rest of the site uses: Baskerville sets wider than
     Avenir at the same size, so the same character count is a longer line. */
  max-width: 62ch;
  margin: 0 0 15px;
}
.iv-a:last-child { margin-bottom: 0; }
.iv-a em { font-style: italic; }

/* ---------- the hub ---------- */
.iv-cards { list-style: none; margin: 0; padding: 0; }
.iv-card {
  border-top: 1px solid var(--hairline);
  padding: 26px 0 30px;
}
.iv-card:first-child { border-top: 0; padding-top: 6px; }
.iv-card-meta {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent, var(--magenta));
  margin: 0 0 10px;
}
.iv-card h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.16;
  margin: 0 0 14px;
  text-wrap: balance;
}
.iv-card h2 a { color: var(--cream); text-decoration: none; }
.iv-card h2 a:hover { color: var(--accent, var(--magenta)); }
.iv-card-pull {
  font-family: var(--serif);
  font-size: 15px; line-height: 1.6;
  color: var(--cream-dim);
  max-width: 60ch;
  margin: 0 0 14px;
}

/* ---------- the strand on /press ---------- */
.pz-across {
  margin: 0 0 44px;
  padding: 0 0 34px;
  border-bottom: 1px solid var(--hairline);
}
.pz-across .eyebrow { color: var(--cyan); margin-bottom: 14px; }
.pz-ivs { display: grid; gap: 12px; margin: 0 0 14px; }
.pz-iv {
  display: block;
  text-decoration: none;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--cyan);
  padding: 14px 16px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pz-iv:hover { background: rgba(76, 200, 214, 0.06); border-color: var(--cyan); }
.pz-iv-who {
  display: block;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 5px;
}
.pz-iv-title {
  display: block;
  font-family: var(--serif);
  font-size: 15px; line-height: 1.45;
  color: var(--cream);
}

@media (max-width: 560px) {
  .iv-turn { padding-left: 16px; margin-bottom: 32px; }
  .iv-a { font-size: 16px; }
  /* 405px tall at 375px wide, measured. Still the tallest thing in #album on a
     phone, which is fine for the best writing on the site, but not at 17px. */
  .mk-quote p { font-size: 15px; }
}

/* Reading an interview on paper is a reasonable thing to want, and this is the
   only page long enough for it to matter. Nothing fancy: ink on white, the
   chrome gone, and the questions kept distinct from the answers without colour
   to do it. */
@media print {
  html, body { background: #fff !important; color: #111 !important; }
  nav, footer, .crumbs, #more, .book-row { display: none !important; }
  .iv-head h1 { color: #111 !important; font-size: 20pt; }
  .iv-head .eyebrow, .iv-origin { color: #555 !important; }
  .iv-turn { border-left: 0; padding: 0; margin: 0 0 6mm; break-inside: avoid; }
  .iv-who { color: #666 !important; }
  .iv-q { color: #444 !important; font-size: 9pt; }
  .iv-q em { color: #111 !important; }
  .iv-a { color: #111 !important; font-size: 10.5pt; line-height: 1.45; max-width: none; }
  .iv-intro p { color: #333 !important; font-size: 10pt; max-width: none; }
}

/* ---------- speakers, when more than one person answers ---------- */
/* Printed only when the speaker CHANGES, so a single-respondent interview never
   repeats a name eighteen times and a two-hander labels every switch. */
.iv-speaker {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cream);
  margin: 22px 0 8px;
}
.iv-a + .iv-speaker { margin-top: 26px; }
.iv-turn .iv-speaker:first-of-type { margin-top: 0; }

/* ---------- extract notice ---------- */
/* Said twice on purpose: once under the byline, so nobody starts reading
   thinking this is the whole thing, and once at the foot next to the way out. */
.iv-extract-head {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--tangerine);
  margin: 10px 0 0;
}
.iv-out { padding-top: 26px; }
.iv-extract {
  font-family: var(--serif);
  font-size: 15px; line-height: 1.6;
  color: var(--cream-dim);
  max-width: 56ch;
  margin: 0 0 18px;
}

/* ---------- the making-of block on the homepage ---------- */
/* Lives in #album, under the note that already credits Seva. This is the only
   scene with dialogue anywhere on the site, so it gets to look like a pull-quote
   in a magazine rather than another card. */
.making {
  /* A third child of .album-grid, which is `300px 1fr` -- so without this it
     lands in row two, column one, and 370 characters of serif in a 300px column
     made the left side taller than the eight-track listing beside it. Measured
     in the browser, not guessed. `1 / -1` spans it across both columns, and
     still works when the grid collapses to one at 760px.

     The 48px grid gap already supplies the space above, so no margin-top. */
  grid-column: 1 / -1;
  margin: 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--hairline);
}
.mk-head {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--tangerine);
  margin: 0 0 12px;
}
.mk-quote {
  margin: 0 0 14px;
  padding: 0 0 0 20px;
  border-left: 3px solid var(--tangerine);
}
.mk-quote p {
  font-family: var(--serif);
  /* Bigger than the interview page sets its own answers. This is a pull-quote
     in a magazine, and it is the only scene on the site. */
  font-size: 17px;
  line-height: 1.6;
  color: var(--cream);
  max-width: 68ch;
  margin: 0;
}
.mk-cite {
  font-family: var(--mono);
  font-size: 11px; line-height: 1.6; letter-spacing: 0.06em;
  color: var(--cream-dim);
  margin: 0;
}
.mk-cite a { color: var(--tangerine); }

@media print { .making { display: none !important; } }

/* ---------- who said the title ---------- */
/* A first-person headline needs its speaker attached wherever it travels. On the
   interview page the kicker takes the eyebrow slot, which said "Interview" --
   redundant next to a breadcrumb reading Home / Interviews / Plastic Mag and an
   origin line that already says "in conversation with". */
.iv-card-who, .pz-iv-kicker {
  display: block;
  font-family: var(--body);
  font-size: 13px; line-height: 1.45;
  color: var(--cream-dim);
  margin: 0 0 6px;
}
.pz-iv-kicker { margin: 0 0 5px; }