/* ========== P3 Atrium base (dark-first; no light parchment defaults) ========== */
:root {
  --tvih-void: #000000;
  --tvih-gold: #d4a373;
  --tvih-text: #ffffff;
  --tvih-muted: #999999;
}
html, body {
  background: var(--tvih-void) !important;
  color: var(--tvih-text) !important;
  font-family: 'Atkinson Hyperlegible', Georgia, serif !important;
}
/* Headings: Cinzel, no parchment border thrash — sections opt into borders */
h1, h2, h3, h5 {
  font-family: 'Cinzel', serif !important;
  color: var(--tvih-text) !important;
  text-shadow: none !important;
  border-bottom: none !important;
  padding-bottom: 0;
}

/* ========== P0 Hero + Free Book 1 band ========== */
.tvih-hero {
  position: relative;
  overflow: hidden;
  height: 88vh;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Instant first paint — never sit on pure black while the mp4 buffers */
  background-color: #000;
  background-image: url('assets/media/videos/posters/hero-video-index2.jpg');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}
.tvih-hero #hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: 0;
  background-color: transparent;
  /* Soft handoff once the real stream has a frame */
  opacity: 0;
  transition: opacity 0.18s ease;
}
.tvih-hero #hero-video.is-ready {
  opacity: 1;
}
/* Bottom-heavy scrim — video stays vivid up top, type stays legible.
   Shared by top hero + footer hero for consistent darkening. */
.tvih-hero-scrim,
.tvih-footer-hero .tvih-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.25) 0%,
      rgba(0,0,0,0.15) 28%,
      rgba(0,0,0,0.55) 58%,
      rgba(0,0,0,0.88) 82%,
      #000 100%);
}
.tvih-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.25rem 3.5rem;
  text-align: center;
}
/* Animated listen-beat wave above hero title (bars mounted by sidebar-dismiss.js) */
.tvih-hero-wave {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0;
  /* height ×2 from prior clamp(22px, 3.5vw, 32px) */
  height: clamp(44px, 7vw, 64px);
  width: min(18.5rem, 48vw); /* visible on first paint; JS snaps to 45% of title */
  max-width: 100%;
  margin: 0 auto 0.4rem; /* centered; tight gap above h1 */
  box-sizing: border-box;
  overflow: hidden;
}
.tvih-hero-wave span {
  display: block;
  flex: 0 0 auto;
  width: clamp(3px, 0.45vw, 5px);
  height: 100%;
  border-radius: 2px;
  background: rgba(212, 163, 115, 0.4);
  transform-origin: bottom center;
  transform: scaleY(0.22);
  opacity: 0.7;
  animation-name: tvih-nav-wave-bar;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}
.tvih-hero-wave span:nth-child(odd) {
  background: rgba(212, 163, 115, 0.58);
}
.tvih-hero-wave span.is-accent,
.tvih-hero-wave span:nth-child(4),
.tvih-hero-wave span:nth-child(7) {
  background: #d4a373;
  box-shadow: 0 0 10px rgba(212, 163, 115, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .tvih-hero-wave span {
    animation: none !important;
    transform: scaleY(0.55);
    opacity: 0.85;
  }
}
@keyframes tvih-nav-wave-bar {
  0%, 100% { transform: scaleY(0.22); opacity: 0.7; }
  35%      { transform: scaleY(var(--wave-peak, 0.85)); opacity: 1; }
  55%      { transform: scaleY(calc(var(--wave-peak, 0.85) * 0.55)); opacity: 0.85; }
  75%      { transform: scaleY(calc(var(--wave-peak, 0.85) * 0.88)); opacity: 1; }
}
.tvih-hero-content h1 {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0.75rem !important;
  font-size: clamp(1.85rem, 4.5vw, 2.75rem) !important;
  color: #fff !important; /* top hero: white + glow (strips stay gray) */
  text-shadow: none !important;
}
.tvih-hero-tagline {
  font-family: 'Cinzel', serif !important;
  font-size: clamp(1.05rem, 2.2vw, 1.28rem) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: #e8e0d4 !important;
  line-height: 1.45;
  max-width: 34em;
  margin: 0 auto 1.5rem;
  text-shadow: 0 2px 18px rgba(0,0,0,0.85);
  border: none !important;
  padding: 0 !important;
}
.tvih-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1rem;
  margin-bottom: 0.85rem;
}
/* Primary: solid gold — one clear action */
.hero-auth-btn-primary {
  background: #d4a373 !important;
  border: 1px solid #d4a373 !important;
  color: #111 !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  box-shadow: 0 0 18px rgba(212, 163, 115, 0.45) !important;
  text-shadow: none !important;
  transition: all 0.2s ease;
  padding: 0.7rem 1.5rem !important;
}
.hero-auth-btn-primary:hover {
  background: #e0b484 !important;
  border-color: #e0b484 !important;
  color: #000 !important;
  box-shadow: 0 0 28px rgba(212, 163, 115, 0.7) !important;
  transform: translateY(-1px);
}
/* Secondary: glass outline */
.hero-auth-btn {
  background: transparent !important;
  border: 1px solid #d4a373 !important;
  color: #fff !important;
  text-shadow: 0 0 6px #d4a373, 0 0 12px #d4a373 !important;
  box-shadow: 0 0 8px rgba(212, 163, 115, 0.3) !important;
  transition: all 0.2s ease;
  font-family: 'Cinzel', serif !important;
  padding: 0.7rem 1.35rem !important;
}
.hero-auth-btn:hover {
  background: rgba(212, 163, 115, 0.12) !important;
  box-shadow: 0 0 16px #d4a373 !important;
  text-shadow: 0 0 8px #d4a373, 0 0 20px #d4a373 !important;
  transform: translateY(-1px);
  color: #fff !important;
}
.hero-auth-link {
  display: inline-block;
  margin-left: 0.15rem;
  font-family: 'Atkinson Hyperlegible', Georgia, serif;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.72) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 163, 115, 0.45);
  transition: color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  padding: 0.2rem 0;
}
.hero-auth-link:hover {
  color: #d4a373 !important;
  border-bottom-color: #d4a373;
}
.tvih-hero-proof {
  font-size: 0.88rem !important;
  color: rgba(255,255,255,0.62) !important;
  letter-spacing: 0.04em;
  margin: 0.35rem 0 0 !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
}
.tvih-hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 3;
  color: #d4a373;
  opacity: 0.85;
  font-size: 1.1rem;
  animation: tvih-scroll-nudge 2.2s ease-in-out infinite;
  text-decoration: none;
}
.tvih-hero-scroll:hover { color: #fff; opacity: 1; }
@keyframes tvih-scroll-nudge {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.55; }
  50% { transform: translateX(-50%) translateY(6px); opacity: 1; }
}

/*
 * Free-start landing: gold top border of #free-start sits flush with the
 * bottom edge of the fixed header. --tvih-header-h is measured in JS.
 */
:root {
  --tvih-header-h: 4rem; /* fallback until measure */
}
/* Only one offset (margin OR padding) — both stack and overshoot */
#free-start,
#featured-works,
#gift,
#letter {
  scroll-margin-top: var(--tvih-header-h);
}

/* Parked. Restore: drop this rule and `hidden` on #free-start. */
#free-start.tvih-free-band {
  display: none !important;
}
/* Free Book 1 band */
.tvih-free-band {
  background: #000;
  border-top: 1px solid rgba(212, 163, 115, 0.28);
  border-bottom: 1px solid rgba(212, 163, 115, 0.28);
  padding: 2.75rem 0 3rem;
}
.tvih-free-band .tvih-free-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.25rem;
  text-align: center;
}
/*
 * Free-start title: identical type to .tvih-hear-heading (“Bite-Sized Samples”).
 * Sentence case at the same rem reads smaller than uppercase Cinzel — use the
 * same uppercase + letter-spacing so size matches for real.
 */
.tvih-free-band h2.tvih-hear-heading,
.tvih-free-band #free-start-heading {
  font-family: 'Cinzel', serif !important;
  color: #999999 !important;
  /* Thin gold underline (width of title only — parent is text-align:center) */
  display: inline-block !important;
  width: fit-content !important;
  max-width: 100% !important;
  border-bottom: 1px solid #d4a373 !important;
  padding-bottom: 0.35rem !important;
  padding-top: 0 !important;
  text-shadow: none !important;
  font-size: 1.15rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  line-height: inherit !important;
  margin: 0 0 0.75rem !important; /* top 0 — kicker supplies the stack gap */
}
/* Supporting lines stay muted Atkinson (hero-glow on “free to read” is styled below) */
.tvih-free-band .tvih-free-sub {
  color: #999 !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-weight: 400;
  font-style: normal;
}
.tvih-free-band .tvih-free-sub *:not(.hero-glow) {
  color: #999 !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-weight: 400;
  font-style: normal;
}
/* 1) Promise — brand gold, stands apart from H2 above + free-claim below */
.tvih-free-band .tvih-free-lead,
.tvih-free-band .tvih-free-lead * {
  color: #d4a373 !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 400;
  font-style: normal;
}
.tvih-free-band .tvih-free-lead {
  max-width: 22em;
  margin: 0 auto 1rem;
  padding: 0.15rem 0 0.85rem;
  line-height: 1.4;
  font-size: clamp(1.22rem, 2.6vw, 1.48rem);
  letter-spacing: 0.02em;
  text-shadow: 0 0 18px rgba(212, 163, 115, 0.22);
  border-bottom: 1px solid rgba(212, 163, 115, 0.22);
}
/* 2) Free claim — quieter beat under the promise */
.tvih-free-band .tvih-free-sub {
  max-width: 30em;
  margin: 0.85rem auto 1.25rem;
  line-height: 1.45;
  font-size: 1.15rem;
}
/* Begin here — “free to read” full hero glow (white + gold pulse) */
.tvih-free-band .tvih-free-sub .hero-glow,
.dark-mode .tvih-free-band .tvih-free-sub .hero-glow {
  color: #fff !important;
  text-shadow:
    0 0 10px rgba(212, 163, 115, 0.65),
    0 0 18px rgba(212, 163, 115, 0.65) !important;
  animation: pulseGlowDarkHero 2.4s ease-in-out infinite !important;
}
/* 3) List bridge — quieter label sitting on the benefits stack */
.tvih-free-band .tvih-free-unlock {
  max-width: 30em;
  margin: 0 auto 0.65rem;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #7a736a !important;
  line-height: 1.4;
}
/* Membership benefits — single col, centered (mirrors signup modal) */
.tvih-free-benefits {
  list-style: none;
  margin: 0 auto 1.35rem;
  padding: 0;
  max-width: 24em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
.tvih-free-benefits li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 1.05rem;
  line-height: 1.4;
  color: #b8b0a4 !important;
}
.tvih-free-benefits li > i {
  flex: 0 0 auto;
  width: 1.15em;
  color: #d4a373;
  font-size: 0.95em;
  line-height: 1;
  text-align: center;
}
.tvih-free-close {
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 1.12rem;
  color: #999 !important;
  max-width: 34em;
  margin: 0 auto 1.75rem;
  line-height: 1.5;
}
.tvih-free-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}
@media (min-width: 768px) {
  .tvih-free-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (min-width: 992px) {
  .tvih-free-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}
.tvih-free-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 8.5rem;
  padding: 1.15rem 0.85rem 1.1rem;
  background: #0a0a0a;
  border: 1px solid rgba(212, 163, 115, 0.55);
  border-radius: 10px;
  color: #fff !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.tvih-free-tile:hover {
  border-color: #d4a373;
  background: rgba(212, 163, 115, 0.08);
  box-shadow: 0 0 22px rgba(212, 163, 115, 0.22);
  transform: translateY(-2px);
  color: #fff !important;
}
.tvih-free-tile .tvih-free-work {
  font-family: 'Cinzel', serif;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
  margin-bottom: 0.2rem;
}
.tvih-free-tile .tvih-free-author {
  display: block;
  font-family: 'Atkinson Hyperlegible', Georgia, serif;
  font-size: 0.8rem;
  font-style: italic;
  color: #b8b0a4 !important;
  line-height: 1.3;
  margin: 0 0 0.55rem;
  padding: 0 0.15rem 0.45rem;
  border-bottom: 1px solid #d4a373;
}
.tvih-free-tile .tvih-free-meta {
  font-size: 0.78rem;
  color: #999;
  font-family: 'Atkinson Hyperlegible', sans-serif;
}
.tvih-free-tile .tvih-free-meta i {
  color: #5cb85c;
  margin-right: 0.25rem;
}
.tvih-free-foot {
  margin-top: 1.35rem;
  font-size: 1.05rem;
  color: #777;
  font-family: 'Atkinson Hyperlegible', sans-serif;
}
.tvih-free-foot a {
  color: #d4a373 !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 163, 115, 0.4);
  cursor: pointer;
}
.tvih-free-foot a:hover {
  border-bottom-color: #d4a373;
}


