/* The film stays in the center; its chapter and current cue stay readable. */
:root {
  --story-gutter: 56px;
  --story-top: 126px;
  --story-bottom: 196px;
}

#storyStage {
  position: fixed;
  z-index: 10;
  inset: calc(var(--story-top) + env(safe-area-inset-top, 0px))
    max(var(--story-gutter), env(safe-area-inset-right, 0px))
    calc(var(--story-bottom) + env(safe-area-inset-bottom, 0px))
    max(var(--story-gutter), env(safe-area-inset-left, 0px));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
  pointer-events: none;
}

.story-heading,
.story-beat {
  min-width: 0;
  max-width: 100%;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.65);
}

.story-index {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 14px;
  color: #c2c7cf;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#chapterNumber { color: #4d94ff; }

#storyTitle {
  margin: 0;
  color: #fff;
  font-size: clamp(38px, 3.6vw, 52px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.story-subtitle {
  max-width: 39ch;
  margin: 13px 0 0;
  color: #d0d3d9;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  text-wrap: pretty;
}

.story-beat { max-width: min(920px, 76vw); }
.story-detail { max-width: 48ch; margin: 12px 0 0; font-size: 16px; line-height: 1.45; color: #e2e5eb; text-wrap: pretty; }
.story-detail:empty { display: none; }

#storyCue {
  margin: 0;
  color: #fff;
  font-size: clamp(54px, 6.2vw, 96px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.055em;
  text-wrap: balance;
  overflow-wrap: normal;
}

.story-contact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-top: 22px;
  pointer-events: auto;
}

.story-contact[hidden] { display: none; }

.story-contact a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
}

.story-contact .cta-book { padding: 12px 24px; }
.story-contact .cta-mail { padding: 10px 0; }

.story-contact a:focus-visible,
.ctl:focus-visible {
  outline: 2px solid #4d94ff;
  outline-offset: 5px;
}

.ctl { min-height: 44px; box-sizing: border-box; }

.scrim {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.12) 34%, transparent 50%, rgba(0,0,0,0.36) 72%, rgba(0,0,0,0.84) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.16) 40%, transparent 70%);
}

.hud { padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)); }

@media (max-width: 820px) {
  :root {
    --story-gutter: 22px;
    --story-top: 102px;
    --story-bottom: 206px;
  }

  #storyStage { gap: 22px; }
  .story-index { margin-bottom: 11px; font-size: 9px; letter-spacing: 0.12em; gap: 14px; }
  #storyTitle { font-size: clamp(32px, 8.2vw, 44px); }
  .story-subtitle { max-width: 34ch; margin-top: 10px; font-size: 14px; line-height: 1.45; }
  .story-beat { max-width: 100%; }
  .story-detail { margin-top: 10px; font-size: 14px; }
  #storyCue { font-size: clamp(42px, 11.8vw, 72px); letter-spacing: -0.05em; }
  .story-contact { margin-top: 16px; gap: 10px 18px; }
  .story-contact .cta-book { padding: 11px 20px; }
  .story-contact .cta-mail { font-size: 13px; }

  .scrim {
    background: linear-gradient(180deg, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.28) 26%, rgba(0,0,0,0.04) 42%, rgba(0,0,0,0.12) 52%, rgba(0,0,0,0.58) 73%, rgba(0,0,0,0.88) 100%);
  }

  .ctl {
    justify-content: center;
    width: 116px;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 10px;
    letter-spacing: 0.1em;
    background: rgba(0,0,0,0.62);
  }

  #playBtn,
  #soundBtn { bottom: calc(122px + env(safe-area-inset-bottom, 0px)); right: auto; }
  #playBtn { left: calc(50% - 122px); }
  #soundBtn { left: calc(50% + 6px); }
  .dial-wrap { bottom: calc(36px + env(safe-area-inset-bottom, 0px)); }
  .dial-cap { color: #a0a5af; }
  .hud { padding: 9px 18px calc(9px + env(safe-area-inset-bottom, 0px)); }
}

/* The compact phone keeps a genuine gap between the title and the film cue. */
@media (max-width: 820px) and (max-height: 680px) {
  :root { --story-gutter: 18px; --story-top: 90px; --story-bottom: 190px; }
  #storyStage { gap: 14px; }
  .story-detail { margin-top: 8px; font-size: 13px; line-height: 1.4; }
  .story-index { margin-bottom: 9px; }
  #storyTitle { font-size: 32px; }
  .story-subtitle { max-width: 34ch; margin-top: 8px; font-size: 13px; line-height: 1.4; }
  #storyCue { font-size: clamp(38px, 11.2vw, 48px); }
  .story-contact { margin-top: 12px; }
  #playBtn,
  #soundBtn { bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
  .dial-wrap { bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
}

/* Landscape retains both pieces of the story, above a compact control row. */
@media (max-width: 1000px) and (max-height: 540px) and (orientation: landscape) {
  :root { --story-gutter: 28px; --story-top: 88px; --story-bottom: 152px; }
  #storyStage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 32px;
  }
  .story-index { margin-bottom: 8px; font-size: 9px; letter-spacing: 0.1em; gap: 12px; }
  #storyTitle { font-size: 32px; }
  .story-subtitle { max-width: 34ch; margin-top: 8px; font-size: 13px; line-height: 1.4; }
  .story-beat { align-self: end; max-width: 100%; }
  #storyCue { font-size: clamp(34px, 5.1vw, 46px); }
  .story-contact { margin-top: 12px; gap: 10px 18px; }
  .story-contact .cta-book { padding: 11px 20px; font-size: 13px; }
  .story-contact .cta-mail { font-size: 13px; }

  .ctl {
    justify-content: center;
    width: 116px;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  #playBtn,
  #soundBtn { bottom: calc(94px + env(safe-area-inset-bottom, 0px)); right: auto; }
  #playBtn { left: calc(50% - 122px); }
  #soundBtn { left: calc(50% + 6px); }
  .dial-wrap { bottom: calc(26px + env(safe-area-inset-bottom, 0px)); }
  .dial-cap { color: #a0a5af; font-size: 8px; letter-spacing: 0.14em; }
  .dial-box { width: min(330px, 44vw); height: 48px; }
  .dial-num { font-size: 9px; }
  .hud { padding: 8px 22px calc(8px + env(safe-area-inset-bottom, 0px)); font-size: 9px; letter-spacing: 0.12em; }
}

@media (prefers-reduced-motion: reduce) {
  .ctl.on .eq span { animation: none; }
}