/* =================== CHAPTERS — cinematic chapter stack =================== */
/*
   Design grammar:
   • Each chapter: min 100cqh, full-bleed image, color-mix scrim
   • Mono eyebrow — top-left
   • Enormous statement — bottom-left
   • Chapter number — bottom-right, ghost large mono
   • Final chapter: solid ground, full index
   All selectors scoped to .pg-chapters.
*/

/* ── Root ──────────────────────────────────────────────────────────────── */

.pg-chapters {
  background: var(--bg);
  color: var(--ink);
}

/* ── Every chapter ─────────────────────────────────────────────────────── */

.pg-chapters .ch {
  position: relative;
  min-height: clamp(480px, 100cqh, 2400px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
}

/* Background photograph */
.pg-chapters .ch-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: saturate(.88) brightness(.86);
}

/* Color-mix scrim: grades the image toward --bg for legibility.
   Stronger at the corners where text lives; breathes in the middle. */
.pg-chapters .ch::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--bg) 52%, transparent) 0%,
      color-mix(in srgb, var(--bg) 10%, transparent) 38%,
      color-mix(in srgb, var(--bg) 10%, transparent) 55%,
      color-mix(in srgb, var(--bg) 75%, transparent) 100%
    );
}

/* ── Solid-ground variants (no image) ──────────────────────────────────── */

/* Suppress scrim on solid chapters — not needed */
.pg-chapters .ch--solid::before,
.pg-chapters .ch--solid-surface::before,
.pg-chapters .ch--solid-ink::before {
  display: none;
}

/* Cycle 1: default — bg ground + ink text (already inherited) */
.pg-chapters .ch--solid { background: var(--bg); color: var(--ink); }

/* Cycle 2: raised surface */
.pg-chapters .ch--solid-surface { background: var(--surface); color: var(--ink); }

/* Cycle 3: inverted — ink ground, bg text */
.pg-chapters .ch--solid-ink { background: var(--ink); color: var(--bg); }

/* On inverted chapters, override every text element that hard-codes --ink */
.pg-chapters .ch--solid-ink .ch-name,
.pg-chapters .ch--solid-ink .ch-stat-value,
.pg-chapters .ch--solid-ink .ch-prod-title,
.pg-chapters .ch--solid-ink .ch-pull,
.pg-chapters .ch--solid-ink .ch-track-title,
.pg-chapters .ch--solid-ink .ch-terr-list {
  color: var(--bg);
}
.pg-chapters .ch--solid-ink .ch-stat-label,
.pg-chapters .ch--solid-ink .ch-track-pub,
.pg-chapters .ch--solid-ink .ch-hero-tag {
  color: color-mix(in srgb, var(--bg) 65%, transparent);
}
.pg-chapters .ch--solid-ink .ch-listen a {
  border-color: color-mix(in srgb, var(--bg) 40%, transparent);
  color: var(--bg);
}
.pg-chapters .ch--solid-ink .ch-listen a:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.pg-chapters .ch--solid-ink .ch-num {
  color: color-mix(in srgb, var(--bg) 14%, transparent);
}

/* ── Content overlay ───────────────────────────────────────────────────── */

.pg-chapters .ch-overlay {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.6rem, 4.5cqw, 3rem);
  /* min-height ensures the overlay fills the chapter even if the chapter
     min-height is driven purely by content */
  min-height: clamp(480px, 100cqh, 2400px);
  box-sizing: border-box;
}

/* Top row: eyebrow left, optional logo or tagline right */
.pg-chapters .ch-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

/* Bottom row: statement left, chapter number right */
.pg-chapters .ch-bot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1rem, 4cqw, 3rem);
}

.pg-chapters .ch-bot-left {
  flex: 1;
  min-width: 0;
}

.pg-chapters .ch-spacer { display: block; }

/* ── Mono eyebrow — top-left ───────────────────────────────────────────── */

.pg-chapters .ch-eye {
  font: 500 10px/1.5 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

/* ── Chapter number — bottom-right ghost ───────────────────────────────── */

.pg-chapters .ch-num {
  font: 400 clamp(3.6rem, 14cqw, 9rem)/1 var(--font-mono);
  letter-spacing: -.03em;
  color: color-mix(in srgb, var(--ink) 16%, transparent);
  flex-shrink: 0;
  line-height: 1;
  white-space: nowrap;
}

/* ── Logo variants ─────────────────────────────────────────────────────── */

.pg-chapters .ch-logo {
  max-height: 40px;
  max-width: 160px;
  object-fit: contain;
}

/* ── HERO chapter ──────────────────────────────────────────────────────── */

.pg-chapters .ch--hero .ch-bg {
  object-position: center 25%;
  filter: saturate(.8) brightness(.78);
}

.pg-chapters .ch-hero-tag {
  font: 500 10px/1.5 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  margin: 0;
  text-align: right;
}

.pg-chapters .ch-name {
  font: 400 clamp(3.2rem, 13cqw, 9.5rem)/.76 var(--font-serif);
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
  /* Small leading accent line above name */
  padding-top: .5rem;
  border-top: 2px solid var(--accent);
}

/* ── STAT chapter ──────────────────────────────────────────────────────── */

.pg-chapters .ch-stat-label {
  font: 500 10px/1.5 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 68%, var(--bg));
  margin: 0 0 .35rem;
}

