:root{color-scheme:dark;--bg:#080c0d;--surface:#0d1517;--accent:#1a9fb5;--muted:#c9cdd4;--line:#ffffff24;--display:"Syne","Inter",sans-serif;--body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--bg);color:white;font-family:var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}h1,h2,h3,p{margin:0}button,a,input:focus{outline-offset:5px}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #7fd6e4}::selection{background:#1a9fb5;color:#080c0d}.accent{background:linear-gradient(180deg,#7fd6e4 0%,#93dde8 78%,#157f91 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.sr-only,.honeypot{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link{position:fixed;top:-100px;left:20px;background:white;color:var(--bg);padding:15px;z-index:99}.skip-link:focus{top:16px}.hero{position:relative;z-index:1;isolation:isolate;min-height:100dvh;height:max(900px,100dvh);overflow:hidden;background:var(--bg)}.nav{position:absolute;top:0;left:0;right:0;padding:2.15rem 3.5rem;display:flex;align-items:center;justify-content:space-between;gap:24px;z-index:5}.logo{font-family:var(--display);font-size:1.05rem;font-weight:700;letter-spacing:-.03em;white-space:nowrap}.nav-end{display:flex;align-items:center;gap:2.85rem}.links{display:flex;gap:2.85rem;align-items:center;font-size:.8125rem}.links a{transition:opacity .2s}.links a:hover{opacity:.62}.nav-attend{border:1px solid var(--line);background:transparent;font-size:.8125rem;display:flex;gap:24px;align-items:center;min-height:44px;padding:0 18px}.nav-attend:hover{background:white;color:var(--bg)}.hero-content{position:relative;z-index:2;text-align:center;padding:155px 24px 0;display:flex;flex-direction:column;align-items:center}.eyebrow,.section-index{font-size:.75rem;font-weight:500;letter-spacing:.18em;line-height:1.5}.eyebrow{color:var(--muted);margin-bottom:27px}h1{font-family:var(--display);font-weight:700;font-size:clamp(4.25rem,10.6vw,8.25rem);letter-spacing:-.045em;line-height:.92;position:relative;white-space:nowrap;width:100%;max-width:1100px;min-height:1em}.brand-title{display:block}.date-title{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.2em;font-size:.72em;visibility:hidden;opacity:0}.tagline{font-size:1.02rem;line-height:1.58;color:var(--muted);max-width:30rem;text-wrap:balance;margin:25px 0 26px}.hero-actions{display:flex;align-items:center;gap:28px}.ghost{border:1px solid #fffffff2;padding:.95rem 1.7rem .95rem 1.85rem;min-height:52px;display:inline-flex;gap:28px;align-items:center;justify-content:center;background:transparent;font-size:.75rem;font-weight:500;letter-spacing:.18em;transition:background .2s,color .2s}.ghost svg{width:22px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5}.ghost:hover{background:white;color:#0b0d12}.primary{border-color:var(--accent);color:#1a9fb5}.primary:hover{background:var(--accent);color:#080c0d}.event-meta{display:flex;flex-direction:column;gap:6px;line-height:1.4;color:var(--muted);font-size:.8125rem;text-align:left}.event-meta strong{font-size:.875rem;color:white;font-weight:500}.hero-film{position:absolute;bottom:0;left:0;right:0;height:39%;z-index:0;background:var(--bg)}.hero-film video{display:block;width:100%;height:100%;object-fit:cover;object-position:center 57%}.film-toggle{position:absolute;right:24px;bottom:24px;border:1px solid #ffffff70;background:#080c0d;padding:10px 15px;font-size:.75rem;min-height:44px;z-index:2}.film-caption{position:absolute;left:3.5rem;bottom:30px;font-size:.6875rem;letter-spacing:.16em;background:#080c0d;padding:10px 14px}.glass-wrap{position:absolute;right:3%;bottom:5%;z-index:1;width:min(23vw,310px);pointer-events:none;transform:rotate(8deg)}.glass-wrap img{display:block;width:100%;height:auto}.cover{position:relative;z-index:4;will-change:transform;background:var(--bg);display:flow-root}.bar-belt{position:absolute;left:0;top:0;z-index:6;width:100%;height:auto;pointer-events:none;transform:translateY(-50%)}.about{position:relative;z-index:1;min-height:100dvh;padding:calc(18vw + 3rem) 6vw 8vh;background:var(--bg)}.about-inner{position:relative;z-index:2;width:min(62rem,100%);margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center}.section-index{color:var(--accent);margin-bottom:24px}.about h2,.values h2{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,5.4vw,4.15rem);letter-spacing:-.03em;line-height:1.06}.rule{height:1px;width:6.5rem;background:linear-gradient(90deg,transparent,#1a9fb5,transparent);margin:1.45rem 0 1.75rem}.lead{max-width:40rem;font-size:1.02rem;line-height:1.65;color:var(--muted)}.about-columns{display:grid;grid-template-columns:1fr 1fr;gap:2.75rem 3.5rem;max-width:52rem;margin-top:2.3rem;text-align:left;font-size:1rem;line-height:1.7;color:#a9afbb}.chips{display:flex;justify-content:center;gap:1.15rem;margin-top:2.85rem}.chips span{font-family:var(--display);font-weight:600;font-size:.75rem;letter-spacing:.16em;border:1px solid var(--accent);color:#1a9fb5;min-width:13.5rem;padding:16px 20px}.values{padding:90px 8vw 110px;max-width:1440px;margin:auto}.values-intro{display:grid;grid-template-columns:1fr 2fr;gap:40px;align-items:start;margin-bottom:70px}.values-intro .section-index{padding-top:12px;max-width:190px}.values-list{border-top:1px solid var(--line)}.value{display:grid;grid-template-columns:100px 1fr 200px;gap:35px;padding:42px 0;border-bottom:1px solid var(--line);align-items:start}.value-number{font-family:var(--display);font-size:1.2rem;color:var(--accent);padding-top:7px}.value h3{font-family:var(--display);font-size:clamp(1.8rem,3vw,2.7rem);font-weight:600;letter-spacing:-.03em;margin-bottom:17px}.value p{font-size:1rem;line-height:1.7;color:var(--muted);max-width:520px}.value-note{font-size:.6875rem;letter-spacing:.1em;color:#a9afbb;text-align:right;padding-top:15px}.footer{background:#0d1517;border-top:1px solid var(--line);min-height:100dvh;padding:90px 6vw 25px;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center}.footer h2{font-family:var(--display);font-size:clamp(3rem,7.4vw,7rem);line-height:1;letter-spacing:-.04em;font-weight:700}.footer-lead{font-size:1rem;line-height:1.65;color:var(--muted);margin:28px 0}.footer .event-meta{text-align:center;margin-top:24px}.footer-bottom{width:100%;border-top:1px solid var(--line);margin-top:90px;padding-top:26px;display:flex;align-items:center;justify-content:space-between;gap:28px;text-align:left}.footer-bottom p{font-size:.75rem;line-height:1.6;color:#a9afbb}.footer-bottom nav{display:flex;gap:24px;align-items:center;font-size:.8125rem}.footer-bottom button,.privacy-note button{padding:0;background:none;border:0;text-decoration:underline;text-underline-offset:4px;font:inherit}.reveal{animation:rise .9s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d,0s)}.about .reveal{animation:none}.js-motion .about .reveal{opacity:0;transform:translateY(1.15rem);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}.js-motion .about-inner.is-in .reveal{opacity:1;transform:none}@keyframes rise{from{opacity:0;transform:translateY(1.15rem)}to{opacity:1;transform:none}}dialog{position:fixed;background:#0d1517;color:white;border:1px solid #ffffff38;padding:40px;width:min(600px,calc(100% - 24px));max-height:90dvh;overflow-y:auto;overscroll-behavior:contain}dialog::backdrop{background:#080c0dc9;backdrop-filter:blur(7px)}.dialog-close{position:absolute;right:12px;top:10px;background:none;border:0;min-height:44px;min-width:44px;font-size:30px}.form-header{margin:4px 0 32px}.form-header h2{font-family:var(--display);font-size:2.7rem;line-height:1.05;letter-spacing:-.04em;margin-bottom:18px}.form-header p:last-child{color:var(--muted);font-size:.875rem;line-height:1.6}.form-header .section-index{margin-bottom:16px}.fields{display:grid;gap:21px}.fields label{display:flex;flex-direction:column;gap:9px;font-size:.875rem}input:not([type=radio]):not([type=checkbox]){border:1px solid #ffffff35;background:#080c0d;padding:13px 14px;color:white;width:100%;font-size:1rem;min-height:48px;border-radius:0}fieldset{margin:30px 0 0;padding:0;border:0;min-width:0}legend{font-weight:600;font-size:.875rem;margin-bottom:13px}.media-choice>p{font-size:.875rem;color:var(--muted);margin-bottom:15px}.choice{display:flex;align-items:flex-start;gap:13px;padding:14px 0;font-size:.875rem;line-height:1.6;cursor:pointer}.choice input{margin:3px 0 0;width:20px;height:20px;flex:none;accent-color:var(--accent);cursor:pointer}.policy{border:1px solid #1a9fb580;padding:20px;margin-top:26px}.policy legend{color:#1a9fb5;padding:0 8px}.policy h3{font-family:var(--display);font-size:1.65rem;line-height:1.12;letter-spacing:-.025em;margin-bottom:15px}.policy>p{font-size:.875rem;line-height:1.7;color:var(--muted)}.policy .choice{border-top:1px solid var(--line);margin-top:18px;padding-top:18px;padding-bottom:0}.choice strong{display:block;color:#1a9fb5;font-weight:500;font-size:.75rem;margin-top:6px}.submit{width:100%;margin-top:22px;justify-content:space-between}.submit:disabled{opacity:.6;cursor:wait}.form-error{font-size:.875rem;color:#ffafa5;line-height:1.6;margin-top:16px}.form-error:empty{display:none}.privacy-note{font-size:.75rem;line-height:1.6;margin-top:16px;color:var(--muted)}.success{text-align:center;padding:30px 0}.success[hidden]{display:none}.success h3{font-family:var(--display);font-size:3rem;margin-bottom:20px}.success p{font-size:1rem;line-height:1.65;color:var(--muted);margin-bottom:22px}.success-check{font-size:3rem;color:var(--accent);display:block;margin-bottom:22px}.privacy-dialog h2{font-family:var(--display);font-size:2rem;margin:20px 0}.privacy-dialog p{line-height:1.7;font-size:1rem;color:var(--muted);margin:18px 0}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:hidden}
@media(max-width:900px){.links{display:none}.nav{padding:1.4rem 1.35rem}.nav-end{gap:0}.hero{height:max(840px,100dvh)}.hero-content{padding-top:130px}.hero h1{font-size:clamp(3.4rem,10.6vw,6rem)}.hero-film{height:40%}.glass-wrap{display:none}.film-caption{left:20px;font-size:.625rem}.about{padding:calc(18vw + 4.5rem) 1.35rem 5rem;min-height:0}.about h2{font-size:clamp(2.6rem,6.5vw,3.5rem)}.about-columns{gap:2rem}.values{padding:65px 6vw 80px}.values-intro{display:block;margin-bottom:45px}.values-intro .section-index{max-width:none;margin-bottom:22px}.value{grid-template-columns:45px 1fr;gap:18px;padding:32px 0}.value-note{display:none}.footer{padding:70px 6vw 25px}.footer-bottom{flex-wrap:wrap;margin-top:65px}.footer-bottom nav{width:100%;justify-content:center;padding-top:15px}}
@media(max-width:600px){.hero{height:max(840px,100svh);min-height:100svh}.hero-content{padding:120px 22px 0}.eyebrow{font-size:.625rem;letter-spacing:.11em;margin-bottom:26px;max-width:280px}.hero h1{font-size:11vw;letter-spacing:-.05em;min-height:1.05em}.date-title{font-size:.76em}.tagline{font-size:1rem;max-width:320px;margin:22px 0 24px}.hero-actions{flex-direction:column;gap:19px;width:100%}.hero-actions .ghost{width:min(100%,320px);min-height:56px}.hero-actions .event-meta{text-align:center}.hero-film{height:35%}.film-caption{display:none}.film-toggle{right:16px;bottom:18px}.about-columns{grid-template-columns:1fr;gap:20px;margin-top:25px}.about-inner{text-align:left;align-items:flex-start}.about h2{font-size:clamp(2rem,8vw,2.6rem);overflow-wrap:normal}.about h2 br{display:none}.about .lead{font-size:1rem}.chips{flex-direction:column;width:100%;gap:12px;margin-top:30px}.chips span{text-align:center;min-width:0;width:100%}.values h2{font-size:2.6rem}.values-intro{margin-bottom:36px}.value h3{font-size:1.8rem}.value{grid-template-columns:30px 1fr;gap:14px}.value-number{font-size:1rem}.value p{font-size:1rem}.footer{min-height:90svh}.footer h2{font-size:clamp(2.7rem,10vw,4rem)}.footer .ghost{width:100%;max-width:320px}.footer-bottom{flex-direction:column;text-align:center;gap:20px}.footer-bottom nav{flex-wrap:wrap;font-size:.8125rem;gap:24px}.footer-bottom .logo{font-size:1.2rem}dialog{padding:32px 22px;max-height:92dvh}.form-header h2{font-size:2.3rem;padding-right:20px}.policy{padding:16px}.section-index{font-size:.6875rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal,.js-motion .about .reveal{animation:none!important;opacity:1!important;transform:none!important;transition:none!important}.cover{transform:none!important}.ghost,.links a{transition:none}.brand-title{opacity:0!important;visibility:hidden!important}.date-title{opacity:1!important;visibility:visible!important}}

.hero{height:100svh;min-height:720px}.hero-film{inset:0;height:100%;width:100%}.hero-film video{width:100%;height:100%;object-fit:cover;object-position:center center}.hero-content{min-height:100%;justify-content:center;padding:110px 24px 170px}.hero .eyebrow,.hero .tagline,.hero .event-meta,.hero .event-meta strong{color:white;text-shadow:0 2px 5px #080c0d,0 0 14px #080c0db0}.hero h1{text-shadow:0 3px 15px #080c0d80}.hero .ghost,.nav-attend{background:#080c0d;color:white;border-color:#1a9fb5}.hero .ghost:hover,.nav-attend:hover{background:#1a9fb5;color:#080c0d}.nav .logo,.nav .links{color:white;text-shadow:0 2px 6px #080c0d}.film-caption{display:none}.film-toggle{bottom:22px;right:24px}.glass-wrap{display:none}
dialog{inset:0;margin:auto;padding:0;width:min(600px,calc(100% - 28px));height:fit-content;max-height:calc(100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:hidden}
dialog[open]{display:flex;flex-direction:column}.dialog-toolbar{display:flex;align-items:center;justify-content:space-between;flex:none;min-height:64px;padding:8px 12px 8px 26px;background:#0d1517;border-bottom:1px solid #ffffff24;position:relative;z-index:10}.dialog-toolbar>span{font-size:12px;letter-spacing:.12em;color:#c9cdd4}.dialog-close{position:static;display:grid;place-items:center;width:48px;height:48px;min-width:48px;min-height:48px;padding:0;border:1px solid #ffffff40;border-radius:50%;background:#151b27;font-size:30px;line-height:1;flex:none;touch-action:manipulation}.dialog-close:hover{background:#1a9fb5;color:#080c0d}.dialog-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:28px 36px 36px}.form-header{margin-top:0}
@media(max-width:900px){.hero{height:100svh;min-height:720px}.hero-content{padding:110px 24px 160px}.hero-film{height:100%}.hero .tagline{max-width:30rem}}
@media(max-width:600px){.hero{height:100svh;min-height:680px}.hero-content{padding:115px 22px 125px;justify-content:center}.hero-film{height:100%}.hero-film video{object-position:center}.hero .ghost{font-size:.7rem;letter-spacing:.12em;padding-inline:16px}.hero-actions{gap:18px}.hero .tagline{font-size:1rem}.footer h2{font-size:clamp(2.25rem,8.6vw,3.4rem)}dialog{width:calc(100% - 24px);max-height:calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.dialog-toolbar{padding-left:20px;min-height:64px}.dialog-body{padding:24px 20px 28px}}

dialog{top:calc(var(--dialog-top,24px) + env(safe-area-inset-top,0px));max-height:calc(var(--dialog-height,90dvh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}

.hero h1{font-size:clamp(4.25rem,12.2vw,11.5rem);font-weight:800;letter-spacing:-.055em;max-width:1400px}.hero .tagline{font-size:1rem;max-width:27rem}.hero-actions{flex-direction:column;gap:18px}.hero-actions .event-meta{text-align:center}.hero .ghost{background:#1a9fb5;color:#080c0d;font-weight:600;min-width:270px}.hero .ghost:hover{background:white;border-color:white}.nav{padding:28px 3.5vw}.nav-attend{border-radius:40px}.nav .links{gap:30px}.about h2{font-size:clamp(2.6rem,5.7vw,5.3rem);font-weight:800}.values{max-width:none;background:#f3f3f0;color:#101010;padding:90px 7vw 100px}.values-intro{grid-template-columns:1fr 2fr;gap:50px}.values h2{font-weight:800}.values-list,.value{border-color:#10101030}.value{grid-template-columns:90px 1fr 180px;padding:36px 0}.value h3{font-size:clamp(2rem,4.2vw,4rem);font-weight:700;margin-bottom:12px}.value p{color:#444;max-width:610px}.value-note{color:#555}.values .section-index,.values .value-number{color:#6fb9c4}.footer{background:#080c0d;border-top:8px solid #1a9fb5;padding-top:110px}.footer h2{font-size:clamp(3rem,8.7vw,8.5rem);font-weight:800;line-height:1.03;letter-spacing:-.055em}.footer .primary{border-radius:40px;min-width:250px}.footer-bottom{border-color:#ffffff40}.film-toggle{border-radius:30px}.footer-arrival{will-change:transform,opacity}
@media(max-width:700px){.hero h1{font-size:12.3vw;letter-spacing:-.055em}.nav{padding:22px}.hero-actions .ghost{min-width:0;max-width:320px}.values{padding:64px 24px}.values-intro{display:block}.values h2{font-size:clamp(2.3rem,9vw,3rem)}.value{grid-template-columns:28px 1fr;gap:14px;padding:30px 0}.value h3{font-size:clamp(1.6rem,7vw,2.2rem)}.value-number{font-size:1rem}.footer{padding-top:80px}.footer h2{font-size:clamp(2.3rem,9vw,4rem);letter-spacing:-.045em}.footer .primary{min-width:0}.footer-arrival{will-change:auto}}
:root{--bg:#080c0d;--surface:#0d1517;--accent:#1a9fb5;--muted:#c5d3d6;--display:"Archivo","Inter",sans-serif;--line:#c3e3e82b}body{background:#080c0d}.accent{background:none;color:#1a9fb5;-webkit-text-fill-color:currentColor}.hero-track{height:175svh;position:relative}.hero{position:sticky;top:0;height:100svh;min-height:660px;background:#080c0d;overflow:hidden}.nav{padding:25px 4vw}.hero-content{position:absolute;inset:auto 20px 9%;padding:0;min-height:0;z-index:3;justify-content:flex-end}.hero .eyebrow{display:none}.hero .tagline{font-size:1rem;margin:0 0 22px;color:#fff}.hero-actions{gap:16px}.hero .ghost{background:#1a9fb5;border-color:#1a9fb5;color:#0c191b;border-radius:6px;font-size:.8rem;letter-spacing:.07em;min-width:265px}.hero .ghost:hover{background:#22b5cc}.nav-attend{background:#0f2023;border-color:#1a9fb5;color:#1a9fb5}.nav-attend:hover{background:#1a9fb5;color:#0d1517}#parallax-root,.parallax__layers{position:absolute;inset:0}.parallax__film{position:absolute;inset:-20% 0;height:140%;z-index:0}.parallax__film video{width:100%;height:100%;object-fit:cover}.parallax__layer-title{position:absolute;top:18%;left:0;right:0;text-align:center;z-index:2}.hero h1{font-family:var(--display);font-weight:900;font-size:clamp(5.6rem,11vw,10.4rem);line-height:.87;letter-spacing:-.055em;max-width:none;min-height:1.8em;text-shadow:0 2px 20px #0005}.brand-title{display:block}.date-title{display:block;inset:0;font-size:1em;line-height:.87}.date-title>.date-word{font-size:.48em;letter-spacing:-.04em}.parallax__bar{position:absolute;left:0;top:100%;width:100%;height:clamp(240px,31.25vw,600px);z-index:4;pointer-events:none}.parallax__bar img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}.bar-base{position:absolute;left:0;right:0;top:99%;height:100svh;background:#080c0d}.film-toggle{position:absolute;z-index:5;right:22px;bottom:22px;background:#0c191b;color:#e4f7fa;border-color:#e4f7fa80}.cover{transform:none!important;margin-bottom:0!important;position:relative;z-index:2;background:#080c0d}.about{padding:85px 6vw 65px;min-height:0;background:#080c0d}.about h2,.values h2{font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,4.5vw,3.8rem);letter-spacing:-.045em}.about-inner{max-width:970px}.rule{background:#1a9fb5}.section-index,.value-number{color:#1a9fb5}.chips span{color:#1a9fb5;border-color:#1a9fb550}.values{position:relative;background:#0d1517;color:#f5eeec;padding:65px 7vw 90px}.values .section-index,.values .value-number{color:#1a9fb5}.values p,.value-note{color:#c5d3d6}.values-list,.value{border-color:#c3e3e830}.value h3{font-size:clamp(1.9rem,3.5vw,3rem);font-weight:700}.footer-stage{position:relative;z-index:6;perspective:1600px;perspective-origin:50% 0}.grand-footer{min-height:0;height:auto;position:relative;transform-origin:bottom;backface-visibility:hidden;background:#1a9fb5;color:#0c191b;display:flex;flex-direction:column;padding:60px 6vw 22px;border:0;box-shadow:0 -25px 80px #0006}.footer-content{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;gap:0}.footer-kicker{font-size:.75rem;letter-spacing:.12em;margin-bottom:24px}.footer .footer-wordmark{font-family:var(--display);font-weight:900;font-size:clamp(3.5rem,10vw,9rem);line-height:.95;letter-spacing:-.065em;margin:0 0 18px}.footer-wordmark span{color:transparent;-webkit-text-stroke:2px #0c191b}.footer-invite{font-size:clamp(1.8rem,3vw,2.7rem);font-weight:700;letter-spacing:-.04em;margin-bottom:12px}.footer-description{font-size:1rem;line-height:1.6;color:#214346}.footer .footer-attend{margin:24px 0 20px;background:#0c191b;color:#e4f7fa;border:1px solid #0c191b;border-radius:5px;font-size:.8rem;min-width:250px;letter-spacing:.1em}.footer .footer-attend:hover{background:#233d40}.footer-place{display:flex;flex-direction:column;gap:5px;font-size:.875rem;line-height:1.5}.footer-place strong{font-weight:600}.footer-destinations{display:flex;gap:30px;margin-top:24px}.footer-destinations button{border:0;background:none;padding:0;font:inherit}.footer-destinations a,.footer-destinations button{font-size:.875rem;min-height:44px;display:flex;align-items:center;border-bottom:1px solid #0c191b40}.footer-colophon{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;margin-top:32px;border-top:1px solid #0c191b40;padding-top:20px;font-size:.75rem;line-height:1.6}.footer-colophon a{min-height:44px;display:flex;align-items:center}dialog,.dialog-toolbar{background:#0d1517}.dialog-close{background:#1a2d30;border-color:#1a9fb560}.dialog-close:hover{background:#1a9fb5}.policy{border-color:#1a9fb570}.policy legend,.choice strong,.success-check{color:#1a9fb5}input:not([type=radio]):not([type=checkbox]){background:#080c0d}.primary{color:#1a9fb5;border-color:#1a9fb5}.primary:hover{background:#1a9fb5;color:#0c191b}::selection{background:#1a9fb5;color:#0c191b}.skip-link{background:#1a9fb5}a:focus-visible,button:focus-visible,input:focus-visible{outline-color:#1a9fb5}
@media(max-width:700px){.hero-track{height:155svh}.hero{height:100svh;min-height:640px}.nav{padding:20px}.nav .logo{font-size:1rem}.parallax__layer-title{top:20%}.hero h1{font-size:clamp(5rem,21vw,7.6rem);line-height:.89;letter-spacing:-.055em}.hero-content{inset:auto 22px 10%;padding:0}.hero .tagline{font-size:.95rem;max-width:300px;margin-bottom:18px}.hero .ghost{min-width:0;min-height:54px}.hero .event-meta{font-size:.8rem}.film-toggle{right:16px;bottom:14px;font-size:.75rem;min-height:40px}.parallax__bar{height:270px;left:-25%;width:150%}.about{padding:65px 24px 50px}.about h2{font-size:2.45rem}.values{padding:50px 24px 65px}.values h2{font-size:2.45rem}.value h3{font-size:1.9rem}.grand-footer{padding:42px 24px 18px}.footer .footer-wordmark{font-size:12vw;letter-spacing:-.065em;white-space:nowrap;margin-bottom:18px}.footer-kicker{font-size:.7rem;letter-spacing:.06em;margin-bottom:24px}.footer-invite{font-size:1.9rem}.footer-description{font-size:.95rem}.footer-colophon{flex-direction:column;text-align:center;gap:8px;margin-top:24px;padding-top:18px}.footer .footer-attend{width:100%;max-width:320px}.footer-stage{perspective:1000px}}
@media(prefers-reduced-motion:reduce){.hero-track{height:auto}.hero{position:relative}.parallax__bar{display:none}.grand-footer,.footer-content{transform:none!important;opacity:1!important}.date-title{visibility:visible!important;opacity:1!important}.values{position:relative}}
@media(max-height:720px) and (min-width:701px){.hero{min-height:600px}.parallax__layer-title{top:15%}.hero h1{font-size:6.6rem}.hero-content{bottom:8%}}
.hero-track{height:135svh}.parallax__film{inset:-7.5% 0;height:115%;will-change:transform}.parallax__layer-title,.parallax__bar{will-change:transform}.outro-stack{position:relative;isolation:isolate;background:#0d1517}.outro-stack>.values{position:sticky;top:var(--sticky-top,0);z-index:1;margin:0}.footer-stage{position:relative;z-index:6;min-height:100svh}.grand-footer{min-height:100svh;width:100%;justify-content:center;background:#146a78;box-shadow:0 -12px 45px #0005}.footer-content{flex:1;justify-content:center}.footer-colophon{flex:none}.footer-register-link{margin:20px 0 16px;text-decoration:underline;text-underline-offset:5px;font-size:.875rem;min-height:44px;display:inline-flex;align-items:center}.attend-button{position:relative;display:inline-flex;align-items:center;justify-content:center;isolation:isolate;width:310px;max-width:100%;height:64px;padding:4px 66px 4px 26px;border:1px solid #93dde8;border-radius:999px;background:#1896ab;color:#0b1415;font-family:var(--body);font-size:1.05rem;font-weight:600;letter-spacing:-.02em;line-height:1;cursor:pointer;overflow:hidden;box-shadow:0 6px 26px #0004;transition:padding .35s,background .2s,box-shadow .2s}.attend-button__label{position:relative;z-index:1;white-space:nowrap}.attend-button__icon{position:absolute;right:5px;top:5px;width:52px;height:52px;background:#0f1a1c;color:#dcf4f8;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:right .35s,transform .35s}.attend-button__icon svg{width:22px;height:22px}.attend-button:focus-visible{outline:3px solid white;outline-offset:5px}.attend-button:active{background:#22b5cc}.hero .hero-actions{gap:18px}#attend-button{max-width:100%}.hero-content .reveal{animation-duration:.6s}.footer-description,.footer-colophon{color:#133033}.footer-wordmark span{-webkit-text-stroke-color:#0c191b}.hero .event-meta{color:white}.parallax__bar img{contain:paint}.hero{transform:translateZ(0)}
@media(hover:hover) and (pointer:fine){.attend-button:hover{padding-left:66px;padding-right:26px;background:#22b5cc;box-shadow:0 8px 30px #0005}.attend-button:hover .attend-button__icon{right:calc(100% - 57px);transform:rotate(45deg)}}
@media(max-width:700px){.hero-track{height:125svh}.hero{min-height:600px}.attend-button{height:62px;width:min(310px,calc(100vw - 44px));font-size:1.05rem}.attend-button__icon{width:50px;height:50px}.grand-footer{min-height:100svh;padding:36px 24px 20px}.footer-content{padding-block:18px}.footer-stage{perspective:1200px}.hero .tagline{margin-bottom:20px}.values{padding-bottom:45px}.parallax__film{will-change:auto}.hero-content{bottom:9%}}
@media(prefers-reduced-motion:reduce){.hero-track{height:auto}.attend-button,.attend-button__icon{transition:none}.outro-stack>.values{position:relative;top:auto}.grand-footer{transform:none!important;border-radius:0!important}}

.grand-footer{min-height:100dvh}

html.lenis,html.lenis body{height:auto}html.lenis{scroll-behavior:auto!important}.lenis [data-lenis-prevent]{overscroll-behavior:contain}.hero{transform:none}.cover{will-change:auto}.parallax__film{inset:-7.5% 0;height:115%;will-change:auto}.parallax__film video{display:block}.footer-stage{perspective:1600px}.grand-footer{backface-visibility:hidden;box-shadow:0 -12px 45px #0005}.footer-content{will-change:auto}dialog::backdrop{backdrop-filter:blur(7px);background:#080c0dc9}.dialog-body{touch-action:pan-y}.parallax__bar{will-change:auto}.parallax__layer-title{will-change:auto}

.bar-base{height:8px}.parallax__film video{backface-visibility:hidden}@media(max-width:700px){.footer-stage{perspective:1200px}}

.parallax__layers{perspective:1400px;perspective-origin:50% 100%}.parallax__bar{transform-origin:50% 100%;backface-visibility:hidden}.whisper-text{display:block}.whisper-word{display:inline-block}.values-intro h2{overflow:visible}@media(max-width:700px){.parallax__layers{perspective:1100px}}@media(prefers-reduced-motion:reduce){.whisper-word{opacity:1!important;transform:none!important}}

.values-intro{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:72svh;gap:32px;padding:8vh 0 12vh;text-align:center}.values-intro .section-index{font-size:.8rem;letter-spacing:.18em}.values-intro h2{font-size:clamp(3.25rem,7.6vw,7.25rem);line-height:1.06;letter-spacing:-.055em;max-width:18ch;width:100%;margin:0}.parallax__bar{left:-2%;width:104%;height:clamp(320px,34.667vw,707px);transform-origin:50% 100%}.parallax__bar img{object-position:right bottom}.parallax__layers{perspective-origin:90% 100%}@media(max-width:700px){.values-intro{min-height:66svh;padding:7vh 0 10vh;gap:24px}.values-intro h2{font-size:clamp(2.8rem,10.8vw,4.5rem);max-width:15ch}.values-intro .section-index{font-size:.75rem;letter-spacing:.12em}.parallax__bar{left:0;width:100%;height:300px;transform-origin:90% 100%}.parallax__bar img{object-position:right bottom}}

.text-block-animation{position:relative;min-width:0}.block-line-clip{position:relative;display:block;overflow:hidden}.block-line-revealer{position:absolute;inset:0;z-index:2;pointer-events:none;transform:scaleX(0);transform-origin:left center}.rolling-text{display:block;font:inherit;letter-spacing:inherit}.rolling-line{display:block;line-height:.8;padding-bottom:.09em;white-space:nowrap}.rolling-cell{position:relative;display:inline-block;vertical-align:top}.rolling-sizer{display:block;visibility:hidden}.rolling-window{position:absolute;inset:0;overflow:hidden}.rolling-reel{display:block}.rolling-copy{display:block;height:.8em;line-height:.8;text-align:center}.brand-title .rolling-line-1{color:#1a9fb5}.date-title .rolling-line-1{font-size:.48em;letter-spacing:-.04em}.date-title .rolling-line-0{margin-bottom:.09em}.value-number.text-block-animation,.value-note.text-block-animation{align-self:start}.value-note.text-block-animation{padding-top:.7em}.value h3{padding-bottom:.08em}

.text-block-animation>span{display:block}

/* v20.1: "The idea" stays pinned while the values section slides in from the left over it, mirroring how the footer rides over the values list. */
.cover{position:sticky;top:var(--cover-top,0px);z-index:1;min-height:100svh}
.outro-stack{position:relative;z-index:3;will-change:transform}

/* v20.2: the wooden counter is opaque and its wood continues down through "The idea", as if the section sits inside the bench. Colours sampled from the bottom rows of bar-belt.webp so the seam is invisible. */
.bar-base{background:#220c06}
.cover,.about{background:linear-gradient(180deg,#00000026,#00000059 40%,#00000040),url(media/bar-front.webp) center top/cover no-repeat #1c0905}
.values-intro{min-height:100svh}
.values{padding-bottom:22svh}
.grand-footer{padding:120px 6vw 40px}
@media(max-width:700px){.values-intro{min-height:90svh}.grand-footer{padding:80px 24px 28px}}
.about-columns{color:#d8cfc6}

/* v20.3: "The idea" on wood - larger, white type on a soft dark scrim so the grain stays visible around the text but never behind it. */
.about-inner{padding:52px 44px;background:#00000066;box-shadow:0 0 90px 56px #00000066;border-radius:10px}
.about .section-index{color:#5ccbdc;text-shadow:0 1px 8px #000}
.about h2{font-size:clamp(2.7rem,5.4vw,4.6rem);color:#fff;text-shadow:0 2px 26px #000d}
.about .rule{background:#5ccbdc}
.about .lead{font-size:clamp(1.12rem,1.55vw,1.32rem);line-height:1.6;color:#fff;text-shadow:0 1px 12px #000d}
.about-columns{font-size:1.1rem;line-height:1.75;color:#f4ede6;text-shadow:0 1px 10px #000d}
.about .chips span{background:#00000080;border-color:#5ccbdc;color:#5ccbdc}
@media(max-width:700px){.about-inner{padding:36px 22px;box-shadow:0 0 60px 30px #00000066}.about h2{font-size:2.5rem}.about-columns{font-size:1.02rem}}

/* v20.4: "Powered by Service Vision x Prymit" under the hero title; rides along with the title layer via data-parallax-layer="3". */
.powered-by{position:absolute;left:0;right:0;top:calc(18% + 2*clamp(5.6rem,11vw,10.4rem) + 30px);z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:none}
.powered-by__label{font-size:.72rem;font-weight:500;letter-spacing:.22em;color:#e4f7fa;opacity:.85;text-shadow:0 1px 8px #000}
.powered-by__logos{display:flex;align-items:center;gap:26px}
.powered-by__logos a{pointer-events:auto;display:block;transition:opacity .2s}.powered-by__logos a:hover{opacity:.8}
.powered-by__logos img{width:auto;display:block;filter:drop-shadow(0 2px 12px #000a)}
/* Equal area rather than equal height: the Prymit wordmark is 5.3:1, Service Vision 2.2:1, so same height reads as very different sizes. */
.powered-by__logos img[alt="Prymit"]{height:clamp(30px,3.5vw,46px)}
.powered-by__logos img[alt="Service Vision"]{height:clamp(44px,5.1vw,67px)}
.powered-by__x{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2vw,1.9rem);line-height:1;color:#1a9fb5;text-shadow:0 1px 8px #000}
@media(max-width:700px){.powered-by{top:calc(20% + 2*clamp(5rem,21vw,7.6rem) + 22px);gap:10px}.powered-by__logos{gap:16px}.powered-by__logos img[alt="Prymit"]{height:26px}.powered-by__logos img[alt="Service Vision"]{height:38px}.powered-by__x{font-size:1.2rem}}
@media(max-height:720px) and (min-width:701px){.powered-by{top:calc(15% + 2*6.6rem + 16px);gap:9px}.powered-by__logos img[alt="Prymit"]{height:30px}.powered-by__logos img[alt="Service Vision"]{height:44px}.hero-content{bottom:6%}}

/* v20.5: "One evening. Three things that matter." - a sheen travels through the words in reading order as they fade in.
   Words on a line share one coordinate space (--ww line width, --wx offset in the line) so the band is continuous
   across a line; --sheen is driven by GSAP per line. */
.values-intro h2 .whisper-word{--ink:#fff;--hi:#1a9fb5;--mid:#8fd8e3;--wx:0px;--sheen:-45%;color:transparent;-webkit-text-fill-color:transparent;
 background-color:var(--ink);
 background-image:linear-gradient(105deg,var(--ink) 0%,var(--ink) calc(var(--sheen) - 34%),var(--mid) calc(var(--sheen) - 13%),var(--hi) var(--sheen),var(--mid) calc(var(--sheen) + 13%),var(--ink) calc(var(--sheen) + 34%),var(--ink) 100%);
 background-size:var(--ww,100%) 100%;background-position:calc(-1 * var(--wx)) 0;background-repeat:no-repeat;
 -webkit-background-clip:text;background-clip:text}
.values-intro h2 .whisper-word.accent{--ink:#1a9fb5;--hi:#fff;--mid:#a9e2ea}
@media(max-width:700px){.outro-stack{will-change:auto}}
@media(prefers-reduced-motion:reduce){.values-intro h2 .whisper-word{background-image:none}}

/* v20.6: footer type in white on the blue - the navy text sat at ~3:1 against #146a78; white reads at 6.6:1 without touching the background. */
.grand-footer{color:#fff}
.footer-kicker{color:#e4f7fa}
.footer .footer-wordmark{color:#fff}
.footer-wordmark span{color:transparent;-webkit-text-stroke-color:#fff}
.footer-invite,.footer-register-link,.footer-place,.footer-place strong,.footer-colophon a{color:#fff}
.footer-description{color:#e4f7fa}
.footer-destinations a,.footer-destinations button{color:#fff;border-bottom-color:#ffffff66}
.footer-colophon{color:#d3eff4;border-top-color:#ffffff40}

/* v20.7: Anton for the hero title (NOW WHAT? / 12 NOVEMBER). Anton is condensed and already heavy, so no negative tracking and weight 400. */
.hero h1{font-family:"Archivo","Inter",sans-serif;font-weight:900;letter-spacing:-.04em;line-height:.88;min-height:2em}
/* Archivo Black caps stand ~0.72em; the reel window follows the face so nothing clips. */
.hero h1 .rolling-line{line-height:.88}.hero h1 .rolling-copy{height:.88em;line-height:.88}.hero h1 .date-title{line-height:.88}

/* v20.8: the bench is part of the hero at rest - the title's bottom line sits behind the counter, glasses in front, and the
   tagline, CTA and Powered by stand on the wood below. --bar-rest is computed from the title's height in script.js. */
.parallax__bar{top:var(--bar-rest,100%)}
.bar-base{top:calc(100% - 2px);height:120vh;background:url(media/bar-front.webp) center top/cover no-repeat #1c0905}
.hero-content{z-index:5;inset:auto 20px 6%}
.powered-by{position:static;top:auto;margin:0 0 26px;gap:12px;pointer-events:auto}
.powered-by__label{opacity:.9}
@media(max-width:700px){.hero-content{inset:auto 22px 7%}.powered-by{margin-bottom:18px;gap:9px}}
@media(max-height:720px) and (min-width:701px){.powered-by{margin-bottom:14px;gap:8px}.hero .tagline{margin-bottom:14px}}

/* v20.9: still lounge instead of the film, guests as a foreground layer in front of the title (WANDER-style), bench rising in
   as the next section. Layers back to front: lounge (1), title (2), guests (3), bench (4), content (5). */
.parallax__film{background:url(media/lounge.webp) center 40%/cover no-repeat #0d1517}
.parallax__film video,.film-toggle{display:none}
.parallax__people{position:absolute;left:0;right:0;bottom:0;height:62%;z-index:3;background:url(media/people.webp) center bottom/auto 100% no-repeat;pointer-events:none;transform-origin:50% 100%;will-change:transform}
.parallax__bar{top:100%}
.bar-base{top:99%;height:8px;background:#0d1517}
.hero-content{z-index:5;inset:auto 20px 5%}
.hero .tagline,.hero .event-meta,.hero .event-meta strong{text-shadow:0 1px 10px #000c}
.powered-by__label{text-shadow:0 1px 8px #000}
.parallax__layer-title{top:14%}
@media(max-width:700px){.parallax__people{height:52%;background-size:auto 100%}.hero-content{inset:auto 22px 5%}}
@media(max-height:720px) and (min-width:701px){.parallax__people{height:60%}.parallax__layer-title{top:12%}}

/* v20.10: lounge and guests share one geometry; single-line title, left on desktop, behind the guests in the background. */
.parallax__film,.parallax__people{background-position:50% 40%;background-size:cover}
.parallax__people{inset:0;height:auto}
.parallax__layer-title{left:6vw;right:auto;width:auto;text-align:left}
.hero h1{min-height:1em;width:auto;max-width:none}
.brand-title .rolling-line-0>span:nth-child(n+5),.date-title .rolling-line-0>span:nth-child(n+4){color:#1a9fb5}
.date-title{font-size:1em}
.hero-content{inset:auto auto 6% 6vw;align-items:flex-start;text-align:left;max-width:min(46vw,640px)}
.hero .tagline,.hero .event-meta{text-align:left}
.powered-by{align-items:flex-start}
@media(max-width:700px){.parallax__film,.parallax__people{background-position:17% 40%}.parallax__layer-title{left:22px;right:22px;text-align:center}.hero h1{font-size:3.9rem}.hero-content{inset:auto 22px 5%;align-items:center;text-align:center;max-width:none}.hero .tagline,.hero .event-meta{text-align:center}.powered-by{align-items:center}}
@media(max-height:720px) and (min-width:701px){.hero h1{font-size:6.6rem}}

/* v20.11: matches the reference composite. The guests cutout is a separate render (larger than in the composite), so it is
   scaled to 83.5% of the hero height and anchored bottom-right, which puts the front man's head at the composite's 17.6%.
   The lounge covers the hero anchored to the bottom so the floor stays under their feet on any aspect ratio. */
.parallax__film{inset:0 0 auto 0;height:100%;background:#0d1517 url(media/lounge.webp) 50% 0/cover no-repeat;transform-origin:50% 0}
.parallax__people{inset:0;height:auto;background-repeat:no-repeat;transform-origin:50% 100%}
.parallax__film,.parallax__people{will-change:transform}

/* v20.12: the hero title is the DepthFlipText component (components/ui/depth-flip-text.tsx, built by Vite into motion/reveal/)
   mounted in .reveal-host by src/hero-title.tsx; the .brand-title/.date-title reels above are gone. Its Tailwind classes sit
   in a cascade layer, so these unlayered rules win: the section is not a full-screen stage here, the phrase keeps the site's
   face and the size script.js measures, and the letters may swing outside the line while they flip. */
.reveal-host{display:block}
.reveal-host section{min-height:0;padding:0;overflow:visible}
.reveal-host p{font-size:inherit;font-weight:900;letter-spacing:-.04em}
/* SplitText wraps each word in a class-less div; the second word (WHAT?, NOVEMBER) takes the accent as in the logo. */
.reveal-host p>div:nth-child(2){color:#1a9fb5}
/* Hidden copy of the longer text in the title's typography; script.js measures it to size the title to the screen. */
.reveal-probe{position:absolute;left:0;top:0;font:900 100px/1 "Archivo","Inter",sans-serif;letter-spacing:-.04em;white-space:pre;visibility:hidden;pointer-events:none}
/* The 8px seam cover under the bench is wood-coloured, not the page's blue-black: it showed as a line across the counter. */
.bar-base{background:#200a04}

/* v20.13: the content stack (Powered by, tagline, button, time/place) is centred at the bottom of the hero on every screen,
   with a soft dark pool behind it so the text reads against the lounge. */
.hero-content{inset:auto 0 6% 0;width:min(720px,92vw);max-width:none;margin:0 auto;align-items:center;text-align:center}
.hero-content::before{content:"";position:absolute;inset:-14% -12%;z-index:-1;background:radial-gradient(ellipse at 50% 55%,#080c0dbf 0%,#080c0d80 40%,#080c0d00 72%);pointer-events:none}
.hero .tagline,.hero .event-meta{text-align:center}
.powered-by,.hero-actions{align-items:center}
@media(max-width:700px){.hero-content{inset:auto 0 5% 0;width:min(720px,92vw)}}

/* v20.14: the "Powered by" lockup sits on a frosted dark card so the label and both logos read against the lounge, and the
   tagline is gone. The card is what gives the block its calm; the radial pool behind the stack is kept lighter. */
.hero .tagline{display:none}
.powered-by{padding:10px 20px 13px;border-radius:18px;background:#080c0d5c;border:1px solid #ffffff0f;box-shadow:0 8px 24px #00000033;-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);gap:9px;margin-bottom:20px}
.powered-by__label{color:#fff;opacity:1;font-weight:600;letter-spacing:.26em;text-shadow:none}
.powered-by__logos{gap:22px}
.powered-by__logos img{filter:drop-shadow(0 1px 2px #0009)}
.powered-by__x{color:#1a9fb5;text-shadow:none}
.hero-content::before{background:radial-gradient(ellipse at 50% 60%,#080c0d99 0%,#080c0d59 42%,#080c0d00 72%)}
@media(max-width:700px){.powered-by{padding:9px 16px 12px;border-radius:16px;-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);margin-bottom:16px}}

/* v20.15: the wordmark (speech bubble, media/logo.webp) replaces the text logo in the top-left corner. */
.logo{display:block;line-height:0}
.logo img{height:58px;width:auto;display:block;filter:drop-shadow(0 2px 8px #0008)}
@media(max-width:700px){.logo img{height:42px}}

/* v20.16: "The soundtrack" after the three values: the song (media/now-what.mp3) with a waveform drawn by wavesurfer.js
   (src/track.ts). Same dark stage as the values, play button in the accent colour. */
.track{position:relative;z-index:2;background:#0d1517;color:#f3f3f0;padding:96px 8vw 110px;border-top:1px solid #ffffff14}
.track-inner{max-width:1440px;margin:auto}
.track h2{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,5.4vw,4.15rem);letter-spacing:-.03em;line-height:1.06;margin:0 0 14px}
.track-lead{color:#c5d3d6;font-size:1.05rem;margin:0 0 40px;max-width:52ch}
.player{display:flex;align-items:center;gap:26px;padding:22px 28px;border-radius:22px;background:#121c1f;border:1px solid #ffffff12;box-shadow:0 20px 50px #00000059}
.player-toggle{flex:none;width:72px;height:72px;border-radius:50%;border:0;background:var(--accent);color:#061013;cursor:pointer;display:grid;place-items:center;transition:transform .2s ease,background .2s ease}
.player-toggle:hover{transform:scale(1.06);background:#22b5cc}
.player-toggle:focus-visible{outline:2px solid #fff;outline-offset:3px}
.player-toggle svg{width:30px;height:30px;fill:currentColor}
.player-pause,.player.is-playing .player-play{display:none}
.player.is-playing .player-pause{display:block}
.player-wave{flex:1;min-width:0;height:72px;cursor:pointer}
.player:not(.is-ready) .player-wave{background:repeating-linear-gradient(90deg,#2b4a52 0 2px,transparent 2px 5px);-webkit-mask:linear-gradient(90deg,#000,#0004);mask:linear-gradient(90deg,#000,#0004);opacity:.5}
.player-time{flex:none;font-variant-numeric:tabular-nums;font-size:.9rem;color:#c5d3d6;letter-spacing:.04em;display:flex;gap:.45em}
.player-sep{opacity:.45}
.player.is-failed .player-wave{display:none}
.player-fallback{margin:18px 0 0;font-size:.85rem}
.player-fallback a{color:#c5d3d6;text-decoration:none;border-bottom:1px solid #ffffff33}
.player-fallback a:hover{color:#fff}
@media(max-width:700px){.track{padding:64px 6vw 72px}.track h2{font-size:2.6rem}.player{gap:14px;padding:16px 16px;border-radius:18px;flex-wrap:wrap}.player-toggle{width:56px;height:56px}.player-toggle svg{width:24px;height:24px}.player-wave{height:56px;flex-basis:calc(100% - 70px)}.player-time{width:100%;justify-content:flex-end}}

/* v20.17: the player is a playlist. Tracks come from /api/tracks (the media/tracks folder); the deck shows the current one. */
.player{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden}
.player-deck{display:flex;align-items:center;gap:24px;padding:22px 28px}
.player-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.player-title{margin:0;display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-weight:600;font-size:1.05rem;letter-spacing:-.01em;white-space:nowrap;overflow:hidden}
.player-title [data-title]{overflow:hidden;text-overflow:ellipsis}
.player-download{flex:none;font-size:.78rem;font-weight:500;letter-spacing:.08em;color:#c5d3d6;text-decoration:none;border-bottom:1px solid #ffffff33}
.player-download:hover{color:#fff}
.player-wave{height:64px}
.player:not(.is-ready) .player-wave{background:repeating-linear-gradient(90deg,#2b4a52 0 2px,transparent 2px 5px);-webkit-mask:linear-gradient(90deg,#000,#0004);mask:linear-gradient(90deg,#000,#0004);opacity:.5}
.player-time{align-self:flex-end;padding-bottom:22px}
.playlist{list-style:none;margin:0;padding:6px 10px 10px;border-top:1px solid #ffffff0f;display:flex;flex-direction:column}
.playlist:empty,.player.is-single .playlist{display:none}
.playlist button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:2.2em 1fr auto;align-items:center;gap:14px;width:100%;padding:12px 18px;border-radius:12px;cursor:pointer;color:#c5d3d6;font-size:.98rem;transition:background .15s ease,color .15s ease}
.playlist button:hover,.playlist button:focus-visible{background:#ffffff0a;color:#fff}
.playlist li.is-current button{color:#fff}
.playlist .playlist-n{font-variant-numeric:tabular-nums;font-size:.8rem;letter-spacing:.08em;color:var(--accent)}
.playlist li.is-current .playlist-n::before{content:"▶";font-size:.7em;margin-right:.4em}
.playlist .playlist-d{font-variant-numeric:tabular-nums;font-size:.85rem;opacity:.7}
.player-fallback{display:none}
@media(max-width:700px){.player{flex-wrap:nowrap}.player-deck{gap:14px;padding:16px;flex-wrap:wrap}.player-main{flex-basis:calc(100% - 70px)}.player-wave{height:56px;flex-basis:auto}.player-time{width:100%;justify-content:flex-end;padding-bottom:0}.playlist button{padding:12px 10px}}

/* v20.18: "The soundtrack" is its own stage. A deep cyan-black with an accent glow, unlike the values' graphite and the footer's
   teal; it rises as a card over the dimmed values (scale and corners animated in script.js) and its content comes out of a blur. */
.track{background:radial-gradient(1100px 520px at 88% -10%,#1a9fb540 0%,#1a9fb500 60%),radial-gradient(700px 400px at 0% 100%,#22b5cc1a 0%,#22b5cc00 60%),linear-gradient(180deg,#0b2329 0%,#06161a 100%);border-top:0;transform-origin:50% 100%;will-change:transform}
.track::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,#ffffff00 40%,#ffffff07 50%,#ffffff00 60%);pointer-events:none}
.track-inner{position:relative}
.player{background:#0a1c21cc;border-color:#1a9fb52e;box-shadow:0 30px 70px #00000066,0 0 0 1px #ffffff08 inset}
.playlist{border-top-color:#1a9fb524}
.values-intro,.values-list{transform-origin:50% 50%;will-change:opacity,transform}
/* The waveform grows out from the play button once the audio is decoded. */
.player-wave{transform-origin:0 50%;transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .4s ease}
.player:not(.is-ready) .player-wave{transform:scaleX(.6)}
@media(max-width:700px){.track{border-radius:28px 28px 0 0;box-shadow:0 -24px 60px #00000080}}

/* v20.19: the soundtrack no longer rises as a card over pinned values (that read like the footer's entrance). The values scroll
   away normally, the stage is wiped in from the left (script.js), the title slides out of a mask and the player in from the right.
   Extra room at the bottom keeps the footer, which still tilts in over whatever precedes it, clear of the player. */
.values{position:relative;top:auto}
.track{transform:none;border-radius:0;box-shadow:none;will-change:clip-path;padding-bottom:160px}
.track-mask{overflow:hidden;padding-bottom:.08em;margin-bottom:6px}
.track h2{margin:0;will-change:transform}
.player{will-change:transform,opacity}
@media(max-width:700px){.track{border-radius:0;box-shadow:none;padding-bottom:96px}}
/* The values are not pinned any more (the soundtrack follows them in normal flow), and a band of the page ground separates
   the soundtrack from the footer so the two never touch. */
.outro-stack>.values{position:relative;top:auto}
.track{margin-bottom:14vh}
@media(max-width:700px){.track{margin-bottom:10vh}}

/* v20.20: the soundtrack opens as an iris (script.js) and its stage runs from deep cyan-black at the top to the footer's own
   teal at the bottom, so the footer tilts in over a matching colour; the band of page ground between them is gone. */
.track{background:radial-gradient(1100px 520px at 88% -10%,#1a9fb540 0%,#1a9fb500 60%),linear-gradient(180deg,#0b2329 0%,#0b3038 55%,#146a78 100%);margin-bottom:0;padding-bottom:150px;will-change:clip-path}
.track-mask{overflow:visible}
@media(max-width:700px){.track{margin-bottom:0;padding-bottom:110px}}

/* v20.21: the date sits above the time in the hero's event line. */
.event-date{font-size:.9375rem;font-weight:700;color:#fff;letter-spacing:.02em;text-shadow:0 1px 10px #000c}

/* v20.22: the confirmation box repeats the date, time and place. */
.success-when{display:flex;flex-direction:column;gap:4px;margin:-6px 0 24px;padding:16px 20px;border-radius:14px;background:#1a9fb514;border:1px solid #1a9fb53d;color:#fff!important;font-size:1rem!important;line-height:1.5!important}
.success-when strong{font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
.success-when span{color:#c5d3d6}

/* v20.23: food & drink: a tick box for allergies or preferences with a details field that appears when ticked. */
.dietary>p{font-size:.875rem;color:var(--muted);margin-bottom:4px;line-height:1.6}
.dietary .choice{margin-top:10px;padding-top:14px;border-top:0}
.dietary-details{display:flex;flex-direction:column;gap:9px;font-size:.875rem;margin:4px 0 0 33px}
.dietary-details[hidden]{display:none}
.saved-dietary{color:#fff!important}

/* v20.24: the food & drink note leads with what is included, in white. */
.dietary>p strong{color:#fff;font-weight:600}

/* v20.25: the full-screen menu (components/ui/immersive-full-screen-nav.tsx, mounted in #fullscreen-nav by src/nav.tsx). Its
   header is see-through and only the hamburger shows, top right, light on the dark hero; the panel is the cyan-black stage. */
#fullscreen-nav header{height:auto;padding:1.55rem 2.3rem;z-index:70;justify-content:flex-end;pointer-events:none}
#fullscreen-nav header button{pointer-events:auto;appearance:none;background:transparent;border:0;padding:0;border-radius:0}
#fullscreen-nav header>a:empty{display:none}
#fullscreen-nav header button span{background-color:#f3f3f0;box-shadow:0 1px 6px #0009}
#fullscreen-nav nav{font-family:"Inter","Archivo",sans-serif}
#fullscreen-nav nav h2{font-family:"Archivo",sans-serif;font-weight:900;letter-spacing:-.02em;font-size:1.2rem;text-transform:none;color:#1a9fb5}
#fullscreen-nav nav .text-\[6vw\]{font-family:"Archivo",sans-serif;font-weight:900;letter-spacing:-.03em;line-height:.96;font-size:7.4vw;white-space:nowrap}
@media(max-width:1025px){#fullscreen-nav nav .text-\[6vw\]{font-size:13vw}}
#fullscreen-nav nav .text-\[6vw\] a{color:#f3f3f0}
#fullscreen-nav nav .text-\[6vw\]:nth-child(even) a{color:#1a9fb5}
@media(max-width:700px){#fullscreen-nav header{padding:1rem 1.1rem}}

/* No pictures in the menu: the links fill the panel on their own. */
#fullscreen-nav nav .items-end.gap-8:empty,#fullscreen-nav nav .gap-40{display:none}
#fullscreen-nav nav .text-[6vw] a:hover{opacity:.85}
/* Fits a 720px-high screen: tighter panel padding and gaps than the component ships with. */
#fullscreen-nav nav>div>div{gap:1.6rem;padding-top:5.2rem;padding-bottom:2rem}
@media(max-width:1025px){#fullscreen-nav nav>div>div{padding-top:5.5rem;padding-bottom:3rem}}
/* v20.26: the wordmark sits top left in the hero and scrolls away with it; the one in the menu panel is the way back up. */
.logo{position:absolute;top:2.15rem;left:3.5rem;z-index:55}
@media(max-width:700px){.logo{top:1.4rem;left:1.35rem}}

/* v20.27: the menu panel shows the wordmark top left (a link home) in place of the text block. */
#fullscreen-nav nav>div>div .menu-logo{display:block;width:106px;line-height:0;filter:drop-shadow(0 2px 8px #0008)}
#fullscreen-nav nav>div>div .menu-logo img{width:100%;height:auto;display:block}
@media(max-width:700px){#fullscreen-nav nav>div>div .menu-logo{width:84px}#fullscreen-nav nav>div>div{padding-top:1.2rem}}

/* v20.28: the hero title has depth. Each letter (SplitText's char divs) is filled with a glossy vertical gradient instead of
   flat colour and gets a short extrusion plus a soft drop shadow; "WHAT?" / "NOVEMBER" get the same in cyan with a faint glow.
   drop-shadow() instead of text-shadow because the fill is a clipped background, which text-shadow would show through. */
.reveal-host p>div>div{color:transparent;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(180deg,#ffffff 0%,#ffffff 50%,#e6ebec 100%);filter:drop-shadow(0 1px 0 #aab4b7) drop-shadow(0 2px 0 #7d8a8e) drop-shadow(0 3px 0 #525c5f) drop-shadow(0 16px 26px rgba(0,0,0,.55))}
.reveal-host p>div:nth-child(2)>div{background-image:linear-gradient(180deg,#7fe6f5 0%,#27b9cf 55%,#1590a4 100%);filter:drop-shadow(0 1px 0 #0f7484) drop-shadow(0 2px 0 #0b5662) drop-shadow(0 3px 0 #073e47) drop-shadow(0 0 16px rgba(34,181,204,.45)) drop-shadow(0 16px 26px rgba(0,0,0,.5))}
@media(max-width:700px){.reveal-host p>div>div{filter:drop-shadow(0 1px 0 #aab4b7) drop-shadow(0 2px 0 #7d8a8e) drop-shadow(0 10px 16px rgba(0,0,0,.55))}.reveal-host p>div:nth-child(2)>div{filter:drop-shadow(0 1px 0 #0f7484) drop-shadow(0 2px 0 #0b5662) drop-shadow(0 0 12px rgba(34,181,204,.45)) drop-shadow(0 10px 16px rgba(0,0,0,.5))}}
/* The hero's old text-shadow showed through the now-transparent glyph fill and greyed the letters; the depth comes from the
   drop-shadows above instead. */
.hero h1,.reveal-host p,.reveal-host p>div>div{text-shadow:none}

/* v20.29: timed lyrics under the waveform (media/tracks/<name>.lrc): the line being sung, with the previous and the next
   one faded beside it; the previous/next are clickable to jump. */
.player-lyrics{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;gap:14px;min-height:1.6em;margin-top:2px;font-size:.95rem;line-height:1.35}
.player-lyrics[hidden]{display:none}
.lyric-now{font-weight:700;color:#fff;text-align:center;font-size:1.08rem;letter-spacing:-.01em;white-space:nowrap}
.lyric-now.is-fresh{animation:lyric-in .32s cubic-bezier(.16,1,.3,1) both}
@keyframes lyric-in{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}
.lyric-prev,.lyric-next{color:#c5d3d6;opacity:.42;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.lyric-prev{text-align:right}.lyric-next{text-align:left}
.lyric-prev:hover,.lyric-next:hover{opacity:.8}
.player-lyrics.is-waiting .lyric-now::before{content:"♪";color:#1a9fb5;font-weight:400}
@media(max-width:700px){.player-lyrics{grid-template-columns:1fr;gap:2px;text-align:center}.lyric-prev,.lyric-next{display:none}.lyric-now{white-space:normal;font-size:1rem}}

/* v20.30: karaoke fill. Each word of the line on show is a span; --fill (0–100%) is how much of it has been sung, painted as
   cyan over white with a clipped background so the colour sweeps through the letters in time with the voice. */
.lyric-now{color:transparent}
.lyric-word{--fill:0%;display:inline-block;color:transparent;background-image:linear-gradient(90deg,#22b5cc var(--fill),#ffffff var(--fill));-webkit-background-clip:text;background-clip:text;transition:none}
.lyric-word.is-sung{background-image:linear-gradient(90deg,#22b5cc,#22b5cc)}
.lyric-word.is-singing{filter:drop-shadow(0 0 6px rgba(34,181,204,.45))}
.player-lyrics.is-waiting .lyric-now::before{color:#1a9fb5;-webkit-text-fill-color:#1a9fb5}
/* v20.31: the lyric line is bigger. */
.player-lyrics{min-height:2.2em;margin-top:6px;gap:18px}
.lyric-now{font-size:1.6rem;letter-spacing:-.015em;line-height:1.2}
.lyric-prev,.lyric-next{font-size:.95rem}
@media(max-width:700px){.lyric-now{font-size:1.3rem}}
/* v20.32: a word is faint until it is sung; the cyan fill brings it in exactly as the voice reaches it. */
.lyric-word{background-image:linear-gradient(90deg,#22b5cc var(--fill),rgba(255,255,255,.28) var(--fill))}
.lyric-word.is-sung{background-image:linear-gradient(90deg,#22b5cc,#22b5cc)}
/* v20.33: the sung line is the big thing in the player: large, on its own row under the waveform, previous/next small below. */
.player-lyrics{grid-template-columns:1fr;gap:4px;margin-top:10px;min-height:3.2em;text-align:center}
.lyric-now{font-size:2.4rem;line-height:1.15;letter-spacing:-.02em;white-space:normal;order:1}
.lyric-prev{display:none}
.lyric-next{order:2;text-align:center;font-size:.95rem;opacity:.38}
@media(max-width:700px){.lyric-now{font-size:1.55rem}.lyric-next{font-size:.85rem}}

/* v20.34: lyric line bigger and heavier (Archivo 900 is loaded). */
.lyric-now{font-family:"Archivo",Inter,sans-serif;font-weight:900;font-size:3.1rem;line-height:1.08;letter-spacing:-.025em}
@media(max-width:700px){.lyric-now{font-size:1.9rem}}

/* v20.35: the soundtrack is a full screen of its own: the stage is at least one viewport tall with the heading and player
   centred in it, so neither the values' graphite above nor the footer's teal below shows while you are on it. The player is
   larger (bigger play button, taller waveform, roomier playlist); the waveform canvas takes its height from .player-wave. */
.track{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(80px,10vh,130px) 8vw clamp(110px,14vh,170px)}
.track-inner{width:100%}
.track-lead{font-size:1.15rem;margin-bottom:36px}
.player{border-radius:26px}
.player-deck{gap:30px;padding:30px 36px 26px}
.player-toggle{width:88px;height:88px}
.player-toggle svg{width:36px;height:36px}
.player-wave{height:84px}
.player-title{font-size:1.15rem}
.player-time{font-size:1rem;padding-bottom:30px}
.playlist{padding:8px 14px 12px}
.playlist button{padding:15px 22px;font-size:1.08rem}
@media(max-width:700px){
  .track{min-height:100svh;padding:88px 5vw 96px}
  .track h2{font-size:2.3rem}
  .track-lead{font-size:1rem;margin-bottom:24px}
  .player{border-radius:20px}
  .player-deck{gap:12px;padding:18px 14px 14px}
  .player-toggle{width:60px;height:60px}.player-toggle svg{width:26px;height:26px}
  .player-main{flex-basis:calc(100% - 72px)}
  .player-wave{height:60px}
  .player-title{font-size:1rem}
  .player-time{padding-bottom:0;font-size:.9rem}
  .player-lyrics{min-height:2.6em;margin-top:8px}
  .lyric-now{font-size:1.7rem}
  .playlist{padding:6px 6px 8px}
  .playlist button{padding:13px 10px;font-size:1rem;gap:10px}
}

/* v20.36: the soundtrack stage is darker and no longer runs into the footer's teal (#146a78). The gradient stays but goes from
   near-black cyan to a deep, still clearly darker teal, with the accent glow kept in the top-right corner. */
.track{background:radial-gradient(1100px 520px at 88% -10%,#1a9fb538 0%,#1a9fb500 60%),linear-gradient(180deg,#06151a 0%,#08222a 55%,#0b3942 100%)}

/* v20.37: the player stands out from the darker stage: opaque near-black, a visible accent frame (outer accent line plus a soft
   inner highlight), a deeper drop shadow, and a clearer line between the deck and the playlist. */
.player{background:#050e12;border:1px solid #1a9fb580;box-shadow:0 34px 80px #00000099,0 0 0 1px #00000080,0 0 48px #1a9fb524,inset 0 1px 0 #ffffff14}
.playlist{border-top:1px solid #1a9fb54d;background:#07141a}
.playlist button:hover,.playlist button:focus-visible{background:#1a9fb51f}
.playlist li.is-current button{background:#1a9fb514}

/* v20.38: the menu links roll only once the pointer has settled on them (src/nav.tsx adds .is-hot after a short delay), so
   crossing a link on the way to another no longer rolls it; the component's hover rule is neutralised here. */
#fullscreen-nav nav .text-\[6vw\] a:hover span span{translate:0 0}
#fullscreen-nav nav .text-\[6vw\] a.is-hot span span,#fullscreen-nav nav .text-\[6vw\] a:focus-visible span span{translate:0 -1.2em}

/* v20.39: volume. A round speaker button on the right of the deck, centred like the play button on the left (a shade
   smaller, outlined rather than filled so play stays the main action). Click mutes; hovering or focusing it brings up a
   vertical slider above. On phones only the button shows (the phone has its own volume keys). */
.player-volume{flex:none;position:relative;align-self:center;display:grid;place-items:center}
.player-mute{width:64px;height:64px;border-radius:50%;border:1.5px solid #1a9fb580;background:#0b2229;color:#7fd6e4;cursor:pointer;display:grid;place-items:center;padding:0;transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease}
.player-mute:hover,.player-volume.is-open .player-mute{transform:scale(1.06);background:#0f2f38;border-color:#22b5cc;color:#fff}
.player-mute:focus-visible{outline:2px solid #fff;outline-offset:3px}
.player-mute svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.player-mute .vol-body{fill:currentColor;stroke:none}
.player-volume[data-level="off"] .vol-1,.player-volume[data-level="off"] .vol-2,.player-volume[data-level="low"] .vol-2,.player-volume:not([data-level="off"]) .vol-x{display:none}
.player-volume[data-level="off"] .player-mute{color:#9fb3b8;border-color:#ffffff33}
.player-slider{position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);width:44px;height:132px;padding:14px 0 10px;display:grid;place-items:center;border-radius:22px;background:#050e12;border:1px solid #1a9fb566;box-shadow:0 18px 40px #00000099;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;transform:translate(-50%,6px)}
.player-volume:hover .player-slider,.player-volume:focus-within .player-slider,.player-volume.is-open .player-slider{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.player-slider::after{content:"";position:absolute;inset:auto 0 -14px;height:14px} /* keeps the hover alive on the way from the button to the slider */
.player-slider input{appearance:none;-webkit-appearance:none;width:104px;height:4px;margin:0;background:linear-gradient(90deg,#22b5cc var(--vol,100%),#ffffff26 var(--vol,100%));border-radius:2px;transform:rotate(-90deg);cursor:pointer;outline:0}
.player-slider input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #22b5cc;box-shadow:0 2px 8px #0008}
.player-slider input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #22b5cc;box-shadow:0 2px 8px #0008}
.player-slider input::-moz-range-track{height:4px;background:transparent}
.player-slider input:focus-visible{box-shadow:0 0 0 3px #22b5cc55}
.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}
@media(max-width:700px){
  .player-time{width:auto;flex:1;padding-bottom:0;align-self:center}
  .player-volume{align-self:center}
  .player-mute{width:44px;height:44px}.player-mute svg{width:21px;height:21px}
  .player-slider{display:none}
}
/* The player clips at its edge, so the slider lives inside the deck: it slides out to the left of the speaker, into the room
   between the waveform's end and the button, horizontal, at the button's height. */
.player-slider{bottom:auto;left:auto;right:calc(100% + 10px);top:50%;width:136px;height:40px;padding:0 14px;border-radius:20px;transform:translate(8px,-50%)}
.player-volume:hover .player-slider,.player-volume:focus-within .player-slider,.player-volume.is-open .player-slider{transform:translate(0,-50%)}
.player-slider::after{inset:0 -12px 0 auto;height:auto;width:12px}
.player-slider input{width:108px;transform:none}
/* The registration form's generic text-input rule (input:not([type=radio]):not([type=checkbox])) reaches the slider too:
   its border, padding, min-height and background are undone here with a more specific selector. */
.player .player-slider input[type="range"]{border:0;padding:0;min-height:0;height:4px;width:108px;background:linear-gradient(90deg,#22b5cc var(--vol,100%),#ffffff26 var(--vol,100%));border-radius:2px;font-size:0}

/* v20.40: the deck is a grid so the play and speaker buttons sit on the waveform's own row, centred on it, instead of on the
   centre of the whole title + waveform + lyrics column. The lyric line stays beneath the waveform, the time at the right of
   that line. */
.player-deck{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto auto;column-gap:30px;row-gap:8px;align-items:center}
.player-main{display:contents}
.player-title{grid-column:2;grid-row:1}
.player-wave{grid-column:2;grid-row:2}
.player-lyrics{grid-column:2;grid-row:3}
.player-toggle{grid-column:1;grid-row:2;align-self:center}
.player-volume{grid-column:3;grid-row:2;align-self:center;justify-self:center}
.player-time{grid-column:3;grid-row:3;align-self:end;justify-self:end;padding-bottom:0;white-space:nowrap}
@media(max-width:700px){
  .player-deck{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto auto;column-gap:12px;row-gap:6px}
  .player-main{display:contents}.player-main{flex-basis:auto}
  .player-toggle{grid-column:1;grid-row:2}
  .player-title{grid-column:2;grid-row:1}
  .player-wave{grid-column:2;grid-row:2}
  .player-lyrics{grid-column:1 / 3;grid-row:3}
  .player-time{grid-column:1 / 3;grid-row:4;justify-self:end;align-self:center;width:auto;padding-right:56px}
  .player-volume{grid-column:1 / 3;grid-row:4;justify-self:end;align-self:center}
}
/* v20.41: the slider slides out to the right of the speaker, away from the waveform. The player clips at its edge, so the
   volume column reserves the room for it (button + slider) and the button sits at the column's left. */
.player-volume{width:192px;justify-self:start;display:flex;align-items:center;justify-content:flex-start}
.player-slider{right:auto;left:72px;top:50%;width:120px;transform:translate(-8px,-50%)}
.player-volume:hover .player-slider,.player-volume:focus-within .player-slider,.player-volume.is-open .player-slider{transform:translate(0,-50%)}
.player-slider::after{inset:0 auto 0 -12px;width:12px}
.player .player-slider input[type="range"]{width:92px}
@media(max-width:700px){.player-volume{width:auto;justify-self:end}}

/* v20.42: the soundtrack lead keeps its two sentences on two lines (a <br> in the markup) and no longer wraps by width. */
.track-lead{max-width:none}

/* v20.43: the new wordmark (media/logo-2.webp, the 3D speech bubble, 600×418) is squarer than the old one, so it gets a
   little more height in the corner and in the menu to read at the same visual size. */
.logo img{height:66px}
@media(max-width:700px){.logo img{height:48px}}
#fullscreen-nav nav>div>div .menu-logo{width:118px}
@media(max-width:700px){#fullscreen-nav nav>div>div .menu-logo{width:92px}}

/* v20.44: the wordmark bigger in the corner and in the menu. */
.logo img{height:84px}
@media(max-width:700px){.logo img{height:58px}}
#fullscreen-nav nav>div>div .menu-logo{width:150px}
@media(max-width:700px){#fullscreen-nav nav>div>div .menu-logo{width:112px}}

/* v20.45: the soundtrack's entrance is a staggered rise of its content (label, title, lead, player) over the always-visible
   stage; no clip-path on the section any more (the iris left the stage blank when a scroll caught it half-way or reversed it).
   .is-armed is set by script.js before the first paint so the content is only hidden when the reveal will actually run; .is-in
   plays it, once. */
.track{clip-path:none;will-change:auto}
.track-inner>*{transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.15s cubic-bezier(.16,1,.3,1)}
.track.is-armed:not(.is-in) .track-inner>*{opacity:0;transform:translateY(34px)}
.track-inner>.section-index{transition-delay:.02s}
.track-inner>.track-mask{transition-delay:.12s}
.track-inner>.track-lead{transition-delay:.24s}
.track-inner>.player{transition-delay:.38s}
.track.is-in .track-inner>*{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.track-inner>*{transition:none}.track.is-armed:not(.is-in) .track-inner>*{opacity:1;transform:none}}

/* v20.46: the wordmark bigger still, in the corner and in the menu. */
.logo img{height:104px}
@media(max-width:700px){.logo img{height:68px}}
#fullscreen-nav nav>div>div .menu-logo{width:190px}
@media(max-width:700px){#fullscreen-nav nav>div>div .menu-logo{width:132px}}

/* v20.46: the hero title, cleaner. The glossy fill, the stacked extrusion and the glow of v20.28 are gone: crisp flat letters,
   off-white for the first word and a clear cyan for the second, lifted off the photo by one tight contact shadow and one
   wide, soft ambient shadow. The flip effect itself is untouched. */
.reveal-host p{font-weight:900;letter-spacing:-.045em}
.reveal-host p>div>div{color:#f7f9f9;-webkit-text-fill-color:#f7f9f9;background-image:none;-webkit-background-clip:border-box;background-clip:border-box;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45)) drop-shadow(0 14px 30px rgba(0,0,0,.42))}
.reveal-host p>div:nth-child(2)>div{color:#2ec8e0;-webkit-text-fill-color:#2ec8e0;background-image:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45)) drop-shadow(0 14px 30px rgba(0,0,0,.42))}
@media(max-width:700px){.reveal-host p>div>div,.reveal-host p>div:nth-child(2)>div{filter:drop-shadow(0 1px 1px rgba(0,0,0,.45)) drop-shadow(0 10px 20px rgba(0,0,0,.42))}}
/* The title's top is set by script.js (placeTitle), which now leaves room for the bigger wordmark. */

/* v20.47: the hero title, finished. Each letter is cut from a quiet vertical gradient (white light from above fading to a
   cool grey at the foot; for the accent word pale cyan down to deep teal), edged with a hairline of light that keeps the
   outline crisp over the photo, and set off by a tight contact shadow and a long, soft ambient shadow. No extrusion, no
   neon; the accent word gets a faint cool halo only. */
.reveal-host p{letter-spacing:-.035em}
.reveal-host p>div>div{color:transparent;-webkit-text-fill-color:transparent;background-image:linear-gradient(180deg,#ffffff 0%,#f4f7f8 42%,#d3dcdf 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:1px rgba(255,255,255,.28);paint-order:stroke fill;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)) drop-shadow(0 2px 3px rgba(0,0,0,.25)) drop-shadow(0 24px 40px rgba(0,0,0,.5))}
.reveal-host p>div:nth-child(2)>div{background-image:linear-gradient(180deg,#b6f3fb 0%,#38cde3 40%,#179bb2 100%);-webkit-text-stroke:1px rgba(205,247,255,.38);filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)) drop-shadow(0 2px 3px rgba(0,0,0,.25)) drop-shadow(0 0 28px rgba(38,205,227,.28)) drop-shadow(0 24px 40px rgba(0,0,0,.5))}
@media(max-width:700px){.reveal-host p>div>div{-webkit-text-stroke-width:.6px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)) drop-shadow(0 14px 24px rgba(0,0,0,.5))}.reveal-host p>div:nth-child(2)>div{filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(38,205,227,.28)) drop-shadow(0 14px 24px rgba(0,0,0,.5))}}

/* v20.48: the wordmark larger again (the title keeps clear of it, script.js places it under the wordmark's bottom edge). */
.logo img{height:128px}
@media(max-width:700px){.logo img{height:80px}}
#fullscreen-nav nav>div>div .menu-logo{width:230px}
@media(max-width:700px){#fullscreen-nav nav>div>div .menu-logo{width:150px}}

/* v20.49: the hero title in the wordmark's language. The new logo is chunky white and cyan type with a dark outline and a
   hard offset shadow; the title matches it, lightly: solid off-white and a bright cyan gradient, a slim dark rim around
   every letter (paint-order keeps the stroke behind the fill) and a small, crisp, dark offset shadow, then a soft ambient
   shadow onto the photo. The probe that sizes the title gets the same letter-spacing, and script.js leaves room for the rim
   and the shadow, so the line stays centred and inside the window. */
.reveal-host p{letter-spacing:-.03em}
.reveal-probe{letter-spacing:-.03em}
.reveal-host p>div>div{color:#f8fafb;-webkit-text-fill-color:transparent;background-image:linear-gradient(180deg,#ffffff 0%,#eef3f4 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:.042em #07161b;paint-order:stroke fill;filter:drop-shadow(.028em .036em 0 #07161b) drop-shadow(0 18px 30px rgba(0,0,0,.42))}
.reveal-host p>div:nth-child(2)>div{background-image:linear-gradient(180deg,#8fecf8 0%,#2fcbe2 55%,#1aa9c0 100%);-webkit-text-stroke:.042em #07161b;filter:drop-shadow(.028em .036em 0 #07161b) drop-shadow(0 18px 30px rgba(0,0,0,.42))}
@media(max-width:700px){.reveal-host p>div>div,.reveal-host p>div:nth-child(2)>div{-webkit-text-stroke-width:.04em;filter:drop-shadow(.026em .034em 0 #07161b) drop-shadow(0 10px 18px rgba(0,0,0,.42))}}

/* v20.51: the hero title's letters stand apart. With the rim, the tight tracking of the plain title made neighbouring letters
   fuse into one outlined lump; normal tracking lets every letter keep its own rim. The rim and the offset shadow are a
   dark teal, the wordmark's own dark, a touch finer than before. */
.reveal-host p{letter-spacing:.005em}
.reveal-probe{letter-spacing:.005em}
.reveal-host p>div>div{-webkit-text-stroke:.036em #0a1c22;filter:drop-shadow(.026em .034em 0 #0a1c22) drop-shadow(0 18px 30px rgba(0,0,0,.42))}
.reveal-host p>div:nth-child(2)>div{-webkit-text-stroke:.036em #0a1c22;filter:drop-shadow(.026em .034em 0 #0a1c22) drop-shadow(0 18px 30px rgba(0,0,0,.42))}
@media(max-width:700px){.reveal-host p>div>div,.reveal-host p>div:nth-child(2)>div{-webkit-text-stroke-width:.034em;filter:drop-shadow(.024em .032em 0 #0a1c22) drop-shadow(0 10px 18px rgba(0,0,0,.42))}}

/* v20.52: on phones the soundtrack lead breaks after each sentence (three lines) instead of wrapping mid-sentence. */
.br-phone{display:none}
@media(max-width:700px){.br-phone{display:inline}.track-lead{white-space:nowrap}}

/* v20.54: the privacy notice names the organisers, what is sent, where data lives and for how long; its contact link is visible. */
.privacy-dialog p a{color:#7fd6e4;text-decoration:underline;text-underline-offset:3px}
.privacy-dialog p a:hover{color:#fff}

/* v20.55: a hand-drawn hint in the hero's lower-left corner, "Check out our songs" over a big sketched arrow
   pointing down towards the songs: a double-line shaft and a scribbled head, drawn white with a slight wobble (an SVG
   displacement filter), like a marker on a whiteboard. The arrow draws itself in once the hero has settled, then bobs
   gently. The whole hint is a link to the soundtrack section. */
.songs-hint{position:absolute;z-index:6;left:6vw;bottom:calc(5% + 6px);display:flex;flex-direction:column;align-items:flex-start;gap:0;color:#fff;text-decoration:none;pointer-events:auto;filter:drop-shadow(0 2px 4px #000d) drop-shadow(0 0 22px #000a);animation:songs-hint-in .6s 1.6s ease-out both}
.songs-hint__text{font:700 2.7rem/1 "Caveat",cursive;letter-spacing:.01em;transform:rotate(-5deg);transform-origin:0 100%;white-space:nowrap}
.songs-hint__arrow{width:118px;height:151px;margin:4px 0 0 64px;overflow:visible;animation:songs-hint-bob 2.6s 3.4s ease-in-out infinite}
.songs-hint__shaft,.songs-hint__head,.songs-hint__scribble{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.songs-hint__shaft{stroke-width:7;animation:songs-hint-draw 1.3s 1.9s cubic-bezier(.55,0,.35,1) forwards}
.songs-hint__shaft--pass{stroke-width:2.4;opacity:.55;animation-delay:2s}
.songs-hint__head{stroke-width:6;animation:songs-hint-draw .45s 3.1s ease-out forwards}
.songs-hint__scribble{stroke-width:3.4;animation:songs-hint-draw .45s 3.45s ease-in-out forwards}
.songs-hint:hover .songs-hint__text,.songs-hint:focus-visible .songs-hint__text{color:#7fe6f5}
.songs-hint:hover .songs-hint__arrow path,.songs-hint:focus-visible .songs-hint__arrow path{stroke:#7fe6f5}
.songs-hint:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:8px}
@keyframes songs-hint-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes songs-hint-draw{to{stroke-dashoffset:0}}
@keyframes songs-hint-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
@media(prefers-reduced-motion:reduce){.songs-hint,.songs-hint__arrow{animation:none}.songs-hint__arrow path{animation:none;stroke-dashoffset:0}}
@media(max-height:760px) and (min-width:701px){.songs-hint__text{font-size:2.3rem}.songs-hint__arrow{width:100px;height:128px;margin-left:56px}}
/* On phones the bottom of the hero belongs to the call to action, so the hint sits in the left corner above the
   Powered-by card, smaller. */
@media(max-width:700px){
  .songs-hint{left:18px;bottom:calc(5% + 262px)}
  .songs-hint__text{font-size:1.75rem}
  .songs-hint__arrow{width:76px;height:97px;margin:2px 0 0 40px}
}
/* "Click" with a mouse, "Tap" on a touch screen: the verb follows the device's primary pointer. */
.songs-hint__verb--tap{display:none}
@media (hover:none) and (pointer:coarse){.songs-hint__verb--click{display:none}.songs-hint__verb--tap{display:inline}}

/* v20.56: the hint comes in about half a second after the hero's own entrance (its last piece settles at ~1.05 s): text at
   0.9 s, the arrow drawn in one quick stroke and finished by ~1.8 s, then the gentle bob. */
.songs-hint{animation:songs-hint-in .35s .9s ease-out both}
.songs-hint__shaft{animation:songs-hint-draw .55s .95s cubic-bezier(.55,0,.35,1) forwards}
.songs-hint__shaft--pass{animation-delay:1s}
.songs-hint__head{animation:songs-hint-draw .18s 1.45s ease-out forwards}
.songs-hint__scribble{animation:songs-hint-draw .22s 1.58s ease-in-out forwards}
.songs-hint__arrow{animation:songs-hint-bob 2.6s 2.2s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.songs-hint,.songs-hint__arrow{animation:none}.songs-hint__arrow path{animation:none;stroke-dashoffset:0}}

/* v20.57: play counts. Above the time for the current track, and as a quiet column in each playlist row before the
   duration. */
.player-time{flex-wrap:wrap;justify-content:flex-end;row-gap:2px}
.player-plays{flex-basis:100%;text-align:right;font-size:.78rem;letter-spacing:.06em;color:#7fd6e4}
.player-plays[hidden]{display:none}
.playlist button{grid-template-columns:2.2em 1fr auto auto}
.playlist .playlist-p{font-variant-numeric:tabular-nums;font-size:.8rem;color:#7f9ca2;white-space:nowrap}
.playlist li.is-current .playlist-p{color:#7fd6e4}
@media(max-width:700px){.player-plays{font-size:.72rem}.playlist .playlist-p{font-size:.74rem}}

/* v20.58: the songs hint's counterpart in the lower-right corner: "Show place on the map" in the same handwriting over a
   small sketched map card (streets, Jakobsbergsgatan, a pin at Kura). Drawn, not embedded, so no map provider or cookie
   loads on the first page; the card opens the address in Google Maps in a new tab. Same entrance timing as the songs hint. */
.map-hint{position:absolute;z-index:6;right:6vw;bottom:calc(5% + 6px);display:flex;flex-direction:column;align-items:flex-end;gap:10px;color:#fff;text-decoration:none;pointer-events:auto;animation:songs-hint-in .35s .95s ease-out both}
.map-hint__text{font:700 2.7rem/1 "Caveat",cursive;letter-spacing:.01em;transform:rotate(4deg);transform-origin:100% 100%;white-space:nowrap;filter:drop-shadow(0 2px 4px #000d) drop-shadow(0 0 22px #000a)}
.map-hint__card{display:block;width:210px;height:134px;border-radius:16px;overflow:hidden;background:#0c2228;border:2px solid #ffffffd9;box-shadow:0 18px 40px #000a,0 0 0 1px #00000040;transform:rotate(3deg);transition:transform .25s ease,box-shadow .25s ease}
.map-hint__card svg{display:block;width:100%;height:100%}
.map-hint__streets path{fill:none;stroke:#ffffff38;stroke-width:7;stroke-linecap:round}
.map-hint__main{fill:none;stroke:#ffffffcc;stroke-width:9;stroke-linecap:round}
.map-hint__street{font:600 9px/1 Inter,Arial,sans-serif;letter-spacing:.06em;fill:#ffffffa6;text-transform:uppercase}
.map-hint__pin path{fill:#2ec8e0;stroke:#06161a;stroke-width:1.5}
.map-hint__pin{transform-origin:101px 66px;animation:map-hint-drop .5s 1.25s cubic-bezier(.3,1.6,.5,1) both}
.map-hint__pulse{fill:#2ec8e066;transform-origin:101px 64px;animation:map-hint-pulse 2.2s 1.8s ease-out infinite}
.map-hint__label{font:700 15px/1 "Caveat",cursive;fill:#fff}
.map-hint:hover .map-hint__card,.map-hint:focus-visible .map-hint__card{transform:rotate(1deg) translateY(-4px) scale(1.03);box-shadow:0 24px 50px #000b,0 0 0 1px #2ec8e0}
.map-hint:hover .map-hint__text,.map-hint:focus-visible .map-hint__text{color:#7fe6f5}
.map-hint:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:10px}
@keyframes map-hint-drop{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
@keyframes map-hint-pulse{0%{opacity:.9;transform:scale(.6)}70%,100%{opacity:0;transform:scale(2.6)}}
@media(prefers-reduced-motion:reduce){.map-hint,.map-hint__pin,.map-hint__pulse{animation:none}}
@media(max-height:760px) and (min-width:701px){.map-hint__text{font-size:2.3rem}.map-hint__card{width:180px;height:115px}}
/* On phones the songs hint takes the left above the Powered-by card; the map sits on the right at the same height,
   smaller, its text on two lines. */
@media(max-width:700px){
  .map-hint{right:16px;bottom:calc(5% + 262px);gap:6px}
  .map-hint__text{font-size:1.45rem;line-height:.95;white-space:normal;width:7.2em;text-align:right}
  .map-hint__card{width:118px;height:76px;border-radius:12px;border-width:1.5px}
}
/* Phones: there is no room beside the songs hint without covering the guests' faces, so the map takes the free band right
   under the title, against the pillars, top right. */
@media(max-width:700px){.map-hint{top:198px;bottom:auto}}
@media(max-width:700px) and (max-height:700px){.map-hint{top:172px}.map-hint__card{width:104px;height:66px}}
@media(max-width:700px) and (max-height:700px){.map-hint{top:178px}.map-hint__text{font-size:1.2rem;width:6.4em}}
/* Phones: the text breaks after "Show place" (br.br-phone), never by width. */
@media(max-width:700px){.map-hint__text{width:auto;white-space:nowrap}}

/* v20.59: the two hints sit between the guests (layer 3) and the bar (layer 4): above the photo, but the bar and its drinks
   rise in front of them while scrolling, so neither hint ever covers a drink. Same z-index as the guests, later in the
   document, so they still paint over the guests. */
.songs-hint,.map-hint{z-index:3}

/* v20.60: phones. Both hints small and at the sides like on desktop: songs at the left edge, the map at the right, both
   resting just above the Powered-by card, with the middle of the photo left free. Each text is two short lines. */
@media(max-width:700px){
  .songs-hint{left:12px;right:auto;bottom:calc(5% + 266px)}
  .songs-hint__text{font-size:1.2rem;line-height:.95;transform:rotate(-5deg)}
  .songs-hint__arrow{width:44px;height:56px;margin:2px 0 0 26px}
  .map-hint{top:auto;right:12px;bottom:calc(5% + 266px);gap:4px}
  .map-hint__text{font-size:1.2rem;line-height:.95;width:auto;white-space:nowrap;transform:rotate(4deg)}
  .map-hint__card{width:84px;height:54px;border-radius:10px;border-width:1.5px}
}
@media(max-width:700px) and (max-height:700px){
  .map-hint{top:auto}
  .map-hint__text,.songs-hint__text{font-size:1.1rem;width:auto}
  .map-hint__card{width:78px;height:50px}
  .songs-hint__arrow{width:40px;height:51px}
}
/* Phones: the free spots are the real bottom corners, either side of the date and address under the button, so the hints
   sit there, exactly like the desktop corners, clear of the guests' faces and of the Powered-by card. */
@media(max-width:700px){.songs-hint,.map-hint{bottom:calc(5% + 2px)}}
@media(max-width:700px) and (max-height:700px){
  .songs-hint__text,.map-hint__text{font-size:1.02rem}
  .songs-hint__arrow{width:34px;height:44px;margin-left:22px}
  .map-hint__card{width:70px;height:45px;border-radius:8px}
}
/* Phones: the text block over the photo (layer 5) spans the full width, so its dark reading pool dimmed the corner hints
   and its box swallowed taps on them. Its pool now stays in the middle, and only its real controls take taps. */
@media(max-width:700px){
  .hero-content::before{inset:-14% 17%}
  .hero-content,.hero-actions{pointer-events:none}
  .hero-content .powered-by,.hero-content #attend-button,.hero-content .event-meta,.hero-content a,.hero-content button{pointer-events:auto}
}

/* v20.61: Service Vision's one-line wordmark (white lettering, the ring as the "o", transparent; media/service-vision-line.webp,
   1000×120) replaces the two-line mark. Being one wide line, it is sized by width to sit level with Prymit's. */
.powered-by__logos img[alt="Service Vision"]{height:auto;width:clamp(170px,15.5vw,240px)}
@media(max-width:700px){.powered-by__logos img[alt="Service Vision"]{width:122px}}
@media(max-height:720px) and (min-width:701px){.powered-by__logos img[alt="Service Vision"]{width:178px}}
.powered-by__logos img[alt="Service Vision"]{width:clamp(185px,17vw,258px)}
@media(max-width:700px){.powered-by__logos img[alt="Service Vision"]{width:134px}}
@media(max-height:720px) and (min-width:701px){.powered-by__logos img[alt="Service Vision"]{width:192px}}
/* Laptops and tablets (701–1500 px): the hints a little more compact so their tops always clear the Powered-by card. */
@media(min-width:701px) and (max-width:1500px){
  .songs-hint__text,.map-hint__text{font-size:2.05rem}
  .songs-hint__arrow{width:92px;height:118px;margin-left:50px}
  .map-hint__card{width:172px;height:110px}
}
/* Portrait tablets (701–1000 px): the centre column (button, date, address) reaches far out, so the hints use the compact
   phone corners. */
@media(min-width:701px) and (max-width:1000px){
  .songs-hint{left:16px}.map-hint{right:16px}
  .songs-hint__text,.map-hint__text{font-size:1.45rem}
  .songs-hint__arrow{width:54px;height:69px;margin-left:30px}
  .map-hint__card{width:104px;height:66px;border-radius:12px}
}
/* All widths: the text block only takes taps on its real controls (on narrow laptops and tablets its box also reaches the
   hint corners), and up to 1000 px its reading pool stays in the middle so the hints are never dimmed. */
.hero-content,.hero-actions{pointer-events:none}
.hero-content .powered-by,.hero-content #attend-button,.hero-content .event-meta,.hero-content a,.hero-content button{pointer-events:auto}
@media(min-width:701px) and (max-width:1000px){.hero-content::before{inset:-14% 22%}}

/* v20.62: up to 1000 px the corner hints fade with --fade (set by script.js from the bench's distance) and are out of reach
   once faded. Their children carry the fade so the entrance animation on the hint itself is untouched. */
.songs-hint>*,.map-hint>*{opacity:var(--fade,1)}
.songs-hint.is-faded,.map-hint.is-faded{pointer-events:none}
/* v20.63: the corner hints glide up ahead of the rising bench by --lift (px, set by script.js) while they fade slowly. The
   separate translate property leaves the entrance animation's transform alone. */
.songs-hint,.map-hint{translate:0 calc(var(--lift,0) * -1px)}
.songs-hint,.map-hint{translate:calc(var(--drift,0) * 1px) calc(var(--lift,0) * -1px)}
/* v20.64: instead of gliding away, the corner hints shrink into their own outer top corner (--shrink, set by script.js)
   while fading; the separate scale property leaves the entrance animation alone. */
.songs-hint,.map-hint{translate:none;scale:var(--shrink,1)}
.songs-hint{transform-origin:0 0}
.map-hint{transform-origin:100% 0}

/* v20.65: photography is no longer a choice; the form states the consent that comes with registering. */
.media-consent{margin:0 0 22px;padding:14px 16px;border:1px solid #ffffff1f;border-radius:12px;background:#ffffff08}
.media-consent .media-consent__title{font-weight:600;color:#f3f3f0;font-size:.95rem;margin:0 0 4px}
.media-consent p:not(.media-consent__title){margin:0;font-size:.875rem;line-height:1.55;color:var(--muted)}

/* v20.66: "The photographer". A section between the songs and the footer promoting Mattias Backlund: heading and
   lead on the left, a link to his portfolio on the right, and a swipeable strip of his photos (scroll-snap; arrows and a
   counter on wide screens, swipe on phones). Warm graphite ground so it reads apart from the songs' teal above. */
.shots{position:relative;z-index:2;background:radial-gradient(900px 480px at 12% -10%,#e0a46a1f 0%,#e0a46a00 60%),linear-gradient(180deg,#120f0d 0%,#17120f 100%);color:#f3f3f0;padding:clamp(80px,11vh,130px) 0 clamp(90px,12vh,140px);overflow:hidden}
.shots-inner{max-width:1440px;margin:auto}
.shots .section-index,.shots-head,.shots-credit{padding:0 8vw}
.shots .section-index{color:#e8a86c}
.shots-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:36px}
.shots h2{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,5vw,4rem);letter-spacing:-.03em;line-height:1.05;margin:0 0 14px}
.shots .accent{color:#e8a86c;-webkit-text-fill-color:#e8a86c}
.shots-lead{color:#d6cfc8;font-size:1.08rem;line-height:1.6;margin:0;max-width:56ch}
.shots-cta{flex:none;display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;border:1px solid #ffffff40;color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;transition:background .2s ease,border-color .2s ease}
.shots-cta:hover,.shots-cta:focus-visible{background:#ffffff14;border-color:#e8a86c}
.shots__track{list-style:none;margin:0;padding:0 8vw;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 8vw;scrollbar-width:none;overscroll-behavior-x:contain}
.shots__track::-webkit-scrollbar{display:none}
.shots__track:focus-visible{outline:2px solid #e8a86c;outline-offset:4px}
.shots__slide{flex:0 0 auto;scroll-snap-align:start;height:clamp(300px,52vh,560px);border-radius:18px;overflow:hidden;background:#221b16;box-shadow:0 22px 50px #00000080}
.shots__slide img{display:block;height:100%;width:auto;max-width:none;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.shots__slide:hover img{transform:scale(1.03)}
.shots__nav{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:22px 8vw 0}
.shots__btn{width:52px;height:52px;border-radius:50%;border:1px solid #ffffff40;background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .2s ease,border-color .2s ease,opacity .2s ease}
.shots__btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.shots__btn:hover:not(:disabled),.shots__btn:focus-visible{background:#ffffff14;border-color:#e8a86c}
.shots__btn:disabled{opacity:.3;cursor:default}
.shots__count{font-variant-numeric:tabular-nums;letter-spacing:.12em;font-size:.9rem;color:#d6cfc8;min-width:5.5em;text-align:center}
.shots__count b{color:#fff}
.shots-credit{margin:18px 0 0;font-size:.78rem;letter-spacing:.06em;color:#8f857c}
@media(max-width:700px){
  .shots .section-index,.shots-head,.shots-credit{padding:0 22px}
  .shots-head{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:26px}
  .shots h2{font-size:2.3rem}
  .shots-lead{font-size:1rem}
  .shots__track{padding:0 22px;gap:12px;scroll-padding:0 22px}
  .shots__slide{height:auto;width:82vw;aspect-ratio:3/2}
  .shots__slide img{width:100%;height:100%;object-fit:cover}
  .shots__nav{justify-content:center;padding:18px 22px 0}
  .shots__btn{width:44px;height:44px}
}
.shots{padding:clamp(70px,9vh,110px) 0 clamp(80px,10vh,120px)}
.shots-head{margin-bottom:28px}
@media(min-width:701px){.shots__slide{height:clamp(280px,44vh,500px)}}
/* The photographer's stage in a green-leaning turquoise (jade), a hue the site does not use elsewhere (its cyans and the
   footer's teal all lean blue); the copper accent stays. */
.shots{background:radial-gradient(900px 480px at 12% -10%,#3fd1b826 0%,#3fd1b800 60%),radial-gradient(700px 420px at 100% 110%,#e8a86c14 0%,#e8a86c00 60%),linear-gradient(180deg,#0a3b37 0%,#0e5049 100%)}
.shots-lead{color:#cfe6e1}
.shots__count{color:#cfe6e1}
.shots-credit{color:#8fb8b0}
.shots__slide{background:#0c453f;box-shadow:0 22px 50px #00000066}
/* The photographer's stage, revised: the site's own turquoise, but lit. Brighter and more luminous than any other section
   (the songs are near-black teal, the footer a flat mid teal): a light turquoise mesh with a bright aqua glow top left, a
   deeper pool bottom right, a soft diagonal light sweep and a fine grain, like light through glass. */
.shots{background:
  radial-gradient(900px 520px at 8% -8%,#7ff3ffb3 0%,#7ff3ff00 62%),
  radial-gradient(800px 520px at 108% 112%,#04424dcc 0%,#04424d00 65%),
  linear-gradient(118deg,#ffffff00 30%,#ffffff1f 45%,#ffffff00 60%),
  linear-gradient(160deg,#1fb7c9 0%,#139aac 45%,#0b7586 100%)}
.shots::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.shots-inner{position:relative}
.shots .section-index{color:#053640}
.shots h2{color:#fff;text-shadow:0 2px 18px #04424d55}
.shots .accent{color:#053640;-webkit-text-fill-color:#053640;text-shadow:none}
.shots-lead{color:#eafcff}
.shots-cta{background:#053640;border-color:#053640;color:#fff}
.shots-cta:hover,.shots-cta:focus-visible{background:#04424d;border-color:#fff}
.shots__slide{background:#0b7586;box-shadow:0 24px 50px #03313a66,0 0 0 1px #ffffff26}
.shots__btn{border-color:#ffffffa6;color:#fff;background:#05364026}
.shots__btn:hover:not(:disabled),.shots__btn:focus-visible{background:#053640;border-color:#fff}
.shots__count{color:#eafcff}
.shots__count b{color:#fff}
.shots-credit{color:#d4f6fa}
.shots__track:focus-visible{outline-color:#fff}
/* Readability on the lit turquoise: where the light is brightest (heading and lead, top left) the text is deep teal; the
   accent stays white with a soft shadow; lower down, where the ground darkens, the counter and credit are white. */
.shots h2{color:#04313a;text-shadow:none}
.shots .accent{color:#fff;-webkit-text-fill-color:#fff;text-shadow:0 2px 16px #04313a66,0 1px 2px #04313a59}
.shots-lead{color:#06343d;font-weight:500}
/* The accent becomes a white highlighter stroke under deep-teal words (a flash of light), and the lower-left corner gets a
   deeper pool so the white credit reads. */
.shots .accent{color:#04313a;-webkit-text-fill-color:#04313a;text-shadow:none;background:linear-gradient(transparent 60%,#ffffffd9 60%,#ffffffd9 90%,transparent 90%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .08em}
.shots{background:
  radial-gradient(900px 520px at 8% -8%,#7ff3ffb3 0%,#7ff3ff00 62%),
  radial-gradient(800px 520px at 108% 112%,#04424dcc 0%,#04424d00 65%),
  radial-gradient(700px 360px at -6% 112%,#04424db3 0%,#04424d00 65%),
  linear-gradient(118deg,#ffffff00 30%,#ffffff1f 45%,#ffffff00 60%),
  linear-gradient(160deg,#1fb7c9 0%,#139aac 45%,#0b7586 100%)}
.shots-credit{color:#fff}
/* The photographer's stage, darker and its own: a near-black ink teal (deeper than the songs' teal) lit like a photo
   studio. Two soft turquoise spotlight beams fall from the top, a turquoise glow pools under the photo strip as if the
   prints were on a light table, the edges sink into a vignette, and the grain stays. Text white, accent a bright aqua. */
.shots{background:
  conic-gradient(from 196deg at 18% -12%,#2fe0ee00 0deg,#2fe0ee2e 10deg,#2fe0ee00 24deg),
  conic-gradient(from 150deg at 84% -14%,#2fe0ee00 0deg,#2fe0ee24 9deg,#2fe0ee00 22deg),
  radial-gradient(70% 38% at 50% 74%,#17c3d433 0%,#17c3d400 70%),
  radial-gradient(120% 90% at 50% 40%,#00000000 55%,#00000099 100%),
  linear-gradient(180deg,#02161a 0%,#031d22 55%,#021417 100%)}
.shots::before{opacity:.22}
.shots .section-index{color:#5fe6f2}
.shots h2{color:#fff}
.shots .accent{color:#5fe6f2;-webkit-text-fill-color:#5fe6f2;background:none;padding:0;text-shadow:0 0 28px #2fe0ee59}
.shots-lead{color:#c9e4e8;font-weight:400}
.shots-cta{background:transparent;border-color:#5fe6f2a6;color:#fff}
.shots-cta:hover,.shots-cta:focus-visible{background:#5fe6f21f;border-color:#5fe6f2}
.shots__slide{background:#06262c;box-shadow:0 26px 60px #000000b3,0 0 0 1px #5fe6f22e,0 0 40px #17c3d41f}
.shots__btn{border-color:#5fe6f280;background:transparent;color:#fff}
.shots__btn:hover:not(:disabled),.shots__btn:focus-visible{background:#5fe6f21f;border-color:#5fe6f2}
.shots__count{color:#c9e4e8}
.shots-credit{color:#7fa7ad}
.shots__track:focus-visible{outline-color:#5fe6f2}
/* The photographer's stage fills the screen: at least one viewport tall, its content centred in it. The photo strip takes
   the height that is left on wide screens, so heading, photos and controls all fit in one view. */
.shots{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(56px,7vh,90px) 0 clamp(56px,7vh,90px)}
.shots-inner{width:100%}
@media(min-width:701px){.shots__slide{height:clamp(260px,calc(100svh - 470px),560px)}}
@media(max-width:700px){.shots{padding:72px 0 56px}}
@media(max-width:700px) and (max-height:700px){.shots{padding:22px 0 18px}.shots-head{margin-bottom:18px}.shots__nav{padding-top:12px}}
/* Four menu links now, the longest "The photographer": on phones the links are sized so it fits the width. */
@media(max-width:1025px){#fullscreen-nav nav .text-\[6vw\]{font-size:9.4vw}}

/* v20.67: booking details for Mattias in the photographer section: a small card on the right of the heading (under it on
   phones) with his phone and e-mail as tap-to-call / tap-to-mail links, the guests' discount code NOW, and the portfolio. */
.shots-head{align-items:flex-end}
.shots-book{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px 20px;border-radius:18px;background:#04262c99;border:1px solid #5fe6f240;box-shadow:0 0 30px #17c3d41a;backdrop-filter:blur(6px)}
.shots-book__label{margin:0 0 2px;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#5fe6f2}
.shots-book__line{color:#fff;text-decoration:none;font-weight:600;font-size:1rem;line-height:1.35;border-bottom:1px solid transparent;transition:border-color .2s ease,color .2s ease}
.shots-book__line:hover,.shots-book__line:focus-visible{color:#5fe6f2;border-bottom-color:#5fe6f2}
.shots-book__code{margin:6px 0 10px;font-size:.88rem;color:#c9e4e8;line-height:1.45;max-width:24ch}
.shots-book__code b{display:inline-block;padding:1px 9px;margin:0 2px;border-radius:6px;background:#5fe6f2;color:#03262c;font-weight:800;letter-spacing:.08em}
.shots-book .shots-cta{padding:11px 18px;font-size:.9rem}
@media(max-width:700px){
  .shots-book{align-self:stretch;padding:16px 18px}
  .shots-book__code{max-width:none}
}
@media(max-width:700px) and (max-height:700px){.shots-book{padding:12px 14px;gap:4px}.shots-book__code{margin:4px 0 8px}}
/* With the booking card the heading block is taller: the strip gives up that height on wide screens, and phones tighten. */
@media(min-width:701px){.shots__slide{height:clamp(240px,calc(100svh - 540px),540px)}}
@media(max-width:700px){
  .shots{padding:56px 0 32px}
  .shots-head{gap:16px;margin-bottom:20px}
  .shots h2{margin-bottom:10px}
  .shots-book{gap:3px;padding:14px 16px}
  .shots-book__code{margin:4px 0 8px}
  .shots__slide{aspect-ratio:16/10}
  .shots__nav{padding-top:14px}
  .shots-credit{margin-top:12px}
}
@media(max-width:700px) and (max-height:700px){.shots{padding:22px 0 18px}.shots-lead{font-size:.95rem;line-height:1.5}}

/* v20.68: the portfolio link is components/ui/arrow-fill-button.tsx (src/portfolio-button.tsx). Its own sizes are in vw
   for a hero-sized button; in the booking card it is a compact pill, so the sizes are pinned here (unlayered rules win over
   Tailwind's layered utilities). The plain link inside #portfolio-button is the no-script fallback. */
#portfolio-button{display:inline-block}
#portfolio-button>a.group{height:48px;font-size:15px;font-weight:600;padding-left:22px;--icon-circle:38px;--icon-right:5px;padding-right:calc(var(--icon-circle) + var(--icon-right) + 16px);text-decoration:none}
#portfolio-button>a.group>div:nth-of-type(2){padding-left:22px;padding-right:calc(var(--icon-circle) + var(--icon-right) + 16px)}
#portfolio-button>a.group svg{width:18px;height:18px}
#portfolio-button>a.group:focus-visible{outline:2px solid #fff;outline-offset:3px}
.shots-lead strong{color:#fff;font-weight:600}
@media(max-width:700px){#portfolio-button>a.group{height:46px;font-size:15px}}
#portfolio-button>a.group{color:var(--btn-text)}

/* v20.69: the photographer's photos are the diagonal marquee (components/ui/great-ui-diagonal-marquee-carousel.tsx via
   src/photo-marquee.tsx): five tilted rows drifting behind the whole section. A scrim keeps the left (text) side and the
   top dark enough to read while the photos show clearly on the right; on phones the text sits over a darker top half. */
.shots{isolation:isolate}
.shots-marquee{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:auto}
.shots-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,#02161af2 0%,#02161ae0 34%,#02161a8c 52%,#02161a1f 72%,#02161a00 100%),
  radial-gradient(60% 50% at 20% 50%,#02161aa6 0%,#02161a00 70%)}
.shots-inner{position:relative;z-index:2;pointer-events:none}
.shots-inner a,.shots-inner button,.shots-book{pointer-events:auto}
.shots-head{flex-direction:column;align-items:flex-start;max-width:640px;gap:26px;margin-bottom:0}
.shots-credit{margin-top:34px}
@media(max-width:700px){
  .shots-scrim{background:linear-gradient(180deg,#02161af5 0%,#02161ae6 55%,#02161a99 75%,#02161a26 100%)}
  .shots-head{max-width:none}
}
@media(prefers-reduced-motion:reduce){.shots-marquee .animate-marquee-left,.shots-marquee .animate-marquee-right{animation:none}}

/* v20.70: the open menu always fits one screen, desktop and phone, with nothing to scroll. The panel is the visible height
   (dvh: on phones 100vh would include the space under the browser bars), and the links, the wordmark and the spacing are
   capped by the screen height as well as the width, so short laptop screens and phones held sideways fit too. */
#fullscreen-nav nav>div{min-height:100dvh}
#fullscreen-nav nav>div>div{min-height:100dvh;padding-top:min(5.2rem,9dvh);padding-bottom:min(2rem,4dvh);gap:min(1.6rem,2.6dvh)}
#fullscreen-nav nav>div>div .menu-logo{width:min(230px,24dvh)}
#fullscreen-nav nav [class*="text-[6vw]"]{font-size:min(6vw,10.5dvh)}
@media(max-width:1025px){
  #fullscreen-nav nav>div>div{padding-top:min(5.5rem,9dvh);padding-bottom:min(3rem,4dvh)}
  #fullscreen-nav nav>div>div>div:last-child{padding-bottom:min(2.5rem,3dvh)}
  #fullscreen-nav nav [class*="text-[6vw]"]{font-size:min(8.6vw,8.5dvh)}
}
@media(max-width:700px){
  #fullscreen-nav nav>div>div{padding-top:min(1.2rem,3dvh)}
  #fullscreen-nav nav>div>div .menu-logo{width:min(150px,22dvh)}
}

/* v20.71: new photographer copy ("You mingle. He'll capture it."): the lead is a little wider so its first sentence holds one
   line, and on short desktop screens the spacing tightens so the section still fits the screen exactly. */
.shots-lead{max-width:62ch}
@media(min-width:701px){.shots-head{max-width:calc(660px + 16vw)}}
.shots h2{text-wrap:balance}
@media(min-width:701px) and (max-height:820px){
  .shots{padding:clamp(28px,4.5vh,56px) 0}
  .shots-head{gap:18px}
  .shots-credit{margin-top:20px}
}

/* v20.72: phones show the photos clearly. The text block sits at the bottom of the section and the scrim only darkens
   behind it, so the top of the screen is a clear band of drifting photos; the photos' own dark veil is lighter, and the
   lead gets a soft shadow where a bright photo passes behind it. */
@media(max-width:700px){
  .shots{justify-content:flex-end;padding:72px 0 28px}
  .shots-scrim{background:linear-gradient(180deg,#02161a00 0%,#02161a14 14%,#02161a8c 30%,#02161ae0 44%,#02161af0 100%)}
  .shots-marquee img+div{background:#0000001a}
  .shots-lead,.shots .section-index{text-shadow:0 1px 10px #02161a}
}
@media(max-width:700px) and (max-height:700px){.shots{padding:56px 0 18px}}
@media(max-width:700px){.shots-inner{margin-bottom:0}}
@media(min-width:701px){.shots-lead{max-width:36rem}}
@media(max-width:700px){.shots-marquee [class*="top-0"][class*="h-1/4"]{height:9%}}

/* v20.73: "The place" (#place, between the evening and the songs): Kura Stockholm in two slow rows of photos
   (components/ui/scroll-velocity.tsx via src/place-gallery.tsx), the venue on top, drinks and food below. Fills the screen;
   the rows take whatever height the heading leaves. A warm, dark ground (Kura's amber light and plant green) so it reads
   apart from the teal sections around it. */
.place{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3.2vh,34px);padding:clamp(40px,6vh,80px) 0;overflow:hidden;color:#f3f3f0;
  background:radial-gradient(900px 520px at 88% -8%,#e0a46a26 0%,#e0a46a00 62%),radial-gradient(760px 460px at -4% 104%,#4fae7a1f 0%,#4fae7a00 60%),linear-gradient(180deg,#0b0e0d 0%,#120d0a 100%);
  --place-row-h:clamp(150px,calc((100svh - 340px) / 2),420px)}
.place-head{padding:0 8vw;max-width:calc(760px + 16vw)}
.place h2{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,5vw,4rem);letter-spacing:-.03em;line-height:1.05;margin:0 0 12px}
.place-lead{color:#dcd5ce;font-size:1.05rem;line-height:1.6;margin:0;max-width:40rem}
.place-lead a{color:#fff;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.place-lead a:hover{color:#e7b27a}
.place-rows{display:flex;flex-direction:column;gap:clamp(12px,2vh,22px);min-height:calc(var(--place-row-h) * 2 + clamp(12px,2vh,22px))}
.place-row{width:100%}
.place-card{height:var(--place-row-h);border-radius:14px;overflow:hidden;box-shadow:0 18px 40px #0009;background:#1a1411}
.place-card img{height:100%;width:auto;display:block;object-fit:cover;user-select:none;-webkit-user-drag:none}
@media(max-width:700px){
  .place{padding:64px 0 40px;--place-row-h:clamp(140px,calc((100svh - 330px) / 2),300px)}
  .place-head{padding:0 22px}
  .place h2{font-size:2.3rem}
  .place-lead{font-size:1rem}
  .place-card{border-radius:10px}
}

/* v20.73: phones. The photographer and the place fill the screen also once the browser bars have slid away while scrolling
   (100lvh, the tall screen), and keep their bottom content clear of the bars when they show (the extra bottom padding is
   exactly the bars' height, 100lvh - 100svh). */
@media(max-width:700px){
  .shots,.place{min-height:100lvh}
  .shots{padding-bottom:calc(28px + 100lvh - 100svh)}
  .place{padding-bottom:calc(40px + 100lvh - 100svh)}
}
@media(max-width:700px) and (max-height:700px){.shots{padding-bottom:calc(18px + 100lvh - 100svh)}}

/* v20.73: five links in the menu now; still one screen with nothing to scroll. */
#fullscreen-nav nav [class*="text-[6vw]"]{font-size:min(6vw,8.6dvh)}
@media(max-width:1025px){#fullscreen-nav nav [class*="text-[6vw]"]{font-size:min(8.6vw,6.9dvh)}}