/* Empire Cinema Club homepage preview r1.
   Concept: "Projected". A dark, hazy room where projector beams and a follow spot move through the air, and the name EMPIRE hangs in
   that light above the group like a lit screen. Brand violet #7A00DF leads, with electric blue and a hot red as accents.
   No Art Deco, retro cinema, reels, popcorn, chrome or marquee bulbs: contemporary type, light and haze only. */
:root{
  --ink:#07060f; --ink-2:#0c0a1a; --ink-3:#141029; --navy:#0a0b22;
  --violet:#7a00df; --violet-2:#9b3dff; --violet-3:#c9a6ff;
  --blue:#2557e8; --blue-2:#6f9bff; --red:#e8344a; --red-2:#ff6b7d;
  --fg:#f6f3fb; --mist:#c0b9d2; --mist-2:#9690ab; --line:rgba(201,166,255,.18); --line-2:rgba(201,166,255,.32);
  --glass:rgba(20,16,41,.72);
  --display:"Syne","Helvetica Neue",Arial,sans-serif; --body:"Manrope","Helvetica Neue",Arial,sans-serif;
  --max:1320px; --r:20px; --gap:34px; color-scheme:dark;
}
/* r6, Mark: "We still have the huge gap between sections problems which I did correct on previous sites designs." The Partners rhythm
   (layout-r18.css and home-first.css): 34px top and bottom on phones, so about 68px between sections; clamp(40px,5vw,56px) from 700px,
   so about 80px on tablets and 112px on desktop. The hero's foot and the footer's top use the same value, for one even rhythm. */
