/* ==========================================================================
   YUME-Karaoke — stylesheet
   --------------------------------------------------------------------------
   Structure
     01  Tokens
     02  Reset & base
     03  Typography helpers
     04  Layout primitives
     05  Buttons
     06  Backdrop (grain, glow, hexagons)
     07  Announcement bar
     08  Header & navigation
     09  Hero
     10  Marquee
     11  About
     12  Occasions
     13  Rooms
     14  Prices
     15  Karaoke system
     16  Bar & menu
     17  Gift cards
     18  Visit — hours, travel, map
     19  Contact
     20  FAQ
     21  Legal
     22  Footer
     23  Utilities, motion & print
   ========================================================================== */

@import url('fonts.css?v=20');

/* ============================================================== 01 TOKENS */
:root {
  /* --- brand ------------------------------------------------------- */
  --neon-magenta:   #FF3FFF;
  --neon-magenta-2: #EA76EA;
  --neon-cyan:      #27E1EE;
  --neon-cyan-2:    #AFF8FF;
  --neon-violet:    #A855F7;
  --neon-blue:      #5AA9FF;
  --neon-lime:      #B6FF3D;
  --neon-amber:     #FFB44F;
  --alert:          #FF6B6B;

  --brand-gradient: linear-gradient(115deg, var(--neon-cyan) 0%, #7C6BFF 48%, var(--neon-magenta) 100%);

  /* --- surfaces ---------------------------------------------------- */
  --ink:        #05040A;
  --ink-2:      #0B0817;
  --ink-3:      #120C24;
  --line:       rgba(255, 255, 255, .12);
  --line-soft:  rgba(255, 255, 255, .07);

  /* --- text -------------------------------------------------------- */
  --text:       #F4F1FA;
  --text-muted: #A79FBE;
  --text-dim:   #7C7395;

  /* --- type -------------------------------------------------------- */
  --font-display: 'Oswald', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --font-body:    'Barlow Semi Condensed', 'Segoe UI', system-ui, sans-serif;

  --step--1: clamp(.82rem, .78rem + .18vw, .92rem);
  --step-0:  clamp(1rem, .95rem + .25vw, 1.14rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3.2rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 5rem);
  --step-5:  clamp(3.2rem, 2rem + 6vw, 8rem);

  /* --- space & shape ----------------------------------------------- */
  /* Gutter grows to clear the notch in landscape; unchanged in portrait,
     where the side insets are 0. Needed because viewport-fit=cover lets
     content reach the physical screen edge. */
  --gutter-base: clamp(1.15rem, .8rem + 2vw, 2.5rem);
  --gutter: max(var(--gutter-base), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  /* Clearance for the home indicator / Safari's floating bottom toolbar. */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --section: clamp(4.5rem, 3rem + 7vw, 9rem);
  --measure: 62ch;
  --max:     1280px;
  --max-wide: 1560px;

  --radius:    14px;
  --radius-lg: 22px;

  /* Header + brand lockup. Bumped at the 1280px desktop breakpoint. */
  --header-h:        66px;
  --brand-mark:      38px;
  --brand-name-size: 1rem;     /* wordmark HEIGHT (16px), not a font size */
  --brand-sub-size:  .9rem;    /* ~14.4px — ~0.68 of the wordmark */
  --brand-tube-stroke: 1px;

  --ease: cubic-bezier(.22, .8, .3, 1);
}

/* ======================================================= 02 RESET & BASE */
*, *::before, *::after { box-sizing: border-box; }

/* Horizontal overflow containment.
   Several elements bleed past the viewport on purpose — the neon hexagons sit
   at negative offsets, the marquee track is far wider than the screen. On
   desktop, `overflow-x: hidden` on <body> alone was enough, because the body's
   overflow propagates to the viewport while <html> is `visible`. iOS Safari
   does not honour that reliably, which is why the page scrolled sideways there
   and nowhere else.
   `clip` rather than `hidden` on purpose: `hidden` would turn <html> into a
   scroll container and break the sticky header. `clip` contains without that
   side effect. The `hidden` line above it is the fallback for Safari < 16. */
html, body {
  overflow-x: hidden;
  overflow-x: clip;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  font-weight: 400;
  /* overflow-x is set on html+body together above — see the note there. */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
/* Photos get a placeholder tint while they load; transparent brand art must not. */
img:not([src$=".svg"]):not(.no-bg) { background-color: var(--ink-2); }

a { color: inherit; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: .22em; }
a:hover { text-decoration-color: currentColor; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--neon-magenta); color: #fff; }

hr { border: 0; border-top: 1px solid var(--line-soft); margin: 0; }

/* ================================================ 03 TYPOGRAPHY HELPERS */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.005em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--neon-cyan);
  margin: 0 0 1rem;
}
.kicker::before {
  content: '';
  width: 2.2rem;
  height: 2px;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.section-title { font-size: var(--step-3); margin-bottom: .5em; }
.section-lead {
  color: var(--text-muted);
  font-size: var(--step-1);
  max-width: var(--measure);
  line-height: 1.5;
}

/* Neon tube treatment. Kept restrained — glow on headlines only, never body. */
.neon {
  color: #fff;
  text-shadow:
    0 0 4px  rgba(255,255,255,.65),
    0 0 14px var(--glow, var(--neon-magenta)),
    0 0 42px var(--glow, var(--neon-magenta));
}
.neon-cyan    { --glow: var(--neon-cyan); }
.neon-magenta { --glow: var(--neon-magenta); }

.gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ================================================ 04 LAYOUT PRIMITIVES */
.wrap {
  width: min(100% - (var(--gutter) * 2), var(--max));
  margin-inline: auto;
}
.wrap--wide { width: min(100% - (var(--gutter) * 2), var(--max-wide)); }

.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: calc(var(--section) * .6); }

.section-head { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }

.grid { display: grid; gap: clamp(1rem, .6rem + 1.6vw, 2rem); }

/* ========================================================== 05 BUTTONS */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-border: var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .78em 1.6em;
  min-height: 48px;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 999px;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-fg: #14001A;
  --btn-border: transparent;
  /* Sized to the border box by the "gradient edge correction" rule near the
     end of this file — without it the 1px transparent border below makes the
     gradient tile, bleeding magenta onto the left edge and cyan onto the right. */
  background: var(--brand-gradient);
  box-shadow: 0 6px 26px -8px rgba(255,63,255,.75), 0 0 0 0 rgba(255,63,255,.4);
  font-weight: 700;
}
.btn--primary:hover { box-shadow: 0 10px 34px -6px rgba(255,63,255,.95); }

