:root{
  --bg: #050505;
  --bg2: #0b0b0c;
  --fg: rgba(255,255,255,.92);
  --fg2: rgba(255,255,255,.72);
  --fg3: rgba(255,255,255,.52);
  --line: rgba(255,255,255,.12);
  --card: rgba(8,8,9,.58);
  --shadow: 0 24px 90px rgba(0,0,0,.55);
  --radius: 18px;
  --radius2: 26px;
  --font-title: "Cinzel", ui-serif, Georgia, "Times New Roman", Times, serif;
  /* More readable cinematic serif for long-form copy */
  --font-body: "Source Serif 4", ui-serif, Georgia, "Times New Roman", Times, serif;
}

*{box-sizing:border-box}
html{height:100%}
/* Ensure the HTML `hidden` attribute always wins (we use it for scene transitions). */
[hidden]{display:none !important}
body{
  margin:0;
  min-height:100%;
  font-family: var(--font-body);
  background: radial-gradient(1200px 780px at 50% 10%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--fg);
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 18px;
}
/* Improve tap responsiveness on mobile without interfering with scrolling. */
html, body{touch-action: manipulation}
*{-webkit-tap-highlight-color: transparent}
/* Keep scrolling available but remove “webpage scrollbar” cues (supports the fixed-stage illusion). */
body{scrollbar-width:none}
body::-webkit-scrollbar{width:0; height:0}

/* Lock scroll during intro; unlock after entrance. */
body:not(.is-entered){overflow:hidden}
body.is-trailer{overflow:hidden}
body.is-addison{overflow:hidden}
/* Prevent swipe-to-skip gestures from also scrolling into the next scene. */
body.is-skip-lock{overflow:hidden}

/* Hide nav during intro/trailer/interstitial */
body:not(.is-entered) .roadmap{display:none}
body.is-trailer .roadmap{display:none}
body.is-addison .roadmap{display:none}

/* --- Roadmap dock (right-side scroll assist) */
.roadmap{
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  z-index: 89;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(520px 220px at 0% 0%, rgba(255,255,255,.06), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.44));
  box-shadow: 0 34px 120px rgba(0,0,0,.65);
  backdrop-filter: blur(10px);
}
.roadmap__item{
  --mag: 1;
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.84);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  cursor: pointer;
  transform: translate3d(0,0,0) scale(var(--mag));
  transform-origin: right center;
  transition: transform .14s ease, background .14s ease;
  will-change: transform;
}
.roadmap:not(:hover):not(:focus-within) .roadmap__item{
  justify-content: center;
  gap: 0;
  padding-inline: 8px;
}
.roadmap__item:hover{background: rgba(255,255,255,.08)}
.roadmap__item:focus-visible{
  outline: 2px solid rgba(255,255,255,.42);
  outline-offset: 2px;
}
.roadmap__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  box-shadow: 0 10px 28px rgba(0,0,0,.42);
}
.roadmap__item.is-active{background: rgba(255,255,255,.10)}
.roadmap__item.is-active .roadmap__dot{background: rgba(255,255,255,.92)}
.roadmap__label{
  font-family: var(--font-title);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 720;
  font-size: 10px;
  color: rgba(255,255,255,.78);
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transform: translate3d(8px, 0, 0);
  transition: opacity .18s ease, transform .18s ease, max-width .18s ease;
}
.roadmap:hover .roadmap__label,
.roadmap:focus-within .roadmap__label{
  opacity: 1;
  max-width: 180px;
  transform: translate3d(0, 0, 0);
}

/* Initial “there’s more” cue until the user scrolls */
@keyframes roadmapPulse{
  0%, 100%{transform: scale(1); opacity: .9}
  50%{transform: scale(1.35); opacity: 1}
}
body:not(.has-scrolled) .roadmap__item[data-roadmap-jump="overview-1"] .roadmap__dot{
  animation: roadmapPulse 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  body:not(.has-scrolled) .roadmap__item[data-roadmap-jump="overview-1"] .roadmap__dot{
    animation: none;
  }
}