.pg-chapters .ch-stat-value {
  font: 400 clamp(5.5rem, 22cqw, 16rem)/.82 var(--font-black);
  letter-spacing: -.04em;
  color: var(--ink);
  margin: 0;
  line-height: .82;
  /* Accent underline on the digit block */
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: .06em;
  text-decoration-thickness: 3px;
}

/* ── PRODUCTION chapter ────────────────────────────────────────────────── */

.pg-chapters .ch-prod-eyebrow {
  font: 500 9px/1.5 var(--font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .7rem;
}

.pg-chapters .ch-prod-title {
  font: 400 clamp(2.8rem, 11cqw, 7.5rem)/.84 var(--font-serif);
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
  max-width: 18ch;
  margin: 0;
}

/* ── BIO chapter ───────────────────────────────────────────────────────── */

.pg-chapters .ch-pull {
  font: 400 clamp(1.75rem, 5.8cqw, 3.8rem)/1.06 var(--font-serif);
  letter-spacing: -.01em;
  color: var(--ink);
  max-width: 22ch;
  text-wrap: balance;
  margin: 0;
  font-style: italic;
}

/* ── TRACK chapter ─────────────────────────────────────────────────────── */

.pg-chapters .ch-track-pub {
  font: 500 9px/1.5 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 65%, var(--bg));
  margin: 0 0 .4rem;
}

.pg-chapters .ch-track-title {
  font: 400 clamp(2.6rem, 9.5cqw, 6rem)/.88 var(--font-serif);
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0 0 1.6rem;
}

.pg-chapters .ch-listen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pg-chapters .ch-listen a {
  font: 500 9px/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 9px 18px;
  border: 1px solid color-mix(in srgb, var(--ink) 50%, transparent);
  color: var(--ink);
  transition: border-color .15s ease, color .15s ease;
}

.pg-chapters .ch-listen a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── TERRITORIES chapter ───────────────────────────────────────────────── */

.pg-chapters .ch-terr-list {
  font: 600 clamp(1.2rem, 3.8cqw, 2.6rem)/1.35 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink);
  max-width: 28ch;
  margin: 0;
}

/* ── Scroll-reveal — gated on .stage.animate so page is always legible ── */

.stage.animate .pg-chapters .ch {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1),
              transform .8s cubic-bezier(.22,1,.36,1);
}

.stage.animate .pg-chapters .ch.in {
  opacity: 1;
  transform: none;
}

/* ── INDEX chapter — final quiet chapter, solid ground ────────────────── */

.pg-chapters .ch--index {
  background: var(--bg);
  color: var(--ink);
  /* Index holds a scrolling document; no min-height cap so long indexes expand */
  min-height: clamp(480px, 100cqh, 9999px);
}

/* Suppress the image scrim — no image here */
.pg-chapters .ch--index::before { display: none; }

.pg-chapters .ch-index-inner {
  position: relative;
  z-index: 2;
  padding: clamp(3rem, 7cqw, 5.4rem) clamp(1.4rem, 5cqw, 4rem) 2.8rem;
  display: grid;
  row-gap: clamp(2.4rem, 6cqw, 4rem);
  max-width: 1100px;
}

/* Head: name/logo left, ghost number right */
.pg-chapters .ch-index-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: clamp(1.4rem, 4cqw, 2.4rem);
}

.pg-chapters .ch-index-name {
  font: 400 clamp(1.3rem, 3.5cqw, 2rem)/1 var(--font-serif);
  color: var(--ink);
  margin: 0;
}

.pg-chapters .ch-logo-sm {
  max-height: 34px;
  max-width: 130px;
  object-fit: contain;
}

.pg-chapters .ch-num--index {
  font-size: clamp(4.5rem, 16cqw, 11rem);
  color: color-mix(in srgb, var(--ink) 9%, transparent);
}

/* Section dividers inside the index */
.pg-chapters .ch-index-section {
  border-top: 1px solid var(--line);
  padding-top: clamp(1.2rem, 3.5cqw, 2rem);
}

.pg-chapters .ch-index-kicker {
  font: 500 9px/1 var(--font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.2rem;
}

/* Production index list */
.pg-chapters .ch-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pg-chapters .ch-index-list li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: baseline;
  min-height: 50px;
  border-bottom: 1px solid var(--line);
  padding: .7rem 0;
}

.pg-chapters .ch-idx-n {
  font: 400 9px/1 var(--font-mono);
  letter-spacing: .08em;
  color: var(--muted);
  padding-top: .18em;
}

.pg-chapters .ch-idx-title {
  font: 400 clamp(.9rem, 2.3cqw, 1.25rem)/1.2 var(--font-serif);
  color: var(--ink);
}

