/* PG Chapter — scoped to .pg-chapter. Shared frame + body typography + the
   polaroid layout. Other layouts add their own .layout-<x> blocks here later. */

.pg-chapter{ padding:140px 56px; border-top:1px solid var(--pg-ink-hair); background:var(--pg-bone); }
.pg-chapter.bg-bone-soft{ background:var(--pg-bone-soft); }
.pg-chapter .container{ max-width:1320px; margin:0 auto; }

/* head row */
.pg-chapter .head-row{ display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:32px; border-bottom:1px solid var(--pg-ink-hair); padding-bottom:18px; margin-bottom:64px; }
.pg-chapter .head-row .num{ font-family:var(--pg-font-display); font-weight:300; font-style:italic; font-size:clamp(56px,7vw,96px); line-height:1; color:var(--pg-terracotta); }
.pg-chapter .head-row .title{ font-family:var(--pg-font-display); font-weight:300; font-variation-settings:"opsz" 144; font-size:clamp(28px,3.4vw,44px); line-height:1.05; letter-spacing:-.014em; text-transform:lowercase; color:var(--pg-ink); text-align:center; }
.pg-chapter .head-row .title em{ font-style:italic; color:var(--pg-terracotta); }
.pg-chapter .head-row .meta{ text-align:right; font-family:var(--pg-font-sans); font-weight:300; text-transform:uppercase; letter-spacing:.28em; font-size:10px; color:var(--pg-ink-soft); line-height:1.8; }
.pg-chapter .head-row .meta em{ font-family:var(--pg-font-italic); font-style:italic; text-transform:none; letter-spacing:0; font-size:13px; color:var(--pg-ink); }

/* shared body typography */
.pg-chapter .text p{ font-family:var(--pg-font-italic); font-size:clamp(19px,1.4vw,22px); line-height:1.6; color:var(--pg-ink); margin:0 0 1.4em; }
.pg-chapter .text p:last-of-type{ margin-bottom:0; }
.pg-chapter .text p.lift{ font-family:var(--pg-font-display); font-weight:300; font-variation-settings:"opsz" 144; font-size:clamp(28px,3vw,40px); line-height:1.18; letter-spacing:-.012em; color:var(--pg-ink); margin-bottom:.8em; }
.pg-chapter .text p em{ font-style:italic; color:var(--pg-terracotta); }
.pg-chapter .text p strong{ font-weight:400; font-style:italic; color:var(--pg-ink); background:linear-gradient(transparent 65%, rgba(200,146,61,.22) 65%); padding:0 2px; }

/* ============================ POLAROID ============================ */
.pg-chapter.layout-polaroid .body{ display:grid; grid-template-columns:1.2fr 1fr; gap:96px; align-items:stretch; }
.pg-chapter.layout-polaroid .text{ display:flex; flex-direction:column; justify-content:flex-start; align-self:stretch; }
.pg-chapter.layout-polaroid .text .colophon{ margin-top:auto; padding-top:32px; border-top:1px solid var(--pg-ink-hair); font-family:var(--pg-font-sans); font-weight:300; text-transform:uppercase; letter-spacing:.32em; font-size:11px; color:var(--pg-ink-pale); }
.pg-chapter.layout-polaroid .text .colophon em{ font-family:var(--pg-font-italic); font-style:italic; text-transform:none; letter-spacing:0; font-size:15px; color:var(--pg-terracotta); margin-left:10px; }

.pg-chapter .polaroid-stack{ position:relative; aspect-ratio:1/1; perspective:1200px; }
.pg-chapter .polaroid-stack .card{ position:absolute; width:78%; aspect-ratio:1/1; background:var(--pg-bone-soft); padding:18px 18px 56px; border-radius:2px; box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 30px 60px -28px rgba(26,24,22,.30), 0 6px 14px -6px rgba(26,24,22,.10); transition:transform 1200ms var(--pg-ease), box-shadow 800ms var(--pg-ease); will-change:transform; transform-origin:center 70%; }
.pg-chapter .polaroid-stack .card .img{ position:relative; width:100%; height:100%; background-size:cover; background-position:center; filter:saturate(.78) contrast(1.06) brightness(.96) sepia(.10); }
.pg-chapter .polaroid-stack .card .label{ position:absolute; bottom:16px; left:18px; right:18px; display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-family:var(--pg-font-sans); font-weight:300; text-transform:uppercase; letter-spacing:.28em; font-size:9px; color:rgba(26,24,22,.45); }
.pg-chapter .polaroid-stack .card .label em{ font-family:var(--pg-font-italic); font-style:italic; text-transform:none; letter-spacing:.02em; font-size:12px; color:var(--pg-terracotta); }
.pg-chapter .polaroid-stack .card.c1, .pg-chapter .polaroid-stack .card.c2, .pg-chapter .polaroid-stack .card.c3, .pg-chapter .polaroid-stack .card.c4{ top:2%; left:8%; transform:rotate(0deg) translate3d(0,0,0); }
.pg-chapter .polaroid-stack .card.c1{ z-index:4; }
.pg-chapter .polaroid-stack .card.c2{ z-index:3; }
.pg-chapter .polaroid-stack .card.c3{ z-index:2; }
.pg-chapter .polaroid-stack .card.c4{ z-index:1; }
.pg-chapter .polaroid-stack .card.c1 .img{ background-position:center 35%; }
.pg-chapter .polaroid-stack .card.c2 .img{ background-position:70% center; filter:saturate(.72) contrast(1.06) brightness(.96) sepia(.10); }
.pg-chapter .polaroid-stack .card.c3 .img{ background-position:25% center; filter:saturate(.74) contrast(1.04) brightness(.98) sepia(.10); }
.pg-chapter .polaroid-stack .card.c4 .img{ background-position:center center; filter:saturate(.70) contrast(1.05) sepia(.18); }
.pg-chapter .polaroid-stack.pg-in .card.c1{ transform:rotate(-1.5deg) translate3d(-3%,2%,0); transition-delay:80ms; }
.pg-chapter .polaroid-stack.pg-in .card.c2{ transform:rotate(4deg) translate3d(13%,8%,0); transition-delay:200ms; }
.pg-chapter .polaroid-stack.pg-in .card.c3{ transform:rotate(-5deg) translate3d(-18%,11%,0); transition-delay:320ms; }
.pg-chapter .polaroid-stack.pg-in .card.c4{ transform:rotate(6deg) translate3d(20%,2%,0); transition-delay:440ms; }
.pg-chapter .polaroid-stack:hover .card.c1{ transform:rotate(-2.5deg) translate3d(-4%,1%,0); box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 60px 120px -40px rgba(26,24,22,.40), 0 6px 14px -6px rgba(26,24,22,.10); }
.pg-chapter .polaroid-stack:hover .card.c2{ transform:rotate(5.5deg) translate3d(17%,10%,0); }
.pg-chapter .polaroid-stack:hover .card.c3{ transform:rotate(-6.5deg) translate3d(-23%,14%,0); }
.pg-chapter .polaroid-stack:hover .card.c4{ transform:rotate(7.5deg) translate3d(25%,4%,0); }