@media (max-width: 980px){
  /* Keep navigation available on smaller screens (menu removed). Show a compact dots-only dock. */
  .roadmap{
    right: calc(12px + env(safe-area-inset-right, 0px));
    padding: 8px;
    gap: 6px;
    opacity: 0;
    pointer-events:none;
    transform: translate3d(14px, -50%, 0);
    transition: opacity .22s ease, transform .22s ease;
  }
  .roadmap__item{
    padding: 8px;
  }
  .roadmap__label{
    display:none;
  }

  /* Mobile nav peek: fade in, hold, then JS hides on next scroll gesture */
  body.is-roadmap-peek .roadmap{
    opacity: .96;
    pointer-events:auto;
    transform: translate3d(0, -50%, 0);
  }
}

button{font-family: inherit}

/* --- Intro (black screen, white text, cinematic reveal) */
.intro{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  background: #000;
}
.intro__frame{
  width:min(980px, calc(100% - 44px));
  padding: 22px 0;
}
.intro__author{
  margin-top: 18px;
  font-family: var(--font-title);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
  color: rgba(255,255,255,.55);
  opacity:0;
  transform: translate3d(0, 10px, 0);
  filter: blur(10px);
  animation: introLineIn 2500ms cubic-bezier(.2,.85,.2,1) forwards;
  animation-delay: var(--d, 0ms);
  will-change: transform, opacity, filter;
}
.intro__quote{
  margin:0;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.12;
  letter-spacing: .01em;
}
.intro__line{
  display:block;
  opacity:0;
  transform: translate3d(0, 14px, 0);
  filter: blur(10px);
  animation: introLineIn 2500ms cubic-bezier(.2,.85,.2,1) forwards;
  animation-delay: var(--d, 0ms);
  will-change: transform, opacity, filter;
}
.intro__line + .intro__line{margin-top: 14px}
.intro__line--dim{color: rgba(255,255,255,.76)}
.intro__line--nowrapWide{white-space: normal}
@media (min-width: 980px){
  .intro__line--nowrapWide{white-space: nowrap}
}
.intro__skip{
  margin-top: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.84);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  opacity:0;
  transform: translate3d(0, 10px, 0);
  filter: blur(10px);
  visibility:hidden;
  pointer-events:none;
  animation: introBtnIn 1000ms cubic-bezier(.2,.85,.2,1) forwards;
  animation-delay: var(--d, 0ms);
  will-change: transform, opacity, filter;
}
.intro__skip:hover{background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.26)}
.intro__skip:active{transform: translateY(1px)}

.intro.is-exiting{
  pointer-events:none;
  animation: introFadeOut 760ms cubic-bezier(.2,.85,.2,1) forwards;
}

@keyframes introLineIn{
  0%{opacity:0; transform: translate3d(0, 16px, 0); filter: blur(12px)}
  100%{opacity:1; transform: translate3d(0, 0, 0); filter: blur(0)}
}
@keyframes introFadeOut{
  0%{opacity:1}
  100%{opacity:0; pointer-events:none}
}
@keyframes introBtnIn{
  0%{opacity:0; transform: translate3d(0, 12px, 0); filter: blur(12px); visibility:hidden; pointer-events:none}
  99%{visibility:hidden; pointer-events:none}
  100%{opacity:1; transform: translate3d(0, 0, 0); filter: blur(0); visibility:visible; pointer-events:auto}
}

/* --- Fixed stage + scroll timeline */
.stage{
  position:fixed;
  inset:0;
  overflow:hidden;
  /* Mobile browser UI can change viewport height; prefer dynamic units when supported. */
  height: 100vh;
  height: 100svh;
  height: 100dvh;
}
.scrollspace{
  height: 520vh; /* controls how “long” the story feels */
  width: 1px;
}