@media (min-width:700px){:root{--gap:clamp(40px,5vw,56px)}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px;scroll-padding-bottom:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--fg);font:400 1.0625rem/1.55 var(--body);overflow-x:hidden}
[hidden]{display:none!important}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,address{margin:0;padding:0}
ul,ol{list-style:none}
address{font-style:normal}
button,input{font:inherit;color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--violet-3);outline-offset:3px;border-radius:6px}
svg.i{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:clamp(18px,4vw,48px)}
.skip{position:fixed;z-index:60;left:12px;top:12px;transform:translateY(-200%);background:#fff;color:#000;padding:10px 16px;border-radius:10px;font-weight:700}
.skip:focus{transform:none}
main:focus,[data-nav-focus]:focus{outline:none}
.demo-line{position:relative;z-index:3;margin:0;background:#000;color:var(--mist);font-size:.8125rem;line-height:1.4;text-align:center;padding:7px 14px;border-bottom:1px solid var(--line)}

/* Type */
.eyebrow{font:700 .78rem/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--red-2);margin-bottom:14px}
h2{font:700 clamp(2rem,4.6vw,3.5rem)/1.02 var(--display);letter-spacing:-.035em;text-wrap:balance}
h2 em,h1 em{font-style:normal;background:linear-gradient(90deg,#c08bff 0%,#8fb1ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
h3{font:700 1.25rem/1.2 var(--display);letter-spacing:-.02em}
.lead{color:var(--mist);font-size:1.0625rem;line-height:1.6;margin-top:16px;max-width:60ch}
.small{color:var(--mist);font-size:.9375rem;line-height:1.55}
.note{color:var(--mist-2);font-size:.875rem;line-height:1.5}
.note a{color:var(--fg)}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px}
.sec-head{margin-bottom:30px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:999px;border:1px solid transparent;background:var(--violet);color:#fff;font:700 .9375rem/1.1 var(--body);text-decoration:none;cursor:pointer;transition:background .2s,box-shadow .2s,transform .2s}
.btn:hover{background:#8d17f5;box-shadow:0 0 0 4px rgba(122,0,223,.25),0 10px 30px -10px rgba(155,61,255,.8)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-alt{background:var(--blue)}
.btn-alt:hover{background:#2f63f5;box-shadow:0 0 0 4px rgba(37,87,232,.25),0 10px 30px -10px rgba(111,155,255,.8)}
.btn.ghost{background:transparent;border-color:var(--line-2);color:var(--fg)}
.btn.ghost:hover{background:rgba(201,166,255,.08);box-shadow:none}
.tag{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;background:#cf2a3f;color:#fff;font:700 .68rem/1.5 var(--body);letter-spacing:.08em;text-transform:uppercase;vertical-align:middle}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--violet-2);box-shadow:0 0 12px var(--violet-2);flex:none}
.dot.lit{background:#3ee08f;box-shadow:0 0 12px #3ee08f}

/* Header: floats, sticks, takes no space */
.top{position:sticky;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:30;height:0}
.bar{display:flex;align-items:center;gap:10px;height:58px;width:min(var(--max),calc(100% - 20px));margin:8px auto 0;padding:0 7px 0 20px;background:rgba(10,8,24,.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:999px;box-shadow:0 10px 40px -20px #000}
.logo{display:flex;align-items:baseline;gap:.5em;text-decoration:none;white-space:nowrap}
.logo b{font:800 1.4rem/1 var(--display);letter-spacing:.01em;text-transform:uppercase}
.logo small{font:700 .66rem/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--violet-3)}
@media (max-width:429px){.bar .logo small{display:none}}
.bar>*{min-width:0}
.bar .logo,.top-tel,.menu-btn{flex:none}
@media (max-width:359px){.bar{gap:6px;padding-left:14px}.bar .logo b{font-size:1.15rem}.menu-btn{padding:0 12px}}
.nav{display:none}
.top-tel{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;border-radius:999px;color:var(--violet-3);text-decoration:none;font-weight:600;font-size:.9375rem}
.top-tel span{display:none}
.top-tel:hover{color:#fff}
.menu-btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:999px;border:0;background:var(--violet);color:#fff;font-weight:700;font-size:.9375rem;cursor:pointer}
.menu-btn:hover{background:#8d17f5}
@media (min-width:700px){.top-tel span{display:inline}.top-tel{padding:0 12px}}
@media (min-width:1180px){
  .bar{padding:0 14px 0 24px;gap:18px}
  .nav{display:flex;align-items:center;gap:2px;margin-left:auto}
  .nav>a,.more-btn{display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 11px;border-radius:999px;text-decoration:none;font-size:.9rem;font-weight:600;color:var(--mist);background:none;border:0;cursor:pointer}
  .nav>a:hover,.more-btn:hover,.more-btn[aria-expanded=true]{color:#fff;background:rgba(201,166,255,.1)}
  .more-btn svg.i{width:1em;height:1em;transition:transform .2s}
  .more-btn[aria-expanded=true] svg.i{transform:rotate(180deg)}
  .top-tel{margin-left:0}
  .menu-btn{display:none}
}
.more{position:relative}
.more-list{position:absolute;right:0;top:calc(100% + 12px);min-width:260px;padding:8px;background:rgba(14,11,30,.97);border:1px solid var(--line-2);border-radius:18px;box-shadow:0 24px 60px -20px #000;display:grid}
.more-list a{padding:11px 14px;border-radius:12px;text-decoration:none;font-size:.9375rem;color:var(--mist)}
.more-list a:hover,.more-list a:focus-visible{background:rgba(201,166,255,.1);color:#fff}

/* Hero */
/* r3: the stage. Deep red velvet dark, as the curtains in the picture. */
.hero{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(120% 70% at 50% 10%,#3a060d 0%,#160307 50%,var(--ink) 100%)}
#haze{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block;touch-action:pan-y}
html:not(.js) #haze,.no-gl #haze{display:none}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:60px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,transparent,var(--ink))}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);padding-top:82px}
.hero-grid>*{min-width:0}
.wm{position:relative;width:100%;aspect-ratio:4.6/1;display:grid;place-items:center;container-type:inline-size}
.wm-fallback{display:none;max-width:100%;font:800 calc((100vw - 40px)/7)/.9 var(--display);font-size:calc(100cqi/6.9);text-transform:uppercase;letter-spacing:-.01em;background:linear-gradient(90deg,#ff4566,#a14dff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 30px rgba(232,52,74,.45))}
html:not(.js) .wm-fallback,.no-gl .wm-fallback{display:block}
.hero-art{position:relative;z-index:1;margin:-5% calc(-1*clamp(18px,4vw,48px)) 0}
.hero-art .frame{position:relative;aspect-ratio:4/3;overflow:hidden;background:none!important;border-radius:0!important}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:opacity .5s;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 96.5%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 96.5%,transparent);mask-composite:intersect}
.gl-on .hero-art img{opacity:0}
.intro{position:relative;z-index:2;margin-top:14px}
.intro h1,.intro .lead,.intro .eyebrow{text-shadow:0 2px 18px rgba(7,6,15,.9)}
.intro h1{font:700 clamp(1.9rem,7.4vw,3.1rem)/1.04 var(--display);letter-spacing:-.035em;text-wrap:balance}
.intro .lead{margin-top:14px}
.status{position:relative;z-index:2;margin-top:22px;padding:16px 18px;border-radius:18px;background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.st-head{display:flex;align-items:center;gap:10px;font:700 1.0625rem/1.3 var(--display)}
.st-sub{color:var(--mist);font-size:.9375rem;margin-top:6px}
.st-foot{color:var(--mist-2);font-size:.8125rem;margin-top:8px}
.stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:22px 0 0;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.stats li{display:grid;gap:2px;padding:14px 16px;background:rgba(10,8,24,.86)}
.stats b{font:800 1.5rem/1 var(--display);letter-spacing:-.02em;background:linear-gradient(90deg,#c08bff,#8fb1ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
.hero{padding-bottom:var(--gap)}
@media (min-width:700px){
  .hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:28px;padding-top:88px}
  .wm,.hero-art{grid-column:1/-1}
  .wm{aspect-ratio:5/1}
  .hero-art{margin-top:-4%}
  .hero-art .frame{aspect-ratio:3/2}
  .intro{margin-top:10px}
  .intro h1{font-size:clamp(2rem,4.6vw,2.6rem)}
  .status{margin-top:10px;align-self:end}
  .stats{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr auto;column-gap:clamp(28px,3vw,48px);padding-top:84px}
  .wm{grid-column:1/-1;grid-row:1;aspect-ratio:5.6/1}
  .hero-art{grid-column:2;grid-row:2/4;margin:-5% 0 0;align-self:end}
  .hero-art .frame{aspect-ratio:4/3;max-width:1080px;margin-left:auto}
  .intro{grid-column:1;grid-row:2;align-self:end;margin:0}
  .intro h1{font-size:clamp(2rem,3.3vw,3.1rem)}
  .status{grid-column:1;grid-row:3;margin-top:22px;align-self:end}
  .stats{margin-top:18px}
}

/* Pictures. Every frame is outside the text: no copy sits on a photo. */
.ph{position:relative;display:flex;flex-direction:column;min-width:0}
.ph .frame{position:relative;overflow:hidden;border-radius:var(--r);background:var(--ink-3)}
.ph:not(.hero-art) .frame img{width:100%;height:100%;object-fit:cover}
.ph-empty{display:grid;place-items:end start;background:radial-gradient(80% 60% at 50% 0%,rgba(122,0,223,.45),transparent 70%),linear-gradient(160deg,#1a1440,#07060f)}
.ph-empty span{margin:14px;padding:6px 10px;border-radius:8px;background:rgba(0,0,0,.55);font-size:.8rem;color:var(--mist)}
.r45 .frame{aspect-ratio:4/5}
.r32 .frame{aspect-ratio:3/2}
/* A frame that fills the height of its row, so tall text never leaves a blank beside a short photo. */
@media (min-width:700px){
  .fill{align-self:stretch}
  .fill .frame{flex:1;aspect-ratio:auto;min-height:360px}
  .fill .frame img{position:absolute;inset:0}
}

/* Bands */
.band{padding-block:var(--gap);position:relative;overflow-x:clip}
.band:nth-of-type(even){background:var(--ink-2)}

/* VIP */
.vip{background:radial-gradient(60% 80% at 0% 0%,rgba(122,0,223,.22),transparent 60%),var(--ink)!important}
.vip-grid{display:grid;gap:24px}
.vip .ph .frame img{object-position:50% 18%}
.vip-ways{display:grid;gap:16px}
.way{padding:22px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line)}
.way-mail{border-color:rgba(155,61,255,.5);box-shadow:inset 0 1px 0 rgba(201,166,255,.15),0 30px 60px -40px rgba(122,0,223,.9)}
.way-wa{border-color:rgba(111,155,255,.35)}
.way-k{display:flex;align-items:center;gap:10px;font:700 .78rem/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--violet-3);margin-bottom:10px}
.way-wa .way-k{color:var(--blue-2)}
.way-k span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid currentColor;font-size:.72rem;letter-spacing:0}
.way h3{font-size:1.375rem;margin-bottom:8px}
.way .btn{margin-top:18px;width:100%}
form[data-preview-form]{display:grid;gap:10px;margin-top:16px}
form[data-preview-form] label[for^=em]{font-size:.875rem;font-weight:600;color:var(--mist)}
form[data-preview-form] input[type=email]{height:52px;padding:0 16px;border-radius:14px;border:1px solid var(--line-2);background:rgba(4,3,10,.6);color:var(--fg);font-size:1rem}
form[data-preview-form] input[type=email]:focus{border-color:var(--violet-3)}
.tick{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;color:var(--mist);cursor:pointer}
.tick input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--violet-2);flex:none}
form[data-preview-form] .btn{margin-top:6px;width:100%}
.preview-note{margin-top:10px;font-size:.78rem;color:var(--mist-2)}
.form-status{margin-top:14px;padding:12px 14px;border-radius:12px;background:rgba(122,0,223,.16);border:1px solid rgba(155,61,255,.45);font-size:.9375rem}
.form-status:focus{outline:none}
.form-status strong{display:block;font:700 1.0625rem/1.3 var(--display);margin-bottom:4px}
@media (min-width:700px){
  .vip-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:28px;row-gap:24px}
  .vip-head{grid-column:1/-1}
  .vip .ph{grid-column:1;grid-row:2}
  .vip-ways{grid-column:2;grid-row:2}
}
@media (min-width:1000px){
  .vip-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(28px,3vw,48px)}
  .vip .ph{grid-row:1/3}
  .vip-head{grid-column:2;grid-row:1;align-self:end}
  .vip-ways{grid-column:2;grid-row:2;grid-template-columns:1fr 1fr;align-items:start}
  /* r10, Amendment H: the four WhatsApp perk cells are gone, so the WhatsApp card keeps its own height and its
     button follows the text. Stretching it to the email card's height left an empty band above the button. */
}

/* Striptease: a stage spotlight sweeps behind the performer */
.strip-grid{display:grid;gap:24px}
.strip .ph .frame{box-shadow:0 0 0 1px rgba(111,155,255,.25),0 40px 90px -40px rgba(37,87,232,.9)}
.strip .ph .frame img{object-position:50% 30%}
.strip .ph::before{content:"";position:absolute;z-index:-1;left:50%;top:-14%;width:120%;height:90%;transform:translateX(-50%);background:conic-gradient(from 180deg at 50% 0%,transparent 160deg,rgba(111,155,255,.16) 172deg,rgba(201,166,255,.22) 180deg,rgba(111,155,255,.16) 188deg,transparent 200deg);filter:blur(6px);transform-origin:50% 0;animation:sway 9s ease-in-out infinite alternate;pointer-events:none}
.strip .ph{isolation:isolate}
@keyframes sway{from{transform:translateX(-50%) rotate(-7deg)}to{transform:translateX(-50%) rotate(7deg)}}
.shows{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.shows li{padding:16px;border-radius:16px;background:var(--glass);border:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.shows li.is-today{border-color:rgba(232,52,74,.7);box-shadow:0 0 0 1px rgba(232,52,74,.35)}
.shows .d{font:700 1.125rem/1.2 var(--display)}
.shows .tag{margin:0;align-self:flex-start}
.shows b{font-weight:600;font-family:var(--body);color:var(--mist);font-size:.9375rem}
.strip-body .note{margin-top:16px}
@media (min-width:700px){
  .strip-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:28px}
  .strip-head{grid-column:1/-1}
  .strip-body{grid-column:1;grid-row:2;align-self:center}
  .strip .ph{grid-column:2;grid-row:2}
}
@media (min-width:1000px){
  .strip-grid{column-gap:clamp(28px,3vw,48px)}
  .strip-head{grid-column:1;grid-row:1;align-self:end}
  .strip-body{grid-row:2;align-self:start}
  .strip .ph{grid-row:1/3}
}

/* Hours and prices */
.hours-grid{display:grid;gap:16px}
.panel{padding:22px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line)}
.times{margin-top:12px;display:grid}
.times li{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:13px 0;border-bottom:1px solid var(--line)}
.times li:last-child{border-bottom:0}
.times b{font-weight:700}
.times li.is-today span:first-child{color:#fff}
.times li.is-today b{color:var(--violet-3)}
.open-times .note{margin-top:8px}
.inc-h{margin-top:22px}
.ticks{display:grid;gap:8px;margin-top:12px}
.ticks li{display:flex;gap:10px;align-items:flex-start;color:var(--mist);font-size:.9375rem}
.ticks svg.i{color:#3ee08f;margin-top:2px}
.prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.price{padding:20px;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(160deg,rgba(122,0,223,.22),rgba(12,10,26,.9) 60%)}
.price .k{display:block;font:700 .78rem/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--violet-3)}
.price b{display:block;margin:10px 0 8px;font:800 clamp(2.4rem,9vw,3.6rem)/1 var(--display);letter-spacing:-.04em}
.price p{color:var(--mist);font-size:.875rem;line-height:1.5}
.p-std{background:linear-gradient(160deg,rgba(37,87,232,.28),rgba(12,10,26,.9) 60%)}
.p-mem{background:linear-gradient(160deg,rgba(232,52,74,.22),rgba(12,10,26,.9) 60%)}
.p-mem{grid-column:1/-1}
.p-pass{grid-column:1/-1;background:linear-gradient(160deg,rgba(201,166,255,.12),rgba(12,10,26,.9) 60%)}
.p-pass b{font-size:clamp(1.8rem,6vw,2.6rem)}
.p-pass small{font:600 .9rem/1 var(--body);letter-spacing:0;color:var(--mist)}
.hours-row{justify-content:flex-start;column-gap:24px}
/* Bottom menu, the Acqua, Nero's and Partners pattern: five controls, fixed above the safe area, wherever the top bar has no full menu
   (below 1180px for Empire's eight menu items). Menu opens the same sheet. The fifth control is Scroll at the top and Top after scrolling.
   The page's bottom padding clears it, and keyboard focus scrolls clear of it. */
:root{--dock:62px}
.dock{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:20;display:flex;background:rgba(10,8,24,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 10px 40px -16px #000}
.dock a,.dock button{flex:1 1 0;min-width:0;height:var(--dock);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;background:none;border:0;color:var(--fg);text-decoration:none;font:600 .75rem/1 var(--body);cursor:pointer}
.dock a:first-child{color:var(--violet-3)}
.dock a:hover,.dock button:hover{background:rgba(201,166,255,.08)}
.dock svg.i{width:22px;height:22px}
.dock .dock-menu svg.i{color:var(--violet-3)}
#up.is-down svg{transform:rotate(180deg)}
@media (max-width:1179px){
  body{padding-bottom:calc(var(--dock) + 22px + env(safe-area-inset-bottom,0px))}
  html{scroll-padding-bottom:calc(var(--dock) + 34px + env(safe-area-inset-bottom,0px))}
  #to-top{display:none}
}
@media (min-width:1180px){.dock{display:none}}
/* r4: if WebGL can't run, the picture still gets a slow moving spotlight and soft glints on the curtains, drawn in CSS. Overlay blending
   leaves the black silhouette black; the glints sit on the curtains either side of the dancer. Reduced motion stops both (global rule at
   the end), leaving the still picture. */
.no-gl .hero-art .frame::before,.no-gl .hero-art .frame::after,html:not(.js) .hero-art .frame::before,html:not(.js) .hero-art .frame::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 94%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 94%,transparent);mask-composite:intersect}
.no-gl .hero-art .frame::before,html:not(.js) .hero-art .frame::before{z-index:1;background:radial-gradient(30% 44% at 50% 56%,rgba(255,244,234,.9),rgba(255,226,206,.4) 48%,transparent 74%);animation:ecSpot 7s ease-in-out infinite alternate}
.no-gl .hero-art .frame::after,html:not(.js) .hero-art .frame::after{z-index:2;mix-blend-mode:screen;background:
  radial-gradient(circle at 14% 30%,rgba(255,226,214,.75) 0,transparent 1.1%),radial-gradient(circle at 22% 62%,rgba(255,226,214,.7) 0,transparent 1%),
  radial-gradient(circle at 9% 48%,rgba(255,226,214,.6) 0,transparent .9%),radial-gradient(circle at 27% 40%,rgba(255,226,214,.65) 0,transparent 1%),
  radial-gradient(circle at 74% 34%,rgba(255,226,214,.75) 0,transparent 1.1%),radial-gradient(circle at 81% 58%,rgba(255,226,214,.7) 0,transparent 1%),
  radial-gradient(circle at 90% 44%,rgba(255,226,214,.6) 0,transparent .9%),radial-gradient(circle at 70% 70%,rgba(255,226,214,.6) 0,transparent 1%);
  animation:ecGlint 3.2s ease-in-out infinite alternate}
@keyframes ecSpot{from{transform:translateX(-34%)}to{transform:translateX(34%)}}
@keyframes ecGlint{from{opacity:.15}to{opacity:1}}
@media (min-width:700px){.prices{grid-template-columns:repeat(3,minmax(0,1fr))}.p-mem{grid-column:auto}}
@media (min-width:1000px){
  .hours-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px}
  .prices{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr auto}
  .price b{font-size:clamp(2.2rem,3.6vw,3.4rem)}
  .p-pass b{font-size:clamp(1.7rem,2.6vw,2.4rem)}
}

/* Films: the frame glows like a screen in a dark room */
.films-grid{display:grid;gap:24px}
.films .ph .frame{animation:glow 10s ease-in-out infinite alternate}
@keyframes glow{from{box-shadow:0 30px 90px -30px rgba(122,0,223,.85),0 0 0 1px rgba(155,61,255,.3)}to{box-shadow:0 30px 90px -30px rgba(37,87,232,.85),0 0 0 1px rgba(111,155,255,.3)}}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:22px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.facts li{padding:14px 16px;background:var(--ink-2);display:grid;gap:4px}
.facts b{font:800 1.75rem/1 var(--display);letter-spacing:-.02em}
.facts span{font-size:.8125rem;color:var(--mist)}
@media (min-width:700px) and (max-width:999px){.facts{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1000px){
  .films-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(28px,3vw,48px);align-items:center}
}

/* What's on */
.on-grid{display:grid;gap:14px}
.bi{position:relative;overflow:hidden;padding:24px;border-radius:var(--r);border:1px solid rgba(201,166,255,.35);background:linear-gradient(125deg,rgba(214,2,112,.34),rgba(122,0,223,.38) 45%,rgba(0,56,168,.42));background-size:200% 200%;animation:drift 14s ease-in-out infinite alternate;display:flex;flex-direction:column;gap:20px}
@keyframes drift{from{background-position:0% 50%}to{background-position:100% 50%}}
.bi .k,.on .k{font:700 .78rem/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#ffd0e2}
.bi h3{font:800 clamp(2.4rem,8vw,3.6rem)/1 var(--display);letter-spacing:-.04em;margin:10px 0 10px}
.bi-when{font-size:1.0625rem;line-height:1.5}
.guests{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.guests li{padding:6px 12px;border-radius:999px;background:rgba(7,6,15,.45);border:1px solid rgba(255,255,255,.2);font-size:.875rem}
.bi-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.18);border-radius:16px;overflow:hidden}
.bi-facts li{padding:12px 14px;background:rgba(7,6,15,.55);display:grid;gap:2px}
.bi-facts b{font:800 1.25rem/1.2 var(--body);letter-spacing:-.01em}
.bi-facts span{font-size:.8125rem;color:#e8defa}
.bi .row{margin-top:0}
.bi .btn{background:#fff;color:#1a0b33}
.bi .btn:hover{background:#efe6ff}
.bi .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.on{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line);text-decoration:none;transition:border-color .2s,transform .2s}
.on .k{color:var(--red-2)}
.on h3{font-size:1.375rem}
.on p{color:var(--mist);font-size:.9375rem}
.on .cta{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:8px;color:var(--violet-3);font-weight:700;font-size:.9rem}
.on:hover{border-color:var(--line-2);transform:translateY(-2px)}
.on.is-today,.bi.is-today{box-shadow:0 0 0 2px rgba(232,52,74,.6)}
@media (min-width:700px){
  .on-grid{grid-template-columns:repeat(3,1fr)}
  .bi{grid-column:1/-1}
  .bi-facts{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1000px){
  .on-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:repeat(3,auto);gap:16px}
  .bi{grid-column:1;grid-row:1/4;padding:32px;gap:24px}
  .bi h3{font-size:clamp(3.4rem,5vw,4.6rem)}
  .bi-facts{grid-template-columns:1fr 1fr;margin-top:auto}
}

/* First visit */
.first-grid{display:grid;gap:24px}
.first .ph .frame img{object-position:50% 20%}
/* r7: the four customers, a transparent cut-out, shown whole: contained (never cropped or stretched) with a little room inside the frame,
   standing on a plain atmospheric backdrop in the section's own colours. No room or furniture is drawn. */
.rcust .frame{aspect-ratio:1199/1312;background:radial-gradient(70% 55% at 50% 42%,rgba(122,0,223,.34),transparent 70%),radial-gradient(60% 30% at 50% 100%,rgba(232,52,74,.22),transparent 75%),linear-gradient(180deg,#1a1236,#0c0a1a)}
.first .rcust .frame img{object-fit:contain;object-position:50% 100%;padding:4% 4% 2%}
/* Tablet: beside the tall steps the frame would stretch and leave the group small in empty space, so the picture takes its own row
   above the steps, at a fixed height, and the two notes sit side by side. Phone and desktop are unchanged. */
@media (min-width:700px) and (max-width:999px){
  section.first .first-grid{grid-template-columns:minmax(0,1fr)}
  section.first .first-head{grid-column:1}
  section.first .first-grid>.ph{grid-column:1;grid-row:2;align-self:auto}
  section.first .first-body{grid-column:1;grid-row:3}
  section.first .rcust .frame{flex:none;aspect-ratio:auto;height:460px;min-height:0}
  section.first .rules{grid-template-columns:1fr 1fr}
}
.steps{display:grid;gap:12px}
.steps li{display:flex;gap:16px;padding:18px;border-radius:18px;background:var(--glass);border:1px solid var(--line)}
.steps li>span{font:800 1.1rem/1 var(--display);color:var(--violet-3);padding-top:3px}
.steps h3{margin-bottom:4px}
.steps p{color:var(--mist);font-size:.9375rem}
.rules{display:grid;gap:12px;margin-top:12px}
.rule{display:flex;gap:14px;padding:18px;border-radius:18px;border:1px solid rgba(232,52,74,.35);background:linear-gradient(160deg,rgba(232,52,74,.12),transparent 70%)}
.rule svg.i{width:26px;height:26px;color:var(--red-2);margin-top:2px}
.rule h3{margin-bottom:4px}
.rule p{color:var(--mist);font-size:.9375rem}
@media (min-width:700px){
  .first-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:28px}
  .first-head{grid-column:1/-1}
  .first .ph{grid-column:1;grid-row:2}
  .first-body{grid-column:2;grid-row:2}
}
@media (min-width:1000px){
  .first-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(28px,3vw,48px)}
  .first-head{grid-column:1;grid-row:1;align-self:end}
  .first-body{grid-column:1;grid-row:2}
  .first .ph{grid-column:2;grid-row:1/3}
  .rules{grid-template-columns:1fr 1fr}
}

/* Find us */
.find-grid{display:grid;gap:24px}
.addr{font:700 clamp(1.6rem,5vw,2.4rem)/1.12 var(--display);letter-spacing:-.025em;margin-top:18px}
.arrive{display:grid;gap:10px;margin-top:20px}
.arrive li{display:flex;gap:12px;align-items:center;color:var(--mist)}
.arrive svg.i{width:22px;height:22px;color:var(--violet-3)}
.travel{display:grid;gap:12px}
.travel div{padding:20px;border-radius:18px;background:var(--glass);border:1px solid var(--line)}
.travel h3{margin-bottom:6px}
.travel p{color:var(--mist);font-size:.9375rem}
@media (min-width:700px){.find-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(28px,3vw,48px);align-items:center}}

/* Inside and the shop */
.inside-grid{display:grid;gap:24px}
.spaces{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.spaces li{padding:18px;border-radius:18px;background:var(--glass);border:1px solid var(--line)}
.spaces h3{margin-bottom:6px}
.spaces p{color:var(--mist);font-size:.9rem}
.inside-row{margin-top:0}
@media (min-width:1000px){
  .inside-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(28px,3vw,48px);row-gap:20px}
  .inside .ph{grid-column:1;grid-row:1/4;align-self:stretch}
  .inside .ph .frame{flex:1;aspect-ratio:auto;min-height:380px}
  .inside .ph .frame img{position:absolute;inset:0}
  .inside-head{grid-column:2;grid-row:1;align-self:end}
  .spaces{grid-column:2;grid-row:2}
  .inside-row{grid-column:2;grid-row:3;align-self:start}
}

/* Our venues */
.vgrid{display:grid;gap:12px}
.vgrid a{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:20px;border-radius:18px;background:var(--glass);border:1px solid var(--line);text-decoration:none;transition:border-color .2s}
.vgrid a:hover{border-color:var(--line-2)}
.vgrid b{display:block;font:700 1.125rem/1.25 var(--display)}
.vgrid span{color:var(--mist);font-size:.9rem}
.vgrid svg.i{color:var(--violet-3)}
@media (min-width:700px){.vgrid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.vgrid{grid-template-columns:repeat(4,1fr)}}

/* Footer */
.foot{padding:var(--gap) 0 32px;border-top:1px solid var(--line);background:#050409;color:var(--mist);font-size:.9375rem}
.foot .wrap{display:grid;gap:10px}
.foot .logo{margin-bottom:6px;color:var(--fg)}
.foot a{color:var(--fg)}
.f-links{display:flex;flex-wrap:wrap;gap:18px;margin-top:6px}
.f-small{margin-top:12px;font-size:.8125rem;color:var(--mist-2)}

/* Back to top */
.to-top{position:fixed;z-index:25;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:rgba(14,11,30,.9);border:1px solid var(--line-2);color:#fff;box-shadow:0 10px 30px -10px #000;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,transform .25s,visibility .25s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--violet)}
.to-top svg.i{width:22px;height:22px}

/* Menu */
.menu{padding:0;margin:0 0 0 auto;border:0;width:min(440px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;background:linear-gradient(180deg,#1b0b3a,#0c0a1a 30%,#07060f);color:var(--fg);box-shadow:-30px 0 80px -30px #000}
.menu::backdrop{background:rgba(3,2,8,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.menu[open]{animation:slide .28s ease-out}
@keyframes slide{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.sheet{padding:18px 18px calc(28px + env(safe-area-inset-bottom,0px));min-height:100%}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.m-sub{font-size:.875rem;color:var(--mist);margin-top:6px}
.m-close{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:rgba(255,255,255,.04);display:grid;place-items:center;cursor:pointer}
.m-close svg.i{width:22px;height:22px}
.m-status{display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-weight:600;font-size:.9375rem}
.m-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.m-actions a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);text-decoration:none;font-size:.875rem;font-weight:600}
.m-actions svg.i{color:var(--violet-3)}
.m-list{margin-top:14px;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.m-list li+li{border-top:1px solid var(--line)}
.m-list a{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 14px;text-decoration:none;font-weight:600;background:rgba(255,255,255,.02)}
.m-list a:hover{background:rgba(201,166,255,.08)}
.m-list a>span:nth-child(2),.m-more a>span{flex:1}
.sq{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(122,0,223,.35);color:#e9dcff}
.sq svg.i{width:18px;height:18px}
.ch{color:var(--mist-2);width:18px!important;height:18px!important}
.m-vip{margin-top:16px;padding:18px;border-radius:18px;background:linear-gradient(160deg,rgba(122,0,223,.35),rgba(37,87,232,.18));border:1px solid rgba(155,61,255,.45)}
.m-vip h2{font-size:1.5rem}
.m-vip>p{color:var(--mist);font-size:.9375rem;margin-top:6px}
.m-mail{margin-top:14px;padding:16px;border-radius:14px;background:rgba(4,3,10,.45);border:1px solid var(--line)}
.m-mail h3{font-size:1.125rem}
.m-vip>.btn{width:100%;margin-top:12px}
.m-cap{font:700 .78rem/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mist-2);margin-top:20px}
.m-more{margin-top:8px}
html.menu-on{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* r1: the Today tag's word is drawn by CSS (site.js only shows or hides it), so the page's text is the same with or without JavaScript. */
.tag[data-live]:not([hidden])::before{content:"Today"}

/* r9, CONTROL085 Amendment G (Mark: "Also the images. Work it out."). The rejected Films and Shop photos showed rooms and products that
   were made up. Films is now abstract projected light, and Shop a type graphic made only from this page's own Shop wording.
   Both are drawn here: no photo, room, seat, equipment or product. Motion is slow and gentle, never flashing, and the global
   reduced-motion rule above stops it. */
.art .frame{isolation:isolate}
.art-films .frame{background:radial-gradient(110% 80% at 86% -12%,rgba(122,0,223,.42),transparent 62%),linear-gradient(172deg,#130d2c 0%,#090716 58%,#07060f 100%)}
.art-films .beam{position:absolute;inset:0;mix-blend-mode:screen;transform-origin:86% -12%;filter:blur(3px)}
.art-films .b1{background:conic-gradient(from 180deg at 86% -12%,transparent 0 13deg,rgba(155,61,255,.62) 19deg,rgba(201,166,255,.34) 27deg,transparent 33deg);animation:beamA 11s ease-in-out infinite alternate}
.art-films .b2{background:conic-gradient(from 180deg at 86% -12%,transparent 0 25deg,rgba(111,155,255,.5) 31deg,rgba(37,87,232,.3) 38deg,transparent 44deg);animation:beamB 13s ease-in-out infinite alternate}
.art-films .b3{background:conic-gradient(from 180deg at 86% -12%,transparent 0 37deg,rgba(255,107,125,.42) 42deg,rgba(232,52,74,.24) 49deg,transparent 56deg);animation:beamA 15s ease-in-out -4s infinite alternate-reverse}
.art-films .pool{position:absolute;inset:0;mix-blend-mode:screen;background:radial-gradient(46% 34% at 26% 104%,rgba(155,61,255,.4),transparent 72%),radial-gradient(30% 24% at 52% 102%,rgba(111,155,255,.28),transparent 70%)}
.art-films .motes{position:absolute;inset:-8% 0 0;mix-blend-mode:screen;opacity:.75;
  background:radial-gradient(circle at 22% 62%,rgba(255,255,255,.85) 0 1.2px,transparent 2.4px),radial-gradient(circle at 38% 44%,rgba(255,255,255,.7) 0 1px,transparent 2px),
    radial-gradient(circle at 47% 70%,rgba(201,166,255,.8) 0 1.4px,transparent 2.6px),radial-gradient(circle at 58% 30%,rgba(255,255,255,.6) 0 1px,transparent 2px),
    radial-gradient(circle at 31% 82%,rgba(255,255,255,.7) 0 1.1px,transparent 2.2px),radial-gradient(circle at 66% 52%,rgba(111,155,255,.8) 0 1.2px,transparent 2.4px),
    radial-gradient(circle at 15% 90%,rgba(255,255,255,.6) 0 1px,transparent 2px),radial-gradient(circle at 52% 56%,rgba(255,255,255,.65) 0 .9px,transparent 1.8px),
    radial-gradient(circle at 72% 22%,rgba(255,107,125,.7) 0 1px,transparent 2px),radial-gradient(circle at 42% 90%,rgba(255,255,255,.55) 0 1px,transparent 2px);
  -webkit-mask-image:conic-gradient(from 180deg at 86% -12%,transparent 0 10deg,#000 18deg,#000 50deg,transparent 58deg);mask-image:conic-gradient(from 180deg at 86% -12%,transparent 0 10deg,#000 18deg,#000 50deg,transparent 58deg);
  animation:motes 18s linear infinite alternate}
@keyframes beamA{from{transform:rotate(-1.6deg);opacity:.86}to{transform:rotate(1.4deg);opacity:1}}
@keyframes beamB{from{transform:rotate(1.2deg);opacity:1}to{transform:rotate(-1.4deg);opacity:.84}}
@keyframes motes{from{transform:translate3d(0,0,0)}to{transform:translate3d(-2%,-6%,0)}}

.art-shop .frame{container-type:size;background:radial-gradient(90% 75% at 12% -8%,rgba(122,0,223,.6),transparent 64%),radial-gradient(70% 60% at 104% 108%,rgba(232,52,74,.38),transparent 70%),linear-gradient(160deg,#170e36,#07060f 78%)}
.art-shop .frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(201,166,255,.14) 46%,transparent 60%);background-size:260% 100%;animation:sheen 12s ease-in-out infinite alternate}
.shop-type{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:clamp(8px,3.2cqmin,20px);padding:clamp(18px,7cqmin,48px)}
.st-k{font:700 clamp(.7rem,3.4cqmin,1rem)/1 var(--display);letter-spacing:.34em;text-transform:uppercase;color:var(--violet-3)}
.st-big{font:800 clamp(2.4rem,min(21cqmin,16.5cqw),8.5rem)/.84 var(--display);text-transform:uppercase;letter-spacing:-.025em;background:linear-gradient(100deg,#fff 0%,var(--violet-3) 48%,var(--red-2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.st-list{display:flex;flex-wrap:wrap;gap:clamp(6px,1.6cqmin,10px)}
.st-list b{font:600 clamp(.72rem,3.1cqmin,.95rem)/1 var(--body);padding:.55em .95em;border-radius:999px;border:1px solid var(--line-2);background:rgba(7,6,15,.5);color:var(--fg);white-space:nowrap}
.st-new{font:700 clamp(.7rem,3cqmin,.9rem)/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--red-2)}
@keyframes sheen{from{background-position:100% 0}to{background-position:0 0}}
@media (max-width:899px){.art-shop .frame{aspect-ratio:4/3}}

/* r9, Amendment G: seven hours rows, each day on its own row, so Today marks exactly one day (Mark: "Fri and Sat doesn't match the
   singular TODAY"). From 380px every row stays on one line, Today included. Below that, every row stacks the same way, day then time,
   so a Today row never looks different from the rest. */
@media (max-width:430px){.times li{font-size:1rem;gap:8px}.times .tag{margin-left:6px;padding:2px 7px;font-size:.62rem}}
@media (max-width:379px){.times li{flex-direction:column;align-items:flex-start;gap:2px;padding:11px 0}}