/* Nightcap - cocktail bar and live music. Signature: NEON. Headings light up tube by tube and flicker now and then,
   every other block is found by a stage spotlight ([data-on]), and the page sinks into the night as you scroll (--deep, set by main.js).
   Colours and fonts: only the tokens in :root. */
:root {
  --night: #04060c;
  --dusk: #0d1638;
  --ink: #e8edf6;
  --muted: color-mix(in oklab, var(--ink) 62%, var(--night));
  --line: color-mix(in oklab, var(--ink) 16%, transparent);
  --neon: #3d7bff;
  --neon2: #ff6ad5;
  --f-head: "Monoton", system-ui, sans-serif;
  --f-body: "Manrope", system-ui, sans-serif;
  --f-mono: "DM Mono", ui-monospace, monospace;
  --w-head: 400;
  --ls-head: 0em;
  --hk: .68; /* heading size factor: Monoton is very wide, every heading size is multiplied by this */
  --pill: 999px;
  --gut: clamp(16px, 4vw, 56px);
  --deep: 0;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-width: 320px; overflow-x: hidden;
  background: color-mix(in oklab, var(--dusk), var(--night) calc(var(--deep) * 100%));
  color: var(--ink); font: 400 17px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, figure, blockquote, ol, ul, dl, dd { margin: 0; padding: 0; }
ol, ul { list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--neon); color: var(--night); }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--night); }
.skip:focus { top: 12px; }
:focus-visible { outline: 1px solid var(--neon2); outline-offset: 4px; }
.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gut); }
.wrap-wide { width: calc(100% - 2 * var(--gut)); max-width: 1680px; margin-inline: auto; }
.label { font: 400 12px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.sec { padding-block: clamp(80px, 11vw, 160px); }
.sec-label { color: var(--muted); margin-bottom: 18px; }
.sec-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head .sec-label { grid-column: 1 / -1; }
.sec-head .h2 { grid-column: 1 / 8; }
.sec-head .sec-note { grid-column: 9 / -1; max-width: 380px; }
.sec-foot { margin-top: clamp(32px, 4vw, 52px); }
.h1, .h2, .h3, .h4, .hero-sign, .missing-sign, .gauge-num { font-family: var(--f-head); font-weight: var(--w-head); letter-spacing: var(--ls-head); line-height: 1; }
.h1 { font-size: calc(clamp(56px, 10.5vw, 168px) * var(--hk, 1)); }
.h2 { font-size: calc(clamp(40px, 5.6vw, 88px) * var(--hk, 1)); line-height: 1.02; }
.h3 { font-size: calc(clamp(30px, 3.2vw, 48px) * var(--hk, 1)); }
.h4 { font-family: var(--f-body); font-weight: 600; letter-spacing: -.01em; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.2; margin-bottom: 10px; }
.lead { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; max-width: 640px; }

/* ---------- NEON: headings light up tube by tube ---------- */
[data-neon] {
  --core: color-mix(in oklab, var(--neon) 34%, #fff);
  --off: color-mix(in oklab, var(--neon) 18%, var(--night));
  --glow: 0 0 .02em #fff, 0 0 .08em var(--neon), 0 0 .24em var(--neon), 0 0 .6em color-mix(in oklab, var(--neon) 60%, transparent), 0 0 1.4em color-mix(in oklab, var(--neon) 30%, transparent);
  color: var(--core);
}
[data-neon] .w { display: inline-block; white-space: nowrap; }
[data-neon] .t { color: var(--core); text-shadow: var(--glow); }
.js [data-neon]:not(.lit) .t { color: var(--off); text-shadow: none; }
[data-neon].lit .t { animation: ignite .9s step-end backwards; animation-delay: var(--d, 0s); }
[data-neon] .t.blink { animation: blink .55s step-end; }
@keyframes ignite {
  0% { color: var(--off); text-shadow: none; }
  12% { color: var(--core); text-shadow: var(--glow); }
  18% { color: var(--off); text-shadow: none; }
  34% { color: var(--core); text-shadow: var(--glow); }
  41% { color: var(--off); text-shadow: none; }
  56%, 100% { color: var(--core); text-shadow: var(--glow); }
}
@keyframes blink {
  0% { color: var(--off); text-shadow: none; }
  18% { color: var(--core); text-shadow: var(--glow); }
  30% { color: var(--off); text-shadow: none; }
  52%, 100% { color: var(--core); text-shadow: var(--glow); }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* every other block is found by the stage spotlight: a circle of light opens on it from above */
@property --spot { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.js [data-on] { -webkit-mask-image: radial-gradient(circle at 50% -15%, #000 var(--spot), transparent calc(var(--spot) + 18%)); mask-image: radial-gradient(circle at 50% -15%, #000 var(--spot), transparent calc(var(--spot) + 18%)); }
.js [data-on].lit { --spot: 260%; animation: spot 1.1s cubic-bezier(.55, 0, .25, 1) backwards; animation-delay: var(--d, 0s); }
@keyframes spot { from { --spot: 0%; } to { --spot: 260%; } }
.js [data-on].lit.done { -webkit-mask-image: none; mask-image: none; } /* mask off once lit, so glows are never cut */
/* the hero glow keeps the electric stutter of the sign */
@keyframes power {
  0% { filter: brightness(.05); }
  14% { filter: brightness(1); }
  21% { filter: brightness(.12); }
  38% { filter: brightness(.95); }
  45% { filter: brightness(.3); }
  60%, 100% { filter: brightness(1); }
}

/* ---------- buttons: glass tubes ---------- */
.btn {
  --neon-b: var(--neon);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px;
  border-radius: var(--pill); border: 1px solid color-mix(in oklab, var(--neon-b) 45%, transparent);
  font: 500 15px/1 var(--f-body); white-space: nowrap; cursor: pointer; background: none;
  transition: border-color .2s, box-shadow .2s, background-color .2s, color .2s;
}
.btn-tube:hover, .btn-tube:focus-visible { border-color: color-mix(in oklab, var(--neon-b) 40%, #fff); box-shadow: 0 0 6px var(--neon-b), 0 0 18px color-mix(in oklab, var(--neon-b) 55%, transparent), inset 0 0 8px color-mix(in oklab, var(--neon-b) 45%, transparent); animation: tube .45s step-end; }
.btn-solid { background: var(--neon); border-color: var(--neon); color: var(--night); }
.btn-solid:hover, .btn-solid:focus-visible { background: color-mix(in oklab, var(--neon) 55%, #fff); box-shadow: 0 0 10px var(--neon), 0 0 28px color-mix(in oklab, var(--neon) 60%, transparent); animation: tube .45s step-end; }
@keyframes tube { 0% { box-shadow: none; } 25% { box-shadow: 0 0 10px var(--neon-b); } 40% { box-shadow: none; } }

/* ---------- header ---------- */
.head { position: fixed; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px var(--gut); transition: background-color .3s; }
.head.is-solid { background: color-mix(in oklab, var(--night) 82%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.logo { display: inline-flex; align-items: center; gap: 10px; font: var(--w-head) calc(24px * var(--hk, 1))/1 var(--f-head); color: color-mix(in oklab, var(--neon) 34%, #fff); text-shadow: 0 0 6px var(--neon), 0 0 16px color-mix(in oklab, var(--neon) 60%, transparent); }
.logo-mark { color: var(--neon2); filter: drop-shadow(0 0 4px var(--neon2)); }
.head-r { display: flex; align-items: center; gap: 10px; }
.head-cta { min-height: 42px; padding: 0 20px; font-size: 14px; }
.menu-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 18px; border: 1px solid var(--line); border-radius: var(--pill); background: color-mix(in oklab, var(--night) 40%, transparent); cursor: pointer; font-size: 14px; }
.menu-bars { display: grid; gap: 5px; width: 18px; }
.menu-bars i { display: block; height: 1.5px; background: currentColor; transition: transform .3s; }
.menu-open .menu-bars i:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-open .menu-bars i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.menu-open .head { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- menu ---------- */
.menu { position: fixed; inset: 0; z-index: 35; display: flex; flex-direction: column; justify-content: center; gap: 40px; padding: 110px var(--gut) 40px; background: var(--night); overflow-y: auto; }
.menu[hidden] { display: none; }
.menu-nav { display: grid; max-width: 1440px; width: 100%; margin-inline: auto; }
.menu-nav a { display: grid; grid-template-columns: 48px 1fr auto; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.menu-i { color: var(--muted); }
.menu-t { font: var(--w-head) calc(clamp(40px, 6.4vw, 96px) * var(--hk, 1))/1.04 var(--f-head); letter-spacing: var(--ls-head); }
.menu-n { color: var(--muted); text-align: right; }
.menu-nav a[aria-current] .menu-i { color: var(--neon2); }
.menu-foot { display: flex; flex-wrap: wrap; gap: 8px 32px; max-width: 1440px; width: 100%; margin-inline: auto; color: var(--muted); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; }
.hero-photo { position: absolute; inset: 0; z-index: -2; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.12) saturate(.6); }
.hero.lit .hero-photo img { filter: brightness(.46) saturate(1.05); animation: room 1.1s step-end backwards; animation-delay: .25s; }
@keyframes room { 0% { filter: brightness(.12) saturate(.6); } 18% { filter: brightness(.4); } 26% { filter: brightness(.14); } 44% { filter: brightness(.42); } 50% { filter: brightness(.18); } 64%, 100% { filter: brightness(.46) saturate(1.05); } }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, color-mix(in oklab, var(--night) 70%, transparent), transparent 30%, transparent 55%, var(--dusk)); }
.hero::after { content: ""; position: absolute; left: 50%; top: 42%; z-index: -1; width: min(120vw, 1400px); aspect-ratio: 2 / 1; translate: -50% -50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--neon) 34%, transparent), transparent); mix-blend-mode: screen; visibility: hidden; }
.hero.lit::after { visibility: visible; animation: power 1.1s step-end backwards; animation-delay: .25s; }
.hero-in { position: relative; display: grid; gap: 24px; padding-top: 120px; padding-bottom: clamp(40px, 6vw, 72px); }
.hero-kicker { color: color-mix(in oklab, var(--ink) 80%, transparent); }
.hero-sign { display: grid; justify-items: center; text-align: center; margin: clamp(10px, 4vh, 60px) 0 clamp(20px, 6vh, 80px); }
.sign-main { font-size: calc(clamp(66px, 18.5vw, 310px) * var(--hk, 1)); line-height: .9; }
.sign-script { --neon: var(--neon2); font: 400 clamp(30px, 4.4vw, 70px)/1 "Sacramento", cursive; letter-spacing: 0; rotate: -4deg; margin-top: -.15em; margin-left: 28%; }
.hero-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.hero-line { max-width: 440px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-down { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; display: grid; justify-items: center; gap: 8px; color: var(--muted); }

/* ---------- ticker ---------- */
.ticker { overflow: hidden; border-block: 1px solid var(--line); padding-block: 16px; }
.ticker-run { display: flex; width: max-content; animation: run 40s linear infinite; }
.ticker-run span { font: 400 13px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ticker-run i { width: 6px; height: 6px; margin: 3px 28px 0; border-radius: 50%; background: var(--neon2); box-shadow: 0 0 6px var(--neon2); flex: none; }
@keyframes run { to { transform: translateX(-50%); } }

/* ---------- photos ---------- */
.ph { position: relative; overflow: hidden; background: color-mix(in oklab, var(--ink) 6%, var(--night)); }
.ph img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- intro ---------- */
.intro { display: grid; grid-template-columns: repeat(12, 1fr); gap: 48px 24px; }
.intro-head { grid-column: 1 / 6; }
.intro-text { grid-column: 6 / -1; font-size: clamp(22px, 2.2vw, 34px); line-height: 1.3; }
.intro-photos { grid-column: 1 / 10; display: grid; grid-template-columns: 5fr 1fr 3fr; align-items: start; }
.ph-tall { grid-column: 1; aspect-ratio: 4 / 5; }
.ph-small { grid-column: 3; aspect-ratio: 3 / 4; margin-top: 38%; }
.intro-side { grid-column: 10 / -1; align-self: end; display: grid; gap: 18px; }
.intro-sign { color: var(--neon2); }

/* ---------- nights list (programme rows) ---------- */
.nights { border-top: 1px solid var(--line); }
.night a { position: relative; display: grid; grid-template-columns: 140px 1fr auto 40px; align-items: center; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.night-date { display: grid; gap: 6px; }
.night-date b { font: var(--w-head) calc(64px * var(--hk, 1))/.9 var(--f-head); color: var(--ink); transition: color .2s; }
.night-date .label { color: var(--muted); }
.night-act { display: grid; gap: 6px; }
.night-name { font: var(--w-head) calc(clamp(26px, 2.8vw, 40px) * var(--hk, 1))/1.05 var(--f-head); letter-spacing: var(--ls-head); }
.night-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; color: var(--muted); max-width: 320px; }
.night-meta span:first-child { color: var(--neon2); }
.night-arrow { justify-self: end; transition: translate .3s; }
.night-run { position: absolute; inset: 0; z-index: -1; display: flex; align-items: center; gap: .6em; width: max-content; font: var(--w-head) calc(120px * var(--hk, 1))/1 var(--f-head); white-space: nowrap; color: transparent; -webkit-text-stroke: 1px color-mix(in oklab, var(--neon) 45%, transparent); visibility: hidden; animation: run 14s linear infinite paused; }
@media (hover: hover) {
  .night a:hover .night-run { visibility: visible; animation-play-state: running; }
  .night a:hover .night-date b { color: color-mix(in oklab, var(--neon) 34%, #fff); text-shadow: 0 0 .03em #fff, 0 0 .12em var(--neon), 0 0 .4em var(--neon); animation: blink .5s step-end; }
  .night a:hover .night-arrow { translate: 6px 0; }
}
.night.is-hidden { display: none; }
/* meta = one ticket stub: punched notches left/right, dashed tear lines between fields */
.night-meta { --notch: 7px; flex-wrap: nowrap; gap: 0; padding: 0; max-width: none; justify-self: end; background: color-mix(in oklab, var(--ink) 7%, transparent); color: var(--ink);
  -webkit-mask: radial-gradient(circle var(--notch) at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle var(--notch) at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat;
  transition: background-color .25s; }
.night-meta span { padding: 11px 14px; white-space: nowrap; }
.night-meta span:first-child { padding-left: 20px; }
.night-meta span:last-child { padding-right: 20px; }
.night-meta span + span { border-left: 1px dashed color-mix(in oklab, var(--ink) 30%, transparent); }
@media (hover: hover) { .night a:hover .night-meta { background: color-mix(in oklab, var(--neon) 16%, transparent); } }

/* ---------- levels (the descent) ---------- */
.levels-head { margin-bottom: clamp(36px, 5vw, 72px); }
.levels-body { display: grid; grid-template-columns: 4fr 8fr; gap: 24px; }
.levels-gauge { position: sticky; top: 22vh; align-self: start; display: grid; gap: 10px; }
.gauge-label { color: var(--muted); }
.gauge-num { font-size: calc(clamp(120px, 16vw, 260px) * var(--hk, 1)); line-height: .85; }
.levels-list { display: grid; gap: clamp(80px, 10vw, 160px); }
.level { display: grid; grid-template-columns: 7fr 5fr; gap: 24px; align-items: end; }
.level-ph { aspect-ratio: 4 / 5; }
.level:nth-child(even) .level-ph { order: 2; }
.level-text { display: grid; gap: 14px; padding-bottom: 8px; }
.level-code { color: var(--neon2); display: flex; gap: 14px; }
.level-code span { color: var(--muted); }

/* ---------- drinks on home ---------- */
.glasses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 24px; }
.glass .ph { aspect-ratio: 3 / 4; margin-bottom: 18px; }
.glass-name { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: var(--w-head) calc(26px * var(--hk, 1))/1.1 var(--f-head); margin-bottom: 6px; }
.glass-name .label { color: var(--neon2); }
.glass-notes { font-size: 15px; }

/* ---------- quotes ---------- */
.quote-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.quote { display: grid; gap: 22px; align-content: start; padding-top: 28px; border-top: 1px solid var(--line); }
.quote blockquote { margin: 0; font: 500 clamp(22px, 2vw, 30px)/1.3 var(--f-body); letter-spacing: -.01em; }

/* ---------- hire band ---------- */
.band { display: grid; grid-template-columns: 7fr 5fr; gap: 24px clamp(24px, 5vw, 80px); align-items: center; }
.band-ph { aspect-ratio: 5 / 4; }
.band-text { display: grid; gap: 22px; justify-items: start; }

/* ---------- find / hours ---------- */
.find-head { display: grid; gap: 16px; max-width: 760px; margin-bottom: 48px; }
.find-cols { display: grid; grid-template-columns: 7fr 5fr; gap: 40px 24px; align-items: start; }
.hours { border-top: 1px solid var(--line); }
.hours div { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.hours dd { color: var(--muted); text-align: right; }
.find-addr { display: grid; gap: 10px; justify-items: start; font-size: 19px; }
.find-addr .btn { margin-top: 14px; }
.map { margin-top: 48px; aspect-ratio: 16 / 6; border: 1px solid var(--line); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: invert(.92) hue-rotate(180deg) grayscale(.7) contrast(.9); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding-top: clamp(64px, 8vw, 110px); background: var(--night); }
.foot-top { display: grid; grid-template-columns: 5fr 7fr; gap: 56px 24px; padding-bottom: 64px; }
.foot-lead { display: grid; gap: 22px; justify-items: start; align-content: start; }
.foot-mark { color: var(--neon); filter: drop-shadow(0 0 4px var(--neon)) drop-shadow(0 0 12px var(--neon)); }
.foot-line { font: 500 clamp(22px, 2.2vw, 30px)/1.25 var(--f-body); letter-spacing: -.01em; max-width: 420px; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
.foot-cols p, .foot-cols a { display: block; margin-bottom: 6px; font-size: 15px; }
.foot-cols .label { margin-bottom: 14px; }
.foot-cols a:hover { color: var(--neon2); }
.foot-hour { display: grid !important; gap: 0; }
.foot-hour span:last-child { color: var(--muted); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 24px 120px; border-top: 1px solid var(--line); }

/* ---------- dock: tonight + book + back to top ---------- */
.dock { position: fixed; right: var(--gut); bottom: 18px; z-index: 30; display: flex; align-items: stretch; max-width: calc(100% - 2 * var(--gut)); border: 1px solid var(--line); border-radius: var(--pill); background: color-mix(in oklab, var(--night) 85%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); visibility: hidden; }
.dock.show { visibility: visible; animation: power .6s step-end; }
.dock a { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
.dock-night { min-width: 0; padding-left: 18px !important; }
.dock-night b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.dock-night .label { color: var(--muted); }
.dock-time { color: var(--neon2) !important; }
.dock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 6px var(--neon), 0 0 14px var(--neon); flex: none; animation: hum 3.2s step-end infinite; }
@keyframes hum { 0%, 86%, 92% { opacity: 1; } 88%, 95% { opacity: .2; } }
.dock-book { border-left: 1px solid var(--line); color: color-mix(in oklab, var(--neon) 34%, #fff); }
.dock-book:hover { text-shadow: 0 0 8px var(--neon); }
.to-top { border-left: 1px solid var(--line); padding: 0 16px 0 14px !important; }
.to-top:hover { color: var(--neon2); }

/* ---------- inner page head ---------- */
/* inner pages: one screen, the photo is the room behind the heading and lights up with it */
.page-hero-in { gap: 22px; padding-bottom: clamp(56px, 8vw, 110px); }
.page-hero .sec-label { margin: 0; }
.page-hero-in { padding-bottom: clamp(84px, 11vh, 130px); }
.page-sign { display: grid; justify-items: start; }
.page-hero .h1 { max-width: 15ch; }
.page-script { margin: -.1em 0 0 clamp(24px, 14vw, 260px); }
.page-hero-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; margin-top: clamp(8px, 2vh, 24px); }
.page-hero-side { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.page-facts { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line); border-radius: var(--pill); background: color-mix(in oklab, var(--night) 55%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.page-facts li { padding: 12px 18px; white-space: nowrap; }
.page-facts li + li { border-left: 1px solid var(--line); }
.page-facts li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--neon2); box-shadow: 0 0 6px var(--neon2); vertical-align: 1px; }
.page-hero .lead, .page-hero .sec-label { text-shadow: 0 0 12px color-mix(in oklab, var(--night) 85%, transparent), 0 0 2px color-mix(in oklab, var(--night) 70%, transparent); }

/* ---------- filters, chips ---------- */
.filters, .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filters { margin-bottom: 32px; }
.chip { --neon-b: var(--neon2); position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--pill); background: none; font-size: 14px; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.chip:hover { border-color: color-mix(in oklab, var(--neon-b) 60%, transparent); }
.chip.is-on, .chip:has(input:checked) { border-color: color-mix(in oklab, var(--neon-b) 50%, #fff); box-shadow: 0 0 6px var(--neon-b), inset 0 0 6px color-mix(in oklab, var(--neon-b) 50%, transparent); }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip:has(input:focus-visible) { outline: 1px solid var(--neon2); outline-offset: 3px; }
.chip b { font-weight: 500; color: var(--neon2); margin-right: 6px; }

/* ---------- cards, steps ---------- */
.cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.card { display: grid; gap: 10px; align-content: start; padding: 28px 0 0; border-top: 1px solid var(--line); }
.card .label { color: var(--neon2); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.steps4 { grid-template-columns: repeat(4, 1fr); }
.steps li { display: grid; gap: 10px; align-content: start; padding-top: 24px; border-top: 1px solid var(--line); }
.step-i { color: var(--neon2); margin-bottom: 10px; }

/* ---------- night page ---------- */
.gig-head { display: grid; grid-template-columns: 6fr 6fr; gap: 40px clamp(24px, 4vw, 64px); align-items: end; padding-top: clamp(120px, 14vw, 180px); }
.gig-text { display: grid; gap: 26px; justify-items: start; }
.gig-text .sec-label { margin: 0; }
.gig-text .sec-label a:hover { color: var(--neon2); }
.gig-text .h1 { font-size: calc(clamp(52px, 7.4vw, 120px) * var(--hk, 1)); }
.gig-ph { aspect-ratio: 4 / 5; }
.facts { display: grid; grid-template-columns: repeat(5, auto); gap: 18px 28px; padding: 20px 0; border-block: 1px solid var(--line); width: 100%; }
.facts dt { font: 400 12px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.facts dd { font-size: 19px; }
.facts .facts-date { font: var(--w-head) calc(44px * var(--hk, 1))/.9 var(--f-head); color: var(--neon2); }
.gig-body { display: grid; grid-template-columns: 7fr 1fr 4fr; gap: 40px 24px; }
.gig-about { grid-column: 1; display: grid; gap: 22px; }
.gig-p { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; }
.gig-lineup { grid-column: 3; }
.gig-lineup li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.gig-lineup li:first-child { border-top: 1px solid var(--line); }
.next-night { padding-top: 0; }
.next { display: grid; grid-template-columns: 4fr 8fr; gap: 24px clamp(24px, 4vw, 64px); align-items: center; padding-top: 48px; border-top: 1px solid var(--line); }
.next-ph { aspect-ratio: 4 / 3; }
.next-text { display: grid; gap: 18px; }
.next-text .label:first-child { color: var(--muted); }

/* ---------- drinks page ---------- */
.list-sec { display: grid; grid-template-columns: 4fr 1fr 7fr; gap: 32px 24px; padding-block: clamp(56px, 7vw, 110px); }
.list-sec + .list-sec { border-top: 1px solid var(--line); }
.list-head { grid-column: 1; display: grid; gap: 16px; align-content: start; }
.list-head .sec-label { margin: 0; color: var(--neon2); }
.menu-list { grid-column: 3; display: grid; gap: 4px; }
.item { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 4px 12px; padding: 16px 0; }
.item-name { font: var(--w-head) calc(clamp(22px, 2vw, 30px) * var(--hk, 1))/1.1 var(--f-head); }
.item-dots { border-bottom: 1px dotted color-mix(in oklab, var(--ink) 30%, transparent); transform: translateY(-5px); }
.item-price { font: 400 15px/1 var(--f-mono); color: var(--neon2); }
.item-notes { grid-column: 1 / -1; font-size: 15px; }
.pours { padding-top: 0; }
.pour-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-bottom: 40px; }
.pour .ph { aspect-ratio: 3 / 4; margin-bottom: 10px; }
.pour .label { color: var(--muted); }

/* ---------- hire ---------- */
.rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 24px; }
.room { display: grid; gap: 14px; align-content: start; }
.room-ph { aspect-ratio: 4 / 5; margin-bottom: 8px; }
.room .level-code { color: var(--neon2); }
.room-facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 24px; padding-top: 14px; border-top: 1px solid var(--line); }
.room-facts dt { font: 400 11px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.room-facts dd { font-size: 18px; }
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pack-price { color: var(--neon2); margin-top: 8px; }
.packs-sec { padding-top: 0; }

/* ---------- forms ---------- */
.form-sec { display: grid; grid-template-columns: 4fr 1fr 7fr; gap: 32px 24px; }
.form-head { grid-column: 1; display: grid; gap: 16px; align-content: start; }
.form-head .sec-label { margin: 0; }
.form { grid-column: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
.field { display: grid; gap: 10px; min-width: 0; border: 0; padding: 0; margin: 0; }
.field-wide { grid-column: 1 / -1; }
.field > label, .field-l { font: 400 12px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0; }
.req { display: inline-block; width: 5px; height: 5px; margin-left: 6px; border-radius: 50%; background: var(--neon); vertical-align: middle; }
.field input, .field textarea { width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; font-size: 18px; resize: vertical; transition: border-color .2s; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--neon2); box-shadow: 0 1px 0 var(--neon2); }
.field textarea::placeholder { color: color-mix(in oklab, var(--ink) 35%, transparent); }
.field.is-bad input { border-color: var(--neon); }
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: none; cursor: pointer; font-size: 18px; }
.stepper button:hover { border-color: var(--neon2); box-shadow: 0 0 6px var(--neon2); }
.stepper output { min-width: 56px; text-align: center; font: var(--w-head) calc(30px * var(--hk, 1))/1 var(--f-head); }
.form-foot { display: grid; gap: 14px; justify-items: start; }
.form-msg { min-height: 1.5em; color: var(--neon2); }

/* ---------- faq ---------- */
.faq { border-top: 1px solid var(--line); max-width: 980px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; font: 600 clamp(18px, 1.5vw, 21px)/1.3 var(--f-body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; width: 14px; height: 14px; flex: none; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; inset: 6.5px 0 auto; height: 1px; background: currentColor; }
.faq summary i::after { rotate: 90deg; transition: rotate .25s; }
.faq details[open] summary i::after { rotate: 0deg; }
.faq details[open] summary { color: color-mix(in oklab, var(--neon2) 50%, #fff); }
.faq details p { padding: 0 0 24px; max-width: 720px; }

/* ---------- 404 ---------- */
.missing { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 22px; text-align: center; padding-top: 120px; padding-bottom: 80px; }
.missing-sign { font-size: calc(clamp(64px, 14vw, 220px) * var(--hk, 1)); margin-bottom: 20px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .cards4, .steps4 { grid-template-columns: repeat(2, 1fr); }
  .night a { grid-template-columns: 110px 1fr 32px; }
  .night-meta { grid-column: 2; grid-row: 2; justify-content: flex-start; max-width: none; justify-self: start; }
  .night-arrow { grid-column: 3; grid-row: 1 / 3; }
  .pour-grid { grid-template-columns: repeat(3, 1fr); }
  .facts { grid-template-columns: repeat(3, auto); }
}
@media (max-width: 809px) {
  body { font-size: 16px; }
  .head-cta { display: none; }
  .sec-head .h2, .sec-head .sec-note { grid-column: 1 / -1; }
  .sec-head .sec-note { margin-top: 18px; }
  .intro { grid-template-columns: 1fr; gap: 32px; }
  .intro-head, .intro-text, .intro-photos, .intro-side { grid-column: 1; }
  .intro-photos { grid-template-columns: 6fr 1fr 4fr; }
  .night a { grid-template-columns: 76px 1fr; gap: 10px 16px; padding: 22px 0; }
  .night-date b { font-size: 44px; }
  .night-arrow { display: none; }
  .levels-body { grid-template-columns: 1fr; }
  .levels-gauge { display: none; }
  .level { grid-template-columns: 1fr; }
  .level:nth-child(even) .level-ph { order: 0; }
  .glasses { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
  .quote-list, .band, .find-cols, .foot-top, .rooms, .packs, .steps, .gig-head, .next { grid-template-columns: 1fr; }
  .cards4, .steps4 { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .gig-body, .list-sec, .form-sec { grid-template-columns: 1fr; }
  .gig-about, .gig-lineup, .list-head, .menu-list, .form-head, .form { grid-column: 1; }
  .form { grid-template-columns: 1fr; }
  .map { aspect-ratio: 4 / 3; }
  .menu-nav a { grid-template-columns: 34px 1fr; }
  .menu-n { grid-column: 2; text-align: left; }
  .sign-script { margin-left: 0; font-size: clamp(26px, 7.6vw, 40px); }
  .hero-down { display: none; }
  .page-hero-in { padding-bottom: 40px; }
  .page-hero .h1 { font-size: calc(min(15.5vw, 64px) * var(--hk, 1)); }
  .page-script { margin-left: 18vw; }
  .page-hero-side { width: 100%; }
  .page-facts { flex-direction: column; width: 100%; border-radius: 14px; }
  .page-facts li { padding: 10px 16px; white-space: normal; }
  .page-facts li + li { border-left: 0; border-top: 1px solid var(--line); }
  .dock-night .label:not(.dock-time) { display: none; }
}
@media (max-width: 600px) {
  .night-meta { grid-column: 1 / -1; justify-self: start; }
  .night-meta span { padding: 9px 10px; }
  .night-meta span:first-child { padding-left: 15px; }
  .night-meta span:last-child { padding-right: 15px; }
  .glass-name { font-size: 21px; }
  .foot-cols { grid-template-columns: 1fr; }
  .dock { left: 12px; right: 12px; max-width: none; bottom: 12px; }
  .dock-night { flex: 1; }
  .dock a { padding: 0 12px; }
  .facts { grid-template-columns: repeat(2, auto); }
  .pour-grid { grid-template-columns: repeat(2, 1fr); }
  .item { grid-template-columns: 1fr auto; }
  .item-dots { display: none; }
}
@media (max-width: 400px) {
  .night-meta { font-size: 10.5px; letter-spacing: .06em; }
  .night-meta span { padding: 8px 7px; }
  .night-meta span:first-child { padding-left: 13px; }
  .night-meta span:last-child { padding-right: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-on] { -webkit-mask-image: none; mask-image: none; }
  .js [data-neon]:not(.lit) .t { color: var(--core); text-shadow: var(--glow); }
  .hero-photo img { filter: brightness(.46); }
  .hero::after { visibility: visible; }
}