.stage__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
  transform: translate3d(0,0,0) scale(1.03);
  opacity:.92;
  will-change: transform;
  z-index: 5;
}
.stage__video--map{opacity:0}

.bg-slides{
  position:absolute;
  inset:0;
  z-index: 12;
  pointer-events:none;
  background: #000;
  opacity: 0;
  will-change: opacity;
}
.bg-slide{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
  opacity:0;
  transform: translate3d(0,0,0) scale(1.02);
  transition: opacity 520ms ease;
  will-change: opacity;
}
.bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
  opacity:0;
  transform: translate3d(0,0,0) scale(1.02);
  transition: opacity 520ms ease;
  will-change: opacity;
}
.bg-video::after{content:none}
.bg-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1100px 760px at 50% 15%, rgba(0,0,0,.28), transparent 58%),
    radial-gradient(1100px 860px at 50% 120%, rgba(0,0,0,.62), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.12));
}

.stage__trailer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
  opacity:0;
  pointer-events:none;
  z-index: 40;
  background: #000;
}
body.is-trailer .stage__trailer{
  opacity: 1;
  pointer-events:auto;
  touch-action: manipulation;
}
body.is-trailer .stage__video{
  opacity: 0;
}
body.is-addison .stage__video{
  opacity: 0;
}
body.is-addison .bg-slides{
  opacity: 0 !important;
}
body.is-addison .overlay{
  opacity: 0 !important;
  transform: none !important;
}
body.is-trailer .overlay{
  opacity: 0 !important;
  transform: none !important;
}

/* Timestamp cursor during trailer playback */
body.is-trailer,
body.is-addison{cursor:none}
.is-muted-video{cursor:auto !important}
.is-muted-video *{cursor:auto}
.trailer-cursor{
  position:fixed;
  left:0;
  top:0;
  transform: translate3d(-9999px, -9999px, 0);
  z-index: 60;
  pointer-events:none;
  mix-blend-mode: difference;
  color: rgba(255,255,255,.92);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  letter-spacing: .02em;
}
.trailer-cursor{display:none}
body.is-trailer .trailer-cursor{display:block}
body.is-addison .trailer-cursor{display:block}
/* When a video is muted, show the unmute overlay instead of the cursor UI. */
body.is-muted-video .trailer-cursor{display:none !important}
.trailer-cursor__time{
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}
.trailer-cursor__tip{
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  text-align:center;
}

.stage__interstitial{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
  opacity:0;
  pointer-events:none;
  z-index: 41;
  background: #000;
}
body.is-addison .stage__interstitial{
  opacity:1;
  pointer-events:auto;
  touch-action: manipulation;
}

/* "Tap to unmute" overlay (shown when video is playing muted) */
.unmuteOverlay{
  position:fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translate3d(-50%, 0, 0);
  z-index: 70;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background:
    radial-gradient(900px 240px at 20% 0%, rgba(255,255,255,.07), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.46), rgba(0,0,0,.78));
  color: rgba(255,255,255,.94);
  font-family: var(--font-title);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 760;
  font-size: 11px;
  box-shadow: 0 34px 120px rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor:pointer;
  pointer-events:auto;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}
.unmuteOverlay:hover{
  border-color: rgba(255,255,255,.32);
  background:
    radial-gradient(900px 240px at 20% 0%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.82));
}
.unmuteOverlay:active{transform: translate3d(-50%, 1px, 0)}
.unmuteOverlay:focus-visible{
  outline: 2px solid rgba(255,255,255,.42);
  outline-offset: 2px;
}

@media (hover: none), (pointer: coarse){
  .unmuteOverlay{
    width: calc(100% - 28px);
    max-width: 520px;
    text-align:center;
  }
}

