/* ─────────────────────────────────────────────────────────────
   U Mlsné Kočky — Bar & Kavárna
   dark-mode scroll-driven landing page
   ───────────────────────────────────────────────────────────── */

:root {
  --bg-dark: #0E0B0A;
  --bg-dark-2: #161110;
  --bg-dark-3: #221B19;
  --text-primary: #F2E9DD;
  --text-muted: #8C8274;
  --text-faint: rgba(242, 233, 221, 0.45);
  --accent-copper: #C89A5E;
  --accent-copper-hi: #E2B884;
  --accent-copper-dim: #7A5A32;
  --accent-burgundy: #6B1F2E;
  --rule: rgba(242, 233, 221, 0.14);
  --rule-soft: rgba(242, 233, 221, 0.08);

  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --spine-text: 38vw;
  --spine-pad-left: 5vw;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg-dark); }
html { scroll-behavior: auto; } /* Lenis drives scroll */
body {
  font-family: var(--font-body);
  color: var(--text-primary);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }

::selection { background: var(--accent-copper); color: var(--bg-dark); }

:focus-visible {
  outline: 2px solid var(--accent-copper);
  outline-offset: 3px;
  border-radius: 2px;
}

/* JS-driven scroll reveal (class added by app.js — content stays
   visible if JS never runs) */
.rv {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
  transition-delay: calc(var(--rv-i, 0) * 60ms);
  will-change: transform, opacity;
}
.rv.rv-in { opacity: 1; transform: none; }

/* ─── Loader ────────────────────────────────────────────────── */
#loader {
  position: fixed; inset: 0;
  background: var(--bg-dark);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.8s var(--ease-out);
}
#loader.hidden { opacity: 0; pointer-events: none; }
.loader-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 22px;
  text-align: center;
}
/* ─── Circular logo lockup ──────────────────────────────────── */
/* The source logo is a full-bleed square — "BAR · KAVÁRNA" sits right on
   its bottom edge, so clipping the raster itself to a circle amputates
   that line. Instead the circle is drawn on a wrapper and the artwork is
   inset to the inscribed square (70.7% of the diameter), which keeps the
   round shape and the whole lockup readable.
   `isolation: isolate` pins the screen-blend to the wrapper's own dark
   backdrop, so the mark renders identically over the page, over a bright
   canvas frame, and while GSAP is tweening the wrapper's opacity. */
.logo-circle {
  display: inline-grid;
  place-items: center;
  aspect-ratio: 1;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid rgba(233, 226, 216, 0.14);
  background:
    radial-gradient(84% 84% at 50% 16%, rgba(199, 140, 74, 0.22) 0%, rgba(21, 16, 13, 0) 70%),
    #15100D;
  isolation: isolate;
  flex-shrink: 0;
}
.logo-circle img {
  display: block;
  width: 71%;
  height: 71%;
  object-fit: contain;
  filter: invert(1);
  mix-blend-mode: screen;
}

.loader-logo {
  width: 104px;
  opacity: 0.95;
  animation: loader-pulse 2s ease-in-out infinite;
}
.loader-word {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.loader-bar {
  width: 180px; height: 1px;
  background: var(--rule-soft);
  overflow: hidden;
  position: relative;
  display: block;
}
.loader-bar i {
  position: absolute; top: 0; left: -40%;
  height: 100%; width: 40%;
  background: linear-gradient(90deg, transparent, var(--accent-copper), transparent);
  animation: loader-slide 1.2s ease-in-out infinite;
}
@keyframes loader-slide {
  from { left: -40%; }
  to { left: 100%; }
}
@keyframes loader-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* ─── Header ────────────────────────────────────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  /* Lands the brand on the same left spine as .flow-wrap and .hero-inner —
     the centred 1280px box PLUS its gutter, not just the box edge. The old
     formula stopped at the box edge, which left the logo 48px outboard of
     every section heading at any width ≥1280. Invisible while the hero was
     still full-bleed; obvious the moment the hero adopted the page gutter. */
  padding: 18px calc(max(0px, (100vw - 1280px) / 2) + clamp(20px, 4vw, 48px));
  background: linear-gradient(to bottom, rgba(14, 11, 10, 0.88), rgba(14, 11, 10, 0));
  transition: background 0.4s var(--ease-out), backdrop-filter 0.4s var(--ease-out);
}
.site-header.scrolled {
  background: rgba(14, 11, 10, 0.8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-soft);
}
.brand {
  display: inline-flex; align-items: center; gap: 13px;
  justify-self: start;
}
.brand-logo {
  width: 46px;
  transition: transform 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.brand:hover .brand-logo {
  transform: scale(1.05);
  border-color: rgba(199, 140, 74, 0.5);
}
.brand-text { display: inline-flex; flex-direction: column; gap: 2px; }
.brand-mark {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}
.brand-sub {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--text-muted);
  font-weight: 500;
  font-family: var(--font-body);
}
.site-nav {
  display: flex; gap: 28px;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 500;
  font-family: var(--font-body);
}
.site-nav a {
  position: relative;
  padding: 6px 0;
  color: var(--text-primary);
  transition: color 0.3s var(--ease-out);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 0; height: 1px;
  background: var(--accent-copper);
  transition: width 0.35s var(--ease-out), left 0.35s var(--ease-out);
}
.site-nav a:hover::after { width: 100%; left: 0; }
.header-actions {
  display: inline-flex; align-items: center; gap: 12px;
  justify-self: end;
}

/* Burger (mobile only) */
.nav-burger {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column;
  justify-content: center; align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
}
.nav-burger span {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--text-primary);
  transition: transform 0.35s var(--ease-out);
}
.nav-burger.open span:first-child { transform: translateY(4.25px) rotate(45deg); }
.nav-burger.open span:last-child { transform: translateY(-4.25px) rotate(-45deg); }

/* Mobile drawer */
.mobile-menu {
  position: fixed; inset: 0;
  z-index: 45;
  background: rgba(10, 8, 7, 0.97);
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  gap: 6px;
  padding: 110px clamp(28px, 9vw, 56px) 60px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 9vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.5s var(--ease-out), color 0.3s var(--ease-out);
  transition-delay: calc(var(--mm-i, 0) * 55ms);
}
.mobile-menu.open a { transform: none; opacity: 1; }
.mobile-menu a:hover { color: var(--accent-copper); }
.mobile-menu .mm-tel {
  margin-top: 26px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent-copper);
  border-bottom: 1px solid var(--accent-copper-dim);
  padding-bottom: 4px;
}

