/* Carousel repair v9: opening controls only; resting surface unchanged. */
.intro-images,.element-story{display:none}
body:not([data-phase=rest]):not([data-phase=logo]) .intro-images{display:block;position:absolute;inset:0;overflow:hidden;background:#142724}
.element-frame{position:absolute;inset:0;clip-path:polygon(0 0,0 0,-24% 100%,0 100%);transition:clip-path .24s cubic-bezier(.2,.7,.3,1)}
.element-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:saturate(.77)}
.element-frame:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#051514b8,#07171524 80%),linear-gradient(0deg,#05151488,transparent 70%)}
body[data-phase=water] .element-water,body[data-phase=earth] .element-water,body[data-phase=fire] .element-water,body[data-phase=air] .element-water,body[data-phase=earth] .element-earth,body[data-phase=fire] .element-earth,body[data-phase=air] .element-earth,body[data-phase=fire] .element-fire,body[data-phase=air] .element-fire,body[data-phase=air] .element-air{clip-path:polygon(0 0,124% 0,100% 100%,0 100%)}
body:not([data-phase=rest]):not([data-phase=logo]) .element-story{display:block;position:absolute;inset:0;pointer-events:none;z-index:4}
.element-copy{position:absolute;left:8%;top:53%;width:min(620px,78%);transform:translateY(-25%)}
.element-heading{font:400 clamp(24px,2.65vw,38px)/1.23 Georgia,serif;letter-spacing:-.015em;text-wrap:balance;max-width:580px}
.element-kicker{font:10px Arial,sans-serif;letter-spacing:.24em;margin-bottom:22px;min-height:12px}
.element-location{font:13px Arial,sans-serif;letter-spacing:.06em;margin-top:23px;min-height:16px}
.element-label{font:10px Arial,sans-serif;letter-spacing:.28em;margin-top:36px}
.element-guide{position:absolute;top:25%;left:8%;display:flex;gap:26px;width:278px;align-items:center;color:#eee8d6}
.element-guide:before{content:"";height:1px;background:#eee8d655;position:absolute;left:22px;right:22px;top:50%}
.element-guide span{position:absolute;left:0;top:-9px;width:44px;height:1px;background:#fff0c0;transform:translateX(calc(var(--element-index,0)*70px));transition:transform .24s ease}
.element-guide button{padding:0;flex:0 0 44px;position:relative;pointer-events:auto;touch-action:manipulation;display:block;width:44px;height:44px;opacity:.3;transition:opacity .24s;background:#12242130}
.element-guide svg{width:44px;height:44px}
body[data-phase=water] [data-element=water],body[data-phase=earth] [data-element=earth],body[data-phase=fire] [data-element=fire],body[data-phase=air] [data-element=air]{opacity:1}
body:not([data-phase=rest]):not([data-phase=logo]) h1{opacity:0!important}
body:not([data-phase=rest]) .detail{opacity:0!important;pointer-events:none}
body:not([data-phase=rest]) .beat-caption{display:none!important}
body:not([data-phase=rest]) h1{transform:translateY(var(--logo-shift));clip-path:none;transition:opacity .8s ease,transform 1.4s cubic-bezier(.2,.7,.15,1)}
body:not([data-phase=rest]) .coast img,body:not([data-phase=rest]) .people img,body:not([data-phase=rest]) .tide{animation:none!important;transform:none!important}
body[data-phase=logo] .veil{opacity:1}
@media(max-width:600px){.element-copy{left:8%;top:51%;width:84%}.element-heading{font-size:28px}.element-guide{left:8%;top:25%}.element-earth img{object-position:46% 50%}.element-water img{object-position:54% 50%}.element-air img{object-position:48% 50%}}
@media(max-height:500px){.element-guide{top:19%}.element-copy{top:43%}.element-heading{font-size:24px}.element-kicker{margin-bottom:8px}.element-location,.element-label{margin-top:10px}}
.element-guide{pointer-events:auto}
.element-guide:before,.element-guide>span{pointer-events:none}
.element-guide button:hover,.element-guide button:focus-visible{opacity:1}
.element-guide button[aria-pressed=true]{outline:1px solid #eee8d680;outline-offset:5px}
.element-guide button:focus-visible{outline:2px solid #fff0c0;outline-offset:5px}