/* ═══════════════════════════════════════════════════════════
   CLUB 4 · BEČEJ
   Ink & Ivory. Script & Grotesque. Quiet luxury.
   ═══════════════════════════════════════════════════════════ */

:root {
  --ink: #0e0d0b;
  --ink-2: #15130f;
  --ink-3: #1d1a15;
  --cream: #f0ebde;
  --cream-70: rgba(240, 235, 222, 0.7);
  --cream-45: rgba(240, 235, 222, 0.45);
  --cream-16: rgba(240, 235, 222, 0.16);
  --cream-08: rgba(240, 235, 222, 0.08);
  --cream-04: rgba(240, 235, 222, 0.045);
  --bronze: #c2a05f;
  --bronze-soft: rgba(194, 160, 95, 0.35);
  --bronze-dark: #8a6d2f;   /* bronze that still reads on cream */
  --gold: #c2a05f;          /* the swatch the client sent: hero plate, badge, loader */
  --ink-70: rgba(14, 13, 11, 0.7);
  --ink-45: rgba(14, 13, 11, 0.45);
  --ink-14: rgba(14, 13, 11, 0.14);
  --ink-07: rgba(14, 13, 11, 0.06);

  --font-script: 'Great Vibes', cursive;
  --font-didone: 'Bodoni Moda', 'Didot', serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', 'Futura', sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-luxe: cubic-bezier(0.65, 0, 0.15, 1);

  --pad: clamp(1.25rem, 5vw, 5rem);

  /* nav height; js/main.js measures the real value on load and resize,
     this default keeps the sticky category bar from sliding on load */
  --navh: 82px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* stops mobile Safari inflating text in some blocks, which widens
     rows past the viewport and forces a horizontal scroll */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* clip, not hidden: it blocks sideways panning without turning the
     root into a scroll container, which would break position: sticky */
  overflow-x: clip;
}
html.lenis { height: auto; scroll-behavior: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.65;
  letter-spacing: 0.015em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

::selection { background: var(--bronze); color: var(--ink); }

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ─── logo mark (real Club 4 SVG) ───────────────────────── */
.logo-mark { display: block; width: 100%; height: auto; }
.lm-club { fill: currentColor; }
.lm-four { fill: var(--logo-four, currentColor); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ─── grain ─────────────────────────────────────────────── */
.grain {
  /* only just larger than the viewport: a 3x viewport fixed layer is a
     needless paint cost and another way for iOS to allow panning */
  position: fixed; inset: -8%;
  pointer-events: none; z-index: 2000;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 0.9s steps(4) infinite;
}
@keyframes grainShift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 3%); }
  50% { transform: translate(3%, -2%); }
  75% { transform: translate(-3%, -3%); }
  100% { transform: translate(2%, 2%); }
}

/* ─── cursor ────────────────────────────────────────────── */
.cursor, .cursor-follower {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 3000;
  border-radius: 50%;
  will-change: transform;
}
.cursor {
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--bronze);
}
.cursor-follower {
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border: 1px solid var(--cream-45);
  display: flex; align-items: center; justify-content: center;
  transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out),
              margin 0.35s var(--ease-out), background-color 0.35s var(--ease-out),
              border-color 0.35s var(--ease-out);
}
.cursor-follower__label {
  font-family: var(--font-body);
  font-size: 0.65rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); opacity: 0;
  transition: opacity 0.25s;
}
.cursor-follower.is-label {
  width: 84px; height: 84px;
  margin: -42px 0 0 -42px;
  background: var(--cream);
  border-color: var(--cream);
}
.cursor-follower.is-label .cursor-follower__label { opacity: 1; }
.cursor-follower.is-press { transform: scale(0.8); }
@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-follower { display: none; }
}

/* ─── scroll progress ───────────────────────────────────── */
.progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 1500;
}
.progress span {
  display: block; height: 100%; width: 100%;
  background: var(--bronze);
  transform-origin: 0 0;
  transform: scaleX(0);
}

/* ─── loader ────────────────────────────────────────────── */
.loader {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
}
.loader__curtain {
  position: absolute; inset: 0;
  background: var(--gold);
  will-change: transform;
}
.loader__curtain-band {
  position: absolute; top: 100%; left: 0; right: 0;
  height: 14vh;
  /* ink, so the wipe reads clearly against the gold sheet */
  background: var(--ink);
}
.loader__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: 1.75rem;
}
.loader__logo {
  width: clamp(230px, 42vw, 360px);
  /* the mark in full black on the gold sheet, exactly as it is printed */
  color: var(--ink);
  --logo-four: var(--ink);
}
/* hidden up front so the mark never flashes before the intro tween */
.loader__logo .lm-club,
.loader__logo .lm-four { opacity: 0; }
.loader__line {
  width: min(260px, 50vw); height: 1px;
  background: var(--ink-14);
  overflow: hidden;
}
.loader__line-fill {
  display: block; height: 100%; width: 100%;
  background: var(--ink);
  transform-origin: 0 0;
  transform: scaleX(0);
}
.loader__count {
  font-family: var(--font-didone);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  color: var(--ink);
}
.loader__count::after { content: ' %'; }

