/* Fullscreen camera story with independently composed portrait footage. */
:root { --story-height: 3400svh; }
.story-stage { height: 100svh; min-height: 0; }
.story-visual { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(var(--frame-scale, 1)); transform-origin: center; isolation: isolate; z-index: 0; }
.story-visual .story-poster, .story-visual #story-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.story-visual #story-canvas { transition: opacity .12s; }
.story-shade { z-index: 1; background: linear-gradient(180deg, #151a2259, transparent 23%, transparent 60%, #151a22d9); }
.story-shade:before { background: linear-gradient(90deg, #151a228f, #151a2240 45%, transparent 78%); }
.story-shade:after { background: linear-gradient(270deg, #151a228f, #151a2240 45%, transparent 78%); }
.story-shade:before, .story-shade:after { transition: opacity .45s; }
.story-grid { z-index: 2; inset: 100px var(--gutter) 110px; border-color: #f7f5f025; }
.story-topline { z-index: 3; top: 130px; left: calc(var(--gutter) + 24px); right: calc(var(--gutter) + 24px); }
.story-location { margin-right: 150px; font-size: 9px; }
.motion-toggle { z-index: 4; top: 116px; right: calc(var(--gutter) + 24px); color: #f7f5f0d9; }
.story-copy { inset: 0; z-index: 3; }
.story-chapter[data-chapter] { left: calc(var(--gutter) + 28px); right: calc(var(--gutter) + 28px); bottom: clamp(160px, 20svh, 230px); }
.story-chapter[data-chapter] h1, .story-chapter[data-chapter] h2 { font-size: clamp(58px, 7.2vw, 108px); line-height: 1.01; max-width: 920px; }
.story-chapter[data-chapter="1"] { left: 51%; }
.story-chapter[data-chapter="1"] h2 { font-size: clamp(54px, 5.7vw, 90px); }
.story-chapter[data-chapter] .chapter-kicker { margin-bottom: 21px; font-size: 10px; color: #dec9a9; }
.story-chapter[data-chapter] .story-description { margin-top: 24px; max-width: 490px; font-size: 15px; line-height: 1.65; }
.story-chapter[data-chapter] .story-link { margin-top: 16px; min-width: 235px; font-size: 15px; }
.story-bottom { z-index: 4; bottom: max(30px, env(safe-area-inset-bottom)); gap: 22px; }
.scroll-cue { font-size: 7px; letter-spacing: .1em; gap: 12px; }
.scroll-cue small { font-size: 10px; }
.chapter-control { gap: 12px; }
.chapter-bars { gap: 7px; }
.chapter-bars button { width: 51px; height: 46px; }
.chapter-bars button:before { top: 35px; }
.chapter-bars button span { font-family: var(--serif); font-size: 10px; color: #ece8e0; }
.chapter-bars button.is-active span { color: #dec9a9; }
.film-button { font-size: 8px; gap: 10px; }
.film-duration { display: inline; font-size: 10px; }
@media (max-width: 1200px) {
 .scroll-cue > span:last-child { font-size: 0; } .scroll-cue small { font-size: 10px; }
 .chapter-bars button { width: 37px; } .chapter-bars button span { font-size: 9px; }
}
@media (max-height: 800px) and (min-width: 901px) {
 .story-chapter[data-chapter] { bottom: 145px; }
 .story-chapter[data-chapter] h1, .story-chapter[data-chapter] h2 { font-size: clamp(52px, 6.2vw, 86px); }
 .story-chapter[data-chapter="1"] h2 { font-size: clamp(48px, 5.2vw, 74px); }
 .story-chapter[data-chapter] .chapter-kicker { margin-bottom: 14px; }
 .story-chapter[data-chapter] .story-description { margin-top: 18px; font-size: 14px; }
 .story-chapter[data-chapter] .story-link { margin-top: 10px; }
}
@media (max-width: 900px) {
 .story-grid { top: 82px; } .story-topline { top: 112px; } .motion-toggle { top: 99px; }
 .story-chapter[data-chapter] { left: calc(var(--gutter) + 20px); right: calc(var(--gutter) + 20px); }
 .story-chapter[data-chapter] h1, .story-chapter[data-chapter] h2 { font-size: clamp(55px, 8.8vw, 84px); }
 .story-location { display: none; }
}
@media (orientation: portrait) {
 .story-shade { background: linear-gradient(180deg, #151a2266, transparent 22%, #151a2259 40%, #151a22b3 72%, #151a22e6 94%); }
 .story-shade:before { background: linear-gradient(90deg, #151a224d, transparent); opacity: 1; } .story-shade:after { opacity: 0; }
 .story-chapter[data-chapter] { bottom: clamp(180px, 21svh, 230px); }
 .story-bottom { bottom: max(25px, env(safe-area-inset-bottom)); height: 88px; display: grid; grid-template-columns: 1fr 1fr; row-gap: 0; }
 .chapter-control { grid-row: 1; grid-column: 1 / -1; justify-content: center; gap: 14px; }
 .chapter-bars { flex: 1; gap: 8px; } .chapter-bars button { flex: 1; width: auto; height: 44px; }
 .chapter-bars button:before { top: 34px; } .chapter-bars button span { font-size: 10px; } .chapter-total { display: block; }
 .scroll-cue { grid-row: 2; grid-column: 1; } .scroll-cue small { width: auto; }
 .film-button { grid-row: 2; grid-column: 2; justify-self: end; font-size: 9px; } .story-grid { bottom: 134px; }
}
@media (max-width: 600px) and (orientation: portrait) {
 .story-grid { inset: 78px var(--gutter) 122px; }
 .story-topline { top: 104px; left: calc(var(--gutter) + 12px); right: calc(var(--gutter) + 12px); }
 .story-topline .eyebrow { font-size: 7px; letter-spacing: .08em; }
 .motion-toggle { top: 91px; right: calc(var(--gutter) + 12px); font-size: 8px; min-height: 36px; }
 .story-chapter[data-chapter] { left: calc(var(--gutter) + 13px); right: calc(var(--gutter) + 12px); bottom: clamp(160px, 22svh, 215px); }
 .story-chapter[data-chapter] h1, .story-chapter[data-chapter] h2 { font-size: clamp(39px, 11.8vw, 65px); line-height: 1.04; }
 .story-chapter[data-chapter] .chapter-kicker { font-size: 8px; margin-bottom: 17px; }
 .story-chapter[data-chapter] .story-description { font-size: 12px; margin-top: 20px; line-height: 1.65; }
 .story-chapter[data-chapter] .story-link { font-size: 13px; margin-top: 13px; min-width: 220px; }
 .story-bottom { bottom: max(18px, env(safe-area-inset-bottom)); height: 82px; gap: 0 12px; }
 .chapter-control { gap: 10px; } .chapter-bars { gap: 5px; } .chapter-bars button span { display: none; } .chapter-bars button:before { top: 20px; }
 .scroll-icon { width: 28px; height: 36px; } .film-button { font-size: 8px; gap: 8px; } .film-duration { font-size: 9px; } .play-icon { width: 28px; height: 28px; }
}
@media (max-height: 680px) and (orientation: portrait) {
 .story-chapter[data-chapter] { bottom: 139px; }
 .story-chapter[data-chapter] h1, .story-chapter[data-chapter] h2 { font-size: clamp(34px, 10.5vw, 48px); }
 .story-chapter[data-chapter] .chapter-kicker { font-size: 7px; margin-bottom: 10px; }
 .story-chapter[data-chapter] .story-description { font-size: 11px; margin-top: 12px; line-height: 1.5; }
 .story-chapter[data-chapter] .story-link { font-size: 12px; padding: 7px 0; margin-top: 8px; min-width: 200px; }
}
@media (max-height: 500px) and (orientation: landscape) {
 .story-grid { inset: 66px var(--gutter) 62px; } .story-topline { display: none; } .motion-toggle { top: 73px; font-size: 8px; min-height: 30px; }
 .story-chapter[data-chapter] { left: calc(var(--gutter) + 18px); right: calc(var(--gutter) + 18px); bottom: 78px; }
 .story-chapter[data-chapter] h1, .story-chapter[data-chapter] h2 { font-size: 36px; line-height: 1.03; max-width: 610px; }
 .story-chapter[data-chapter] .chapter-kicker { font-size: 7px; margin-bottom: 9px; }
 .story-chapter[data-chapter] .story-description { font-size: 10px; line-height: 1.4; margin-top: 12px; }
 .story-chapter[data-chapter] .story-link { font-size: 11px; margin-top: 6px; min-width: 200px; padding: 6px 0; }
 .story-bottom { bottom: 8px; height: 42px; display: flex; } .chapter-bars button { width: 23px; height: 44px; }
 .chapter-bars button span { display: none; } .chapter-bars button:before { top: 21px; } .scroll-icon { display: none; } .scroll-cue small { width: auto; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .story-visual { transform: none; } }
.reduced-motion .story-visual { transform: none; }

/* Automatic full-screen film; the page keeps ordinary scrolling. */
.story, .reduced-motion .story { height: 100svh; }
.story-stage { position: relative; height: 100svh; }
.story-visual #story-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity .12s; }