/* ─── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease-out),
              background 0.25s var(--ease-out),
              color 0.25s var(--ease-out),
              box-shadow 0.25s var(--ease-out);
  will-change: transform;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent-copper);
  color: #1A0F08;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 14px 28px -14px rgba(200, 154, 94, 0.55),
    0 4px 10px -6px rgba(107, 31, 46, 0.35);
}
.btn-primary:hover {
  transform: translateY(-2px);
  background: var(--accent-copper-hi);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 22px 36px -16px rgba(226, 184, 132, 0.7),
    0 6px 14px -6px rgba(107, 31, 46, 0.5);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--rule);
}
.btn-ghost:hover {
  transform: translateY(-2px);
  background: rgba(242, 233, 221, 0.04);
  border-color: var(--text-primary);
}

.btn-header {
  padding: 10px 20px;
  font-size: 0.7rem;
}
.btn-header .btn-phone { display: none; }
.btn .btn-arrow { display: inline-block; transition: transform 0.3s var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ─── Canvas column (right 2/3) ─────────────────────────────── */
.canvas-wrap {
  position: fixed;
  top: 0;
  right: 0;
  width: 66vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  /* The frames dissolve their OWN left edge into the page darkness — nothing
     is painted on top of the photography (the hero used to lay a gradient
     over it, which greyed the whole right two-thirds). Eased multi-stop ramp
     rather than a 2-stop linear one: a linear alpha fade against a flat dark
     field lands as a visible band, this one has no edge to find. */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    rgba(0, 0, 0, 0.04) 6%,
    rgba(0, 0, 0, 0.20) 11%,
    rgba(0, 0, 0, 0.50) 16%,
    rgba(0, 0, 0, 0.80) 21%,
    #000 27%);
  mask-image: linear-gradient(to right,
    transparent 0%,
    rgba(0, 0, 0, 0.04) 6%,
    rgba(0, 0, 0, 0.20) 11%,
    rgba(0, 0, 0, 0.50) 16%,
    rgba(0, 0, 0, 0.80) 21%,
    #000 27%);
}
.canvas-wrap::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--bg-dark) 0%, transparent 8%, transparent 92%, var(--bg-dark) 100%);
  z-index: 2; pointer-events: none;
}
#canvas { width: 100%; height: 100%; display: block; }

/* Progressive blur riding the same band as .canvas-wrap's mask. The seam used
   to be a dark veil laid over the photo; now it carries no colour at all — it
   only defocuses the backdrop, so the frames go crisp → soft → gone and melt
   into the dark column instead of stopping on a line.
   backdrop-filter is safe here: .seam has no descendants, so it can't become
   the containing block for anything position: fixed (the GSAP .sig-pin lives
   in a completely separate subtree). Sits at z-index 2 — above the canvas,
   below the marquee/hero/flow, so no text is ever blurred. */
.seam {
  position: fixed;
  top: 0;
  left: 33vw;
  width: 19vw;
  height: 100vh;
  z-index: 2;
  pointer-events: none;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  -webkit-mask-image: linear-gradient(to right,
    rgba(0, 0, 0, 0.55) 0%,
    #000 22%,
    rgba(0, 0, 0, 0.78) 44%,
    rgba(0, 0, 0, 0.42) 66%,
    rgba(0, 0, 0, 0.14) 85%,
    transparent 100%);
  mask-image: linear-gradient(to right,
    rgba(0, 0, 0, 0.55) 0%,
    #000 22%,
    rgba(0, 0, 0, 0.78) 44%,
    rgba(0, 0, 0, 0.42) 66%,
    rgba(0, 0, 0, 0.14) 85%,
    transparent 100%);
}

#dark-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 8, 7, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
}

/* ─── Hero ──────────────────────────────────────────────────── */
.hero {
  /* Same gutter as .flow-wrap so the hero copy starts on the identical left
     edge as "Všechno, co naléváme.", the chips and "Momentky od baru." — one
     spine running the length of the page. The scroll cue aligns to it too. */
  --hero-pad: clamp(20px, 4vw, 48px);
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  z-index: 5;
  overflow: hidden;
  /* No background: the hero is a transparent text layer over the canvas. The
     frames feather their own left edge (.canvas-wrap mask + .seam blur), so
     the photography is never veiled. */
}
.hero-inner {
  position: relative;
  height: 100%;
  /* Mirrors .flow-wrap exactly (max-width + auto margins + the same padding
     clamp) so the copy's left edge lands on the page's content spine instead
     of the old flat 5vw gutter, which sat ~56px left of every other section
     at 1440 and drifted further the wider the screen got. */
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  /* Bottom padding reserves the absolutely-positioned .scroll-cue (65px tall
     at bottom:40px); top clears the fixed header. Both scale with vh so a
     720px-tall laptop doesn't spend a third of the viewport on padding. */
  padding: clamp(92px, 14vh, 148px) var(--hero-pad) clamp(112px, 15vh, 150px);
  display: flex;
  flex-direction: column;
  /* Shrink each row to its own content: the stack now sits inside a
     1280px-wide box, so stretched children would run the h1 and tagline all
     the way across the canvas. Line lengths come from .hero-heading (the
     .word rows are already separate flex lines) and .hero-tagline's 36ch. */
  align-items: flex-start;
  justify-content: center;
  gap: clamp(14px, 2.4vh, 24px);
  z-index: 5;
}
.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero-label::before {
  content: "";
  width: 32px; height: 1px;
  background: var(--accent-copper);
}
.hero-heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  /* The vh term keeps the 2-line stack clear of the scroll cue on short
     laptop viewports (720–800px tall), where a width-only clamp overflowed.
     The stack also carries a logo, tagline, status dot and CTA pair, so this
     term is doing more work than its 8.2vh suggests — see .hero-inner. */
  font-size: clamp(2.6rem, min(6.4vw, 8.2vh), 6.4rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-heading .word { display: inline-block; }
.hero-heading .accent,
.hero-heading em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent-copper);
}
.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.4vw, 1.4rem);
  line-height: 1.5;
  color: var(--text-primary);
  font-weight: 400;
  max-width: 36ch;
  margin: 0;
}
.hero-tagline em {
  font-style: italic;
  color: var(--accent-copper-hi);
  font-weight: 500;
}
.hero-meta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 8px;
}
.hero-meta .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-copper);
  box-shadow: 0 0 10px var(--accent-copper);
  animation: pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Hero phone link */
