/* Zine format: Interview. Long-form Q&A, same Oak Green house as zine.css. */
:root {
  --green-900: #0d1a12;
  --green-800: #142619;
  --green-700: #1b3324;
  --green-600: #2f5338;
  --green-400: #5a7d5c;
  --green-200: #a9bda7;
  --paper: #ece8dc;
  --paper-2: #e2ddcd;
  --ink: #15201a;
  --ink-muted: #5c665e;
  --caliper: #2a5fd1;
  --line: rgba(21,32,26,.18);
  --line-light: rgba(236,232,220,.22);
  --display: "Playfair Display", Georgia, serif;   /* headline, pull quotes */
  --text: Newsreader, Georgia, serif;              /* answers, intro */
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; /* questions, furniture */
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--green-900); color: var(--ink); font-family: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
figure { margin: 0; }

/* Sticky header, reproduced from zine.css */
.zine-nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem 1.5rem; color: var(--paper);
  background: rgba(13,26,18,.7); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-light);
}
.zine-brand { font-family: var(--display); font-weight: 500; letter-spacing: .22em; font-size: .78rem; display: flex; flex-direction: column; text-decoration: none; }
.zine-brand span { font-family: var(--sans); font-weight: 300; letter-spacing: .12em; text-transform: uppercase; color: var(--green-200); font-size: .6rem; margin-top: .2rem; }
.zine-nav nav { display: flex; gap: 1.5rem; font-family: var(--sans); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--green-200); }
.zine-nav nav a { text-decoration: none; white-space: nowrap; }
.zine-nav nav a:hover { color: var(--paper); }

/* Spreads */
.spread {
  position: relative; max-width: 1400px; margin: 2.5rem auto;
  background: var(--paper); box-shadow: 0 30px 60px rgba(0,0,0,.45);
  padding: 4.25rem 3.5rem 3.75rem;
}
.spread.spine::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 48px; transform: translateX(-50%);
  background: linear-gradient(to right, transparent, rgba(0,0,0,.14) 50%, transparent); pointer-events: none;
}
.spread.green { background: var(--green-700); color: var(--paper); }

/* Running heads: name placeholder + folios */
.running {
  position: absolute; top: 1.25rem; left: 3.5rem; right: 3.5rem; z-index: 2;
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--sans); font-size: .64rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted);
}
.running b { font-weight: 700; color: var(--ink); letter-spacing: .08em; }
.running span:first-child b { margin-right: .7em; }
.running span:last-child b { margin-left: .7em; }
.green .running { color: var(--green-200); }
.green .running b { color: var(--paper); }

/* ---------- Spread 1: opener ---------- */
.opener { display: grid; grid-template-columns: 1fr 1fr; padding: 0; min-height: 88vh; }
.opener-photo { position: relative; background: var(--green-800); min-height: 60vh; }
.opener-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.opener-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem 1.5rem;
  font-family: var(--sans); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--paper);
  background: linear-gradient(to top, rgba(13,26,18,.85), transparent);
}
.opener-photo .running, .half-photo .running { left: 1.5rem; right: 1.5rem; color: var(--paper); text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.opener-photo .running b, .half-photo .running b { color: var(--paper); }
.opener-text { position: relative; padding: 5rem 3.5rem 3rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; min-width: 0; }
.kicker {
  font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--green-600); margin: 0 0 1.5rem; display: flex; align-items: center; gap: .75rem;
}
.kicker::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.opener h1 {
  font-family: var(--display); font-weight: 700; font-size: clamp(3.6rem, 9.5vw, 9.5rem);
  line-height: .86; letter-spacing: -.035em; margin: 0; color: var(--green-800); overflow-wrap: break-word;
}
.opener h1 em { font-weight: 400; font-style: italic; color: var(--green-600); }
.opener h1 .dot { color: var(--caliper); }
.standfirst {
  font-family: var(--text); font-style: italic; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.4;
  max-width: 34ch; margin: 0 0 1.5rem; color: var(--ink);
}
.byline { font-family: var(--sans); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); margin: 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.byline strong { color: var(--ink); font-weight: 600; }

