/* =================================================================
   DARK SWAN — The Archive Issue
   Law of the land per DESIGN.md
   ================================================================= */

/* ─── TOKENS ──────────────────────────────────────────────── */
:root {
  /* paper */
  --paper:       #ece0c7;
  --paper-hi:    #f4ecd7;
  --paper-lo:    #dfd2b4;

  /* ink */
  --ink:         #18130c;
  --ink-well:    #0b0906;

  /* season colours */
  --oxblood:     #6b1f1d;
  --oxblood-hi:  #8f2a28;
  --ochre:       #9a6b1c;
  --ochre-hi:    #c88c2a;
  --cobalt:      #1c3a6b;
  --cobalt-hi:   #2e5697;

  /* neutral */
  --stone:       #8a7f6e;
  --stone-dim:   #c2b79f;
  --stone-lit:   #4a4337;

  --rule-cream:  #cdc3ac;
  --rule-dark:   #241e17;

  /* type */
  --ff-display:  "Archivo Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-serif:    "Newsreader", "Times New Roman", Georgia, serif;
  --ff-body:     "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-mono:     "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* scale — responsive, desktop/tablet/mobile aware */
  --fs-xs:   clamp(11px, 0.8vw, 13px);
  --fs-sm:   clamp(13px, 0.9vw, 15px);
  --fs-base: clamp(16px, 1.05vw, 18px);
  --fs-md:   clamp(17px, 1.25vw, 20px);
  --fs-lg:   clamp(22px, 1.8vw, 28px);
  --fs-xl:   clamp(28px, 2.4vw, 36px);
  --fs-2xl:  clamp(36px, 3.2vw, 54px);
  --fs-3xl:  clamp(56px, 5.5vw, 80px);
  --fs-4xl:  clamp(56px, 9vw, 120px);
  --fs-hero: clamp(80px, 14vw, 220px);

  /* space */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 24px;
  --s6: 32px;  --s7: 48px;  --s8: 64px;  --s9: 96px;  --s10: 128px;
  --s11: 192px; --s12: 288px;

  /* layout */
  --maxw: 1440px;
  --gutter: clamp(20px, 4vw, 64px);
  --rail: 44px;
  --section-pad: clamp(96px, 14vh, 180px);

  /* motion */
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 700ms;
  --dur-epic: 1400ms;
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; background: var(--ink-well); }
body {
  background: var(--ink-well);
  color: var(--paper-hi);
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  max-width: 100vw;
}
.bg-dark { background: var(--ink-well); }
img, video { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, dl, dd, dt, figure, blockquote { margin: 0; }
hr { border: none; }
::selection { background: var(--oxblood); color: var(--paper-hi); }

/* ─── MASTHEAD RAIL ───────────────────────────────────────── */
.masthead {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: var(--rail);
  z-index: 90;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  mix-blend-mode: difference;
  color: #fff;
}
.masthead__text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.55;
}
@media (max-width: 880px) {
  .masthead { display: none; }
}