.hero-tel {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
  text-decoration: none;
  transition: color 0.25s var(--ease-out);
}
.hero-tel-label {
  font-family: var(--font-body);
  font-size: 0.63rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.hero-tel-num {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.55rem);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 0.01em;
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
}
.hero-tel-num::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent-copper);
  transform-origin: left;
  transform: scaleX(0.28);
  transition: transform 0.4s var(--ease-out);
}
.hero-tel:hover .hero-tel-num { color: var(--accent-copper); }
.hero-tel:hover .hero-tel-num::after { transform: scaleX(1); }

.scroll-cue {
  position: absolute;
  left: var(--hero-pad);
  bottom: 40px;
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.25s var(--ease-out), transform 0.4s var(--ease-out);
}
.scroll-cue:hover { color: var(--text-primary); }
.scroll-cue svg { opacity: 0.6; animation: nudge 2s ease-in-out infinite; }
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ─── Marquee ───────────────────────────────────────────────── */
.marquee-wrap {
  position: fixed;
  top: 50%;
  left: 0;
  width: 40vw;
  transform: translateY(-50%);
  z-index: 4;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  mask-image: linear-gradient(to right, transparent, black 10%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 88%, transparent);
}
.marquee-text {
  font-family: var(--font-display);
  font-size: 11vw;
  font-weight: 600;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--text-primary);
  opacity: 0.08;
  display: inline-block;
  padding-left: 0;
}

/* ─── Scroll container ──────────────────────────────────────── */
/* 70vh, down from 260vh. The driver holds no content of its own, so every vh
   of it read as a dead gap between the hero and the lístek. It is now just
   long enough for the hero copy to clear out; the frame scrub no longer ends
   here — it runs on past this box and finishes behind #menu's heading, so the
   animation keeps playing through the boundary instead of stopping in a void.
   Consequence: frames advance ~3.7× faster per pixel, which is what makes the
   canvas move on the very first wheel notch. */
#scroll-container {
  position: relative;
  height: 70vh;
  z-index: 5;
}
.scroll-section {
  position: absolute;
  left: 0;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  pointer-events: none;
}
.scroll-section > * { pointer-events: auto; }

/* Section positions — aligned to their data-enter timing */
.scroll-section[data-enter="44"] { top: 40%; }

.pos-upper .section-inner { padding-top: 8vh; }
.pos-mid .section-inner   { padding-top: 0; }
.pos-lower .section-inner { padding-top: 18vh; }

.align-left { padding-left: var(--spine-pad-left); padding-right: 62vw; }
.align-left .section-inner { max-width: 34vw; }
.section-inner-wide { max-width: 38vw !important; }

.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-copper);
  margin-bottom: 22px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-soft);
}
.section-heading {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.2vw, 4rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 18px;
}
.section-heading em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent-copper);
}
.section-heading.serif-italic {
  font-style: italic;
  font-weight: 500;
}
.section-body {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.05vw, 1.05rem);
  line-height: 1.7;
  color: var(--text-primary);
  max-width: 38ch;
  margin: 0 0 24px;
  font-weight: 300;
}
.section-rule {
  width: 48px;
  height: 1px;
  background: var(--accent-copper);
  opacity: 0.7;
  margin-top: 12px;
}

/* Link out of a cinema section into the flow menu */
.section-more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-copper);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--accent-copper-dim);
  transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.section-more span { transition: transform 0.3s var(--ease-out); }
.section-more:hover { color: var(--accent-copper-hi); border-color: var(--accent-copper); }
.section-more:hover span { transform: translateY(3px); }

/* Framed photo inside a cinema section */
.section-photo {
  margin: 26px 0 0;
  padding: 10px 10px 12px;
  border: 1px solid var(--rule);
  background: rgba(22, 17, 16, 0.55);
  width: min(320px, 24vw);
  transform: rotate(-1.4deg);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.4),
    0 24px 48px -24px rgba(0, 0, 0, 0.7);
}
.section-photo img {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
}

/* ─── Stats band (full-width, breaks the spine) ─────────────── */
.section-stats {
  top: 63% !important;
  padding: 0 clamp(32px, 6vw, 80px);
  text-align: left;
  left: 0; right: 0;
  width: 100%;
  z-index: 12;
}
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  align-items: end;
  gap: clamp(24px, 4vw, 60px);
  max-width: 1400px;
  margin: 0 auto;
}
.stat { display: flex; flex-direction: column; gap: 10px; }
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 8.8rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-style: italic;
}
.stat-label {
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.5;
}
.stat-divider {
  width: 1px;
  height: 80%;
  background: linear-gradient(to bottom, transparent, var(--rule), transparent);
  align-self: center;
}

/* ─── Visit CTA pair ────────────────────────────────────────── */
.visit-cta {
  display: flex; gap: 14px; flex-wrap: wrap;
  padding-top: 8px;
}
/* Hero variant: left-aligned to the text column, not centred. */
.hero-cta {
  justify-content: flex-start;
  margin-top: clamp(4px, 1.2vh, 12px);
}

/* ─── Cocktail list (cinema mini-lists) ─────────────────────── */
.cocktail-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  border-top: 1px solid var(--rule-soft);
}
.cocktail-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-soft);
  transition: background 0.2s var(--ease-out);
}
.ci-num {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-style: italic;
  color: var(--accent-copper-dim);
  letter-spacing: 0.06em;
  min-width: 18px;
  flex-shrink: 0;
}
.ci-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ci-name {
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 1.05vw, 1.08rem);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ci-notes {
  font-family: var(--font-body);
  font-size: 0.68rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}
.ci-price {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--accent-copper);
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}
.ci-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 2px;
  background: rgba(200, 154, 94, 0.15);
  color: var(--accent-copper);
  border: 1px solid rgba(200, 154, 94, 0.3);
  vertical-align: middle;
  font-style: normal;
}
.ci-featured .ci-name { color: var(--accent-copper-hi); }
.ci-featured .ci-num { color: var(--accent-copper); }