/* ========== P1 Hear strip + Featured lead/shelf ========== */
.tvih-hear-strip {
  background: #050505;
  border-bottom: 1px solid rgba(212, 163, 115, 0.22);
  padding: 1.75rem 0 1.85rem;
}
.tvih-hear-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 1.25rem;
  text-align: center;
}
.tvih-hear-heading {
  font-family: 'Cinzel', serif !important;
  color: #999999 !important;
  /* Thin gold underline — hug title width, centered in .tvih-hear-inner */
  display: inline-block !important;
  width: fit-content !important;
  max-width: 100% !important;
  border-bottom: 1px solid #d4a373 !important;
  padding-bottom: 0.35rem !important;
  padding-top: 0 !important;
  text-shadow: none !important;
  font-size: 1.15rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  margin: 0 0 0.55rem !important; /* top 0 — kicker supplies the stack gap; room under gold rule */
}
.tvih-hear-sub {
  color: #777 !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 0.92rem;
  margin: 0 0 1rem;
}
/* 2×2 (or 4-across on wide) so no orphan chip sits off optical center */
.tvih-hear-chips {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: center;
  justify-items: center;
  gap: 0.55rem;
  margin: 0 auto 1rem;
  width: max-content;
  max-width: 100%;
}
@media (min-width: 1100px) {
  .tvih-hear-chips {
    grid-template-columns: repeat(4, max-content);
  }
}
.tvih-hear-chip {
  display: inline-flex;
  /* center wave + avatar + name as one narrator beat */
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: 'Cinzel', serif;
  font-size: clamp(0.9rem, 1.85vw, 1.05rem);
  letter-spacing: 0.04em;
  padding: 0.58rem 1.15rem 0.58rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(212, 163, 115, 0.55);
  background: #0a0a0a;
  color: #e8e0d4;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
  max-width: 100%;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
}
.tvih-hear-chip-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex: 0 0 auto;
  border: 1px solid rgba(212, 163, 115, 0.45);
  background: #111;
  display: block;
}
@media (max-width: 575.98px) {
  .tvih-hear-chips {
    grid-template-columns: 1fr;
    width: 100%;
    justify-items: stretch;
  }
  .tvih-hear-chip {
    white-space: normal;
    width: 100%;
    max-width: 22rem;
    margin-inline: auto;
    justify-content: center;
  }
}
.tvih-hear-chip:hover {
  border-color: #d4a373;
  color: #fff;
  box-shadow: 0 0 16px rgba(212, 163, 115, 0.2);
}
.tvih-hear-chip.is-active,
.tvih-hear-chip[aria-pressed="true"] {
  background: rgba(212, 163, 115, 0.16);
  border-color: #d4a373;
  color: #fff;
  box-shadow: 0 0 20px rgba(212, 163, 115, 0.28);
}
/* Mini sound wave — bottoms on the text baseline (same line as glyph bottoms) */
.tvih-hear-wave {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  /* Match avatar height band so wave sits next to face + name */
  height: 18px;
  width: 1.15em;
  flex: 0 0 auto;
  line-height: 0;
  margin: 0;
  padding: 0;
  /* Flex baseline of a non-text item = bottom content edge → lines up with text baseline */
  vertical-align: baseline;
}
.tvih-hear-wave i {
  display: block;
  width: 2.5px;
  border-radius: 1px;
  background: #d4a373;
  opacity: 0.85;
  height: 40%;
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
  transform-origin: bottom center; /* pulse grows upward from the shared baseline */
  animation: tvih-hear-wave-idle 1.4s ease-in-out infinite;
}
.tvih-hear-wave i:nth-child(1) { height: 35%; animation-delay: 0s; }
.tvih-hear-wave i:nth-child(2) { height: 70%; animation-delay: 0.15s; }
.tvih-hear-wave i:nth-child(3) { height: 50%; animation-delay: 0.3s; }
.tvih-hear-wave i:nth-child(4) { height: 85%; animation-delay: 0.45s; }
@keyframes tvih-hear-wave-idle {
  0%, 100% { transform: scaleY(0.55); opacity: 0.55; }
  50% { transform: scaleY(1); opacity: 1; }
}
.tvih-hear-chip:hover .tvih-hear-wave i,
.tvih-hear-chip.is-active .tvih-hear-wave i,
.tvih-hear-chip[aria-pressed="true"] .tvih-hear-wave i {
  animation-duration: 0.7s;
  opacity: 1;
  box-shadow: 0 0 6px rgba(212, 163, 115, 0.55);
}
.tvih-hear-chip-label {
  flex: 0 1 auto;
  min-width: 0;
  line-height: 1.2;
  padding: 0;
  margin: 0;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .tvih-hear-wave i {
    animation: none;
    transform: none;
    opacity: 0.85;
  }
}
/* Gold frame — only when sample text is present (.is-open) */
.tvih-hear-frame {
  position: relative;
  max-width: 46em;
  margin: 0.35rem auto 0;
  padding: 0;
  text-align: center;
  border: none;
  background: transparent;
  box-shadow: none;
}
.tvih-hear-frame.is-open {
  padding: 1.25rem 1.5rem 1.3rem;
  border: 1px solid rgba(212, 163, 115, 0.42);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(212, 163, 115, 0.07) 0%, rgba(0, 0, 0, 0.18) 48%, rgba(212, 163, 115, 0.04) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(212, 163, 115, 0.12),
    0 0 28px rgba(212, 163, 115, 0.06);
}
/* Inner gold rail + corner pips only while open */
.tvih-hear-frame.is-open::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(212, 163, 115, 0.18);
  border-radius: 3px;
  pointer-events: none;
}
.tvih-hear-frame.is-open::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(#d4a373, #d4a373) top left / 10px 1px no-repeat,
    linear-gradient(#d4a373, #d4a373) top left / 1px 10px no-repeat,
    linear-gradient(#d4a373, #d4a373) top right / 10px 1px no-repeat,
    linear-gradient(#d4a373, #d4a373) top right / 1px 10px no-repeat,
    linear-gradient(#d4a373, #d4a373) bottom left / 10px 1px no-repeat,
    linear-gradient(#d4a373, #d4a373) bottom left / 1px 10px no-repeat,
    linear-gradient(#d4a373, #d4a373) bottom right / 10px 1px no-repeat,
    linear-gradient(#d4a373, #d4a373) bottom right / 1px 10px no-repeat;
  opacity: 0.75;
}
.tvih-hear-cite {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  margin: 0 0 0.75rem !important;
  font-style: normal !important;
  line-height: 1.3;
}
.tvih-hear-cite[hidden] { display: none !important; }
/* Author · work (above chapter) */
.tvih-hear-cite-work {
  font-family: 'Cinzel', serif !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e8e0d4 !important;
  line-height: 1.35;
}
/* Book / Chapter line */
.tvih-hear-cite-ch {
  font-family: 'Cinzel', serif !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d4a373 !important;
  line-height: 1.3;
}
.tvih-hear-cite-work:empty,
.tvih-hear-cite-ch:empty {
  display: none !important;
}
/* (old single-line · flanking dots removed — cite is work + chapter stack) */
.tvih-hear-line {
  position: relative;
  z-index: 1;
  min-height: 0;
  max-width: none;
  margin: 0 auto;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  /* ~10% larger than prior clamp(0.98rem, 2vw, 1.12rem) */
  font-size: clamp(1.08rem, 2.2vw, 1.23rem);
  font-style: italic;
  font-weight: 400;
  color: #999 !important;
  line-height: 1.55;
}
/* Idle placeholder sits unframed */
.tvih-hear-frame:not(.is-open) .tvih-hear-line {
  min-height: 2.6em;
  max-width: 44em;
}
.tvih-hear-line,
.tvih-hear-line .word,
.tvih-hear-line em,
.tvih-hear-line .tvih-hear-placeholder {
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
}
.tvih-hear-line .word {
  color: #999 !important;
  transition: color 0.1s ease, text-shadow 0.1s ease;
}
.tvih-hear-line .word.highlight {
  color: var(--text) !important;
  text-shadow: 0 0 6px #d4a373, 0 0 12px #d4a373 !important;
  animation: tvihPreviewHighlightPulse 1.5s ease-in-out infinite;
  background: transparent !important;
}
@media (prefers-reduced-motion: reduce) {
  .tvih-hear-line .word.highlight { animation: none; }
}
.tvih-hear-placeholder { color: #555 !important; font-style: normal; font-size: 1.01rem; }
@media (max-width: 575.98px) {
  .tvih-hear-frame.is-open { padding: 1.1rem 1.15rem 1.15rem; }
}
.tvih-hear-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 0.75rem;
}
.tvih-hear-stop {
  margin-top: 0;
  background: transparent;
  border: 1px solid #444;
  color: #999;
  font-size: 0.8rem;
  padding: 0.3rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
}
.tvih-hear-stop:hover { border-color: #d4a373; color: #d4a373; }
.tvih-hear-free {
  display: inline-flex;
  align-items: center;
  margin-top: 0;
  background: transparent;
  border: 1px solid rgba(212, 163, 115, 0.55);
  color: #d4a373 !important;
  font-size: 0.8rem;
  padding: 0.3rem 0.75rem;
  border-radius: 6px;
  text-decoration: none !important;
  line-height: 1.2;
}
/* Unlock icon: green (free), not gold — text/border stay brand gold */
.tvih-hear-free i,
.tvih-hear-free .fa-unlock {
  color: #28a745 !important;
}
.tvih-hear-free:hover {
  border-color: #d4a373;
  color: #fff !important;
  background: rgba(212, 163, 115, 0.1);
}
.tvih-hear-free:hover i,
.tvih-hear-free:hover .fa-unlock {
  color: #28a745 !important; /* stay green on hover */
}
.tvih-hear-free[hidden] { display: none !important; }

.tvih-featured-section {
  padding-top: 2.5rem !important;
  padding-bottom: 1rem !important;
}
.tvih-section-title {
  font-family: 'Cinzel', serif !important;
  color: #999999 !important;
  /* Thin gold underline — hug title width, centered even if parent isn’t text-align:center */
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-bottom: 1px solid #d4a373 !important;
  padding-bottom: 0.35rem !important;
  padding-top: 0 !important;
  text-shadow: none !important;
  font-size: clamp(1.4rem, 3vw, 1.85rem) !important;
  margin-top: 0 !important;
  margin-bottom: 0.55rem !important;
  text-align: center !important;
}
.tvih-section-lead {
  color: #777 !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  max-width: 28em;
  margin: 0 auto 2rem;
  font-size: 0.98rem;
}
/* Open shelves (and other strip leads) — “free to read” hero glow */
.tvih-section-lead .hero-glow,
.dark-mode .tvih-section-lead .hero-glow {
  color: #fff !important;
  text-shadow:
    0 0 10px rgba(212, 163, 115, 0.65),
    0 0 18px rgba(212, 163, 115, 0.65) !important;
  animation: pulseGlowDarkHero 2.4s ease-in-out infinite !important;
}

/* Founder letter — occupies the parked Begin here slot (after hero). */
#letter.tvih-letter {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 2.75rem 1.25rem 3rem;
  background: #000;
  border-top: 1px solid rgba(212, 163, 115, 0.28);
  border-bottom: 1px solid rgba(212, 163, 115, 0.28);
  box-sizing: border-box;
}
#letter.tvih-letter .tvih-letter-inner {
  max-width: 46em;
  margin: 0 auto;
}
.content #letter.tvih-letter .tvih-contact-kicker,
#letter.tvih-letter .tvih-contact-kicker {
  margin-top: 0 !important;
  margin-bottom: 0.85rem !important;
}
/* Collapsed preview — ~5–6 lines, gold-black fade hinting at more. */
#letter.tvih-letter .tvih-letter-body.is-collapsed {
  max-height: 16.5rem;
  overflow: hidden;
  cursor: pointer;
}
#letter.tvih-letter .tvih-letter-body {
  transition: max-height 0.45s ease;
}
#letter.tvih-letter .tvih-letter-body.is-expanded {
  max-height: 90rem;
  cursor: default;
}
#letter.tvih-letter .tvih-letter-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5.5rem;
  z-index: 3;
  pointer-events: none;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(
    180deg,
    rgba(8, 6, 4, 0) 0%,
    rgba(8, 6, 4, 0.55) 45%,
    rgba(8, 6, 4, 0.96) 100%
  );
  opacity: 1;
  transition: opacity 0.35s ease;
}
#letter.tvih-letter .tvih-letter-body.is-expanded .tvih-letter-fade {
  opacity: 0;
}
@media (max-width: 575.98px) {
  #letter.tvih-letter .tvih-letter-body.is-collapsed { max-height: 15.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  #letter.tvih-letter .tvih-letter-body,
  #letter.tvih-letter .tvih-letter-fade { transition: none; }
}

.tvih-lead {
  border: 1px solid rgba(212, 163, 115, 0.35);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1.75rem;
  background:
    radial-gradient(ellipse at 85% 0%, rgba(212, 163, 115, 0.046), transparent 55%),
    linear-gradient(180deg, rgba(20, 16, 12, 0.95), rgba(0, 0, 0, 0.98));
  box-shadow:
    0 0 40px rgba(212, 163, 115, 0.028),
    0 4px 12px rgba(0, 0, 0, 0.4);
}
/* Media on right (copy left): wash from top-left so glow sits on the copy column */
.tvih-lead.tvih-lead--media-right {
  background:
    radial-gradient(ellipse at 15% 0%, rgba(212, 163, 115, 0.046), transparent 55%),
    linear-gradient(180deg, rgba(20, 16, 12, 0.95), rgba(0, 0, 0, 0.98));
}
.tvih-lead-grid {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 992px) {
  .tvih-lead-grid { grid-template-columns: 1.15fr 1fr; min-height: 380px; }
}
.tvih-lead-media {
  position: relative;
  min-height: 260px;
  height: 320px;
  overflow: hidden;
  background-color: #000;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}
@media (min-width: 992px) {
  .tvih-lead-media {
    height: auto;
    min-height: 100%;
    max-height: none;
    align-self: stretch;
  }
}
/* Per-work poster BGs (paint before video bytes) */
#work-sallust-catiline .tvih-lead-media {
  background-image: url('assets/media/videos/posters/catiline.jpg');
  background-size: cover;
  background-position: center 48%;
}
/* Featured lead: pan crop down so upper-mid of Catiline video fills the hero band */
#work-sallust-catiline .tvih-lead-media .tvih-card-video,
#work-sallust-catiline.is-expanded .tvih-lead-media .tvih-card-video,
#work-sallust-catiline.is-preview-playing .tvih-lead-media .tvih-card-video {
  object-position: center 48%;
}
#work-caesar .tvih-lead-media {
  background-image: url('assets/media/videos/posters/caesar.jpg');
}
#work-caesar-cw .tvih-lead-media {
  background-image: url('assets/media/videos/posters/rubicon.jpg');
}
#work-josephus .tvih-lead-media {
  background-image: url('assets/media/videos/posters/siege-1.jpg');
}
#work-sallust-jugurtha .tvih-lead-media {
  background-image: url('assets/media/videos/posters/jugurtha.jpg');
  background-size: cover;
  background-position: center center;
}
#work-sallust-jugurtha .tvih-lead-media .tvih-card-video,
#work-sallust-jugurtha.is-expanded .tvih-lead-media .tvih-card-video,
#work-sallust-jugurtha.is-preview-playing .tvih-lead-media .tvih-card-video {
  object-position: center center;
}
/* Alternate hero side: media column on the right (copy left) */
@media (min-width: 992px) {
  .tvih-lead--media-right .tvih-lead-grid {
    grid-template-columns: 1fr 1.15fr;
  }
  .tvih-lead--media-right .tvih-lead-media { order: 2; }
  .tvih-lead--media-right .tvih-lead-copy { order: 1; }
}
/* Scrim edge-fade toward copy when media sits on the right */
.tvih-lead--media-right .tvih-lead-media-scrim {
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.12) 0%,
      rgba(0, 0, 0, 0.22) 40%,
      rgba(0, 0, 0, 0.55) 72%,
      rgba(0, 0, 0, 0.78) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, transparent 65%);
}
.tvih-card-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  /* Isolate video paint from page scroll compositing */
  transform: translateZ(0);
  backface-visibility: hidden;
  background: transparent;
}
/*
 * Shelf heroes: do NOT promote to a translateZ layer.
 * Safari often freezes object-fit after grid-column expand / card transform,
 * painting only the top-left of the frame inside the media box.
 */
.tvih-shelf-media .tvih-card-video {
  transform: none;
  backface-visibility: visible;
  /* Explicit box so cover always has a sized replaced element */
  max-width: none;
  max-height: none;
}
/*
 * Shelf heroes: CSS poster is the idle still. Never leave a paused <video>
 * visible — Safari corrupts object-fit:cover on paused frames after ~15s
 * (extreme top-left crop). Video is only revealed while hovering (.is-framed).
 */