.stage__vignette{
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:
    radial-gradient(1100px 760px at 50% 15%, rgba(255,255,255,.08), transparent 58%),
    radial-gradient(1100px 860px at 50% 120%, rgba(0,0,0,.86), transparent 55%),
    radial-gradient(1400px 1000px at 50% 50%, transparent 46%, rgba(0,0,0,.78) 100%);
  z-index: 18;
}

.stage__grain{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.28;
  mix-blend-mode: overlay;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 1px, transparent 1px, transparent 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.40'/%3E%3C/svg%3E");
  background-size: auto, 320px 320px;
  animation: grainShift 10s steps(10) infinite;
  z-index: 19;
}
@keyframes grainShift{
  0%{transform: translate3d(0,0,0)}
  10%{transform: translate3d(-2%, -1%, 0)}
  20%{transform: translate3d(-4%, 2%, 0)}
  30%{transform: translate3d(1%, -3%, 0)}
  40%{transform: translate3d(-1%, 4%, 0)}
  50%{transform: translate3d(3%, 1%, 0)}
  60%{transform: translate3d(-3%, -2%, 0)}
  70%{transform: translate3d(2%, 3%, 0)}
  80%{transform: translate3d(-2%, 1%, 0)}
  90%{transform: translate3d(4%, -1%, 0)}
  100%{transform: translate3d(0,0,0)}
}

.overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  padding: 28px;
}
.overlay{contain: layout paint}
.overlay{will-change: transform, opacity}
.overlay{z-index: 30}

/* Episodes dock (bottom cards + hover expand) */
.overlay--episodes{
  display:block;
  pointer-events:none;
}
.episodesTop{
  position:absolute;
  left:0;
  right:0;
  top: clamp(18px, 5vh, 54px);
  display:grid;
  place-items:center;
  padding: 0 28px;
  pointer-events:none;
}
.episodesDock{
  position:absolute;
  left:0;
  right:0;
  bottom: 22px;
  padding: 0 18px;
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items:end;
  pointer-events:auto;
}
.epCard{
  appearance:none;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.74));
  color: rgba(255,255,255,.96);
  border-radius: 18px;
  padding: 14px 14px 12px;
  text-align:left;
  cursor:pointer;
  box-shadow: 0 26px 90px rgba(0,0,0,.55);
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
  will-change: transform;
  min-height: 78px;
  /* Allow the active card to expand and show its full text without an inner scrollbar. */
  max-height: 86vh;
  overflow:hidden;
}
.epCard:focus-visible{
  outline: 2px solid rgba(255,255,255,.42);
  outline-offset: 2px;
}
.epCard__tag{
  font-family: var(--font-title);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 10px;
  color: rgba(255,255,255,.90);
  text-shadow: 0 10px 40px rgba(0,0,0,.60);
}
.epCard__title{
  margin-top: 8px;
  font-family: var(--font-title);
  font-weight: 740;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1.18;
  color: rgba(255,255,255,.99);
}
.epCard__years{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 10px 46px rgba(0,0,0,.62);
}
.epCard__body{
  margin-top: 12px;
  font-size: clamp(16px, .5vw + 14px, 18px);
  line-height: 1.62;
  color: rgba(255,255,255,.99);
  text-shadow: 0 12px 54px rgba(0,0,0,.68);
  max-height: 0;
  opacity: 0;
  overflow:hidden;
  transition: max-height .28s ease, opacity .24s ease;
}

.epCard.is-active,
.epCard:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.28);
}
.epCard.is-active .epCard__body,
.epCard:hover .epCard__body{
  /* Big max-height so the entire synopsis fits (no internal scrolling). */
  max-height: 1400px;
  opacity: 1;
  overflow: hidden;
}