/* ═════════════════════════════════════════════════════════════
   FLOW SECTIONS — normal document flow below the cinema part
   ═════════════════════════════════════════════════════════════ */
/* Translucent, not opaque: the fixed canvas (z-index 1) stays behind every
   section for the full length of the page. The scrub ends at #scroll-container's
   bottom, so from the lístek down the last drawn frame simply holds — a still
   backdrop rather than a black one. Tint is heavy enough that body copy and the
   price rows keep their contrast over a blown-out highlight; the imagery reads
   as depth, not as a photo you're asked to look at.
   Deliberately no backdrop-filter here — .flow is an ancestor of the GSAP-pinned
   .sig-pin, and a filtered ancestor becomes the containing block for its
   position: fixed pin, which silently collapses the pin. */
.flow {
  position: relative;
  z-index: 10;
  background: rgba(14, 11, 10, 0.88);
}
.flow-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}
.flow-head { max-width: 720px; }
.flow-heading {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.6vw, 4.4rem);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 18px;
}
.flow-heading em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent-copper);
}
.flow-sub {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
  font-weight: 300;
  max-width: 52ch;
  margin: 0;
}

/* ─── Signature poster strip ────────────────────────────────── */
/* Lightest veil on the page — the poster strip is the showcase moment, so the
   backdrop is allowed to come forward here more than anywhere else. Only 2%
   lighter than .flow, though: any bigger step would draw a visible horizontal
   line where this section meets the lístek above it. */
#signature { background: rgba(14, 11, 10, 0.86); }
.sig-pin {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(22px, 3.4vh, 40px);
  padding: 104px 0 36px;
}
.sig-head {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}
.sig-head .flow-heading {
  font-size: clamp(2.2rem, 3.8vw, 3.6rem);
  margin: 0;
}
.sig-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.sig-viewport::-webkit-scrollbar { display: none; }
/* Once JS has doubled the track the strip is endless, so native scrolling is
   handed over to the transform loop. touch-action: pan-y keeps a vertical
   swipe belonging to the page — only sideways is ours. */
.sig-loop .sig-viewport {
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.sig-loop .sig-viewport.is-dragging { cursor: grabbing; }
.sig-loop .sig-card img { pointer-events: none; }
.sig-track {
  display: flex;
  align-items: flex-start;
  gap: clamp(18px, 2.4vw, 32px);
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 12px clamp(20px, 4vw, 48px) 4px;
}
.sig-card { flex: 0 0 auto; }
.sig-card figure { margin: 0; }
.sig-card img {
  height: clamp(300px, 48vh, 560px);
  width: auto;
  display: block;
  border-radius: 4px;
  border: 1px solid var(--rule-soft);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.45),
    0 30px 60px -30px rgba(0, 0, 0, 0.85);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.sig-card:hover img {
  transform: translateY(-8px);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.5),
    0 44px 80px -34px rgba(0, 0, 0, 0.9);
}
.sig-card figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 12px 4px 0;
}
.sig-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.sig-price {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--accent-copper);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* A progress bar would be a lie on an endless strip — there is no end to be a
   fraction of. Two nudge buttons instead, for anyone who would rather not drag. */
.sig-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}
.sig-nav-btn {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--rule-soft);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition:
    transform 0.3s var(--ease-out),
    background-color 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out),
    color 0.3s var(--ease-out);
}
.sig-nav-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--accent-copper);
  color: var(--accent-copper);
  transform: translateY(-2px);
}
.sig-nav-btn:active { transform: translateY(0); }
.sig-nav-btn:focus-visible {
  outline: 3px solid var(--accent-copper);
  outline-offset: 3px;
}

/* ─── Interlude (pinned photo + motto) ──────────────────────── */
/* The photo is painted by a position:fixed ::before layer that fills the
   viewport, and the band clips it with clip-path: inset(0). This gives the
   "window onto a stationary image" effect on EVERY device — including iOS
   Safari and touch/DevTools-emulated phones + tablets, where the old
   background-attachment: fixed silently fell back to scroll.
   Why not background-attachment: fixed? iOS Safari ignores it (renders as
   scroll) and it was gated off on `@media (pointer: coarse)`, so real phones
   and tablets never pinned. Why clip-path and not overflow: hidden? overflow
   can't clip a fixed descendant (the band isn't its containing block); clip-path
   clips it WITHOUT becoming a containing block, so the layer stays pinned to the
   viewport. Do NOT add transform/filter/backdrop-filter to .interlude — any of
   those would make it the containing block for the fixed layer and turn the
   pinned photo back into a scrolling one. A pinned backdrop is not an animation,
   so never move this into the reduced-motion block either. */
.interlude {
  position: relative;
  height: var(--il-h, 72vh);
  min-height: 460px;
  overflow: hidden;
  clip-path: inset(0);
  display: grid;
  place-items: center;
  background-color: var(--bg-dark-2);
}
/* Deliberately NOT `inset: 0`. A fixed layer with top+bottom pinned is sized by
   the VISUAL viewport, and on a phone that grows/shrinks by the height of the
   URL bar the instant it collapses on scroll. With `background-size: cover` on a
   1920×2560 portrait source the box is height-fitted, so an 844↔754 change
   re-scales the photo by 12% and slides the content under the band's window by
   ~29px — in the ~150ms of the toolbar animation. That is the reported "passing
   this bg the site jumps up or down in a split second", in both directions
   (bar hides on the way down, reappears on the way up), phones only.
   Fix: anchor the top and give the layer a HEIGHT frozen to the large viewport.
   --vp-h is written as pixels once by applyBandGeometry(); 100vh is the pre-JS
   fallback only. The layer then over-hangs the fold while the bar is visible —
   invisible, the band clips it — and the crop never moves. Same contract as
   --band-h/--hero-h on the cinema band. */
