/* An illustrated book: preserve the drawn fibres and let the figures breathe. */
.movement{--illustration-width:min(86vw,66rem);--illustration-ratio:16/9;--illustration-radius:2.3rem 1.4rem 2.6rem 1.7rem / 1.5rem 2.4rem 1.6rem 2.2rem}
.hero-shade{background:linear-gradient(90deg,#071b1e48,transparent 60%),linear-gradient(0deg,#071b1e 0%,#071b1e00 32%)}
.hero h1{color:#eeeadd}
.hero-opening{color:#e4e9e1}
.movement .story-plate .scene-frame,
.movement .story-plate.plate-intimate .scene-frame,
.movement .story-plate.plate-panorama .scene-frame,
.movement .story-moment .city-stage,
.movement .story-moment .apart-stage,
.movement .story-moment .reflection-stage,
.movement .story-moment .sunrise-stage{
 aspect-ratio:var(--illustration-ratio);
 border-radius:var(--illustration-radius);
 -webkit-mask-image:linear-gradient(180deg,transparent,#000 3%,#000 97%,transparent);
 mask-image:linear-gradient(180deg,transparent,#000 3%,#000 97%,transparent);
}
.movement .story-plate .scene-frame img{
 height:100%;object-position:50% 50%;filter:none;opacity:1;transform:scale(1.035);
 -webkit-mask-image:none;mask-image:none;
}
.movement .story-plate.plate-panorama .scene-frame img[src*="morning"]{object-position:50% 50%}
.city-stage>img,.apart-stage>img,.reflection-stage>img,.sunrise-stage>img,
.sunrise-stage .after-sun,.sunrise-stage .before-sun{filter:none}
.sunrise-stage .before-sun{transform:none}
.movement-night .scene-panel,.movement-dawn .scene-panel{margin-left:0}
.movement .story-plate,.movement .story-plate.plate-intimate,.movement .story-moment{width:var(--illustration-width)}
.moment-heading h3{line-height:1.85}
.moment-controls button{border-radius:1.1rem .9rem 1.2rem .85rem / .8rem 1rem .85rem 1rem}
.moment-controls input[type=range]::-webkit-slider-runnable-track{height:2px;border-bottom:1px dashed var(--muted);background:none}
.moment-controls input[type=range]::-moz-range-track{height:2px;border-bottom:1px dashed var(--muted);background:none}
.distance-words{align-items:flex-start;padding-top:1.6rem;font-size:clamp(1.4rem,2.7vw,2.15rem);letter-spacing:.1em}
.distance-words span{background:#17363c60;border-radius:1rem;padding:.2rem .65rem}
.city-seam{background:#f2e8cbb3}
.city-seam>span{border-style:dashed;background:#203b43d1;color:#f1e6c9;backdrop-filter:blur(3px)}
.city-stage .city-over{width:var(--city-split);clip-path:none;object-position:33% 50%}
.city-stage .city-under{left:var(--city-split);width:calc(100% - var(--city-split));object-position:42% 50%}
.city-name{font-size:clamp(1.3rem,2vw,1.8rem)}
.sunrise-time{background:#223d4666;border-radius:1rem;padding:.1rem .7rem}
.tease-images img{border-color:#d6d4c58c;border-radius:.4rem .25rem .45rem .25rem;box-shadow:0 5px 20px #01150b25}
#menu-preview-image{filter:none;object-position:65% 50%;border-radius:.9rem}
#image-dialog{background:#102631f5;border-radius:1.3rem .8rem 1.4rem .9rem}
#image-dialog::backdrop{background:#061823e8}
#gallery-image{border-radius:.65rem}
.gallery-footer button{border-radius:.75rem .9rem .65rem .8rem}
.gallery-figure figcaption{margin-top:1.6rem}
@media(max-width:760px){
 .movement{--illustration-width:calc(100vw - 1rem);--illustration-radius:1.3rem .8rem 1.5rem .9rem}
 .hero,.hero-inner{min-height:0}
 .hero-inner{padding:7.6rem 1.65rem 3.5rem}
 .hero-kicker{margin-bottom:1.6rem}
 .hero h1{font-size:clamp(6.4rem,22vw,9rem);margin-bottom:1.1rem;gap:.14em}
 .hero-picture{top:16rem;bottom:auto;height:clamp(17rem,79vw,28rem)}
 .hero-picture>img{object-position:80% 50%}
 .hero-picture{-webkit-mask-image:linear-gradient(180deg,transparent,#000 9%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 9%,#000 82%,transparent)}
 .hero-shade{background:linear-gradient(0deg,#071b1e 0%,#071b1e00 36%)}
 .hero-bottom{margin-top:clamp(12rem,57vw,22rem);padding-top:1.5rem;gap:1.5rem}
 .hero-opening{font-size:1.1875rem}
 .enter{margin-top:1.8rem}
 .hero-gallery-tease{margin-top:.5rem;align-self:flex-start}
 .sunrise-stage>img{object-position:78% 50%}
 .distance-words{font-size:1.125rem;padding-top:.65rem}
 .distance-words span{padding:.15rem .5rem}
 .city-name{bottom:1rem;font-size:1.25rem}
 .sunrise-time{bottom:.8rem;left:1rem;font-size:.95rem}
 .moment-controls button{min-height:2.75rem}
 #image-dialog{border-radius:0}
 body.focus .hero-inner{padding-top:7.6rem}
 body.focus .hero-bottom{margin-top:0}
}
@media(prefers-reduced-motion:reduce){.movement .story-plate .scene-frame img{transform:none!important}}
@media print{.hero-inner{padding:0}.hero-bottom{margin-top:0}.hero h1{font-size:32pt}}