.btn--ghost { --btn-border: rgba(255,255,255,.28); }
.btn--ghost:hover {
  --btn-border: var(--neon-cyan);
  box-shadow: 0 0 24px -6px var(--neon-cyan);
}

.btn--accent {
  --btn-fg: var(--accent, var(--neon-cyan));
  --btn-border: color-mix(in srgb, var(--accent, var(--neon-cyan)) 55%, transparent);
  background: color-mix(in srgb, var(--accent, var(--neon-cyan)) 10%, transparent);
}
.btn--accent:hover {
  --btn-border: var(--accent, var(--neon-cyan));
  box-shadow: 0 0 26px -8px var(--accent, var(--neon-cyan));
}

.btn--sm { padding: .55em 1.1em; min-height: 40px; font-size: var(--step--1); }
.btn--block { width: 100%; }

/* Vector arrow rather than the "→" character. The glyph is centred on the
   font's math axis, which sits ~0.15em below the optical centre of uppercase
   text, so it always looked low — and any CSS nudge to correct it would be
   wrong the moment the font fell back. An SVG with a symmetric viewBox is
   centred by `align-items: center` exactly, in every font situation. */
.btn .arrow {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  transition: transform .25s var(--ease);
}
.btn:hover .arrow { transform: translateX(3px); }

/* ========================================================= 06 BACKDROP */
/* Deep-space wash + film grain. Purely decorative, sits behind everything. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  /* The grain layer below is inset by -50%, i.e. half a viewport past every
     edge. Contain it here rather than letting it reach the page box. */
  overflow: hidden;
  background:
    radial-gradient(1100px 700px at 12% -8%,  rgba(39,225,238,.16), transparent 62%),
    radial-gradient(1000px 800px at 92% 6%,   rgba(255,63,255,.16),  transparent 60%),
    radial-gradient(1200px 900px at 50% 108%, rgba(124,107,255,.14), transparent 60%),
    var(--ink);
}
.backdrop::after {
  content: '';
  position: absolute;
  inset: -50%;
  opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Decorative neon hexagons scattered per section */
.hex {
  position: absolute;
  pointer-events: none;
  z-index: -1;
  opacity: .55;
  /* The double drop-shadow is what makes the outline read as a lit neon tube
     rather than a flat stroke. Two passes: tight core, wide bloom. */
  filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 26px currentColor);
}
.hex svg { width: 100%; height: auto; overflow: visible; }
.hex path { fill: none; stroke-width: 2.5; }

/* ================================================ 07 ANNOUNCEMENT BAR */
/* Announcement bar. Deliberately loud: the owner's feedback on the first
   version was that it was small and easy to miss. It now runs at body size
   with a glowing icon, a saturated tinted background and a lit bottom edge,
   and each seasonal look re-tints it via --notice-* below. */
.notice {
  --notice-c:   var(--neon-magenta);
  --notice-c2:  var(--alert);
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem var(--gutter);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--notice-c2) 26%, var(--ink-2)),
      color-mix(in srgb, var(--notice-c)  22%, var(--ink-2)));
  border-bottom: 2px solid color-mix(in srgb, var(--notice-c) 70%, transparent);
  box-shadow: 0 6px 30px -12px var(--notice-c);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
}
.notice[hidden] { display: none; }
.notice__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: #14001A;
  background: var(--notice-c);
  box-shadow: 0 0 14px var(--notice-c), 0 0 30px color-mix(in srgb, var(--notice-c) 60%, transparent);
  animation: noticepulse 2.6s var(--ease) infinite;
}
@keyframes noticepulse {
  0%, 100% { box-shadow: 0 0 10px var(--notice-c), 0 0 22px color-mix(in srgb, var(--notice-c) 50%, transparent); }
  50%      { box-shadow: 0 0 18px var(--notice-c), 0 0 40px color-mix(in srgb, var(--notice-c) 75%, transparent); }
}
.notice__text { flex: 1 1 auto; margin: 0; text-wrap: pretty; }
.notice__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: inherit;
  cursor: pointer;
  border-radius: 10px;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.notice__close:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); }