@media (prefers-reduced-motion: reduce){
  .pg-chapter .polaroid-stack .card{ transition:none; }
  .pg-chapter .polaroid-stack.pg-in .card.c1{ transform:rotate(-1.5deg) translate3d(-3%,2%,0); }
}
@media (max-width:880px){
  .pg-chapter{ padding:96px 28px; }
  .pg-chapter .head-row{ grid-template-columns:1fr; gap:12px; text-align:left; }
  .pg-chapter .head-row .title, .pg-chapter .head-row .meta{ text-align:left; }
  .pg-chapter.layout-polaroid .body{ grid-template-columns:1fr; gap:48px; }
  /* Explicit width (not max-width): in a grid cell, margin:auto on an auto-width
     item whose children are all position:absolute shrinks it to 0 → the stack
     collapses. A definite width lets margin:auto centre it AND keeps its height. */
  .pg-chapter .polaroid-stack{ width:min(540px, 100%); margin:0 auto; }
  .pg-chapter .polaroid-stack .card{ width:76%; }
}

/* ============================ FILM STRIP ============================ */
.pg-chapter.layout-filmstrip{ padding:140px 0; overflow:hidden; }
.pg-chapter.layout-filmstrip .container{ padding:0 56px; }
.pg-chapter.layout-filmstrip .head-row{ max-width:1320px; margin-left:auto; margin-right:auto; }
.pg-chapter .filmstrip{ margin:56px 0 80px; overflow:hidden; position:relative; }
.pg-chapter .filmstrip::before, .pg-chapter .filmstrip::after{ content:''; position:absolute; top:0; bottom:0; width:80px; z-index:3; pointer-events:none; }
.pg-chapter .filmstrip::before{ left:0; background:linear-gradient(90deg, var(--pg-bone) 0%, transparent 100%); }
.pg-chapter .filmstrip::after{ right:0; background:linear-gradient(270deg, var(--pg-bone) 0%, transparent 100%); }
.pg-chapter .strip-track{ display:flex; gap:28px; width:max-content; animation:pg-filmstrip 40s linear infinite; will-change:transform; backface-visibility:hidden; -webkit-backface-visibility:hidden; transform:translateZ(0); }
/* Smooth pause on hover (no jump). Old behaviour changed animation-duration on
   hover, which re-maps the timeline and causes a visible skip — removed. */