/* ─── NAV ─────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  padding: 20px clamp(20px, 3.5vw, 48px);
  padding-left: calc(var(--rail) + clamp(20px, 3.5vw, 48px));
  transition: background var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base);
  color: #fff;
  background: rgba(11, 9, 6, 0);
}
@media (hover: hover) and (pointer: fine) and (min-width: 981px) {
  /* Difference blend only on desktop non-touch — breaks fixed on iOS Safari */
  .nav { mix-blend-mode: difference; }
}
.nav.is-scrolled {
  mix-blend-mode: normal;
  background: rgba(11, 9, 6, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-dark);
}
@media (max-width: 980px) {
  /* Always-on solid nav on mobile */
  .nav {
    background: rgba(11, 9, 6, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--rule-dark);
  }
}
.nav__brand {
  font-family: var(--ff-display);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nav__links {
  display: flex;
  gap: clamp(18px, 2.4vw, 40px);
  justify-self: center;
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.nav__links a { opacity: 0.6; transition: opacity var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { opacity: 1; }
}
.nav__cta {
  justify-self: end;
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 10px 18px;
  border: 1px solid currentColor;
  transition: background var(--dur-fast), color var(--dur-fast);
}
@media (hover: hover) and (pointer: fine) {
  .nav__cta:hover { background: var(--paper-hi); color: var(--ink); border-color: var(--paper-hi); }
}
@media (max-width: 960px) {
  .nav {
    grid-template-columns: 1fr auto;
    padding-left: clamp(20px, 3.5vw, 48px);
  }
  .nav__links { display: none; }
}
@media (max-width: 520px) {
  .nav__cta { padding: 8px 12px; letter-spacing: 0.16em; }
}

/* ─── COVER ───────────────────────────────────────────────── */
.cover {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr 1fr;
  padding: 84px clamp(24px, 4vw, 64px) 32px calc(var(--rail) + clamp(24px, 4vw, 64px));
  isolation: isolate;
  overflow: hidden;
  background: var(--ink-well);
}
.cover__video { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cover__video video,
.cover__video .cover__fallback {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 50%;
  filter: brightness(0.92) contrast(1.05);
  /* crop out the letterbox bars baked into the source image/video (~9% top+bottom) */
  transform: scale(1.22);
  transform-origin: center center;
}
.cover__video .cover__fallback { z-index: 0; }
.cover__video video { z-index: 1; }
.cover__tint {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,9,6,0.15) 0%, rgba(11,9,6,0.0) 20%, rgba(11,9,6,0.0) 50%, rgba(11,9,6,0.9) 100%),
    linear-gradient(90deg, rgba(11,9,6,0.5) 0%, rgba(11,9,6,0.0) 40%, rgba(11,9,6,0.0) 60%, rgba(11,9,6,0.35) 100%);
}
.cover__corner { color: var(--paper-hi); align-self: start; }
.cover__corner--tl { grid-row: 1; grid-column: 1; justify-self: start; }
.cover__corner--tr { grid-row: 1; grid-column: 2; justify-self: end; }
.cover__corner--bl { grid-row: 3; grid-column: 1; justify-self: start; align-self: end; }
.cover__corner--br { grid-row: 3; grid-column: 2; justify-self: end; align-self: end; }
.stamp {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.72;
}
.cover__center {
  grid-row: 2;
  grid-column: 1 / -1;
  align-self: end;
  padding-bottom: clamp(32px, 8vh, 120px);
}
.cover__wordmark {
  font-family: var(--ff-display);
  font-size: var(--fs-hero);
  line-height: 0.84;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--paper-hi);
  margin: 0 0 var(--s4);
  display: flex;
  flex-direction: column;
  gap: 0;
  width: fit-content;
  opacity: 0;
  transform: translateY(40px);
  animation: cover-in var(--dur-epic) var(--ease-expo) 300ms forwards;
}
.cover__word { display: block; width: fit-content; }
.cover__saga {
  font-family: var(--ff-display);
  text-transform: uppercase;
  color: var(--paper-hi);
  opacity: 0;
  letter-spacing: -0.01em;
  line-height: 1;
  margin: 0 0 var(--s4);
  /* font-size is set by JS to match the width of SWAN above. Fallback: */
  font-size: clamp(22px, 4vw, 62px);
  animation: cover-in var(--dur-slow) var(--ease-out) 800ms forwards;
}
.cover__deck {
  font-family: var(--ff-mono);
  font-size: clamp(13px, 1vw, 16px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone-dim);
  max-width: 680px;
  opacity: 0;
  animation: cover-in var(--dur-slow) var(--ease-out) 1050ms forwards;
}
.cover__cta {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-hi);
  border-bottom: 1px solid var(--paper-hi);
  padding-bottom: 4px;
  transition: color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
  opacity: 0;
  animation: cover-in var(--dur-slow) var(--ease-out) 1100ms forwards;
}
.cover__cta:hover { color: var(--oxblood-hi); border-color: var(--oxblood-hi); transform: translateX(4px); }
@keyframes cover-in {
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 700px) {
  .cover__corner--tr, .cover__corner--bl { display: none; }
}

/* ─── ISSUE (section) ─────────────────────────────────────── */
.issue {
  position: relative;
  padding: var(--section-pad) clamp(20px, 4vw, 80px);
  max-width: calc(var(--maxw) + var(--rail));
  margin: 0 auto;
}
@media (min-width: 880px) {
  .issue {
    padding-left: calc(var(--rail) + clamp(24px, 4vw, 80px));
  }
}
.issue--cream { background: var(--paper); color: var(--ink); max-width: none; }
.issue--cream > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.issue--dark { background: var(--ink-well); color: var(--paper-hi); max-width: none; }
.issue--dark > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.issue--oxblood { background: var(--oxblood); color: var(--paper-hi); max-width: none; }
.issue--oxblood > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }

.issue__header { margin-bottom: var(--s10); }
.issue__meta {
  display: flex;
  gap: clamp(20px, 3vw, 56px);
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.55;
  margin-bottom: var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid currentColor;
  border-color: inherit;
}
.issue--cream .issue__meta { border-bottom-color: var(--rule-cream); }
.issue--dark .issue__meta,
.issue--oxblood .issue__meta { border-bottom-color: var(--rule-dark); border-color: rgba(244,236,215,0.2); }
.issue__deck {
  font-family: var(--ff-serif);
  font-size: clamp(20px, 2vw, 28px);
  font-style: italic;
  line-height: 1.3;
  font-weight: 400;
  max-width: 38ch;
  margin-bottom: var(--s6);
  color: currentColor;
  opacity: 0.8;
}
.issue__aside {
  margin-top: var(--s5);
  font-family: var(--ff-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.45;
}
.issue__title {
  font-family: var(--ff-display);
  font-size: var(--fs-4xl);
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: currentColor;
  margin: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: none;
}

.kicker {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.55;
  margin: 0 0 var(--s3);
}

/* ─── ISSUE 01 — PITCH ────────────────────────────────────── */
.pitch {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 120px) clamp(24px, 4vw, 80px);
  align-items: start;
}
.pitch__logline { grid-column: 1; grid-row: 1; }
.pitch__logline-text {
  font-family: var(--ff-display);
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--ink);
  max-width: 22ch;
}
.pitch__elevator { grid-column: 2; grid-row: 1; }
.pitch__elevator p { font-size: var(--fs-md); line-height: 1.6; margin-bottom: var(--s4); color: var(--ink); }
.pitch__elevator em { font-style: italic; color: var(--oxblood); }
.specsheet { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s7); border-top: 1px solid var(--rule-cream); padding-top: var(--s6); }
.specsheet > div { display: grid; grid-template-columns: 120px 1fr; gap: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--rule-cream); }
.specsheet dt { font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.22em; text-transform: uppercase; color: var(--stone); padding-top: 4px; }
.specsheet dd { margin: 0; font-size: var(--fs-base); color: var(--ink); }
.specsheet dd em { font-style: italic; color: var(--oxblood); }
.specsheet--dark { border-top-color: var(--rule-dark); }
.specsheet--dark > div { border-bottom-color: var(--rule-dark); }
.specsheet--dark dt { color: var(--stone-dim); }
.specsheet--dark dd { color: var(--paper-hi); }
.specsheet--dark dd em { color: var(--paper-hi); font-style: italic; font-weight: 500; opacity: 0.88; }

/* ─── QUOTE PLATE — full-bleed chapter break ─────────────── */
.quote-plate {
  position: relative;
  width: 100%;
  min-height: 92vh;
  display: grid;
  place-items: center;
  padding: clamp(80px, 14vh, 160px) clamp(24px, 4vw, 80px);
  background: var(--ink-well);
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  color: var(--paper-hi);
}
.quote-plate__swan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 20% 88%;
  transform-origin: 20% 88%;
  transform: scale(1.5);
  pointer-events: none;
  z-index: 0;
  opacity: 0.95;
}
@media (max-width: 880px) {
  .quote-plate__swan {
    transform: scale(1.7);
  }
}
.quote-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(70% 50% at 50% 30%, rgba(11,9,6,0.0) 0%, rgba(11,9,6,0.25) 60%, rgba(11,9,6,0.55) 100%);
  pointer-events: none;
}
.quote-plate blockquote {
  position: relative;
  z-index: 2;
  max-width: 28ch;
  margin: 0 auto;
  padding: 0 clamp(8px, 2vw, 32px);
  /* pull quote toward center-upper so swan reads just below */
  align-self: center;
  transform: translateY(-4%);
}
.quote-plate blockquote p {
  font-family: var(--ff-serif);
  font-size: clamp(32px, 5vw, 76px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  font-style: italic;
  color: var(--paper-hi);
  margin: 0;
  text-wrap: balance;
}
.quote-plate em { color: var(--ochre-hi); font-style: italic; }
.quote-plate cite {
  display: block;
  margin-top: var(--s7);
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--stone-dim);
  font-style: normal;
}
@media (max-width: 980px) {
  .quote-plate { min-height: 80vh; padding: clamp(80px, 14vh, 140px) var(--s5); }
  .quote-plate blockquote p { font-size: clamp(26px, 8vw, 42px); max-width: 22ch; }
}
@media (max-width: 980px) {
  .pitch { grid-template-columns: 1fr; gap: var(--s7); }
  .pitch__logline,
  .pitch__elevator,
  .specsheet { grid-column: 1 !important; grid-row: auto !important; }
  .pitch__logline-text { font-size: clamp(26px, 7.5vw, 38px); line-height: 1.1; max-width: none; }
  .pitch__elevator p { font-size: 15.5px; line-height: 1.6; }
  .specsheet { grid-template-columns: 1fr; margin-top: var(--s5); padding-top: var(--s5); gap: 0; }
  .specsheet > div { grid-template-columns: 1fr; gap: 4px; padding: var(--s4) 0; }
  .specsheet dt { padding-top: 0; font-size: 10px; }
  .specsheet dd { font-size: 15px; }
}