.pg-chapters .ch-index-more {
  margin: 1rem 0 0;
  font: 400 9px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Smaller section (publishers) */
.pg-chapters .ch-index-section--sm { }

.pg-chapters .ch-inline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.6rem;
}

.pg-chapters .ch-inline-list li {
  font: 400 10px/1.7 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Contact block */
.pg-chapters .ch-index-contact {
  border-top: 1px solid var(--line);
  padding-top: clamp(1.2rem, 3.5cqw, 2rem);
  display: grid;
  gap: .75rem;
}

.pg-chapters .ch-contact-link {
  display: inline-block;
  font: 500 clamp(.95rem, 2.8cqw, 1.3rem)/1 var(--font-sans);
  color: var(--ink);
  transition: color .15s ease;
}

.pg-chapters .ch-contact-link:hover { color: var(--accent); }

.pg-chapters .ch-soc {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.8rem;
  margin-top: .4rem;
}

/* ── Responsive: 390px narrow ──────────────────────────────────────────── */

@container page (max-width: 390px) {
  .pg-chapters .ch-overlay {
    padding: 1.2rem;
  }
  .pg-chapters .ch-name {
    font-size: clamp(2.4rem, 14cqw, 3.8rem);
  }
  .pg-chapters .ch-stat-value {
    font-size: clamp(4rem, 21cqw, 6.5rem);
  }
  .pg-chapters .ch-prod-title {
    font-size: clamp(2rem, 10.5cqw, 3.4rem);
    max-width: none;
  }
  .pg-chapters .ch-pull {
    font-size: clamp(1.4rem, 5.8cqw, 2.2rem);
    max-width: none;
  }
  .pg-chapters .ch-track-title {
    font-size: clamp(1.8rem, 9.5cqw, 3rem);
    margin-bottom: 1.2rem;
  }
  .pg-chapters .ch-terr-list {
    font-size: clamp(1rem, 4cqw, 1.6rem);
    max-width: none;
  }
  .pg-chapters .ch-num {
    font-size: clamp(2.4rem, 13cqw, 4.5rem);
  }
  .pg-chapters .ch-index-inner {
    padding: 2rem 1.2rem 2rem;
  }
  .pg-chapters .ch-index-list li {
    grid-template-columns: 28px 1fr;
  }
  .pg-chapters .ch-listen {
    gap: 6px;
  }
  .pg-chapters .ch-listen a {
    padding: 8px 12px;
    font-size: 8px;
  }
}

/* ── Chapters · filmic motion ────────────────────────────────────────────── */

/* Accent selection tint */
.pg-chapters ::selection { background: var(--accent); color: var(--bg); }

/* Film grain: overlay on image chapters — mix-blend-mode: overlay makes it
   near-invisible on flat solid grounds and tangible only on photographs.
   z-index: 1 matches the scrim ::before; ::after paints above it in DOM order
   but below .ch-overlay (z-index: 2), so text is never obscured. */
.pg-chapters .ch::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Suppress on solid-ground and index chapters */
.pg-chapters .ch--solid::after,
.pg-chapters .ch--solid-surface::after,
.pg-chapters .ch--solid-ink::after,
.pg-chapters .ch--index::after { display: none; }

/* Ken Burns on chapter background photographs — one-shot, 24 s ease-out.
   Each chapter's overflow:hidden clips the 6% expansion safely. */
@keyframes ch-ken-burns {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
@media (prefers-reduced-motion: no-preference) {
  .pg-chapters .ch-bg { animation: ch-ken-burns 24s ease-out both; }
}

/* Eyebrow accent line: a 1 px rule below .ch-eye that draws from left on reveal.
   Static by default (always visible); only animated in .stage.animate context. */
.pg-chapters .ch-eye::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--accent);
  margin-top: .55em;
}
@media (prefers-reduced-motion: no-preference) {
  .stage.animate .pg-chapters .ch-eye::after {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .65s cubic-bezier(.4,0,.2,1);
    transition-delay: .5s;
  }
  .stage.animate .pg-chapters .ch.in .ch-eye::after {
    transform: scaleX(1);
  }
}

/* Ghost chapter number drifts up gently on chapter reveal */
@media (prefers-reduced-motion: no-preference) {
  .stage.animate .pg-chapters .ch-num {
    transform: translateY(22px);
    transition: transform 1.2s cubic-bezier(.22,1,.36,1);
    transition-delay: .2s;
  }
  .stage.animate .pg-chapters .ch.in .ch-num {
    transform: none;
  }
}

/* Contact links in the index chapter: accent underline draws in on hover */
.pg-chapters .ch-contact-link {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: color .15s ease, background-size .32s ease;
}
.pg-chapters .ch-contact-link:hover {
  color: var(--accent);
  background-size: 100% 1px;
}

/* Social pills in the index: accent underline draws in on hover */
.pg-chapters .ch-soc .soc {
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size .32s ease;
}
.pg-chapters .ch-soc .soc:hover { background-size: 100% 1px; }