/* ─── buttons ───────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.05rem 2.4rem;
  font-family: var(--font-body);
  font-size: 0.78rem; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  border-radius: 999px;
  overflow: hidden;
  will-change: transform;
}
.btn span { position: relative; z-index: 2; }
.btn::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: inherit;
  transform: translateY(102%);
}
.btn--solid {
  background: var(--cream); color: var(--ink);
  border: 1px solid var(--cream);
}
.btn--solid::before { background: var(--bronze); }
.btn--ghost {
  border: 1px solid var(--cream-45);
  color: var(--cream);
}
.btn--ghost::before { background: var(--cream); }
.btn--full { width: 100%; }
.section--cream .btn--ghost { border-color: var(--ink-45); color: var(--ink); }
.section--cream .btn--ghost::before { background: var(--ink); }

@media (hover: hover) and (pointer: fine) {
  .btn { transition: color 0.4s var(--ease-luxe), border-color 0.4s var(--ease-luxe); }
  .btn::before { transition: transform 0.5s var(--ease-luxe); }
  .btn:hover::before { transform: translateY(0); }
  .btn--solid:hover { color: var(--ink); border-color: var(--bronze); }
  .btn--ghost:hover { color: var(--ink); border-color: var(--cream); }
  .section--cream .btn--ghost:hover { color: var(--cream); }
}

/* ─── nav ───────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.15rem var(--pad);
  color: var(--cream);
  transition: transform 0.5s var(--ease-luxe);
}
.nav::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: rgba(14, 13, 11, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--cream-08);
  opacity: 0;
  transition: opacity 0.45s var(--ease-luxe);
}
.nav.is-solid::before { opacity: 1; }
.nav.is-hidden { transform: translateY(-110%); }
.nav__right {
  grid-column: 3; justify-self: end;
  display: flex; align-items: center;
  gap: clamp(0.5rem, 1.2vw, 0.9rem);
}
.nav__logo {
  grid-column: 1; justify-self: start;
  display: block;
  width: 96px;
}
/* absolutely centred so uneven side columns can never shift it */
.nav__links {
  position: absolute; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 2.4rem;
}
.nav__link {
  position: relative;
  font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 0.3rem 0;
}
.nav__link::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 0;
}
/* the menu link carries the accent colour, same as in the mobile menu */
.nav__link--accent { color: var(--bronze); }
.nav__cta {
  border-color: var(--cream-45); color: var(--cream);
  padding: 0.72rem 1.6rem;
}
.nav__burger {
  display: none;
  flex-direction: column; gap: 7px;
  padding: 10px;
  margin-right: -10px;
}
.nav__burger span {
  display: block; width: 30px; height: 1.5px;
  background: currentColor;
  transition: transform 0.4s var(--ease-luxe);
}
.nav__burger.is-open span:first-child { transform: translateY(4.25px) rotate(45deg); }
.nav__burger.is-open span:last-child { transform: translateY(-4.25px) rotate(-45deg); }

@media (hover: hover) and (pointer: fine) {
  .nav__link::after { transition: transform 0.45s var(--ease-luxe); }
  .nav__link:hover::after { transform: scaleX(1); transform-origin: 0 0; }
}

.nav__back {
  grid-column: 1; justify-self: start;
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  white-space: nowrap;
}
/* centred with a negative margin, not a transform, so the magnetic
   hover tween on the link cannot cancel the centring */
.nav__logo--center {
  position: absolute; left: 50%;
  /* auto placement, otherwise the inherited grid-column makes the grid
     area the containing block and 50% resolves against that column */
  grid-column: auto;
  width: 96px; margin-left: -48px;
}
.nav--menu .nav__cta { white-space: nowrap; }

/* ─── language switcher ─────────────────────────────────── */
.lang { position: relative; flex: 0 0 auto; }
.lang__btn {
  display: flex; align-items: center; gap: 0.42rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--cream-16);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.7rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cream);
  line-height: 1;
  transition: border-color 0.3s, background-color 0.3s;
}
.lang__globe {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 1.3;
  opacity: 0.7;
}
.lang__chev {
  width: 8px; height: 5px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.7;
  transition: transform 0.35s var(--ease-out);
}
.lang.is-open .lang__chev { transform: rotate(180deg); }
.lang.is-open .lang__btn { border-color: var(--bronze-soft); }

.lang__menu {
  position: absolute; top: calc(100% + 0.55rem); right: 0;
  min-width: 168px;
  padding: 0.4rem;
  background: rgba(21, 19, 15, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--cream-16);
  border-radius: 10px;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.5);
  opacity: 0; visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s var(--ease-out), transform 0.38s var(--ease-out), visibility 0.3s;
}
.lang.is-open .lang__menu {
  opacity: 1; visibility: visible;
  transform: translateY(0);
}
.lang__menu li { display: block; }
.lang__menu button {
  display: flex; align-items: center; gap: 0.75rem;
  width: 100%;
  padding: 0.62rem 0.75rem;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.88rem; font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--cream-70);
  text-align: left;
  transition: background-color 0.25s, color 0.25s;
}
.lang__menu button span {
  font-size: 0.6rem; letter-spacing: 0.18em;
  color: var(--bronze);
  min-width: 22px;
}
.lang__menu button[aria-selected="true"] {
  color: var(--cream);
  background: var(--cream-08);
}
@media (hover: hover) and (pointer: fine) {
  .lang__btn:hover { border-color: var(--cream-45); }
  .lang__menu button:hover { background: var(--cream-08); color: var(--cream); }
}