/* ─── ISSUE 02 — DYNASTY (Locomotive projected word) ─────── */
.dynasty {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 40px) clamp(14px, 1.4vw, 24px);
}
.portrait { position: relative; }
.portrait figure {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  margin-bottom: var(--s4);
}
.portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.45) contrast(1.1) brightness(0.95);
  transition: filter var(--dur-slow) var(--ease-out), transform 1200ms var(--ease-out);
}
.portrait:hover img { filter: grayscale(0.15) contrast(1.15); transform: scale(1.02); }
.portrait__word {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--ff-display);
  font-size: clamp(20px, 2.8vw, 44px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-align: center;
  color: var(--paper-hi);
  text-transform: uppercase;
  mix-blend-mode: overlay;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    clip-path 1000ms var(--ease-expo);
  pointer-events: none;
}
.portrait.is-in .portrait__word {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}
.portrait__meta { padding: 0 2px; }
.portrait__name {
  font-family: var(--ff-display);
  font-size: clamp(15px, 1.2vw, 18px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: var(--s2);
}
.portrait__role {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone-dim);
  margin-bottom: var(--s3);
}
.portrait__bio { font-size: clamp(14px, 1vw, 16px); line-height: 1.6; opacity: 0.85; }
@media (max-width: 1080px) { .dynasty { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .dynasty { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .dynasty { grid-template-columns: 1fr; } }

/* ─── ISSUE 03 — CHRONICLE (pinned scrollytelling) ────────── */
.chronicle { padding-bottom: 0; }
.chronicle__track {
  position: relative;
  /* No fixed height — GSAP adds the pin spacer. */
  margin-top: var(--s9);
  margin-bottom: var(--section-pad);
  /* ESCAPE the .issue--dark > * max-width clamp + issue padding → full bleed */
  max-width: none;
  width: 100vw;
  margin-left: calc(-1 * (var(--rail) + clamp(24px, 4vw, 80px)));
  margin-right: calc(-1 * clamp(24px, 4vw, 80px));
}
.chronicle__sticky {
  position: relative; /* GSAP handles pinning — do NOT use sticky here */
  top: 0;
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-rows: 1fr;
  place-items: center;
  overflow: hidden;
  background: var(--ink-well);
}
.chronicle__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.25;
}
.chronicle__video video { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5) contrast(1.1); }
.chronicle__video::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(11,9,6,0.85) 100%);
}

.chronicle__stage {
  position: relative;
  width: 100vw;
  height: 100%;
  display: grid;
  grid-template-columns:
    minmax(260px, 1.1fr)
    minmax(480px, 1.8fr)
    minmax(260px, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
  padding: clamp(80px, 12vh, 140px) clamp(40px, 4vw, 80px) var(--s8);
  z-index: 2;
}
.chronicle__year {
  font-family: var(--ff-display);
  font-size: clamp(88px, 11vw, 180px);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--oxblood);
  transition: color var(--dur-slow) var(--ease-out);
  justify-self: start;
  align-self: center;
  grid-column: 1;
  grid-row: 1;
  text-shadow: 0 0 48px rgba(0,0,0,0.6);
  white-space: nowrap;
  padding-left: var(--s3);
}
.chronicle__year.is-ochre  { color: var(--ochre); }
.chronicle__year.is-cobalt { color: var(--cobalt-hi); }

.chronicle__images {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 4px;
  background: var(--ink-well);
  box-shadow:
    0 40px 120px rgba(0,0,0,0.5),
    0 0 1px rgba(244,236,215,0.15);
}
.chronicle__images img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms var(--ease-out), transform 3000ms ease-out;
  transform: scale(1.08);
  filter: contrast(1.04);
}
.chronicle__images img.is-active {
  opacity: 1;
  transform: scale(1);
}
.chronicle__caption {
  grid-column: 3;
  grid-row: 1;
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.35;
  color: var(--paper-hi);
  max-width: 30ch;
  align-self: center;
  opacity: 0.9;
  transition: opacity var(--dur-base) var(--ease-out);
}
.chronicle__season {
  grid-column: 1 / -1;
  grid-row: 2;
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--stone-dim);
  text-align: center;
  align-self: end;
  padding-top: var(--s6);
  border-top: 1px solid var(--rule-dark);
}

.chronicle__final {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--ink-well);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out);
  z-index: 3;
}
.chronicle__final.is-active { opacity: 1; }
.chronicle__final-text {
  font-family: var(--ff-display);
  font-size: clamp(44px, 7vw, 110px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--paper-hi);
  text-align: center;
}
.chronicle__final-text span { color: var(--stone-dim); }

/* Chronicle pinned version stays live on mobile — just restructured */
.chronicle__mobile { display: none !important; }

@media (max-width: 980px) {
  .chronicle__track {
    margin-left: calc(-1 * clamp(20px, 4vw, 80px));
    margin-right: calc(-1 * clamp(20px, 4vw, 80px));
  }
  .chronicle__stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    gap: var(--s4);
    padding: 92px 20px 32px;
    align-items: start;
  }
  .chronicle__year {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    font-size: clamp(64px, 18vw, 104px);
    padding-left: 0;
    line-height: 0.82;
  }
  .chronicle__images {
    grid-column: 1;
    grid-row: 2;
    max-width: 100%;
    width: 100%;
  }
  .chronicle__caption {
    grid-column: 1;
    grid-row: 3;
    max-width: none;
    font-size: clamp(18px, 5vw, 24px);
    line-height: 1.35;
    padding-top: var(--s3);
  }
  .chronicle__season {
    grid-column: 1;
    grid-row: 4;
    text-align: left;
    font-size: 11px;
    letter-spacing: 0.24em;
    padding-top: var(--s4);
  }
  .chronicle__final-text {
    font-size: clamp(36px, 11vw, 64px);
    padding: 0 16px;
  }
}
/* Chronicle intentionally runs under reduced-motion — it's scroll-driven. */