/* ---------- Q&A columns ---------- */
.qa { column-gap: 2.5rem; column-rule: 1px solid var(--line); }
.qa.cols-3 { columns: 3; }
.qa.cols-2 { columns: 2; }
.green .qa { column-rule-color: var(--line-light); }
.qa p { margin: 0 0 1rem; font-size: 1.02rem; line-height: 1.55; hyphens: auto; overflow-wrap: break-word; }
.qa .q {
  font-family: var(--sans); font-weight: 700; font-size: .9rem; line-height: 1.4; letter-spacing: -.005em;
  margin-top: 1.6rem; break-after: avoid; color: var(--green-800);
}
.qa .q::before { content: "Q. "; color: var(--green-400); }
.qa .a::before { content: "A. "; font-family: var(--sans); font-weight: 700; font-size: .82em; color: var(--green-400); }
.qa .a.lead::before { content: none; }
.qa > :first-child { margin-top: 0; }
.green .qa .q { color: var(--paper); }
.green .qa .q::before, .green .qa .a::before { color: var(--green-200); }
.green .qa .a { color: #dfe3d6; }
.lead::first-letter {
  font-family: var(--display); font-weight: 700; font-size: 4.4em; line-height: .78;
  float: left; padding: .06em .1em 0 0; color: var(--green-700);
}
.green .lead::first-letter { color: var(--green-200); }
.end::after { content: ""; display: inline-block; width: .6em; height: .6em; margin-left: .35em; background: var(--caliper); }

/* Pull quotes break the column flow */
.pull {
  column-span: all; margin: 2.5rem 0 2.25rem; padding: 1.75rem 0 1.5rem;
  border-top: 3px solid var(--green-800); border-bottom: 1px solid var(--line);
}
.pull p {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 4.2rem); line-height: 1.04; letter-spacing: -.02em;
  margin: 0; max-width: 22ch; color: var(--green-800); overflow-wrap: break-word;
}
.pull p::before { content: "\201C"; color: var(--caliper); margin-right: .04em; }
.pull cite { display: block; margin-top: 1rem; font-style: normal; font-family: var(--sans); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }
.pull.right { text-align: right; }
.pull.right p { margin-left: auto; }
.green .pull { border-color: var(--green-200); border-bottom-color: var(--line-light); }
.green .pull p { color: var(--paper); }
.green .pull cite { color: var(--green-200); }

/* Images interleaved at varying widths */
.inset { break-inside: avoid; margin: .5rem 0 1.5rem; }
.inset img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.cap { font-family: var(--sans); font-size: .7rem; line-height: 1.45; color: var(--ink-muted); padding-top: .55rem; }
.green .cap { color: var(--green-200); }
.wide { margin: 0 0 2.5rem; }
.wide img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: 50% 45%; }

/* Section heads inside Q&A spreads */
.section-head { display: flex; align-items: baseline; gap: 1.5rem; margin: 0 0 2.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.section-head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1; letter-spacing: -.02em; margin: 0; }
.section-head p { font-family: var(--sans); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 0 auto; }
.green .section-head { border-color: var(--line-light); }
.green .section-head p { color: var(--green-200); }