@media (max-width: 980px){
  /* Episodes: switch to swipeable horizontal dock on small screens */
  .episodesDock{
    display:flex;
    gap: 12px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 18px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .episodesDock::-webkit-scrollbar{height:0}
  .episodesDock{scrollbar-width:none}

  .epCard{
    flex: 0 0 min(82vw, 440px);
    scroll-snap-align: start;
    min-height: 72px;
    max-height: 86vh;
  }
  .epCard.is-active, .epCard:hover{transform:none}
  .epCard.is-active .epCard__body,
  .epCard:hover .epCard__body{
    max-height: 1600px;
  }
}

/* Episodes: selected episode panel + filmstrip (hidden by default; enabled on touch/small screens) */
.epSelected{
  display:none;
  pointer-events:none;
  position:absolute;
  left:0;
  right:0;
  top: clamp(14px, 4vh, 38px);
  place-items:center;
  padding: 0 12px;
  z-index: 35;
}
.epFilmstrip{
  display:none;
  pointer-events:auto;
  position:absolute;
  left:0;
  right:0;
  /* Keep above iOS Safari bottom bar */
  bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  justify-content:center;
  gap: 10px;
  padding: 0 12px;
  z-index: 36;
}

/* --- Mobile readability mode + Episodes filmstrip */
@media (max-width: 720px){
  /* Shrink typography/padding so each panel fits a phone viewport more reliably. */
  body{font-size: 14px}
  .overlay{padding: 12px}
  .card{padding: 14px 14px 12px}
  .card--panel{padding: 16px}
  .card__label{margin-bottom: 8px}
  .prose p{
    margin: 0 0 9px;
    font-size: 14px;
    line-height: 1.48;
  }
  .prose .lead{
    font-size: 14px;
    line-height: 1.48;
  }
  .callout--dark{
    margin-top: 12px;
    padding: 16px 14px 14px;
  }
  .callout--dark .callout__text{
    font-size: 14px;
    line-height: 1.48;
  }
  .facts--dark .fact{padding: 10px 12px}
  .facts--dark .fact__v{font-size: 14px}

  /* Overview portraits: keep them much smaller on phones to preserve vertical space. */
  .portraits{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    max-width: 22%;
    margin-top: 6px;
  }
  .portrait{border-radius: 12px}
  .portrait img{
    aspect-ratio: 1 / 1;
    object-position: 50% 38%;
  }
  .portraits .portrait:nth-child(2) img{object-position: 50% 24%}
  .portrait figcaption{
    padding: 6px 7px 7px;
    font-size: 7px;
    letter-spacing: .12em;
  }

  /* Imperative: tighten a bit further (this panel is text-heavy). */
  .overlay[data-scene="imperative"] .prose .lead{
    font-size: 14px;
    line-height: 1.38;
  }
  .overlay[data-scene="imperative"] .callout--dark{
    margin-top: 10px;
    padding-top: 36px;
  }
  .overlay[data-scene="imperative"] .callout--dark .callout__text{
    font-size: 14px;
    line-height: 1.36;
  }

  /* Episodes: mobile filmstrip picker + selected episode display */
  .episodesTop{display:none}
  .episodesDock{display:none}
  .epSelected{display:grid}
  .epFilmstrip{display:flex}
}

/* Treat touch devices as "mobile UX" even on wider viewports (e.g., iPhone landscape / small tablets). */
@media (hover: none), (pointer: coarse){
  .episodesTop{display:none}
  .episodesDock{display:none}
  .epSelected{display:grid}
  .epFilmstrip{display:flex}
}
.epSelected__card{
  width:min(980px, 100%);
}
.epSelected__title{
  margin-top: 8px;
  font-family: var(--font-title);
  font-weight: 760;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1.18;
  color: rgba(255,255,255,.94);
}
.epSelected__years{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 10px 46px rgba(0,0,0,.62);
}
.epSelected__body{
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.48;
  color: rgba(255,255,255,.96);
  text-shadow: 0 12px 54px rgba(0,0,0,.68);
}
.epChip{
  appearance:none;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.86);
  border-radius: 999px;
  padding: 10px 12px;
  font-family: var(--font-title);
  letter-spacing:.20em;
  text-transform: uppercase;
  font-weight: 760;
  font-size: 10px;
  cursor:pointer;
}
.epChip.is-active{
  border-color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.94);
}
.epChip:focus-visible{
  outline: 2px solid rgba(255,255,255,.42);
  outline-offset: 2px;
}