.pg-chapter--strip-pause .filmstrip:hover .strip-track{ animation-play-state:paused; }
/* Grain blend mode is the main scroll-jank source — let it be switched off. */
.pg-chapter--no-grain .grain{ display:none; }
@keyframes pg-filmstrip{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
.pg-chapter .strip-frame{ position:relative; flex-shrink:0; width:360px; aspect-ratio:4/5; border-radius:4px; overflow:hidden; box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 30px 60px -28px rgba(26,24,22,.30), 0 6px 14px -6px rgba(26,24,22,.10); transition:transform 600ms var(--pg-ease); }
.pg-chapter .strip-frame:hover{ transform:translate3d(0,-6px,0) scale(1.02); }
.pg-chapter .strip-frame .img{ position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(.84) contrast(1.04); }
.pg-chapter .strip-frame::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 50%, rgba(26,24,22,.45) 100%); }
.pg-chapter .strip-frame .grain{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay; opacity:.5; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>"); }
.pg-chapter .strip-frame .label{ position:absolute; bottom:18px; left:18px; right:18px; display:flex; justify-content:space-between; align-items:baseline; font-family:var(--pg-font-sans); font-weight:300; text-transform:uppercase; letter-spacing:.28em; font-size:9px; color:rgba(244,239,230,.86); z-index:2; }
.pg-chapter .strip-frame .label em{ font-family:var(--pg-font-italic); font-style:italic; text-transform:none; letter-spacing:.02em; font-size:12px; color:#E5C28A; }
.pg-chapter .strip-body{ max-width:1100px; margin:0 auto; padding:0 56px; }
.pg-chapter .strip-body .lift{ font-family:var(--pg-font-italic); font-style:italic; font-size:clamp(28px,2.6vw,40px); line-height:1.28; color:var(--pg-ochre); margin:0 0 40px; max-width:600px; }
.pg-chapter .strip-body .lift em{ color:var(--pg-ochre); }
.pg-chapter .strip-body .setup{ font-family:var(--pg-font-italic); font-size:22px; line-height:1.6; color:var(--pg-ink-soft); margin:0 0 32px; max-width:720px; }
.pg-chapter .strip-body .setup em{ font-style:italic; color:var(--pg-terracotta); }
.pg-chapter .strip-body .display-quote{ font-family:var(--pg-font-display); font-weight:300; font-variation-settings:"opsz" 144; font-size:clamp(40px,5.4vw,76px); line-height:1.04; letter-spacing:-.020em; color:var(--pg-ink); margin:56px 0; padding:56px 0; border-top:1px solid var(--pg-ink-hair); border-bottom:1px solid var(--pg-ink-hair); position:relative; text-wrap:balance; }
.pg-chapter .strip-body .display-quote em{ font-style:italic; color:var(--pg-terracotta); }
.pg-chapter .strip-body .display-quote::before{ content:''; position:absolute; top:-1px; left:0; width:88px; height:1px; background:var(--pg-terracotta); }
.pg-chapter .strip-body .display-quote::after{ content:''; position:absolute; bottom:-1px; right:0; width:88px; height:1px; background:var(--pg-terracotta); }
.pg-chapter .strip-body .payoff{ font-family:var(--pg-font-italic); font-style:italic; font-size:clamp(22px,1.9vw,28px); line-height:1.5; color:var(--pg-ink-soft); margin:0 0 0 auto; max-width:660px; text-align:right; }
.pg-chapter .strip-body .payoff em{ color:var(--pg-terracotta); font-style:italic; }
.pg-chapter .strip-body .pg-reveal:nth-child(2){ transition-delay:140ms; }
.pg-chapter .strip-body .pg-reveal:nth-child(3){ transition-delay:280ms; }
.pg-chapter .strip-body .pg-reveal:nth-child(4){ transition-delay:420ms; }
@media (prefers-reduced-motion: reduce){ .pg-chapter .strip-track{ animation:none; } }
@media (max-width:880px){
  .pg-chapter.layout-filmstrip .container{ padding:0 24px; }
  .pg-chapter .strip-frame{ width:280px; }
  .pg-chapter .strip-body{ padding:0 24px; }
}

/* ============================ SLATE ============================ */
.pg-chapter.layout-slate .head-row .title{ font-size:clamp(34px,4.2vw,56px); }
.pg-chapter.layout-slate .body{ display:grid; grid-template-columns:1.25fr 1fr; gap:88px; align-items:start; }
.pg-chapter .slate-card{ position:relative; aspect-ratio:1/1; background:var(--pg-ink); border-radius:6px; overflow:hidden; box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 0 0 1px rgba(26,24,22,.06), 0 40px 80px -40px rgba(26,24,22,.18), 0 8px 18px -6px rgba(26,24,22,.08); transition:transform 800ms var(--pg-ease), box-shadow 800ms var(--pg-ease); }
.pg-chapter .slate-card:hover{ transform:translate3d(0,-4px,0); box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 0 0 1px rgba(26,24,22,.06), 0 60px 120px -40px rgba(26,24,22,.28), 0 12px 24px -6px rgba(26,24,22,.12); }
.pg-chapter .slate-card .img{ position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; animation:pg-slate-breath 18s ease-in-out infinite alternate; transform-origin:50% 50%; will-change:transform; }
@keyframes pg-slate-breath{ from{ transform:scale(1.00); } to{ transform:scale(1.04); } }
.pg-chapter .slate-card::before{ content:''; position:absolute; top:-80px; left:0; right:0; height:80px; background:linear-gradient(180deg, transparent 0%, rgba(47,74,74,.08) 35%, rgba(244,239,230,.12) 50%, rgba(47,74,74,.08) 65%, transparent 100%); pointer-events:none; z-index:3; animation:pg-slate-scan 8s linear infinite; will-change:top,opacity; }
@keyframes pg-slate-scan{ 0%{ top:-80px; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ top:100%; opacity:0; } }
.pg-chapter .slate-card::after{ content:''; position:absolute; inset:0; background:repeating-linear-gradient(180deg, transparent 0px, transparent 3px, rgba(47,74,74,.04) 3px, rgba(47,74,74,.04) 4px); pointer-events:none; mix-blend-mode:multiply; z-index:2; }
.pg-chapter .slate-card .now-airing{ position:absolute; top:24px; left:24px; background:var(--pg-terracotta); color:var(--pg-bone); padding:9px 16px; border-radius:999px; display:inline-flex; align-items:center; gap:10px; font-family:var(--pg-font-sans); font-weight:400; text-transform:uppercase; letter-spacing:.32em; font-size:9.5px; z-index:4; box-shadow:0 8px 24px -8px rgba(26,24,22,.4); }
.pg-chapter .slate-card .now-airing .pulse{ width:7px; height:7px; background:var(--pg-bone); border-radius:999px; animation:pg-airing-pulse 1800ms var(--pg-ease) infinite; }
@keyframes pg-airing-pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.45; transform:scale(1.5); } }
.pg-chapter .slate-card .corner-stamp{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:12px; padding:8px 18px; border-top:1px solid rgba(26,24,22,.18); border-bottom:1px solid rgba(26,24,22,.18); font-family:var(--pg-font-sans); font-weight:300; text-transform:uppercase; letter-spacing:.32em; font-size:9.5px; color:rgba(26,24,22,.62); white-space:nowrap; z-index:4; }
.pg-chapter .slate-card .corner-stamp em{ font-family:var(--pg-font-italic); font-style:italic; text-transform:none; letter-spacing:0; font-size:13px; color:rgba(26,24,22,.86); }
.pg-chapter.layout-slate .text{ align-self:center; }
.pg-chapter.layout-slate .text .lift{ font-family:var(--pg-font-italic); font-style:italic; font-size:clamp(32px,2.9vw,44px); line-height:1.26; color:var(--pg-teal); margin:0 0 36px; padding-bottom:28px; border-bottom:1px solid var(--pg-ink-hair); }
.pg-chapter.layout-slate .text .lift em{ color:var(--pg-terracotta); font-style:italic; }
.pg-chapter.layout-slate .text p{ font-family:var(--pg-font-italic); font-size:24px; line-height:1.6; color:var(--pg-ink); margin:0 0 26px; }
.pg-chapter.layout-slate .text p em{ font-style:italic; color:var(--pg-terracotta); }
.pg-chapter.layout-slate .text p strong{ font-weight:500; color:var(--pg-teal); background:none; padding:0; }
@media (prefers-reduced-motion: reduce){
  .pg-chapter .slate-card .img, .pg-chapter .slate-card::before, .pg-chapter .slate-card .now-airing .pulse{ animation:none; }
}
@media (max-width:1100px){
  .pg-chapter.layout-slate .body{ grid-template-columns:1fr; gap:48px; }
  .pg-chapter.layout-slate .slate-card{ aspect-ratio:1.2/1; }
}