/* ---------- Spread 3: full bleed ---------- */
.bleed { padding: 0; min-height: 82vh; background: var(--green-800); color: var(--paper); display: flex; align-items: flex-end; overflow: hidden; }
.bleed > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bleed::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(13,26,18,.5), transparent 25%, transparent 40%, rgba(13,26,18,.92)); }
.bleed .running { color: var(--paper); text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.bleed .running b { color: var(--paper); }
.bleed-copy { position: relative; z-index: 2; padding: 3rem 3.5rem 2.5rem; width: 100%; }
.bleed .pull { border-color: var(--paper); border-bottom: 0; margin: 0; padding-bottom: 0; }
.bleed .pull p { color: var(--paper); max-width: 18ch; font-size: clamp(2.2rem, 6vw, 5.6rem); text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.bleed .pull cite, .bleed .cap { color: var(--green-200); }
.bleed-copy footer { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; padding-top: .9rem; border-top: 1px solid var(--line-light); }
.bleed .cap { padding: 0; margin: 0; }

/* ---------- Spread 4: half image + Q&A ---------- */
.half { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
.half-photo { position: relative; min-height: 80vh; background: var(--green-800); }
.half-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.half-photo figcaption { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.25rem; color: var(--paper); text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.half-copy { position: relative; padding: 4.25rem 3.5rem 3.5rem; min-width: 0; }

/* ---------- Spread 5: closing + fact box ---------- */
.closing-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; align-items: start; }
.factbox {
  background: var(--green-800); color: var(--paper); padding: 1.75rem 1.5rem 1.5rem;
  border-top: 4px solid var(--caliper); position: sticky; top: 5.5rem;
}
.factbox h3 { font-family: var(--display); font-weight: 700; font-style: italic; font-size: 1.7rem; line-height: 1; margin: 0 0 .35rem; }
.factbox > p { font-family: var(--sans); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--green-200); margin: 0 0 1.25rem; }
.factbox figure { margin: 0 0 1.25rem; }
.factbox img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 60%; }
.factbox .cap { color: var(--green-200); }
.factbox dl { margin: 0; }
.factbox dl div { padding: .7rem 0; border-top: 1px solid var(--line-light); }
.factbox dt { font-family: var(--sans); font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--green-200); }
.factbox dd { margin: .2rem 0 0; font-family: var(--text); font-size: .98rem; line-height: 1.35; }
.signoff { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); font-family: var(--sans); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .qa.cols-3 { columns: 2; }
  .closing-grid { grid-template-columns: 1fr; }
  .factbox { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
  .factbox h3, .factbox > p, .factbox figure { grid-column: 1 / -1; }
  .factbox figure img { aspect-ratio: 16 / 7; }
}
@media (max-width: 900px) {
  .spread { margin: 1rem; padding: 3.5rem 1.25rem 2.5rem; }
  .spread.spine::after { display: none; }
  .running { left: 1.25rem; right: 1.25rem; }
  .opener, .half { grid-template-columns: 1fr; padding: 0; min-height: 0; }
  .opener-photo { min-height: 75vh; }
  .opener-photo .running, .half-photo .running { left: 1.25rem; right: 1.25rem; }
  .opener-text { padding: 3.5rem 1.25rem 2rem; }
  .half-photo { min-height: 70vh; }
  .half-copy { padding: 3.5rem 1.25rem 2.5rem; }
  .bleed { padding: 0; min-height: 75vh; }
  .bleed-copy { padding: 2rem 1.25rem 1.5rem; }
  .qa.cols-2 { columns: 1; }
  .wide img { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .qa.cols-3 { columns: 1; }
  .section-head { flex-direction: column; gap: .5rem; }
  .section-head p { margin: 0; }
  .running { font-size: .58rem; letter-spacing: .14em; }
  .factbox { display: block; }
  .zine-nav { padding: .9rem 1rem; }
  .zine-nav nav { letter-spacing: .14em; }
}

/* ---------- Print: one spread per page ---------- */
@media print {
  @page { margin: 12mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; overflow: visible; }
  .zine-nav { display: none; }
  .spread { box-shadow: none; margin: 0; max-width: none; break-after: page; page-break-after: always; }
  .spread:last-child { break-after: auto; page-break-after: auto; }
  .spread.spine::after { display: none; }
  .opener, .bleed { min-height: 180mm; break-inside: avoid; }
  .half-photo { min-height: 170mm; }
  .factbox { position: static; break-inside: avoid; }
  .pull, .inset, .wide { break-inside: avoid; }
}