/* ─── CHRONICLE FALLBACK (when GSAP fails) ────────────────── */
.chronicle__fallback {
  display: flex;
  flex-direction: column;
  gap: var(--s10);
  padding: var(--s9) clamp(24px, 4vw, 64px);
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.chronicle__fbeat {
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: var(--s3);
}
.chronicle__fbeat-year {
  font-family: var(--ff-display);
  font-size: clamp(72px, 11vw, 180px);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--oxblood);
}
.chronicle__fbeat[data-color="ochre"]  .chronicle__fbeat-year { color: var(--ochre); }
.chronicle__fbeat[data-color="cobalt"] .chronicle__fbeat-year { color: var(--cobalt-hi); }
.chronicle__fbeat img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 4px;
  background: var(--ink-well);
}
.chronicle__fbeat-cap {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.35;
  color: var(--paper-hi);
}
.chronicle__fbeat-season {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--stone-dim);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule-dark);
}
.chronicle__fbeat--final {
  text-align: center;
  padding: var(--s9) 0;
}
.chronicle__fbeat--final p {
  font-family: var(--ff-display);
  font-size: clamp(40px, 9vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--paper-hi);
}
.chronicle__fbeat--final span { color: var(--stone-dim); display: block; }

/* ─── ISSUE 04 — EPISODES ─────────────────────────────────── */
.episodes__tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule-cream);
  border-bottom: 1px solid var(--rule-cream);
  margin-bottom: var(--s8);
}
.episodes__tab {
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: var(--s2);
  text-align: left;
  padding: var(--s6) var(--s5);
  border-right: 1px solid var(--rule-cream);
  color: var(--ink);
  opacity: 0.45;
  transition: opacity var(--dur-fast), background var(--dur-fast);
}
.episodes__tab:last-child { border-right: none; }
.episodes__tab:hover { opacity: 0.9; background: var(--paper-lo); }
.episodes__tab.is-active { opacity: 1; background: var(--paper-lo); }
.episodes__tab[data-season="1"].is-active { box-shadow: inset 0 4px 0 var(--oxblood); }
.episodes__tab[data-season="2"].is-active { box-shadow: inset 0 4px 0 var(--ochre); }
.episodes__tab[data-season="3"].is-active { box-shadow: inset 0 4px 0 var(--cobalt); }
.tab__num { font-family: var(--ff-display); font-size: var(--fs-xl); line-height: 1; }
.tab__title { font-family: var(--ff-display); font-size: var(--fs-md); letter-spacing: -0.01em; text-transform: uppercase; margin-bottom: var(--s2); }
.tab__years {
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
  margin-top: var(--s2);
}
.episodes__tab[data-season="1"].is-active .tab__years { color: var(--oxblood); }
.episodes__tab[data-season="2"].is-active .tab__years { color: var(--ochre); }
.episodes__tab[data-season="3"].is-active .tab__years { color: var(--cobalt); }
.tab__range {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 2px;
}