.tvih-shelf-media video.tvih-card-video[data-hover-video] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.tvih-shelf-media video.tvih-card-video[data-hover-video].is-framed {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.tvih-hero #hero-video,
#footer-video {
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* Footer video fade-in: see custom.css (#footer-video / .tvih-footer-hero).
   Keep poster bg on the section so enter-view never flashes black. */
.tvih-footer-hero {
  background-color: #000 !important;
  background-image: url('assets/media/videos/posters/athens-school.jpg') !important;
  background-size: cover !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
}
#footer-video {
  background: transparent;
  opacity: 0;
  transition: opacity 0.35s ease;
}
#footer-video.is-ready { opacity: 1; }
/* Footer hero title: white + gold glow (match top hero; strips stay gray) */
#footer-hero-title,
.dark-mode #footer-hero-title,
#footer-hero-title.text-white {
  color: #fff !important;
  text-shadow:
    0 0 10px rgba(212, 163, 115, 0.65),
    0 0 18px rgba(212, 163, 115, 0.65) !important;
}
.tvih-footer-hero-sub {
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
}
/* Isolate video layers so decode/paint doesn't thrash the main scroll thread */
.tvih-lead-media,
.tvih-shelf-media {
  isolation: isolate;
  background-color: #000;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}
/* Lead can use paint containment; shelf must not — Safari + expand reflow
   mis-composites object-fit cover into a top-left crop when contain:paint is set. */
.tvih-lead-media {
  contain: paint;
}
.tvih-shelf-media {
  contain: none;
  position: relative;
  overflow: hidden;
}
/*
 * Skip layout/paint for far-below sections only.
 * Do NOT put content-visibility on #story-strip — it sits above Featured Works
 * and placeholder heights make Continue-in-library scroll overshoot the kicker.
 */
#coming-soon {
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}
#library-search {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}
/* Fixed header stays cheap to composite */
#page-header {
  will-change: auto;
  transform: translateZ(0);
}
/* Cover video is a play/pause hit target for the work preview */
.tvih-media-playable {
  cursor: pointer;
}
.tvih-media-playable:focus-visible {
  outline: 2px solid #d4a373;
  outline-offset: 3px;
}
/* GW lead hero scrim — above video (z-index); bottom-heavy like shelf + edge fade into copy */
.tvih-lead-media-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.12) 0%,
      rgba(0, 0, 0, 0.22) 40%,
      rgba(0, 0, 0, 0.55) 72%,
      rgba(0, 0, 0, 0.78) 100%),
    linear-gradient(90deg, transparent 35%, rgba(0, 0, 0, 0.5) 100%);
}
.tvih-lead-copy {
  padding: 1.5rem 1.35rem 1.35rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Card kicker (e.g. “Featured work”) — same tight stack as strip kickers */
.tvih-kicker {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(212, 163, 115, 0.85);
  margin: 0 0 0.4rem !important;
  padding: 0 !important;
  line-height: 1.3;
  display: block;
}
.tvih-work-title {
  font-family: 'Cinzel', serif !important;
  color: #fff !important; /* featured book heroes: white + glow */
  border-bottom: none !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
  text-shadow: none !important;
  margin-top: 0 !important;
  margin-bottom: 0.25rem !important;
  font-size: clamp(1.35rem, 2.5vw, 1.85rem) !important;
}
/* Featured work: kicker → title same gap as strip kickers above */
.tvih-lead-copy > .tvih-kicker + .tvih-work-title,
.tvih-shelf-card .tvih-kicker + .tvih-work-title {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* White fill + gold glow on featured work titles (lead + shelf) */
.tvih-work-title .hero-glow,
.dark-mode .tvih-work-title .hero-glow {
  color: #fff !important;
  text-shadow:
    0 0 10px rgba(212, 163, 115, 0.65),
    0 0 18px rgba(212, 163, 115, 0.65) !important;
  animation: none !important; /* static glow; strip headers stay gray */
}
.tvih-work-author {
  color: #aaa !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 0.98rem;
  margin-bottom: 0.75rem;
}
/* Brief blurb under each work hero (lead + shelf) */
.tvih-work-pitch,
.tvih-shelf-pitch,
.tvih-lead .tvih-work-pitch,
.tvih-shelf-card .tvih-work-pitch {
  color: #bbb !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-style: normal !important;
  font-size: 1.02rem;
  line-height: 1.45;
  margin-bottom: 0.35rem;
}
/* Translator credit under pitch (lead + shelf) */
.tvih-work-translator {
  color: #777 !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 0.88rem;
  font-style: italic;
  margin: 0 0 0.55rem !important;
  line-height: 1.35;
}
.tvih-shelf-card .tvih-work-translator {
  padding: 0 0.9rem;
  margin-bottom: 0.45rem !important;
  font-size: 0.82rem;
}
.tvih-work-meta {
  color: #777 !important;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  margin-bottom: 1rem;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
}
.tvih-lead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.85rem;
}
.tvih-preview-body[hidden] { display: none !important; }
.tvih-preview-body {
  border-top: 1px solid rgba(212, 163, 115, 0.18);
  padding: 0.5rem 1rem 1.25rem;
}
.tvih-lead > .tvih-details-panel {
  padding: 0.15rem 1rem 1.35rem;
  margin-top: 0;
}
.tvih-lead > .tvih-details-panel[hidden] {
  display: none !important;
}
.tvih-preview-body [id$="-summaryContent"] {
  padding-top: 0.5rem !important;
}

/* Buttons */
.tvih-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif !important;
  font-size: 0.88rem !important;
  padding: 0.55rem 1rem !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  line-height: 1.2;
}
.tvih-btn-primary {
  background: #d4a373 !important;
  border-color: #d4a373 !important;
  color: #111 !important;
  font-weight: 600 !important;
}
.tvih-btn-primary:hover {
  background: #e0b484 !important;
  color: #000 !important;
  box-shadow: 0 0 18px rgba(212, 163, 115, 0.35);
}
.tvih-btn-secondary {
  background: transparent !important;
  border-color: rgba(212, 163, 115, 0.65) !important;
  color: #e8e0d4 !important;
}
.tvih-btn-secondary:hover {
  border-color: #d4a373 !important;
  color: #fff !important;
  background: rgba(212, 163, 115, 0.08) !important;
}
.tvih-btn-play {
  background: #000 !important;
  border: 1px solid #d4a373 !important;
  color: #fff !important;
}
.tvih-btn-play:hover {
  background: rgba(212, 163, 115, 0.12) !important;
  color: #fff !important;
}
.tvih-btn-ghost {
  background: transparent !important;
  border: 1px solid #444 !important;
  color: #bbb !important;
}
.tvih-btn-ghost:hover {
  border-color: #d4a373 !important;
  color: #d4a373 !important;
}
/* Featured-work narrator picker — active voice avatar + name on the button */
.tvih-voice-picker-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  padding: 0.28rem 0.55rem 0.28rem 0.35rem !important;
  max-width: 100%;
}
.tvih-voice-picker-avatar {
  width: 22px !important;
  height: 22px !important;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(212, 163, 115, 0.45);
}
.tvih-voice-picker-name {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #bbb;
  line-height: 1.2;
  white-space: nowrap;
}
.tvih-voice-picker-btn:hover .tvih-voice-picker-name,
.tvih-voice-picker-btn:focus .tvih-voice-picker-name,
.tvih-voice-picker-btn.show .tvih-voice-picker-name,
.tvih-voice-picker-btn[aria-expanded="true"] .tvih-voice-picker-name {
  color: #d4a373;
}
.tvih-voice-picker-caret {
  font-size: 0.7em;
  opacity: 0.85;
  flex-shrink: 0;
}
/*
 * Featured-work play bars on index.
 * custom.css used sticky + fat padding for teasers; that trapped shelf controls.
 * At rest: normal in-flow chrome. While playing: JS moves bar to body + fixed dock.
 */
#caesar-summaryPlayHeader,
#josephus-summaryPlayHeader,
#caesar-cw-summaryPlayHeader,
#sallust-catiline-summaryPlayHeader,
#sallust-jugurtha-summaryPlayHeader {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.35rem !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 2 !important;
  width: auto !important;
  max-width: none !important;
  padding: 0.25rem 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
}
body > #caesar-summaryPlayHeader.is-preview-sticky,
body > #josephus-summaryPlayHeader.is-preview-sticky,
body > #caesar-cw-summaryPlayHeader.is-preview-sticky,
body > #sallust-catiline-summaryPlayHeader.is-preview-sticky,
body > #sallust-jugurtha-summaryPlayHeader.is-preview-sticky,
#caesar-summaryPlayHeader.is-preview-sticky,
#josephus-summaryPlayHeader.is-preview-sticky,
#caesar-cw-summaryPlayHeader.is-preview-sticky,
#sallust-catiline-summaryPlayHeader.is-preview-sticky,
#sallust-jugurtha-summaryPlayHeader.is-preview-sticky {
  position: fixed !important;
  top: var(--tvih-header-h, 4rem) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1035 !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0.55rem 0.85rem !important;
  background: rgba(12, 10, 8, 0.96) !important;
  border: none !important;
  border-bottom: 1px solid rgba(212, 163, 115, 0.45) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
}
/* Zero-height marker only — a tall spacer was padding shelf transcripts */
.tvih-play-header-spacer {
  display: block !important;
  width: 100% !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  flex-shrink: 0;
  pointer-events: none;
  overflow: hidden;
  background: transparent !important;
}
body.tvih-preview-controls-sticky .tvih-shelf-card,
body.tvih-preview-controls-sticky .tvih-shelf-card:hover,
body.tvih-preview-controls-sticky .tvih-lead {
  transform: none !important;
}
/*
 * FW preview body text — exact match to hear-strip sample (.tvih-hear-line).
 * Inline font-size was stripped from markup (inline !important always won).
 */
#josephus-summaryContent,
#caesar-cw-summaryContent,
#caesar-summaryContent,
#sallust-catiline-summaryContent,
#sallust-jugurtha-summaryContent,
.tvih-preview-body [id$="-summaryContent"] {
  padding-top: 8px !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: clamp(1.08rem, 2.2vw, 1.23rem) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: #999999 !important;
  line-height: 1.55 !important;
}
/* Featured preview body: single para spacing (not Bootstrap’s ~1rem double look) */
#josephus-summaryContent p,
#caesar-cw-summaryContent p,
#caesar-summaryContent p,
#sallust-catiline-summaryContent p,
#sallust-jugurtha-summaryContent p,
.tvih-preview-body [id$="-summaryContent"] p,
#josephus-summaryContent p.fs-md,
#caesar-cw-summaryContent p.fs-md,
#caesar-summaryContent p.fs-md,
#sallust-catiline-summaryContent p.fs-md,
#sallust-jugurtha-summaryContent p.fs-md {
  margin-top: 0 !important;
  margin-bottom: 0.55em !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: clamp(1.08rem, 2.2vw, 1.23rem) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: #999999 !important;
  line-height: 1.55 !important;
}
#josephus-summaryContent .word,
#caesar-cw-summaryContent .word,
#caesar-summaryContent .word,
#sallust-catiline-summaryContent .word,
#sallust-jugurtha-summaryContent .word,
.tvih-preview-body [id$="-summaryContent"] .word,
#josephus-summaryContent em,
#caesar-cw-summaryContent em,
#caesar-summaryContent em,
#sallust-catiline-summaryContent em,
#sallust-jugurtha-summaryContent em {
  font-size: inherit !important;
  font-family: inherit !important;
}
#josephus-summaryContent p:last-child,
#caesar-cw-summaryContent p:last-child,
#caesar-summaryContent p:last-child,
#sallust-catiline-summaryContent p:last-child,
#sallust-jugurtha-summaryContent p:last-child,
.tvih-preview-body [id$="-summaryContent"] p:last-child {
  margin-bottom: 0 !important;
}

/* Shelf */
.tvih-shelf {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .tvih-shelf { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
  @media (min-width: 1200px) {
    .tvih-shelf { grid-template-columns: repeat(3, 1fr); }
  }
}
.tvih-shelf-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid rgba(212, 163, 115, 0.35);
  border-radius: 12px;
  background: #0a0a0a;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.tvih-shelf-card:hover {
  border-color: rgba(212, 163, 115, 0.75);
  box-shadow: 0 0 28px rgba(212, 163, 115, 0.12);
  transform: translateY(-2px);
}
/* Expanded = full-width transcript; skip hover lift (transform ancestors break
   sticky controls and Safari object-fit on the hero video). */
.tvih-shelf-card.is-expanded,
.tvih-shelf-card.is-expanded:hover,
.tvih-shelf-card.is-preview-playing,
.tvih-shelf-card.is-preview-playing:hover {
  transform: none;
}
/* Face fills card height so actions can pin to the bottom (equal-height grid). */
.tvih-shelf-face {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.tvih-shelf-media {
  position: relative;
  height: 200px;
  overflow: hidden;
  /* background-color only — shorthand `background` resets size/position and
     makes poster images paint intrinsic (top-left crop) over cover. */
  background-color: #000;
  flex: 0 0 auto;
}
.tvih-shelf-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
}
.tvih-shelf-titles {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1rem;
  text-align: center;
  z-index: 1;
}
.tvih-shelf-pitch {
  padding: 0.85rem 0.9rem 0;
  font-size: 0.92rem !important;
  margin-bottom: 0.25rem !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
}
.tvih-shelf-card .tvih-work-meta {
  padding: 0 0.9rem;
  margin-bottom: 0.65rem;
  font-size: 0.78rem;
}
.tvih-shelf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0 0.9rem 1rem;
  margin-top: auto;
}
.tvih-shelf-actions .tvih-btn { flex: 1 1 auto; font-size: 0.8rem !important; padding: 0.45rem 0.6rem !important; }
/* While shelf preview is open (playing, paused, OR finished with text still
   expanded): hide face-level Play/Book1 — keep only the bar above the text
   (Play + mic) and the foot below (Book 1 free + Books & narrators). */