/* ============================ LETTERFORM ============================ */
.pg-chapter.layout-letterform{ padding:100px 56px 200px; }
.pg-chapter.layout-letterform .container{ max-width:1380px; margin:0 auto; position:relative; }
.pg-chapter.layout-letterform .top-strip{ display:flex; justify-content:space-between; align-items:baseline; padding-bottom:24px; margin-bottom:60px; border-bottom:1px solid var(--pg-ink-hair); color:var(--pg-ink-soft); font-family:var(--pg-font-sans); font-weight:300; text-transform:uppercase; letter-spacing:.32em; font-size:10.5px; opacity:0; transform:translateY(8px); transition:opacity 1200ms var(--pg-ease) 200ms, transform 1200ms var(--pg-ease) 200ms; }
.pg-chapter.layout-letterform .top-strip.pg-in{ opacity:1; transform:translateY(0); }
.pg-chapter.layout-letterform .top-strip em{ font-family:var(--pg-font-italic); font-style:italic; text-transform:none; letter-spacing:0; font-size:14px; color:var(--pg-terracotta); }
.pg-chapter .lettermask-wrap{ margin:24px 0 60px; text-align:center; }
.pg-chapter .lettermask{ display:block; margin:0; font-family:var(--pg-font-display); font-weight:300; font-variation-settings:"opsz" 144; line-height:1.0; letter-spacing:.03em; font-size:clamp(44px,8.4vw,140px); color:var(--pg-ink); text-align:center; white-space:nowrap; padding:0 .12em; opacity:1; transform:none; transition:none; }
.pg-chapter .lettermask .word-clip{ display:inline-block; overflow:hidden; padding:0 .04em .22em .04em; margin-bottom:-0.18em; vertical-align:bottom; line-height:1.0; }
.pg-chapter .lettermask .word-clip > span{ display:inline-block; transform:translateY(115%); transition:transform 1800ms var(--pg-ease); padding:0 .16em .05em .04em; }
.pg-chapter .lettermask.pg-in .word-clip:nth-child(1) > span{ transform:translateY(0); transition-delay:400ms; }
.pg-chapter .lettermask.pg-in .word-clip:nth-child(2) > span{ transform:translateY(0); transition-delay:700ms; }
.pg-chapter .lettermask.pg-in .word-clip:nth-child(3) > span{ transform:translateY(0); transition-delay:1000ms; }
.pg-chapter.layout-letterform .meta-row{ display:grid; grid-template-columns:auto 1fr auto; gap:40px; padding:28px 0; border-top:1px solid var(--pg-ink-hair); border-bottom:1px solid var(--pg-ink-hair); margin:60px 0 64px; align-items:center; opacity:0; transform:translateY(10px); transition:opacity 1400ms var(--pg-ease) 600ms, transform 1400ms var(--pg-ease) 600ms; }
.pg-chapter.layout-letterform .meta-row.pg-in{ opacity:1; transform:translateY(0); }
.pg-chapter.layout-letterform .meta-row .num{ font-family:var(--pg-font-display); font-style:italic; font-weight:300; font-size:56px; line-height:1; color:var(--pg-terracotta); }
.pg-chapter.layout-letterform .meta-row .center{ font-family:var(--pg-font-italic); font-style:italic; font-size:22px; color:var(--pg-terracotta); text-align:center; }
.pg-chapter.layout-letterform .meta-row .center em{ color:var(--pg-terracotta); font-style:italic; }
.pg-chapter.layout-letterform .meta-row .right{ font-family:var(--pg-font-sans); font-weight:300; text-transform:uppercase; letter-spacing:.28em; font-size:10px; color:var(--pg-ink-soft); text-align:right; line-height:1.8; }
.pg-chapter.layout-letterform .body-grid.qa-split{ max-width:1180px; margin:0 auto; padding-top:64px; }
.pg-chapter .qa-split .qa-row{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; margin-bottom:96px; }
.pg-chapter .qa-split .col-left{ padding-right:24px; border-right:1px solid rgba(180,83,58,.35); }
.pg-chapter .qa-split .col-left .claim{ font-family:var(--pg-font-display); font-weight:300; font-style:italic; font-variation-settings:"opsz" 144; font-size:clamp(28px,3.4vw,44px); line-height:1.16; letter-spacing:-.014em; color:var(--pg-ink); margin:0 0 48px; }
.pg-chapter .qa-split .col-left .claim em{ color:var(--pg-terracotta); }
.pg-chapter .qa-split .col-left .setup{ font-family:var(--pg-font-italic); font-style:italic; font-size:21px; line-height:1.6; color:var(--pg-ink-soft); max-width:34ch; margin:0; }
.pg-chapter .qa-split .col-left .setup em{ color:var(--pg-terracotta); }
.pg-chapter .qa-split .col-right{ padding-left:24px; display:flex; align-items:center; min-height:280px; opacity:1; transform:none; transition:none; }
.pg-chapter .qa-split .col-right .question{ font-family:var(--pg-font-display); font-weight:300; font-style:italic; font-variation-settings:"opsz" 144; font-size:clamp(36px,4.8vw,62px); line-height:1.06; letter-spacing:-.018em; color:var(--pg-ink); margin:0; clip-path:inset(0 100% 0 0); -webkit-clip-path:inset(0 100% 0 0); transition:clip-path 1800ms var(--pg-ease) 400ms, -webkit-clip-path 1800ms var(--pg-ease) 400ms; }
.pg-chapter .qa-split .col-right.pg-in .question{ clip-path:inset(0 0 0 0); -webkit-clip-path:inset(0 0 0 0); }
.pg-chapter .qa-split .col-right .question em{ color:var(--pg-terracotta); }
.pg-chapter .qa-split .col-right .question .small{ display:block; font-size:.32em; font-style:italic; color:var(--pg-terracotta); margin-bottom:18px; font-family:var(--pg-font-sans); text-transform:uppercase; letter-spacing:.36em; font-weight:400; }
.pg-chapter .qa-split .invitation-band{ max-width:680px; margin:0 auto; text-align:center; padding:48px 0; border-top:1px solid var(--pg-ink-hair); border-bottom:1px solid var(--pg-ink-hair); }
.pg-chapter .qa-split .invitation-band .payoff-line-1{ font-family:var(--pg-font-italic); font-style:italic; font-size:24px; line-height:1.55; color:var(--pg-ink-soft); margin-bottom:.4em; text-align:center; }
.pg-chapter .qa-split .invitation-band .payoff-line-2{ font-family:var(--pg-font-italic); font-style:italic; font-size:clamp(26px,2.4vw,32px); line-height:1.4; color:var(--pg-ink); margin:0; text-align:center; }
.pg-chapter .qa-split .invitation-band .payoff-line-2 em{ color:var(--pg-terracotta); font-style:italic; }
@media (prefers-reduced-motion: reduce){
  .pg-chapter .lettermask .word-clip > span{ transform:none; transition:none; }
  .pg-chapter.layout-letterform .top-strip, .pg-chapter.layout-letterform .meta-row{ opacity:1; transform:none; }
  .pg-chapter .qa-split .col-right .question{ clip-path:none; -webkit-clip-path:none; }
}
@media (max-width:880px){
  .pg-chapter.layout-letterform{ padding:60px 24px 100px; }
  .pg-chapter .lettermask{ font-size:56px; white-space:normal; }
  .pg-chapter.layout-letterform .meta-row{ grid-template-columns:1fr; gap:8px; text-align:left; }
  .pg-chapter.layout-letterform .meta-row .center, .pg-chapter.layout-letterform .meta-row .right{ text-align:left; }
  .pg-chapter .qa-split .qa-row{ grid-template-columns:1fr; gap:48px; }
  .pg-chapter .qa-split .col-left{ border-right:none; padding-right:0; }
  .pg-chapter .qa-split .col-right{ padding-left:0; min-height:0; }
}