/* Trailer/Addison: show a static "Tap to Skip" hint on touch devices (cursor UI is mouse-driven). */
@media (hover: none), (pointer: coarse){
  body.is-trailer, body.is-addison{cursor:auto}

  body.is-trailer .trailer-cursor,
  body.is-addison .trailer-cursor{
    left: 50%;
    top: auto;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    transform: translate3d(-50%, 0, 0);
    mix-blend-mode: normal;
    opacity: .92;
  }
  .trailer-cursor__time{display:none}
  .trailer-cursor__tip{
    margin-top: 0;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(0,0,0,.42);
    backdrop-filter: blur(8px);
  }

  /* Safe-area nudge for the menu button on notched devices */
}

/* Title layout: more side padding + better readability over video */
.overlay--title{
  text-align:center;
}
.overlay--title .overlay__inner{
  width: min(1120px, 100%);
  padding-inline: clamp(28px, 6vw, 84px);
  position: relative;
}
.overlay--title .overlay__inner::before{
  content:"";
  position:absolute;
  inset: -28px -18px;
  border-radius: 32px;
  background:
    radial-gradient(900px 420px at 50% 10%, rgba(0,0,0,.55), transparent 62%),
    radial-gradient(900px 520px at 50% 90%, rgba(0,0,0,.42), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.08));
  pointer-events:none;
  z-index:-1;
}
.overlay__kicker{
  display:inline-flex;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight: 700;
  font-size: 13px;
  color: rgba(255,255,255,.80);
  text-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.overlay__title{
  margin: 14px 0 0;
  font-family: var(--font-title);
  font-weight: 760;
  letter-spacing: .06em;
  line-height: .96;
  text-transform: uppercase;
  font-size: clamp(42px, 6.8vw, 92px);
  color: rgba(255,255,255,.93);
  text-shadow: 0 20px 90px rgba(0,0,0,.62);
}
.overlay__titleLine{
  display:inline-block;
  transform-origin: 50% 60%;
  will-change: transform;
}
body.is-home .overlay__titleLine--a{
  animation: titleScaleA 4.2s cubic-bezier(.2,.85,.2,1) both;
}
body.is-home .overlay__titleLine--b{
  animation: titleScaleB 4.2s cubic-bezier(.2,.85,.2,1) both;
  animation-delay: 120ms;
}
@keyframes titleScaleA{
  0%{transform: scale(1.07)}
  100%{transform: scale(1)}
}
@keyframes titleScaleB{
  0%{transform: scale(1.09)}
  100%{transform: scale(1)}
}
.overlay__slash{
  display:inline-block;
  margin-inline: 10px;
  font-weight: 650;
  letter-spacing: .02em;
  color: rgba(255,255,255,.72);
}
.overlay__sub{
  margin: 14px 0 0;
  font-size: clamp(17px, 2.4vw, 24px);
  color: rgba(255,255,255,.88);
  max-width: 68ch;
  text-shadow: 0 22px 90px rgba(0,0,0,.68);
  display:inline-block;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
}
.overlay__prompt{
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
  text-shadow: 0 18px 70px rgba(0,0,0,.70);
}

.card{
  width:min(760px, 100%);
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background: radial-gradient(900px 320px at 20% 0%, rgba(255,255,255,.06), transparent 60%), var(--card);
  box-shadow: var(--shadow);
  padding: 22px 22px 20px;
}
.card{contain: paint}
.card{will-change: transform, opacity}
@supports (backdrop-filter: blur(8px)){
  /* disabled by default for performance; can be enabled later if desired */
  .card.is-glass{backdrop-filter: blur(10px)}
}
.card--wide{width:min(860px, 100%)}
.card--panel{
  width:min(980px, 100%);
  padding: clamp(22px, 2.2vw, 30px);
}

/* Subtle readability boost on the busiest backgrounds (keep it understated). */
@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))){
  .overlay[data-scene="overview-3"] .card--panel,
  .overlay[data-scene="imperative"] .card--panel{
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    /* Nudge background slightly darker so the blur reads as "clarity" not "glass." */
    background:
      radial-gradient(900px 320px at 20% 0%, rgba(255,255,255,.06), transparent 60%),
      rgba(8,8,9,.66);
  }
}