.tvih-shelf-card.is-preview-playing .tvih-shelf-actions,
.tvih-shelf-card.is-expanded .tvih-shelf-actions {
  display: none !important;
}
.tvih-shelf-expand {
  border-top: 1px solid rgba(212, 163, 115, 0.2);
  padding: 0.85rem 0.9rem 1rem;
  background: #000;
}
.tvih-shelf-expand-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.5rem;
}
.tvih-details-panel {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid #222;
}
.tvih-details-panel .table { color: #ccc; }
.tvih-details-panel h4, .tvih-details-panel h5 {
  border-bottom: none !important;
}
/* Library-card header (replaces redundant glowing title) */
.tvih-details-head {
  padding: 0.35rem 0.35rem 0.15rem;
  text-align: center;
}
.tvih-details-kicker {
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #d4a373 !important;
  margin: 0 0 0.65rem !important;
  border: none !important;
  padding: 0 !important;
  text-shadow: none !important;
}
.tvih-details-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin: 0 0 0.75rem;
}
.tvih-details-stats span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 0.78rem;
  color: #e8e0d4 !important;
  background: rgba(212, 163, 115, 0.08);
  border: 1px solid rgba(212, 163, 115, 0.4);
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
  line-height: 1.2;
}
.tvih-details-stats span i {
  color: #d4a373;
  font-size: 0.72rem;
}
.tvih-details-stats .is-free i {
  color: #5cb85c;
}
.tvih-details-edition {
  font-family: 'Atkinson Hyperlegible', Georgia, serif !important;
  font-style: italic;
  font-size: 0.8rem !important;
  color: #888 !important;
  line-height: 1.4;
  max-width: 36em;
  margin: 0 auto 1rem !important;
  padding: 0 0.5rem 0.85rem !important;
  border-bottom: 1px solid rgba(212, 163, 115, 0.28);
}
.tvih-details-section {
  font-family: 'Cinzel', serif !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d4a373 !important;
  border-bottom: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 0.4rem !important;
  text-align: center;
}
.tvih-details-section-wrap {
  padding: 0;
}
.tvih-details-section.is-voices {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none;
}
.tvih-details-body {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 0.25rem 0.35rem;
}
.tvih-details-block {
  margin: 0 0 1.35rem;
}
.tvih-details-block:last-child {
  margin-bottom: 0.25rem;
}
.tvih-details-lede {
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #aaa !important;
  text-align: center;
  margin: 0 auto 0.85rem !important;
  max-width: 32em;
}
.tvih-book-roll {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.tvih-book-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.85rem;
  padding: 0.72rem 0.95rem;
  border: 1px solid rgba(212, 163, 115, 0.22);
  border-radius: 0.65rem;
  background: rgba(212, 163, 115, 0.04);
  text-decoration: none !important;
  color: inherit;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.tvih-book-row.is-open {
  border-color: rgba(212, 163, 115, 0.55);
  background: rgba(212, 163, 115, 0.09);
}
.tvih-book-row:hover,
.tvih-book-row:focus-visible {
  border-color: rgba(212, 163, 115, 0.7);
  background: rgba(212, 163, 115, 0.12);
  outline: none;
}
.tvih-book-row-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
  min-width: 0;
  flex: 1 1 12rem;
}
.tvih-book-row-title {
  font-family: 'Cinzel', serif;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: #fff;
  white-space: nowrap;
}
.tvih-book-row-note {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 0.8rem;
  color: #888;
  line-height: 1.3;
}
.tvih-book-row.is-open .tvih-book-row-note {
  color: #c4b8a8;
}
.tvih-book-row-aside {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-left: auto;
  flex: 0 0 auto;
}
.tvih-book-row-time {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 0.75rem;
  color: #777;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.tvih-book-row-cta {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: #d4a373;
  white-space: nowrap;
}
.tvih-book-row:hover .tvih-book-row-cta,
.tvih-book-row:focus-visible .tvih-book-row-cta {
  color: #f0d2a8;
}
.tvih-voice-roll {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}
@media (min-width: 520px) {
  .tvih-voice-roll {
    grid-template-columns: repeat(3, 1fr);
  }
  .tvih-voice-roll.is-two {
    grid-template-columns: repeat(2, minmax(0, 14rem));
    justify-content: center;
  }
}
.tvih-voice-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.95rem 0.65rem 0.85rem;
  border: 1px solid rgba(212, 163, 115, 0.28);
  border-radius: 0.75rem;
  background: rgba(212, 163, 115, 0.05);
}
.tvih-voice-tile img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(212, 163, 115, 0.45);
}
.tvih-voice-tile strong {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  margin-bottom: 0.2rem;
}
.tvih-voice-tile span {
  display: block;
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 0.75rem;
  line-height: 1.3;
  color: #999;
}
/* Book row buttons: gray label, white on hover (beats dark-mode white/black buttons) */
.tvih-details-panel .btn-alt-secondary,
.dark-mode .tvih-details-panel .btn-alt-secondary,
.tvih-details-panel a.btn.btn-alt-secondary,
.dark-mode .tvih-details-panel a.btn.btn-alt-secondary {
  background: #000 !important;
  border: 1px solid #d4a373 !important;
  color: #999999 !important;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.tvih-details-panel .btn-alt-secondary:hover,
.tvih-details-panel .btn-alt-secondary:focus,
.dark-mode .tvih-details-panel .btn-alt-secondary:hover,
.dark-mode .tvih-details-panel .btn-alt-secondary:focus,
.tvih-details-panel a.btn.btn-alt-secondary:hover,
.tvih-details-panel a.btn.btn-alt-secondary:focus,
.dark-mode .tvih-details-panel a.btn.btn-alt-secondary:hover,
.dark-mode .tvih-details-panel a.btn.btn-alt-secondary:focus {
  color: #ffffff !important;
  background: #000 !important;
  border-color: #d4a373 !important;
}
/* Keep the green + separators in free-book rows */
.tvih-details-panel .btn-alt-secondary .text-success,
.tvih-details-panel .btn-alt-secondary:hover .text-success {
  color: #5cb85c !important;
}

@media (min-width: 768px) {
  .tvih-shelf-card.is-expanded {
    grid-column: 1 / -1;
  }
}

/* ========== P2 Story strip (Read / Listen / Focus / Study / Share) ========== */
.tvih-story-strip {
  background: #000;
  border-top: 1px solid rgba(212, 163, 115, 0.22);
  border-bottom: 1px solid rgba(212, 163, 115, 0.22);
  padding: 3.5rem 0 3.75rem;
}
.tvih-story-inner {
  /* Wider than pre–content-full 1180 — room for 5 beats + gutters */
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 1.75rem;
  text-align: center;
}
.tvih-story-strip .tvih-section-title {
  margin-bottom: 0.3rem !important;
}
.tvih-story-strip .tvih-section-lead {
  margin-bottom: 2.35rem;
  max-width: 36em;
}
.tvih-story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
  text-align: left;
}
@media (min-width: 600px) {
  .tvih-story-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}
@media (min-width: 900px) {
  .tvih-story-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
  }
}
@media (min-width: 1200px) {
  .tvih-story-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 1.15rem;
  }
}
/*
 * Story beats — gold wash over the WHOLE box, top-right → down.
 * Mock used opaque #050505 which hid parent gradients; wash lives on
 * ::before (full-bleed overlay) so it reads across mock + body.
 */
.tvih-story-beat {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(212, 163, 115, 0.35);
  border-radius: 14px;
  overflow: hidden;
  min-height: 100%;
  background: linear-gradient(180deg, rgba(20, 16, 12, 0.95), rgba(0, 0, 0, 0.98));
  box-shadow:
    0 0 40px rgba(212, 163, 115, 0.028),
    0 4px 12px rgba(0, 0, 0, 0.4);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.tvih-story-beat::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 130% 110% at 100% 0%,
    rgba(212, 163, 115, 0.07) 0%,
    rgba(212, 163, 115, 0.03) 38%,
    transparent 62%
  );
}
.tvih-story-beat:hover {
  border-color: rgba(212, 163, 115, 0.7);
  box-shadow:
    0 0 28px rgba(212, 163, 115, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}
.tvih-story-mock {
  position: relative;
  z-index: 1;
  height: 148px;
  /* Transparent so card wash shows through; demos sit on top */
  background: transparent;
  border-bottom: 1px solid rgba(212, 163, 115, 0.15);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 0.9rem;
}
.tvih-story-mock::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.45) 100%);
}
.tvih-story-body {
  position: relative;
  z-index: 1;
  padding: 1.1rem 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.tvih-story-kicker {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d4a373;
  margin: 0 0 0.3rem;
}
/* Beat titles white — gold underline kept */
.tvih-story-beat h3,
.dark-mode .tvih-story-beat h3,
#story-strip .tvih-story-beat h3 {
  font-family: 'Cinzel', serif !important;
  color: #fff !important;
  display: inline-block; /* underline only as wide as the word */
  width: fit-content;
  max-width: 100%;
  border-bottom: 1px solid #d4a373 !important; /* thin gold underline */
  padding-bottom: 0.35rem !important;
  text-shadow: none !important;
  font-size: 1.2rem !important;
  margin: 0 0 0.45rem !important;
  letter-spacing: 0.02em;
}
.tvih-story-line {
  font-family: 'Atkinson Hyperlegible', Georgia, serif !important;
  font-style: italic;
  font-size: 0.94rem;
  color: #c8c0b4 !important;
  line-height: 1.4;
  margin: 0;
}
.tvih-story-cta {
  display: inline-block;
  margin-top: 0.65rem;
  font-family: 'Cinzel', serif !important;
  font-size: 0.78rem !important;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #d4a373 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(212, 163, 115, 0.45);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.tvih-story-cta:hover {
  color: #fff !important;
  border-bottom-color: #d4a373;
}
.tvih-story-cta i {
  font-size: 0.7em;
  margin-left: 0.2rem;
  opacity: 0.85;
}
/* Focus beat: slightly stronger gold edge (same wash as siblings) */
.tvih-story-beat.is-focus {
  border-color: rgba(212, 163, 115, 0.5);
}
.tvih-story-beat.is-focus:hover {
  border-color: #d4a373;
  box-shadow:
    0 0 32px rgba(212, 163, 115, 0.16),
    0 4px 12px rgba(0, 0, 0, 0.4);
}
/* Ghost UI: Read — live word highlights + gentle scroll under top/bottom scrims */
.tvih-story-beat.is-read .tvih-story-mock {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}
/* Parent mock still has a light bottom fade; Read owns its own dual scrim on the page */
.tvih-mock-page {
  width: 100%;
  max-width: 210px;
  position: relative;
  z-index: 1;
  font-family: 'Atkinson Hyperlegible', Georgia, serif;
  font-style: italic;
  font-size: 0.72rem;
  line-height: 1.55;
  color: #6a6a6a !important;
  text-align: left;
}
.tvih-story-beat.is-read .tvih-mock-page {
  max-width: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
}
.tvih-mock-page-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 0 0.9rem; /* no vertical pad — prose pad centers first line */
  box-sizing: border-box;
}
.tvih-mock-page-prose {
  will-change: transform;
  transition: none;
  text-align: left;
  /* padding-top set in JS so first line sits mid-window */
}
/* Locked metrics: highlight must NEVER change word box (no pad/bg reflow) */
.tvih-mock-page-prose .w {
  color: #5a5a5a;
  display: inline;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: color 0.12s ease, text-shadow 0.12s ease;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.tvih-mock-page-prose .w.is-past {
  color: #3a3a3a;
  text-shadow: none;
}
.tvih-mock-page-prose .w.is-hl,
.tvih-mock-page .hl {
  color: #fff !important;
  /* glow only — no background/padding (those shove neighbors sideways); ~50% prior glow */
  text-shadow:
    0 0 3px rgba(212, 163, 115, 0.5),
    0 0 6px rgba(212, 163, 115, 0.32),
    0 0 9px rgba(212, 163, 115, 0.18);
  background: transparent !important;
  padding: 0 !important;
}
.tvih-mock-page .dim { color: #3a3a3a !important; }
/* Top + bottom scrims — keep text readable as it glides */
.tvih-story-beat.is-read .tvih-mock-page::before,
.tvih-story-beat.is-read .tvih-mock-page::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 32%;
  z-index: 2;
  pointer-events: none;
}
.tvih-story-beat.is-read .tvih-mock-page::before {
  top: 0;
  background: linear-gradient(180deg, #050505 0%, rgba(5, 5, 5, 0.72) 35%, transparent 100%);
}
.tvih-story-beat.is-read .tvih-mock-page::after {
  bottom: 0;
  background: linear-gradient(0deg, #050505 0%, rgba(5, 5, 5, 0.72) 35%, transparent 100%);
}
/* Ghost UI: Listen — voice + glowing phrase */
.tvih-mock-listen {
  width: 100%;
  max-width: 210px;
  position: relative;
  z-index: 1;
  text-align: center;
}
.tvih-mock-wave {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 32px;
  margin-bottom: 0.7rem;
}
.tvih-mock-wave span {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: rgba(212, 163, 115, 0.4);
  transform-origin: bottom center;
  transform: scaleY(0.35);
  /* 2× slower than prior Listen mock wave (story strip) */
  animation: tvih-mock-wave-bar 5.56s ease-in-out infinite;
  will-change: transform;
}
.tvih-mock-wave span:nth-child(odd) { background: rgba(212, 163, 115, 0.58); }
/* Accent bars — solid gold + soft glow (like “active” sample chips) */
.tvih-mock-wave span:nth-child(4),
.tvih-mock-wave span:nth-child(7) {
  background: #d4a373;
  box-shadow: 0 0 8px rgba(212, 163, 115, 0.55);
}
/* Stagger + unique amplitude — durations/delays 2× for half speed */
.tvih-mock-wave span:nth-child(1)  { animation-delay: 0s;    animation-duration: 5.06s; }
.tvih-mock-wave span:nth-child(2)  { animation-delay: 0.38s; animation-duration: 5.94s; }
.tvih-mock-wave span:nth-child(3)  { animation-delay: 0.78s; animation-duration: 4.82s; }
.tvih-mock-wave span:nth-child(4)  { animation-delay: 0.20s; animation-duration: 5.44s; }
.tvih-mock-wave span:nth-child(5)  { animation-delay: 0.96s; animation-duration: 6.20s; }
.tvih-mock-wave span:nth-child(6)  { animation-delay: 0.56s; animation-duration: 5.20s; }
.tvih-mock-wave span:nth-child(7)  { animation-delay: 1.14s; animation-duration: 4.68s; }
.tvih-mock-wave span:nth-child(8)  { animation-delay: 0.46s; animation-duration: 5.70s; }
.tvih-mock-wave span:nth-child(9)  { animation-delay: 0.86s; animation-duration: 4.92s; }
.tvih-mock-wave span:nth-child(10) { animation-delay: 0.30s; animation-duration: 6.08s; }
.tvih-mock-wave span:nth-child(11) { animation-delay: 0.66s; animation-duration: 5.32s; }
.tvih-mock-wave span:nth-child(12) { animation-delay: 1.06s; animation-duration: 5.56s; }
/* Per-bar peak heights via custom property (used in keyframes) */
.tvih-mock-wave span:nth-child(1)  { --wave-peak: 0.42; }
.tvih-mock-wave span:nth-child(2)  { --wave-peak: 0.72; }
.tvih-mock-wave span:nth-child(3)  { --wave-peak: 0.9; }
.tvih-mock-wave span:nth-child(4)  { --wave-peak: 1; }
.tvih-mock-wave span:nth-child(5)  { --wave-peak: 0.78; }
.tvih-mock-wave span:nth-child(6)  { --wave-peak: 0.52; }
.tvih-mock-wave span:nth-child(7)  { --wave-peak: 0.94; }
.tvih-mock-wave span:nth-child(8)  { --wave-peak: 0.62; }
.tvih-mock-wave span:nth-child(9)  { --wave-peak: 0.4; }
.tvih-mock-wave span:nth-child(10) { --wave-peak: 0.58; }
.tvih-mock-wave span:nth-child(11) { --wave-peak: 0.76; }
.tvih-mock-wave span:nth-child(12) { --wave-peak: 0.48; }
@keyframes tvih-mock-wave-bar {
  0%, 100% { transform: scaleY(0.22); opacity: 0.7; }
  35%      { transform: scaleY(var(--wave-peak, 0.85)); opacity: 1; }
  55%      { transform: scaleY(calc(var(--wave-peak, 0.85) * 0.55)); opacity: 0.85; }
  75%      { transform: scaleY(calc(var(--wave-peak, 0.85) * 0.88)); opacity: 1; }
}
.tvih-mock-phrase {
  font-family: 'Atkinson Hyperlegible', Georgia, serif;
  font-style: italic;
  font-size: 0.8rem;
  color: #777 !important;
  line-height: 1.35;
}
.tvih-mock-phrase .hl {
  color: #fff !important;
  /* match Read strip: ~50% prior glow */
  text-shadow:
    0 0 3px rgba(212, 163, 115, 0.5),
    0 0 6px rgba(212, 163, 115, 0.32),
    0 0 9px rgba(212, 163, 115, 0.18);
}
.tvih-mock-voices {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.65rem;
}
.tvih-mock-voices img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(212, 163, 115, 0.4);
  background: #111;
  display: block;
  opacity: 0.72;
  box-shadow: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}
.tvih-mock-voices img.is-on {
  opacity: 1;
  border-color: #d4a373;
  box-shadow: 0 0 0 1px rgba(212, 163, 115, 0.35), 0 0 10px rgba(212, 163, 115, 0.4);
  transform: scale(1.08);
}
/* Ghost UI: Study — term underline + map pin + bookmark */
.tvih-mock-study {
  width: 100%;
  max-width: 210px;
  position: relative;
  z-index: 1;
  text-align: left;
}
.tvih-mock-termline {
  font-family: 'Atkinson Hyperlegible', Georgia, serif;
  font-size: 0.76rem;
  color: #666 !important;
  line-height: 1.45;
  margin-bottom: 0.55rem;
}
.tvih-mock-termline .term {
  color: #e8e0d4 !important;
  border-bottom: 1px solid #d4a373;
  text-decoration: none;
  cursor: default;
}
.tvih-mock-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 0.68rem;
  color: #bbb !important;
  background: rgba(212, 163, 115, 0.08);
  border: 1px solid rgba(212, 163, 115, 0.4);
  border-radius: 999px;
  padding: 0.24rem 0.55rem;
  margin-bottom: 0.55rem;
  min-height: 1.55rem;
  max-width: 100%;
  box-sizing: border-box;
}
.tvih-mock-chip .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d4a373;
  box-shadow: 0 0 6px #d4a373;
  flex: 0 0 auto;
}
.tvih-mock-chip-text {
  color: #ddd !important;
  white-space: nowrap;
  min-width: 0;
}
.tvih-mock-chip-caret {
  display: inline-block;
  width: 1.5px;
  height: 0.85em;
  margin-left: 1px;
  background: #d4a373;
  border-radius: 1px;
  flex: 0 0 auto;
  opacity: 1;
  animation: tvih-mock-caret-blink 0.9s step-end infinite;
  box-shadow: 0 0 6px rgba(212, 163, 115, 0.55);
}
.tvih-mock-chip.is-paused .tvih-mock-chip-caret {
  animation: none;
  opacity: 0.35;
}
@keyframes tvih-mock-caret-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.tvih-mock-tools {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.tvih-mock-pin,
.tvih-mock-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(212, 163, 115, 0.4);
  background: #0d0d0d;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d4a373;
  font-size: 0.8rem;
}
.tvih-mock-mark {
  position: relative;
}
.tvih-mock-mark::before {
  content: '';
  width: 9px;
  height: 13px;
  background: #d4a373;
  border-radius: 1px 1px 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  opacity: 0.9;
}
.tvih-mock-map {
  flex: 1;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(212, 163, 115, 0.28);
  background:
    radial-gradient(circle at 62% 48%, #d4a373 0 2px, transparent 3px),
    linear-gradient(135deg, #0a1210 0%, #0d0d0d 50%, #101418 100%);
  position: relative;
  overflow: hidden;
}
.tvih-mock-map::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent, transparent 11px, rgba(212,163,115,0.05) 11px, rgba(212,163,115,0.05) 12px),
    repeating-linear-gradient(0deg, transparent, transparent 11px, rgba(212,163,115,0.05) 11px, rgba(212,163,115,0.05) 12px);
  opacity: 0.7;
}
/* Ghost UI: Share — youtube-format SBS mini (hero L / text R) + DL on hero */
/* Same mock height + padding as other story beats — keep transparent for card wash */
.tvih-story-beat.is-share .tvih-story-mock {
  background: transparent;
}
.tvih-mock-share {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}
/* Fill the mock interior — SBS grid, no extra inset */
.tvih-share-sbs {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 0.44fr 0.56fr;
  gap: 0.45rem;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  min-height: 0;
}
/* Left hero panel — gold outline, rounded (matches build_sbs_chrome) */
.tvih-share-sbs-hero {
  position: relative;
  border-radius: 7px;
  border: 1px solid rgba(212, 163, 115, 0.85);
  overflow: hidden;
  background: #000 center/cover no-repeat;
  background-image: url('assets/media/videos/posters/catiline.jpg');
  min-height: 0;
  align-self: stretch;
}
.tvih-share-sbs-hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.tvih-share-sbs-hero video.is-on { opacity: 1; }
/* Center download orb on hero */
.tvih-share-dl-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(212, 163, 115, 0.75);
  background: rgba(0, 0, 0, 0.62);
  color: #d4a373;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 12px rgba(212, 163, 115, 0.35);
  animation: tvih-share-orb-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