.interlude::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--vp-h, 100vh);
  z-index: 0;
  background-image: url("../img/web/foto-grepova-paloma.webp");
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
  pointer-events: none;
  /* Own compositor layer, so the clip-path'd fixed layer is not re-rastered on
     every scroll frame while the toolbar animates. Safe here: a transform makes
     an element the containing block for its fixed DESCENDANTS, and ::before has
     none — it does not un-fix the element itself. */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.interlude::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(14, 11, 10, 0.88) 0%,
    rgba(14, 11, 10, 0.38) 40%,
    rgba(14, 11, 10, 0.52) 100%
  );
  pointer-events: none;
}
.interlude-quote {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
}
.interlude-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
  /* Exactly two lines, split by the <br/> — never let either half wrap
     ("Good times." was dropping "times." to a third line). */
  white-space: nowrap;
}
/* Speech marks hang slightly outside the text so the two centred lines keep
   their optical centre instead of being nudged by the punctuation. */
.iq-mark {
  color: var(--accent-copper);
  opacity: 0.82;
  font-size: 0.92em;
}
.iq-open { margin-left: -0.44em; }
.iq-close { margin-right: -0.44em; }

/* ─── Menu flow ─────────────────────────────────────────────── */
/* No veil over the head of this section — the frame sequence is still running
   when "Všechno, co naléváme." arrives, and it has to be visible behind it.
   So .flow's flat rgba(14,11,10,0.88) is overridden here by a gradient that
   starts fully transparent and only reaches full tint once the heading and the
   chip bar have passed. The price rows further down keep the full 0.88 they
   need to stay legible over a blown-out highlight.
   This also removes the old .menu-flow::before ramp: there is no longer a
   boundary where the veil "switches on", so there is nothing to feather. The
   stops are eased rather than two-point linear — linear alpha against a flat
   dark field lands as a visible band. */
.menu-flow {
  padding: 130px 0 110px;
  background: linear-gradient(to bottom,
    rgba(14, 11, 10, 0) 0,
    rgba(14, 11, 10, 0.06) 18vh,
    rgba(14, 11, 10, 0.24) 34vh,
    rgba(14, 11, 10, 0.52) 48vh,
    rgba(14, 11, 10, 0.76) 62vh,
    rgba(14, 11, 10, 0.88) 78vh,
    rgba(14, 11, 10, 0.88) 100%);
}
/* Sticky category chips */
.menu-nav {
  position: sticky;
  top: 66px;
  z-index: 20;
  background: rgba(14, 11, 10, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  margin: 54px 0 72px;
}
.menu-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 13px clamp(20px, 4vw, 48px);
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.menu-nav-inner::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  padding: 8px 16px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.25s var(--ease-out),
              border-color 0.25s var(--ease-out),
              background 0.25s var(--ease-out);
}
.chip:hover { color: var(--text-primary); border-color: var(--accent-copper-dim); }
.chip.active {
  background: var(--accent-copper);
  color: #1A0F08;
  border-color: transparent;
}

/* Featured category (káva / koktejly) with board photo aside */
.mcat { scroll-margin-top: 150px; }
.mcat-card { scroll-margin-top: 130px; }
.mcat-featured { margin-bottom: clamp(72px, 8vw, 110px); }
.mcat-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: clamp(32px, 4.5vw, 72px);
  align-items: start;
}
.mcat-reverse .mcat-grid { grid-template-columns: 1fr 1.7fr; }
.mcat-reverse .mcat-main { order: 2; }
.mcat-reverse .mcat-aside { order: 1; }
/* Grid children must be allowed to shrink below their content's min-content
   size, otherwise a nowrap meta blows the 1fr track past the container. */
.mcat-main,
.mcat-aside { min-width: 0; }
.mcat-aside {
  position: sticky;
  top: 130px;
}
.mcat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 14px;
  margin-bottom: 10px;
}
.mcat-head h3 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.4vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.mcat-meta {
  font-family: var(--font-body);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}

/* Menu items */
.mi-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(28px, 3vw, 48px);
}
.mi-list { list-style: none; margin: 0; padding: 0; }
.mi {
  padding: 6px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.mi:last-child { border-bottom: none; }
.mi-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.mi-name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.mi-note {
  font-family: var(--font-body);
  font-size: 0.62rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  margin-left: 4px;
  white-space: nowrap;
}
.mi-dots {
  flex: 1;
  min-width: 16px;
  border-bottom: 1px dotted var(--rule);
  transform: translateY(-4px);
}
.mi-price {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-copper);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.mi-desc {
  margin: 1px 0 0;
  font-family: var(--font-body);
  font-size: 0.74rem;
  color: var(--text-muted);
  font-weight: 300;
  line-height: 1.5;
  max-width: 46ch;
}
.mi-hl .mi-name { color: var(--accent-copper-hi); }
.mi-list-tight .mi { padding: 5px 0; }
.mi-list-tight .mi-name { font-size: 0.98rem; }
.mcat-note {
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}

/* Board photo card */
.board-card {
  margin: 0;
  border: 1px solid var(--rule);
  background: var(--bg-dark-2);
  padding: 12px 12px 4px;
  border-radius: 4px;
  cursor: zoom-in;
  transition: transform 0.35s var(--ease-out), border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.35),
    0 28px 60px -30px rgba(0, 0, 0, 0.7);
}
.board-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-copper-dim);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.4),
    0 40px 80px -32px rgba(0, 0, 0, 0.85);
}
.board-card img { border-radius: 2px; width: 100%; height: auto; }
.board-card figcaption {
  padding: 11px 2px;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  text-align: center;
}