/* Season tints for the bar */
[data-look="halloween"] .notice { --notice-c: #FF7A1A; --notice-c2: #A855F7; }
[data-look="nye"]       .notice { --notice-c: #FFD24A; --notice-c2: var(--neon-magenta); }
[data-look="summer"]    .notice { --notice-c: var(--neon-cyan); --notice-c2: #5AA9FF; }

/* ============================================ 08 HEADER & NAVIGATION */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(5, 4, 10, .72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.header.is-scrolled {
  background: rgba(5, 4, 10, .92);
  border-bottom-color: var(--line);
}

.header__inner {
  width: min(100% - (var(--gutter) * 2), var(--max-wide));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  flex: none;
  margin-right: auto;
}
/* Direct child only — the wordmark is an <img> too, nested in .brand__lockup,
   and a plain `.brand img` selector squashed it into a 38px square. */
.brand > img {
  width: var(--brand-mark);
  height: var(--brand-mark);
  object-fit: contain;
  background: none;
  /* A little bloom so the mark holds its own against the neon behind it. */
  filter: drop-shadow(0 0 10px rgba(255,63,255,.35));
}
/* Stacked on phones, side-by-side from 1080px up — a wide nav suits a
   horizontal lockup, and a narrow one does not, so the lockup changes rather
   than being squeezed. */
.brand__lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3em;
}

/* The real YUME letterforms, lifted from the master logo rather than set in
   Oswald. Sized by height; the width follows the artwork's 4.608:1 aspect. */
.brand__name {
  height: var(--brand-name-size);
  width: auto;
  flex: none;
}

/* Hairline separating the wordmark from the descriptor. Horizontal lockup only. */
.brand__rule {
  display: none;
  width: 1px;
  height: 1.9em;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.4), transparent);
}

/* "Karaoke Box" as neon tubing: hollow letterforms with a lit core, echoing
   the sign on the old site. Tested down to 11px — the outline stays crisper
   at small sizes than solid text with a heavy glow, which blooms into mush. */
.brand__sub {
  display: block;
  font-family: var(--font-display);
  font-size: var(--brand-sub-size);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  /* Fallback for anything without text-stroke: solid, still lit, never invisible. */
  color: #CFF7FB;
  text-shadow: 0 0 5px rgba(39,225,238,.9), 0 0 13px rgba(39,225,238,.5);
}
.brand__sub > span {
  color: #FFD6FF;
  text-shadow: 0 0 5px rgba(255,63,255,.9), 0 0 13px rgba(255,63,255,.5);
}

/* Only hollow the letters out where the stroke can actually be drawn —
   otherwise `color: transparent` would erase the words entirely. */
@supports (-webkit-text-stroke: 1px red) {
  .brand__sub {
    color: transparent;
    /* Stroke scales with the type — a fixed 1px reads as a hairline once the
       letters get bigger, which stops looking like a glass tube. */
    -webkit-text-stroke: var(--brand-tube-stroke) #6FE9F5;
  }
  .brand__sub > span {
    color: transparent;
    -webkit-text-stroke-color: #FF7BFF;
  }
}

.nav { display: none; }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(.6rem, .1rem + .9vw, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  display: block;
  padding: .4rem .1rem;
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
  position: relative;
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--neon-cyan);
  box-shadow: 0 0 10px var(--neon-cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav__link:hover,
.nav__link.is-active { color: var(--text); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: .5rem; flex: none; }

.lang {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
/* Anchors rather than buttons — each language is a separate page. */
.lang__btn {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  padding: .42rem .72rem;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--text-dim);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.lang__btn[aria-current="true"] {
  background: rgba(255,255,255,.12);
  color: var(--text);
  cursor: default;
}
.lang__btn:hover { color: var(--text); }

.header__cta { display: none; }

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.burger span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  align-content: start;
  gap: .25rem;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
  background: rgba(5,4,10,.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer a {
  padding: .8rem 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text);
}
.drawer a:hover { color: var(--neon-cyan); }
.drawer .btn { margin-top: 1.5rem; }

/* ============================================================= 09 HERO */
.hero {
  position: relative;
  min-height: min(94svh, 900px);
  display: grid;
  align-items: center;
  padding-block: clamp(3rem, 2rem + 6vw, 7rem);
  overflow: hidden;
}

.hero__inner {
  width: min(100% - (var(--gutter) * 2), var(--max));
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

.hero__logo {
  width: clamp(84px, 11vw, 132px);
  margin-bottom: clamp(1.2rem, 1rem + 1vw, 2rem);
  filter: drop-shadow(0 0 26px rgba(255,63,255,.55)) drop-shadow(0 0 46px rgba(39,225,238,.35));
  animation: float 7s var(--ease) infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .38rem .9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.4rem;
}
.hero__eyebrow .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--neon-lime);
  box-shadow: 0 0 10px var(--neon-lime);
}

.hero__title {
  font-size: var(--step-5);
  line-height: .88;
  letter-spacing: -.02em;
  margin-bottom: clamp(1.2rem, 1rem + 1vw, 1.8rem);
}
.hero__title span { display: block; }
.hero__title .l2 { padding-left: clamp(0px, 4vw, 3.5rem); }
.hero__title .l3 { padding-left: clamp(0px, 8vw, 7rem); }

.hero__lead {
  max-width: 54ch;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: clamp(2.5rem, 2rem + 3vw, 4rem); }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 760px;
}
.hero__stat { background: rgba(11,8,23,.72); padding: 1.1rem 1.2rem; }
.hero__stat dt {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  margin-bottom: .3rem;
}
.hero__stat:nth-child(1) dt { color: var(--neon-cyan); }
.hero__stat:nth-child(2) dt { color: var(--neon-lime); }
.hero__stat:nth-child(3) dt { color: var(--neon-magenta); }
.hero__stat:nth-child(4) dt { color: var(--neon-amber); }
.hero__stat dd {
  margin: 0;
  font-size: var(--step--1);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Hidden on small screens, where the hero is tall enough that the cue would
   collide with the stats block. */
.hero__scroll {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: .4rem;
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-dim);
  z-index: 2;
}
.hero__scroll i {
  display: block;
  width: 1px; height: 42px;
  background: linear-gradient(to bottom, transparent, var(--neon-cyan));
  animation: scrollpulse 2.4s var(--ease) infinite;
}
@keyframes scrollpulse {
  0%, 100% { opacity: .25; transform: scaleY(.5); transform-origin: bottom; }
  50%      { opacity: 1;   transform: scaleY(1);  transform-origin: bottom; }
}

/* ========================================================== 10 MARQUEE */
.marquee {
  border-block: 1px solid var(--line-soft);
  background: rgba(11,8,23,.55);
  overflow: hidden;
  padding-block: .85rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; gap: 0; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 2.4rem;
  padding-inline: 1.2rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, .9rem + .5vw, 1.35rem);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.marquee__item::after {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--neon-magenta);
  box-shadow: 0 0 10px var(--neon-magenta);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================ 11 ABOUT */
.about__grid {
  display: grid;
  gap: clamp(2rem, 1.4rem + 3vw, 4.5rem);
}
.about__body { max-width: var(--measure); font-size: var(--step-1); line-height: 1.6; color: var(--text-muted); }
.about__body em { color: var(--neon-cyan); font-style: italic; }

.about__quote {
  margin: 0 0 2rem;
  padding-left: 1.2rem;
  border-left: 2px solid var(--neon-magenta);
  box-shadow: -14px 0 30px -18px var(--neon-magenta);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.15;
  text-transform: none;
  color: #fff;
}

.points { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; }
.point { background: rgba(11,8,23,.6); padding: clamp(1.3rem, 1rem + 1vw, 2rem); }
.point__num {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--neon-cyan);
  display: block;
  margin-bottom: .7rem;
}
.point h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.point p { color: var(--text-muted); font-size: var(--step-0); margin: 0; }

/* ======================================================== 12 OCCASIONS */
.occasions { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }

.occasion {
  position: relative;
  padding: clamp(1.4rem, 1.1rem + 1vw, 2.1rem);
  background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.occasion::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--accent, var(--neon-magenta));
  box-shadow: 0 0 18px var(--accent, var(--neon-magenta));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.occasion:hover { transform: translateY(-4px); border-color: var(--line); }
.occasion:hover::before { transform: scaleX(1); }
.occasion h3 { font-size: var(--step-1); margin-bottom: .55rem; color: #fff; }
.occasion p  { color: var(--text-muted); font-size: var(--step-0); margin: 0; }
.occasion__icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin-bottom: 1rem;
  border-radius: 12px;
  font-size: 1.1rem;
  color: var(--accent, var(--neon-magenta));
  background: color-mix(in srgb, var(--accent, var(--neon-magenta)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, var(--neon-magenta)) 35%, transparent);
}

