/* RILLE · Hörbar, Platten, Bar. Beispielprojekt von ELYX Systematix. */

@font-face{font-family:"Bricolage";src:url(../fonts/bricolage-grotesque-latin-standard-normal.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage";src:url(../fonts/bricolage-grotesque-latin-ext-standard-normal.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken";src:url(../fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken";src:url(../fonts/hanken-grotesk-latin-ext-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Martian Mono";src:url(../fonts/martian-mono-latin-standard-normal.woff2) format("woff2");font-weight:100 800;font-stretch:75% 112.5%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Martian Mono";src:url(../fonts/martian-mono-latin-ext-standard-normal.woff2) format("woff2");font-weight:100 800;font-stretch:75% 112.5%;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";src:url(../fonts/instrument-serif-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";src:url(../fonts/instrument-serif-latin-ext-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";src:url(../fonts/instrument-serif-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2212}

:root{
  --bg:#110C0F;--bg2:#1A1317;--panel:#20171C;
  --ink:#F2EAE2;--ink2:#ABA09A;--ink3:#776C69;--line:rgba(242,234,226,.14);--line2:rgba(242,234,226,.08);
  --acc:#FF2D55;--acc-m:rgba(255,45,85,.16);
  --fd:"Bricolage","Hanken",system-ui,sans-serif;--fb:"Hanken",system-ui,sans-serif;--fm:"Martian Mono",ui-monospace,Menlo,monospace;--fs:"Instrument Serif",Georgia,serif;
  --pad:clamp(18px,4.2vw,64px);--hd:72px;
  --ease:cubic-bezier(.2,.75,.1,1);--expo:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--fb);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
em{font-family:var(--fs);font-style:italic;font-weight:400;letter-spacing:-.01em}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--fm);font-weight:400;font-stretch:90%;letter-spacing:.02em}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--acc);color:var(--bg);padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
::selection{background:var(--acc);color:var(--bg)}

/* ---------- layers ---------- */
.gl{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:0;display:block;pointer-events:none}
html:not(.gl-on) .gl{display:none}
.grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.07;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");animation:grain 1.2s steps(6) infinite}
html.gl-on .grain{display:none}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 24px;border-radius:999px;font:600 15px/1 var(--fb);letter-spacing:.005em;text-decoration:none;white-space:nowrap;transition:background-color .3s,color .3s,border-color .3s,transform .4s var(--expo),box-shadow .4s}
.btn--acc{background:var(--acc);color:#16070B;box-shadow:0 10px 40px -12px rgba(255,45,85,.7)}
.btn--acc:hover{background:#FF4A6B;box-shadow:0 14px 50px -10px rgba(255,45,85,.85)}
.btn--line{border:1px solid rgba(242,234,226,.35);color:var(--ink)}
.btn--line:hover{border-color:var(--ink);background:rgba(242,234,226,.06)}
.btn--round{width:50px;padding:0;border:1px solid rgba(242,234,226,.35);font-size:22px}
.btn--round:hover{border-color:var(--ink)}
.btn--big{height:58px;padding:0 32px;font-size:16px}
.btn:active{transform:scale(.97)}
.btn--needle[aria-pressed="true"]{background:transparent;color:var(--ink);border:1px solid var(--acc);box-shadow:none}
.needle-ic{position:relative;width:16px;height:16px;border-radius:50%;border:1.5px solid currentColor}
.needle-ic::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:currentColor}
.btn--needle[aria-pressed="true"] .needle-ic{animation:spin 1.8s linear infinite;border-style:dashed}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- header ---------- */
.hd{position:fixed;left:0;right:0;top:0;z-index:60;height:var(--hd);display:flex;align-items:center;gap:26px;padding:0 var(--pad);transition:transform .5s var(--expo),background-color .4s}
.hd::before{content:"";position:absolute;inset:0 0 -40px;background:linear-gradient(rgba(17,12,15,.75),rgba(17,12,15,0));pointer-events:none;z-index:-1}
html.at-end .hd::before,html:not(.cine) .hd::before{background:linear-gradient(rgba(17,12,15,.97) 58%,rgba(17,12,15,0));transition:background .4s}
.hd__logo{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.hd__rec{width:30px;height:30px;animation:spin 6s linear infinite;animation-play-state:paused}
html.playing .hd__rec{animation-play-state:running}
.hd__rec .r0{fill:#0A0708;stroke:rgba(242,234,226,.3)}.hd__rec .r1{fill:none;stroke:rgba(242,234,226,.15)}.hd__rec .r2{fill:var(--acc)}.hd__rec .r3{fill:#0A0708}
.hd__word{font:800 21px/1 var(--fd);font-stretch:78%;letter-spacing:.12em}
.hd__sub{font-size:10.5px;color:var(--ink2)}
.hd__nav{display:flex;gap:26px}
.hd__nav a{position:relative;text-decoration:none;font-weight:500;font-size:15px;padding:6px 0}
.hd__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--acc);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--expo)}
.hd__nav a:hover::after{transform:scaleX(1);transform-origin:left}
.hd__cta{height:44px;padding:0 20px;font-size:14px}
.snd{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);transition:border-color .3s}
.snd:hover{border-color:rgba(242,234,226,.4)}
.snd__bars{display:flex;align-items:flex-end;gap:2px;height:14px}
.snd__bars i{width:2px;height:3px;background:var(--ink2);border-radius:1px;transition:height .2s}
html.playing .snd__bars i{background:var(--acc);animation:bars 0.9s ease-in-out infinite}
html.playing .snd__bars i:nth-child(2){animation-delay:-.3s}html.playing .snd__bars i:nth-child(3){animation-delay:-.6s}html.playing .snd__bars i:nth-child(4){animation-delay:-.15s}
@keyframes bars{0%,100%{height:3px}50%{height:14px}}
.snd__txt{font-size:11px}
.hd__menu{display:none;width:44px;height:44px;border-radius:50%;position:relative}
.hd__menu span{position:absolute;left:12px;right:12px;height:2px;background:currentColor;transition:transform .35s var(--expo)}
.hd__menu span:first-child{top:17px}.hd__menu span:nth-child(2){top:25px}
.hd__menu[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.hd__menu[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:55;background:rgba(17,12,15,.97);padding:calc(var(--hd) + 20px) var(--pad) 28px;display:flex;flex-direction:column;justify-content:space-between;overflow:auto}
.menu nav{display:flex;flex-direction:column}
.menu a{display:flex;align-items:baseline;gap:16px;text-decoration:none;font:800 clamp(2rem,9vw,3.4rem)/1.12 var(--fd);font-stretch:78%;letter-spacing:-.01em;border-bottom:1px solid var(--line);padding:10px 0}
.menu a small{font-size:11px;color:var(--acc);font-weight:400}
.menu__foot{font-size:11px;color:var(--ink2);margin-top:24px}

/* ---------- track record (progress) ---------- */
.tracks{position:fixed;left:16px;bottom:16px;z-index:50;display:flex;align-items:center;gap:12px;padding:6px 14px 6px 6px;border-radius:999px;background:rgba(17,12,15,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line2);transition:opacity .4s,transform .5s var(--expo)}
.tracks__rec{width:46px;height:46px;overflow:visible}
.tracks__rec .t0{fill:#0A0708;stroke:rgba(242,234,226,.18)}
.tracks__grooves circle{fill:none;stroke:rgba(242,234,226,.1);stroke-width:.6}
.tracks__grooves circle.on{stroke:var(--acc);stroke-opacity:.9}
.tracks__rec .t2{fill:var(--acc)}.tracks__rec .t3{fill:#0A0708}
.tracks__arm line{stroke:rgba(242,234,226,.8);stroke-width:2;stroke-linecap:round}
.tracks__arm circle{fill:#333}.tracks__arm rect{fill:var(--acc)}
.tracks__arm{transform-origin:92px 6px;transition:transform .6s var(--expo)}
.tracks__now{display:flex;flex-direction:column;line-height:1.25;font-size:10.5px;text-align:left}
.tracks{cursor:pointer;color:var(--ink)}
.tracks:hover{border-color:rgba(242,234,226,.3)}
.tracks__now b{color:var(--acc);font-weight:500}
.tracks__now span{color:var(--ink2);white-space:nowrap}
html.at-end .tracks{opacity:0;transform:translateY(20px);pointer-events:none}

/* ---------- chapters ---------- */
main{position:relative;z-index:2}
.ch{position:relative}
.ch__bg{position:absolute;inset:0;overflow:hidden;z-index:0}
.ch__bg canvas{width:100%;height:100%;object-fit:cover;display:block}
html.gl-on .ch__bg{display:none}
.stage{position:relative;z-index:1;min-height:100vh;min-height:100svh;padding:calc(var(--hd) + 40px) var(--pad) 120px;display:flex;align-items:center}
html.cine .ch{height:calc(var(--len) * 1vh)}
html.cine .stage{position:fixed;left:0;right:0;top:0;height:100vh;height:100svh;min-height:0;visibility:hidden;pointer-events:none;z-index:3}
html.cine .stage.is-on{visibility:visible;pointer-events:auto}
html.cine .stage.is-out{visibility:visible;pointer-events:none}
html.cine .ch__bg{display:none}

.kick{display:flex;align-items:center;gap:12px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin-bottom:26px}
.kick__no{display:inline-grid;place-items:center;min-width:34px;height:22px;padding:0 6px;border-radius:999px;background:var(--acc);color:#16070B;font-weight:500;letter-spacing:.04em}
.t2{font:800 clamp(2.4rem,min(6.2vw,10.4vh),6.6rem)/.9 var(--fd);font-stretch:76%;letter-spacing:-.015em;text-transform:none}
.t2 .l,.hero__t .l{display:block}
.t2 em,.hero__t em{font-size:1.08em;letter-spacing:-.02em;color:#FFE6DC}
.meta{font-size:12px;color:var(--ink2);margin-top:22px;letter-spacing:.04em}
.txt{font-size:clamp(16px,1.2vw,18.5px);line-height:1.6;color:rgba(242,234,226,.84);max-width:40ch;margin-top:16px}
.col{width:min(560px,46vw)}

/* split chars */
.ch_{display:inline-block;will-change:transform,opacity,filter}
[data-split] .w_{display:inline-block;white-space:nowrap;perspective:700px}
/* masked reveals (groove, sleeve cuts): the line clips its letters; padding keeps umlauts and descenders (g y p) whole */
[data-split].is-mask .l{overflow:hidden;padding:.12em .06em .2em 0;margin:-.12em -.06em -.2em 0}
[data-split].is-mask .w_{perspective:none}

/* hero */
.ch--hero .stage{align-items:center}
.hero{width:min(640px,50vw)}
.hero__t{font:800 clamp(3rem,min(8.6vw,13.6vh),9.6rem)/.86 var(--fd);font-stretch:75%;letter-spacing:-.02em;text-transform:uppercase}
.hero__t em{text-transform:none;font-size:1.04em;display:inline-block;margin-top:.04em}
.hero__lead{font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:rgba(242,234,226,.84);max-width:39ch;margin-top:30px}
.hero__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero__info{font-size:11px;color:var(--ink2);margin-top:28px;letter-spacing:.06em}
.hero__hint{position:absolute;right:var(--pad);bottom:74px;display:flex;align-items:center;gap:10px;font-size:11px;color:var(--ink2);opacity:0;transform:translateY(8px);transition:opacity .6s,transform .6s var(--expo);pointer-events:none}
.hero__hint.is-on{opacity:1;transform:none}
.hint__ring{width:22px;height:22px;border-radius:50%;border:1.5px dashed var(--acc);animation:spin 3s linear infinite}

/* album */
.tl{margin-top:26px;border-top:1px solid var(--line);max-width:420px}
.tl li{display:flex;gap:14px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line2);font-size:12px;color:rgba(242,234,226,.85)}
.tl li span{color:var(--acc);width:24px}
.tl li i{margin-left:auto;font-style:normal;color:var(--ink2)}

/* week */
.stage--week{display:block}
.week__kick{position:absolute;left:var(--pad);top:calc(var(--hd) + 34px)}
.nights{position:absolute;left:var(--pad);top:calc(var(--hd) + 74px);bottom:150px;width:min(560px,46vw)}
.night{position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;visibility:hidden}
.night.is-on,.night.is-out{visibility:visible}
html:not(.cine) .night{position:relative;transform:none;top:auto;visibility:visible;margin-bottom:80px}
html:not(.cine) .nights{position:relative;transform:none;top:auto;left:auto;bottom:auto}
.night__day{font:800 clamp(4rem,min(13vw,18vh),13rem)/.8 var(--fd);font-stretch:75%;letter-spacing:-.03em;color:rgba(242,234,226,.42);-webkit-mask-image:linear-gradient(180deg,#000 20%,rgba(0,0,0,.3));mask-image:linear-gradient(180deg,#000 20%,rgba(0,0,0,.3));margin-bottom:6px;text-transform:uppercase}
.days{position:absolute;left:var(--pad);bottom:96px;display:flex;gap:6px}
.days button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);font-size:11px;color:var(--ink2);transition:background-color .3s,color .3s,border-color .3s}
.days button:hover{border-color:var(--ink)}
.days button.is-on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
html:not(.cine) .days{display:none}

/* quiet */
.stage--quiet{justify-content:center;text-align:center}
.quiet{display:flex;flex-direction:column;align-items:center;max-width:720px;margin:0 auto}
.quiet .kick{justify-content:center}
.quiet__t{font-size:clamp(5rem,16vw,15rem);line-height:.85}
.quiet__t em{color:var(--ink)}
.quiet .txt{max-width:30ch;margin-top:26px;font-size:clamp(18px,1.6vw,22px)}

/* amp */
.spec{margin-top:28px;max-width:440px;border-top:1px solid var(--line)}
.spec div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line2);font-size:12px}
.spec dt{color:var(--ink2)}
.spec dd{color:var(--ink);text-align:right}
.knobrow{display:flex;align-items:center;gap:22px;margin-top:30px;flex-wrap:wrap}
.knob{position:relative;width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a3236,#120d10 70%);box-shadow:0 0 0 1px rgba(242,234,226,.12),0 16px 40px -12px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.12);cursor:grab;touch-action:none;flex:none}
.knob::before{content:"";position:absolute;inset:-10px;border-radius:50%;background:conic-gradient(from 225deg,var(--acc) 0deg,var(--acc) calc(var(--v,.55) * 270deg),rgba(242,234,226,.1) calc(var(--v,.55) * 270deg),rgba(242,234,226,.1) 270deg,transparent 270deg);-webkit-mask:radial-gradient(circle,transparent 46px,#000 47px,#000 49px,transparent 50px);mask:radial-gradient(circle,transparent 46px,#000 47px,#000 49px,transparent 50px)}
.knob__cap{position:absolute;inset:10px;border-radius:50%;transform:rotate(calc(-135deg + var(--v,.55) * 270deg));background:radial-gradient(circle at 40% 35%,#4b4247,#1b1518)}
.knob__cap i{position:absolute;left:50%;top:6px;width:3px;height:16px;margin-left:-1.5px;border-radius:2px;background:var(--acc);box-shadow:0 0 10px var(--acc)}
.knob.is-drag{cursor:grabbing}
.knob__lbl{font-size:10.5px;color:var(--ink2);letter-spacing:.08em;text-transform:uppercase}
.knob__val{font:700 22px/1.2 var(--fd);font-stretch:80%;margin:4px 0}
.knob__hint{font-size:10px;color:var(--ink3)}
.vu{display:flex;gap:8px}
.vu svg{width:110px;height:64px;background:linear-gradient(#F3E6C8,#E5D2A8);border-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),0 8px 24px -10px rgba(0,0,0,.9)}
.vu__arc{fill:none;stroke:#2A1E14;stroke-width:1.2}
.vu__red{fill:none;stroke:#C8102E;stroke-width:3}
.vu__ticks line{stroke:#2A1E14;stroke-width:1}
.vu__n{stroke:#1A1210;stroke-width:1.4;transform-origin:60px 62px}
.vu__t{font:600 7px var(--fm);fill:#2A1E14;text-anchor:middle}

/* crate */
.crate__info{margin-top:26px}
.crate__no{font-size:11px;color:var(--ink2)}
.crate__no b{color:var(--acc);font-weight:500}
.crate__title{font:700 clamp(1.6rem,2.4vw,2.3rem)/1.05 var(--fd);font-stretch:82%;margin-top:6px}
.crate__meta{font-size:11.5px;color:var(--ink2);margin-top:8px}
.crate__price{margin-top:12px;font:600 20px/1 var(--fb)}
.crate__price small{font-size:10px;color:var(--ink3);margin-left:6px;font-weight:400}
.crate__act{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.crate__msg{min-height:20px;margin-top:14px;font-size:11.5px;color:var(--acc)}
.crate__hint{position:absolute;right:var(--pad);bottom:36px;font-size:11px;color:var(--ink2)}
#stCrate{touch-action:pan-y}

/* booking (normal flow) */
.book{position:relative;z-index:3;padding:calc(var(--hd) + 80px) var(--pad) 120px;min-height:100vh;overflow-x:hidden;overflow-x:clip}
.book__hd{margin-bottom:clamp(36px,6vh,64px)}
.book__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,5vw,90px)}
.form{display:flex;flex-direction:column;gap:28px}
.fs{border:0;margin:0;padding:0;min-width:0}
.fs legend,.ppl__l,.field>span{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin-bottom:12px;display:block;padding:0}
.fs--row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:end}
.fs--row:last-of-type{grid-template-columns:1fr 1fr}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line);font-weight:500;font-size:14.5px;transition:background-color .25s,color .25s,border-color .25s}
.chip:hover span{border-color:rgba(242,234,226,.45)}
.chip input:checked+span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
.ppl__c{display:flex;align-items:center;gap:6px;height:48px;border:1px solid var(--line);border-radius:999px;padding:0 4px}
.ppl__b{width:40px;height:40px;border-radius:50%;font-size:20px}
.ppl__b:hover{background:rgba(242,234,226,.08)}
.ppl__v{min-width:28px;text-align:center;font:700 20px var(--fd)}
.field{display:flex;flex-direction:column;min-width:0}
.field input{font:400 17px/1.4 var(--fb);color:var(--ink);background:transparent;border:0;border-bottom:1px solid rgba(242,234,226,.35);padding:10px 0;border-radius:0;min-width:0}
.field input::placeholder{color:var(--ink3)}
.field input:focus{outline:none;border-bottom-color:var(--acc);box-shadow:0 1px 0 var(--acc)}
.field.is-bad input{border-bottom-color:#FF8A3D;box-shadow:0 1px 0 #FF8A3D}
.form__end{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:6px}
.form__msg{font-size:15px;max-width:44ch;color:var(--ink)}
.form__msg.is-bad{color:#FF8A3D}
.info{display:flex;flex-direction:column;gap:30px;align-self:start;padding:clamp(22px,2.4vw,34px);border:1px solid var(--line);border-radius:20px;background:rgba(17,12,15,.74);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.info__k{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin-bottom:12px}
.info__k small{color:var(--ink3);margin-left:8px;text-transform:none;letter-spacing:.02em}
.hours{width:100%;border-collapse:collapse;font-size:15px}
.hours th{text-align:left;font-weight:400;color:var(--ink2);padding:7px 0;border-bottom:1px solid var(--line2)}
.hours td{text-align:right;padding:7px 0;border-bottom:1px solid var(--line2)}
.drinks li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line2);font-size:15px}
.drinks i{font-style:normal;font-family:var(--fm);font-size:13px;color:var(--ink2)}
.info a{text-decoration:none;border-bottom:1px solid var(--line)}
.info a:hover{border-color:var(--acc)}
.info__b>p:not(.info__k){font-size:15px;line-height:1.6}

/* footer */
.ft{position:relative;z-index:3;background:#0B0809;padding:clamp(48px,7vw,96px) var(--pad) 90px;overflow:hidden;border-top:1px solid var(--line2)}
.ft__word{font:800 clamp(5rem,30vw,30rem)/.78 var(--fd);font-stretch:75%;letter-spacing:-.02em;color:rgba(242,234,226,.09);-webkit-mask-image:linear-gradient(180deg,#000 20%,transparent 92%);mask-image:linear-gradient(180deg,#000 20%,transparent 92%);margin:0 0 clamp(30px,4vw,56px) -.03em;white-space:nowrap}
.ft__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;font-size:15px;color:var(--ink2);border-top:1px solid var(--line);padding-top:22px}
.ft__row a{text-decoration:none}
.ft__row a:hover{color:var(--ink)}
.ft__fine{margin-top:36px;font-size:10.5px;line-height:1.7;color:var(--ink3);max-width:90ch}

/* intro */
.intro{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--bg);pointer-events:none}
html.no-js .intro,html.reduced .intro{display:none}
.intro__rec{position:relative;width:min(34vmin,240px);aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#0b0809 0 2px,#151013 2px 3px);box-shadow:0 0 0 1px rgba(242,234,226,.08),0 40px 80px -30px rgba(0,0,0,.9);animation:spin 1.8s linear infinite}
.intro__lab{position:absolute;inset:34%;border-radius:50%;background:var(--acc);display:grid;place-items:center;font:800 clamp(12px,2.2vmin,18px)/1 var(--fd);font-stretch:75%;letter-spacing:.1em;color:#F6EDE4}
.intro__txt{position:absolute;bottom:12vh;display:flex;gap:14px;font-size:11px;color:var(--ink2);letter-spacing:.12em;text-transform:uppercase}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .hd__nav,.hd__cta{display:none}
  .hd__menu{display:block}
  .col,.hero,.nights{width:min(560px,100%)}
}
@media (min-width:761px) and (orientation:landscape) and (max-height:780px){
  .stage{padding-top:calc(var(--hd) + 22px);padding-bottom:80px}
  .kick{margin-bottom:16px}
  .hero__lead{margin-top:18px}
  .hero__act{margin-top:22px}
  .hero__info{display:none}
  .meta{margin-top:14px}
  .tl{margin-top:16px}
  .tl li{padding:5px 0}
  .spec{margin-top:18px}
  .spec div{padding:6px 0}
  .knobrow{margin-top:18px}
  .crate__info{margin-top:16px}
  .crate__act{margin-top:16px}
  .nights{top:calc(var(--hd) + 60px);bottom:130px}
  .days{bottom:70px}
}
@media (min-width:761px) and (orientation:landscape) and (max-height:500px){
  .hero__lead{display:none}
  .stage{padding-bottom:64px}
  .night__day,.tracks,.kick,.crate__meta{display:none}
}
@media (min-width:761px) and (orientation:landscape) and (max-height:640px){
  .spec,.tl{display:none}
  .hero__lead{font-size:15px}
}
@media (max-width:760px),(max-width:1100px) and (orientation:portrait){
  :root{--hd:62px}
  .hd{gap:10px}
  .hd__sub{display:none}
  .snd{height:40px;padding:0 12px}
  .snd__txt{display:none}
  .stage{align-items:flex-end;padding-bottom:96px}
  .ch--hero .stage{align-items:flex-start;padding-top:calc(var(--hd) + 22px)}
  .hero__t{font-size:clamp(3rem,16vw,6.4rem)}
  .hero__lead{margin-top:18px;font-size:15.5px}
  .hero__act{margin-top:22px}
  .hero__act{gap:8px;flex-wrap:nowrap}
  .hero__act .btn{flex:1 1 auto;min-width:0;padding:0 12px;font-size:14px;height:48px}
  .hero__info{display:none}
  .hero__hint{left:var(--pad);right:auto;bottom:86px}
  .t2{font-size:clamp(2.4rem,12vw,4.6rem)}
  .col{width:100%}
  .tl{display:none}
  .txt{font-size:15.5px}
  .nights{top:auto;bottom:128px;transform:none;width:calc(100% - var(--pad) * 2)}
  .night{top:auto;bottom:0;transform:none}
  .night__day{font-size:clamp(4rem,22vw,6rem)}
  .days{bottom:70px;left:var(--pad);right:auto}
  .days button{width:40px;height:40px}
  .week__kick{top:calc(var(--hd) + 18px)}
  .stage--quiet{align-items:center}
  .spec{display:none}
  .knob{width:70px;height:70px}
  .knob::before{-webkit-mask:radial-gradient(circle,transparent 39px,#000 40px,#000 42px,transparent 43px);mask:radial-gradient(circle,transparent 39px,#000 40px,#000 42px,transparent 43px)}
  .vu svg{width:86px;height:50px}
  .crate__hint{display:none}
  .ch--crate .t2{font-size:clamp(2rem,9.5vw,3.6rem)}
  .ch--crate .kick{margin-bottom:14px}
  .crate__info{margin-top:14px}
  .crate__act{margin-top:16px}
  .crate__title{font-size:1.5rem}
  .crate__act .btn--line,.crate__act .btn--acc{flex:1}
  .book__grid{grid-template-columns:minmax(0,1fr)}
  .info{padding:22px 20px}
  .fs--row,.fs--row:last-of-type{grid-template-columns:minmax(0,1fr)}
  .ft__row{grid-template-columns:minmax(0,1fr)}
  .tracks{left:12px;bottom:12px;padding-right:10px}
  .tracks__rec{width:38px;height:38px}
  .tracks__now span{display:none}
  .hide-s{display:none}
  .ch--hero .stage::before,.ch--album .stage::before,.ch--amp .stage::before,.ch--crate .stage::before{content:"";position:absolute;left:0;right:0;pointer-events:none;z-index:-1}
  .ch--hero .stage::before{top:0;height:62%;background:linear-gradient(rgba(17,12,15,.88),rgba(17,12,15,.7) 70%,rgba(17,12,15,0))}
  .ch--album .stage::before,.ch--amp .stage::before,.ch--crate .stage::before{bottom:0;height:62%;background:linear-gradient(rgba(17,12,15,0),rgba(17,12,15,.78) 35%,rgba(17,12,15,.92))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}
}

/* ---------- without WebGL: printed art, chapters flow ---------- */
.ch__bg--hero,.ch__bg--album,.ch__bg--amp,.ch__bg--crate{left:auto;width:60%}
.ch__bg--hero canvas,.ch__bg--album canvas,.ch__bg--amp canvas,.ch__bg--crate canvas,.ch__bg--quiet canvas{position:absolute;top:50%;height:auto}
.ch__bg--hero canvas{width:min(50vw,84vh);right:-9vw;margin-top:calc(min(50vw,84vh) / -2);animation:spin 1.8s linear infinite}
.ch__bg--hero canvas.sheen{animation:none;mix-blend-mode:screen}
.ch__bg--album canvas{width:min(36vw,62vh);right:calc(var(--pad) + 3vw);transform:translateY(-50%) rotate(-4deg);box-shadow:0 40px 90px -20px rgba(0,0,0,.85);border-radius:3px}
.ch__bg--amp canvas{width:min(56vw,104vh);right:0;transform:translateY(-46%)}
.ch__bg--crate{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28%);mask-image:linear-gradient(90deg,transparent,#000 28%)}
.ch__bg--crate canvas{width:min(64vw,112vh);right:-7vw;transform:translateY(-50%) perspective(1400px) rotateY(-24deg) rotateX(8deg);border-radius:6px}
.ch__bg--quiet canvas{width:min(84vw,124vh);left:50%;top:auto;margin-left:calc(min(84vw,124vh) / -2);bottom:calc(min(84vw,124vh) / -1.9);opacity:.55}
html:not(.cine) .stage--week{padding:0}
html:not(.cine) .week__kick{z-index:2}
html:not(.cine) .nights{width:100%}
html:not(.cine) .night{min-height:100vh;min-height:100svh;margin:0;padding:calc(var(--hd) + 70px) var(--pad) 90px;display:flex;flex-direction:column;justify-content:center;isolation:isolate}
html:not(.cine) .night>:not(.night__art){position:relative;z-index:1;max-width:min(560px,44vw)}
.night__art{position:absolute;inset:0;z-index:0;overflow:hidden}
.night__art canvas{width:100%;height:100%;object-fit:cover;display:block}
.night__art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,12,15,.6),rgba(17,12,15,0) 52%)}
@media (max-width:760px),(max-width:1100px) and (orientation:portrait){
  .ch__bg--hero,.ch__bg--album,.ch__bg--amp,.ch__bg--crate{width:100%}
  .ch__bg--hero canvas{width:96vw;right:-22vw;top:auto;bottom:-16vw;margin-top:0}
  .ch__bg--album canvas{width:min(64vw,40vh);right:auto;left:50%;top:calc(var(--hd) + 34px);transform:translateX(-50%) rotate(-4deg)}
  .ch__bg--amp canvas{width:118vw;right:-9vw;top:calc(var(--hd) - 10px);transform:none}
  .ch__bg--crate{-webkit-mask-image:linear-gradient(#000 40%,transparent 70%);mask-image:linear-gradient(#000 40%,transparent 70%)}
  .ch__bg--crate canvas{width:130vw;right:-15vw;top:calc(var(--hd) + 10px);transform:perspective(900px) rotateX(16deg)}
  .ch__bg--quiet canvas{width:150vw;margin-left:-75vw;bottom:-60vw}
  html:not(.cine) .night{justify-content:flex-end;padding-bottom:70px}
  html:not(.cine) .night>:not(.night__art){max-width:100%}
  .night__art::after{background:linear-gradient(rgba(17,12,15,0) 38%,rgba(17,12,15,.88) 70%)}
}

/* custom cursor (fine pointers only) */
.cur{position:fixed;left:0;top:0;z-index:150;pointer-events:none;display:none}
html.has-cur .cur{display:block}
html.has-cur,html.has-cur a,html.has-cur button,html.has-cur label{cursor:none}
.cur__dot{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--acc)}
.cur__ring{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:1px solid rgba(242,234,226,.5);transition:width .35s var(--expo),height .35s var(--expo),margin .35s var(--expo),border-color .3s,background-color .3s}
.cur.is-link .cur__ring{width:56px;height:56px;margin:-28px 0 0 -28px;border-color:var(--acc);background:rgba(255,45,85,.08)}
.cur.is-grab .cur__ring{width:84px;height:84px;margin:-42px 0 0 -42px;border-style:dashed;border-color:var(--acc);animation:spin 4s linear infinite}
.cur.is-down .cur__ring{width:30px;height:30px;margin:-15px 0 0 -15px}
.cur__lbl{position:absolute;left:24px;top:14px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);white-space:nowrap;opacity:0;transition:opacity .3s}
.cur.has-lbl .cur__lbl{opacity:1}
.hd__nav a.is-on{color:var(--ink)}
.hd__nav a.is-on::after{transform:scaleX(1)}