/* ─── Spirits — tabbed categories ───────────────────────────── */
.spirits { margin-top: clamp(56px, 7vw, 96px); }
.spirits-head {
  display: grid;
  gap: 6px;
  margin-bottom: clamp(26px, 3vw, 40px);
}
.spirits-eyebrow {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-copper);
  font-weight: 600;
}
.spirits-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.4vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}
.spirits-hint {
  margin: 2px 0 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.spirits-shell {
  display: grid;
  grid-template-columns: minmax(210px, 264px) 1fr;
  gap: clamp(28px, 3.4vw, 52px);
  align-items: stretch;
}

/* Rail — vertical list on desktop, horizontal pill rail on mobile */
.spirits-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid var(--rule-soft);
  padding-left: 0;
}
.sp-marker {
  position: absolute;
  left: -1px;
  top: 0;
  width: 2px;
  height: 0;
  background: var(--accent-copper);
  border-radius: 2px;
  transform: translateY(var(--m-y, 0px));
  height: var(--m-h, 0px);
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.sp-tab {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: none;
  border: 0;
  border-radius: 0 3px 3px 0;
  padding: 11px 14px 11px 18px;
  cursor: pointer;
  text-align: left;
  color: var(--text-muted);
  font-family: var(--font-body);
  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    padding-left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.sp-tab-name {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.sp-tab-count {
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  opacity: 0.55;
  transition: color 0.3s ease, opacity 0.3s ease;
}
.sp-tab:hover {
  color: var(--text);
  background: rgba(199, 140, 74, 0.05);
  padding-left: 22px;
}
.sp-tab:hover .sp-tab-count { opacity: 0.85; }
.sp-tab:focus-visible {
  outline: 2px solid var(--accent-copper);
  outline-offset: -2px;
  color: var(--text);
}
.sp-tab.is-active {
  color: var(--text);
  background: rgba(199, 140, 74, 0.07);
  padding-left: 22px;
}
.sp-tab.is-active .sp-tab-name { font-weight: 600; }
.sp-tab.is-active .sp-tab-count { color: var(--accent-copper); opacity: 1; }

/* Stage + panels */
.spirits-stage { min-width: 0; }
.mcat-card {
  display: block;
  width: 100%;
  margin: 0;
  border: 1px solid var(--rule-soft);
  background: linear-gradient(180deg, var(--bg-dark-2), rgba(22, 17, 16, 0.35));
  border-radius: 4px;
  padding: clamp(22px, 2.4vw, 34px) clamp(20px, 2.2vw, 32px);
}
.mcat-card .mcat-head { border-bottom-color: var(--rule-soft); }
.mcat-card h3 { font-size: clamp(1.4rem, 1.9vw, 1.75rem); }
.sp-panel:focus-visible {
  outline: 2px solid var(--accent-copper);
  outline-offset: 3px;
}
/* Long lists split into two balanced columns so short panels don't leave
   the stage looking empty next to a 19-item rum list. */
.sp-panel[data-cols="2"] .mi-list {
  columns: 2;
  column-gap: clamp(28px, 3vw, 48px);
}
.sp-panel[data-cols="2"] .mi {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
/* [hidden] must win over the display:block above */
.sp-panel[hidden] { display: none; }

/* Merged Koktejly/Káva tab + panel and the narrow spirits title exist in the
   DOM at every width (built by initMenuMerge) but only surface at ≤768px — see
   responsive.css. Desktop keeps the standalone sections + 5-tab spirits UI. */
.sp-tab-merged,
.sp-panel-merged { display: none; }
.st-narrow { display: none; }

.sp-panel:not([hidden]) {
  animation: sp-panel-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sp-panel-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.sp-panel:not([hidden]) .mi {
  animation: sp-item-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.1s + var(--mi-i, 0) * 22ms);
}
@keyframes sp-item-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.mcat-sub {
  display: block;
  margin: 20px 0 4px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-copper);
  font-weight: 600;
}

/* Merged panels (cognac+vodka, tequila+gin, sekty+aperitiv+pivo).
   An explicit 2-column grid — NOT `columns: 2` — because each sub-category
   has to land in a specific column; a multi-column flow would rebalance
   them wherever it liked. */
.sp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3vw, 52px);
  align-items: start;
}
.sp-split .sp-col { min-width: 0; }
/* Hairline between the two columns, drawn on the right one so it never
   dangles past a short left column. */
.sp-split .sp-col + .sp-col {
  padding-left: clamp(28px, 3vw, 52px);
  border-left: 1px solid var(--rule-soft);
}
/* The card header already draws a rule above; the first sub-label in each
   column must not stack a second one on top of it. */
.sp-split .sp-col > .mcat-sub:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ─── Gallery ───────────────────────────────────────────────── */
#galerie {
  /* Heaviest veil: a grid of photos already carries the section, so the
     backdrop is pushed further back here than in the text sections. */
  background: rgba(22, 17, 16, 0.93);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  padding: 110px 0 120px;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 230px;
  grid-auto-flow: dense;
  gap: 10px;
  margin-top: 56px;
}
.g-item {
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
  position: relative;
  cursor: zoom-in;
}
.g-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.g-item:hover img { transform: scale(1.05); }
.g-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 11, 10, 0.4), transparent 45%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  pointer-events: none;
}
.g-item:hover::after { opacity: 1; }

/* Asymmetric bento — 4 cols × 4 rows = 16 cells, every cell filled exactly once.
   1 feature 2×2 (4) + four 1×2 talls (8) + four 1×1 (4) = 16 ✓, 9 items.
   The talls are staggered at OFFSET rows (C:1-2, D:2-3, E/G:3-4) so no two rows
   repeat the same rhythm — reads irregular, "photos taking two slots here and
   there", not a neat grid. grid-auto-flow:dense backfills if a tile is missing.
   Map:  A A B C  /  A A D C  /  E F D G  /  E H I G   */
.g-item:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; } /* feature 2×2 */
.g-item:nth-child(2) { grid-column: 3;     grid-row: 1;     }
.g-item:nth-child(3) { grid-column: 4;     grid-row: 1 / 3; }
.g-item:nth-child(4) { grid-column: 3;     grid-row: 2 / 4; }
.g-item:nth-child(5) { grid-column: 1;     grid-row: 3 / 5; }
.g-item:nth-child(6) { grid-column: 2;     grid-row: 3;     }
.g-item:nth-child(7) { grid-column: 4;     grid-row: 3 / 5; }
.g-item:nth-child(8) { grid-column: 2;     grid-row: 4;     }
.g-item:nth-child(9) { grid-column: 3;     grid-row: 4;     }