/* Reusable in-card scroll prompt */
.scrollPrompt{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  font-family: var(--font-title);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 750;
  font-size: 11px;
  color: rgba(255,255,255,.62);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.scrollPrompt::after{
  content:"↓";
  font-size: 12px;
  color: rgba(255,255,255,.55);
}
.scrollPrompt--alt{
  border-top-color: rgba(255,255,255,.08);
  color: rgba(255,255,255,.68);
}
.scrollPrompt--alt::after{
  content:"";
}

/* Overview portraits (Lewis / Tolkien) */
.portraits{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 75%;
  margin-inline: auto;
}
.portrait{
  margin:0;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  box-shadow: 0 26px 90px rgba(0,0,0,.55);
}
.portrait img{
  display:block;
  width:100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(.92) contrast(1.06) brightness(.92);
}
/* Tolkien portrait: keep more of the top of the frame visible */
.portraits .portrait:nth-child(2) img{
  object-position: 50% 22%;
}
.portrait figcaption{
  padding: 12px 14px 13px;
  font-family: var(--font-title);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(255,255,255,.72);
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.42));
}
/* On medium widths we stack portraits; on phones we keep them side-by-side and small (see <=720px rules). */
@media (max-width: 860px) and (min-width: 721px){
  .portraits{grid-template-columns: 1fr}
  .portraits{max-width: 100%}
}
.card__label{
  font-family: var(--font-title);
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight: 700;
  font-size: 11px;
  color: rgba(255,255,255,.60);
  margin-bottom: 10px;
}
.card__text{
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.26;
  color: rgba(255,255,255,.88);
}
.card__btn{
  margin-top: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.80);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 11px;
  cursor:pointer;
  pointer-events:auto;
  text-decoration:none;
}
.card__btn:hover{background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.24)}
.card__actions{margin-top: 14px}

/* Contact CTA: external links (glassmorphism pills) */
.contactStack{
  width: min(980px, 100%);
  display:flex;
  flex-direction: column;
  gap: 12px;
  pointer-events:auto;
}
.ctaLinks{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content:center;
  pointer-events:auto;
}
.ctaPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(900px 220px at 20% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.74));
  color: rgba(255,255,255,.92);
  text-decoration:none;
  font-family: var(--font-title);
  letter-spacing: .2em;
  text-transform: none;
  font-weight: 650;
  font-size: 11px;
  box-shadow: 0 24px 90px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.ctaPill:hover{
  background:
    radial-gradient(900px 220px at 20% 0%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.78));
  border-color: rgba(255,255,255,.28);
  color: rgba(255,255,255,.94);
}
.ctaPill:active{transform: translateY(1px)}
.ctaPill:focus-visible{
  outline: 2px solid rgba(255,255,255,.42);
  outline-offset: 2px;
}

@media (max-width: 720px){
  .ctaPill{
    width: 100%;
    justify-content:center;
  }
}

.prose p{
  margin: 0 0 12px;
  font-size: clamp(18px, 1.15vw + 14px, 21px);
  line-height: 1.64;
  color: rgba(255,255,255,.80);
}
.prose .lead{
  font-size: clamp(20px, 1.25vw + 15px, 24px);
  line-height: 1.56;
  color: rgba(255,255,255,.88);
}

