/* ============================================================
   BASE RESET — hand-written, plain CSS.
   Replaces the normalisation the build step used to inherit from
   Tailwind's preflight. No framework, no preprocessor.
============================================================ */
*, *::before, *::after { box-sizing: border-box; border: 0 solid; }
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: system-ui, sans-serif;
}
body { margin: 0; line-height: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }
p, blockquote, figure, pre, dl, dd, hr { margin: 0; }
ol, ul, menu { margin: 0; padding: 0; list-style: none; }
b, strong { font-weight: bolder; }
a { color: inherit; text-decoration: inherit; }
cite { font-style: inherit; }
img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
}
img, video { max-width: 100%; height: auto; }
button, input, optgroup, select, textarea {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  background: transparent;
}
button, [type="button"], [type="submit"], [type="reset"] { appearance: button; }
button:not(:disabled), [role="button"], a[href] { cursor: pointer; }
:disabled { cursor: default; }
::placeholder { opacity: 1; color: color-mix(in oklab, currentColor 50%, transparent); }

/* ============================================================
   THE THIRD PHASE — SITE-SPECIFIC STYLES
   Amber/gold, cream, charcoal palette
   Fonts: Cormorant Garamond (display), EB Garamond (body), Montserrat (sans)
============================================================ */

/* ── DESIGN TOKENS ── */
:root {
  --tp-gold:        #C8860A;
  --tp-gold-light:  #E8A820;
  --tp-gold-pale:   #F5D98A;

  /* Vertical rhythm for content sections. Was a flat 6rem, which held 96px
     even on a 390px phone; this scales with the viewport and tops out well
     below the old value. */
  --tp-section-pad-y: clamp(2.25rem, 4.4vw, 4rem);
  --tp-gold-dark:   #9A6208;
  --tp-cream:       #F7F2E8;
  --tp-cream-dark:  #EDE5D0;
  --tp-charcoal:    #1C1C1C;
  --tp-charcoal-mid:#3A3530;
  --tp-brown:       #5C4A2A;
  --tp-brown-light: #8B6914;
  --tp-white:       #FFFFFF;
  --tp-shadow:      rgba(28,28,28,0.18);
  --tp-font-display: 'Cormorant Garamond', Georgia, serif;
  --tp-font-body:    'EB Garamond', Georgia, serif;
  --tp-font-sans:    'Montserrat', Arial, sans-serif;
}

/* ── SITE RESET (scoped to .tp-site) ── */
.tp-site {
  background-color: var(--tp-cream);
  color: var(--tp-charcoal);
  font-family: var(--tp-font-body);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.tp-site *, .tp-site *::before, .tp-site *::after {
  box-sizing: border-box;
}
.tp-site img { display: block; max-width: 100%; }
.tp-site a { color: inherit; text-decoration: none; }

/* ── NAVIGATION ── */
.tp-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  /* Semi-transparent dark backdrop — ensures all nav text is readable over the illustration */
  background: rgba(10, 6, 2, 0.55);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(200, 134, 10, 0.12);
  padding: 0 5%;
  transition: background 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease;
}
/* Scrolled state — applied via JS */
.tp-nav.tp-nav-scrolled {
  background: rgba(247,242,232,0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--tp-cream-dark);
}
.tp-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.tp-nav .tp-nav-logo {
  font-family: var(--tp-font-sans);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #FFFFFF;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.35s ease;
}
.tp-nav .tp-nav-logo span { color: var(--tp-gold-light); font-weight: 700; transition: color 0.35s ease; }
.tp-nav-scrolled .tp-nav-logo { color: var(--tp-charcoal); }
.tp-nav-scrolled .tp-nav-logo span { color: var(--tp-gold); }
.tp-nav-links {
  display: flex;
  gap: 2.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tp-nav-links a {
  font-family: var(--tp-font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
  transition: color 0.2s;
}
.tp-nav-scrolled .tp-nav-links a { color: var(--tp-charcoal-mid); }
.tp-nav-links a:hover { color: var(--tp-gold-light); }
.tp-nav-scrolled .tp-nav-links a:hover { color: var(--tp-gold); }
.tp-nav-links .tp-active-page {
  color: var(--tp-gold-light);
  border-bottom: 2px solid var(--tp-gold-light);
  padding-bottom: 2px;
}
.tp-nav-scrolled .tp-nav-links .tp-active-page {
  color: var(--tp-gold-dark);
  border-bottom-color: var(--tp-gold-dark);
}
/* Scrollspy: script.js marks the link whose section is currently under the bar.
   Listed for the scrolled state too, or .tp-nav-scrolled .tp-nav-links a would
   win on specificity once the bar turns cream. */
.tp-nav-links a.tp-nav-current,
.tp-nav-scrolled .tp-nav-links a.tp-nav-current {
  color: #e8a820;
}
.tp-nav-cta {
  font-family: var(--tp-font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--tp-gold);
  color: var(--tp-white);
  padding: 0.65rem 1.45rem;
  border-radius: 2px;
  transition: background 0.2s;
  cursor: pointer;
}
.tp-nav-cta:hover { background: var(--tp-gold-dark); }
/* Wrapper around the nav links + button. display: contents keeps both as
   direct flex items of .tp-nav-inner on wide screens, so the desktop nav
   layout is untouched; the collapsed breakpoint turns it into a real
   panel that can be animated. */
.tp-nav-panel { display: contents; }
.tp-nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}
.tp-nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: rgba(255,245,220,0.9);
  transition: all 0.3s;
}
.tp-nav-scrolled .tp-nav-hamburger span {
  background: var(--tp-charcoal);
}

/* ── HERO — Option A: full-bleed illustration, book anchored bottom-right ── */
.tp-hero {
  padding-top: 68px;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #1A1005;
}
/* Full-bleed illustration */
.tp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--tp-hero-banner, url('../images/hero-banner.png'));
  background-size: cover;
  background-position: 25% center;
  background-repeat: no-repeat;
  z-index: 0;
}
/* Dark gradient: heavy left for text, lightens toward right */
.tp-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      rgba(6, 3, 0, 0.88) 0%,
      rgba(6, 3, 0, 0.72) 38%,
      rgba(6, 3, 0, 0.30) 62%,
      transparent 78%
    ),
    linear-gradient(
      to top,
      rgba(6, 3, 0, 0.70) 0%,
      rgba(6, 3, 0, 0.20) 30%,
      transparent 55%
    );
  z-index: 1;
  pointer-events: none;
}
/* Dark radial pedestal behind the book (bottom-right zone) */
.tp-hero-book-panel {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 44%;
  height: 90%;
  background: radial-gradient(
    ellipse 70% 80% at 80% 90%,
    rgba(4, 2, 0, 0.82) 0%,
    rgba(4, 2, 0, 0.60) 40%,
    transparent 70%
  );
  z-index: 2;
  pointer-events: none;
}
/* Legacy no-ops */
.tp-hero-panel-blend { display: none; }
.tp-hero-right-vignette { display: none; }
/* Bottom fade removed */
.tp-hero-inner {
  position: relative;
  z-index: 3;
  max-width: 1400px;
  margin: 0 auto;
  padding: 5rem 4% 4rem 5%;
  display: grid;
  /* Text column left, book anchored bottom-right via absolute positioning */
  grid-template-columns: 1fr auto;
  gap: 0 3rem;
  align-items: center;
  width: 100%;
  min-height: calc(100vh - 68px);
}
.tp-hero-kicker {
  font-family: var(--tp-font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tp-gold-light);
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  white-space: nowrap;
}
.tp-hero-kicker::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--tp-gold-light);
}
.tp-hero-h1 {
  font-family: var(--tp-font-display);
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 600;
  line-height: 1.12;
  color: #FFF8EE;
  margin-bottom: 1.4rem;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.tp-hero-h1 em {
  font-style: italic;
  color: #F0C060;
}
.tp-hero-subhead {
  font-family: var(--tp-font-body);
  font-size: 1.15rem;
  line-height: 1.65;
  color: rgba(255, 245, 220, 0.88);
  margin-bottom: 2rem;
  max-width: 520px;
}
.tp-hero-endorsements { margin-bottom: 2.2rem; max-width: 480px; }
.tp-hero-endorsement {
  border-left: 3px solid rgba(200, 134, 10, 0.8);
  padding: 0.7rem 0 0.7rem 1.2rem;
  margin-bottom: 1rem;
}
.tp-hero-endorsement blockquote {
  font-family: var(--tp-font-body);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.6;
  color: rgba(255, 245, 220, 0.95);
  margin-bottom: 0.4rem;
  font-weight: 500;
}
.tp-hero-endorsement cite {
  font-family: var(--tp-font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F0C060;
  font-style: normal;
}
.tp-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.2rem;
}
.tp-btn-primary {
  font-family: var(--tp-font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--tp-gold);
  color: var(--tp-white);
  padding: 0.9rem 2.2rem;
  border-radius: 2px;
  transition: background 0.2s, transform 0.15s;
  display: inline-block;
  cursor: pointer;
}
.tp-btn-primary:hover { background: var(--tp-gold-dark); transform: translateY(-1px); }
.tp-btn-secondary {
  font-family: var(--tp-font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  color: var(--tp-charcoal);
  padding: 0.9rem 2.2rem;
  border-radius: 2px;
  border: 1.5px solid var(--tp-charcoal-mid);
  transition: border-color 0.2s, color 0.2s, transform 0.15s;
  display: inline-block;
  cursor: pointer;
}
.tp-btn-secondary:hover { border-color: var(--tp-gold); color: var(--tp-gold); transform: translateY(-1px); }
/* On dark hero background, secondary button needs light text */
.tp-hero .tp-btn-secondary {
  color: rgba(255,245,220,0.9);
  border-color: rgba(255,245,220,0.5);
}
.tp-hero .tp-btn-secondary:hover {
  border-color: #F0C060;
  color: #F0C060;
}
/* Centered bottom tagline bar */
.tp-hero-tagline-bar {
  position: absolute;
  bottom: 3.5rem;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  padding: 0 5%;
  pointer-events: none;
}
.tp-hero-tagline-rule {
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(240,192,96,0.55));
  display: block;
}
.tp-hero-tagline-bar .tp-hero-tagline-rule:last-child {
  background: linear-gradient(to left, transparent, rgba(240,192,96,0.55));
}
.tp-hero-closing-kicker {
  font-family: var(--tp-font-display);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-style: italic;
  color: rgba(240, 192, 96, 0.97);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow: 0 2px 20px rgba(0,0,0,0.7);
  line-height: 1.3;
}
.tp-hero-book {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1.4rem;
  padding: 0;
  /* Align to top so book sits in upper negative space */
  align-self: start;
  /* Push down from nav so it clears the top edge */
  padding-top: 3rem;
}
.tp-book-cover-wrap {
  position: relative;
  width: 100%;
  /* Larger book — it's the hero of the right side */
  max-width: 360px;
  margin: 0 auto;
  /* No background — transparent PNG floats against hero */
  background: transparent;
  /* Slight upward float */
  transform: translateY(0px);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  /* Subtle drop shadow to give the book depth */
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.70)) drop-shadow(0 0 40px rgba(200, 134, 10, 0.15));
  border-radius: 0;
  overflow: visible;
  padding: 0;
}
.tp-book-cover-wrap:hover {
  transform: translateY(-12px);
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.80)) drop-shadow(0 0 50px rgba(200, 134, 10, 0.20));
}
/* Warm gold glow behind the book */
.tp-book-cover-wrap::before {
  content: '';
  position: absolute;
  inset: -40px;
  background: radial-gradient(ellipse at 50% 60%, rgba(200,134,10,0.22) 0%, transparent 60%);
  z-index: -1;
}
/* Shadow cast below the book */
.tp-book-shadow {
  position: absolute;
  bottom: -24px;
  left: 8%;
  right: 8%;
  height: 50px;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.65) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.tp-book-cover-3d {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}