.tvih-share-dl-orb.is-saved {
  border-color: rgba(140, 190, 140, 0.75);
  color: #a8d4a8;
  animation: none;
  box-shadow: 0 0 12px rgba(120, 180, 120, 0.35);
}
@keyframes tvih-share-orb-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 10px rgba(212, 163, 115, 0.3); }
  50%      { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 0 16px rgba(212, 163, 115, 0.5); }
}
/* Right chrome column — no waveform; tight header, max body text */
.tvih-share-sbs-right {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 0.1rem;
  height: 100%;
}
/* Compact header stack */
.tvih-share-sbs-ch {
  font-family: 'Cinzel', serif;
  font-size: 0.42rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e8e0d4 !important;
  margin: 0 0 0.05rem;
  line-height: 1.1;
  flex: 0 0 auto;
}
.tvih-share-sbs-author {
  font-family: 'Cinzel', serif;
  font-size: 0.4rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff !important;
  text-shadow: 0 0 5px rgba(212, 163, 115, 0.3);
  margin: 0 0 0.03rem;
  line-height: 1.1;
  flex: 0 0 auto;
}
.tvih-share-sbs-work {
  font-family: 'Atkinson Hyperlegible', Georgia, serif;
  font-style: italic;
  font-size: 0.42rem;
  color: #c8b8a0 !important;
  border-bottom: 1px solid rgba(212, 163, 115, 0.5);
  padding-bottom: 0;
  margin: 0 0 0.04rem;
  line-height: 1.1;
  flex: 0 0 auto;
}
.tvih-share-sbs-meta {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 0.36rem;
  color: #666 !important;
  margin: 0 0 0.18rem;
  line-height: 1.15;
  flex: 0 0 auto;
}
.tvih-share-sbs-text {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  position: relative;
  text-align: left;
  /* soft edge fade so the lit line can sit mid-band without clipping hard */
  mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 84%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 84%, transparent 100%);
}
.tvih-share-sbs-prose {
  font-family: 'Atkinson Hyperlegible', Georgia, serif;
  font-style: italic;
  font-size: 0.58rem;
  line-height: 1.38;
  color: #5a5a5a !important;
  will-change: transform;
}
.tvih-share-sbs-prose .sw {
  color: #5a5a5a;
  padding: 0 !important;
  background: transparent !important;
  transition: color 0.1s ease, text-shadow 0.1s ease;
}
.tvih-share-sbs-prose .sw.is-hl {
  color: #fff !important;
  text-shadow:
    0 0 3px rgba(212, 163, 115, 0.5),
    0 0 6px rgba(212, 163, 115, 0.32);
}
.tvih-share-sbs-prose .sw.is-past { color: #3a3a3a; }
.tvih-mock-card { display: none; }
.tvih-mock-send { display: none; }
/* Ghost UI: Focus Mode — single-word RSVP */
.tvih-mock-focus {
  width: 100%;
  max-width: 210px;
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
}
.tvih-mock-focus-stage {
  min-height: 3.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
}
/* Match real Focus Mode: vertical white bars + gold glow, gray italic word */
.tvih-mock-focus-bracket {
  display: inline-block;
  width: 4px;
  height: 2.55rem;
  background: #fff;
  vertical-align: middle;
  flex-shrink: 0;
  /* glow: prior 0.45/0.45/0.25 cut another 50% */
  box-shadow:
    0 0 12px rgba(212, 163, 115, 0.225),
    0 0 24px rgba(212, 163, 115, 0.225),
    0 0 36px rgba(212, 163, 115, 0.125);
}
.tvih-mock-focus-bracket.is-left { margin-right: 0.65rem; }
.tvih-mock-focus-bracket.is-right { margin-left: 0.65rem; }
.tvih-mock-focus-word {
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 1.35rem; /* JS shrinks long words for the card stage */
  font-weight: 400 !important;
  font-style: italic !important;
  color: #aaaaaa !important;
  text-shadow: none !important;
  letter-spacing: 0.02em;
  line-height: 1.1;
  animation: none;
  max-width: 11.5em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  transition: none;
}
.tvih-mock-focus-meta {
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(212, 163, 115, 0.75);
}
.tvih-mock-focus-hint {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 0.65rem;
  color: #555 !important;
  letter-spacing: 0.04em;
}
/* Full-page Focus handoff iframe (preserves click gesture for autoplay) */
.tvih-focus-handoff {
  position: fixed;
  width: 2px;
  height: 2px;
  left: -9999px;
  top: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  background: #000;
}
.tvih-focus-handoff.is-live {
  inset: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  pointer-events: auto;
  z-index: 200000;
}
html.tvih-focus-handoff-active,
html.tvih-focus-handoff-active body {
  overflow: hidden !important;
}
@media (prefers-reduced-motion: reduce) {
  .tvih-story-beat { transition: none; }
  .tvih-story-beat:hover { transform: none; }
  .tvih-mock-page-prose { transform: none !important; }
  .tvih-mock-focus-word {
    animation: none !important;
    text-shadow: none !important;
    color: #aaaaaa !important;
  }
  .tvih-mock-wave span {
    animation: none !important;
    transform: scaleY(var(--wave-peak, 0.6));
    opacity: 0.85;
  }
  .tvih-mock-chip-caret {
    animation: none !important;
    opacity: 0.35;
  }
  .tvih-share-dl-orb {
    animation: none !important;
  }
  .tvih-share-sbs-prose {
    transform: none !important;
  }
  #tvih-share-hero-vid {
    opacity: 1 !important;
  }
}

/* ========== P2 Coming Soon — cinematic procession (Open shelves) ========== */
.tvih-procession {
  background: #000;
  border-top: 1px solid rgba(212, 163, 115, 0.22);
  border-bottom: 1px solid rgba(212, 163, 115, 0.18);
  padding: 3.25rem 0 3rem;
  position: relative;
  overflow: hidden;
}
.tvih-procession::before,
.tvih-procession::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: min(4.5rem, 8vw);
  z-index: 2;
  pointer-events: none;
}
.tvih-procession::before {
  left: 0;
  background: linear-gradient(90deg, #000 10%, transparent 100%);
}
.tvih-procession::after {
  right: 0;
  background: linear-gradient(270deg, #000 10%, transparent 100%);
}
.tvih-procession-inner {
  /* Match story strip — room for the door track + side gutters */
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 1.75rem;
  text-align: center;
  position: relative;
  z-index: 1;
}
.tvih-procession .tvih-section-title {
  margin-bottom: 0.3rem !important;
}
.tvih-procession .tvih-section-lead {
  margin-bottom: 1.9rem;
  max-width: 32em;
}
.tvih-procession-track {
  display: flex;
  gap: 1.2rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1.75rem;
  padding: 0.45rem 0.35rem 1.25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 163, 115, 0.45) #111;
}
.tvih-procession-track::-webkit-scrollbar {
  height: 6px;
}
.tvih-procession-track::-webkit-scrollbar-track {
  background: #111;
  border-radius: 999px;
}
.tvih-procession-track::-webkit-scrollbar-thumb {
  background: rgba(212, 163, 115, 0.45);
  border-radius: 999px;
}
/*
 * Open Shelves doors — same full-box gold wash as story beats (top-right → down).
 * ::before overlay so the wash covers the whole card (seal, bust, copy).
 */
.tvih-door {
  flex: 0 0 min(78vw, 252px);
  scroll-snap-align: center;
  text-align: center;
  border: 1px solid rgba(212, 163, 115, 0.35);
  border-radius: 14px;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(20, 16, 12, 0.95), rgba(0, 0, 0, 0.98));
  box-shadow:
    0 0 40px rgba(212, 163, 115, 0.028),
    0 4px 12px rgba(0, 0, 0, 0.4);
  padding: 1.35rem 1.15rem 1.2rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  position: relative;
}
.tvih-door::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 130% 110% at 100% 0%,
    rgba(212, 163, 115, 0.07) 0%,
    rgba(212, 163, 115, 0.03) 38%,
    transparent 62%
  );
}
.tvih-door > * {
  position: relative;
  z-index: 1;
}
.tvih-door:hover,
.tvih-door.is-open {
  border-color: rgba(212, 163, 115, 0.72);
  box-shadow:
    0 0 28px rgba(212, 163, 115, 0.14),
    0 4px 12px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}
.tvih-door-seal {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  border: 1px solid rgba(212, 163, 115, 0.45);
  color: #d4a373;
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
/* Read-only shelf: unlock seal is green (free-to-read), not gold */
.tvih-read-now .tvih-door-seal,
.tvih-read-now .tvih-door-seal i.fa-unlock {
  color: #5cb85c;
  border-color: rgba(92, 184, 92, 0.55);
}
.tvih-door-bust {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  margin: 0.15rem auto 0.85rem;
  border: 1px solid rgba(212, 163, 115, 0.5);
  box-shadow: 0 0 18px rgba(212, 163, 115, 0.12);
  overflow: hidden;
  background: #111;
}
.tvih-door-bust img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.25) contrast(1.05);
}
.tvih-door:hover .tvih-door-bust img,
.tvih-door.is-open .tvih-door-bust img {
  filter: none;
}
.tvih-door-author {
  font-family: 'Cinzel', serif !important;
  color: #999999 !important;
  border: none !important;
  padding: 0 !important;
  text-shadow: none !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.02em;
  margin: 0 0 0.15rem !important;
  line-height: 1.25;
}
.tvih-door-work {
  font-family: 'Atkinson Hyperlegible', Georgia, serif !important;
  font-style: italic;
  font-size: 0.92rem;
  color: #c8c0b4 !important;
  margin: 0 0 0.55rem;
  line-height: 1.3;
}
.tvih-door-rule {
  height: 1px;
  width: 3.2rem;
  margin: 0 auto 0.55rem;
  background: #d4a373;
  opacity: 0.85;
}
.tvih-door-meta {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 0.75rem;
  color: #777 !important;
  letter-spacing: 0.03em;
  margin: 0 0 0.65rem;
}
.tvih-door-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d4a373 !important;
  border: 1px solid rgba(212, 163, 115, 0.4);
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
  background: rgba(212, 163, 115, 0.06);
  margin-bottom: 0.75rem;
  text-decoration: none !important;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
a.tvih-door-status:hover,
a.tvih-door-status:focus {
  color: #fff !important;
  border-color: #d4a373;
  background: rgba(212, 163, 115, 0.14);
  box-shadow: 0 0 12px rgba(212, 163, 115, 0.18);
  text-decoration: none !important;
}
/* Read-only shelf free CTA chip */
.tvih-read-now a.tvih-door-status {
  color: #5cb85c !important;
  border-color: rgba(92, 184, 92, 0.55);
  background: rgba(92, 184, 92, 0.08);
}
.tvih-read-now a.tvih-door-status:hover,
.tvih-read-now a.tvih-door-status:focus {
  color: #7dcf7d !important;
  border-color: #5cb85c;
  background: rgba(92, 184, 92, 0.16);
  box-shadow: 0 0 12px rgba(92, 184, 92, 0.18);
}
.tvih-door-status.is-production {
  color: #e8e0d4 !important;
  border-color: rgba(212, 163, 115, 0.55);
}
.tvih-door-status i { font-size: 0.7rem; }
/* Spin the cogs on “In production” chips */
.tvih-door-status.is-production i.fa-cogs {
  display: inline-block;
  animation: tvih-cogs-spin 2.8s linear infinite;
  transform-origin: 50% 50%;
  color: #d4a373;
}
@keyframes tvih-cogs-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .tvih-door-status.is-production i.fa-cogs {
    animation: none;
  }
}
.tvih-door-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 0.78rem;
  color: #999 !important;
  background: transparent;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.tvih-door-toggle:hover,