/* mobile fullscreen menu */
.mobmenu {
  position: fixed; inset: 0; z-index: 900;
  background: var(--ink-2);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--ease-luxe);
}
.mobmenu.is-open { clip-path: inset(0 0 0 0); }
.mobmenu__links { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
.mobmenu__link {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 300;
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.mobmenu.is-open .mobmenu__link { opacity: 1; transform: none; }
.mobmenu.is-open .mobmenu__link:nth-child(1) { transition-delay: 0.20s; }
.mobmenu.is-open .mobmenu__link:nth-child(2) { transition-delay: 0.27s; }
.mobmenu.is-open .mobmenu__link:nth-child(3) { transition-delay: 0.34s; }
.mobmenu.is-open .mobmenu__link:nth-child(4) { transition-delay: 0.41s; }
.mobmenu__link--accent { font-style: italic; color: var(--bronze); }
.mobmenu__foot { font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cream-45); }

/* ─── hero ──────────────────────────────────────────────── */
/* Dark room, and the black mark sits on a gold plate that lifts it off
   the photograph the way the printed logo sits on its card. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 7rem var(--pad) 5rem;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
}
.hero__bg {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.75) brightness(0.9);
  animation: heroZoom 34s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 75% at 50% 45%, rgba(14, 13, 11, 0.62), rgba(14, 13, 11, 0.88) 78%),
    linear-gradient(180deg, rgba(14, 13, 11, 0.72), rgba(14, 13, 11, 0.5) 45%, var(--ink) 98%);
}
.hero__glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 45% at 50% 38%, rgba(194, 160, 95, 0.13), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(194, 160, 95, 0.07), transparent 60%);
  pointer-events: none;
}
.hero__rings { position: absolute; inset: 0; pointer-events: none; }
.hero__rings span {
  position: absolute; left: 50%; top: 42%;
  border: 1px solid var(--cream-08);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.hero__rings span:nth-child(1) { width: 44vmin; height: 44vmin; }
.hero__rings span:nth-child(2) { width: 66vmin; height: 66vmin; animation: ringPulse 7s ease-in-out infinite; }
.hero__rings span:nth-child(3) { width: 90vmin; height: 90vmin; animation: ringPulse 7s ease-in-out 1.2s infinite; }
@keyframes ringPulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
}

.hero__eyebrow {
  font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--cream-70);
  margin-bottom: 1rem;
}

.hero__title {
  position: relative;
  margin: 1rem 0 2rem;
  width: clamp(300px, 58vw, 820px);
}
/* A soft warm wash rather than a solid plate: never fully opaque, so it
   settles into the photograph, and spread the full width of the viewport
   so the ramp has room to die out gently instead of hugging the mark.
   `farthest-side` is what makes it reach zero exactly at its own edge;
   the default farthest-corner sizing cut it off while still ~48% opaque
   and that was the hard rim. The stops are close together so the falloff
   is even, with no step larger than 0.09. */
.hero__plate {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  aspect-ratio: 1.7 / 1;
  pointer-events: none;
  background: radial-gradient(ellipse farthest-side at center,
    rgba(194, 160, 95, 0.75) 0%,
    rgba(194, 160, 95, 0.75) 34%,
    rgba(194, 160, 95, 0.71) 44%,
    rgba(194, 160, 95, 0.66) 52%,
    rgba(194, 160, 95, 0.58) 60%,
    rgba(194, 160, 95, 0.49) 68%,
    rgba(194, 160, 95, 0.39) 75%,
    rgba(194, 160, 95, 0.30) 81%,
    rgba(194, 160, 95, 0.21) 87%,
    rgba(194, 160, 95, 0.13) 92%,
    rgba(194, 160, 95, 0.06) 96%,
    rgba(194, 160, 95, 0.02) 98.5%,
    rgba(194, 160, 95, 0)    100%);
}
.hero__logo {
  position: relative;
  color: var(--ink);
  --logo-four: var(--ink);
}
.hero__logo use { will-change: transform, opacity; }
/* hidden up front so the mark never flashes before the intro tween */
.hero__logo .lm-club,
.hero__logo .lm-four { opacity: 0; }

.hero__tag {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  font-weight: 300;
  font-style: italic;
  color: var(--cream-70);
  margin-bottom: 2.6rem;
}
@media (max-width: 720px) {
  /* a light italic serif over a photo is hard to read on a phone */
  .hero__tag {
    font-weight: 500;
    font-size: 1.3rem;
    color: var(--cream);
    text-shadow: 0 1px 14px rgba(14, 13, 11, 0.55);
  }
}
.hero__cta { display: flex; gap: 1.1rem; flex-wrap: wrap; justify-content: center; }

.hero__badge {
  position: absolute; right: clamp(1rem, 6vw, 5rem); bottom: clamp(4.5rem, 10vh, 7rem);
  width: 120px; height: 120px;
}
.hero__badge-ring {
  width: 100%; height: 100%;
  overflow: visible;
  animation: spin 20s linear infinite;
}
.hero__badge-ring text {
  font-family: var(--font-body);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  fill: var(--gold);
}
.hero__badge-num {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 38px; height: auto;
  fill: var(--gold);
}
@keyframes spin { to { transform: rotate(360deg); } }

.hero__scroll {
  position: absolute; left: 50%; bottom: 2rem;
  transform: translateX(-50%);
  display: none;
  flex-direction: column; align-items: center; gap: 0.7rem;
}
.hero__scroll-line {
  display: block; width: 1px; height: 54px;
  background: var(--cream-45);
  overflow: hidden;
  position: relative;
}
.hero__scroll-line::after {
  content: '';
  position: absolute; left: 0; top: -100%;
  width: 100%; height: 100%;
  background: var(--gold);
  animation: scrollDrip 2.2s var(--ease-luxe) infinite;
}
@keyframes scrollDrip {
  0% { top: -100%; }
  55% { top: 0; }
  100% { top: 100%; }
}
.hero__scroll-text {
  font-size: 0.62rem; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--cream-45);
}

/* ─── marquee ───────────────────────────────────────────── */
.marquee {
  border-top: 1px solid var(--cream-16);
  border-bottom: 1px solid var(--cream-16);
  padding: 1.3rem 0;
  overflow: hidden;
  background: var(--ink-2);
}
.marquee__track { display: flex; width: max-content; }
.marquee__group {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 3rem;
  padding-right: 3rem;
  line-height: 1;
  animation: marqueeMove 30s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.marquee__group span {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 300;
  font-style: italic;
  white-space: nowrap;
  color: var(--cream-70);
}
.marquee__group i { color: var(--bronze); font-style: normal; font-size: 0.8rem; }
@keyframes marqueeMove { to { transform: translateX(-100%); } }

/* ─── sections shared ───────────────────────────────────── */
.section { padding: clamp(5rem, 12vh, 9rem) var(--pad); position: relative; }
.section--cream { background: var(--cream); color: var(--ink); }
.section__head {
  display: flex; align-items: center; gap: 1.2rem;
  margin-bottom: 2.2rem;
}
.section__index {
  font-family: var(--font-didone);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--bronze);
}
.section__label {
  font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.38em; text-transform: uppercase;
  color: inherit; opacity: 0.6;
}
.section__label::before {
  content: '';
  display: inline-block;
  width: 42px; height: 1px;
  background: var(--bronze);
  vertical-align: middle;
  margin-right: 1rem;
}

/* the mask that hides the sliding line also clipped descenders (g, j, p);
   the padding gives them room and the negative margin cancels it again */
