/* A tilted postcard expands into a full hero film, with the promise over the image. */
.hero.motion{height:185svh}
.hero-stage{height:calc(100svh - var(--nav));min-height:620px;background:#151310;overflow:hidden;isolation:isolate;--image-height:640px}
.photo-journey{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:var(--hero-shade,0);background:linear-gradient(180deg,#100e0c66 0%,#100e0c59 24%,#100e0c80 44%,#100e0c80 58%,#100e0c33 72%,#100e0ce8 100%)}
.station-card{position:absolute;left:0;top:0;margin:0;width:1320px;height:calc(var(--image-height) + 100px);transform-origin:0 0;will-change:transform}
.postcard-paper{position:absolute;inset:0;background:#eee4ce;box-shadow:0 14px 70px #0006}
.photo-window{position:absolute;left:20px;top:20px;width:1280px;height:var(--image-height);overflow:hidden;background:#2c2924}
.photo-window img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;max-width:none}
.photo-today{position:absolute;inset:0;opacity:0;visibility:hidden}
.card-caption{position:absolute;left:30px;right:30px;bottom:29px;display:flex;align-items:baseline;justify-content:space-between;color:#3d382d;font-family:Georgia,serif;font-size:24px;letter-spacing:.06em}
.card-caption span:last-child{font-size:20px;font-style:italic;letter-spacing:0}
.hero-heading{top:24px;z-index:3;left:var(--gutter);right:var(--gutter);text-align:center;pointer-events:none}
.hero.motion .hero-heading{will-change:transform}
.hero-heading h1{font-family:var(--display);font-size:clamp(31px,3.7vw,57px);font-weight:700;line-height:1.08;letter-spacing:-.035em;text-wrap:balance;max-width:24ch;margin:auto}
.hero-heading h1 span{display:inline}
.hero-subline{display:block;margin-top:14px}.hero-subline p{display:block;margin:auto;max-width:none;font-size:14px;color:#f3eee6}
.hero-bottom{bottom:25px;align-items:center}.hero-actions{display:flex;gap:20px;align-items:center}
.film-toggle{display:flex;align-items:center;gap:12px;background:none;color:#f3eee6;font-size:13px;min-height:44px;padding:8px 0;line-height:1.35;text-align:left}
.film-toggle svg{width:36px;height:36px;flex:none}
.film-toggle:hover span{text-decoration:underline;text-underline-offset:4px}
.hero-film{opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s;position:absolute;inset:0;pointer-events:none;background:#151310;z-index:1}
.hero-film[hidden],.film-error[hidden]{display:none}
.hero-film video{display:block;width:100%;height:100%;object-fit:cover;object-position:center;background:#151310}



.film-error{position:absolute;inset:0;display:grid;place-content:center;gap:12px;text-align:center;padding:30px;background:#151310;color:#f3eee6;font-size:14px;z-index:2}
.film-error a{text-decoration:underline;text-underline-offset:4px}
/* Keep the matching still opaque beneath the fading film to avoid a dark flash. */
.hero[data-film="open"] .hero-film{opacity:1;visibility:visible;pointer-events:auto}
.film-toggle[hidden],.photo-scroll[hidden]{display:none}
.film-toggle .pause-icon,.film-toggle[data-playing="true"] .play-icon{display:none}
.film-toggle[data-playing="true"] .pause-icon{display:block}
.photo-scroll{font-size:12px;line-height:1.45;color:#f3eee6;text-align:right}
.film-event{position:absolute;left:var(--gutter);bottom:120px;z-index:3;font-size:clamp(18px,2.2vw,28px);font-weight:600;letter-spacing:-.025em;color:#f3eee6;text-shadow:0 2px 18px #0008}
.film-event[hidden]{display:none}
.hero-caption{left:var(--gutter);right:var(--gutter);bottom:87px;color:#f3eee6;font-size:10px;max-width:none;text-align:center;text-shadow:none}
.hero:not(.photo-ready) .station-card{left:15%;top:10%;width:70%;height:auto;transform:none}
.hero:not(.photo-ready) .photo-window{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:2/1;border:7px solid #eee4ce}
.hero:not(.photo-ready) .card-caption{position:relative;left:auto;right:auto;bottom:auto;background:#eee4ce;padding:8px 12px;font-size:12px}
.hero:not(.photo-ready) .card-caption span:last-child{font-size:10px}
@media(max-width:760px){
 .hero.motion{height:175svh}.hero-stage{min-height:600px}
 .hero-heading{top:25px}.hero-heading h1{font-size:clamp(29px,7.6vw,43px);max-width:100%}.hero-heading h1 span{display:block}
 .hero-subline p{font-size:12px;max-width:28ch;line-height:1.5}
 .hero-actions{display:block}.hero-actions .text-link{display:none}
 .hero-caption{bottom:87px;font-size:9px}
 .film-toggle{font-size:11px;max-width:145px;line-height:1.4;gap:7px}.film-toggle svg{width:27px;height:27px}
 .hero-actions .btn{font-size:11px;padding-inline:12px}.hero-bottom{gap:12px}
 .hero[data-film="open"] .hero-caption{max-width:32ch;margin:0;line-height:1.4;text-align:left}
 .film-event{bottom:135px;font-size:19px;max-width:24ch}
 .hero[data-event="2"] .hero-film video{object-position:32% center}
 
 .hero:not(.photo-ready) .station-card{left:10%;width:80%}
}
@media(prefers-reduced-motion:reduce){
 .hero.motion{height:auto}.station-card,.hero-heading{will-change:auto}
 .station-card,.hero-film{transition:none}
}