/* ============================================================ 13 ROOMS */
.rooms { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.6rem); }

.room {
  --accent: var(--neon-cyan);
  position: relative;
  display: grid;
  gap: 0;
  background: rgba(11,8,23,.55);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  /* `clip` rather than `hidden`: it clips without the scroll-container
     semantics that let a composited child escape the rounded corners. */
  overflow: clip;
  isolation: isolate;
  transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.room:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 24px 60px -30px var(--accent);
  transform: translateY(-3px);
}
.room::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--accent);
  box-shadow: 0 0 22px var(--accent), 0 0 44px var(--accent);
  opacity: .85;
  /* Must sit above .room__media, which is a positioned element and would
     otherwise paint over this bar. */
  z-index: 3;
}

.room__media {
  position: relative;
  overflow: clip;
  aspect-ratio: 16 / 10;
}
.room__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease), filter .5s var(--ease);
  filter: saturate(1.05) contrast(1.03);
}
.room:hover .room__media img { transform: scale(1.045); }
.room__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,4,10,.75), transparent 55%),
              linear-gradient(to right, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%);
  pointer-events: none;
}

.room__badge {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  background: rgba(5,4,10,.78);
  backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

.room__body {
  padding: clamp(1.4rem, 1.1rem + 1.2vw, 2.4rem);
  display: grid;
  align-content: start;
  gap: .9rem;
}
.room__tag {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.room__name {
  font-size: var(--step-3);
  color: #fff;
  text-shadow: 0 0 30px color-mix(in srgb, var(--accent) 55%, transparent);
}
.room__text { color: var(--text-muted); margin: 0; }

.room__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.6rem;
  padding-top: .4rem;
  border-top: 1px solid var(--line-soft);
  margin-top: .4rem;
  font-size: var(--step--1);
  color: var(--text-dim);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.room__meta b { color: var(--text); font-weight: 600; }

/* ========================================================== 14 PRICES */
.price__grid {
  display: grid;
  gap: clamp(1rem, .6rem + 1.5vw, 1.8rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin-bottom: 2rem;
}
.price-card {
  position: relative;
  padding: clamp(1.6rem, 1.2rem + 1.5vw, 2.6rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  text-align: center;
}
.price-card--weekend { border-color: color-mix(in srgb, var(--neon-magenta) 45%, transparent); }
.price-card--weekend::after {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  box-shadow: inset 0 0 40px -18px var(--neon-magenta);
  pointer-events: none;
}
.price-card__days {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .8rem;
}
.price-card__amount {
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 4vw, 5rem);
  font-weight: 700;
  line-height: .9;
  color: #fff;
}
.price-card__amount sup {
  font-size: .32em;
  vertical-align: super;
  letter-spacing: .1em;
  color: var(--text-dim);
  margin-right: .2em;
}
.price-card--weekend .price-card__amount { color: var(--neon-magenta); text-shadow: 0 0 40px rgba(255,63,255,.5); }
.price-card--week    .price-card__amount { color: var(--neon-cyan);    text-shadow: 0 0 40px rgba(39,225,238,.45); }
.price-card__unit {
  display: block;
  margin-top: .7rem;
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.price__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-bottom: 1.6rem;
}
.fact {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.fact svg { flex: none; color: var(--neon-cyan); }

.price__note {
  max-width: var(--measure);
  font-size: var(--step--1);
  color: var(--text-dim);
  border-left: 2px solid var(--line);
  padding-left: 1rem;
}

/* =================================================== 15 KARAOKE SYSTEM */
.split {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  align-items: center;
}

.media-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}
.media-frame img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.media-frame::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 70px -20px rgba(255,63,255,.5), inset 0 0 40px -25px rgba(39,225,238,.6);
  pointer-events: none;
}

.sys__cards { display: grid; gap: 1.2rem; }
.sys-card {
  padding: clamp(1.3rem, 1rem + 1vw, 2rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(11,8,23,.6);
}
.sys-card h3 { font-size: var(--step-1); margin-bottom: .6rem; }
.sys-card p { color: var(--text-muted); }
.sys-card__note {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .6rem;
  font-size: var(--step--1);
  color: var(--neon-amber);
}
.sys__tip {
  margin-top: 1.4rem;
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  border: 1px dashed color-mix(in srgb, var(--neon-cyan) 40%, transparent);
  background: color-mix(in srgb, var(--neon-cyan) 7%, transparent);
  font-size: var(--step-0);
  color: var(--neon-cyan-2);
}

/* ============================================================== 16 BAR */
.bar__gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.6rem, .4rem + .8vw, 1rem);
}
.bar__gallery figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: clip;
  border: 1px solid var(--line-soft);
  transform: translateZ(0);   /* same compositor clip as .room__media */
}
.bar__gallery img {
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: 1;
  transition: transform .7s var(--ease);
  backface-visibility: hidden;
}
.bar__gallery figure:hover img { transform: scale(1.05); }
.bar__gallery figure:nth-child(1) { grid-row: span 2; }
.bar__gallery figure:nth-child(1) img { aspect-ratio: 1 / 2.06; }

.menu-cards { display: grid; gap: 1.2rem; }
.menu-card {
  padding: clamp(1.3rem, 1rem + 1vw, 2rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(11,8,23,.6);
  transition: border-color .3s var(--ease);
}
.menu-card:hover { border-color: var(--line); }
.menu-card h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.menu-card p { color: var(--text-muted); margin-bottom: .8rem; }
.menu-card__meta { display: grid; gap: .35rem; margin-bottom: 1rem; font-size: var(--step--1); color: var(--text-dim); }
.menu-card__meta span { display: flex; gap: .5rem; align-items: baseline; }
.menu-card__meta span::before { content: '·'; color: var(--neon-cyan); }

/* ======================================================= 17 GIFT CARDS */
.gift {
  position: relative;
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: center;
  padding: clamp(1.8rem, 1.2rem + 3vw, 4rem);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--neon-magenta) 30%, transparent);
  background:
    radial-gradient(700px 300px at 85% 20%, rgba(255,63,255,.14), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  overflow: hidden;
}
.gift__badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .34rem .85rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--neon-magenta) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--neon-magenta) 40%, transparent);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neon-magenta-2);
  margin-bottom: 1rem;
}
.gift__media { display: grid; place-items: center; }

