.tunnel{position:relative;background:var(--ink);color:white}
.tunnel-stage{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;display:grid;place-items:center;padding:110px 24px 210px}
.tunnel-stage::after{content:"";position:absolute;inset:auto 0 -1px;height:24svh;min-height:140px;background:url("assets/mobile-seamless.webp") center/100% 100% no-repeat;z-index:-1;pointer-events:none}
.tunnel-brand{position:absolute;left:5vw;top:30px;color:white;z-index:5}.tunnel-brand img{width:58px;height:46px}.tunnel-brand span{font-size:28px}
.tunnel-copy{text-align:center;width:100%;position:relative;z-index:1;pointer-events:none}
.tunnel-copy h1{margin:0;font-size:clamp(40px,7.5vw,110px);line-height:1.2;transform-origin:50% 66.667%;will-change:transform,opacity}
.tunnel-line{display:block}
.tunnel-frames{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.tunnel-frame{position:absolute;left:50%;top:45%;width:clamp(120px,17vw,250px);aspect-ratio:4/5;background:#24365a;border:1px solid #9baec150;box-shadow:0 12px 32px #0005;border-radius:5px;opacity:0;will-change:transform,opacity}
.tunnel-active{height:430svh}.tunnel-active .tunnel-stage{position:sticky;top:0;height:100svh}
.signup-arrival{padding:54px 24px 0;background:var(--paper)}
.signup-arrival .signup{padding:0;max-width:460px;margin:auto;scroll-margin-top:40px}
.signup-arrival .signup h2{font-size:clamp(42px,5vw,64px)}
.signup-arrival .saxophonist{margin-top:38px}
@media(max-width:760px){.tunnel-stage{padding:110px 20px 200px}.tunnel-brand{left:24px;top:24px;gap:8px}.tunnel-brand span{font-size:24px}.tunnel-brand img{width:46px;height:38px}.tunnel-copy h1{font-size:clamp(32px,9vw,62px)}.tunnel-copy .eyebrow{font-size:10px}.signup-arrival{padding-top:30px}}
@media(prefers-reduced-motion:reduce){.tunnel-active{height:auto}.tunnel-active .tunnel-stage{position:relative}.tunnel-copy h1{will-change:auto}.tunnel-frames{display:none}}
/* Zoom the vector viewBox, never a cached CSS transform texture. */
.tunnel-copy h1{will-change:auto;line-height:1;width:100%}
.headline-svg{display:block;width:9em;height:3.6em;max-width:none;margin:0 auto;overflow:visible}
@media(forced-colors:active){.headline-svg{forced-color-adjust:none}}
.tunnel-copy{min-width:0}
.tunnel-copy h1{width:9em;max-width:100%;margin:0 auto}
.headline-svg{width:100%;height:auto;aspect-ratio:900/360}
/* Owner-provided artwork: show the whole composition, 20% larger than placeholders. */
.tunnel-frame{width:clamp(166px,23.5vw,345px);aspect-ratio:auto;background:transparent;border:0;overflow:hidden}
.tunnel-frame img{display:block;width:100%;height:auto;user-select:none}