/* Series Bible CTA after Episode 10 */
.ep-bible {
  list-style: none;
  padding: var(--s8) var(--s5);
  border-bottom: 1px solid var(--rule-cream);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s6);
  flex-wrap: wrap;
  background: var(--paper-lo);
}
.ep-bible__head {
  font-family: var(--ff-display);
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--ink);
  max-width: 22ch;
}
.ep-bible__cta {
  font-family: var(--ff-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  color: var(--ink);
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
@media (hover: hover) and (pointer: fine) {
  .ep-bible__cta:hover { background: var(--ink); color: var(--paper); transform: translateX(3px); }
}

.episodes { display: none; }
.episodes.is-active { display: block; }
.ep { border-bottom: 1px solid var(--rule-cream); transition: background var(--dur-fast); }
.ep:hover { background: var(--paper-lo); }
.ep details { padding: 0; }
.ep summary {
  display: grid;
  grid-template-columns: 60px minmax(200px, 2.4fr) minmax(260px, 3fr) auto;
  gap: clamp(16px, 3vw, 40px);
  align-items: baseline;
  padding: var(--s5) 4px;
  cursor: pointer;
  list-style: none;
}
.ep summary::-webkit-details-marker { display: none; }
.ep summary::after {
  content: "+";
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  color: var(--ink);
  align-self: center;
  transition: transform var(--dur-fast);
}
.ep details[open] summary::after { content: "−"; }
.episodes[data-color="oxblood"] .ep summary::after { color: var(--oxblood); }
.episodes[data-color="ochre"] .ep summary::after { color: var(--ochre); }
.episodes[data-color="cobalt"] .ep summary::after { color: var(--cobalt); }
.ep__n { font-family: var(--ff-mono); font-size: var(--fs-sm); letter-spacing: 0.2em; color: var(--stone); padding-top: 4px; }
.ep__t {
  font-family: var(--ff-display);
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--ink);
}
.ep__l { font-family: var(--ff-serif); font-style: italic; font-size: var(--fs-md); line-height: 1.45; color: var(--stone-lit); }
.ep__body { padding: var(--s3) 4px var(--s7) 84px; max-width: 80ch; animation: ep-open 400ms var(--ease-out); }
.ep__body p { font-size: var(--fs-base); line-height: 1.65; color: var(--ink); margin-bottom: var(--s4); }
.ep__body em { font-style: italic; color: var(--oxblood); }
.ep__body ul { padding-top: var(--s3); border-top: 1px solid var(--rule-cream); }
.ep__body ul li { position: relative; padding-left: 24px; font-size: clamp(14px, 1vw, 16px); line-height: 1.6; color: var(--stone-lit); margin-bottom: var(--s2); }
.ep__body ul li::before { content: "—"; position: absolute; left: 0; }
@keyframes ep-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 980px) {
  .ep summary { grid-template-columns: 44px 1fr auto; grid-template-areas: "n t c" "l l l"; row-gap: 10px; }
  .ep__n { grid-area: n; }
  .ep__t { grid-area: t; }
  .ep__l { grid-area: l; }
  .ep summary::after { grid-area: c; }
  .ep__body { padding-left: 4px; }
  .episodes__tabs { grid-template-columns: 1fr; }
  .episodes__tab { border-right: none; border-bottom: 1px solid var(--rule-cream); }
  .episodes__tab:last-child { border-bottom: none; }
}

/* ─── ISSUE 05 — WORLD ────────────────────────────────────── */
.world {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px) clamp(24px, 3vw, 40px);
}
.place figure { aspect-ratio: 16/10; overflow: hidden; margin-bottom: var(--s5); }
.place figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.2) contrast(1.05);
  transition: transform 1400ms var(--ease-out), filter var(--dur-slow);
}
.place:hover figure img { transform: scale(1.03); filter: grayscale(0); }
.place h3 {
  font-family: var(--ff-display);
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: var(--s3);
}
.place p { font-size: var(--fs-base); line-height: 1.6; max-width: 48ch; opacity: 0.85; }
.place em { font-style: italic; color: var(--ochre-hi); }

.world__list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule-dark);
  margin-top: var(--s7);
}
.world__list li {
  padding: var(--s6) var(--s5);
  border-right: 1px solid var(--rule-dark);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  gap: var(--s3);
}
.world__list li:last-child { border-right: none; }
.world__list li span:first-child {
  display: block;
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone-dim);
  margin: 0;
}
.world__list li span:last-child {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
  opacity: 0.9;
  max-width: 28ch;
}
@media (max-width: 980px) {
  .world { grid-template-columns: 1fr; gap: var(--s7); }
  .world__list { grid-template-columns: 1fr; }
  .world__list li { border-right: none; border-bottom: 1px solid var(--rule-dark); padding: var(--s5) var(--s4); }
  .world__list li:last-child { border-bottom: none; }
}

/* ─── ISSUE 06 — MANUAL ───────────────────────────────────── */
.manual {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--rule-cream);
}
.manual > div { padding: var(--s6) var(--s5); border-right: 1px solid var(--rule-cream); }
.manual > div:last-child { border-right: none; }
.manual > div p:last-child { font-size: var(--fs-base); line-height: 1.65; color: var(--ink); }
.manual__plate { margin-top: var(--s8); }
.manual__plate img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.manual__plate figcaption { margin-top: var(--s4); font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone); }
@media (max-width: 980px) {
  .manual { grid-template-columns: 1fr 1fr; }
  .manual > div { border-bottom: 1px solid var(--rule-cream); }
  .manual > div:nth-child(2n) { border-right: none; }
  .manual > div:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 540px) {
  .manual { grid-template-columns: 1fr; }
  .manual > div { border-right: none; }
  .manual > div:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule-cream); }
  .manual > div:last-child { border-bottom: none; }
}
@media (max-width: 980px) {
  .creator { grid-template-columns: 1fr; gap: var(--s6); }
}