/* The voucher card. Pure CSS + SVG, no image asset. */
.gift-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  width: min(100%, 290px);
  padding: 2rem 1.8rem 1.7rem;
  border-radius: 20px;
  background: linear-gradient(165deg, #141019, #0b0a10 60%);
  border: 1px solid color-mix(in srgb, var(--neon-magenta) 34%, transparent);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 18px 50px rgba(0,0,0,.55),
    0 0 44px color-mix(in srgb, var(--neon-magenta) 20%, transparent);
  transform: rotate(-3deg);
  animation: giftfloat 7s ease-in-out infinite;
}
/* Neon edge light along the top. */
.gift-card::before {
  content: '';
  position: absolute; inset: -1px -1px auto; height: 2px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), var(--neon-magenta), transparent);
  opacity: .9;
}
.gift-card__brand {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: .34em;
  text-indent: .34em;
  color: #fff;
  text-shadow: 0 0 10px var(--neon-cyan), 0 0 26px color-mix(in srgb, var(--neon-cyan) 60%, transparent);
}
.gift-card__qr {
  width: min(62%, 160px); height: auto;
  color: #fff;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--neon-cyan) 55%, transparent));
}
/* "CHF ____" says the amount is yours to choose. */
.gift-card__amount {
  display: flex; align-items: flex-end; gap: .5rem;
  font-family: var(--font-display);
  font-size: 1rem; letter-spacing: .12em;
  color: var(--neon-magenta-2);
}
.gift-card__amount i {
  display: block; width: 56px; height: 2px; margin-bottom: .32rem;
  background: currentColor; opacity: .55; border-radius: 2px;
}
@keyframes giftfloat {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(-2deg) translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) { .gift-card { animation: none; } }

/* ============================================================ 18 VISIT */
.visit__grid { display: grid; gap: clamp(1.5rem, 1rem + 2.5vw, 3rem); }

.panel {
  padding: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: rgba(11,8,23,.6);
}
.panel h3 {
  font-size: var(--step-2);
  margin-bottom: 1.2rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--line-soft);
}

.hours { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.hours li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px dashed var(--line-soft);
  font-size: var(--step-0);
}
.hours li:last-child { border-bottom: 0; }
.hours .day { color: var(--text-muted); }
.hours .time { font-family: var(--font-display); font-weight: 500; letter-spacing: .06em; }
.hours .time.closed { color: var(--text-dim); }
.hours li.is-today { position: relative; }
.hours li.is-today .day { color: #fff; font-weight: 600; }
.hours li.is-today .time { color: var(--neon-lime); }
.hours li.is-today::before {
  content: '';
  position: absolute;
  left: -1rem; top: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--neon-lime);
  box-shadow: 0 0 10px var(--neon-lime);
}

.holidays { margin-bottom: 1rem; }
.holidays h4 {
  font-size: var(--step--1);
  letter-spacing: .16em;
  color: var(--text-dim);
  margin-bottom: .6rem;
}
.holidays ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: var(--step--1); color: var(--text-muted); }
.holidays li { display: flex; gap: .7rem; }
.holidays b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.small-note { font-size: var(--step--1); color: var(--text-dim); line-height: 1.5; }

.travel__address {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: .02em;
  color: #fff;
  margin-bottom: .3rem;
}
.travel__ring { color: var(--neon-cyan); font-size: var(--step-0); margin-bottom: 1.4rem; }

.travel__list { display: grid; gap: 1.1rem; margin-bottom: 1.4rem; }
.travel__item { display: grid; grid-template-columns: 34px 1fr; gap: .9rem; }
.travel__item svg { color: var(--neon-cyan); margin-top: .2rem; }
.travel__item h4 { font-size: var(--step-0); margin-bottom: .25rem; }
.travel__item p { margin: 0; font-size: var(--step--1); color: var(--text-muted); }
.travel__item p span { display: block; }

/* ========================================================== 19 CONTACT */
.contact__grid { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; }
.contact__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.6rem; }

.socials { display: flex; gap: .7rem; }
.social {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  border: 1px solid var(--line);
  color: var(--text-muted);
  text-decoration: none;
  transition: color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.social:hover {
  color: var(--neon-magenta);
  border-color: color-mix(in srgb, var(--neon-magenta) 60%, transparent);
  box-shadow: 0 0 24px -8px var(--neon-magenta);
  transform: translateY(-2px);
}
.socials__label {
  font-size: var(--step--1);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: .7rem;
}

.callout {
  padding: 1.1rem 1.3rem;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--neon-amber) 32%, transparent);
  background: color-mix(in srgb, var(--neon-amber) 8%, transparent);
  color: #FFE7C4;
  font-size: var(--step--1);
}

/* ============================================================== 20 FAQ */
.faq { display: grid; gap: .6rem; max-width: 900px; }
.faq details {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(11,8,23,.55);
  overflow: hidden;
  transition: border-color .25s var(--ease);
}
.faq details[open] { border-color: color-mix(in srgb, var(--neon-cyan) 40%, transparent); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.3rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--neon-cyan); }
.faq summary::after {
  content: '';
  flex: none;
  width: 12px; height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s var(--ease);
  opacity: .6;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq .faq__answer { padding: 0 1.3rem 1.2rem; color: var(--text-muted); max-width: var(--measure); }

/* ============================================================ 21 LEGAL */
.legal { border-top: 1px solid var(--line-soft); }
.legal__doc {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(11,8,23,.45);
  margin-bottom: .6rem;
  overflow: hidden;
}
.legal__doc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.legal__doc > summary::-webkit-details-marker { display: none; }
.legal__doc > summary::after {
  content: '+';
  font-size: 1.4em;
  line-height: 1;
  color: var(--neon-cyan);
  transition: transform .3s var(--ease);
}
.legal__doc[open] > summary::after { transform: rotate(45deg); }
.legal__content {
  padding: 0 1.3rem 1.6rem;
  max-width: 78ch;
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--text-muted);
}
.legal__content h4 {
  font-size: var(--step-0);
  color: var(--text);
  margin: 1.6rem 0 .5rem;
  text-transform: none;
  letter-spacing: 0;
}
.legal__content h4:first-child { margin-top: 0; }
.legal__content ul { margin: .4rem 0 1rem; padding-left: 1.1rem; }
.legal__content li { margin-bottom: .3rem; }
.legal__content address { font-style: normal; margin-bottom: 1rem; }
.legal__content a { color: var(--neon-cyan); }