[data-split] .line { display: block; overflow: hidden; padding-bottom: 0.22em; margin-bottom: -0.22em; }
[data-split] .line > span { display: block; will-change: transform; }

.story__title, .signature__title, .menu__title, .contact__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 6.5vw, 5.2rem);
  line-height: 1.0;
  letter-spacing: -0.01em;
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
  max-width: 18ch;
}
.story__title em, .signature__title em, .menu__title em, .contact__title em {
  font-style: italic;
  color: var(--bronze);
}
.section--cream .signature__title em { color: var(--ink); }

/* ─── story ─────────────────────────────────────────────── */
.story { overflow: hidden; }
.story__watermark {
  position: absolute;
  right: -0.05em; top: 8%;
  font-family: var(--font-script);
  font-size: clamp(10rem, 26vw, 22rem);
  line-height: 1;
  color: var(--cream-04);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.story__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(230px, 300px) 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  max-width: 68rem;
  align-items: start;
}
.story__emblem {
  border: 1px solid var(--cream-16);
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 1.1rem;
  position: relative;
}
.story__emblem::before, .story__emblem::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  border: 1px solid var(--bronze);
}
.story__emblem::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.story__emblem::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.story__emblem-logo {
  width: 160px;
  color: var(--cream);
  --logo-four: var(--cream);
}
.story__emblem-est {
  font-family: var(--font-didone);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.28em;
  color: var(--cream-70);
}
.story__emblem-diamond { color: var(--bronze); font-size: 0.7rem; }
.story__emblem-coords, .story__emblem-place {
  font-size: 0.68rem; font-weight: 400;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--cream-45);
}
.story__content { max-width: 56ch; }
.story__lead {
  position: relative;
  padding-left: clamp(3.6rem, 6vw, 4.9rem);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.45;
  font-weight: 400;
  color: var(--cream);
}
.story__dropcap {
  position: absolute;
  left: 0; top: -0.12em;
  font-family: var(--font-script);
  font-size: clamp(3.2rem, 5.5vw, 4.4rem);
  line-height: 1;
  color: var(--bronze);
}
.story__rule {
  height: 1px;
  background: linear-gradient(90deg, var(--bronze), transparent 75%);
  margin: 2rem 0;
}
.story__content > p:not(.story__lead) { color: var(--cream-70); }
.story__content > p:not(.story__lead) + p { margin-top: 1.2rem; }

.story__gallery {
  position: relative;
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  max-width: 68rem;
  margin-top: clamp(3.5rem, 8vh, 6rem);
}
.story__photo { margin: 0; }
.story__photo--tall { margin-top: clamp(2.5rem, 6vh, 4.5rem); }
.story__photo-frame {
  overflow: hidden;
  border-radius: 4px;
}
.story__photo--wide .story__photo-frame { aspect-ratio: 16 / 10; }
.story__photo--tall .story__photo-frame { aspect-ratio: 4 / 5; }
.story__photo-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.15);
  filter: saturate(0.88);
  will-change: transform;
}
.story__photo figcaption {
  margin-top: 0.8rem;
  font-size: 0.68rem; font-weight: 400;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--cream-45);
}
.story__photo figcaption::before {
  content: '';
  display: inline-block;
  width: 26px; height: 1px;
  background: var(--bronze);
  vertical-align: middle;
  margin-right: 0.8rem;
}

.story__stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: clamp(3.5rem, 8vh, 6rem);
  padding-top: 3rem;
  border-top: 1px solid var(--cream-16);
}
.stat { border-left: 1px solid var(--cream-16); padding-left: 1.4rem; }
.stat__num {
  display: block;
  font-family: var(--font-didone);
  font-style: italic; font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 4rem);
  color: var(--cream);
  line-height: 1;
  margin-bottom: 0.6rem;
}
.stat__num em { font-style: italic; color: var(--bronze); }
.stat__label {
  font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--cream-45);
}

/* ─── signature dishes ──────────────────────────────────── */
.dish-float {
  position: fixed; top: 0; left: 0;
  width: clamp(220px, 23vw, 310px);
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  pointer-events: none;
  z-index: 600;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 24px 60px rgba(14, 13, 11, 0.35);
}
.dish-float img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease-out;
}
.dish-float img.is-active { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .dish-float { display: none; }
}

.dish__thumb { display: none; }

.signature__list { border-top: 1px solid var(--ink-14); }
.dish {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: clamp(1.2rem, 4vw, 3.5rem);
  padding: clamp(1.6rem, 4vh, 2.4rem) 1rem;
  border-bottom: 1px solid var(--ink-14);
  position: relative;
  overflow: hidden;
  background: transparent;
  transition: background-color 0.25s ease-out;
}
.dish::after {
  content: '';
  position: absolute; left: 0; top: 18%; bottom: 18%;
  width: 2px;
  background: var(--bronze);
  transform: scaleY(0);
  transform-origin: 50% 0;
}
.dish__ghost {
  position: absolute; right: 5%; top: 50%;
  transform: translateY(-50%) scale(0.9);
  font-family: var(--font-didone);
  font-style: italic;
  font-size: clamp(4.5rem, 9vw, 8rem);
  line-height: 1;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
}
.dish__num {
  font-family: var(--font-didone);
  font-style: italic;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  color: var(--ink-45);
  transition: color 0.25s ease-out;
}
.dish__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.12;
  position: relative;
  display: inline-block;
  transform: translateX(0);
}
.dish__name::after {
  content: '';
  position: absolute; left: 0; bottom: -0.1em;
  width: 100%; height: 1px;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: 100% 0;
}
.dish__desc {
  color: var(--ink-70);
  font-size: 0.98rem;
  max-width: 46ch;
  margin-top: 0.35rem;
}
.dish__price {
  font-family: var(--font-didone);
  font-style: italic; font-weight: 500;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  white-space: nowrap;
}
.dish__price em { font-size: 0.6em; opacity: 0.6; }
.dish__arrow {
  font-family: var(--font-body);
  font-size: 1.35rem;
  color: var(--bronze);
  opacity: 0;
  transform: translateX(-10px);
}