/* ─── ISSUE 07 — CREATOR ──────────────────────────────────── */
.creator-section { position: relative; isolation: isolate; overflow: hidden; background: #000; }
.issue--dark > .creator__bg { max-width: none; margin: 0; }
.creator__bg {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #000;
}
.creator__bg video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: contrast(1.04);
  opacity: 1;
}
.creator__bg-tint {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(11,9,6,0.72) 0%, rgba(11,9,6,0.3) 55%, rgba(11,9,6,0.05) 100%);
}
@media (max-width: 880px) {
  /* Video at 150% of container width (reduced from 210%), right edge anchored to
     viewport right. Excess on the left overflows offscreen. Natural aspect height.
     Vertically centered so the swan (lower-right of source) lands in the viewport. */
  .creator__bg video {
    position: absolute;
    right: 0;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 150%;
    height: auto;
    max-width: none;
    object-fit: initial;
  }
  .creator__bg-tint {
    background:
      linear-gradient(180deg, rgba(11,9,6,0.55) 0%, rgba(11,9,6,0.15) 30%, rgba(11,9,6,0.15) 70%, rgba(11,9,6,0.70) 100%);
  }
}
.creator-section > :not(.creator__bg) { position: relative; z-index: 1; }
.creator {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}
.creator__statement p {
  font-size: var(--fs-md);
  line-height: 1.7;
  margin-bottom: var(--s4);
  max-width: 52ch;
  color: var(--paper-hi);
}
.creator__statement strong { font-weight: 600; }
.creator__statement em { font-style: italic; color: var(--ochre-hi); }
@media (max-width: 900px) { .creator { grid-template-columns: 1fr; } }

/* ─── COLOPHON ────────────────────────────────────────────── */
.colophon { padding-top: clamp(64px, 8vh, 120px); padding-bottom: clamp(64px, 8vh, 120px); }
.colophon__body { max-width: 68ch; }
.colophon__body p { font-size: var(--fs-base); line-height: 1.65; margin-bottom: var(--s3); color: var(--ink); }
.colophon__body p:first-of-type { font-family: var(--ff-display); font-size: var(--fs-lg); text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: var(--s5); }

/* ─── CALL ────────────────────────────────────────────────── */
.call { position: relative; isolation: isolate; overflow: hidden; }
.call__swan {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -48%);
  width: min(160%, 1800px);
  height: auto;
  max-height: 150vh;
  object-fit: contain;
  filter: brightness(0.55) contrast(1.2);
  opacity: 0.45;
  mix-blend-mode: multiply;
}
.call > *:not(.call__swan) { position: relative; z-index: 1; }
@media (max-width: 880px) {
  .call__swan {
    width: 200%;
    opacity: 0.32;
    transform: translate(-50%, -40%);
  }
}
.call__title { margin-bottom: var(--s6); }
.call__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5) var(--s6);
  max-width: 820px;
  margin-bottom: var(--s8);
}
.call__form-full { grid-column: 1 / -1; }
.call__form label { display: grid; gap: var(--s2); }
.call__form label span {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244,236,215,0.7);
}
.call__form input,
.call__form textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(244,236,215,0.4);
  padding: var(--s3) 2px;
  color: var(--paper-hi);
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  outline: none;
  transition: border-color var(--dur-fast);
  resize: vertical;
}
.call__form input::placeholder,
.call__form textarea::placeholder { color: rgba(244,236,215,0.3); }
.call__form input:focus,
.call__form textarea:focus { border-bottom-color: var(--paper-hi); }
.call__submit {
  grid-column: 1 / -1;
  justify-self: start;
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 14px 26px;
  background: var(--paper-hi);
  color: var(--oxblood);
  border: 1px solid var(--paper-hi);
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
  margin-top: var(--s3);
}
.call__submit:hover { background: var(--ink-well); color: var(--paper-hi); transform: translateX(4px); }
.call__sent {
  display: none; grid-column: 1 / -1;
  font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.22em; text-transform: uppercase;
  padding: var(--s4) 0;
}
.call__form.is-sent input,
.call__form.is-sent textarea,
.call__form.is-sent .call__submit { opacity: 0.3; pointer-events: none; }
.call__form.is-sent .call__sent { display: block; }
.call__direct {
  display: grid;
  gap: var(--s3);
  padding-top: var(--s6);
  border-top: 1px solid rgba(244,236,215,0.2);
  max-width: 560px;
}
.call__direct-label {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: var(--s2);
}
.call__direct-line {
  font-family: var(--ff-body);
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  line-height: 1.35;
}
.call__direct-name {
  color: var(--paper-hi);
  opacity: 0.75;
  font-weight: 400;
}
.call__direct a {
  color: var(--paper-hi);
  border-bottom: 1px solid rgba(244,236,215,0.45);
  padding-bottom: 2px;
  transition: border-color var(--dur-fast);
}
@media (hover: hover) and (pointer: fine) {
  .call__direct a:hover { border-bottom-color: var(--paper-hi); }
}
.call__slogan {
  margin-top: var(--s9);
  font-family: var(--ff-display);
  font-size: clamp(32px, 5vw, 72px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--paper-hi);
  opacity: 0.85;
  max-width: 14ch;
}
.call__copyright {
  margin-top: var(--s8);
  padding-top: var(--s4);
  border-top: 1px solid rgba(244,236,215,0.18);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper-hi);
  opacity: 0.55;
}
@media (max-width: 720px) { .call__form { grid-template-columns: 1fr; } .call__form-full { grid-column: auto; } }