/* Keep primary copy size consistent across Overview + Imperative panels. */
.overlay[data-scene="overview-1"] .prose .lead,
.overlay[data-scene="overview-2"] .prose .lead,
.overlay[data-scene="overview-3"] .prose .lead,
.overlay[data-scene="imperative"] .prose .lead{
  font-size: clamp(18px, 1.15vw + 14px, 21px);
  line-height: 1.64;
}

.quote--dark{
  margin: 16px 0 0;
  padding: 14px 14px 12px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.26);
}
.quote--dark blockquote{
  margin:0;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255,255,255,.86);
}
.quote--dark figcaption{
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

.callout--dark{
  margin-top: 18px;
  padding: 22px 20px 20px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(900px 240px at 20% 0%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(700px 220px at 80% 120%, rgba(0,0,0,.45), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.46));
  box-shadow: 0 34px 120px rgba(0,0,0,.62);
  position:relative;
  overflow:hidden;
}
.callout--dark::before{
  content:"THE IMPERATIVE";
  position:absolute;
  left: 18px;
  top: 14px;
  font-family: var(--font-title);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 750;
  font-size: 11px;
  color: rgba(255,255,255,.78);
  opacity:.92;
}
.callout--dark::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(255,255,255,.20), rgba(255,255,255,0) 26%),
    radial-gradient(900px 420px at 0% 50%, rgba(255,150,84,.14), transparent 60%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0) 36%);
}
.callout--dark{
  padding-top: 42px; /* room for THE IMPERATIVE label */
}
.callout--dark .callout__title{
  font-family: var(--font-title);
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight: 700;
  font-size: 11px;
  color: rgba(255,255,255,.58);
  margin-bottom: 8px;
}
.callout--dark .callout__title:empty{display:none; margin:0}
.callout--dark .callout__text{
  margin:0;
  color: rgba(255,255,255,.84);
  font-size: clamp(20px, 1.4vw + 15px, 26px);
  line-height: 1.52;
  font-weight: 600;
  text-shadow: 0 24px 90px rgba(0,0,0,.70);
}

.facts--dark{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}
.facts--dark .fact{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}
.facts--dark .fact__k{
  font-family: var(--font-title);
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size: 10px;
  color: rgba(255,255,255);
}
.facts--dark .fact__v{
  font-weight:650;
  color: rgba(255,255,255,.84);
  text-align:right;
}

.episode__tag--dark{
  display:inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-family: var(--font-title);
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
  font-size: 10px;
  color: rgba(255,255,255,.70);
}
.episode__title--dark{
  margin-top: 12px;
  font-family: var(--font-title);
  font-weight: 740;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 18px;
  color: rgba(255,255,255,.90);
}
.episode__body--dark{
  margin: 10px 0 0;
  font-size: clamp(18px, 1.1vw + 14px, 21px);
  line-height: 1.64;
  color: rgba(255,255,255,.80);
}

.stills{
  width:min(980px, 100%);
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.still{
  margin:0;
  border-radius: var(--radius2);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.32);
  box-shadow: var(--shadow);
}
.still img{
  display:block;
  width:100%;
  height:auto;
  filter: saturate(.70) contrast(1.08) brightness(.90);
}
.still figcaption{
  padding: 12px 14px 14px;
  font-family: var(--font-title);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(255,255,255,.62);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.44));
}

/* Default state: JS controls opacity/transform per layer. */
[data-scene]{
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(.992);
}
[data-layer="title"]{opacity: 1; transform: none}

@media (max-width: 900px){
  .stills{grid-template-columns: 1fr}
}

@media (prefers-reduced-motion: reduce){
  .stage__grain{animation:none}
  .intro__line{animation:none; opacity:1; transform:none; filter:none}
  body.is-home .overlay__titleLine--a,
  body.is-home .overlay__titleLine--b{animation:none}
}