/* =========================================================== 22 FOOTER */
.footer {
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(3rem, 2rem + 3vw, 5rem) 2rem;
  background: rgba(5,4,10,.6);
}
.footer__grid {
  display: grid;
  gap: clamp(2rem, 1.4rem + 2vw, 3.5rem);
  margin-bottom: 3rem;
}
.footer__brand { max-width: 34ch; }
.footer__brand img { width: 54px; margin-bottom: 1rem; }
.footer__tagline { color: var(--text-muted); margin-bottom: 1.4rem; }

.footer h4 {
  font-size: var(--step--1);
  letter-spacing: .2em;
  color: var(--text-dim);
  margin-bottom: 1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer ul a { color: var(--text-muted); text-decoration: none; font-size: var(--step-0); transition: color .2s var(--ease); }
.footer ul a:hover { color: var(--neon-cyan); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--step--1);
  color: var(--text-dim);
}
.footer__bottom p { margin: 0; }

/* Sticky mobile booking bar.
   `bottom` has to clear the home indicator and, on iOS, Safari's floating
   toolbar. With a plain `bottom: 1rem` the bar rendered underneath both on
   first load, and only looked right after a scroll collapsed the toolbar. */
.sticky-cta {
  position: fixed;
  left: max(var(--gutter), env(safe-area-inset-left, 0px));
  right: max(var(--gutter), env(safe-area-inset-right, 0px));
  bottom: calc(1rem + var(--safe-bottom));
  z-index: 40;
  /* Hidden by opacity as well as by the transform. Sliding it down alone left
     it parked just below the fold, which is invisible against an opaque
     browser chrome but not against iOS Safari's translucent toolbar — the bar
     showed through before the visitor had scrolled at all. */
  transform: translateY(calc(140% + var(--safe-bottom)));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .4s var(--ease), opacity .3s var(--ease), visibility .4s;
}
.sticky-cta.is-visible {
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.sticky-cta .btn { box-shadow: 0 12px 40px -10px rgba(255,63,255,.9); }

/* Hidden on phones: the sticky booking bar occupies the same corner, and the
   two were overlapping — the arrow sat on top of "Box buchen". Booking matters
   more than scrolling up, so back-to-top only appears from 820px, which is
   exactly where .sticky-cta stops being shown. */
.to-top {
  display: none;   /* becomes grid at 820px, where .sticky-cta hides */
  position: fixed;
  right: max(var(--gutter), env(safe-area-inset-right, 0px));
  bottom: calc(1rem + var(--safe-bottom));
  z-index: 39;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(5,4,10,.85);
  backdrop-filter: blur(8px);
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s, color .2s, border-color .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top:hover { color: var(--neon-cyan); border-color: var(--neon-cyan); }

/* ============================================ 23 UTILITIES & MOTION */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: .5rem;
  transform: translate(-50%, -200%);
  z-index: 100;
  padding: .7rem 1.2rem;
  background: var(--neon-cyan);
  color: #000;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: .06s; }
.reveal:nth-child(3) { transition-delay: .12s; }
.reveal:nth-child(4) { transition-delay: .18s; }
.reveal:nth-child(5) { transition-delay: .24s; }
.reveal:nth-child(6) { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}

/* ============================================= 24 SEASONAL THEMES */
/* Everything below is scoped to [data-look="…"] on <html>, set by main.js
   from THEME.active in config.js (or ?theme= for a preview). The everyday
   look has no data-look and none of this applies. Artwork markup comes from
   assets/js/themes.js; this file only positions and lights it. */

.theme-deco {
  position: absolute;
  inset: 0;
  z-index: 1;               /* above the background hexes, below hero content */
  pointer-events: none;
  overflow: hidden;
}
.deco {
  position: absolute;
  color: var(--c, var(--neon-cyan));
  /* Two-pass drop shadow = neon tube: tight core, wide bloom. */
  filter: drop-shadow(0 0 4px var(--c)) drop-shadow(0 0 16px color-mix(in srgb, var(--c) 70%, transparent));
}
.deco svg { width: 100%; height: auto; overflow: visible; }

/* ---- Halloween ---------------------------------------------------- */
.deco--web    { top: 0; left: 0; width: min(46vw, 300px); opacity: .85; }
.deco--spider { top: 0; left: min(34vw, 220px); width: 34px; transform-origin: top center;
                animation: swing 5.5s ease-in-out infinite; }
/* Sizes follow the viewport so the flock still reads on a wide monitor;
   the clamps keep them from crowding the hero text on a phone. */
.deco--bat    { width: clamp(62px, 7.2vw, 132px); animation: flap 3.4s ease-in-out infinite; }
.deco--bat-1  { top: 9%;  right: 12%; }
.deco--bat-2  { top: 4%;  right: 27%; width: clamp(44px, 5vw, 92px);   animation-delay: -1.1s; }
.deco--bat-3  { top: 20%; right: 4%;  width: clamp(52px, 6vw, 110px);  animation-delay: -2.2s; }
.deco--ghost  { right: 6%; top: 44%; width: clamp(76px, 9vw, 168px); animation: drift 6s ease-in-out infinite; opacity: .95; }
@keyframes swing { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes flap  { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(6deg); } }
@keyframes drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-10px, -14px); } }