/* Right-column CTAs under the book */
.tp-hero-book-ctas {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  /* Match the book image width so buttons don't exceed the cover */
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
}
.tp-btn-book-cta {
  display: block;
  width: 100%;
  text-align: center;
}
/* Primary CTA: bold, solid, dominant */
.tp-btn-book-cta.tp-btn-primary {
  font-size: 0.72rem;
  padding: 0.75rem 1.2rem;
  letter-spacing: 0.16em;
}
/* Secondary CTA: smaller, lower contrast, clearly subordinate */
.tp-btn-book-cta.tp-btn-secondary {
  font-size: 0.62rem;
  padding: 0.5rem 1rem;
  letter-spacing: 0.1em;
  opacity: 0.75;
  border-width: 1px;
}

/* Release date in left copy column */
.tp-hero-release-date {
  font-family: var(--tp-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(240, 192, 96, 0.9);
  margin: 0 0 1.5rem;
}

/* Countdown timer in hero left column */
.tp-countdown {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
}

.tp-countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 2.8rem;
}

.tp-countdown-number {
  font-family: var(--tp-font-sans);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 700;
  color: rgba(240, 192, 96, 1);
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: 0 0 18px rgba(240, 192, 96, 0.35);
}

.tp-countdown-label {
  font-family: var(--tp-font-sans);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 192, 96, 0.65);
  margin-top: 0.25rem;
}

.tp-countdown-sep {
  font-family: var(--tp-font-sans);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  font-weight: 700;
  color: rgba(240, 192, 96, 0.45);
  line-height: 1;
  padding-top: 0.05rem;
  /* align colon with the numbers, not the labels */
  align-self: flex-start;
}

.tp-book-release-date {
  font-family: var(--tp-font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 192, 96, 0.9);
  text-align: center;
}
.tp-book-retailers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  max-width: 320px;
}
.tp-retailer-btn {
  font-family: var(--tp-font-sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.45rem 0.9rem;
  /* Light on dark hero background */
  border: 1px solid rgba(240, 192, 96, 0.45);
  color: rgba(255, 245, 220, 0.85);
  border-radius: 2px;
  transition: background 0.22s, color 0.22s, border-color 0.22s, transform 0.18s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.22s;
  cursor: pointer;
  background: rgba(200, 134, 10, 0.10);
}
.tp-retailer-btn:hover {
  background: rgba(200, 134, 10, 0.85);
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(200, 134, 10, 0.35);
}
.tp-retailer-btn:active { transform: scale(0.97); }

/* Pre-order CTA button — full-width gold, sits under the book cover */
.tp-preorder-btn {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--tp-font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--tp-gold);
  color: #fff;
  padding: 0.9rem 1.5rem;
  border-radius: 2px;
  transition: background 0.2s, transform 0.15s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.2s;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(200, 134, 10, 0.35);
}
.tp-preorder-btn:hover {
  background: var(--tp-gold-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(200, 134, 10, 0.50);
}
.tp-preorder-btn:active { transform: scale(0.97); }

/* ── TRUST BAR ── */
.tp-trust-bar {
  background: var(--tp-charcoal);
  padding: 1.4rem 5%;
}
.tp-trust-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 2.5rem;
}
.tp-trust-bar-label {
  font-family: var(--tp-font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tp-gold);
  white-space: nowrap;
}
.tp-trust-bar-divider {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.2);
}
.tp-trust-bar-name {
  font-family: var(--tp-font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
}

/* ── ABOUT THE BOOK ── */
.tp-about-book {
  background: var(--tp-white);
  padding: var(--tp-section-pad-y) 5%;
}
.tp-about-book-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  /* stretch, not start: the cream card fills the row so its bottom lines up
     with the end of the body copy on the left instead of leaving a void. */
  align-items: stretch;
}
.tp-section-eyebrow {
  font-family: var(--tp-font-sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tp-gold);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.tp-section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--tp-gold);
}
.tp-section-eyebrow.tp-centered {
  justify-content: center;
  gap: 0;
}
.tp-section-eyebrow.tp-centered::before { display: none; }
/* Rule spans inside centered eyebrow get their own spacing */
.tp-section-eyebrow.tp-centered > span[style] {
  margin: 0 0.75rem;
}
.tp-section-h2 {
  font-family: var(--tp-font-display);
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 600;
  line-height: 1.18;
  color: var(--tp-charcoal);
  margin-bottom: 1.5rem;
}
.tp-section-body {
  font-family: var(--tp-font-body);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--tp-charcoal-mid);
}
.tp-section-body p + p { margin-top: 1.1rem; }
.tp-about-questions { margin-top: 2rem; }
.tp-about-question {
  font-family: var(--tp-font-display);
  font-size: 1.68rem;
  font-style: italic;
  font-weight: 500;
  color: var(--tp-gold-dark);
  line-height: 1.4;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--tp-cream-dark);
}
.tp-about-question:first-child { border-top: 1px solid var(--tp-cream-dark); }
/* The card sits in its own column wrapper; both need to pass the stretched
   row height down so the card itself, not just the wrapper, gets taller. */
.tp-about-scope-col {
  display: flex;
  flex-direction: column;
}
.tp-about-scope-col > .tp-scope-block { flex: 1 1 auto; }

.tp-scope-block {
  background: var(--tp-cream);
  border-radius: 4px;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
}
/* The closing line follows the cast list directly; any slack from the stretched
   card is left as empty cream at the foot. padding-top, not margin-top, so the
   gap above it matches the original spacing. */
.tp-scope-block .tp-section-body {
  padding-top: 1.5rem;
  font-size: 0.95rem;
}
.tp-scope-block .tp-section-eyebrow { margin-bottom: 1.2rem; }
.tp-scope-intro {
  font-family: var(--tp-font-display);
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--tp-charcoal-mid);
  margin-bottom: 1.5rem;
}
.tp-scope-characters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
.tp-scope-character {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
/* A trailing entry with no partner would leave half the row empty, so it spans
   both columns instead. A single entry on its own is covered by the same rule. */
.tp-scope-character:nth-child(odd):last-child {
  grid-column: 1 / -1;
}
.tp-scope-character-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tp-gold);
  margin-top: 0.55rem;
  flex-shrink: 0;
}
.tp-scope-character-text {
  font-family: var(--tp-font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--tp-charcoal-mid);
}
.tp-scope-character-text strong {
  font-weight: 600;
  color: var(--tp-charcoal);
}

/* ── ENDORSEMENTS ── */
.tp-endorsements {
  background: var(--tp-cream);
  padding: var(--tp-section-pad-y) 5%;
}
.tp-endorsements-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.tp-endorsements-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.tp-endorsements-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.tp-endorsement-card {
  background: var(--tp-white);
  padding: 2rem 1.8rem;
  border-radius: 3px;
  border-top: 3px solid var(--tp-gold);
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.tp-endorsement-card blockquote {
  font-family: var(--tp-font-body);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.65;
  color: var(--tp-charcoal-mid);
  margin-bottom: 1.2rem;
}
.tp-endorsement-card blockquote::before {
  content: '\201C';
  font-family: var(--tp-font-display);
  font-size: 3rem;
  line-height: 0;
  vertical-align: -0.8rem;
  color: var(--tp-gold-pale);
  margin-right: 0.1rem;
}
.tp-endorsement-card blockquote::after {
  content: '\201D';
  font-family: var(--tp-font-display);
  font-size: 3rem;
  line-height: 0;
  vertical-align: -0.8rem;
  color: var(--tp-gold-pale);
  margin-left: 0.1rem;
}
.tp-endorsement-card cite {
  display: block;
  font-family: var(--tp-font-sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tp-gold-dark);
  font-style: normal;
}
.tp-endorsement-card cite span {
  display: block;
  font-weight: 400;
  color: var(--tp-charcoal-mid);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.75rem;
  margin-top: 0.2rem;
}
.tp-endorsement-featured {
  grid-column: span 2;
  background: var(--tp-charcoal);
  border-top: 3px solid var(--tp-gold);
  padding: 2.5rem 3rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
}
.tp-endorsement-featured blockquote {
  font-family: var(--tp-font-display);
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--tp-cream);
  margin-bottom: 0;
}
.tp-endorsement-featured blockquote::before {
  content: '\201C';
  font-family: var(--tp-font-display);
  font-size: 3rem;
  line-height: 0;
  vertical-align: -0.8rem;
  color: rgba(200,134,10,0.4);
  margin-right: 0.1rem;
}
.tp-endorsement-featured blockquote::after {
  content: '\201D';
  font-family: var(--tp-font-display);
  font-size: 3rem;
  line-height: 0;
  vertical-align: -0.8rem;
  color: rgba(200,134,10,0.4);
  margin-left: 0.1rem;
}
.tp-endorsement-featured cite {
  font-family: var(--tp-font-sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tp-gold);
  font-style: normal;
  white-space: nowrap;
  text-align: right;
}
.tp-endorsement-featured cite span {
  display: block;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.75rem;
  margin-top: 0.3rem;
}

/* ── AUTHOR SECTION ── */
.tp-author-section {
  background: var(--tp-white);
  padding: var(--tp-section-pad-y) 5%;
}
.tp-author-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 4rem;
  align-items: start;
}
.tp-author-photo-wrap { position: relative; }
.tp-author-photo {
  width: 100%;
  border-radius: 3px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.tp-author-photo-fallback {
  width: 100%;
  aspect-ratio: 3/4;
  background: linear-gradient(160deg, var(--tp-cream-dark) 0%, var(--tp-cream) 100%);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.tp-author-photo-fallback svg {
  width: 80px;
  height: 80px;
  opacity: 0.3;
}
.tp-author-photo-caption {
  font-family: var(--tp-font-sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tp-gold-dark);
  text-align: center;
  margin-top: 0.8rem;
}
.tp-author-credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.tp-credential-tag {
  font-family: var(--tp-font-sans);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--tp-cream);
  color: var(--tp-brown);
  padding: 0.3rem 0.7rem;
  border-radius: 2px;
  border: 1px solid var(--tp-cream-dark);
}
.tp-author-bio {
  font-family: var(--tp-font-body);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--tp-charcoal-mid);
}
.tp-author-bio p + p { margin-top: 1.1rem; }