@media (hover: hover) and (pointer: fine) {
  .dish::after { transition: transform 0.4s var(--ease-luxe); }
  .dish__ghost { transition: opacity 0.45s ease-out, transform 0.55s var(--ease-luxe); }
  .dish__name { transition: transform 0.4s var(--ease-luxe); }
  .dish__name::after { transition: transform 0.35s var(--ease-luxe); }
  .dish__price { transition: color 0.3s ease-out; }
  .dish__arrow { transition: opacity 0.25s ease-out, transform 0.3s var(--ease-out); }
  .dish:hover { background: var(--ink-07); }
  .dish:hover::after { transform: scaleY(1); }
  .dish:hover .dish__ghost { opacity: 0.06; transform: translateY(-50%) scale(1); }
  .dish:hover .dish__num { color: var(--bronze); }
  .dish:hover .dish__name { transform: translateX(10px); }
  .dish:hover .dish__name::after { transform: scaleX(1); transform-origin: 0 0; }
  .dish:hover .dish__price { color: var(--bronze); }
  .dish:hover .dish__arrow { opacity: 1; transform: translateX(0); }
}

/* ─── meni (index) ──────────────────────────────────────── */
.menu .section__head { justify-content: center; }
.menu__title { margin-left: auto; margin-right: auto; text-align: center; }
.menu__rows {
  border-top: 1px solid var(--cream-16);
  max-width: 56rem;
  margin: 0 auto;
}
.menu-row {
  display: grid;
  /* the name column is content sized so it never wraps; the hint takes
     the slack and truncates instead */
  grid-template-columns: 3.2rem auto 1fr 2rem;
  align-items: center;
  gap: 1.4rem;
  padding: 1.45rem 0.6rem;
  border-bottom: 1px solid var(--cream-16);
}
.menu-row__num {
  font-family: var(--font-didone);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--bronze);
}
.menu-row__name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 4vw, 2.7rem);
  line-height: 1.1;
  display: inline-block;
  white-space: nowrap;
  transform: translateX(0);
}
.menu-row__hint {
  justify-self: end;
  min-width: 0; max-width: 100%;
  font-size: 0.8rem; letter-spacing: 0.14em;
  color: var(--cream-45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateX(-12px);
}
.menu-row__arrow {
  font-family: var(--font-body);
  font-size: 1.3rem;
  color: var(--bronze);
  opacity: 0;
  transform: translateX(-14px);
}
.menu__cta { margin-top: 3rem; text-align: center; }

@media (hover: hover) and (pointer: fine) {
  .menu-row__name { transition: color 0.3s ease-out, transform 0.45s var(--ease-luxe); }
  .menu-row__hint, .menu-row__arrow {
    transition: opacity 0.3s ease-out, transform 0.4s var(--ease-out);
  }
  .menu-row:hover .menu-row__name { color: var(--bronze); transform: translateX(12px); }
  .menu-row:hover .menu-row__hint,
  .menu-row:hover .menu-row__arrow { opacity: 1; transform: translateX(0); }
}

/* ─── gallery ───────────────────────────────────────────── */
.gallery__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 6.5vw, 5.2rem);
  line-height: 1.0;
  letter-spacing: -0.01em;
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
  /* no cap: the two <br> halves are meant to be one line each */
  max-width: none;
}
.gallery__title em { font-style: italic; color: var(--ink); }

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: clamp(170px, 21vw, 250px);
  grid-auto-flow: dense;
  gap: clamp(0.5rem, 1.2vw, 0.9rem);
}
.gallery__item--tall { grid-row: span 2; }
.gallery__item--wide { grid-column: span 2; }

.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background: var(--ink);
}
.gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* the zoom and the caption share one easing so they read as one move */
  transition: transform 0.9s var(--ease-luxe), filter 0.6s var(--ease-out);
  will-change: transform;
}
.gallery__item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.6rem 1.1rem 1rem;
  background: linear-gradient(to top, rgba(14, 13, 11, 0.94), rgba(14, 13, 11, 0.72) 45%, rgba(14, 13, 11, 0));
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  line-height: 1.2;
  pointer-events: none;
}
.gallery__item figcaption span { display: block; }

@media (hover: hover) and (pointer: fine) {
  /* the caption is parked below the frame and slides up on hover */
  .gallery__item figcaption {
    transform: translateY(101%);
    transition: transform 0.6s var(--ease-luxe);
  }
  .gallery__item figcaption span {
    transform: translateY(0.6rem);
    opacity: 0;
    transition: transform 0.6s var(--ease-luxe) 0.06s, opacity 0.45s ease-out 0.06s;
  }
  .gallery__item:hover img { transform: scale(1.07); filter: brightness(0.92); }
  .gallery__item:hover figcaption { transform: translateY(0); }
  .gallery__item:hover figcaption span { transform: translateY(0); opacity: 1; }
}

/* ─── contact ───────────────────────────────────────────── */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* the phone panel: calling is how a table actually gets booked, so it
   carries the weight the form used to */
.contact__call {
  position: relative;
  border: 1px solid var(--cream-16);
  padding: clamp(1.6rem, 4vw, 2.4rem);
}
.contact__call::before,
.contact__call::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  border: 1px solid var(--bronze);
}
.contact__call::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.contact__call::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.contact__call-label {
  display: block;
  font-size: 0.68rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 0.4rem;
}
.phone {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--cream-16);
}
.phone__num {
  font-family: var(--font-didone);
  font-style: italic; font-weight: 500;
  font-size: clamp(1.45rem, 4.4vw, 2rem);
  line-height: 1.1;
  color: var(--cream);
  white-space: nowrap;
}
.phone__arrow {
  font-family: var(--font-body);
  font-size: 1.2rem;
  color: var(--bronze);
  opacity: 0;
  transform: translateX(-8px);
}
.contact__call-note {
  margin-top: 1.3rem;
  font-size: 0.92rem;
  color: var(--cream-45);
  max-width: 34ch;
}
@media (hover: hover) and (pointer: fine) {
  .phone { transition: padding-left 0.4s var(--ease-luxe); }
  .phone__num { transition: color 0.3s ease-out; }
  .phone__arrow { transition: opacity 0.3s ease-out, transform 0.35s var(--ease-out); }
  .phone:hover { padding-left: 0.7rem; }
  .phone:hover .phone__num { color: var(--bronze); }
  .phone:hover .phone__arrow { opacity: 1; transform: translateX(0); }
}

