/* Home continuation: connected product chapters, image-first demonstrations.
   Kept separate from the preserved v4 choreography. No brand token changes. */
.story { position: relative; border-top: 1px solid var(--ink-600); }
/* The opening and closing remain real document content before JS mounts. */
.act--hero, .hero, .door { min-height: 100svh; }
.story-nav {
  position: sticky; top: var(--bar-h); z-index: 25;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-24);
  padding: var(--space-16) var(--gutter); background: var(--ink-950);
  border-bottom: 1px solid var(--ink-600); color: var(--paper-100);
}
.story-nav strong { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.story-nav ol { display: flex; gap: var(--space-24); list-style: none; margin: 0; padding: 0; }
.story-nav a { display: block; font: var(--body-sm); padding-block: 4px; border-bottom: 2px solid transparent; }
.story-nav a[aria-current="step"] { border-color: var(--paper-100); }
.story .act { scroll-margin-top: calc(var(--bar-h) + 76px); }
.story .stage, .story .lift { position: relative; inset: auto; transform: none; overflow: visible; will-change: auto; }
.story .duo, .story .lift > .duo {
  position: relative; inset: auto; min-height: calc(100svh - 72px);
  padding: 24px var(--gutter); align-items: center;
}
.story .obj { transform: none; }
.story .obj--card, .story .obj--results { width: var(--stage-w); }
.story .frm { border-color: var(--ink-300); }
.story .res, .story .res--2, .story .res--3 { visibility: visible; transform: none; }
.story .res__tags, .story .frm--pack { clip-path: none; }
.story .state > *, .story .reply > * { opacity: 1; transform: none; transition: none; }
.story .reply, .story .state { visibility: visible; }
.story .is-demonstrating .reply, .story .is-demonstrating #watch-state { visibility: hidden; }
.story .is-demonstrating .reply.is-on, .story .is-demonstrating #watch-state.is-on { visibility: visible; }
.story .cmp__line { font-size: 16px; overflow: visible; }
.story .ink { display: block; white-space: normal; }
.story .ink__full { display: block; clip-path: none; }
.story .ink__caret { display: none; }
.story .ink__character { visibility: hidden; }
.story .ink__character.is-written { visibility: visible; }
.story .cmp__ph { visibility: hidden; }
.story .is-demonstrating .cmp:not(.is-typing) .cmp__ph { visibility: visible; }
.story .cmp__send { color: var(--ink-950); background: var(--acid-500); border-color: var(--acid-500); }
.story .is-demonstrating .cmp:not(.is-armed) .cmp__send { color: var(--ink-200); background: transparent; border-color: var(--ink-300); }
.story .results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.story .res { align-content: start; }
.story .res__meta { flex-direction: column; gap: 2px; }
.story .res__why { font-size: 13px; line-height: 1.5; }
.story .res__tags { flex-wrap: wrap; gap: 4px; }
.story .res img { aspect-ratio: 16 / 9; max-height: none; }
.story .card__in { gap: 8px; padding-block: 12px; }
.story .reply__who--res { display: none; } /* name already persists in the frame band */
.story-media__screen { position: relative; height: clamp(160px, 22svh, 240px); background: var(--ink-900); }
.story-media__screen > img, .story-media__screen > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
}
.story-media__screen > video { visibility: hidden; }
.story-media.is-playing .story-media__screen > video { visibility: visible; }
.story-media__controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 16px; border-block: 1px solid var(--ink-600); font: var(--body-xs); color: var(--paper-200); }
.story-media button {
  font: var(--body-sm); color: var(--paper-100); background: var(--ink-900);
  border: 1px solid var(--ink-300); padding: 8px 12px; cursor: pointer; min-height: 40px;
}
.story-media button[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Closing beats keep a complete viewport instead of three competing sections. */
.act--site { --act-min: 100svh; }
.door__grid { align-items: center; padding-top: calc(var(--bar-h) + 48px); padding-bottom: 200px; }
@media (max-width: 860px) {
  .story-nav { flex-direction: column; align-items: flex-start; gap: 4px; padding-block: 8px; }
  .story-nav strong { font-size: 16px; }
  .story-nav ol { gap: 16px; flex-wrap: wrap; }
  .story-nav a { font-size: 12px; min-height: 32px; }
  .story .duo, .story .lift > .duo { min-height: 0; padding-block: 48px 64px; }
  .story .act { scroll-margin-top: calc(var(--bar-h) + 96px); }
  .story .results { grid-template-columns: 1fr; }
  .story .res { grid-template-columns: 88px minmax(0, 1fr); }
  .story .res img { grid-row: span 3; }
  .story-media__screen { height: auto; aspect-ratio: 16 / 9; }
  .story-media__controls { font-size: 11px; padding-inline: 12px; }
  .story-media button { white-space: nowrap; font-size: 12px; }
  .door__grid { min-height: 100svh; padding-bottom: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .story .ink__character { visibility: visible; }
  .story .reply, .story #watch-state { visibility: visible !important; }
  .story .cmp__ph { visibility: hidden !important; }
}