/* ─── Kontakt ───────────────────────────────────────────────── */
#kontakt { padding: 120px 0 110px; }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: stretch;
  margin-top: 56px;
}
.contact-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 28px;
  align-content: start;
}
.k-block-hours { grid-column: 1 / -1; }
.k-head {
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin: 0 0 12px;
}
.k-body {
  font-family: var(--font-display);
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--text-primary);
  font-weight: 500;
  margin: 0;
}
.k-tel {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--text-primary);
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
  transition: color 0.25s var(--ease-out);
}
.k-tel::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent-copper);
  transform-origin: left;
  transform: scaleX(0.3);
  transition: transform 0.4s var(--ease-out);
}
.k-tel:hover { color: var(--accent-copper); }
.k-tel:hover::after { transform: scaleX(1); }
.hours-full { margin: 0; }
.hf-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--rule-soft);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 300;
}
.hf-row dt { color: var(--text-primary); }
.hf-row dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.hf-row.today dt, .hf-row.today dd {
  color: var(--accent-copper-hi);
  font-weight: 600;
}
.hf-row.today dt::after {
  content: " · dnes";
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-copper);
}
.k-soc { display: flex; gap: 22px; }
.k-soc a {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
  transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.k-soc a:hover { color: var(--accent-copper); border-color: var(--accent-copper); }

.contact-map {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  min-height: 520px;
  border: 1px solid var(--rule);
}
.contact-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.maplink {
  position: absolute;
  right: 14px;
  bottom: 14px;
  background: rgba(14, 11, 10, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 11px 18px;
  border-radius: 2px;
  border: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.maplink:hover { background: var(--accent-copper); color: #1A0F08; }

/* ─── Footer ────────────────────────────────────────────────── */
/* Translucent like every other band so the held frame really does run to the
   last pixel of the document — an opaque footer cut it off on a hard line. This
   is the heaviest veil on the page (0.93): the footer is the closing zone, so
   the imagery is present as texture only. No ramp needed at the top edge —
   the border-top rule is the boundary treatment, and a 5% alpha step either
   side of a 1px line is not resolvable. */
.site-footer {
  position: relative;
  z-index: 10;
  background: rgba(10, 8, 7, 0.93);
  color: var(--text-primary);
  padding: 88px clamp(20px, 4vw, 80px) 36px;
  border-top: 1px solid var(--rule-soft);
}
.foot-spine {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--rule-soft);
  max-width: 1280px;
  margin: 0 auto;
}
.foot-brand p {
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-muted);
  font-weight: 300;
  margin: 0;
}
.foot-logo {
  width: 62px;
  margin-bottom: 16px;
}
.foot-mark {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 12px;
}
.foot-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}
.foot-col a, .foot-addr, .foot-hours {
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-primary);
  font-weight: 300;
}
.foot-col a { transition: color 0.25s var(--ease-out); }
.foot-col a:hover { color: var(--accent-copper); }
.foot-hours { font-variant-numeric: tabular-nums; }
.foot-head {
  display: block;
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 8px;
}
.foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}
/* inovujme credit badge — sentence inherits the footer-bottom row style so it
   reads as one line with the copyright; only the wordmark keeps its brand look
   (bold + purple→teal gradient + tight tracking, always lowercase). */
.foot-bottom .footer-credit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  transition: opacity 0.25s var(--ease-out);
}
.foot-bottom .footer-credit:hover { opacity: 0.72; }
.foot-bottom .footer-credit:focus-visible {
  outline: 3px solid var(--accent-copper);
  outline-offset: 3px;
  border-radius: 4px;
}
.footer-credit-logo {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  /* The sentence renders in uppercase (caps height ~8px), the wordmark stays
     lowercase (x-height ~6px), so scale it up 1.33× to read at the same size. */
  font-size: 1.33em;
}
.footer-credit-text {
  background: linear-gradient(90deg, #8566ff 0%, #00c9a7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.footer-credit-tld { opacity: 0.75; }
.footer-credit-dot {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #00c9a7;
  box-shadow: 0 0 6px rgba(0, 201, 167, 0.7);
  animation: logo-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
  margin: 0 0.22em;
}
@keyframes logo-pulse {
  0%, 100% { opacity: 0.6; transform: scale(0.7); box-shadow: 0 0 4px rgba(0, 201, 167, 0.3); }
  50%      { opacity: 1;   transform: scale(1.5); box-shadow: 0 0 14px rgba(0, 201, 167, 0.9); }
}
/* ─── Lightbox / galerie ────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vh, 22px);
  padding: clamp(56px, 6vh, 76px) clamp(14px, 4vw, 40px) clamp(16px, 3vh, 30px);
  opacity: 0;
  transition: opacity 0.32s var(--ease-out);
}
.lightbox[hidden] { display: none; }
.lightbox.open { opacity: 1; }

.lb-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(38, 26, 18, 0.55) 0%, transparent 62%),
    rgba(8, 6, 5, 0.94);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  cursor: zoom-out;
}

/* Stage */
.lb-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.6vh, 18px);
  min-height: 0;
  max-width: 100%;
  margin: 0;
}
.lb-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.55),
    0 48px 120px -46px rgba(0, 0, 0, 0.95);
}
.lb-img {
  display: block;
  max-width: min(1240px, 92vw);
  max-height: calc(100vh - 272px);
  width: auto;
  height: auto;
  /* Native image drag-and-drop steals the pointer stream two moves into a
     drag — it killed drag-to-pan on the zoomed menu boards. Must stay off. */
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  transform: scale(0.965);
  opacity: 0;
  transition: transform 0.45s var(--ease-out), opacity 0.3s linear;
}
.lightbox.open .lb-img { transform: scale(1); }
.lightbox.is-ready .lb-img { opacity: 1; }