.tvih-door.is-open .tvih-door-toggle {
  color: #fff !important;
  border-color: #d4a373;
}
.tvih-door-detail {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(212, 163, 115, 0.2);
  text-align: left;
}
.tvih-door-detail[hidden] { display: none !important; }
.tvih-door-detail p {
  font-family: 'Atkinson Hyperlegible', Georgia, serif !important;
  font-style: italic;
  font-size: 0.84rem;
  color: #999 !important;
  line-height: 1.45;
  margin: 0;
}
.tvih-procession-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 0.78rem;
  color: #555 !important;
  margin: 0.35rem 0 0;
  letter-spacing: 0.06em;
}
.tvih-procession-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(212, 163, 115, 0.45);
  background: rgba(212, 163, 115, 0.08);
  color: #d4a373;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.tvih-procession-nav i {
  margin: 0;
  font-size: 0.85rem;
  color: inherit;
}
.tvih-procession-nav:hover,
.tvih-procession-nav:focus-visible {
  border-color: #d4a373;
  background: rgba(212, 163, 115, 0.18);
  color: #fff;
  box-shadow: 0 0 14px rgba(212, 163, 115, 0.25);
  outline: none;
}
.tvih-procession-nav:active {
  transform: scale(0.96);
}
.tvih-procession-nav:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
  transform: none;
}
@media (min-width: 768px) {
  .tvih-door { flex-basis: 248px; }
}
@media (min-width: 1100px) {
  .tvih-procession::before,
  .tvih-procession::after { width: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tvih-door { transition: none; }
  .tvih-door:hover,
  .tvih-door.is-open { transform: none; }
}

</style>
<style>
  /* Dark atrium lock (index is always dark; no light flash vars) */
  :root {
    --bg-dark: #000000;
    --text-dark: #ffffff;
    --bg-light: #000000;
    --text-light: #ffffff;
  }
  body,
  body.dark-mode,
  .dark-mode {
    background: #000 !important;
    color: #fff !important;
    transition: none; /* no theme color transition thrash on scroll/load */
  }

  /* Dark shell — do not force color on all descendants (muted UI needs gray) */
  .dark-mode #page-container {
    background: #000 !important;
  }

  .dark-mode #page-header,
  .dark-mode #page-footer,
  .dark-mode .content-header,
  .dark-mode .block,
  .dark-mode .offcanvas,
  .dark-mode .modal-content,
  .dark-mode .dropdown-menu,
  .dark-mode .breadcrumb,
  .dark-mode .alert,
  .dark-mode .nav-main-heading,
  .dark-mode .nav-main-link,
  .dark-mode .form-control {
    background: #000 !important;
    color: #fff !important;
    border-color: #333 !important;
  }
  /* #sidebar: gold wash via custom.css — do not flatten to solid #000 */

  /* Header/footer: solid tint, NO backdrop-filter (blur re-composites whole page every scroll frame) */
  .dark-mode #page-header {
    background: rgba(12, 10, 8, 0.94) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(212, 163, 115, 0.35) !important;
  }
  .dark-mode #page-footer {
    background: rgba(12, 10, 8, 0.94) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: 1px solid rgba(212, 163, 115, 0.35) !important;
  }

  /* Search input text + placeholder */
  .dark-mode .form-control,
  .dark-mode input::placeholder {
    color: #fff !important;
    opacity: 0.8;
  }

  /* Dropdown menus */
  .dark-mode .dropdown-menu {
    background: #000 !important;
    border: 1px solid #333 !important;
  }
  .dark-mode .dropdown-item {
    color: #fff !important;
  }
  .dark-mode .dropdown-item:hover {
    background: #222 !important;
  }

  /* Headers — default white for chrome; strip/section titles override to gray below */
  .dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6,
  .dark-mode .block-title {
    color: #fff !important;
    text-shadow: none !important;
  }
  /* Strip headers: product gray (top + footer heros stay white below) */
  .dark-mode .tvih-free-band h2,
  .dark-mode .tvih-hear-heading,
  .dark-mode .tvih-section-title,
  .dark-mode .tvih-gift-title,
  .dark-mode .tvih-membership-title,
  .dark-mode .tvih-door-author {
    color: #999999 !important;
  }
  .dark-mode .tvih-story-beat h3 {
    color: #fff !important;
  }
  /* Top + footer + featured book heros: white fill */
  .dark-mode .tvih-hero-content h1,
  .dark-mode .tvih-hero h1 .hero-glow,
  .dark-mode .tvih-work-title,
  .dark-mode .tvih-work-title .hero-glow,
  .dark-mode #footer-hero-title,
  .dark-mode #footer-hero-title.text-white {
    color: #fff !important;
  }

  /* Primary buttons — clean white on black */
  .dark-mode .btn-alt-secondary {
    background: #fff !important;
    border-color: #fff !important;
    color: #000 !important;
  }
  .dark-mode .btn-alt-secondary:hover {
    background: #ddd !important;
  }

  /* Gold highlight glow in the void */
  .dark-mode #textContent span.highlight {
    color: #fff !important;
    text-shadow: 0 0 8px #d4a373, 0 0 12px #d4a373 !important;
    animation: none; /* index: no continuous highlight pulse */
  }

  @keyframes pulseGlowDark {
    0%, 100% { text-shadow: 0 0 6px #d4a373, 0 0 12px #d4a373; }
    50%      { text-shadow: 0 0 12px #d4a373, 0 0 24px #d4a373, 0 0 36px #d4a373; }
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  /* Kill any leftover parchment or light bgs */
  .dark-mode .bg-parchment,
  .dark-mode .bg-body-light,
  .dark-mode .bg-body-extra-light {
    background: #000 !important;
  }

  /* Footer: solid, no blur (scroll perf) */
  .dark-mode #page-footer.bg-parchment {
    background: rgba(12, 10, 8, 0.94) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: 1px solid rgba(212, 163, 115, 0.35) !important;
  }

  /* Crucial: Do NOT paint the hero video containers black.
     Exclude .tvih-footer-hero — it keeps a poster CSS background so the
     section isn't a void while #footer-video waits at opacity:0. */
  .dark-mode .position-relative.overflow-hidden:not(.tvih-footer-hero),
  .dark-mode video#hero-video,
  .dark-mode video#footer-video {
    background: transparent !important;
  }
  /* === Preserve original alert colors — they look perfect as-is === */
.dark-mode .alert-success {
  background-color: #d4edda !important;
  border-color: #c3e6cb !important;
  color: #155724 !important;
}

.dark-mode .alert-success .fa-gift {
  color: #28a745 !important;
}

/* (Optional: future-proof for other alert types you might add) */
.dark-mode .alert-warning {
  background-color: #fff3cd !important;
  border-color: #ffeaa7 !important;
  color: #856404 !important;
}

.dark-mode .alert-info {
  background-color: #d1ecf1 !important;
  border-color: #bee5eb !important;
  color: #0c5460 !important;
}

/* Make .lead class play perfectly with our <span> word highlighting */
.lead span {
    display: inline !important;      /* force inline (prevents layout shift) */
    line-height: inherit !important;
    vertical-align: baseline !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ensure highlight glow works on top of .lead */
.lead span.highlight {
    position: relative;
    z-index: 1;
}
.grok-link {
    border-bottom: 1px solid #d4a373;
    cursor: pointer;
    color: inherit;
    transition: all 0.2s ease;
}
.grok-link:hover {
    border-bottom-color: #8b4513;
    text-shadow: 0 0 5px #d4a373;
}
.dark-mode .grok-link {
    border-bottom-color: #d4a373;
}
.dark-mode .grok-link:hover {
    text-shadow: 0 0 10px #d4a373;
}
/* GROK-THIS — GENTLE GOLD UNDERLINE (FIRST MENTION ONLY) */
.grok-first {
    border-bottom: 2px solid #d4a37344 !important;
    padding-bottom: 1px !important;
    background: linear-gradient(to top, #d4a37322 0%, transparent 60%) !important;
    transition: all 0.3s ease !important;
}
.grok-first:hover {
    border-bottom-color: #d4a373 !important;
    background: linear-gradient(to top, #d4a37355 0%, transparent 60%) !important;
    color: #d4a373 !important;
}

/* Tiny copyright footer — solid, no blur */
.dark-mode #page-footer {
    background: rgba(12, 10, 8, 0.94) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: 1px solid rgba(212, 163, 115, 0.35) !important;
    z-index: 1030;
}

#page-footer .content {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    padding: 0.5rem 1rem !important;
}

#page-footer .row { margin: 0 !important; }
#page-footer .col-sm-12 { padding: 0 !important; text-align: center; }


/* Search/offcanvas gold-inner buttons (index has no book footer player) */
.btn-gold-inner {
  border: 1px solid #d4a373 !important;
  color: #999 !important;
  background: #000 !important;
  transition: color 0.15s ease, background 0.15s ease;
}
.btn-gold-inner:hover,
.btn-gold-inner:focus {
  color: #fff !important;
  background: #000 !important;
  border-color: #d4a373 !important;
}

/* Always show sidebar toggle on mobile */
#page-header .btn[data-action="sidebar_toggle"] {
    display: block !important;  /* Override d-lg-none if present */
}
/* Mobile: Sidebar as Overlay (No Push/Cover) */
@media (max-width: 991.98px) {
    #sidebar {
        transform: translateX(-100%) !important;  /* Hidden off-screen */
        transition: transform 0.3s ease !important;
    }
    /* Open via Bootstrap .show OR OneUI .sidebar-o-xs (header toggle sets both) */
    #sidebar.show,
    #page-container.sidebar-o-xs #sidebar {
        transform: translateX(0) !important;  /* Slide in on open */
    }
    
    /* Overlay backdrop on mobile open */
    .enable-page-overlay #page-overlay {
        display: block !important;  /* Show clickable close overlay */
        z-index: 1029 !important;
    }
}

/* Header Buttons: Base .btn Size + Gold Outline (Template Default Match) */
#page-header .btn-alt-secondary {
    padding: .375rem .75rem !important;      /* Base .btn pad (template default) */
    font-size: 1rem !important;              /* Base .btn font */
    line-height: 1.5 !important;             /* Base .btn line-height */
    border-radius: .375rem !important;       /* Base .btn radius */
    background: transparent !important;
    border: 1px solid rgba(212, 163, 115, 0.38) !important;    /* match scrubber / volume pill */
    color: #999999 !important;               /* Gray text default */
    font-family: 'Cinzel', serif !important;
    transition: all 0.2s ease !important;
    height: auto !important;                 /* Flex to content */
    min-width: auto !important;              /* No forced width */
}

/* Hover / keyboard focus only — not sticky :focus after click (kept gold when nav closed) */
#page-header .btn-alt-secondary:hover,
#page-header .btn-alt-secondary:focus-visible {
    background: #d4a373 !important;          /* Gold fill on hover (footer kin) */
    color: #ffffff !important;               /* White on hover */
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(139, 69, 19, 0.15) !important;
    outline: none !important;                /* Clean focus */
}

#page-header .btn-alt-secondary i {
    font-size: 1rem !important;              /* Base icon match (fa-fw handles width) */
    line-height: 1.5 !important;
    color: #999999 !important;
}
#page-header .btn-alt-secondary:hover i,
#page-header .btn-alt-secondary:focus-visible i {
    color: #ffffff !important;
}

/* Dark Mode Header Buttons */
.dark-mode #page-header .btn-alt-secondary {
    border-color: rgba(212, 163, 115, 0.38) !important;
    color: #999999 !important;               /* Gray text default */
    background: transparent !important;
}

.dark-mode #page-header .btn-alt-secondary:hover,
.dark-mode #page-header .btn-alt-secondary:focus-visible {
    background: #d4a373 !important;
    color: #ffffff !important;               /* White on hover */
}

/* Header Search Bar: Base Input-Group Size + Gold (Uniform with Buttons) */
#page-header .input-group {
    background: rgba(245, 232, 199, 0.9) !important;
    border: 1px solid #d4a373 !important;    /* Gold outline */
    border-radius: .375rem !important;       /* Base radius */
    overflow: hidden !important;
    height: auto !important;
    padding: 0 !important;
    line-height: 1.5 !important;             /* Base line-height */
    font-size: 1rem !important;              /* Base font */
}

#page-header .input-group .form-control {
    background: transparent !important;
    border: none !important;
    color: #3b2f2f !important;
    padding: .375rem .75rem !important;      /* Base .btn pad */
    font-family: 'Georgia', serif !important;
    line-height: 1.5 !important;
    height: auto !important;
    font-size: 1rem !important;
}

#page-header .input-group .input-group-text {
    background: transparent !important;
    border: none !important;
    color: #8b4513 !important;
    padding: .375rem .75rem !important;      /* Base pad */
    line-height: 1.5 !important;
    height: auto !important;
    font-size: 1rem !important;
    white-space: nowrap !important;
}

#page-header .input-group:hover,
#page-header .input-group:focus-within {
    border-color: #8b4513 !important;
    box-shadow: 0 2px 4px rgba(139, 69, 19, 0.15) !important;
}

/* Dark Mode Search Bar — match scrubber / header / footer glass shell */
.dark-mode #page-header .input-group {
    background: rgba(0, 0, 0, 0.72) !important;
    background-color: rgba(0, 0, 0, 0.72) !important;
    border-color: rgba(212, 163, 115, 0.38) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.dark-mode #page-header .input-group .form-control {
    color: #fff !important;
}

.dark-mode #page-header .input-group .input-group-text {
    color: #d4a373 !important;
}

.dark-mode #page-header .input-group:hover,
.dark-mode #page-header .input-group:focus-within {
    border-color: rgba(212, 163, 115, 0.38) !important;
    background: rgba(0, 0, 0, 0.72) !important;
    background-color: rgba(0, 0, 0, 0.72) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

#page-header .input-group i {
    font-size: 1rem !important;              /* Base icon */
    line-height: 1.5 !important;
}

/* Chapter Select: Base Form-Select Size + Gold (Uniform with Buttons) */
#page-header #book-select {
    background: rgba(245, 232, 199, 0.9) !important;
    border: 1px solid #d4a373 !important;    /* Gold outline */
    color: #3b2f2f !important;
    border-radius: .375rem !important;       /* Base radius */
    font-family: 'Cinzel', serif !important;
    padding: .375rem .75rem !important;      /* Base .btn pad */
    line-height: 1.5 !important;             /* Base line-height */
    height: auto !important;
    font-size: 1rem !important;              /* Base font */
    display: inline-block !important;
    min-width: auto !important;
    width: auto !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%233b2f2f' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); /* Custom caret color */
    background-position: right .75rem center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    padding-right: 2.25rem !important;       /* Space for caret */
}

#page-header #book-select:hover,
#page-header #book-select:focus {
    background: #d4a373 !important;
    color: #3b2f2f !important;
    box-shadow: 0 2px 4px rgba(139, 69, 19, 0.15) !important;
    outline: none !important;
    background-color: #d4a373 !important;    /* Solid on hover */
}

.dark-mode #page-header #book-select {
    background: rgba(0, 0, 0, 0.8) !important;
    border-color: #d4a373 !important;
    color: #fff !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); /* White caret in dark */
}

.dark-mode #page-header #book-select:hover,
.dark-mode #page-header #book-select:focus {
    background: #d4a373 !important;
    color: #3b2f2f !important;
}
/* Tabbed Blocks: Gold Border Wrap + Dark Tabs (OneUI Rounded Match) */
.block.block-rounded.row.g-0,
.block.block-rounded.row.flex-md-row-reverse.g-0 {
  border: 2px solid #d4a373 !important;  /* Gold outer border */
  background: #000 !important;  /* Black bg */
  border-radius: 0.375rem !important;  /* OneUI rounded (matches template) */
}