/* ─── REVEAL HELPERS ─────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .cover__wordmark, .cover__deck, .cover__cta { opacity: 1; transform: none; animation: none; }
}

/* ─── KILL ALL DESKTOP HOVER FX ON TOUCH DEVICES ─────────── */
@media (hover: none) {
  .portrait:hover img,
  .place:hover figure img { filter: inherit !important; transform: none !important; }
  .episodes__tab:hover,
  .ep:hover { background: transparent !important; opacity: inherit !important; }
  .cover__cta:hover,
  .call__submit:hover,
  .nav__cta:hover { transform: none !important; background: revert !important; color: revert !important; border-color: revert !important; }
  .nav__links a:hover { opacity: 0.6 !important; }
  .call__direct a:hover { border-bottom-color: rgba(244,236,215,0.5) !important; }
}

/* ─── MOBILE — GENERAL OVERRIDES ─────────────────────────── */
@media (max-width: 880px) {
  /* cover */
  .cover {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto auto;
    padding: 88px 20px 32px;
    gap: var(--s4);
  }
  .cover__corner--tl,
  .cover__corner--tr { justify-self: center; text-align: center; font-size: 10px; }
  .cover__corner--tl { grid-row: 1; grid-column: 1; }
  .cover__corner--tr { display: none; }
  .cover__center { grid-row: 2; grid-column: 1; align-self: center; padding: var(--s6) 0 var(--s5); }
  .cover__wordmark { font-size: clamp(76px, 22vw, 140px); line-height: 0.88; margin-bottom: var(--s4); }
  .cover__deck { font-size: 11px; letter-spacing: 0.18em; line-height: 1.7; }
  .cover__corner--bl { grid-row: 3; grid-column: 1; justify-self: start; align-self: start; font-size: 10px; }
  .cover__corner--br { grid-row: 4; grid-column: 1; justify-self: start; }
  .cover__cta { font-size: 11px; letter-spacing: 0.2em; }
  .stamp { letter-spacing: 0.18em; }

  /* nav */
  .nav { padding: 14px 18px; left: 0; }
  .nav__brand { font-size: 13px; letter-spacing: 0.12em; }
  .nav__cta { font-size: 10px; padding: 8px 12px; letter-spacing: 0.16em; }

  /* section titles — tighter clamp so "CHRONICLE." never overflows */
  .issue__title { font-size: clamp(44px, 13vw, 88px); line-height: 0.9; }
  .issue__deck { font-size: 17px; }
  .issue__meta { font-size: 10px; gap: 12px; flex-wrap: wrap; }
  .issue__header { margin-bottom: var(--s8); }

  /* pitch */
  .pitch__logline-text { font-size: clamp(24px, 7vw, 34px); line-height: 1.12; max-width: none; }
  .pitch__elevator p { font-size: 15px; }
  .specsheet > div { grid-template-columns: 1fr; gap: 2px; padding-bottom: var(--s3); }
  .specsheet dt { padding-top: 0; }

  /* dynasty bio */
  .portrait__name { font-size: 15px; }
  .portrait__bio { font-size: 13.5px; line-height: 1.55; }
  .portrait__role { font-size: 10px; }
  .portrait__word { font-size: clamp(20px, 8vw, 36px); }

  /* episodes */
  .episodes__tab { padding: var(--s4) var(--s4); }
  .tab__title { font-size: 15px; }
  .tab__num { font-size: 24px; }
  .tab__years { font-size: 20px; letter-spacing: -0.015em; }
  .tab__range { font-size: 10px; }
  .ep summary { padding: var(--s4) 2px; gap: 6px 14px; }
  .ep__t { font-size: 18px; }
  .ep__l { font-size: 13.5px; line-height: 1.45; }
  .ep__n { font-size: 11px; }
  .ep__body { padding-left: 2px !important; padding-bottom: var(--s5); }
  .ep__body p { font-size: 14.5px; }

  /* world */
  .place h3 { font-size: clamp(22px, 6vw, 28px); }
  .place p { font-size: 14.5px; }
  .world__list li span:first-child { font-size: 10px; }
  .world__list li span:last-child { font-size: 13.5px; }

  /* manual */
  .manual > div p:last-child { font-size: 14.5px; }

  /* creator */
  .creator__statement p { font-size: 15px; }
  .specsheet--dark dt { font-size: 10px; }

  /* colophon */
  .colophon__body p { font-size: 14px; }
  .colophon__body p:first-of-type { font-size: 20px; }

  /* call */
  .call__title { font-size: clamp(48px, 14vw, 88px); }
  .call__form { gap: var(--s5) var(--s4); }
  .call__form input, .call__form textarea { font-size: 16px; } /* prevent iOS zoom */
  .call__slogan { font-size: clamp(28px, 8vw, 44px); word-break: break-word; }
  .call__submit { font-size: 11px; padding: 13px 22px; }

  /* cover wordmark shouldn't overflow either */
  .cover__wordmark { font-size: clamp(72px, 20vw, 128px); }
}