.eyes-story {
  position: relative;
  background: #0c1414;
  color: #f4eee1;
  border-top: 1px solid #ceb17d29;
}
.eyes-stage {
  position: relative;
  isolation: isolate;
  height: 920px;
  min-height: 650px;
  max-height: 1100px;
  overflow: hidden;
}
.eyes-story[data-mode="motion"] { height: 430svh; }
.eyes-story[data-mode="motion"] .eyes-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  max-height: none;
}
.eyes-topline {
  position: absolute;
  z-index: 3;
  top: clamp(24px, 4vh, 48px);
  left: var(--pad);
  right: var(--pad);
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  pointer-events: none;
}
.eyes-topline .eyebrow {
  color: #c9bfae;
  font-size: .59rem;
  margin-bottom: 12px;
}
.eyes-topline h2 {
  font: 400 clamp(25px, 3.2vw, 43px)/1 Georgia, serif;
  letter-spacing: -.055em;
}
.eyes-skip {
  pointer-events: auto;
  color: #e1d4bc;
  font: .65rem ui-monospace, SFMono-Regular, Consolas, monospace;
  border-bottom: 1px solid #d2b27a66;
  padding-block: 10px;
}
.eyes-skip span { margin-left: 10px; }
.eyes-viewport, .eyes-canvas, .eyes-poster,
.eyes-veil, .eyes-grain { position: absolute; inset: 0; width: 100%; height: 100%; }
.eyes-canvas { opacity: 0; display: block; transition: opacity .6s ease; }
.eyes-story.is-rendered .eyes-canvas { opacity: 1; }
.eyes-story.is-rendered .eyes-poster { opacity: 0; }
.eyes-veil {
  background: #091011;
  opacity: var(--eyes-veil, 0);
  pointer-events: none;
}
.eyes-grain {
  background-image: url(grain.svg);
  opacity: .06;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.eyes-viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #091011a8, transparent 46%),
    linear-gradient(0deg, #091011e0, transparent 24%, transparent 80%, #09101166);
  pointer-events: none;
}
.eyes-captions {
  opacity: var(--eyes-copy-opacity, 1);
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}
.eyes-caption {
  position: absolute;
  left: var(--pad);
  top: 39%;
  max-width: 36%;
  opacity: 0;
  visibility: hidden;
  translate: 0 16px;
  transition: opacity .3s ease, translate .5s ease;
}
.eyes-caption.is-current { opacity: 1; visibility: visible; translate: 0 0; }
.eyes-caption .eyebrow { color: #d0b88f; font-size: .62rem; margin-bottom: 20px; }
.eyes-caption h3 {
  font: 400 clamp(40px, 5.8vw, 83px)/.97 Georgia, serif;
  letter-spacing: -.055em;
}
.eyes-caption h3 em { color: #edc69a; font-weight: 400; }
.eyes-caption > p:not(.eyebrow) {
  font-size: clamp(.9rem, 1.15vw, 1.06rem);
  line-height: 1.65;
  color: #d0cdc1;
  max-width: 29ch;
  margin-top: 25px;
}
.eyes-caption-last { top: 17%; max-width: 47%; }
.eyes-caption-last h3 { font-size: clamp(36px, 4.2vw, 59px); }
.eyes-caption-last > p:not(.eyebrow) { max-width: 40ch; }
.eyes-continue {
  display: inline-flex;
  gap: 25px;
  align-items: center;
  pointer-events: auto;
  padding: 12px 0 8px;
  margin-top: 16px;
  border-bottom: 1px solid #ceb17d88;
  color: #f4d3a3;
  font-size: .8rem;
}
.eyes-bottomline {
  position: absolute;
  z-index: 3;
  left: var(--pad);
  right: var(--pad);
  bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font: .58rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: #c9bfae;
}
.eyes-bottomline nav { display: flex; align-items: center; gap: 14px; }
.eyes-bottomline button {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  cursor: pointer;
  min-height: 44px;
  padding-inline: 4px;
}
.eyes-bottomline button[hidden] { display: none; }
.eyes-bottomline button:hover, .eyes-bottomline button[aria-current="step"] { color: #f2d6a8; }
.eyes-track { display: block; width: clamp(50px, 8vw, 150px); height: 1px; background: #e3cc9a38; }
.eyes-track span { display: block; height: 100%; background: #e9bd82; transform: scaleX(var(--eyes-progress, 0)); transform-origin: left; }
.eyes-scroll-note > span { margin-right: 10px; color: #ebc996; }
.eyes-story[data-mode="still"] .eyes-caption { display: none; }
.eyes-story[data-mode="still"] .eyes-caption-last { display: block; opacity: 1; visibility: visible; translate: 0; }
.eyes-story[data-mode="still"] .eyes-caption-last { top: 17%; max-width: 47%; }
.eyes-story[data-mode="still"] .eyes-scroll-note { visibility: hidden; }
@media (max-width: 740px) {
  .eyes-stage { height: 920px; min-height: 600px; }
  .eyes-story[data-mode="motion"] { height: 390svh; }
  .eyes-topline { top: 24px; }
  .eyes-topline h2 { font-size: 29px; }
  .eyes-topline .eyebrow { font-size: .52rem; }
  .eyes-skip { font-size: .55rem; max-width: 95px; text-align: right; }
  .eyes-caption { top: auto; bottom: 112px; max-width: 88%; }
  .eyes-caption h3 { font-size: clamp(38px, 10vw, 55px); }
  .eyes-caption .eyebrow { margin-bottom: 12px; }
  .eyes-caption > p:not(.eyebrow) { margin-top: 13px; max-width: 31ch; font-size: .85rem; line-height: 1.55; }
  .eyes-caption-last { bottom: 117px; }
  .eyes-caption-last h3 { font-size: 37px; }
  .eyes-bottomline { bottom: 16px; flex-wrap: wrap; gap: 2px 10px; }
  .eyes-scroll-note { width: 100%; font-size: .53rem; }
  .eyes-bottomline nav { gap: 9px; }
  .eyes-track { width: 70px; }
  .eyes-viewport::after {
    background: linear-gradient(0deg, #091011fa, #091011c7 23%, transparent 58%, #09101155);
  }
  .eyes-story[data-mode="still"] .eyes-stage { height: 860px; }
  .eyes-story[data-mode="still"] .eyes-caption-last { top: auto; max-width: 88%; bottom: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .eyes-caption, .eyes-canvas { transition: none; }
}