: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}