.block.block-rounded.row.g-0:hover,
.block.block-rounded.row.flex-md-row-reverse.g-0:hover {
  border-color: #fff !important;  /* White hover accent */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(212, 163, 115, 0.2) !important;  /* Template subtle shadow + gold tint */
}

/* Tab Nav: Dark with gold active/hover */
.nav-tabs-block {
  background: #000 !important;  /* Black tab bar */
}

.nav-tabs-block.justify-content-end {
  border-left: none !important;  /* No left border for right-aligned */
}

.nav-link {
  color: #cccccc !important;  /* Light gray inactive */
  border-color: #333 !important;  /* Dark inactive borders */
  background: transparent !important;
}

.nav-link:hover {
  color: #d4a373 !important;  /* Gold hover text */
  background: rgba(212, 163, 115, 0.05) !important;  /* Subtle gold tint */
  border-color: #d4a373 !important;
}

.nav-link.active {
  color: #d4a373 !important;  /* Gold active text */
  background: #000 !important;  /* Black active bg */
  border-color: #d4a373 !important;  /* Gold active border */
}

/* Tab Content: Dark with gold buttons/links */
.tab-content {
  background: #000 !important;  /* Black content */
  color: #fff !important;
  border: none !important;
}

.tab-pane .text-white {  /* Preserve white text in papyrus */
  color: #fff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;  /* Shadow for readability */
}

.tab-pane .btn-alt-secondary,
.tab-pane .btn-alt-success {
  background: #d4a373 !important;  /* Gold buttons */
  border-color: #d4a373 !important;
  color: #000 !important;  /* Black text on gold */
}

.tab-pane .btn-alt-secondary:hover,
.tab-pane .btn-alt-success:hover {
  background: #fff !important;  /* Brown hover */
  color: #fff !important;
}



/* Hero glow: gray fill + gold halo (strip headers gray sitewide on index).
   Glows cut 35% (×0.65) vs prior solid/#0.5 strengths. */
.hero-glow,
.dark-mode .hero-glow {
  color: #999999 !important;
  text-shadow: 0 0 6px rgba(212, 163, 115, 0.325) !important;
  animation: none !important;
}
/* Top hero title: white fill + gold pulse glow */
.tvih-hero h1 .hero-glow,
.dark-mode .tvih-hero h1 .hero-glow {
  color: #fff !important;
  text-shadow:
    0 0 10px rgba(212, 163, 115, 0.65),
    0 0 18px rgba(212, 163, 115, 0.65) !important;
  animation: pulseGlowDarkHero 2.4s ease-in-out infinite !important;
}
/* Free-claim / strip-lead “free to read”: white fill + gold pulse (see free-sub + section-lead above) */
.tvih-free-lead .hero-glow,
.dark-mode .tvih-free-lead .hero-glow,
.tvih-free-sub .hero-glow,
.dark-mode .tvih-free-sub .hero-glow,
.tvih-section-lead .hero-glow,
.dark-mode .tvih-section-lead .hero-glow,
.tvih-gift-lead .hero-glow,
.dark-mode .tvih-gift-lead .hero-glow {
  color: #fff !important;
  text-shadow:
    0 0 10px rgba(212, 163, 115, 0.65),
    0 0 18px rgba(212, 163, 115, 0.65) !important;
  animation: pulseGlowDarkHero 2.4s ease-in-out infinite !important;
}
/* Pulse for title/free-claim hero-glow only (65% intensity) */
@keyframes pulseGlowDarkHero {
  0%, 100% {
    text-shadow:
      0 0 6px rgba(212, 163, 115, 0.65),
      0 0 12px rgba(212, 163, 115, 0.65);
  }
  50% {
    text-shadow:
      0 0 12px rgba(212, 163, 115, 0.65),
      0 0 24px rgba(212, 163, 115, 0.65),
      0 0 36px rgba(212, 163, 115, 0.65);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tvih-hero h1 .hero-glow,
  .tvih-free-lead .hero-glow,
  .tvih-free-sub .hero-glow,
  .tvih-section-lead .hero-glow,
  .tvih-gift-lead .hero-glow,
  .tvih-hero-scroll,
  .prod-badge i {
    animation: none !important;
  }
}
.nav-main-link-icon {
  color: #d4a373 !important;  /* Gold icons */
}

/*
 * Featured Works authors — steady half-strength glow.
 * custom.css applies full --highlight-glow-strong + pulse to any
 * .nav-main-link-submenu[aria-expanded="true"] (and .hero-glow in dark mode).
 * Kill that pulse and lock half of strong: 12/24px gold → 6/12px @ 50% alpha.
 * Cover hover/focus/open so glow doesn't jump after click.
 */
#sidebar .nav-main > .nav-main-item > a.nav-main-link.hero-glow,
#sidebar .nav-main > .nav-main-item > a.nav-main-link.hero-glow:hover,
#sidebar .nav-main > .nav-main-item > a.nav-main-link.hero-glow:focus,
#sidebar .nav-main > .nav-main-item > a.nav-main-link.hero-glow:focus-visible,
#sidebar .nav-main > .nav-main-item > a.nav-main-link.hero-glow:active,
#sidebar .nav-main > .nav-main-item.open > a.nav-main-link.hero-glow,
#sidebar .nav-main > .nav-main-item > a.nav-main-link-submenu.hero-glow[aria-expanded="true"],
.dark-mode #sidebar .nav-main > .nav-main-item > a.nav-main-link.hero-glow,
.dark-mode #sidebar .nav-main > .nav-main-item > a.nav-main-link.hero-glow:hover,
.dark-mode #sidebar .nav-main > .nav-main-item > a.nav-main-link.hero-glow:focus,
.dark-mode #sidebar .nav-main > .nav-main-item > a.nav-main-link.hero-glow:focus-visible,
.dark-mode #sidebar .nav-main > .nav-main-item > a.nav-main-link.hero-glow:active,
.dark-mode #sidebar .nav-main > .nav-main-item.open > a.nav-main-link.hero-glow,
.dark-mode #sidebar .nav-main > .nav-main-item > a.nav-main-link-submenu.hero-glow[aria-expanded="true"] {
  text-shadow:
    0 0 6px rgba(212, 163, 115, 0.5),
    0 0 12px rgba(212, 163, 115, 0.5) !important;
  animation: none !important;
}
/* Kill the expanded-nav radial bloom (::after) on featured authors only */
#sidebar .nav-main > .nav-main-item > a.nav-main-link.hero-glow::after,
.dark-mode #sidebar .nav-main > .nav-main-item > a.nav-main-link.hero-glow::after,
.dark-mode #sidebar .nav-main > .nav-main-item > a.nav-main-link-submenu.hero-glow[aria-expanded="true"]::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
}

/* Index sidebar: Featured vs Read-Only split */
#sidebar .tvih-nav-gold-divider {
  list-style: none;
  margin: 0.9rem 1.15rem 0.55rem;
  padding: 0;
  height: 0;
  border: 0;
  border-top: 1px solid rgba(212, 163, 115, 0.5);
  pointer-events: none;
}
/* Same type as Featured Works — white headers (notes stay gold via .tvih-nav-heading-note) */
#sidebar .nav-main > .nav-main-heading,
.dark-mode #sidebar .nav-main > .nav-main-heading,
#sidebar .tvih-nav-readonly-kicker,
.dark-mode #sidebar .tvih-nav-readonly-kicker {
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
}
#sidebar .tvih-nav-readonly-kicker {
  white-space: normal !important;
  line-height: 1.35 !important;
}
/* Subline under nav section headers — identical Atkinson italic gold (both notes) */
#sidebar .nav-main-heading > .tvih-nav-heading-note,
#sidebar .tvih-nav-readonly-kicker > .tvih-nav-heading-note,
.dark-mode #sidebar .nav-main-heading > .tvih-nav-heading-note,
.dark-mode #sidebar .tvih-nav-readonly-kicker > .tvih-nav-heading-note {
  display: block;
  margin-top: 0.28rem;
  /* shorthand resets parent Cinzel/.75rem so both lines share exact metrics */
  font: italic 400 0.72rem/1.3 'Atkinson Hyperlegible', sans-serif !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: #d4a373 !important;
  background: transparent !important;
  text-shadow: none !important;
}

/* Solid header — do NOT re-enable backdrop blur (scroll jank) */
.dark-mode #page-header {
  background: rgba(12, 10, 8, 0.94) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(212, 163, 115, 0.35) !important;
}
.dark-mode #page-header .content-header {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
.dark-mode #page-header .input-group {
  background: rgba(0, 0, 0, 0.72) !important;
  background-color: rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* Override for preview Play/Mic buttons inside summaryPlayHeader: force gray text by default (on black bg).
   These are special cased to not follow the general .dark-mode .btn-alt-secondary (white bg / black text) or tab-pane rules. */
[id$="-summaryPlayHeader"] .btn,
[id$="-summaryPlayHeader"] .dropdown .btn {
  color: #999999 !important;
}
[id$="-summaryPlayHeader"] .btn i,
[id$="-summaryPlayHeader"] .dropdown .btn i {
  color: #999999 !important;
}
/* Pause Preview: waveform bottoms align with text baseline (hear-strip pattern) */
[id$="-summaryPlayHeader"] .tvih-btn-play,
[id$="-playSummaryBtn"] {
  display: inline-flex !important;
  align-items: baseline; /* not center — bar bottoms meet text baseline */
  gap: 0.35rem;
}
[id$="-summaryPlayHeader"] .tvih-preview-wave {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  /* Cap-height of the button type so bars sit in the letter band */
  height: 0.72em;
  height: 1cap;
  width: 1.05em;
  flex: 0 0 auto;
  line-height: 0;
  margin: 0;
  padding: 0;
  /* Flex baseline of a non-text item = bottom content edge → text baseline */
  vertical-align: baseline;
}
[id$="-summaryPlayHeader"] .tvih-preview-wave i {
  display: block;
  width: 2px;
  border-radius: 1px;
  background: #d4a373 !important;
  opacity: 0.9;
  height: 40%;
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
  transform-origin: bottom center; /* pulse grows up from shared baseline */
  animation: tvih-hear-wave-idle 0.85s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(212, 163, 115, 0.45);
  color: transparent !important; /* not FA icons — override .btn i color rule */
}
[id$="-summaryPlayHeader"] .tvih-preview-wave i:nth-child(1) { height: 35%; animation-delay: 0s; }
[id$="-summaryPlayHeader"] .tvih-preview-wave i:nth-child(2) { height: 70%; animation-delay: 0.12s; }
[id$="-summaryPlayHeader"] .tvih-preview-wave i:nth-child(3) { height: 50%; animation-delay: 0.24s; }
[id$="-summaryPlayHeader"] .tvih-preview-wave i:nth-child(4) { height: 85%; animation-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
  [id$="-summaryPlayHeader"] .tvih-preview-wave i {
    animation: none;
    opacity: 0.85;
  }
}

.prod-badge {
  background: #000;
  border: 1.6px solid #d4a373;
  color: #999999;
  font-size: 1.04rem;
  padding: 0.24rem 0.64rem;
  border-radius: 0.32rem;
}
.prod-badge i {
  /* no infinite spin — motion discipline */
  font-size: 0.64em;
  color: #d4a373;
}

/* Coming Soon ribbons: black text, clock icon as black circle with gold hands */
.ribbon-glass .ribbon-box {
  color: #000 !important;
}
.ribbon-glass .ribbon-box i {
  background-color: #000 !important;
  color: #d4a373 !important;
  border-radius: 50% !important;
  padding: 3px !important;
  line-height: 1 !important;
  display: inline-block !important;
}






/* ========== P3 Motion discipline ========== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .tvih-hero #hero-video,
  #footer-video {
    transition: none !important;
  }
  .tvih-hero h1 .hero-glow,
  .tvih-free-lead .hero-glow,
  .tvih-free-sub .hero-glow,
  .tvih-section-lead .hero-glow,
  .tvih-gift-lead .hero-glow {
    animation: none !important;
    text-shadow: 0 0 8px rgba(212, 163, 115, 0.65) !important;
  }
  .tvih-hero-scroll {
    animation: none !important;
  }
}
/* Prefer cheaper hover: transform only on interactive cards already limited;
   disable continuous scroll-cue when user isn't at top (handled by CSS only on hero) */
.tvih-free-tile,
.tvih-shelf-card,
.tvih-story-beat,
.tvih-door {
  will-change: auto;
}

/* ========== Library search strip (below Read Now) ========== */
.tvih-libsearch {
  background: #000;
  border-top: 1px solid rgba(212, 163, 115, 0.18);
  padding: 2.75rem 1.25rem 3rem;
  position: relative;
}
.tvih-libsearch::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(212, 163, 115, 0.07) 0%, transparent 60%);
}
.tvih-libsearch-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
/*
 * Shared strip kicker + title stack — same tight gap everywhere
 * (free-start / hear / on display / story / shelves / stacks / membership).
 * OneUI `.content p` margins must not loosen featured “On display → The library”.
 */
.tvih-strip-kicker,
.tvih-libsearch-kicker,
.tvih-gift-kicker,
.tvih-membership-kicker,
.content .tvih-strip-kicker,
.content p.tvih-strip-kicker,
.tvih-procession .tvih-strip-kicker,
.tvih-story-strip .tvih-strip-kicker {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(212, 163, 115, 0.85);
  margin: 0 0 0.4rem !important; /* kicker → title gap (all strips) */
  padding: 0 !important;
  display: block;
  line-height: 1.3;
}
.tvih-featured-section > .tvih-strip-kicker,
.tvih-hear-strip .tvih-strip-kicker,
.tvih-free-band .tvih-strip-kicker,
.tvih-story-strip .tvih-strip-kicker,
.tvih-procession .tvih-strip-kicker,
.tvih-libsearch .tvih-strip-kicker {
  text-align: center;
}
/* Title flush under kicker — kill OneUI / browser h2 top margin */
.tvih-strip-kicker + .tvih-section-title,
.tvih-strip-kicker + .tvih-hear-heading,
.tvih-strip-kicker + h2,
.tvih-libsearch-kicker + .tvih-section-title,
.tvih-libsearch-kicker + h2,
.tvih-gift-kicker + .tvih-gift-title,
.tvih-gift-kicker + h2,
.tvih-membership-kicker + .tvih-membership-title,
.tvih-membership-kicker + h2,
.tvih-featured-section > .tvih-section-title,
.tvih-story-strip .tvih-section-title,
.tvih-procession .tvih-section-title,
.tvih-libsearch .tvih-section-title,
.tvih-free-band #free-start-heading,
.tvih-free-band h2.tvih-hear-heading {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.tvih-libsearch .tvih-section-title {
  margin-bottom: 0.35rem !important;
}
.tvih-libsearch .tvih-section-lead {
  margin-bottom: 1.5rem;
  max-width: 34em;
}
.tvih-libsearch-form {
  margin: 0 auto 1rem;
  max-width: 640px;
}
.tvih-libsearch-field {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid rgba(212, 163, 115, 0.42);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(22, 18, 14, 0.96) 0%, rgba(8, 8, 8, 0.98) 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35) inset,
    0 0 32px rgba(212, 163, 115, 0.08),
    0 12px 36px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tvih-libsearch-field:focus-within {
  border-color: rgba(212, 163, 115, 0.78);
  box-shadow:
    0 0 0 1px rgba(212, 163, 115, 0.15) inset,
    0 0 40px rgba(212, 163, 115, 0.16),
    0 12px 36px rgba(0, 0, 0, 0.5);
}
.tvih-libsearch-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  flex-shrink: 0;
  color: rgba(212, 163, 115, 0.75);
  font-size: 0.95rem;
  pointer-events: none;
}
.tvih-libsearch-field input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  border: none !important;
  background: transparent !important;
  color: #f0ebe4 !important;
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
  font-size: 1.05rem !important;
  padding: 0.95rem 0.35rem 0.95rem 0 !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}