/* no frames on this side: the details breathe on open space, and the
   bordered phone panel opposite carries all the structure */
.contact__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
}
.card { padding: 0; }
.card__label {
  display: block;
  font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 0.7rem;
}
.card p { color: var(--cream-70); font-size: 0.95rem; }
.card__link {
  margin-top: 0.9rem;
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cream-70);
}
.hours { display: flex; flex-direction: column; gap: 0.5rem; }
.hours li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.8rem;
}
.hours span { font-size: 0.9rem; color: var(--cream-70); }
.hours em {
  font-family: var(--font-didone);
  font-style: italic;
  color: var(--cream);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.info-link {
  position: relative;
  display: inline-block;
  color: var(--cream);
}
.info-link::after {
  content: '';
  position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--bronze);
  transform: scaleX(0); transform-origin: 100% 0;
}
.section--cream .info-link { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .info-link::after { transition: transform 0.45s var(--ease-luxe); }
  .info-link:hover::after { transform: scaleX(1); transform-origin: 0 0; }
}



/* ─── footer ────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--cream-16);
  padding: clamp(3rem, 8vh, 5rem) var(--pad) 2rem;
  display: flex; flex-direction: column; align-items: center;
  gap: 2.5rem;
  overflow: hidden;
}
.footer__logo {
  width: clamp(230px, 34vw, 420px);
  color: var(--cream);
  --logo-four: var(--cream);
}
.footer__meta {
  display: flex; flex-wrap: wrap; gap: 1.8rem;
  justify-content: center;
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cream-45);
}
.footer--slim { padding-top: 2rem; gap: 1.8rem; }

.footer__social { display: flex; gap: 1rem; }
.footer__social a {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--cream-16);
  border-radius: 999px;
  font-size: 0.68rem; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cream-70);
  transition: color 0.3s, border-color 0.3s;
}
.footer__social svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
}
@media (hover: hover) and (pointer: fine) {
  .footer__social a:hover { color: var(--cream); border-color: var(--cream-45); }
}

.footer__credit {
  font-size: 0.66rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cream-45);
}
.footer__credit .info-link { color: var(--cream-70); }

/* ═══════════════════════════════════════════════════════════
   MENU PAGE
   ═══════════════════════════════════════════════════════════ */
.mhero {
  padding: clamp(8rem, 20vh, 12rem) var(--pad) clamp(2.5rem, 6vh, 4rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.mhero__bg {
  position: absolute; inset: 0;
  pointer-events: none;
}
.mhero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.7) brightness(0.85);
}
.mhero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 80% at 50% 30%, rgba(14, 13, 11, 0.66), rgba(14, 13, 11, 0.9) 80%),
    linear-gradient(180deg, rgba(14, 13, 11, 0.75), rgba(14, 13, 11, 0.55) 45%, var(--ink) 96%);
}
.mhero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 60% at 50% 0%, rgba(194, 160, 95, 0.1), transparent 70%);
  pointer-events: none;
}
.mhero__eyebrow, .mhero__title, .mhero__delivery { position: relative; }
.mhero__delivery { margin-top: clamp(1.2rem, 3vh, 1.8rem); }
.mhero__delivery span {
  display: inline-flex; align-items: center;
  padding: 0.5rem 1.15rem;
  border: 1px solid var(--bronze-soft);
  border-radius: 999px;
  font-size: 0.68rem; font-weight: 400;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--bronze);
}
.mhero__eyebrow {
  font-size: 0.72rem; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--cream-70);
  margin-bottom: clamp(1.4rem, 3vh, 2.2rem);
}
.mhero__script {
  font-family: var(--font-didone);
  font-style: italic;
  /* at display sizes the variable optical size axis thins the hairlines
     until they nearly vanish; pinning opsz low keeps them readable */
  font-variation-settings: 'opsz' 14, 'wght' 600;
  font-optical-sizing: none;
  font-weight: 600;
  font-size: clamp(4.2rem, 13vw, 8.5rem);
  line-height: 1;
  letter-spacing: 0.01em;
  display: inline-block;
  color: var(--cream);
}

.tabs {
  /* 1px of overlap with the nav so no sliver of the page can ever show
     through the seam between the two bars */
  --tabs-offset: calc(var(--navh, 0px) - 1px);
  position: sticky;
  top: var(--tabs-offset);
  z-index: 800;
  /* 4px of the vertical padding lives on the track instead, see below */
  padding: calc(0.9rem - 4px) var(--pad) calc(1.1rem - 4px);
  /* contains the strip's 2000px of pills locally: without this iOS lets
     that width leak out and the whole page pans sideways */
  overflow-x: clip;
  /* moves with the same transform and timing as the nav, so the two
     travel locked together and never open a gap between them */
  transition: transform 0.5s var(--ease-luxe);
}
html.nav-hidden .tabs { transform: translateY(calc(-1 * var(--tabs-offset))); }
/* solid behind the pills, fading out only below them, so menu rows
   scrolling underneath never show through the pill edges */