/* ---- New Year's Eve ------------------------------------------------ */
.deco--burst { width: 160px; opacity: 0; animation: firework 4.2s ease-out infinite; }
.deco--burst-1 { top: 6%;  right: 10%; }
.deco--burst-2 { top: 26%; right: 30%; width: 110px; animation-delay: 1.3s; }
.deco--burst-3 { top: 10%; left: 55%;  width: 130px; animation-delay: 2.4s; }
.deco--burst-4 { top: 40%; right: 4%;  width: 80px;  animation-delay: 3.1s; }
@keyframes firework {
  0%   { opacity: 0; transform: scale(.2); }
  12%  { opacity: 1; transform: scale(1); }
  55%  { opacity: .85; }
  100% { opacity: 0; transform: scale(1.15); }
}
/* the gold light streak from the old poster */
.deco--streak {
  left: 10%; right: 10%; bottom: 7%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #FFD24A 30%, #FFF1B8 50%, #FFD24A 70%, transparent);
  filter: drop-shadow(0 0 8px #FFD24A) drop-shadow(0 0 28px #FFB300);
}
[data-look="nye"] .hero__stat:nth-child(3) dt { color: #FFD24A; }

/* ---- Summer heat wave --------------------------------------------- */
/* Wall AC top-right; the breeze waves inside it drift down and fade. */
.deco--ac { top: 5%; right: 5%; width: min(26vw, 230px); opacity: .95; }
.deco--ac .breeze { transform-box: fill-box; transform-origin: center; animation: breeze 3.2s ease-out infinite; opacity: 0; }
.deco--ac .breeze-2 { animation-delay: 1.05s; }
.deco--ac .breeze-3 { animation-delay: 2.1s; }
@keyframes breeze {
  0%   { transform: translate(6px, -10px) scaleX(.9); opacity: 0; }
  20%  { opacity: .9; }
  100% { transform: translate(-14px, 26px) scaleX(1.05); opacity: 0; }
}
/* Ice cubes tumbling in the draught. */
.deco--cube { opacity: .9; animation: tumble 6s ease-in-out infinite; }
@keyframes tumble {
  0%, 100% { transform: translateY(0)    rotate(var(--spin, 0deg)); }
  50%      { transform: translateY(14px) rotate(calc(var(--spin, 0deg) + 18deg)); }
}
/* Big tinted shades in the empty right half of the hero. */
.deco--shades { right: 8%; top: 330px; width: min(30vw, 300px); transform: rotate(-9deg); animation: shades 7s ease-in-out infinite; }
.deco--shades svg { width: 100%; height: auto; overflow: visible; }
@keyframes shades { 0%, 100% { transform: rotate(-9deg) translateY(0); } 50% { transform: rotate(-7deg) translateY(-8px); } }

/* Hook for artwork that sits on the hero logo itself (unused right now). */
.hero__logo-wrap { position: relative; width: max-content; margin-bottom: clamp(1.2rem, 1rem + 1vw, 2rem); }
.hero__logo-wrap .hero__logo { margin-bottom: 0; }
.logo-overlay {
  position: absolute;
  color: var(--c, var(--neon-magenta));
  filter: drop-shadow(0 0 4px var(--c)) drop-shadow(0 0 14px color-mix(in srgb, var(--c) 70%, transparent));
  pointer-events: none;
}
.logo-overlay svg { width: 100%; height: auto; overflow: visible; }

/* Circular stamp ("We keep you cool") */
.theme-badge {
  --c: var(--neon-cyan);
  position: absolute;
  top: clamp(1rem, 1rem + 2vw, 3rem);
  right: var(--gutter);
  z-index: 3;
  display: grid;
  place-content: center;
  width: 96px; height: 96px;
  border-radius: 50%;
  border: 2px solid var(--c);
  box-shadow: 0 0 12px var(--c), inset 0 0 12px color-mix(in srgb, var(--c) 40%, transparent);
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 0 8px var(--c);
  transform: rotate(-8deg);
  animation: badgepulse 3s ease-in-out infinite;
}
@keyframes badgepulse { 0%,100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(-8deg) scale(1.04); } }
.theme-badge span { display: block; }
@media (max-width: 900px) {
  .deco--ac { width: 150px; top: 4%; right: 4%; }
  .deco--shades { width: 170px; top: 230px; right: 4%; opacity: .8; }
  .deco--cube { display: none; }
}
@media (max-width: 600px) {
  .theme-badge { width: 78px; height: 78px; font-size: .66rem; top: 1rem; }
  /* AC above the badge; no room for the shades beside the logo on a phone. */
  .deco--ac { width: 96px; top: 14px; right: 4%; }
  .deco--shades { display: none; }
}

/* ---- Event card ("save the date") ---------------------------------- */
#event-mount:empty { display: none; }
.event {
  --ev: var(--neon-magenta);
  position: relative;
  display: grid;
  gap: 1rem;
  max-width: 760px;
  margin: 0 0 clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
  padding: clamp(1.2rem, 1rem + 1vw, 1.8rem) clamp(1.2rem, 1rem + 1.2vw, 2rem);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--ev) 45%, transparent);
  background:
    radial-gradient(520px 220px at 100% 0%, color-mix(in srgb, var(--ev) 20%, transparent), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  box-shadow: 0 20px 60px -30px var(--ev);
  overflow: hidden;
}
.event::before {
  content: '';
  position: absolute; inset: 0 0 auto 0;
  height: 3px;
  background: var(--ev);
  box-shadow: 0 0 18px var(--ev);
}
.event__body { position: relative; z-index: 1; display: grid; gap: .55rem; justify-items: start; }
.event__kicker {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ev);
}
.event__title { font-size: var(--step-3); color: #fff; text-shadow: 0 0 26px color-mix(in srgb, var(--ev) 60%, transparent); }
.event__meta {
  display: flex; flex-wrap: wrap; gap: .4rem 1.2rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text);
}
.event__meta span + span::before { content: '·'; margin-right: 1.2rem; color: var(--ev); }
.event__text { margin: 0; color: var(--text-muted); max-width: 52ch; }
.event .btn { margin-top: .4rem; }

