/* Readable interludes, with touch and keyboard controls outside the text. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.movement .scene-panel{margin:3.5rem 0 4.5rem;left:50%;transform:translateX(-50%)}
.movement .story-plate{width:min(82vw,66rem)}
.movement .story-plate.plate-intimate{width:min(64vw,48rem)}
.movement .story-plate.plate-intimate .scene-frame{aspect-ratio:1.58}
.movement .story-plate.plate-panorama .scene-frame{aspect-ratio:2}
.plate-image-link{display:block;position:absolute;inset:0;cursor:zoom-in}
.plate-image-link:focus-visible{outline-offset:-8px}
.movement .story-plate .scene-frame{min-height:0}
.movement .story-plate .scene-frame img{object-position:50% 50%}
.movement .story-plate.plate-panorama .scene-frame img[src*="morning"]{object-position:100% 50%}
.movement .story-plate .scene-caption{max-width:none;justify-content:space-between;padding-inline:6%;margin-top:.4rem;opacity:.9}
.open-plate{display:inline-flex;align-items:center;gap:.55rem;min-height:2.75rem;font:400 .875rem/1.5 var(--sans);letter-spacing:.04em;color:var(--text);opacity:.8;transition:opacity .3s}
.open-plate:hover{opacity:1}.open-plate>span:last-child{transition:transform .3s}
.open-plate:hover>span:last-child{transform:translate(2px,-2px)}
.movement .story-moment{width:min(86vw,66rem);padding:0}
.moment-heading{text-align:center;margin:0 auto 1.8rem;padding:0 1rem}
.moment-index{font:400 .75rem/1.8 var(--sans);letter-spacing:.16em;color:var(--muted)}
.moment-heading h3{font:400 clamp(1.4rem,2.1vw,1.95rem)/1.8 var(--serif);letter-spacing:.035em;margin:.9rem 0 0;color:var(--text)}
.city-stage,.apart-stage,.reflection-stage,.sunrise-stage{position:relative;width:100%;overflow:hidden;isolation:isolate;aspect-ratio:1.92;background:#29433f}
.city-stage>img,.apart-stage>img,.reflection-stage>img,.sunrise-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;filter:saturate(.77)}
.city-stage:after,.apart-stage:after,.sunrise-stage:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 65%,#071b1e5c);z-index:2}
.city-stage{touch-action:pan-y;cursor:ew-resize}
.city-stage .city-over{clip-path:inset(0 calc(100% - var(--city-split)) 0 0);z-index:1}
.city-seam{position:absolute;left:var(--city-split);top:0;bottom:0;width:1px;background:#edf3e8b3;z-index:3;pointer-events:none;transform:translateX(-.5px)}
.city-seam>span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;color:#ecf2ea;background:#14312aa8;border:1px solid #e4efdf91;backdrop-filter:blur(10px);font:400 1.1rem/1 var(--sans)}
.city-name{position:absolute;bottom:1.5rem;z-index:4;color:#f2f5ed;font:400 clamp(1.3rem,2.1vw,2rem)/1.4 var(--serif);text-shadow:0 2px 20px #001c21;letter-spacing:.1em;pointer-events:none}
.city-west{left:1.8rem}.city-east{right:1.8rem}
.moment-controls{display:flex;align-items:center;justify-content:center;gap:1.5rem;min-height:4.5rem;padding:1rem 0 .4rem;font:400 .875rem/1.7 var(--sans);letter-spacing:.025em;color:var(--text)}
.moment-controls label{white-space:nowrap}
.moment-controls input[type=range]{appearance:none;-webkit-appearance:none;width:min(19rem,38vw);height:2.75rem;margin:0;background:transparent;cursor:ew-resize;accent-color:var(--text)}
.moment-controls input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--muted)}
.moment-controls input[type=range]::-moz-range-track{height:1px;background:var(--muted)}
.moment-controls input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:15px;height:15px;margin-top:-7px;border:1px solid var(--text);border-radius:50%;background:var(--text);box-shadow:0 0 0 5px #9fb6a219}
.moment-controls input[type=range]::-moz-range-thumb{width:15px;height:15px;border:1px solid var(--text);border-radius:50%;background:var(--text);box-shadow:0 0 0 5px #9fb6a219}
.moment-controls input:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.story-moment .scene-caption{max-width:none;padding:0 .2rem;margin:0;justify-content:space-between;opacity:.9}
.story-moment .scene-caption>span{font:400 .875rem/1.7 var(--sans);letter-spacing:.03em}
.apart-stage img{transform:scale(calc(1.065 - var(--distance)*.05));transition:transform .15s linear}
.distance-words{position:absolute;z-index:3;inset:0;display:flex;align-items:center;justify-content:center;gap:calc(2rem + var(--distance)*35%);pointer-events:none;color:#eef4eb;text-shadow:0 2px 25px #041b19;font:400 clamp(1.7rem,3.6vw,3rem)/1.7 var(--serif);letter-spacing:.15em}
.distance-words span{padding:.3rem .5rem}
.reflection-stage{background:#bbc9bd}
.reflection-stage img{object-position:50% 50%}
#reflection-fog{position:absolute;inset:0;width:100%;height:100%;z-index:2;touch-action:pan-y;cursor:crosshair;opacity:1;transition:opacity 1.6s ease}
#reflection-fog.is-clear{opacity:0;pointer-events:none}
.wipe-invitation{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);font:400 1.15rem/1.7 var(--serif);letter-spacing:.2em;color:#304a3e;pointer-events:none;transition:opacity .4s}
.wipe-invitation.fading{opacity:0}
.moment-controls button{font:400 .875rem/1.7 var(--sans);padding:.55rem 1rem;min-height:2.75rem;border:1px solid #617e6366;border-radius:2px;color:var(--text);transition:background .3s,border-color .3s}
.moment-controls button:hover{background:#90a5851c;border-color:var(--text)}
.reflection-controls{gap:1.2rem;justify-content:space-between}
.reflection-controls #fog-hint{font-size:.875rem}
.sunrise-stage .after-sun{opacity:var(--daylight,0);z-index:1;filter:saturate(.8);will-change:opacity}
.sunrise-stage .before-sun{filter:saturate(.8);transform:scale(calc(1 + var(--daylight,0)*.018))}
.sunrise-time{position:absolute;bottom:1.5rem;left:1.8rem;color:#f3f4e8;z-index:4;font:400 1.1rem/1.7 var(--serif);letter-spacing:.2em;text-shadow:0 2px 16px #102b22}
.sunrise-controls{justify-content:space-between}
#sunrise-play{display:inline-flex;align-items:center;gap:.7rem;min-width:10.5rem}
.sunrise-ring{display:block;width:15px;height:15px;border:1px solid currentColor;border-radius:50%;background:conic-gradient(currentColor calc(var(--daylight,0)*1turn),transparent 0);opacity:.7}
#sunrise-status{font-size:.875rem}
.story-moment .city-stage,.story-moment .apart-stage,.story-moment .reflection-stage,.story-moment .sunrise-stage{-webkit-mask-image:linear-gradient(180deg,transparent,#000 4%,#000 94%,transparent);mask-image:linear-gradient(180deg,transparent,#000 4%,#000 94%,transparent)}

/* Image reader: native dialog retains keyboard focus and the prose position. */
#image-dialog{padding:0;border:0;background:#0a201fea;color:#e5ede3;width:min(96vw,88rem);max-width:none;height:min(94svh,62rem);max-height:94svh;overflow:auto;box-shadow:0 25px 110px #0005}
#image-dialog::backdrop{background:#031412e8;backdrop-filter:blur(18px)}
.gallery-shell{min-height:100%;display:flex;flex-direction:column;padding:1.3rem 2.4rem 1.5rem}
.gallery-header{display:flex;align-items:center;justify-content:space-between;font:400 .8125rem/1.7 var(--sans);letter-spacing:.13em;color:#b6c8b8}
.gallery-header button{width:2.75rem;height:2.75rem;font:300 2rem/1 var(--sans)}
.gallery-figure{margin:1rem 0;display:flex;flex-direction:column;flex:1;min-height:0}
#gallery-image{width:100%;height:clamp(12rem,54svh,39rem);object-fit:contain;display:block;transition:opacity .25s;touch-action:pan-y}
#gallery-image.loading{opacity:.4}
.gallery-figure figcaption{text-align:center;max-width:45rem;margin:1.3rem auto 0}
#gallery-title{font:400 .75rem/1.5 var(--sans);letter-spacing:.2em;color:#a5bba9}
#gallery-quote{font:400 clamp(1.15rem,1.65vw,1.6rem)/1.8 var(--serif);letter-spacing:.025em;margin:.7rem 0 .3rem}
.gallery-footer{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-top:auto;font-family:var(--sans);padding-top:.75rem}
.gallery-footer button{min-width:2.75rem;min-height:2.75rem;border:1px solid #80998344;font-size:1rem;padding:.4rem .8rem}
.gallery-footer button:hover{background:#8aa68b18}
#gallery-count{font-size:.8125rem;color:#b6c9b8;font-variant-numeric:tabular-nums;letter-spacing:.14em;min-width:4rem;text-align:center}
.gallery-footer #gallery-read{font-size:.8125rem;margin-left:1rem;border:0;letter-spacing:.06em}
.menu-preview{display:flex;flex-direction:column}
#menu-preview-image{width:100%;height:13rem;object-fit:cover;margin-bottom:1.6rem;filter:saturate(.65);-webkit-mask-image:linear-gradient(0deg,transparent,#000 15%);mask-image:linear-gradient(0deg,transparent,#000 15%)}
#menu-preview-number{font-size:3rem;margin-bottom:1rem}
#menu-preview-text{font-size:1.45rem;margin-bottom:2rem}
.hero-gallery-tease{pointer-events:auto;align-self:flex-end;display:flex;flex-direction:column;align-items:flex-end;gap:1rem;min-height:2.75rem;padding:.5rem 0;color:#e4ece0;font:400 .875rem/1.7 var(--sans);letter-spacing:.1em}
.tease-images{display:flex;align-items:center;padding-left:2rem;height:6rem}
.tease-images img{width:7.2rem;height:4.8rem;object-fit:cover;border:3px solid #c9d7c94a;box-shadow:0 4px 22px #01150b30;margin-left:-2rem;transform:rotate(-9deg);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.tease-images img:nth-child(2){transform:translateY(-.5rem) rotate(1deg)}
.tease-images img:nth-child(3){transform:rotate(9deg)}
.hero-gallery-tease:hover .tease-images img,.hero-gallery-tease:focus-visible .tease-images img{transform:translate(-.5rem,-.3rem) rotate(-14deg)}
.hero-gallery-tease:hover .tease-images img:nth-child(2),.hero-gallery-tease:focus-visible .tease-images img:nth-child(2){transform:translateY(-.9rem)}
.hero-gallery-tease:hover .tease-images img:nth-child(3),.hero-gallery-tease:focus-visible .tease-images img:nth-child(3){transform:translate(.5rem,-.3rem) rotate(14deg)}
body.focus .hero-gallery-tease{display:none}
body.focus .story-moment,body.focus .story-plate{display:none!important}
body.menu-open .scene-panel img{will-change:auto}
@media(max-width:760px){
 .movement .scene-panel{margin:2.8rem 0 3.5rem}
 .movement .story-plate,.movement .story-plate.plate-intimate,.movement .story-moment{width:calc(100vw - 1rem)}
 .movement .story-plate.plate-intimate .scene-frame{aspect-ratio:1.3}
 .movement .story-plate.plate-panorama .scene-frame{aspect-ratio:1.4}
 .moment-heading{padding-inline:1rem;margin-bottom:1.2rem}
 .moment-heading h3{font-size:1.35rem;letter-spacing:.025em;margin-top:.6rem}
 .city-stage,.apart-stage,.reflection-stage,.sunrise-stage{aspect-ratio:1.22}
 .apart-stage{aspect-ratio:1.7}
 .city-name{font-size:1.3rem;bottom:1.5rem}.city-west{left:1.1rem}.city-east{right:1.1rem}
 .city-seam>span{width:2.65rem;height:2.65rem}
 .moment-controls{padding:.8rem 1.05rem .2rem;gap:.6rem;flex-wrap:wrap}
 .city-controls,.apart-controls{flex-direction:column;gap:0}
 .moment-controls label{font-size:.875rem;white-space:normal;text-align:center}
 .moment-controls input[type=range]{width:min(75vw,22rem);height:2.75rem}
 .story-moment .scene-caption{padding-inline:1.1rem;gap:.5rem}
 .open-plate{font-size:.8125rem;letter-spacing:0}
 .story-moment .scene-caption>span{font-size:.8125rem}
 .distance-words{font-size:1.8rem;letter-spacing:.08em;gap:calc(1rem + var(--distance)*23%)}
 .reflection-controls{justify-content:center;row-gap:.5rem}
 .reflection-controls #fog-hint{width:100%;text-align:center;font-size:.8125rem}
 .sunrise-controls{justify-content:center;gap:.6rem 1rem}
 #sunrise-status{font-size:.8125rem;text-align:center}
 .sunrise-time{left:1.2rem;bottom:1.5rem;font-size:1rem}
 #image-dialog{width:100vw;height:100svh;max-height:100svh;margin:0}
 .gallery-shell{padding:1rem 1rem max(1.25rem,env(safe-area-inset-bottom));min-height:100svh}
 .gallery-header{font-size:.75rem;letter-spacing:.07em}
 .gallery-figure{justify-content:center}
 #gallery-image{height:49svh}
 .gallery-figure figcaption{margin-top:1.5rem;padding-inline:.5rem}
 #gallery-quote{font-size:1.25rem}
 .gallery-footer{gap:.6rem;flex-wrap:wrap}
 .gallery-footer #gallery-read{margin-left:.3rem}
 .menu-preview{display:none}
 .hero-gallery-tease{align-items:center;flex-direction:row;gap:.85rem;margin-top:1.7rem;justify-content:flex-start;font-size:.8125rem}
 .tease-images{height:3rem;padding-left:1.1rem}
 .tease-images img{width:3.7rem;height:2.5rem;border-width:2px;margin-left:-1.1rem}
 .tease-images img:nth-child(2){transform:translateY(-.2rem) rotate(1deg)}
}
@media(prefers-reduced-motion:reduce){
 .apart-stage img,.sunrise-stage .before-sun{transform:none!important}
 #reflection-fog,.sunrise-stage .after-sun{transition:none!important;will-change:auto}
 .city-seam>span,.open-plate>span:last-child,.tease-images img{transition:none!important}
}
@media print{.scene-panel,#image-dialog,.hero-gallery-tease{display:none!important}}