.tabs::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--ink);
}
.tabs::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 100%;
  height: 2.2rem;
  background: linear-gradient(var(--ink), rgba(14, 13, 11, 0));
  pointer-events: none;
}
.tabs__track {
  display: flex; gap: 0.6rem;
  overflow-x: auto;
  /* overflow-x:auto forces overflow-y to clip as well, and the track is
     exactly as tall as the pills, so any sub pixel offset cuts their
     bottom edge. This padding keeps the clip away from the pills. */
  overflow-y: hidden;
  padding-top: 4px;
  padding-bottom: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* a swipe that runs out of strip must not chain into the page */
  overscroll-behavior-x: contain;
  /* never `center`: on an overflowing scroll strip that spills content
     past both ends, which clips the first pill and leaks width out */
  justify-content: flex-start;
}
.tabs__track::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  padding: 0.6rem 1.3rem;
  font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase;
  border: 1px solid var(--cream-16);
  border-radius: 999px;
  color: var(--cream-70);
  transition: color 0.3s, border-color 0.3s, background-color 0.3s;
  white-space: nowrap;
}
.tab.is-active {
  background: var(--cream); color: var(--ink);
  border-color: var(--cream);
}
@media (hover: hover) and (pointer: fine) {
  .tab:hover { border-color: var(--cream-45); color: var(--cream); }
  .tab.is-active:hover { color: var(--ink); }
}

.mwrap { max-width: 52rem; margin: 0 auto; padding: 1rem var(--pad) 3rem; }
.mcat { padding: clamp(2.6rem, 7vh, 4.5rem) 0; scroll-margin-top: 5.5rem; }
.mcat + .mcat { border-top: 1px solid var(--cream-16); }
.mcat__head { margin-bottom: 2rem; position: relative; }
.mcat__num {
  position: absolute; right: 0; top: -0.5rem;
  font-family: var(--font-didone);
  font-style: italic;
  font-size: clamp(3rem, 8vw, 5rem);
  color: var(--cream-08);
  line-height: 1;
}
.mcat__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.0;
}
.mcat__sub {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--bronze);
  font-size: 1.05rem;
  margin-top: 0.3rem;
}

/* size caption above the pizza price column, shown once per section.
   The caption and the two price columns share the same width and gap
   so the labels sit exactly above their prices. */
.msizes {
  --pz-col: 5.8rem;
  --pz-gap: 1.1rem;
  display: flex; justify-content: flex-end;
  gap: var(--pz-gap);
  padding: 0 0 0.7rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--cream-16);
}
.msizes span {
  flex: 0 0 var(--pz-col);
  /* min-width:auto would let a long label widen its own column and
     knock the caption out of line with the prices below it */
  min-width: 0;
  font-size: 0.62rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bronze);
  /* right aligned so the second column ends flush with the right edge,
     exactly where every other price in the menu sits */
  text-align: right;
  white-space: nowrap;
}

.mcat__soon {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--cream-45);
  max-width: 46ch;
  padding: 1.5rem 0 0.5rem;
  border-top: 1px dashed var(--cream-16);
}

.mnote { color: var(--cream-70); text-align: center; padding: 3rem 0; }

/* sub heading inside a category, e.g. "Piva" on the drinks card */
.msub {
  font-size: 0.68rem; font-weight: 400;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--bronze);
  padding: 2rem 0 0.5rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--cream-16);
}
.mlist > .msub:first-child { padding-top: 0.4rem; }

.mlist { display: flex; flex-direction: column; }
.mitem {
  --num-w: 2.2rem;
  --num-gap: 0.85rem;
  padding: 1.05rem 0.6rem;
  margin: 0 -0.6rem;
  border-radius: 4px;
}
/* the number is a flex item in the dish row, so it always sits on the
   dish's own line instead of floating above it. Left aligned so the gap
   to the left edge matches the price's gap to the right edge. */
.mitem__n {
  font-family: var(--font-didone);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1;
  color: var(--bronze);
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.mitem__g {
  font-family: var(--font-body);
  font-size: 0.66rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cream-45);
  white-space: nowrap;
  margin-left: 0.5rem;
}
.mitem__desc, .mitem__opts {
  padding-left: calc(var(--num-w) + var(--num-gap));
}
.mitem__opts {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--bronze);
  margin-top: 0.3rem;
}
/* A grid, not flex: `minmax(0, 1fr)` on the name column is a hard
   guarantee that the row can never grow wider than its container, however
   wide the price ends up. Baseline alignment keeps the number and the
   price on the name's FIRST line, so a name that wraps still reads as
   one row. */
.mitem__top {
  display: grid;
  /* minmax(0, …) on both flexible tracks: neither the name nor the price
     can force the row wider than the container, under any circumstance */
  grid-template-columns: var(--num-w) minmax(0, 1fr) minmax(0, auto);
  align-items: baseline;
  gap: var(--num-gap);
}
.mitem__top h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  line-height: 1.25;
  min-width: 0;
  overflow-wrap: anywhere;
  padding-right: 0.5rem;
}
.mitem__price {
  max-width: 100%;
  font-family: var(--font-didone);
  font-style: italic; font-weight: 500;
  font-size: 1.15rem;
  color: var(--cream);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mitem__price i {
  font-style: normal;
  font-size: 0.7em;
  color: var(--cream-45);
  margin: 0 0.15em;
}
.mitem__price--two {
  --pz-col: 5.8rem;
  --pz-gap: 1.1rem;
  display: inline-flex;
  gap: var(--pz-gap);
}
.mitem__price--two em {
  flex: 0 0 var(--pz-col);
  min-width: 0;
  font-style: italic;
  text-align: right;
}
.mitem__desc {
  font-size: 0.92rem;
  color: var(--cream-45);
  max-width: 52ch;
  margin-top: 0.25rem;
}
.mitem__badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.58rem; font-weight: 400;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--bronze);
  border: 1px solid var(--bronze-soft);
  border-radius: 999px;
  padding: 0.28em 0.85em;
  vertical-align: middle;
  margin-left: 0.6rem;
  transform: translateY(-0.2em);
}
.mitem__badge--new {
  color: var(--cream);
  border-color: var(--cream-45);
}
.mitem--star .mitem__price { color: var(--bronze); }
@media (hover: hover) and (pointer: fine) {
  .mitem { transition: background-color 0.3s ease-out; }
  .mitem:hover { background: var(--cream-08); }
}

