/* Moving memories use the original widescreen composition, including on phones. */
.film-passage { height: 185svh; position: relative; background: var(--deep-ink); color: var(--cream); }
.film-passage .scene-sticky { background: var(--deep-ink); }
.passage-film { position: absolute; inset: 0; transform: translateY(var(--film-y, 11%)) scale(var(--film-scale, .66)); transform-origin: center; will-change: transform; }
.passage-film > video, .film-shot > video { width: 100%; height: 100%; object-fit: contain; }
.film-shot { position: absolute; inset: 0; pointer-events: none; }
.film-shot[data-visible="true"] { pointer-events: auto; }
.film-shot[data-shot="1"] { opacity: 0; }
.passage-copy { position: absolute; z-index: 3; top: 14%; left: 6%; right: 6%; opacity: var(--copy-opacity, 1); pointer-events: none; text-shadow: 0 2px 25px #002024b3; }
.passage-copy h2 { font-size: clamp(52px, 5.7vw, 90px); line-height: 1; margin-top: 20px; }
.passage-copy h2 span { color: var(--acid); }
.passage-copy .eyebrow { display: inline-block; background: var(--deep-ink); padding: 7px 12px; border-radius: 30px; }
.passage-note { position: absolute; z-index: 3; left: 7%; right: 7%; bottom: 16%; font-family: var(--display); font-size: clamp(23px, 3.4vw, 48px); line-height: 1.12; text-shadow: 0 2px 20px #002024e6; opacity: var(--note-opacity, 0); pointer-events: none; }
.passage-people .passage-copy h2 span { color: var(--coral); }
.passage-color .passage-copy h2 span { color: var(--turquoise); }
.passage-sunset { height: 165svh; }
.passage-sunset .passage-copy { top: 14%; }
.passage-home { height: 240svh; }
.passage-home .passage-copy { text-align: center; }
.passage-home .passage-note { text-align: center; }
.scene-arrival { height: 285svh; }
.scene-people { height: 255svh; }
.scene-play { height: 430svh; }
.scene-lake { height: 265svh; }
.scene-night { height: 290svh; }
.scene-between { height: 260svh; }
.scene-ending { height: 215svh; }
.arrival-reality, .lake-background, .night-background { background: var(--deep-ink); }
.night-portals { pointer-events: none; }
.night-portals .photo { pointer-events: auto; }
.arrival-reality > video, .lake-background > video, .night-background > video { object-fit: contain; }
.arrival-reality .image-shade { background: linear-gradient(90deg, #00202455, transparent 65%); }
.wide-clip.play-photo { width: 47vw; min-width: 47vw; height: auto; aspect-ratio: 16/9; margin-top: 5vh; }
.wide-clip > video, .wide-memory > video { object-fit: contain; }
.wide-memory.between-main { width: 47vw; height: auto; aspect-ratio: 16/9; right: 3%; top: 29%; }
.between-small.bs-one { top: 8%; left: 3%; }
.between-small.bs-two { left: 25%; top: 46%; height: 41vh; width: 17vw; }
.resume-clip { position: absolute; z-index: 25; right: 18px; bottom: 20px; background: var(--cream); color: var(--deep-ink); border-radius: 24px; padding: 13px 18px; font-size: 11px; font-weight: 700; box-shadow: 0 4px 20px #00202444; }
.arrival-reality .resume-clip, .lake-background .resume-clip, .night-background .resume-clip, .passage-film .resume-clip { bottom: 110px; }
.arrival-reality:has(.resume-clip:not([hidden])) { pointer-events: auto; }
.sound-help-button { width: 36px; min-height: 36px; border-radius: 50%; background: var(--cream); color: var(--ink); border: 1px solid #00505a25; font-weight: 700; font-size: 13px; }
.sound-dialog { background: var(--cream); color: var(--ink); width: min(550px, calc(100vw - 28px)); max-height: calc(100svh - 28px); padding: 38px; border-radius: 12px; overscroll-behavior: contain; }
.sound-dialog .eyebrow { padding-right: 25px; }
.sound-dialog h2 { font-size: 64px; line-height: 1; margin: 22px 0; }
.sound-dialog > p:not(.eyebrow) { font-size: 12px; line-height: 1.8; }
.sound-dialog .pill { margin: 22px 0; min-height: 48px; }
.sound-dialog .sound-divider { border-top: 1px solid #00505a30; padding-top: 20px; }
.sound-dialog .text-button { margin: 8px 0 14px; padding-left: 0; }
#standard-player audio { width: 100%; margin: 0 0 10px; }
#standard-player p { font-size: 11px; line-height: 1.6; }
#sound-detail { border-radius: 6px; background: #40b5a725; padding: 10px 12px; margin-top: 16px; }
.sound-dialog .sound-browser-note { margin-top: 16px; font-size: 10px!important; }
.ending-actions .pill { max-width: 100%; text-align: center; line-height: 1.5; }
.film-dialog { overscroll-behavior: contain; }
.film-dialog h2 { padding: 0 32px; margin-bottom: 24px; }
.film-player { width: 100%; aspect-ratio: 16/9; min-height: 200px; background: #000; position: relative; }
.film-player iframe { display: block; position: absolute; inset: 0; width: 100%; height: 100%; min-height: 200px; border: 0; }
.film-status { font-size: 13px; line-height: 1.65; margin: 18px auto 0; max-width: 580px; }
.film-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 18px; }
.film-actions a, .film-actions .text-button { font-size: 12px; line-height: 1.6; padding: 9px 0; text-decoration: underline; text-underline-offset: 4px; }
.film-dialog .film-caption { font-size: 12px; line-height: 1.65; margin-top: 12px; opacity: .8; }
@media(max-width:800px) {
  .film-passage { height: 170svh; }
  .passage-film { inset: 24% 0 19%; }
  .passage-copy, .passage-sunset .passage-copy { top: 16%; bottom: auto; left: 6%; right: 6%; }
  .passage-copy h2 { font-size: 11.8vw; line-height: 1.06; margin-top: 14px; }
  .passage-copy .eyebrow { font-size: 7px; letter-spacing: .1em; padding: 0; background: transparent; }
  .passage-note { bottom: 21%; left: 7%; right: 7%; font-size: 7vw; line-height: 1.2; }
  .passage-people .passage-copy h2 span { color: var(--coral); }
  .passage-sunset { height: 150svh; }
  .passage-home { height: 210svh; }
  .film-passage .scene-bottom { font-size: 6px; letter-spacing: .07em; }
  .film-passage .scene-bottom span:last-child { max-width: 45%; text-align: right; line-height: 1.7; }
  .scene-arrival { height: 265svh; }
  .scene-people { height: 240svh; }
  .scene-play { height: 455svh; }
  .scene-lake { height: 250svh; }
  .scene-night { height: 270svh; }
  .scene-between { height: 265svh; }
  .scene-ending { height: 200svh; }
  .arrival-reality > video { object-position: center 58%; }
  .arrival-memory { top: 18%; }
  .arrival-memory .handwritten { font-size: 12.5vw; }
  .arrival-memory p { font-size: 7px; margin-top: 13px; }
  .lake-background, .night-background { transform: none!important; }
  .lake-background .image-shade { background: #00202420; }
  .lake-title { justify-content: flex-start; top: 19%; }
  .lake-title h2 { margin-top: 15px; }
  .night-title { top: 18%; }
  .night-title h2 { font-size: 14.8vw; }
  .wide-clip.play-photo { width: 88vw; min-width: 88vw; height: auto; aspect-ratio: 16/9; margin-top: 0; }
  .wide-memory.between-main { width: 87vw; height: auto; right: 5%; top: 43%; }
  .between-small.bs-one { width: 31vw; height: 26vh; left: 2%; top: 12%; }
  .between-small.bs-two { width: 31vw; height: 28vh; left: 6%; top: 58%; }
  .between-note { left: 39%; bottom: 18%; font-size: 7vw; max-width: 54%; }
  .control-right { flex-shrink: 0; }
  .sound-help-button { width: 30px; min-height: 30px; font-size: 12px; }
  .chapter-status { min-width: 0; padding: 0 10px; }
  #chapter-label { max-width: 76px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
  .progress-line { width: 20px; }
  .sound-dialog { padding: 30px 23px; }
  .sound-dialog h2 { font-size: 52px; }
  .sound-dialog .pill { font-size: 11px; padding: 0 20px; }
  .resume-clip { font-size: 9px; padding: 10px 12px; right: 10px; }
  .passage-film .resume-clip { bottom: 5px; }
}
@media(max-width:360px) {
  #chapter-label { max-width: 54px; }
  .chapter-status { gap: 6px; padding: 0 8px; }
  .progress-line { width: 15px; }
  .sound-toggle { padding: 0 9px; }
  .control-right { gap: 4px; }
}
@media(max-height:560px) and (min-width:600px) {
  .passage-copy, .passage-sunset .passage-copy { top: 19%; bottom: auto; }
  .passage-copy h2 { font-size: 9vh; margin-top: 8px; }
  .passage-film { inset: 0; }
  .passage-note { bottom: 24%; font-size: 6vh; }
}
body.reduce-motion .film-passage { height: 100svh; }
body.reduce-motion .film-passage .scene-sticky { height: 100svh; position: relative; }
body.reduce-motion .passage-film { transform: translateY(11%) scale(.72)!important; }
body.reduce-motion .passage-copy { opacity: 1; }
body.reduce-motion .passage-note { opacity: 1; }
body.reduce-motion .film-shot[data-shot="0"] { opacity: 1!important; }
body.reduce-motion .film-shot[data-shot="1"] { display: none; }
body.reduce-motion .wide-clip.play-photo { width: 40vw; min-width: 40vw; height: auto; }
body.reduce-motion .resume-clip { display: none; }
@media(max-width:800px) {
  body.reduce-motion .passage-film { transform: none!important; }
  body.reduce-motion .wide-clip.play-photo { width: 80vw; min-width: 80vw; height: auto; }
  body.reduce-motion .wide-memory.between-main { top: 45%; }
}

/* Keep the expanded story headline within its collage column. */
.between-title { width: 43%; }
.between-title h2 { font-size: clamp(34px, 4.5vw, 70px); }
.between-title .serif-word { font-size: .86em; }
@media (max-width: 800px) {
  .between-title { left: 7%; top: 15%; width: 86%; }
  .between-title h2 { font-size: 9vw; line-height: 1.03; }
  .ending-content h2 { font-size: 15vw; }
}

/* Fit the revised golden-hour and night headlines within the scene. */
#sunset-title { font-size: clamp(38px, 4.7vw, 74px); }
.night-title h2 .serif-word { font-size: .75em; }
@media (max-width: 800px) {
  #sunset-title { font-size: 8.5vw; }
  .night-title h2 .serif-word { font-size: .7em; }
}

/* The closing invitation flows naturally so both calls to action stay reachable. */
.scene-ending, body.reduce-motion .scene-ending { height: auto!important; }
.scene-ending .scene-sticky, body.reduce-motion .scene-ending .scene-sticky { position: relative; height: auto; min-height: 100svh; }
.ending-content { position: relative; inset: auto; padding: 110px 24px 120px; overflow: visible; }
.ending-content h2 { font-size: clamp(64px, 8vw, 116px); margin: 0 0 42px; }
.aftermovie-invitation { width: min(100%, 720px); }
.aftermovie-invitation h3 { font-family: var(--display); font-size: clamp(22px, 3vw, 36px); font-weight: 400; line-height: 1.15; margin: 0 0 20px; }
.aftermovie-preview { display: block; position: relative; width: 100%; aspect-ratio: 16/9; padding: 0; overflow: hidden; border-radius: 12px; background: var(--deep-ink); box-shadow: 0 16px 45px #00505a25; }
.aftermovie-preview > img { width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: transform .3s, opacity .3s; }
.aftermovie-preview:hover > img { transform: scale(1.025); opacity: 1; }
.aftermovie-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: clamp(60px,8vw,88px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--cream); color: var(--ink); box-shadow: 0 4px 24px #0005; }
.aftermovie-play svg { width: 40%; margin-left: 4%; }
.aftermovie-preview-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 32px 18px 16px; background: linear-gradient(transparent,#00181bc9); color: var(--cream); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-align: left; }
.ending-content .ending-actions { margin-top: 22px; }
.ending-content .ending-links { margin: 12px 0 0; flex-wrap: wrap; justify-content: center; line-height: 1.6; }
.owner-invitation { width: min(100%,720px); margin-top: 52px; padding-top: 40px; border-top: 1px solid #00505a30; }
.owner-symbol { width: 34px; height: 32px; object-fit: contain; margin: 0 auto 20px; }
.owner-invitation p { font-size: clamp(16px,2.2vw,23px); line-height: 1.55; margin: 0 0 24px; }
.owner-invitation strong { font-weight: 700; }
.owner-invitation .pill { display: inline-flex; text-decoration: none; gap: 24px; }
@media(max-width:800px) {
  .ending-content { padding: 100px 20px 115px; }
  .ending-content h2 { font-size: 15vw; margin-bottom: 34px; }
  .aftermovie-invitation h3 { max-width: 290px; margin: 0 auto 18px; }
  .owner-invitation { margin-top: 36px; padding-top: 30px; }
}
@media(prefers-reduced-motion:reduce) { .aftermovie-preview > img { transition: none; } }