/* ============================ CROSSFADE ============================ */
.pg-chapter.layout-crossfade{ position:relative; height:600vh; padding:0; background:var(--pg-ink); }
.pg-chapter.layout-crossfade .crossfade-stage{ position:sticky; top:0; height:100vh; overflow:hidden; background:var(--pg-ink); color:var(--pg-bone); }
.pg-chapter.layout-crossfade .photo{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1200ms var(--pg-ease); transform:scale(1.04); will-change:opacity,transform; filter:saturate(.84) contrast(1.11) brightness(.95) sepia(.14); }
.pg-chapter.layout-crossfade .crossfade-stage::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(160deg, rgba(40,70,80,.20) 0%, rgba(120,70,30,.18) 100%); mix-blend-mode:soft-light; }
.pg-chapter.layout-crossfade .photo.active{ opacity:1; animation:pg-cf-kenburns 14s linear forwards; }
@keyframes pg-cf-kenburns{ from{ transform:scale(1.04) translate3d(0,0,0); } to{ transform:scale(1.14) translate3d(-1.5%,-1%,0); } }
.pg-chapter.layout-crossfade .crossfade-stage::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:2; background:radial-gradient(ellipse at center, transparent 30%, rgba(20,14,10,.45) 100%), linear-gradient(180deg, rgba(20,14,10,.36) 0%, rgba(20,14,10,.06) 28%, rgba(20,14,10,.20) 60%, rgba(20,14,10,.78) 100%); }
.pg-chapter.layout-crossfade .grain{ position:absolute; inset:0; pointer-events:none; z-index:3; mix-blend-mode:overlay; opacity:.5; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/></svg>"); }
.pg-chapter.layout-crossfade .corner-tl, .pg-chapter.layout-crossfade .corner-tr{ position:absolute; z-index:5; font-family:var(--pg-font-sans); font-weight:300; text-transform:uppercase; letter-spacing:.28em; font-size:9.5px; color:rgba(244,239,230,.55); }
.pg-chapter.layout-crossfade .corner-tl{ top:32px; left:40px; }
.pg-chapter.layout-crossfade .corner-tr{ top:32px; right:40px; text-align:right; }
.pg-chapter.layout-crossfade .corner-tr em{ font-family:var(--pg-font-italic); font-style:italic; text-transform:none; letter-spacing:0; font-size:13px; color:var(--pg-ochre); display:block; margin-top:4px; }
.pg-chapter.layout-crossfade .title-block{ position:absolute; top:18%; left:56px; right:56px; z-index:5; }
.pg-chapter.layout-crossfade .title-block .num{ font-family:var(--pg-font-display); font-weight:300; font-style:italic; font-size:clamp(80px,12vw,180px); line-height:.85; color:var(--pg-ochre); margin-bottom:16px; }
.pg-chapter.layout-crossfade h1{ font-family:var(--pg-font-display); font-weight:300; font-size:clamp(36px,4.6vw,72px); line-height:1.10; letter-spacing:-.014em; color:var(--pg-bone); margin:0; max-width:920px; text-align:left; }
.pg-chapter.layout-crossfade h1 em{ font-style:italic; color:var(--pg-terracotta); }
.pg-chapter.layout-crossfade h1 .l-1, .pg-chapter.layout-crossfade h1 .l-2, .pg-chapter.layout-crossfade h1 .l-3{ display:block; }
.pg-chapter.layout-crossfade h1 .l-3 em{ display:inline-block; margin-left:-.04em; }
.pg-chapter.layout-crossfade .city-block{ position:absolute; top:56px; left:40px; z-index:6; pointer-events:none; }
.pg-chapter.layout-crossfade .city-coord{ position:absolute; top:0; left:0; font-family:var(--pg-font-sans); font-weight:300; text-transform:uppercase; letter-spacing:.28em; font-size:9.5px; color:rgba(244,239,230,.78); white-space:nowrap; opacity:0; transition:opacity 800ms var(--pg-ease) 200ms; }
.pg-chapter.layout-crossfade .city-coord.active{ opacity:1; }
.pg-chapter.layout-crossfade .progress{ position:absolute; bottom:24px; left:56px; right:56px; z-index:6; display:flex; gap:8px; }
.pg-chapter.layout-crossfade .progress span{ flex:1; height:2px; background:rgba(244,239,230,.2); overflow:hidden; position:relative; }
.pg-chapter.layout-crossfade .progress span::after{ content:''; position:absolute; inset:0; background:var(--pg-ochre); transform:scaleX(0); transform-origin:left; transition:transform 600ms var(--pg-ease); }
.pg-chapter.layout-crossfade .progress span.done::after{ transform:scaleX(1); }
.pg-chapter.layout-crossfade .progress span.active::after{ transform:scaleX(0.5); }
.pg-cf-body{ background:var(--pg-ink); color:var(--pg-bone); padding:120px 56px 200px; }
.pg-cf-body .stanza-container{ max-width:880px; margin:0 auto; }
.pg-cf-body .stanza-lift{ font-family:var(--pg-font-italic); font-style:italic; font-size:clamp(39px,3.9vw,58px); line-height:1.22; color:var(--pg-ochre); margin:0 0 64px; padding-bottom:48px; border-bottom:1px solid rgba(244,239,230,.18); text-wrap:balance; max-width:28ch; }
.pg-cf-body .stanza-lift em{ color:var(--pg-terracotta); }
.pg-cf-body .stanza{ display:grid; grid-template-columns:80px 1fr; gap:40px; margin-bottom:56px; align-items:baseline; }
.pg-cf-body .stanza .num{ font-family:var(--pg-font-display); font-style:italic; font-weight:300; font-variation-settings:"opsz" 144; font-size:64px; line-height:.9; color:var(--pg-ochre); text-align:right; }
.pg-cf-body .stanza .num::after{ content:'·'; color:var(--pg-terracotta); margin-left:4px; }
.pg-cf-body .stanza p{ font-family:var(--pg-font-italic); font-size:28px; line-height:1.55; color:var(--pg-bone); margin:0; }
.pg-cf-body .stanza p em{ font-style:italic; color:var(--pg-ochre); }
.pg-cf-body .stanza p strong{ font-weight:600; color:var(--pg-bone); }
.pg-cf-body .stanza:last-child{ margin-bottom:0; }
@media (prefers-reduced-motion: reduce){ .pg-chapter.layout-crossfade .photo.active{ animation:none; } }
@media (max-width:880px){
  .pg-chapter.layout-crossfade .title-block{ left:24px; right:24px; }
  .pg-chapter.layout-crossfade .progress{ left:24px; right:24px; }
  .pg-chapter.layout-crossfade .corner-tl{ top:16px; left:20px; } .pg-chapter.layout-crossfade .corner-tr{ top:16px; right:20px; }
  .pg-chapter.layout-crossfade .city-block{ top:40px; left:20px; }
  .pg-cf-body{ padding:60px 24px 100px; }
  .pg-cf-body .stanza{ grid-template-columns:1fr; gap:12px; }
  .pg-cf-body .stanza .num{ text-align:left; font-size:41px; }
  .pg-cf-body .stanza p{ font-size:23px; }
  .pg-cf-body .stanza-lift{ font-size:clamp(30px,5.75vw,41px); padding-bottom:32px; margin-bottom:40px; }
}

/* ============================ HEMISPHERE ============================ */
.pg-chapter.layout-hemisphere{ position:relative; height:400vh; padding:0; background:radial-gradient(ellipse at 30% 50%, rgba(180,83,58,.06) 0%, transparent 60%), var(--pg-bone); }
/* Pinned via position:absolute + a JS-driven `top` (see chapter.js pin()).
   NOT position:sticky (Firefox tilts the 3D) and NOT position:fixed (Safari
   drops it under a transformed / smooth-scroll ancestor → the section wouldn't
   pin, leaving 4 blank screens). Absolute-top is universal and transform-proof;
   Lenis keeps it smooth. */
.pg-chapter.layout-hemisphere .hemi-stage{ position:absolute; top:0; left:0; width:100%; height:100vh; display:flex; flex-direction:column; overflow:hidden; background:transparent; }
.pg-chapter.layout-hemisphere .hemi-top-strip{ flex-shrink:0; display:flex; justify-content:space-between; align-items:baseline; padding:28px 56px 14px; color:var(--pg-ink-soft); font-family:var(--pg-font-sans); font-weight:300; text-transform:uppercase; letter-spacing:.32em; font-size:10.5px; }
.pg-chapter.layout-hemisphere .hemi-top-strip em{ font-family:var(--pg-font-italic); font-style:italic; text-transform:none; letter-spacing:0; font-size:14px; color:var(--pg-terracotta); }
.pg-chapter.layout-hemisphere .hemi-title-block{ flex-shrink:0; padding:8px 56px 24px; text-align:center; border-bottom:1px solid var(--pg-ink-hair); }
.pg-chapter.layout-hemisphere .hemi-title-block .num{ font-family:var(--pg-font-display); font-weight:300; font-style:italic; font-size:clamp(48px,6vw,84px); line-height:.86; color:var(--pg-terracotta); margin-bottom:6px; }
.pg-chapter.layout-hemisphere .hemi-title-block h1{ font-family:var(--pg-font-display); font-weight:300; font-size:clamp(22px,2.6vw,36px); line-height:1.1; letter-spacing:-.012em; color:var(--pg-ink); margin:0 auto; max-width:920px; }
.pg-chapter.layout-hemisphere .hemi-title-block h1 em{ font-style:italic; color:var(--pg-terracotta); }
.pg-chapter.layout-hemisphere .hemi-content-row{ flex:1; display:grid; grid-template-columns:1.4fr 1fr; gap:56px; padding:24px 56px; overflow:hidden; align-items:stretch; }
.pg-chapter.layout-hemisphere .hemisphere-wrap{ position:relative; width:100%; height:100%; perspective:1400px; perspective-origin:50% 50%; transform-style:preserve-3d; overflow:hidden; }
/* Centre with inset:0 (NOT translate(-50%,-50%)) — Firefox mis-resolves a
   percentage 2D translate combined with rotateY on a preserve-3d element,
   which collapses/tilts the ring. inset:0 is positionally identical here. */
/* FIREFOX 3D FIX — do NOT rotate the container. Firefox mis-composes nested
   preserve-3d transforms (container rotateY × card rotateY+translateZ), which
   injects a growing off-axis tilt as the ring turns. Instead the container is
   static and EACH card rotates by (base angle + --ry); --ry is the single scroll
   angle, set by JS on .hemisphere and inherited. One level of 3D = Firefox-safe. */
/* --hemi-scale (set by JS) shrinks the WHOLE ring — radius + cards together — so
   it always fits its column without clipping or overlapping the side text. */
.pg-chapter.layout-hemisphere .hemisphere{ position:absolute; inset:0; transform-style:preserve-3d; transform-origin:50% 50%; transform:scale3d(var(--hemi-scale,1), var(--hemi-scale,1), var(--hemi-scale,1)); }
.pg-chapter.layout-hemisphere .city-card{ position:absolute; top:50%; left:50%; width:240px; height:320px; margin:-160px 0 0 -120px; border-radius:4px; overflow:hidden; transform-origin:50% 50%; box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 50px 100px -40px rgba(26,24,22,.40), 0 12px 24px -8px rgba(26,24,22,.18); will-change:transform; }
.pg-chapter.layout-hemisphere .city-card:nth-child(1){ transform:rotateY(calc(0deg   + var(--ry,0deg))) translateZ(420px); }
.pg-chapter.layout-hemisphere .city-card:nth-child(2){ transform:rotateY(calc(45deg  + var(--ry,0deg))) translateZ(420px); }
.pg-chapter.layout-hemisphere .city-card:nth-child(3){ transform:rotateY(calc(90deg  + var(--ry,0deg))) translateZ(420px); }
.pg-chapter.layout-hemisphere .city-card:nth-child(4){ transform:rotateY(calc(135deg + var(--ry,0deg))) translateZ(420px); }
.pg-chapter.layout-hemisphere .city-card:nth-child(5){ transform:rotateY(calc(180deg + var(--ry,0deg))) translateZ(420px); }
.pg-chapter.layout-hemisphere .city-card:nth-child(6){ transform:rotateY(calc(225deg + var(--ry,0deg))) translateZ(420px); }
.pg-chapter.layout-hemisphere .city-card:nth-child(7){ transform:rotateY(calc(270deg + var(--ry,0deg))) translateZ(420px); }
.pg-chapter.layout-hemisphere .city-card:nth-child(8){ transform:rotateY(calc(315deg + var(--ry,0deg))) translateZ(420px); }
.pg-chapter.layout-hemisphere .city-card .img{ position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(.92) contrast(1.04); }
.pg-chapter.layout-hemisphere .city-card::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 50%, rgba(20,14,10,.65) 100%); }
.pg-chapter.layout-hemisphere .city-card .grain{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay; opacity:.45; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>"); }
.pg-chapter.layout-hemisphere .city-card .label{ position:absolute; bottom:22px; left:20px; right:20px; color:var(--pg-bone); z-index:2; }
.pg-chapter.layout-hemisphere .city-card .label .name{ font-family:var(--pg-font-display); font-style:italic; font-weight:300; font-size:21px; line-height:1.05; margin-bottom:5px; color:var(--pg-bone); }
.pg-chapter.layout-hemisphere .city-card .label .coord{ font-family:var(--pg-font-sans); font-weight:300; text-transform:uppercase; letter-spacing:.28em; font-size:9px; color:rgba(244,239,230,.78); }
.pg-chapter.layout-hemisphere .city-card .label .num-mark{ position:absolute; top:-260px; right:0; font-family:var(--pg-font-display); font-style:italic; font-size:14px; color:var(--pg-ochre); }
.pg-chapter.layout-hemisphere .hemi-side-body{ display:flex; flex-direction:column; justify-content:center; padding:0 8px 0 0; overflow-y:auto; max-height:100%; }
.pg-chapter.layout-hemisphere .hemi-side-body .lift{ font-family:var(--pg-font-italic); font-style:italic; font-size:clamp(28px,2.6vw,38px); line-height:1.26; color:var(--pg-ochre); margin:0 0 28px; padding-bottom:24px; border-bottom:1px solid var(--pg-ink-hair); }
.pg-chapter.layout-hemisphere .hemi-side-body .lift em{ color:var(--pg-ochre); }
.pg-chapter.layout-hemisphere .hemi-side-body p{ font-family:var(--pg-font-italic); font-size:21px; line-height:1.58; color:var(--pg-ink); margin:0 0 20px; }
.pg-chapter.layout-hemisphere .hemi-side-body p em{ font-style:italic; color:var(--pg-terracotta); }
.pg-chapter.layout-hemisphere .hemi-side-body p strong{ font-weight:600; color:var(--pg-ink); }
.pg-chapter.layout-hemisphere .hemi-bottom-bar{ flex-shrink:0; display:flex; justify-content:space-between; align-items:center; padding:14px 56px 24px; border-top:1px solid var(--pg-ink-hair); color:var(--pg-ink-soft); font-family:var(--pg-font-sans); font-weight:300; text-transform:uppercase; letter-spacing:.32em; font-size:10px; }
.pg-chapter.layout-hemisphere .hemi-bottom-bar em{ font-family:var(--pg-font-italic); font-style:italic; text-transform:none; letter-spacing:0; font-size:14px; color:var(--pg-terracotta); }
.pg-chapter.layout-hemisphere .hemi-bottom-bar .progress{ display:flex; gap:6px; }
.pg-chapter.layout-hemisphere .hemi-bottom-bar .progress span{ width:28px; height:2px; background:var(--pg-ink-hair); transition:background 600ms var(--pg-ease); }
.pg-chapter.layout-hemisphere .hemi-bottom-bar .progress span.done{ background:var(--pg-terracotta); }
.pg-chapter.layout-hemisphere .hemi-bottom-bar .progress span.active{ background:var(--pg-ochre); }
/* Mobile-only prose, rendered after the pinned section. Hidden on desktop. */
.pg-hemi-mobile-body{ display:none; }
@media (max-width:1100px){
  /* Mobile: KEEP the pin + scroll-scrub (finger down = rotate, up = back). The
     long prose can't fit beside the ring in one screen, so it's hidden here and
     rendered as .hemi-mobile-body BELOW the pinned track (full text, no inner
     scrollbar). Ring is clipped so angled cards don't cause a horizontal bar.
     100dvh keeps the bottom bar visible under the mobile URL bar. */
  .pg-chapter.layout-hemisphere .hemi-stage{ height:100dvh; }
  .pg-chapter.layout-hemisphere .hemi-top-strip{ gap:32px; }
  .pg-chapter.layout-hemisphere .hemi-content-row{ grid-template-columns:1fr; gap:0; padding:0 20px; }
  .pg-chapter.layout-hemisphere .hemi-side-body{ display:none; }
  .pg-chapter.layout-hemisphere .hemisphere-wrap{ height:58vh; overflow:hidden; }
  .pg-chapter.layout-hemisphere .city-card{ width:180px; height:240px; margin:-120px 0 0 -90px; }
  .pg-chapter.layout-hemisphere .city-card:nth-child(1){ transform:rotateY(calc(0deg   + var(--ry,0deg))) translateZ(300px); }
  .pg-chapter.layout-hemisphere .city-card:nth-child(2){ transform:rotateY(calc(45deg  + var(--ry,0deg))) translateZ(300px); }
  .pg-chapter.layout-hemisphere .city-card:nth-child(3){ transform:rotateY(calc(90deg  + var(--ry,0deg))) translateZ(300px); }
  .pg-chapter.layout-hemisphere .city-card:nth-child(4){ transform:rotateY(calc(135deg + var(--ry,0deg))) translateZ(300px); }
  .pg-chapter.layout-hemisphere .city-card:nth-child(5){ transform:rotateY(calc(180deg + var(--ry,0deg))) translateZ(300px); }
  .pg-chapter.layout-hemisphere .city-card:nth-child(6){ transform:rotateY(calc(225deg + var(--ry,0deg))) translateZ(300px); }
  .pg-chapter.layout-hemisphere .city-card:nth-child(7){ transform:rotateY(calc(270deg + var(--ry,0deg))) translateZ(300px); }
  .pg-chapter.layout-hemisphere .city-card:nth-child(8){ transform:rotateY(calc(315deg + var(--ry,0deg))) translateZ(300px); }
  .pg-hemi-mobile-body{ display:block; padding:48px 24px 72px; background:var(--pg-bone); }
  .pg-hemi-mobile-body .lift{ font-family:var(--pg-font-italic); font-style:italic; font-size:clamp(24px,6vw,32px); line-height:1.26; color:var(--pg-ochre); margin:0 0 24px; padding-bottom:20px; border-bottom:1px solid var(--pg-ink-hair); }
  .pg-hemi-mobile-body .lift em{ color:var(--pg-ochre); }
  .pg-hemi-mobile-body p{ font-family:var(--pg-font-italic); font-size:18px; line-height:1.6; color:var(--pg-ink); margin:0 0 18px; }
  .pg-hemi-mobile-body p em{ font-style:italic; color:var(--pg-terracotta); }
  .pg-hemi-mobile-body p strong{ font-weight:600; color:var(--pg-ink); }
}