.mcta {
  text-align: center;
  padding: clamp(3rem, 9vh, 6rem) var(--pad);
  border-top: 1px solid var(--cream-16);
}
.mcta__script {
  font-family: var(--font-script);
  font-size: clamp(3.4rem, 9vw, 5.5rem);
  color: var(--bronze);
  line-height: 1.15;
  margin-bottom: 0.6rem;
}
.mcta__text { color: var(--cream-70); margin-bottom: 2rem; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .story__grid { grid-template-columns: 1fr; }
  .story__emblem { max-width: 340px; margin: 0 auto; width: 100%; }
  .story__stats { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact__grid { grid-template-columns: 1fr; }
  .contact__cards { grid-template-columns: 1fr; }
  .dish { grid-template-columns: auto 1fr 86px; gap: 0.8rem 1.1rem; }
  .dish__price { grid-column: 2; justify-self: start; }
  .dish__arrow { display: none; }
  .dish__ghost { display: none; }
  .dish__thumb {
    display: block;
    grid-column: 3; grid-row: 1 / span 2;
    width: 86px; height: 86px;
    object-fit: cover;
    border-radius: 8px;
    align-self: center; justify-self: end;
  }
  .story__gallery { grid-template-columns: 1fr; }
  .story__photo--tall { margin-top: 0; }
  .menu-row { grid-template-columns: 2.2rem 1fr 2rem; gap: 1rem; }
  .menu-row__hint { display: none; }
  /* smaller so the longest category still fits one line on a phone */
  .menu-row__name { font-size: clamp(1.35rem, 5.2vw, 1.9rem); }
  .hero__badge { display: none; }
}

@media (max-width: 720px) {
  :root { --navh: 74px; }
  /* the mark was taking 77% of the screen, leaving the wash no room to
     spread; a little smaller and the glow can breathe around it */
  .hero__title { width: clamp(200px, 64vw, 300px); }

  /* On a narrow screen an ellipse reads as a shape stuck on the photo,
     because its curved sides sit right next to the mark. Across a phone
     the wash becomes a full width band instead: it runs edge to edge, so
     there are no side curves at all, and it only fades up and down. */
  .hero__plate {
    width: 100vw;
    aspect-ratio: auto;
    height: clamp(280px, 88vw, 360px);
    background: linear-gradient(to bottom,
      rgba(194, 160, 95, 0)    0%,
      rgba(194, 160, 95, 0.05) 7%,
      rgba(194, 160, 95, 0.13) 13%,
      rgba(194, 160, 95, 0.25) 19%,
      rgba(194, 160, 95, 0.39) 25%,
      rgba(194, 160, 95, 0.52) 30%,
      rgba(194, 160, 95, 0.62) 35%,
      rgba(194, 160, 95, 0.68) 40%,
      rgba(194, 160, 95, 0.71) 45%,
      rgba(194, 160, 95, 0.72) 50%,
      rgba(194, 160, 95, 0.71) 55%,
      rgba(194, 160, 95, 0.68) 60%,
      rgba(194, 160, 95, 0.62) 65%,
      rgba(194, 160, 95, 0.52) 70%,
      rgba(194, 160, 95, 0.39) 75%,
      rgba(194, 160, 95, 0.25) 81%,
      rgba(194, 160, 95, 0.13) 87%,
      rgba(194, 160, 95, 0.05) 93%,
      rgba(194, 160, 95, 0)    100%);
  }
  /* two up on a phone, and the captions are always shown since there is
     no hover to reveal them */
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(130px, 34vw, 190px); }
  .gallery__item--wide { grid-column: span 2; }
  .gallery__item figcaption { padding: 1.8rem 0.7rem 0.7rem; font-size: 0.88rem; }
  .nav { grid-template-columns: auto 1fr auto; }
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .nav--menu { grid-template-columns: 1fr auto 1fr; padding-left: 1rem; padding-right: 1rem; }
  .nav--menu .nav__logo--center { width: 76px; margin-left: -38px; }
  .nav__back { font-size: 0.68rem; letter-spacing: 0.1em; }
  .lang__btn { padding: 0.5rem 0.7rem; gap: 0.35rem; }
  .lang__globe { width: 13px; height: 13px; }
  .lang__menu { min-width: 156px; }
  .hero__scroll { display: flex; }
  .marquee__group span { font-size: 1.15rem; }
  .mitem { --num-w: 1.7rem; --num-gap: 0.6rem; }
  /* the house signature badge wraps badly in a narrow column */
  .mitem__badge:not(.mitem__badge--new) { display: none; }

  /* the strip runs edge to edge: the padding moves onto the track so the
     pills line up with the content but can still slide to the screen edge */
  .tabs { padding-left: 0; padding-right: 0; }
  .tabs__track { padding-left: var(--pad); padding-right: var(--pad); }
  /* the two pizza columns are the widest price on the page, so they get
     trimmed hard here to leave the dish name room to breathe */
  /* On phones the two prices collapse into one compact string. Nothing
     reserves a fixed width any more, so the price physically cannot push
     the row past the screen edge, whatever the font or the device does. */
  .msizes {
    display: block;
    text-align: right;
    padding: 0 0 0.7rem;
  }
  .msizes span {
    display: inline;
    font-size: 0.55rem; letter-spacing: 0.08em;
    white-space: nowrap;
  }
  .msizes span + span::before {
    content: '/';
    margin: 0 0.5em;
    color: var(--cream-16);
  }

  .mitem__price--two { display: inline; }
  .mitem__price--two em { display: inline; }
  .mitem__price--two em + em::before {
    content: '/';
    font-style: normal;
    font-size: 0.72em;
    color: var(--cream-45);
    margin: 0 0.3em;
  }
  /* hairline in the gap so the two size labels read as two columns;
     it sits in the gap so the caption stays aligned with the prices */
  .mitem__n { font-size: 0.82rem; }
  .story__watermark { font-size: 11rem; top: 4%; }
}

/* very narrow phones: trim the widest pieces further */
@media (max-width: 380px) {
  .msizes span { font-size: 0.5rem; letter-spacing: 0.04em; }
  /* both price shapes shrink together, so they stay the same size */
  .mitem__price { font-size: 1.05rem; }
}

/* ─── reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .grain { animation: none; }
}