/* Slide direction cue on change */
.lightbox.slide-next .lb-img { animation: lb-in-next 0.42s var(--ease-out) both; }
.lightbox.slide-prev .lb-img { animation: lb-in-prev 0.42s var(--ease-out) both; }
@keyframes lb-in-next {
  from { opacity: 0; transform: translateX(46px) scale(0.985); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes lb-in-prev {
  from { opacity: 0; transform: translateX(-46px) scale(0.985); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

.lb-spinner {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-top-color: var(--accent-copper);
  animation: lb-spin 0.75s linear infinite;
  opacity: 0;
  transition: opacity 0.2s linear;
  pointer-events: none;
}
.lightbox.is-loading .lb-spinner { opacity: 1; }
@keyframes lb-spin { to { transform: rotate(360deg); } }

/* Caption */
.lb-caption {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  max-width: min(1240px, 92vw);
  text-align: center;
  font-family: var(--font-body);
}
.lb-count {
  flex-shrink: 0;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.lb-count .lb-index {
  font-style: normal;
  color: var(--accent-copper);
}
.lb-text {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

/* Buttons */
.lb-btn {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(20, 15, 12, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-primary);
  cursor: pointer;
  padding: 0;
  transition:
    background 0.25s var(--ease-out),
    border-color 0.25s var(--ease-out),
    color 0.25s var(--ease-out),
    transform 0.25s var(--ease-out),
    opacity 0.25s var(--ease-out);
}
.lb-btn svg {
  width: 40%;
  height: 40%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lb-btn:hover {
  background: var(--accent-copper);
  border-color: var(--accent-copper);
  color: #1A0F08;
}
.lb-btn:focus-visible {
  outline: 2px solid var(--accent-copper);
  outline-offset: 3px;
}
.lb-btn:active { transform: scale(0.94); }
.lb-btn[disabled] { opacity: 0.28; pointer-events: none; }

.lb-close {
  top: clamp(14px, 2.4vh, 22px);
  right: clamp(14px, 3vw, 26px);
  width: 46px;
  height: 46px;
}
.lb-nav {
  top: 50%;
  width: clamp(48px, 4vw, 58px);
  height: clamp(48px, 4vw, 58px);
  transform: translateY(-50%);
}
.lb-nav:active { transform: translateY(-50%) scale(0.94); }
.lb-prev { left: clamp(12px, 2.6vw, 32px); }
.lb-next { right: clamp(12px, 2.6vw, 32px); }

/* Thumbnail rail */
.lb-thumbs {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(1240px, 92vw);
  padding: 4px 2px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-behavior: smooth;
  flex-shrink: 0;
}
.lb-thumbs::-webkit-scrollbar { display: none; }
.lb-thumb {
  flex: 0 0 auto;
  width: 78px;
  height: 54px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: none;
  opacity: 0.42;
  filter: grayscale(0.55);
  position: relative;
  transition:
    opacity 0.28s var(--ease-out),
    filter 0.28s var(--ease-out),
    transform 0.28s var(--ease-out);
}
.lb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lb-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: border-color 0.28s var(--ease-out);
}
.lb-thumb:hover { opacity: 0.8; filter: grayscale(0); transform: translateY(-2px); }
.lb-thumb:focus-visible { outline: 2px solid var(--accent-copper); outline-offset: 2px; }
.lb-thumb.is-active {
  opacity: 1;
  filter: grayscale(0);
}
.lb-thumb.is-active::after { border-color: var(--accent-copper); }

/* Single-image mode (menu boards) — hide the carousel chrome */
.lightbox.is-solo .lb-nav,
.lightbox.is-solo .lb-thumbs,
.lightbox.is-solo .lb-count,
.lightbox.is-solo .lb-caption { display: none; }

/* Solo mode = the chalkboard menu boards: open MUCH larger, and become
   zoomable / pannable "like a map".
   The aperture is the WHOLE SCREEN, never a shrink-to-fit box. A frame sized
   to the poster clips the enlarged image at the edges of a window far narrower
   than the browser window — at 200% the poster was cut off with ~460px of empty
   backdrop on either side. Pinning the frame to the viewport lets the poster
   grow into all of it, so zooming actually reveals more of the board. */
.lightbox.is-solo .lb-img {
  max-width: min(1500px, 96vw);
  max-height: calc(100vh - 168px);   /* clears the floating zoom toolbar at 100% */
  transform-origin: 50% 50%;
  border-radius: 6px;
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.55),
    0 48px 120px -46px rgba(0, 0, 0, 0.95);
  cursor: zoom-in;
}
.lightbox.is-solo .lb-frame {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  z-index: 1;              /* above .lb-backdrop, below .lb-btn (2) / .lb-zoom-ui (3) */
  border-radius: 0;
  box-shadow: none;
  touch-action: none;
  cursor: zoom-out;        /* empty area beside the poster still closes */
}
.lightbox.is-solo.is-zoomed .lb-img { cursor: grab; }
.lightbox.is-solo.is-panning .lb-img { cursor: grabbing; }

/* "You can move this now" pill — sits above the zoom cluster, JS toggles .is-on */
.lb-hint {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(clamp(14px, 2.6vh, 26px) + 64px);
  transform: translate(-50%, 8px);
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(20, 15, 12, 0.78);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 10px 34px -16px rgba(0, 0, 0, 0.9);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s var(--ease-out),
    transform 0.36s var(--ease-out),
    visibility 0s linear 0.36s;
}
.lb-hint.is-on {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s, 0s, 0s;
}

/* Zoom control cluster — only rendered in solo mode */
.lb-zoom-ui {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(14px, 2.6vh, 26px);
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(20, 15, 12, 0.72);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 10px 34px -14px rgba(0, 0, 0, 0.9);
}
.lightbox.is-solo .lb-zoom-ui { display: flex; }
.lb-zoom-btn {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0;
  transition:
    background 0.22s var(--ease-out),
    color 0.22s var(--ease-out),
    transform 0.22s var(--ease-out);
}
.lb-zoom-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lb-zoom-btn:hover { background: var(--accent-copper); color: #1A0F08; }
.lb-zoom-btn:focus-visible { outline: 2px solid var(--accent-copper); outline-offset: 2px; }
.lb-zoom-btn:active { transform: scale(0.9); }
.lb-zoom-btn[disabled] { opacity: 0.3; pointer-events: none; }
.lb-zoom-pct {
  min-width: 52px;
  padding: 0 2px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  user-select: none;
}

/* ─── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .marquee-wrap { display: none; }
  .hero-meta .dot { animation: none; }
  /* The credit-badge dot is a tiny decorative "live badge" indicator, not a
     motion risk — exempt it from the global animation cap so it keeps pulsing. */
  .footer-credit-dot {
    animation-duration: 2.4s !important;
    animation-iteration-count: infinite !important;
  }
  .scroll-cue svg { animation: none; }
  .loader-logo, .loader-bar i { animation: none; }
  .rv {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* The poster strip runs its endless transform loop in every mode now, so it
     keeps overflow:hidden (from .sig-loop) here too — no native scroll fallback.
     NB: never add background-attachment here — a pinned backdrop is not
     an animation, and un-pinning it makes .interlude disagree with what
     headless testing shows. */
  .sp-marker { transition: none !important; }
  .sp-tab { transition: color 0.01ms !important; }
  .lb-img, .lb-stage { animation: none !important; }
}