/* art inside the card */
.event__art { position: absolute; pointer-events: none; }
.event--pumpkin { --ev: #FF7A1A; }
.event__art--pumpkin {
  right: -4%; bottom: -8%;
  width: min(48%, 300px);
  color: #FF7A1A;
  opacity: .7;
  filter: drop-shadow(0 0 10px #FF7A1A) drop-shadow(0 0 30px #FF4D00);
}
.event--fireworks { --ev: #FFD24A; }
.event__art--fireworks { right: 2%; top: -10%; width: 220px; height: 220px; }
.event__burst { position: absolute; inset: 0; width: 100%; height: 100%; color: #FFD24A; opacity: .5;
                filter: drop-shadow(0 0 6px #FFD24A); animation: firework 4s ease-out infinite; }
.event__burst--2 { color: #FFF1B8; transform: translate(-40%, 50%) scale(.6); animation-delay: 1.6s; }
.event--mic { --ev: var(--neon-magenta); }
.event__art--mic { right: 3%; top: 50%; transform: translateY(-50%); width: 150px; height: 150px; }
.event__art--mic svg { width: 100%; height: 100%; color: var(--neon-magenta); opacity: .75;
                       filter: drop-shadow(0 0 6px var(--neon-magenta)) drop-shadow(0 0 18px rgba(255, 63, 158, .5));
                       animation: micsway 5s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes micsway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.confetti { position: absolute; left: var(--x); top: var(--y); width: 8px; height: 12px; border-radius: 2px;
            background: var(--c); box-shadow: 0 0 8px var(--c); opacity: .85;
            animation: confetti 3.6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes confetti { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(10px) rotate(160deg); } }
@media (max-width: 600px) {
  .event__art--pumpkin { width: 60%; opacity: .32; right: -14%; }
  .event__art--fireworks { width: 150px; height: 150px; }
  .event__art--mic { width: 96px; height: 96px; right: -2%; opacity: .6; }
}

/* ---- Special opening hours rows ------------------------------------ */
.holidays--special[hidden] { display: none; }
.holidays--special h4 { color: #FFD24A; }
.holidays--special li { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: baseline; }
.holidays--special em { font-style: normal; font-family: var(--font-display); font-weight: 600; color: var(--neon-lime); letter-spacing: .05em; }
.holidays--special em.closed { color: var(--text-dim); }

/* ---- Preview ribbon (only with ?theme=) ---------------------------- */
.theme-preview {
  position: fixed;
  left: max(var(--gutter), env(safe-area-inset-left, 0px));
  bottom: calc(1rem + var(--safe-bottom));
  z-index: 200;
  display: inline-flex; align-items: center; gap: .5rem;
  max-width: calc(100vw - 2 * var(--gutter));
  padding: .4rem .8rem;
  border-radius: 999px;
  background: #FFD24A;
  color: #14001A;
  font: 600 .78rem/1 var(--font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.6);
}
.theme-preview b { font-weight: 700; }
.theme-preview a {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  margin-left: .2rem;
  border-radius: 50%;
  background: rgba(20,0,26,.14);
  color: inherit; text-decoration: none;
  font-size: .8rem;
}
.theme-preview__short { display: none; }
@media (max-width: 600px) {
  .theme-preview__long  { display: none; }
  .theme-preview__short { display: inline; }
}

/* ============================================= GRADIENT EDGE CORRECTION */
/* `background-origin` defaults to padding-box while `background-clip` defaults
   to border-box, so on a bordered element the gradient is sized 2px smaller
   than the area it paints into. With the default `repeat`, that leftover ring
   shows the gradient tiling — the far end of the ramp bleeding onto the near
   edge. On the primary button that read as a magenta sliver down the left edge
   and a cyan one down the right.

   This has to sit AFTER every component rule: each of these sets `background`
   as a shorthand, and the shorthand resets origin and repeat to their initial
   values, silently undoing the fix if it is declared earlier. */
.btn,
.occasion,
.price-card,
.gift,
.media-frame,
.notice,
.event,
.theme-badge,
.sys__tip,
.callout,
.gift__badge,
.hero__eyebrow,
.hero__stats {
  background-origin: border-box;
  background-repeat: no-repeat;
}

/* ==================================================== RESPONSIVE STEPS */
/* Narrowest phones (iPhone SE and similar). At the default brand sizes the
   header lockup leaves only ~1px of slack at 320px, which one slightly wider
   glyph would break — so trim the mark, the wordmark and the language toggle
   just enough to restore a safe margin. The subtitle stays above 10px and
   keeps the brighter --text-muted, so it is still comfortably legible. */
@media (max-width: 380px) {
  :root {
    --brand-mark:      34px;
    --brand-name-size: .875rem;  /* 14px tall */
    --brand-sub-size:  .8rem;    /* ~12.8px */
  }
  .brand { gap: .55rem; }
  .brand__sub { letter-spacing: .1em; }
  .lang__btn { padding: .42rem .52rem; }
  .header__inner { gap: .6rem; }
}

@media (max-width: 819px) {
  .theme-preview { bottom: calc(1rem + var(--safe-bottom) + 64px); }
}

@media (min-width: 600px) {
  .hero__stats { grid-template-columns: repeat(4, 1fr); }
  .bar__gallery { grid-template-columns: repeat(3, 1fr); }
  .points { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 820px) {
  .about__grid   { grid-template-columns: 1.15fr .85fr; align-items: start; }
  .split         { grid-template-columns: 1fr 1fr; }
  .split--reverse .media-frame { order: 2; }
  .gift          { grid-template-columns: 1.2fr .8fr; }
  .visit__grid   { grid-template-columns: .85fr 1.15fr; }
  .contact__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid  { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
  .room          { grid-template-columns: 1.1fr 1fr; }
  /* Alternate which side the photo sits on. Placed by explicit grid column
     rather than `order`, because `order` also reorders painting — which put
     the image on top of the card's ::after glow bar and its rounded corner. */
  .room:nth-child(even) .room__media { grid-column: 2; grid-row: 1; }
  .room:nth-child(even) .room__body  { grid-column: 1; grid-row: 1; }
  .room__media   { aspect-ratio: auto; height: 100%; min-height: 340px; }
  /* Swap the two floating controls: booking bar out, back-to-top in. */
  .sticky-cta    { display: none; }
  .to-top        { display: grid; }
}

/* The booking CTA belongs in the header as soon as there is room for it.
   It used to appear only with the desktop nav, which left every width between
   the sticky mobile bar disappearing (820px) and the desktop nav arriving with
   no persistent way to book. */
@media (min-width: 600px) {
  .header__cta { display: inline-flex; }
}

/* Full desktop header. The switch sits at 1280px, not 1080px: the brand
   lockup (~308px), the eight nav items (~591px) and the actions (~211px)
   need about 1142px between the gutters, so a 1080px breakpoint pushed the
   CTA past the right edge and made the whole page scroll sideways. */
@media (min-width: 1280px) {
  :root {
    --header-h:        78px;
    --brand-mark:      48px;
    --brand-name-size: 1.375rem; /* 22px tall */
    --brand-sub-size:  1.2rem;   /* ~19.2px */
    --brand-tube-stroke: 1.3px;
  }
  /* Horizontal lockup: mark · YUME │ KARAOKE BOX */
  .brand__lockup { flex-direction: row; align-items: center; gap: .8rem; }
  .brand__rule   { display: block; }
  .hero__scroll { display: grid; }
  .nav { display: block; }
  .burger { display: none; }
  .hero__stats { max-width: 820px; }
}

/* ============================================================== PRINT */
@media print {
  .backdrop, .header, .drawer, .marquee, .sticky-cta, .to-top,
  .hero__scroll, .notice, .map { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; page-break-inside: avoid; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: .8em; color: #555; }
}