.tvih-libsearch-field input[type="search"]::placeholder {
  color: #666 !important;
  opacity: 1;
}
.tvih-libsearch-field input[type="search"]::-webkit-search-decoration,
.tvih-libsearch-field input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.tvih-libsearch-submit {
  flex: 0 0 auto;
  border: none;
  border-left: 1px solid rgba(212, 163, 115, 0.28);
  background: rgba(212, 163, 115, 0.12);
  color: #d4a373;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  padding: 0 1.25rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.tvih-libsearch-submit:hover,
.tvih-libsearch-submit:focus-visible {
  background: #d4a373;
  color: #111;
  outline: none;
}
.tvih-libsearch-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin: 0 auto 1.35rem;
  max-width: 640px;
}
.tvih-libsearch-chip {
  border: 1px solid rgba(212, 163, 115, 0.32);
  background: rgba(212, 163, 115, 0.06);
  color: #c4b5a3;
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 0.82rem;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.tvih-libsearch-chip:hover,
.tvih-libsearch-chip:focus-visible {
  border-color: rgba(212, 163, 115, 0.7);
  color: #d4a373;
  background: rgba(212, 163, 115, 0.12);
  box-shadow: 0 0 14px rgba(212, 163, 115, 0.12);
  outline: none;
}
.tvih-libsearch-results {
  text-align: left;
  max-width: 720px;
  margin: 0 auto;
  max-height: min(62vh, 640px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.15rem 0.35rem 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 163, 115, 0.4) #111;
}
.tvih-libsearch-results::-webkit-scrollbar { width: 6px; }
.tvih-libsearch-results::-webkit-scrollbar-track { background: #111; border-radius: 999px; }
.tvih-libsearch-results::-webkit-scrollbar-thumb {
  background: rgba(212, 163, 115, 0.4);
  border-radius: 999px;
}
.tvih-libsearch-idle {
  text-align: center;
  padding: 1.75rem 1rem 1rem;
  color: #666;
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
}
.tvih-libsearch-idle i {
  display: block;
  font-size: 1.75rem;
  color: rgba(212, 163, 115, 0.4);
  margin-bottom: 0.75rem;
}
.tvih-libsearch-idle p { margin: 0; max-width: 28em; margin-inline: auto; }
.tvih-libsearch-summary {
  margin-bottom: 0.85rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(212, 163, 115, 0.15);
  font-family: 'Atkinson Hyperlegible', sans-serif;
}
.tvih-libsearch-count {
  color: #d4a373;
  font-weight: 600;
}
.tvih-libsearch-group {
  margin-bottom: 1.1rem;
}
.tvih-libsearch-group-head {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  margin: 0 0 0.45rem;
  padding-left: 0.1rem;
}
.tvih-libsearch-card {
  background:
    radial-gradient(ellipse 100% 80% at 0% 0%, rgba(212, 163, 115, 0.06) 0%, transparent 55%),
    rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(68, 68, 68, 0.95);
  border-radius: 10px;
  padding: 0.85rem 0.95rem 0.8rem;
  margin-bottom: 0.55rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.tvih-libsearch-card:hover {
  border-color: rgba(212, 163, 115, 0.45);
  box-shadow: 0 0 20px rgba(212, 163, 115, 0.08);
}
.tvih-libsearch-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
}
.tvih-libsearch-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}
.tvih-libsearch-card-book {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  color: #d4a373;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.tvih-libsearch-card-para {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 0.78rem;
  color: #888;
}
.tvih-libsearch-snippet {
  font-family: 'Atkinson Hyperlegible', Georgia, serif;
  font-size: 0.96rem;
  line-height: 1.55;
  /* Muted gray body — match reading-idle / nav mute */
  color: #999999 !important;
  margin: 0;
}
/* Matched term(s): white + gold hero-glow pulse (same family as section titles) */
.tvih-libsearch-snippet .search-match,
.tvih-libsearch-results .search-match {
  color: #ffffff !important;
  font-weight: 600 !important;
  background: transparent !important;
  text-shadow: 0 0 10px #d4a373, 0 0 18px #d4a373 !important;
  animation: pulseGlowDark 2.4s ease-in-out infinite !important;
  border-radius: 0;
  padding: 0;
}
@media (prefers-reduced-motion: reduce) {
  .tvih-libsearch-snippet .search-match,
  .tvih-libsearch-results .search-match {
    animation: none !important;
    text-shadow: 0 0 8px #d4a373 !important;
  }
}
.tvih-libsearch-jump {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid rgba(212, 163, 115, 0.55);
  background: rgba(212, 163, 115, 0.1);
  color: #d4a373;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.38rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.tvih-libsearch-jump:hover,
.tvih-libsearch-jump:focus-visible {
  background: #d4a373;
  border-color: #d4a373;
  color: #111;
  box-shadow: 0 0 16px rgba(212, 163, 115, 0.35);
  outline: none;
}
.tvih-libsearch-jump i { font-size: 0.72rem; }
.tvih-libsearch-more {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  margin-left: 0.15rem !important;
}
.tvih-libsearch-loading .spinner-border {
  width: 1.75rem;
  height: 1.75rem;
  border-width: 0.15em;
  color: #d4a373 !important;
}
@media (max-width: 575.98px) {
  .tvih-libsearch { padding: 2.25rem 1rem 2.5rem; }
  .tvih-libsearch-submit { padding: 0 0.9rem; font-size: 0.85rem; }
  .tvih-libsearch-field input[type="search"] { font-size: 0.98rem !important; }
  .tvih-libsearch-card-top { flex-wrap: wrap; }
  .tvih-libsearch-jump { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .tvih-libsearch-field,
  .tvih-libsearch-chip,
  .tvih-libsearch-card,
  .tvih-libsearch-jump { transition: none; }
}

/* ========== §9 Membership moment — once, beautifully ========== */
/* Parked under the gift strip for now. Restore: drop this rule and `hidden` on #membership. */
#membership.tvih-membership {
  display: none !important;
}
.tvih-membership {
  background: #000;
  border-top: 1px solid rgba(212, 163, 115, 0.22);
  padding: 3rem 1.25rem 3.25rem;
}
.tvih-membership-inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  /* Glass panel, gold edge — tone of modal benefits, not density */
  border: 1px solid rgba(212, 163, 115, 0.48);
  border-radius: 16px;
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(212, 163, 115, 0.10) 0%, transparent 55%),
    linear-gradient(180deg, rgba(20, 16, 12, 0.92) 0%, rgba(8, 8, 8, 0.96) 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4) inset,
    0 0 40px rgba(212, 163, 115, 0.12),
    0 18px 48px rgba(0, 0, 0, 0.55);
  padding: 2.15rem 1.6rem 2rem;
}
.tvih-membership-title {
  font-family: 'Cinzel', serif !important;
  font-size: clamp(1.28rem, 3.2vw, 1.65rem) !important;
  font-weight: 600 !important;
  color: #999999 !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
  margin: 0 0 0.85rem !important; /* top 0 — kicker gap only from kicker margin-bottom */
  line-height: 1.3;
  text-shadow: 0 0 24px rgba(212, 163, 115, 0.25);
}
.tvih-membership-benefits {
  font-family: 'Atkinson Hyperlegible', Georgia, serif;
  font-size: 0.98rem;
  color: #b8b0a4;
  line-height: 1.55;
  margin: 0 auto 1.35rem;
  max-width: 26em;
}
.tvih-membership-price {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #d4a373;
  letter-spacing: 0.02em;
  margin: 0 0 1.15rem;
}
.tvih-membership-price span {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-weight: 400;
  font-size: 0.88rem;
  color: #888;
  letter-spacing: 0;
}
.tvih-membership-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: #d4a373 !important;
  border: 1px solid #d4a373 !important;
  color: #111 !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  letter-spacing: 0.02em;
  padding: 0.75rem 1.65rem !important;
  border-radius: 0.375rem;
  box-shadow: 0 0 20px rgba(212, 163, 115, 0.4);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
  text-decoration: none !important;
}
.tvih-membership-cta:hover {
  background: #e0b484 !important;
  border-color: #e0b484 !important;
  color: #000 !important;
  box-shadow: 0 0 28px rgba(212, 163, 115, 0.65);
  transform: translateY(-1px);
}
.tvih-membership-note {
  margin: 1rem 0 0;
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 0.82rem;
  color: #666;
}
.tvih-membership-note a {
  color: #d4a373 !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 163, 115, 0.35);
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  padding: 0;
  font: inherit;
}
.tvih-membership-note a:hover {
  border-bottom-color: #d4a373;
}
/* Paid: quiet confirmation, same glass shell */
.tvih-membership.is-member .tvih-membership-guest { display: none; }
.tvih-membership:not(.is-member) .tvih-membership-member { display: none; }
.tvih-membership-member-icon {
  color: #d4a373;
  font-size: 1.75rem;
  margin-bottom: 0.65rem;
  display: block;
}
.tvih-membership-member .tvih-membership-title {
  font-size: clamp(1.15rem, 2.8vw, 1.4rem) !important;
}
.tvih-membership-member .tvih-membership-benefits {
  margin-bottom: 0;
  color: #999;
}
@media (prefers-reduced-motion: reduce) {
  .tvih-membership-cta:hover { transform: none; }
}

/* ========== Gift membership — a tessera, written for someone ========== */
.tvih-gift {
  background: #000;
  border-top: 1px solid rgba(212, 163, 115, 0.2);
  padding: 3.25rem 1.25rem 3.5rem;
  position: relative;
  overflow: hidden;
}
.tvih-gift::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(212, 163, 115, 0.14) 0%, transparent 58%),
    radial-gradient(ellipse 40% 40% at 18% 110%, rgba(212, 163, 115, 0.05) 0%, transparent 70%);
}
.tvih-gift-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.tvih-gift-title {
  font-family: 'Cinzel', serif !important;
  font-size: clamp(1.45rem, 4vw, 2.05rem) !important;
  font-weight: 600 !important;
  color: #999999 !important;
  border-bottom: none !important;
  padding: 0 !important;
  margin: 0 0 0.55rem !important;
  line-height: 1.25;
  text-shadow: 0 0 28px rgba(212, 163, 115, 0.28);
}
.tvih-gift-lead {
  font-family: 'Atkinson Hyperlegible', Georgia, serif;
  font-size: 1.02rem;
  color: #b8b0a4;
  line-height: 1.55;
  margin: 0 auto 1.65rem;
  padding-bottom: 10px;
  max-width: 28em;
}
.tvih-gift-tessera {
  position: relative;
  margin: calc(2.4rem + 10px) auto 0;
  padding: 2.7rem 1.55rem 1.7rem;
  border-radius: 18px;
  border: 1px solid rgba(212, 163, 115, 0.48);
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(212, 163, 115, 0.11) 0%, transparent 52%),
    linear-gradient(180deg, rgba(22, 17, 12, 0.94) 0%, rgba(8, 7, 6, 0.97) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(212, 163, 115, 0.16),
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 0 48px rgba(212, 163, 115, 0.14),
    0 22px 50px rgba(0, 0, 0, 0.55);
}
.tvih-gift-seal {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4.4rem;
  height: 4.4rem;
  transform: translate(-50%, -54%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #f0d2a8 0%, #d4a373 38%, #a56b3a 72%, #6e4220 100%);
  box-shadow:
    0 0 0 4px rgba(8, 6, 4, 0.85),
    0 0 0 5px rgba(212, 163, 115, 0.45),
    0 10px 22px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #2a160c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  pointer-events: none;
}
.tvih-gift-seal i {
  line-height: 1;
  transform: translateY(1px);
}
.tvih-gift-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem 1.5rem;
  text-align: left;
}
@media (min-width: 640px) {
  .tvih-gift-form {
    grid-template-columns: 1fr 1fr;
  }
  .tvih-gift-field-note,
  .tvih-gift-actions {
    grid-column: 1 / -1;
  }
}
.tvih-gift-col-label {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(212, 163, 115, 0.88);
  margin: 0 0 0.45rem;
}

.tvih-gift-field {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.tvih-gift-field input,
.tvih-gift-field textarea {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(212, 163, 115, 0.32);
  border-radius: 0;
  color: #f2ebe3;
  font-family: 'Atkinson Hyperlegible', Georgia, serif;
  font-size: 16px; /* Safari: no zoom-on-focus */
  line-height: 1.4;
  padding: 0.35rem 0 0.4rem;
  outline: none;
  resize: none;
  transition: border-color 0.15s ease;
}
.tvih-gift-field input::placeholder,
.tvih-gift-field textarea::placeholder {
  color: #6b645c;
  font-style: italic;
}
.tvih-gift-field input:hover,
.tvih-gift-field textarea:hover {
  border-bottom-color: rgba(212, 163, 115, 0.55);
}
.tvih-gift-field input:focus,
.tvih-gift-field textarea:focus {
  border-bottom-color: #d4a373;
}
.tvih-gift-field textarea {
  min-height: 2.15em;
}
.tvih-gift-actions {
  text-align: center;
  margin-top: 0.35rem;
}
.tvih-gift-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: #d4a373 !important;
  border: 1px solid #d4a373 !important;
  color: #111 !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  letter-spacing: 0.02em;
  padding: 0.78rem 1.7rem !important;
  border-radius: 0.375rem;
  box-shadow: 0 0 22px rgba(212, 163, 115, 0.42);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
.tvih-gift-cta:hover,
.tvih-gift-cta:focus-visible {
  background: #e0b484 !important;
  border-color: #e0b484 !important;
  color: #000 !important;
  box-shadow: 0 0 30px rgba(212, 163, 115, 0.65);
  transform: translateY(-1px);
  outline: none;
}
.tvih-gift-cta:disabled {
  opacity: 0.65;
  cursor: wait;
  transform: none;
}
.tvih-gift-note {
  margin: 0.85rem 0 0;
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 0.8rem;
  color: #6b6b6b;
  text-align: center;
}
.tvih-gift-err {
  margin: 0.65rem 0 0;
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: 0.85rem;
  color: #e0b484;
  text-align: center;
  min-height: 1.2em;
}
.tvih-gift-err:empty { display: none; }
.tvih-gift-sent {
  display: none;
  padding: 1.4rem 0.5rem 0.4rem;
}
.tvih-gift.is-sent .tvih-gift-form,
.tvih-gift.is-sent .tvih-gift-lead { display: none; }
.tvih-gift.is-sent .tvih-gift-sent { display: block; }
.tvih-gift-sent-title {
  font-family: 'Cinzel', serif;
  font-size: 1.25rem;
  color: #d4a373;
  margin: 0 0 0.5rem;
}
.tvih-gift-sent p {
  font-family: 'Atkinson Hyperlegible', Georgia, serif;
  color: #b8b0a4;
  margin: 0 auto;
  max-width: 26em;
  line-height: 1.55;
}
@media (max-width: 575.98px) {
  .tvih-gift { padding: 2.75rem 1rem 3rem; }
  .tvih-gift-tessera { padding: 2.2rem 1.15rem 1.45rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tvih-gift-cta:hover { transform: none; }
}