/* ── BOOK CLUB ── */
.tp-book-club {
  background: linear-gradient(135deg, #2A1F0A 0%, #1C1408 100%);
  padding: var(--tp-section-pad-y) 5%;
  position: relative;
  overflow: hidden;
}
.tp-book-club::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(200,134,10,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.tp-book-club-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  position: relative;
}
.tp-book-club .tp-section-eyebrow { color: var(--tp-gold-light); }
.tp-book-club .tp-section-eyebrow::before { background: var(--tp-gold-light); }
.tp-book-club .tp-section-h2 { color: var(--tp-cream); }
.tp-book-club-body {
  font-family: var(--tp-font-body);
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(247,242,232,0.92);
  font-weight: 500;
}
.tp-book-club-body p + p { margin-top: 1rem; }
.tp-book-club-features {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.tp-book-club-feature {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  background: rgba(200,134,10,0.1);
  border: 1px solid rgba(200,134,10,0.3);
  border-radius: 4px;
  padding: 1.2rem 1.4rem;
}
.tp-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(200,134,10,0.25);
  border: 1px solid rgba(200,134,10,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.tp-feature-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--tp-gold-light);
  fill: none;
}
.tp-feature-text {
  font-family: var(--tp-font-body);
  font-size: 18px;
  line-height: 1.6;
  color: rgba(247,242,232,0.92);
  font-weight: 500;
}
.tp-feature-text strong {
  display: block;
  font-weight: 700;
  color: var(--tp-cream);
  margin-bottom: 0.25rem;
  font-size: 1.05rem;
}
.tp-book-club-contact-link {
  color: var(--tp-gold-light);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.tp-book-club-contact-link:hover { color: var(--tp-cream); }
.tp-book-club-contact-link:focus-visible {
  outline: 2px solid var(--tp-gold-light);
  outline-offset: 3px;
}
.tp-book-club-cta-block {
  background: rgba(200,134,10,0.1);
  border: 1px solid rgba(200,134,10,0.3);
  border-radius: 4px;
  padding: 2.5rem;
}
.tp-book-club-cta-block .tp-section-h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}
.tp-book-club-cta-body {
  font-family: var(--tp-font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(247,242,232,0.92);
  margin-bottom: 1.8rem;
  font-weight: 500;
}
.tp-book-club-questions { margin-bottom: 1.8rem; }
.tp-book-club-question {
  font-family: var(--tp-font-display);
  /* Two steps up from the 18px body copy below it, and an opaque off-white
     rather than 95%-alpha cream, so the questions read as the louder element
     on the dark olive ground instead of competing with the paragraph text.
     1.2rem still sat too close to 18px at a glance, hence 1.32rem. */
  font-size: 1.32rem;
  font-style: italic;
  color: #F5F0E8;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(200,134,10,0.3);
  line-height: 1.5;
  font-weight: 500;
}
.tp-book-club-question:first-child { border-top: 1px solid rgba(200,134,10,0.2); }
.tp-discussion-guide-note {
  margin-top: 0.9rem;
  font-family: var(--tp-font-sans);
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(247,242,232,0.74);
}

/* ── EMAIL CAPTURE ── */
.tp-email-capture {
  background: var(--tp-cream-dark);
  padding: var(--tp-section-pad-y) 5%;
  text-align: center;
}
.tp-email-capture-inner {
  max-width: 600px;
  margin: 0 auto;
}
.tp-email-capture .tp-section-eyebrow {
  justify-content: center;
}
.tp-email-capture .tp-section-eyebrow::before { display: none; }
.tp-email-capture .tp-section-h2 { margin-bottom: 0.8rem; }
.tp-email-capture-body {
  font-family: var(--tp-font-body);
  font-size: 1.05rem;
  color: var(--tp-charcoal-mid);
  margin-bottom: 2rem;
  line-height: 1.65;
}
.tp-email-form {
  display: flex;
  gap: 0.6rem;
  max-width: 640px;
  margin: 0 auto;
}
.tp-email-input {
  flex: 1;
  font-family: var(--tp-font-sans);
  font-size: 0.85rem;
  padding: 0.85rem 1.2rem;
  border: 1.5px solid var(--tp-cream-dark);
  border-radius: 2px;
  background: var(--tp-white);
  color: var(--tp-charcoal);
  outline: none;
  transition: border-color 0.2s;
  min-width: 0;
}
.tp-email-input:focus { border-color: var(--tp-gold); }
.tp-email-input::placeholder { color: rgba(58,53,48,0.4); }
.tp-email-submit {
  font-family: var(--tp-font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--tp-gold);
  color: var(--tp-white);
  padding: 0.85rem 1.6rem;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.tp-email-submit:hover { background: var(--tp-gold-dark); }
.tp-email-privacy {
  font-family: var(--tp-font-sans);
  font-size: 0.6rem;
  color: rgba(58,53,48,0.5);
  margin-top: 0.8rem;
  letter-spacing: 0.05em;
}
.tp-newsletter-honeypot {
  position: absolute;
  left: -9999px;
}
.tp-newsletter-status {
  font-family: var(--tp-font-sans);
  font-size: 0.75rem;
  line-height: 1.5;
  margin-top: 0.7rem;
}
.tp-newsletter-status-success { color: #2f6b43; }
.tp-newsletter-status-error { color: #9c3b27; }

/* ── FOOTER ── */
.tp-site-footer {
  background: var(--tp-charcoal);
  padding: 3rem 5%;
}
.tp-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.tp-footer-logo {
  font-family: var(--tp-font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--tp-cream);
  letter-spacing: 0.06em;
}
.tp-footer-logo span { color: var(--tp-gold); }
.tp-footer-links {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tp-footer-links a {
  font-family: var(--tp-font-sans);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  transition: color 0.2s;
}
.tp-footer-links a:hover { color: var(--tp-gold); }
.tp-footer-credit {
  font-family: var(--tp-font-sans);
  font-size: 0.58rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.06em;
  text-align: right;
}
.tp-footer-credit a { color: rgba(255,255,255,0.45); }
.tp-footer-credit a:hover { color: var(--tp-gold); }
.tp-footer-social {
  display: flex;
  gap: 1.2rem;
  align-items: center;
}
.tp-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  color: rgba(255,255,255,0.55);
  transition: color 0.2s, border-color 0.2s;
  text-decoration: none;
}
.tp-footer-social a:hover {
  color: var(--tp-gold);
  border-color: var(--tp-gold);
}
.tp-footer-social svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* ── SCROLL ANIMATIONS ── */
.tp-fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.tp-fade-in.tp-visible {
  opacity: 1;
  transform: translateY(0);
}
.tp-fade-in-delay-1 { transition-delay: 0.1s; }
.tp-fade-in-delay-2 { transition-delay: 0.2s; }
.tp-fade-in-delay-3 { transition-delay: 0.3s; }
.tp-fade-in-delay-4 { transition-delay: 0.4s; }

/* ── BACKSTAGE PAGE ── */
.tp-backstage-hero {
  padding-top: 68px;
  background: linear-gradient(160deg, #1A1208 0%, #2A1C08 50%, #1C1408 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.tp-backstage-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 40%, rgba(200,134,10,0.12) 0%, transparent 65%);
  pointer-events: none;
}
.tp-backstage-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 5rem 5%;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
.tp-backstage-eyebrow {
  font-family: var(--tp-font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tp-gold);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.tp-backstage-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--tp-gold);
}
.tp-backstage-parent-title {
  font-family: var(--tp-font-display);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245,238,220,0.45);
  margin-bottom: 0.5rem;
}
.tp-backstage-h1 {
  font-family: var(--tp-font-display);
  font-size: clamp(2.8rem, 5vw, 4.6rem);
  font-weight: 700;
  line-height: 1.06;
  color: var(--tp-cream);
  margin-bottom: 0.3rem;
  letter-spacing: -0.01em;
}
.tp-backstage-h1 span { color: var(--tp-gold); font-style: italic; }
.tp-backstage-subtitle {
  font-family: var(--tp-font-display);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 400;
  font-style: italic;
  color: rgba(245,238,220,0.65);
  margin-bottom: 2.2rem;
  line-height: 1.4;
}
.tp-hook-quote {
  border-left: 2px solid rgba(200,134,10,0.5);
  padding-left: 1.4rem;
  margin-bottom: 2rem;
}
.tp-hook-quote p {
  font-family: var(--tp-font-body);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.65;
  color: rgba(245,238,220,0.82);
}
.tp-hook-quote p + p { margin-top: 0.8rem; }
.tp-coming-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(200,134,10,0.15);
  border: 1px solid rgba(200,134,10,0.4);
  color: var(--tp-gold-light);
  font-family: var(--tp-font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.5rem 1.1rem;
  border-radius: 2px;
  margin-bottom: 2rem;
}
.tp-coming-soon-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--tp-gold);
  border-radius: 50%;
  animation: tp-pulse 2s ease-in-out infinite;
}
@keyframes tp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
.tp-notify-label {
  font-family: var(--tp-font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245,238,220,0.55);
  margin-bottom: 0.8rem;
  display: block;
}
.tp-notify-form {
  display: flex;
  gap: 0;
  max-width: 620px;
  margin-bottom: 0.6rem;
}
.tp-notify-input {
  flex: 1;
  font-family: var(--tp-font-body);
  font-size: 1rem;
  padding: 0.85rem 1.2rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(200,134,10,0.35);
  border-right: none;
  color: var(--tp-cream);
  outline: none;
  border-radius: 2px 0 0 2px;
  transition: border-color 0.2s, background 0.2s;
}
.tp-notify-input::placeholder { color: rgba(245,238,220,0.3); }
.tp-notify-input:focus { border-color: var(--tp-gold); background: rgba(255,255,255,0.12); }
.tp-notify-form .tp-notify-input + .tp-notify-input { border-radius: 0; }
.tp-notify-btn {
  font-family: var(--tp-font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--tp-gold);
  color: var(--tp-white);
  padding: 0.85rem 1.6rem;
  border: none;
  border-radius: 0 2px 2px 0;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.tp-notify-btn:hover { background: var(--tp-gold-dark); }
.tp-notify-privacy {
  font-family: var(--tp-font-sans);
  font-size: 0.65rem;
  color: rgba(245,238,220,0.35);
  letter-spacing: 0.04em;
}
.tp-backstage-hero .tp-newsletter-status {
  color: rgba(245,238,220,0.88);
}
.tp-backstage-hero .tp-newsletter-status-error {
  color: #f1a68d;
}
.tp-back-to-main {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  font-family: var(--tp-font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245,238,220,0.38);
  transition: color 0.2s;
  cursor: pointer;
}
.tp-back-to-main:hover { color: var(--tp-gold); }
.tp-back-to-main::before { content: '←'; font-size: 0.8rem; }
.tp-backstage-cover-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.tp-cover-img-wrap {
  width: 100%;
  max-width: 340px;
  filter: drop-shadow(-12px 18px 40px rgba(0,0,0,0.55)) drop-shadow(-4px 6px 14px rgba(0,0,0,0.3));
  transform: perspective(900px) rotateY(-4deg);
  transition: transform 0.4s ease;
}
.tp-cover-img-wrap:hover { transform: perspective(900px) rotateY(-1deg) scale(1.02); }
.tp-cover-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

/* ── BACKSTAGE HOOK SECTION ── */
.tp-hook-section {
  background: var(--tp-cream);
  padding: var(--tp-section-pad-y) 5%;
}
.tp-hook-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

/* ── BACKSTAGE STRUCTURE SECTION ── */
.tp-structure-section {
  background: linear-gradient(160deg, #EDE0C4 0%, #E4D4B0 100%);
  padding: var(--tp-section-pad-y) 5%;
}
.tp-structure-inner { max-width: 1100px; margin: 0 auto; }
.tp-structure-header { text-align: center; margin-bottom: 3.5rem; }
.tp-parts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}
.tp-part-card {
  background: rgba(247,242,232,0.7);
  border: 1px solid rgba(200,134,10,0.2);
  border-top: 3px solid var(--tp-gold);
  padding: 2rem;
}
.tp-part-label {
  font-family: var(--tp-font-sans);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tp-gold);
  margin-bottom: 0.7rem;
}
.tp-part-title {
  font-family: var(--tp-font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--tp-charcoal);
  margin-bottom: 0.8rem;
  line-height: 1.25;
}
.tp-part-desc {
  font-family: var(--tp-font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--tp-charcoal-mid);
}

/* ── BACKSTAGE DISCIPLINES ── */
.tp-disciplines-section { background: var(--tp-cream); padding: var(--tp-section-pad-y) 5%; }
.tp-disciplines-inner { max-width: 1100px; margin: 0 auto; }
.tp-disciplines-header { text-align: center; margin-bottom: 3.5rem; }
.tp-disciplines-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.tp-discipline-card {
  padding: 1.6rem 1.4rem;
  border: 1px solid var(--tp-cream-dark);
  background: var(--tp-white);
  position: relative;
}
.tp-discipline-number {
  font-family: var(--tp-font-sans);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(200,134,10,0.5);
  margin-bottom: 0.5rem;
}
.tp-discipline-name {
  font-family: var(--tp-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--tp-charcoal);
  margin-bottom: 0.6rem;
}
.tp-discipline-detail {
  font-family: var(--tp-font-body);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--tp-charcoal-mid);
}
.tp-discipline-puzzle {
  font-family: var(--tp-font-sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tp-gold);
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--tp-cream-dark);
}
.tp-deepdive-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.tp-deepdive-card {
  padding: 2rem;
  background: linear-gradient(135deg, #2A1F08 0%, #1C1408 100%);
  border: 1px solid rgba(200,134,10,0.25);
  position: relative;
  overflow: hidden;
}
.tp-deepdive-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tp-gold), transparent);
}
.tp-deepdive-label {
  font-family: var(--tp-font-sans);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tp-gold);
  margin-bottom: 0.6rem;
}
.tp-deepdive-name {
  font-family: var(--tp-font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--tp-cream);
  margin-bottom: 0.8rem;
}
.tp-deepdive-detail {
  font-family: var(--tp-font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(245,238,220,0.72);
}

/* ── BACKSTAGE INTRIGUE SECTION ── */
.tp-intrigue-section {
  background: linear-gradient(160deg, #1A1208 0%, #2A1C08 100%);
  padding: var(--tp-section-pad-y) 5%;
  position: relative;
  overflow: hidden;
}
.tp-intrigue-section::before {
  content: '?';
  position: absolute;
  right: 3%;
  top: -1rem;
  font-family: var(--tp-font-display);
  font-size: 22rem;
  color: rgba(200,134,10,0.06);
  line-height: 1;
  pointer-events: none;
}
.tp-intrigue-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.tp-intrigue-h2 {
  font-family: var(--tp-font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 600;
  line-height: 1.18;
  color: var(--tp-cream);
  margin-bottom: 1.5rem;
}
.tp-intrigue-body {
  font-family: var(--tp-font-body);
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(245,238,220,0.75);
}
.tp-intrigue-body p + p { margin-top: 1rem; }
.tp-intrigue-list { list-style: none; margin: 0; padding: 0; }
.tp-intrigue-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(200,134,10,0.15);
  color: rgba(245,238,220,0.75);
  font-family: var(--tp-font-body);
  font-size: 0.95rem;
  line-height: 1.55;
}
.tp-intrigue-list li:first-child { border-top: 1px solid rgba(200,134,10,0.15); }
.tp-intrigue-bullet {
  width: 7px;
  height: 7px;
  min-width: 7px;
  background: var(--tp-gold);
  border-radius: 50%;
  margin-top: 0.55rem;
}
.tp-intrigue-list strong {
  color: var(--tp-cream);
  display: block;
  margin-bottom: 0.15rem;
}

/* ── BACKSTAGE NOTIFY SECTION ── */
.tp-notify-section {
  background: var(--tp-cream-dark);
  padding: var(--tp-section-pad-y) 5%;
  text-align: center;
}
.tp-notify-inner { max-width: 580px; margin: 0 auto; }
.tp-notify-section-h2 {
  font-family: var(--tp-font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 600;
  color: var(--tp-charcoal);
  margin-bottom: 1rem;
  line-height: 1.2;
}
.tp-notify-section-body {
  font-family: var(--tp-font-body);
  font-size: 1.05rem;
  color: var(--tp-charcoal-mid);
  margin-bottom: 2.2rem;
  line-height: 1.65;
}
.tp-notify-section .tp-notify-form { margin: 0 auto 0.6rem; }
.tp-notify-section .tp-notify-input {
  background: var(--tp-white);
  border: 1px solid var(--tp-cream-dark);
  border-right: none;
  color: var(--tp-charcoal);
}
.tp-notify-section .tp-notify-input::placeholder { color: rgba(60,50,40,0.35); }
.tp-notify-section .tp-notify-input:focus { border-color: var(--tp-gold); }
.tp-notify-section .tp-notify-privacy {
  color: rgba(60,50,40,0.45);
  margin-top: 0.8rem;
}
.tp-notify-section .tp-newsletter-status-success { color: #2f6b43; }
.tp-notify-section .tp-newsletter-status-error { color: #9c3b27; }

/* ── BACKSTAGE FOOTER (centered) ── */
.tp-backstage-footer {
  background: var(--tp-charcoal);
  padding: 3rem 5%;
  text-align: center;
}
.tp-backstage-footer-inner { max-width: 1100px; margin: 0 auto; }
.tp-backstage-footer-logo {
  font-family: var(--tp-font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tp-cream);
  margin-bottom: 1.2rem;
}
.tp-backstage-footer-logo span { color: var(--tp-gold); }
/* The logo is wrapped in a link home; it must not pick up link styling. */
.tp-backstage-footer-logo-link {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.tp-backstage-footer-logo-link:hover { color: var(--tp-gold); }
.tp-backstage-footer-logo-link:hover span { color: var(--tp-gold-light); }
.tp-backstage-footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.tp-backstage-footer-links a {
  font-family: var(--tp-font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245,238,220,0.45);
  transition: color 0.2s;
}
.tp-backstage-footer-links a:hover { color: var(--tp-gold); }
.tp-backstage-footer-social {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  justify-content: center;
  margin-top: 1.2rem;
}
.tp-backstage-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(245,238,220,0.2);
  border-radius: 50%;
  color: rgba(245,238,220,0.5);
  transition: color 0.2s, border-color 0.2s;
  text-decoration: none;
}
.tp-backstage-footer-social a:hover { color: var(--tp-gold); border-color: var(--tp-gold); }
.tp-backstage-footer-social svg { width: 15px; height: 15px; fill: currentColor; }
.tp-backstage-footer-credit {
  font-family: var(--tp-font-sans);
  font-size: 0.65rem;
  color: rgba(245,238,220,0.28);
  line-height: 1.8;
  letter-spacing: 0.04em;
  margin-top: 1.2rem;
}
.tp-backstage-footer-credit a { color: rgba(245,238,220,0.4); }
.tp-backstage-footer-credit a:hover { color: var(--tp-gold); }

/* ── SOLEDAD O'BRIEN INTERVIEW ── */
.tp-interview {
  position: relative;
  background: #15120f;
  border-top: 1px solid rgba(240, 192, 96, 0.34);
  border-bottom: 1px solid rgba(240, 192, 96, 0.26);
}
.tp-interview-inner {
  max-width: 1240px;
  min-height: 430px;
  margin: 0 auto;
  padding: var(--tp-section-pad-y) 5%;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
  gap: clamp(3rem, 6vw, 7rem);
  align-items: center;
}
.tp-interview-media {
  position: relative;
  min-height: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 25%, rgba(240, 192, 96, 0.22), transparent 33%),
    linear-gradient(135deg, #2c2116 0%, #14110e 49%, #24190e 100%);
  border: 1px solid rgba(240, 192, 96, 0.46);
}
.tp-interview-media::before,
.tp-interview-media::after {
  content: '';
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(240, 192, 96, 0.12);
  transform: skewY(-8deg);
}
.tp-interview-media::after {
  inset: 24% -4% auto 28%;
  height: 1px;
  border: 0;
  background: rgba(240, 192, 96, 0.36);
  box-shadow: 0 48px 0 rgba(240, 192, 96, 0.18), 0 96px 0 rgba(240, 192, 96, 0.1);
  transform: none;
}
.tp-interview-media-glow {
  position: absolute;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: rgba(240, 192, 96, 0.08);
  filter: blur(2px);
}
.tp-interview-static-indicator {
  position: relative;
  z-index: 1;
  width: 84px;
  height: 58px;
  border: 1px solid rgba(240, 192, 96, 0.82);
  border-radius: 2px;
  background: rgba(14, 11, 8, 0.74);
}
.tp-interview-static-indicator::before,
.tp-interview-static-indicator::after {
  content: '';
  position: absolute;
  left: 15px;
  right: 15px;
  height: 1px;
  background: rgba(240, 192, 96, 0.56);
}
.tp-interview-static-indicator::before {
  top: 20px;
  box-shadow: 0 8px 0 rgba(240, 192, 96, 0.34), 0 16px 0 rgba(240, 192, 96, 0.18);
}
.tp-interview-static-indicator::after {
  top: 11px;
  right: 48px;
  background: var(--tp-gold-light);
}
.tp-interview-coming-soon {
  position: absolute;
  z-index: 2;
  top: 1.2rem;
  left: 1.35rem;
  border: 1px solid rgba(240, 192, 96, 0.58);
  background: rgba(18, 13, 8, 0.86);
  color: var(--tp-gold-light);
  font-family: var(--tp-font-sans);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  padding: 0.52rem 0.62rem;
  text-transform: uppercase;
}
.tp-interview-placeholder-copy {
  position: absolute;
  z-index: 1;
  bottom: 2.15rem;
  left: 2rem;
  display: flex;
  flex-direction: column;
  color: rgba(255, 248, 238, 0.72);
  font-family: var(--tp-font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.45;
  text-transform: uppercase;
}
.tp-interview-placeholder-copy strong { color: var(--tp-gold-light); font-size: 0.9rem; }
.tp-interview-media-meta {
  position: absolute;
  z-index: 1;
  right: 2rem;
  bottom: 2rem;
  color: var(--tp-gold-light);
  font-family: var(--tp-font-sans);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tp-interview-copy .tp-section-eyebrow { margin-bottom: 0.95rem; }
.tp-interview-copy h2 {
  max-width: 520px;
  margin: 0 0 1.3rem;
  color: #fff8ee;
  font-family: var(--tp-font-display);
  font-size: clamp(2.25rem, 3.7vw, 3.5rem);
  font-weight: 600;
  line-height: 1.06;
}
.tp-interview-copy > p:not(.tp-interview-status) {
  max-width: 530px;
  margin: 0;
  color: rgba(255, 245, 220, 0.9);
  font-family: var(--tp-font-body);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.58;
}
.tp-interview-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.15rem;
  margin: 1.7rem 0 1.5rem;
  color: var(--tp-gold-light);
  font-family: var(--tp-font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.tp-interview-details span + span { padding-left: 1.15rem; border-left: 1px solid rgba(240, 192, 96, 0.4); }
.tp-interview-watch {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.92rem 1.2rem;
  border: 1px solid rgba(240, 192, 96, 0.52);
  border-radius: 2px;
  background: rgba(240, 192, 96, 0.1);
  color: #fff8ee;
  font-family: var(--tp-font-sans);
  font-size: 0.87rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.tp-interview-watch:disabled { cursor: not-allowed; opacity: 0.78; }
@media (max-width: 760px) {
  .tp-interview-inner { min-height: 0; padding: 4rem 6%; grid-template-columns: 1fr; gap: 2.8rem; }
  .tp-interview-media { min-height: 270px; }
  .tp-interview-copy h2 { font-size: clamp(2.2rem, 10vw, 3.1rem); }
  .tp-interview-details { gap: 0.65rem; }
  .tp-interview-details span + span { padding-left: 0.65rem; }
  .tp-interview-media-meta { right: 1.25rem; bottom: 1.25rem; font-size: 0.64rem; }
  .tp-interview-placeholder-copy { bottom: 1.3rem; left: 1.3rem; }
}

/* ── RESPONSIVE ── */
.tp-hero.tp-hero-dedicated {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: max(680px, min(100svh, 900px));
  padding-top: 68px; /* clears the fixed nav — replaces the band's old `top` offset */
  overflow: hidden;
  background: #11100f;
}
.tp-hero.tp-hero-dedicated::before,
.tp-hero.tp-hero-dedicated::after {
  display: none;
}
/* One continuous full-bleed strip of the hero painting — no panel seams.
   `cover` on this band scales the artwork to the band's width, which is the
   same scale the old three-panel grid produced for its first two panels. */
.tp-dedicated-image-band {
  flex: none;
  height: 60svh;
  min-height: 240px;
  overflow: hidden;
  border-bottom: 1px solid rgba(240, 192, 96, 0.7);
  background-color: #120d08;
  background-image: var(--tp-hero-banner, url('../images/hero-banner.png'));
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 20%;
}
.tp-dedicated-lower {
  /* flex-shrink 0: the band is now 55svh, so on short viewports this panel
     would otherwise be squeezed below its content and clipped by the hero's
     overflow: hidden. Letting the hero grow instead keeps everything visible. */
  flex: 1 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background:
    linear-gradient(90deg, rgba(10, 8, 6, 0.96) 0%, rgba(16, 12, 9, 0.9) 32%, rgba(18, 13, 9, 0.64) 58%, rgba(12, 9, 7, 0.18) 100%);
}
/* Four flex columns. `flex-grow` carries the old fr ratios and `min-width`
   the old minmax() floors, so the tracks resolve to identical widths.
   The old 2.7rem bottom padding only reserved space for the absolutely
   pinned tagline — the tagline now occupies real space instead. */
.tp-dedicated-lower-grid {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 2.25rem 5% 0;
  display: flex;
  gap: 1.25rem;
  align-items: center;
}
.tp-dedicated-copy { flex: 0 1 auto; width: calc((100% - 3.75rem) * 0.2991690); min-width: 280px; }
.tp-dedicated-kicker {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
  color: var(--tp-gold-light);
  font-family: var(--tp-font-sans);
  font-size: clamp(0.68rem, 0.85vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.2;
  white-space: nowrap;
  text-transform: uppercase;
}
.tp-dedicated-kicker::before {
  content: '';
  width: 30px;
  height: 1px;
  flex: 0 0 30px;
  background: var(--tp-gold-light);
}
.tp-dedicated-h1 {
  margin-bottom: 0.9rem;
  color: #fff8ee;
  font-family: var(--tp-font-display);
  font-size: clamp(2.45rem, 3.3vw, 3.9rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
.tp-dedicated-h1 em { color: #f0c060; }
.tp-dedicated-subhead {
  max-width: 430px;
  margin-bottom: 1.05rem;
  color: rgba(255, 245, 220, 0.93);
  font-family: var(--tp-font-body);
  font-size: 1.04rem;
  font-weight: 500;
  line-height: 1.45;
}
.tp-dedicated-copy .tp-countdown {
  gap: 0.55rem;
  margin: 0 0 0.75rem;
}
.tp-dedicated-copy .tp-countdown-unit { min-width: 3.1rem; }
.tp-dedicated-copy .tp-countdown-number { font-size: clamp(1.9rem, 2.5vw, 2.55rem); }
.tp-dedicated-copy .tp-countdown-label {
  margin-top: 0.3rem;
  color: rgba(240, 192, 96, 0.9);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.tp-dedicated-copy .tp-countdown-sep { font-size: 2rem; }
.tp-dedicated-release-date {
  color: #f0c060;
  font-family: var(--tp-font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}
.tp-dedicated-endorsement {
  flex: 0 1 auto;
  width: calc((100% - 3.75rem) * 0.2077562);
  align-self: center;
  min-width: 210px;
  border-left: 2px solid rgba(240, 192, 96, 0.8);
  padding-left: 1.15rem;
}
.tp-dedicated-endorsement blockquote {
  margin-bottom: 0.75rem;
  color: rgba(255, 245, 220, 0.96);
  font-family: var(--tp-font-body);
  font-size: 1.02rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.46;
}
.tp-dedicated-endorsement cite {
  display: block;
  color: #f0c060;
  font-family: var(--tp-font-sans);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.45;
  text-transform: uppercase;
}
.tp-dedicated-endorsement cite span { display: block; }
.tp-dedicated-book {
  flex: 0 1 auto;
  width: calc((100% - 3.75rem) * 0.2770083);
  min-width: 290px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp-dedicated-book-link {
  display: block;
  border-radius: 2px;
  line-height: 0;
}
.tp-dedicated-book-link:focus-visible {
  outline: 2px solid var(--tp-gold-light);
  outline-offset: 7px;
}
.tp-dedicated-book-cover {
  width: min(100%, 360px);
  filter: drop-shadow(0 20px 32px rgba(0, 0, 0, 0.72));
  transform-origin: center center;
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .tp-dedicated-book-link:hover .tp-dedicated-book-cover {
    transform: translateY(-4px) scale(1.045);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tp-nav-panel { transition: none; }
  .tp-nav-hamburger span { transition: none; }
  .tp-dedicated-book-cover { transition: none; }
  .tp-dedicated-book-link:hover .tp-dedicated-book-cover { transform: none; }
}
.tp-dedicated-actions {
  flex: 0 1 auto;
  width: calc((100% - 3.75rem) * 0.2160665);
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
}
.tp-dedicated-primary-cta,
.tp-dedicated-secondary-cta {
  display: block;
  padding: 0.95rem 1rem;
  border-radius: 2px;
  font-family: var(--tp-font-sans);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}
.tp-dedicated-primary-cta {
  background: var(--tp-gold);
  color: #21170a;
}
.tp-dedicated-primary-cta:hover { background: var(--tp-gold-dark); }
.tp-dedicated-secondary-cta {
  border: 1px solid rgba(255, 245, 220, 0.65);
  color: rgba(255, 245, 220, 0.95);
}
.tp-hero .tp-dedicated-primary-cta { color: #21170a; }
.tp-hero .tp-dedicated-secondary-cta { color: rgba(255, 245, 220, 0.95); }
.tp-dedicated-secondary-cta:hover { border-color: #f0c060; color: #f0c060; }
.tp-dedicated-tagline {
  max-width: 1400px;
  width: 100%;
  margin: 2.25rem auto 2.25rem;
  padding: 0 5%;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.tp-dedicated-tagline span {
  height: 1px;
  flex: 1;
  background: linear-gradient(to right, transparent, rgba(240, 192, 96, 0.68));
}
.tp-dedicated-tagline span:last-child { background: linear-gradient(to left, transparent, rgba(240, 192, 96, 0.68)); }
.tp-dedicated-tagline p {
  color: #f0c060;
  font-family: var(--tp-font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.7rem);
  font-style: italic;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
}
/* ── NARROW DESKTOP ── tighten the nav so it still fits on one line ── */
@media (max-width: 1300px) {
  .tp-nav-links { gap: 1.2rem; }
  .tp-nav-cta {
    padding: 0.5rem 0.5rem;
    letter-spacing: 0;
  }
}

/* ── COLLAPSED NAV ── the hamburger takes over from here down ── */
@media (max-width: 1180px) {
  .tp-nav-hamburger { display: flex; }

  /* The three bars morph into a cross while the panel is open. The bars are
     2px tall with 5px gaps, so the outer two travel 7px to meet in the middle.
     .tp-nav-hamburger span already carries `transition: all 0.3s`, which is
     what animates this, so it matches the panel's own 0.3s. */
  .tp-nav-open .tp-nav-hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .tp-nav-open .tp-nav-hamburger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.1);
  }
  .tp-nav-open .tp-nav-hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* The links and the button become one panel under the bar. It stays in the
     box tree (rather than display: none) so opening and closing can animate;
     absolute positioning keeps it out of the nav row's flow, and
     visibility + pointer-events keep it inert and untabbable while closed. */
  .tp-nav-panel {
    display: block;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    padding: 1rem 5% 1.25rem;
    background: rgba(247, 242, 232, 0.98);
    border-bottom: 1px solid #EDE5D0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s linear;
  }
  .tp-nav.tp-nav-open .tp-nav-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .tp-nav-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  /* The panel is cream, so the links must be dark — the base white is meant
     for sitting over the hero artwork and is unreadable here. The scrolled
     variants are listed too, or the .tp-nav-scrolled rules would win. */
  .tp-nav-links a,
  .tp-nav-scrolled .tp-nav-links a { color: #000000; }
  .tp-nav-links a:hover,
  .tp-nav-scrolled .tp-nav-links a:hover { color: var(--tp-gold-dark); }
  .tp-nav-links .tp-active-page,
  .tp-nav-scrolled .tp-nav-links .tp-active-page {
    color: var(--tp-gold-dark);
    border-bottom-color: var(--tp-gold-dark);
  }
  /* The panel is cream, so the brighter #e8a820 would read too light here. */
  .tp-nav-links a.tp-nav-current,
  .tp-nav-scrolled .tp-nav-links a.tp-nav-current {
    color: var(--tp-gold-dark);
  }

  .tp-nav-cta {
    display: block;
    margin: 1.15rem 0 0;
    text-align: center;
  }
}

/* ── TABLET ── footer stacks into rows, hero copy wraps to two columns ── */
@media (max-width: 1024px) {
  /* Footer: logo + social share a row, then the links, then the credit. */
  .tp-footer-inner {
    align-items: flex-start;
    gap: 1.75rem 1.5rem;
  }
  .tp-footer-logo { order: 1; flex: 0 1 auto; }
  .tp-footer-social { order: 2; flex: 0 0 auto; margin-left: auto; }
  .tp-footer-links {
    order: 3;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 0.9rem 1.75rem;
  }
  .tp-footer-credit {
    order: 4;
    flex: 1 1 100%;
    text-align: left;
  }

  /* Hero: the copy wraps to two columns under the taller band. */
  .tp-dedicated-lower-grid {
    flex-wrap: wrap;
    gap: 1.75rem 2rem;
    padding: 2.25rem 5% 0;
    align-items: flex-start;
  }
  .tp-dedicated-lower-grid > * { flex: 1 1 calc(50% - 1rem); width: auto; min-width: 0; }
  .tp-dedicated-tagline {
    margin: 2.25rem auto 2.25rem;
    padding: 0 5%;
  }
}
@media (max-width: 960px) {
  .tp-hero.tp-hero-dedicated { height: auto; min-height: 100svh; padding-top: 68px; overflow: visible; }
  .tp-dedicated-lower { display: block; background: radial-gradient(ellipse at 46% 22%, rgba(106, 65, 11, 0.16), transparent 40%), linear-gradient(105deg, #100e0d 0%, #1b1713 48%, #11100f 100%); }
  .tp-dedicated-lower-grid {
    flex-wrap: wrap;
    gap: 2rem 2.5rem;
    /* padding comes from the tablet block: 2.25rem 5% 0 */
  }
  .tp-dedicated-lower-grid > * { flex: 1 1 calc(50% - 1.25rem); width: auto; min-width: 0; }
  .tp-dedicated-book { order: 3; }
  .tp-dedicated-actions { order: 4; }
  .tp-dedicated-book-cover { width: min(100%, 185px); }
  .tp-hero-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 3rem 5% 5rem;
    align-items: start;
  }
  .tp-hero-book {
    order: -1;
    align-items: center;
    justify-content: center;
    align-self: auto;
  }
  .tp-book-cover-wrap {
    max-width: 220px;
    margin: 0 auto;
    transform: none;
  }
  .tp-book-cover-wrap:hover { transform: translateY(-8px); }
  .tp-about-book-inner { grid-template-columns: 1fr; gap: 3rem; }
  .tp-endorsements-grid { grid-template-columns: 1fr; }
  .tp-endorsement-featured { grid-column: span 1; }
  .tp-endorsement-featured {
    grid-column: span 1;
    grid-template-columns: 1fr;
  }
  .tp-endorsement-featured cite { text-align: left; }
  .tp-author-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .tp-author-photo-wrap { max-width: 260px; }
  .tp-book-club-inner { grid-template-columns: 1fr; gap: 3rem; }
  .tp-scope-characters { grid-template-columns: 1fr; }
  .tp-backstage-hero-inner { grid-template-columns: 1fr; gap: 3rem; padding: 3rem 5%; }
  .tp-backstage-cover-wrap { order: -1; }
  .tp-parts-grid { grid-template-columns: 1fr; }
  .tp-intrigue-inner { grid-template-columns: 1fr; gap: 3rem; }
  .tp-deepdive-row { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .tp-disciplines-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  /* nav already collapsed at the tablet breakpoint above */
  .tp-footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 0.8rem 1.2rem; }
  .tp-hero.tp-hero-dedicated { height: auto; min-height: 100svh; padding-top: 68px; overflow: visible; }
  .tp-dedicated-image-band {
    aspect-ratio: 16 / 9;
    height: auto;
    display: block;
    min-height: 0;
    background-image: linear-gradient(to bottom, rgba(4, 2, 0, 0.06) 0%, rgba(4, 2, 0, 0.24) 100%), var(--tp-hero-banner, url('../images/hero-banner.png'));
    background-size: 100% 100%;
    background-position: center;
  }
  .tp-dedicated-lower { display: block; background: radial-gradient(ellipse at 46% 22%, rgba(106, 65, 11, 0.16), transparent 40%), linear-gradient(105deg, #100e0d 0%, #1b1713 48%, #11100f 100%); }
  .tp-dedicated-lower-grid {
    flex-direction: column;
    align-items: stretch;
    gap: 1.8rem;
    padding: 2.25rem 6% 1.5rem;
  }
  .tp-dedicated-lower-grid > * { flex: 0 1 auto; width: auto; min-width: 0; }
  .tp-dedicated-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.13em;
    white-space: normal;
  }
  .tp-dedicated-kicker::before { width: 22px; flex-basis: 22px; }
  .tp-dedicated-h1 { font-size: clamp(2.55rem, 11vw, 3.25rem); }
  .tp-dedicated-subhead { font-size: 1.07rem; }
  .tp-dedicated-endorsement { padding-left: 1rem; }
  .tp-dedicated-endorsement blockquote { font-size: 1.1rem; }
  .tp-dedicated-book { order: 3; }
  .tp-dedicated-actions { order: 4; max-width: 320px; width: 100%; margin: 0 auto; }
  .tp-dedicated-book-cover { width: min(100%, 300px); margin: auto; }
  .tp-dedicated-primary-cta,
  .tp-dedicated-secondary-cta { font-size: 0.82rem; padding: 1rem; }
  .tp-dedicated-tagline { margin: 1.5rem auto 1.5rem; padding: 0 6%; gap: 0.75rem; }
  .tp-dedicated-tagline p { font-size: 1.2rem; white-space: normal; }
  .tp-hero-h1 { font-size: 2.2rem; }
  .tp-hero-ctas { flex-direction: column; }
  .tp-btn-primary, .tp-btn-secondary { text-align: center; }
  .tp-email-form { flex-direction: column; }
  .tp-trust-bar-divider { display: none; }
  .tp-footer-inner { flex-direction: column; align-items: flex-start; }
  .tp-footer-credit { text-align: left; }
  .tp-disciplines-grid { grid-template-columns: 1fr; }
  .tp-notify-form { flex-direction: column; }
  .tp-about-question{ font-size: 1.48rem;}
  .tp-notify-input {
    border-right: 1px solid rgba(200,134,10,0.35);
    border-bottom: none;
    border-radius: 2px 2px 0 0;
  }
  .tp-notify-btn { border-radius: 0 0 2px 2px; }
  /* Prevent hero kicker overflow on small phones */
  .tp-hero-kicker {
    white-space: normal;
    font-size: 0.58rem;
    letter-spacing: 0.14em;
  }
  .tp-hero-kicker::before { width: 20px; }
}
@media (max-width: 400px) {
  .tp-hero-kicker {
    font-size: 0.55rem;
    letter-spacing: 0.10em;
    gap: 0.5rem;
  }
  .tp-hero-kicker::before { width: 16px; }
}

/* ── READABILITY SCALE: laptop audit improvements ── */
.tp-nav-links a { font-size: 0.84rem; }
.tp-nav .tp-nav-cta { font-size: 0.84rem; color: #21170a; }
.tp-countdown-label { font-size: 0.75rem; }
.tp-dedicated-copy .tp-countdown-label { font-size: 0.75rem; }
.tp-dedicated-endorsement cite { font-size: 0.82rem; }

.tp-section-eyebrow { font-size: 0.75rem; }
.tp-scope-character-text { font-size: 1rem; }
.tp-endorsement-card cite,
.tp-endorsement-featured cite { font-size: 0.75rem; }
.tp-endorsement-card cite span,
.tp-endorsement-featured cite span { font-size: 0.82rem; }

.tp-author-photo-caption { font-size: 0.72rem; }
.tp-credential-tag { font-size: 0.75rem; }

.tp-email-input { font-size: 0.9rem; }
.tp-email-input::placeholder { color: rgba(58,53,48,0.65); }
.tp-email-submit { font-size: 0.78rem; }
.tp-email-privacy { font-size: 0.7rem; color: rgba(58,53,48,0.72); }

.tp-footer-links a { font-size: 0.75rem; color: rgba(255,255,255,0.76); }
.tp-footer-credit { font-size: 0.7rem; color: rgba(255,255,255,0.62); }
.tp-footer-credit a { color: rgba(255,255,255,0.72); }

.tp-backstage-eyebrow { font-size: 0.75rem; }
.tp-backstage-parent-title { color: rgba(245,238,220,0.68); }
.tp-coming-soon-badge { font-size: 0.75rem; }
.tp-notify-label { font-size: 0.75rem; color: rgba(245,238,220,0.72); }
.tp-notify-input::placeholder { color: rgba(245,238,220,0.65); }
.tp-notify-btn { font-size: 0.78rem; }
.tp-notify-privacy { font-size: 0.7rem; color: rgba(245,238,220,0.68); }
.tp-back-to-main { font-size: 0.75rem; color: rgba(245,238,220,0.68); }

.tp-part-label,
.tp-discipline-number,
.tp-discipline-puzzle,
.tp-deepdive-label { font-size: 0.75rem; }
.tp-part-desc,
.tp-discipline-detail,
.tp-deepdive-detail,
.tp-intrigue-list li { font-size: 1rem; }
.tp-discipline-number { color: rgba(154,98,8,0.82); }
.tp-deepdive-detail,
.tp-intrigue-body,
.tp-intrigue-list li { color: rgba(245,238,220,0.86); }
.tp-notify-section .tp-notify-input::placeholder { color: rgba(60,50,40,0.65); }
.tp-notify-section .tp-notify-privacy { color: rgba(60,50,40,0.68); }

.tp-backstage-footer-links a { font-size: 0.82rem; color: rgba(245,238,220,0.82); }
.tp-backstage-footer-credit { font-size: 0.78rem; color: rgba(245,238,220,0.78); }
.tp-backstage-footer-credit a { color: rgba(245,238,220,0.84); }

/* ── READABILITY PRIORITY PASS ── */
.tp-section-eyebrow { font-size: 0.8rem; }
.tp-scope-character-text { font-size: 18px; line-height: 1.58; }
.tp-endorsement-card blockquote { font-size: 18px; line-height: 1.68; }
.tp-endorsement-card cite,
.tp-endorsement-featured cite { font-size: 0.82rem; }
.tp-endorsement-card cite span,
.tp-endorsement-featured cite span { font-size: 0.875rem; line-height: 1.45; }
.tp-author-photo-caption { font-size: 0.8rem; }
.tp-credential-tag { font-size: 0.82rem; }
.tp-email-submit { font-size: 0.82rem; }
.tp-email-privacy { font-size: 0.75rem; color: rgba(58,53,48,0.8); }
.tp-footer-links a { font-size: 0.82rem; color: rgba(255,255,255,0.82); }
.tp-footer-credit { font-size: 0.78rem; color: rgba(255,255,255,0.78); }
.tp-footer-credit a { color: rgba(255,255,255,0.84); }
.tp-notify-label { font-size: 0.8rem; color: rgba(245,238,220,0.8); }
.tp-notify-btn { font-size: 0.82rem; }
.tp-notify-privacy { font-size: 0.75rem; color: rgba(245,238,220,0.78); }
.tp-part-label,
.tp-discipline-number,
.tp-discipline-puzzle,
.tp-deepdive-label { font-size: 0.8rem; }
.tp-interview-media-meta { font-size: 0.8rem; }
.tp-interview-details { font-size: 0.84rem; }
.tp-dedicated-kicker { font-size: clamp(0.78rem, 0.92vw, 0.88rem); }

/* ── FUTURE-READY SUBSTACK TOUCHPOINTS ── */
.tp-author-substack-note,
.tp-email-substack-note,
.tp-notify-substack-note {
  font-family: var(--tp-font-sans);
  font-size: 0.78rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
}
.tp-author-substack-note {
  color: #1c1c1c;
  letter-spacing: 0.01em;
  border-top: 1px solid #3a353033;
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.65;
}
.tp-email-substack-note {
  color: rgba(58,53,48,0.76);
  margin: 0.7rem 0 0;
}
.tp-notify-substack-note {
  color: rgba(245,238,220,0.76);
  margin: 0.7rem 0 0;
}
.tp-notify-section .tp-notify-substack-note { color: rgba(60,50,40,0.72); }

.tp-footer-social-pending,
.tp-backstage-footer-social-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  color: rgba(255,255,255,0.55);
  opacity: 0.72;
}
.tp-footer-social-pending svg,
.tp-backstage-footer-social-pending svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
.tp-contact-substack-note {
  font-family: var(--tp-font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}

.tp-mobile-disclosure {
  display: none;
  margin: 1.35rem 0 0;
  padding: 0.7rem 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: var(--tp-gold-dark);
  font-family: var(--tp-font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.tp-mobile-disclosure-centered { margin-right: auto; margin-left: auto; }
.tp-mobile-disclosure-dark { color: var(--tp-gold-light); border-bottom-color: rgba(240, 192, 96, 0.55); }

/* The "show more" paragraph inside a section body needs its own top gap: it is a
   wrapper div, so the p + p rule that spaces the other paragraphs cannot reach
   it. Scoped to > .tp-mobile-extra so the card and list variants, which are grid
   or flex children spaced by gap, are left alone. */
.tp-section-body > .tp-mobile-extra { margin-top: 1.1rem; }

@media (max-width: 640px) {
  .tp-mobile-disclosure { display: inline-block; }
  /* The rule reads as a stray underline once the button is the only thing on
     its line in the narrow column. */
  .tp-mobile-disclosure-dark { border-bottom: 0; }
  /* Tighter box so the CTA label below it fits on one line. */
  .tp-book-club-cta-block { padding: 1.6rem 1.25rem; }
  .tp-book-club-cta-block .tp-btn-primary {
    display: block;
    width: 100%;
    padding: 0.95rem 1rem;
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-align: center;
  }
  .tp-mobile-extra { display: none !important; }
  .tp-mobile-extra.tp-mobile-extra-open { display: block !important; }
  .tp-scope-character.tp-mobile-extra.tp-mobile-extra-open,
  .tp-intrigue-list li.tp-mobile-extra.tp-mobile-extra-open { display: flex !important; }
  .tp-scope-characters { gap: 1rem; }
  .tp-endorsements-grid { gap: 1.35rem; }
  .tp-book-club-question { font-size: 1.35rem; line-height: 1.58; }
  .tp-discipline-card { padding: 1.5rem; }
  .tp-discipline-detail { font-size: 1rem; line-height: 1.65; }
  .tp-intrigue-list li { font-size: 1rem; line-height: 1.62; }
  .tp-interview-media-meta { font-size: 0.72rem; }
  .tp-dedicated-kicker { font-size: 0.78rem; }
}

/* ── CONTACT PAGE ── */
.tp-contact-page { min-height: 100vh; background: var(--tp-cream); }
.tp-contact-nav { background: rgba(10, 6, 2, 0.94); }
.tp-contact-hero {
  /* 68px clears the fixed nav; the rest follows the section rhythm. */
  padding: calc(var(--tp-section-pad-y) + 68px) 5% var(--tp-section-pad-y);
  background:
    radial-gradient(circle at 82% 26%, rgba(200,134,10,0.28), transparent 32%),
    linear-gradient(135deg, #120c05 0%, #241506 56%, #35250e 100%);
  color: var(--tp-cream);
}
.tp-contact-hero-inner { max-width: 1100px; margin: 0 auto; }
.tp-contact-eyebrow {
  font-family: var(--tp-font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tp-gold-light);
  margin-bottom: 1.1rem;
}
.tp-contact-hero h1 {
  max-width: 720px;
  margin: 0 0 1rem;
  font-family: var(--tp-font-display);
  font-size: clamp(3rem, 6vw, 5.2rem);
  line-height: 0.98;
  font-weight: 600;
}
.tp-contact-hero p:last-child {
  max-width: 670px;
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.55;
  color: rgba(247,242,232,0.9);
}
.tp-contact-content { padding: var(--tp-section-pad-y) 5%; background: var(--tp-cream); }
.tp-contact-layout { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); gap: 5.5rem; align-items: start; }
.tp-contact-context { padding-top: 1rem; }
.tp-contact-context > p:not(.tp-section-eyebrow):not(.tp-contact-response-note) { font-size: 1.1rem; line-height: 1.7; color: var(--tp-charcoal-mid); }
.tp-contact-reasons { margin: 2.3rem 0 2rem; border-top: 1px solid var(--tp-cream-dark); }
.tp-contact-reasons > div { padding: 1.1rem 0; border-bottom: 1px solid var(--tp-cream-dark); }
.tp-contact-reasons dt { font-family: var(--tp-font-sans); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tp-gold-dark); }
.tp-contact-reasons dd { margin: 0.35rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--tp-charcoal-mid); }
.tp-contact-response-note { font-family: var(--tp-font-sans); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.05em; color: var(--tp-brown); }
.tp-contact-form-wrap { background: var(--tp-white); border-top: 3px solid var(--tp-gold); box-shadow: 0 12px 35px rgba(28,28,28,0.08); }
.tp-contact-form { padding: 2.75rem; }
.tp-contact-form-heading { margin-bottom: 2rem; }
.tp-contact-form-heading .tp-section-eyebrow { margin-bottom: 0.65rem; }
.tp-contact-form h2 { margin: 0; font-family: var(--tp-font-display); font-size: 2.2rem; line-height: 1.1; font-weight: 600; color: var(--tp-charcoal); }
.tp-contact-form label { display: block; margin-top: 1.3rem; }
.tp-contact-form label > span { display: block; margin-bottom: 0.5rem; font-family: var(--tp-font-sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tp-charcoal-mid); }
.tp-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.tp-contact-grid label { margin-top: 0; }
.tp-contact-form input, .tp-contact-form select, .tp-contact-form textarea {
  width: 100%; border: 1px solid #C9C0AD; border-radius: 1px; background: #FFFEFA; color: var(--tp-charcoal); font-family: var(--tp-font-body); font-size: 1.08rem; line-height: 1.4; padding: 0.85rem 0.95rem; outline: none;
}
.tp-contact-form textarea { resize: vertical; min-height: 10rem; }
.tp-contact-form select { font-family: var(--tp-font-sans); font-size: 0.9rem; }
.tp-contact-form input:focus, .tp-contact-form select:focus, .tp-contact-form textarea:focus { border-color: var(--tp-gold); box-shadow: 0 0 0 3px rgba(200,134,10,0.12); }
.tp-contact-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tp-contact-submit { width: 100%; margin-top: 1.7rem; border: 0; border-radius: 2px; background: var(--tp-gold); color: #21170a; font-family: var(--tp-font-sans); font-size: 0.88rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; padding: 1rem; transition: transform 0.16s ease, background 0.16s ease; }
.tp-contact-submit:hover:not(:disabled) { background: var(--tp-gold-dark); color: var(--tp-white); }
.tp-contact-submit:active:not(:disabled) { transform: scale(0.97); }
.tp-contact-submit:disabled { cursor: wait; opacity: 0.72; }
.tp-contact-privacy { margin: 0.9rem 0 0; font-family: var(--tp-font-sans); font-size: 0.75rem; line-height: 1.5; color: rgba(58,53,48,0.74); }
.tp-contact-status { margin: 1rem 0 0; padding: 0.85rem 1rem; font-family: var(--tp-font-sans); font-size: 0.86rem; font-weight: 600; line-height: 1.5; }
.tp-contact-status-success { background: #E9F2E8; color: #244E32; border-left: 3px solid #4B7B55; }
.tp-contact-status-error { background: #F7E7E2; color: #7A2C20; border-left: 3px solid #A64C3B; }

@media (max-width: 960px) {
  .tp-contact-layout { grid-template-columns: 1fr; gap: 3rem; }
  .tp-contact-hero { padding-top: calc(var(--tp-section-pad-y) + 68px); }
}
@media (max-width: 640px) {
  .tp-contact-hero { padding: calc(var(--tp-section-pad-y) + 68px) 6% var(--tp-section-pad-y); }
  .tp-contact-hero h1 { font-size: clamp(2.8rem, 13vw, 4rem); }
  .tp-contact-hero p:last-child { font-size: 1.12rem; }
  .tp-contact-content { padding: var(--tp-section-pad-y) 6%; }
  .tp-contact-form { padding: 2rem 1.3rem; }
  .tp-contact-grid { grid-template-columns: 1fr; gap: 0; }
  .tp-contact-form h2 { font-size: 2rem; }
}

/* ══ BODY COPY SIZE ═══════════════════════════════════════════════════════════
   Every body paragraph reads at 18px on every page and every width. Placed
   last so it also supersedes the per-breakpoint body sizes above.

   Deliberately excluded: eyebrows, labels, cites, captions, credits and privacy
   notes (the 12-14px small print), and the paragraphs that are display type by
   design - the about questions, book-club questions, scope intro, hero taglines
   and the contact/thank-you/404 hero lede. Sizing those at 18px would flatten
   the hierarchy rather than fix it. */
.tp-section-body,
.tp-scope-block .tp-section-body,
.tp-author-bio,
.tp-book-club-body,
.tp-book-club-cta-body,
.tp-email-capture-body,
.tp-intrigue-body,
.tp-notify-section-body,
.tp-part-desc,
.tp-discipline-detail,
.tp-deepdive-detail,
.tp-dedicated-subhead,
.tp-hook-quote p,
.tp-interview-copy > p:not(.tp-interview-status),
.tp-contact-context > p:not(.tp-section-eyebrow):not(.tp-contact-response-note) {
  font-size: 18px;
}

/* ══ TABLET / MOBILE REFINEMENTS ══════════════════════════════════════════════
   Appended last so these win over the per-breakpoint blocks above. Everything
   here is a spacing or sizing correction for the narrow viewports only — the
   desktop design is untouched. */

/* Interview: once the copy column narrows the detail list wraps to one item per
   line, and the divider that separated them inline becomes a stray vertical
   rule beside each row. Drop the rule (and the indent it paid for) from tablet
   down; the gap alone separates them. */
@media (max-width: 1024px) {
  .tp-interview-details span + span {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 640px) {
  /* Footer: one link per row, and a tighter band around the whole thing. */
  .tp-backstage-footer { padding: 2.2rem 6%; }
  .tp-backstage-footer-logo { margin-bottom: 1rem; }
  .tp-backstage-footer-links {
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.1rem;
  }
  .tp-backstage-footer-social { margin-top: 0.9rem; gap: 1rem; }
  .tp-backstage-footer-credit { margin-top: 1rem; }

  /* BACKSTAGE hero: the 340px cover fills a phone screen top to bottom. Bring
     it down to the same width the other book covers use on mobile. */
  .tp-cover-img-wrap { max-width: 220px; }

  /* BACKSTAGE: the grids are the last thing in their section, so the trailing
     margin only doubles up on the section's own bottom padding. */
  .tp-parts-grid { margin-bottom: 0; }
  .tp-disciplines-grid { margin-bottom: 0; }
  /* The grid ends with an empty cell that balances the last row of the 4-up
     desktop layout. In one column it is only a dead row, and its gap would put
     back the space the margin-bottom above just removed. */
  .tp-disciplines-grid > div:empty { display: none; }

  /* BACKSTAGE: the underline under the "show more" buttons reads as a stray
     rule across the narrow column. */
  body.tp-page-backstage .tp-mobile-disclosure { border-bottom: 0; }
}



/* ============================================================
   IN CONVERSATION — revised interview fold
   Drop-in replacement for the old .tp-interview two-column block.
   Scoped under .tp-iv so nothing else on the page is affected.
============================================================ */
.tp-iv { position: relative; background: #15120f; }
.tp-iv-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--tp-section-pad-y) 5%;
}

/* ── heading block ── */
.tp-iv-head { margin-bottom: clamp(1.9rem, 3vw, 2.6rem); }
.tp-iv-head .tp-section-eyebrow { margin-bottom: 0.85rem; }
.tp-iv-head h2 {
  font-family: var(--tp-font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(2.1rem, 4.1vw, 3.35rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--tp-cream);
}
.tp-iv-intro {
  margin-top: 1rem;
  font-family: var(--tp-font-body, 'EB Garamond', Georgia, serif);
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.62;
  color: rgba(247, 242, 232, 0.7);
}

/* ── layout: feature + rail ── */
.tp-iv-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(310px, 1fr);
  gap: clamp(1.75rem, 3.2vw, 3.1rem);
  align-items: stretch;
}

/* ── FEATURE (key frame → YouTube) ── */
.tp-iv-feature {
  position: relative;
  display: block;
  overflow: hidden;
  height: 100%;
  min-height: clamp(300px, 26vw, 430px);
  background: #0e0b08;
  border: 1px solid rgba(240, 192, 96, 0.42);
  transition: border-color 0.35s ease, transform 0.35s ease;
}
.tp-iv-feature-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.45s ease;
  filter: saturate(0.94) brightness(0.9);
}
.tp-iv-feature:hover { border-color: rgba(240, 192, 96, 0.85); }
.tp-iv-feature:hover .tp-iv-feature-img { transform: scale(1.028); filter: saturate(1) brightness(1); }
.tp-iv-feature:focus-visible { outline: 2px solid var(--tp-gold-light); outline-offset: 3px; }
.tp-iv-feature-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 8, 6, 0.9) 0%, rgba(10, 8, 6, 0.32) 34%, rgba(10, 8, 6, 0) 62%);
  pointer-events: none;
}
/* centred play glyph */
.tp-iv-play {
  position: absolute; top: 46%; left: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: clamp(58px, 5.4vw, 78px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(245, 217, 138, 0.75);
  background: rgba(18, 13, 8, 0.5);
  backdrop-filter: blur(2px);
  color: var(--tp-gold-pale);
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}
.tp-iv-play svg { width: 44%; height: 44%; }
.tp-iv-feature:hover .tp-iv-play {
  background: var(--tp-gold);
  border-color: var(--tp-gold-pale);
  color: #15120f;
  transform: translate(-50%, -50%) scale(1.06);
}
/* single CTA + single runtime, baked into the card */
.tp-iv-feature-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: clamp(1rem, 1.8vw, 1.7rem) clamp(1.1rem, 2vw, 1.9rem);
}
.tp-iv-feature-label {
  font-family: var(--tp-font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(1.3rem, 1.9vw, 1.72rem);
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--tp-cream);
  border-bottom: 1px solid rgba(240, 192, 96, 0.5);
  padding-bottom: 2px;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.tp-iv-feature:hover .tp-iv-feature-label { color: var(--tp-gold-pale); border-color: var(--tp-gold-pale); }
.tp-iv-feature-meta {
  font-family: var(--tp-font-sans, Montserrat, system-ui, sans-serif);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--tp-gold-light);
  white-space: nowrap;
}
.tp-iv-feature-meta i { font-style: normal; opacity: 0.55; margin: 0 0.15em; }

/* ── RAIL ── */
.tp-iv-rail { align-self: stretch; }
.tp-iv-rail-title {
  display: flex; align-items: center; gap: 0.8rem;
  margin-bottom: 1.15rem;
  font-family: var(--tp-font-sans, Montserrat, system-ui, sans-serif);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--tp-gold-light);
}
.tp-iv-rail-title::after {
  content: ''; flex: 1 1 auto; height: 1px;
  background: linear-gradient(to right, rgba(240, 192, 96, 0.42), rgba(240, 192, 96, 0));
}
.tp-iv-list { display: flex; flex-direction: column; gap: 0.7rem; }

.tp-iv-clip {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
  padding: 0.72rem 0.85rem 0.72rem 0.72rem;
  text-align: left;
  background: rgba(255, 248, 238, 0.028);
  border: 1px solid rgba(240, 192, 96, 0.2);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.tp-iv-clip:hover {
  background: rgba(240, 192, 96, 0.072);
  border-color: rgba(240, 192, 96, 0.6);
  transform: translateX(3px);
}
.tp-iv-clip:focus-visible { outline: 2px solid var(--tp-gold-light); outline-offset: 2px; }

/* vertical 9:16 thumbnail */
.tp-iv-thumb {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #0e0b08;
  border: 1px solid rgba(240, 192, 96, 0.26);
}
.tp-iv-thumb img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.86); transition: filter 0.3s ease; }
.tp-iv-clip:hover .tp-iv-thumb img { filter: brightness(1.02); }
.tp-iv-thumb-play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(247, 242, 232, 0.92);
  background: rgba(10, 8, 6, 0.22);
  transition: color 0.3s ease, background 0.3s ease;
}
.tp-iv-thumb-play svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)); }
.tp-iv-clip:hover .tp-iv-thumb-play { color: var(--tp-gold-pale); background: rgba(10, 8, 6, 0.06); }

.tp-iv-clip-copy {
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 0.34rem;
  min-height: 100%;
}
.tp-iv-clip-num {
  font-family: var(--tp-font-sans, Montserrat, system-ui, sans-serif);
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(240, 192, 96, 0.62);
}
.tp-iv-clip-title {
  font-family: var(--tp-font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--tp-cream);
  transition: color 0.3s ease;
}
.tp-iv-clip:hover .tp-iv-clip-title { color: var(--tp-gold-pale); }
.tp-iv-clip-time {
  font-family: var(--tp-font-sans, Montserrat, system-ui, sans-serif);
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.15em;
  color: rgba(247, 242, 232, 0.5);
}

/* ── LIGHTBOX ── */
.tp-iv-modal { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: max(4vh, 3.6rem) 5vw 4vh; }
.tp-iv-modal[hidden] { display: none !important; }
.tp-iv-modal-backdrop { position: absolute; inset: 0; background: rgba(8, 6, 4, 0.9); backdrop-filter: blur(6px); }
.tp-iv-modal-box {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  animation: tp-iv-pop 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes tp-iv-pop { from { opacity: 0; transform: scale(0.96) translateY(10px); } to { opacity: 1; transform: none; } }
.tp-iv-modal-video {
  width: auto;
  max-width: min(88vw, 46vh);   /* 9:16 — height-bound, never wider than it should be */
  max-height: 78vh;
  aspect-ratio: 9 / 16;
  background: #000;
  border: 1px solid rgba(240, 192, 96, 0.4);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
}
.tp-iv-modal-cap { text-align: center; }
.tp-iv-modal-title {
  font-family: var(--tp-font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-weight: 400;
  color: var(--tp-cream);
}
.tp-iv-modal-time {
  margin-top: 0.4rem;
  font-family: var(--tp-font-sans, Montserrat, system-ui, sans-serif);
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tp-gold-light);
}
.tp-iv-modal-time i { font-style: normal; opacity: 0.5; margin: 0 0.3em; }
.tp-iv-modal-media {
  position: relative;
  display: flex;
  max-width: 100%;
}
.tp-iv-modal-close {
  /* Sat on the player's top-right corner, one gap above it. Anchoring to the
     bottom edge rather than a negative top keeps that gap identical whatever
     the button ends up measuring. */
  position: absolute; bottom: calc(100% + 0.4rem); right: 0;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  color: var(--tp-cream);
  border: 1px solid rgba(240, 192, 96, 0.45);
  background: rgba(18, 13, 8, 0.7);
  transition: background 0.25s ease, color 0.25s ease;
}
.tp-iv-modal-close:hover { background: var(--tp-gold); color: #15120f; }
.tp-iv-modal-close svg { width: 18px; height: 18px; }

/* ── RESPONSIVE ── */
@media (max-width: 1080px) {
  .tp-iv-grid { grid-template-columns: 1fr; gap: 2rem; }
  .tp-iv-feature { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .tp-iv-list { flex-direction: row; gap: 0.7rem; }
  .tp-iv-list li { flex: 1 1 0; }
  .tp-iv-clip { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0.7rem; height: 100%; }
  .tp-iv-thumb { align-self: start; }
  .tp-iv-thumb { aspect-ratio: 4 / 5; }
  .tp-iv-thumb-play svg { width: 26px; height: 26px; }
  .tp-iv-clip-copy { min-height: 0; justify-content: flex-start; }
}
@media (max-width: 700px) {
  .tp-iv-list { flex-direction: column; }
  .tp-iv-clip { grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: auto; gap: 0.9rem; }
  .tp-iv-thumb { aspect-ratio: 9 / 16; }
  .tp-iv-thumb-play svg { width: 20px; height: 20px; }
  .tp-iv-feature-bar { padding: 1rem 1.1rem; }
  .tp-iv-modal-video { max-width: 92vw; max-height: 68vh; }
}
@media (prefers-reduced-motion: reduce) {
  .tp-iv-feature-img, .tp-iv-play, .tp-iv-clip, .tp-iv-modal-box { transition: none; animation: none; }
}


/* ── Additions for the WordPress build of the fold ──
   The feature card is a <button> when the full interview opens in the
   lightbox, and an <a> when it opens on YouTube. The button needs the few
   resets an anchor does not, and the lightbox needs a 16:9 mode for an
   embedded player alongside the 9:16 mode the vertical excerpts use. */
button.tp-iv-feature,
button.tp-iv-clip {
  width: 100%;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
}
button.tp-iv-feature { padding: 0; text-align: left; }

/* With only one column filled — no full-interview card, or no excerpts — the
   remaining one takes the whole width instead of sitting in a half. */
.tp-iv-grid-single { grid-template-columns: minmax(0, 1fr); }
.tp-iv-grid-single .tp-iv-feature { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
.tp-iv-grid-single .tp-iv-list { flex-direction: row; flex-wrap: wrap; }
.tp-iv-grid-single .tp-iv-list li { flex: 1 1 260px; }

/* An excerpt with nothing to play is not a trigger, so it loses the hover and
   the play glyph but keeps the card. */
.tp-iv-clip-static { cursor: default; }
.tp-iv-clip-static:hover { background: rgba(255, 248, 238, 0.028); border-color: rgba(240, 192, 96, 0.2); transform: none; }

/* 16:9 embed inside the lightbox (the full interview). */
.tp-iv-modal-frame {
  position: relative;
  width: min(92vw, 1180px);
  aspect-ratio: 16 / 9;
  max-height: 78vh;
  background: #000;
  border: 1px solid rgba(240, 192, 96, 0.4);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
}
.tp-iv-modal-frame iframe,
.tp-iv-modal-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.tp-iv-modal-frame[hidden],
.tp-iv-modal-video[hidden] { display: none !important; }

/* The excerpt rail keeps its own scroll on very short landscape screens so a
   lightbox trigger is always reachable. */
@media (max-width: 1080px) and (min-width: 701px) {
  .tp-iv-list { flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .tp-iv-clip { grid-template-columns: 52px minmax(0, 1fr); gap: 0.75rem; padding: 0.6rem; }
  .tp-iv-modal { padding: max(3vh, 3.2rem) 4vw 3vh; }
}