/* ═══════════════════════════════════════════════════════════
   XARME — Restaurante & Bar · Portimão
   Design system: warm charcoal / copper / burgundy / marble
   Type: Playfair Display (display) + Inter (UI/body)
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Brand palette — extracted from Xarme's printed menus */
  --ink: #14110D;
  --ink-soft: #1D1915;
  --surface: #221D18;
  --copper: #C6874F;
  --copper-light: #DCA76F;
  --copper-dim: #8F6238;
  --burgundy: #5A252E;
  --burgundy-deep: #451C24;
  --ivory: #F2ECE2;
  --ivory-muted: #B5AA9B;
  --marble: #F4F1EB;
  --marble-line: #E2DCD1;
  --ink-on-light: #26211B;
  --muted-on-light: #6E6559;

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;

  /* Spacious scale (marketing / hospitality) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 8.5rem;

  --radius: 4px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 84px;
}

@font-face {
  font-family: "Arkhip";
  src: url("../fonts/arkhip.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ivory);
  background: var(--ink);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

section { scroll-margin-top: var(--nav-h); }

/* ─── Utilities ─────────────────────────────────────────── */

.container {
  width: min(1180px, 100% - 3rem);
  margin-inline: auto;
}

.section { padding-block: var(--space-7); }
.section--tight { padding-block: var(--space-6); }

.section--marble {
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(198, 135, 79, 0.10), transparent 60%),
    var(--marble);
  color: var(--ink-on-light);
}

.section--burgundy {
  background:
    radial-gradient(1000px 600px at 10% 0%, rgba(255, 255, 255, 0.05), transparent 55%),
    linear-gradient(160deg, var(--burgundy) 0%, var(--burgundy-deep) 100%);
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--copper);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
}
.skip-link:focus { top: 1rem; }

/* ─── Typography ────────────────────────────────────────── */

.eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: var(--space-2);
}
.eyebrow--light { color: var(--copper-light); }

.h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}
.h2 em {
  font-style: italic;
  color: var(--copper);
}
.section--marble .h2 em { color: var(--copper-dim); }
.section--burgundy .h2 em { color: var(--copper-light); }

.lede {
  font-size: 1.12rem;
  font-weight: 300;
  max-width: 46ch;
  color: var(--ivory-muted);
}
.section--marble .lede { color: var(--muted-on-light); }
.section--burgundy .lede { color: rgba(242, 236, 226, 0.75); }

.body-text {
  color: var(--ivory-muted);
  margin-top: var(--space-2);
  max-width: 52ch;
}

.section-head {
  max-width: 720px;
  margin-bottom: var(--space-5);
}
.section-head .lede { margin-top: var(--space-2); }

.text-link {
  display: inline-block;
  margin-top: var(--space-3);
  color: var(--copper);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease-out), color 0.25s;
  padding-block: 0.5rem; /* touch target */
}
.text-link:hover, .text-link:focus-visible { border-color: var(--copper); color: var(--copper-light); }

/* ─── Logo ──────────────────────────────────────────────── */

.logo-box {
  display: inline-block;
  font-family: "Arkhip", var(--font-body);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em; /* optical centering vs tracking */
  color: var(--ivory);
  border: 2px solid var(--copper);
  padding: 0.42em 0.55em 0.34em;
  line-height: 1;
}
.logo-box--lg { font-size: 1.5rem; }

.logo-sub {
  display: block;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  color: var(--copper);
  margin-top: 0.45em;
  text-align: center;
  /* letter-spacing adds a trailing gap after the last letter, so centred
     text sits visually left of centre; indent by one step to cancel it */
  text-indent: 0.34em;
}

/* ─── Buttons ───────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.8rem 1.7rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }

.btn--copper {
  background: linear-gradient(135deg, var(--copper) 0%, var(--copper-light) 100%);
  color: #221507;
  box-shadow: 0 6px 24px -8px rgba(198, 135, 79, 0.55);
}
.btn--copper:hover, .btn--copper:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -8px rgba(198, 135, 79, 0.75);
}

.btn--ghost {
  border-color: rgba(242, 236, 226, 0.45);
  color: var(--ivory);
  background: rgba(20, 17, 13, 0.25);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  border-color: var(--ivory);
  background: rgba(242, 236, 226, 0.1);
  transform: translateY(-2px);
}

.btn--dark {
  background: var(--ink);
  color: var(--ivory);
}
.btn--dark:hover, .btn--dark:focus-visible { background: var(--surface); transform: translateY(-2px); }

.btn--dark-ghost {
  border-color: var(--ink-on-light);
  color: var(--ink-on-light);
  background: transparent;
}
.btn--dark-ghost:hover, .btn--dark-ghost:focus-visible { background: var(--ink); color: var(--ivory); border-color: var(--ink); transform: translateY(-2px); }

.btn--lg { padding: 1rem 2.2rem; font-size: 0.92rem; }

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

/* ─── Navigation ────────────────────────────────────────── */

.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  transition: background 0.35s, box-shadow 0.35s, backdrop-filter 0.35s;
}
.nav.scrolled {
  background: rgba(20, 17, 13, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(198, 135, 79, 0.25), 0 12px 40px -20px rgba(0, 0, 0, 0.8);
}

.nav__inner {
  width: min(1320px, 100% - 3rem);
  margin-inline: auto;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* In the nav the subtitle is wider than the logo box, so the two have to be
   centred on each other rather than the narrower one being centred inside
   the wider block. */
.nav__brand {
  text-decoration: none;
  position: relative;
  z-index: 100;
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nav__actions { position: relative; z-index: 100; }
.nav__brand .logo-box { font-size: 0.95rem; border-width: 1.5px; }
/* 0.46rem rendered at 7.4px — below any sensible legibility floor */
.nav__brand .logo-sub { font-size: 0.56rem; letter-spacing: 0.3em; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.2rem);
}
.nav__links > a {
  position: relative;
  color: var(--ivory);
  text-decoration: none;
  font-size: 0.83rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.75rem 0.15rem;
}
.nav__links > a::after {
  content: "";
  position: absolute;
  left: 0.15rem;
  right: 0.15rem;
  bottom: 0.45rem;
  height: 1px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.nav__links > a:hover::after,
.nav__links > a:focus-visible::after,
.nav__links > a.active::after { transform: scaleX(1); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.nav__cta { min-height: 44px; padding: 0.55rem 1.3rem; }

.lang-toggle {
  /* rendered as <button> on most pages and as <a> on the events pages,
     so centring and the underline reset have to be explicit */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: 1px solid rgba(242, 236, 226, 0.35);
  border-radius: var(--radius);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}
.lang-toggle:hover, .lang-toggle:focus-visible { border-color: var(--copper); background: rgba(198, 135, 79, 0.12); }

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 12px;
}
.nav__burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ivory);
  transition: transform 0.3s var(--ease-out), opacity 0.2s;
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile-extra { display: none; }

/* ─── Hero ──────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero__media,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__media img {
  object-fit: cover;
  object-position: center 40%;
  animation: kenburns 16s var(--ease-out) forwards;
}
@keyframes kenburns {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}

.hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 17, 13, 0.55) 0%, rgba(20, 17, 13, 0.25) 40%, rgba(20, 17, 13, 0.88) 100%),
    radial-gradient(120% 90% at 25% 65%, rgba(20, 17, 13, 0.55) 0%, transparent 60%);
}

.hero__content {
  position: relative;
  z-index: 2;
  width: min(1180px, 100% - 3rem);
  margin-inline: auto;
  padding-top: var(--nav-h);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3rem, 7.6vw, 6.4rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  max-width: 14ch;
}
.hero__title em {
  font-style: italic;
  background: linear-gradient(100deg, var(--copper-light) 0%, var(--copper) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lede {
  margin-top: var(--space-3);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  font-weight: 300;
  color: rgba(242, 236, 226, 0.85);
  max-width: 52ch;
}

.hero__cta {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 44px;
  height: 64px;
  display: flex;
  justify-content: center;
}
.hero__scroll-line {
  display: block;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, var(--copper));
  animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(0.55); transform-origin: top; opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ─── Ratings strip ─────────────────────────────────────── */

.ratings {
  background: var(--ink-soft);
  border-bottom: 1px solid rgba(198, 135, 79, 0.16);
  padding-block: 1.4rem;
}
.ratings__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 4vw, 3rem);
  flex-wrap: wrap;
}
.ratings__item {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  text-decoration: none;
  padding: 0.4rem 0.2rem;
  transition: opacity 0.25s;
}
.ratings__item:hover { opacity: 0.75; }
.ratings__score {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.45rem;
  color: var(--copper-light);
  line-height: 1;
}
.ratings__score i {
  font-style: normal;
  font-size: 0.8rem;
  margin-left: 0.15rem;
  color: var(--copper);
}
.ratings__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory-muted);
}
.ratings__sep {
  width: 1px;
  height: 22px;
  background: rgba(242, 236, 226, 0.15);
}
@media (max-width: 560px) {
  .ratings__sep { display: none; }
  .ratings__row { gap: 0.9rem 1.6rem; }
}

/* ─── Concept ───────────────────────────────────────────── */

.concept__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
}

.concept__media {
  position: relative;
  padding-bottom: var(--space-5);
}
.concept__img {
  overflow: hidden;
  border-radius: var(--radius);
}
.concept__img img { transition: transform 0.8s var(--ease-out); }
.concept__img:hover img { transform: scale(1.04); }

.concept__img--main {
  width: 88%;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
.concept__img--float {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  border: 4px solid var(--ink);
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.95);
}
.concept__img--float img { aspect-ratio: 3 / 4; object-fit: cover; }

.pillars {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.pillar {
  background: linear-gradient(180deg, var(--surface) 0%, var(--ink-soft) 100%);
  border-top: 2px solid var(--copper);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-3);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
}
.pillar:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -24px rgba(198, 135, 79, 0.35);
}
.pillar__icon {
  width: 46px;
  height: 46px;
  color: var(--copper);
  margin-bottom: var(--space-2);
}
.pillar__icon svg { width: 100%; height: 100%; }
.pillar h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
}
.pillar p { color: var(--ivory-muted); font-size: 0.95rem; }

/* ─── Menu ──────────────────────────────────────────────── */

.menu__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--space-4);
}

.menu-tab {
  min-height: 44px;
  padding: 0.55rem 1.15rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-on-light);
  background: transparent;
  border: 1px solid var(--marble-line);
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.menu-tab:hover { border-color: var(--copper-dim); color: var(--ink-on-light); }
.menu-tab[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ivory);
}

.menu__panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-5);
  min-height: 320px;
  align-content: start;
}

.menu-item {
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--marble-line);
  animation: itemIn 0.5s var(--ease-out) both;
}
@keyframes itemIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.menu-item__row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.menu-item__name {
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 600;
  color: var(--ink-on-light);
}
.menu-item__badges { display: inline-flex; gap: 0.3rem; transform: translateY(2px); }
.badge-ico { width: 15px; height: 15px; }
.badge-ico--spicy { color: #B33A2B; }
.badge-ico--veg { color: #5A7C46; }

.menu-item__dots {
  flex: 1;
  border-bottom: 2px dotted rgba(110, 101, 89, 0.45);
  transform: translateY(-4px);
  min-width: 24px;
}
.menu-item__price {
  font-weight: 600;
  color: var(--copper-dim);
  white-space: nowrap;
  font-size: 1.02rem;
}
.menu-item__desc {
  margin-top: 0.35rem;
  font-size: 0.92rem;
  color: var(--muted-on-light);
  max-width: 56ch;
}

.menu__legend {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.85rem;
  color: var(--muted-on-light);
}
.menu__legend > span { display: inline-flex; align-items: center; gap: 0.45rem; }
.menu__legend-note { flex-basis: 100%; font-size: 0.8rem; opacity: 0.8; }

.menu__downloads {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ─── Carte (printed-menu panel) ────────────────────────── */

.carte {
  position: relative;
  background: #FBF9F6;
  border: 1px solid rgba(143, 98, 56, 0.3);
  padding: clamp(1.6rem, 4vw, 3.2rem);
  box-shadow: 0 24px 60px -35px rgba(38, 33, 27, 0.35);
}
.carte::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(143, 98, 56, 0.16);
  pointer-events: none;
}
.carte .menu__tabs {
  justify-content: center;
  gap: 0.2rem 1.5rem;
  margin-bottom: var(--space-4);
}
.carte .menu-tab {
  border: 0;
  border-radius: 0;
  background: transparent;
  min-height: 44px;
  padding: 0.4rem 0.1rem;
  letter-spacing: 0.16em;
  font-size: 0.76rem;
  border-bottom: 1px solid transparent;
}
.carte .menu-tab:hover { color: var(--ink-on-light); }
.carte .menu-tab[aria-selected="true"] {
  background: transparent;
  border-color: transparent;
  border-bottom: 1px solid var(--copper-dim);
  color: var(--ink-on-light);
}
.carte .menu-item { border-bottom-color: rgba(143, 98, 56, 0.14); }
.carte .menu-item__name { font-size: 1.22rem; font-weight: 500; }
.carte .menu-item__price {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.08rem;
}
.carte .menu-item__dots { border-bottom-color: rgba(110, 101, 89, 0.3); }

/* ─── Bar & Wines ───────────────────────────────────────── */

.bar__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-4);
  align-items: start;
}

.bar__media {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
.bar__img { overflow: hidden; border-radius: var(--radius); }
.bar__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.bar__img:hover img { transform: scale(1.05); }
.bar__img--tall img { aspect-ratio: 4 / 5; }
.bar__img--wide img { aspect-ratio: 16 / 10; }

.bar__lists {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.bar__col-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--copper-light);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid rgba(220, 167, 111, 0.35);
}

.drink-list { list-style: none; }
.drink-list li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding-block: 0.55rem;
}
.drink-list .d-main { flex: 1; display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; }
.drink-list .d-name { font-weight: 500; color: var(--ivory); }
.drink-list .d-note {
  display: block;
  font-size: 0.8rem;
  font-weight: 300;
  color: rgba(242, 236, 226, 0.6);
  margin-top: 0.15rem;
}
.drink-list .d-dots {
  flex: 1;
  border-bottom: 2px dotted rgba(242, 236, 226, 0.28);
  transform: translateY(-4px);
  min-width: 20px;
}
.drink-list .d-price { color: var(--copper-light); font-weight: 600; white-space: nowrap; }

.bar__regions {
  margin-top: var(--space-3);
  font-size: 0.85rem;
  font-style: italic;
  color: rgba(242, 236, 226, 0.65);
}

/* ─── Bar tabs & grid ───────────────────────────────────── */

.bar__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  margin-bottom: var(--space-3);
  border-bottom: 1px solid rgba(220, 167, 111, 0.25);
  padding-bottom: 0.4rem;
}
.bar-tab {
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  color: rgba(242, 236, 226, 0.6);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  min-height: 40px;
  padding: 0.4rem 0.1rem;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s;
}
.bar-tab:hover { color: var(--ivory); }
.bar-tab[aria-selected="true"] {
  color: var(--copper-light);
  border-bottom-color: var(--copper-light);
}

.drink-list--grid {
  columns: 2 230px;
  column-gap: 2.2rem;
}
.drink-list--grid li { break-inside: avoid; }

/* sub-heading inside a grouped list (Espumantes, Brancos, Tintos…) */
.d-group {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--copper-light);
  padding: 1.4rem 0 0.5rem;
  border-bottom: 1px solid rgba(220, 167, 111, 0.28);
  margin-bottom: 0.3rem;
}
.d-group:first-child { padding-top: 0; }

.bar__downloads { margin-top: var(--space-4); }

/* ─── Events ────────────────────────────────────────────── */

.events__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}

.events__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 3 / 4;
}
.events__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.events__item:hover img { transform: scale(1.06); }
.events__item figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2.4rem 1.2rem 1.1rem;
  background: linear-gradient(to top, rgba(20, 17, 13, 0.85), transparent);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.events__cta {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--surface), var(--ink-soft));
  border: 1px solid rgba(198, 135, 79, 0.28);
  border-radius: var(--radius);
}
.events__cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.events__cta p {
  font-family: var(--font-display);
  font-size: 1.3rem;
  max-width: 32ch;
}

/* ─── Gallery ───────────────────────────────────────────── */

.gallery__grid {
  columns: 4 280px;
  column-gap: 0.75rem;
  padding-inline: 0.75rem;
}

.gallery__item {
  display: block;
  width: 100%;
  margin-bottom: 0.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--radius);
  break-inside: avoid;
}
.gallery__item img {
  width: 100%;
  transition: transform 0.7s var(--ease-out), filter 0.5s;
}
.gallery__item:hover img, .gallery__item:focus-visible img {
  transform: scale(1.05);
  filter: brightness(1.08);
}

/* ─── Lightbox ──────────────────────────────────────────── */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 10, 8, 0.94);
  backdrop-filter: blur(8px);
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: min(1100px, 88vw);
  max-height: 86vh;
  border-radius: var(--radius);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 1);
}
.lightbox__close, .lightbox__nav {
  position: absolute;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: rgba(242, 236, 226, 0.08);
  border: 1px solid rgba(242, 236, 226, 0.2);
  border-radius: 50%;
  color: var(--ivory);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s;
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(198, 135, 79, 0.3); border-color: var(--copper); }
.lightbox__close { top: 1.2rem; right: 1.2rem; }
.lightbox__nav--prev { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 1.2rem; top: 50%; transform: translateY(-50%); }

/* ─── Reserve ───────────────────────────────────────────── */

.reserve__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-5);
  align-items: start;
}

.reserve__block { margin-bottom: var(--space-4); }
.reserve__block h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink-on-light);
  margin-bottom: var(--space-2);
}

.hours { width: 100%; border-collapse: collapse; }
.hours td {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--marble-line);
  color: var(--muted-on-light);
}
.hours td:last-child { text-align: right; font-weight: 600; color: var(--ink-on-light); }
.hours tr:first-child td {
  font-weight: 600;
  color: var(--copper-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
}
.hours--closed td { opacity: 0.55; }

.reserve__contact {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 48px;
  color: var(--ink-on-light);
  font-size: 1.06rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.25s;
}
.reserve__contact:hover, .reserve__contact:focus-visible { color: var(--copper-dim); }
.reserve__contact svg { width: 1.25rem; height: 1.25rem; color: var(--copper-dim); flex-shrink: 0; }

.reserve__note {
  font-size: 0.88rem;
  color: var(--muted-on-light);
  border-left: 2px solid var(--copper);
  padding-left: var(--space-2);
}

.reserve__widget {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px -35px rgba(38, 33, 27, 0.45);
  overflow: hidden;
}
.reserve__widget iframe {
  display: block;
  width: 100%;
  height: 640px;
  border: 0;
}

/* ─── Compact map inside the reservations block ─────────── */

.reserve__map {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
.reserve__map iframe {
  width: 100%;
  height: 300px;
  border: 0;
  border-radius: var(--radius);
  filter: sepia(0.16) saturate(1.05) contrast(0.98) brightness(1.02);
  transition: filter 0.4s;
  box-shadow: 0 24px 60px -40px rgba(38, 33, 27, 0.6);
}
.reserve__map:hover iframe { filter: sepia(0) saturate(1.08) brightness(1.02); }

@media (max-width: 640px) {
  .reserve__map iframe { height: 220px; }
  .reserve__map .btn { width: 100%; justify-content: center; }
}

/* ─── Map ───────────────────────────────────────────────── */

.map { position: relative; overflow: hidden; }
.map iframe {
  display: block;
  width: 100%;
  height: 520px;
  border: 0;
  /* A light warm tint keeps the map on-brand while staying legible and
     alive. It must look right with no pointer involved: grayscale(1) by
     default meant the map was permanently grey on every touch device,
     where :hover never fires. */
  filter: sepia(0.16) saturate(1.05) contrast(0.98) brightness(1.02);
  transition: filter 0.4s;
}
.map:hover iframe { filter: sepia(0) saturate(1.08) contrast(1) brightness(1.02); }

.map__card {
  position: absolute;
  /* Centred with auto margins rather than translateY(-50%): the card also
     carries .reveal, and .reveal.in-view sets transform:none, which wins on
     specificity and silently cancelled the centring - the card sat 143px low
     and hung off the bottom of the map. */
  top: 0;
  bottom: 0;
  height: fit-content;
  margin-block: auto;
  left: clamp(1.5rem, 7vw, 7rem);
  /* solid: backdrop-filter cannot sample an iframe and washes the card out */
  background: rgba(20, 17, 13, 0.96);
  border: 1px solid rgba(198, 135, 79, 0.35);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.5vw, 2.2rem);
  max-width: 320px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
}
.map__brand {
  display: block;
  font-family: "Arkhip", var(--font-body);
  font-size: 1.3rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--copper-light);
  margin-bottom: 0.9rem;
}
.map__addr { color: var(--ivory); font-size: 0.98rem; line-height: 1.55; }
.map__hours {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ivory-muted);
}
.map__actions {
  margin-top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-items: flex-start;
}
.map__phone {
  color: var(--ivory-muted);
  text-decoration: none;
  font-size: 0.95rem;
  padding-block: 0.3rem;
  transition: color 0.25s;
}
.map__phone:hover { color: var(--copper-light); }

@media (max-width: 700px) {
  /* phones: map on top, card below it in normal flow (no overlap) */
  .map { display: flex; flex-direction: column; }
  .map iframe { height: 300px; }
  .map__card {
    /* relative + z-index so the map iframe cannot paint over the card */
    position: relative;
    z-index: 1;
    transform: none;
    max-width: none;
    /* left must be reset too: the base rule offsets the card by up to 7vw,
       which pushed it ~12px past the right edge once it went full width */
    left: 0;
    margin: -2.5rem 1rem 1.6rem;
  }
  /* room for the floating Reservar button so it never covers the footer */
  .footer { padding-bottom: 5rem; }
}

/* ─── Footer ────────────────────────────────────────────── */

.footer {
  background: linear-gradient(180deg, var(--ink) 0%, #0D0B09 100%);
  border-top: 1px solid rgba(198, 135, 79, 0.25);
  padding-top: var(--space-6);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
}

.footer__logo { display: inline-block; }
.footer__tag {
  margin-top: var(--space-3);
  color: var(--ivory-muted);
  font-size: 0.92rem;
  font-weight: 300;
  max-width: 30ch;
}

.footer__col h4 {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: var(--space-2);
}
.footer__col p { color: var(--ivory-muted); font-size: 0.95rem; }
.footer__col a {
  color: var(--ivory);
  text-decoration: none;
  transition: color 0.25s;
  display: inline-block;
  padding-block: 0.2rem;
}
.footer__col a:hover, .footer__col a:focus-visible { color: var(--copper-light); }

.footer__social {
  display: flex;
  gap: 0.6rem;
  margin-top: var(--space-2);
}
.footer__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(242, 236, 226, 0.2);
  border-radius: 50%;
  color: var(--ivory);
  transition: border-color 0.25s, color 0.25s, transform 0.25s var(--ease-out);
}
.footer__social a:hover, .footer__social a:focus-visible {
  border-color: var(--copper);
  color: var(--copper-light);
  transform: translateY(-3px);
}
.footer__social svg { width: 1.2rem; height: 1.2rem; }

.footer__bar {
  border-top: 1px solid rgba(242, 236, 226, 0.08);
  padding-block: var(--space-3);
  width: min(1180px, 100% - 3rem);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.footer__bar p { font-size: 0.82rem; color: rgba(181, 170, 155, 0.75); }

/* ─── Luxury polish: grade, details, wordmark ───────────── */

/* one shared warm grade so all shoots read as a single art direction */
.concept__img img,
.bar__img img,
.events__item img,
.team__img img,
.hgal__item img {
  filter: saturate(0.95) contrast(1.02) sepia(0.05);
}

::selection {
  background: rgba(198, 135, 79, 0.85);
  color: #14110D;
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--copper-dim) var(--ink);
}
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb {
  background: var(--copper-dim);
  border-radius: 5px;
  border: 2px solid var(--ink);
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--copper), var(--copper-light));
  z-index: 120;
}

.footer { overflow: hidden; }
.footer__wordmark {
  display: block;
  text-align: center;
  font-family: "Arkhip", var(--font-body);
  font-weight: 400;
  font-size: clamp(4rem, 13vw, 11.5rem);
  line-height: 0.85;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(198, 135, 79, 0.22);
  user-select: none;
  margin-bottom: var(--space-5);
}

/* ─── Toast ─────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 140%);
  z-index: 400;
  background: rgba(20, 17, 13, 0.95);
  color: var(--ivory);
  border: 1px solid rgba(198, 135, 79, 0.5);
  border-radius: 100px;
  padding: 0.75rem 1.5rem;
  font-size: 0.88rem;
  box-shadow: 0 14px 40px -12px rgba(0, 0, 0, 0.8);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s;
  opacity: 0;
  pointer-events: none;
}
.toast.on {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* ─── Bar summary (stats + copy) ────────────────────────── */

.bar-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(220, 167, 111, 0.25);
  margin-bottom: var(--space-4);
}
.bar-stat__n {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1;
  color: var(--copper-light);
}
.bar-stat__l {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242, 236, 226, 0.72);
}
.bar__copy {
  font-weight: 300;
  font-size: 1.06rem;
  color: rgba(242, 236, 226, 0.85);
  max-width: 60ch;
}
.bar__regions {
  margin-top: var(--space-3);
  font-size: 0.82rem;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper-light);
  line-height: 2;
}

@media (max-width: 640px) {
  .bar-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-2) var(--space-3); }
}

/* ─── Instagram grid ────────────────────────────────────── */

.ig__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.ig__head .h2 { margin-bottom: 0; }

.ig__marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.ig__track {
  display: flex;
  gap: 6px;
  width: max-content;
  will-change: transform;
  animation: igScroll 380s linear infinite;
}
.ig__marquee:hover .ig__track,
.ig__track:focus-within { animation-play-state: paused; }
/* drifts left → right (photos travel toward the right edge) */
@keyframes igScroll {
  from { transform: translateX(calc(-50% - 3px)); }
  to { transform: translateX(0); }
}
.ig__item {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: clamp(130px, 13vw, 190px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 2px;
}
.ig__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.ig__item:hover img, .ig__item:focus-visible img { transform: scale(1.06); }
.ig__veil {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(20, 17, 13, 0.62);
  color: var(--copper-light);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
}
.ig__item:hover .ig__veil, .ig__item:focus-visible .ig__veil { opacity: 1; }
.ig__veil svg { width: 30px; height: 30px; }

@media (max-width: 560px) {
  .ig__track { gap: 4px; animation-duration: 280s; }
  .ig__item { width: 118px; }
}

/* ─── Enhanced polish ───────────────────────────────────── */

/* cinematic mask reveal: images unveil upward as they enter view */
/* The mask is applied to the media INSIDE the frame, never to the
   observed element itself: clipping the observed box to zero height
   stops IntersectionObserver from ever firing, which would leave the
   content hidden forever. */
.concept__img img,
.bar__img img,
.events__item img,
.team__img img,
.film__player video {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s var(--ease-out) var(--d, 0s);
}
.in-view img,
.in-view video,
.reveal.in-view img,
.reveal.in-view video {
  clip-path: inset(0 0 0 0);
}

/* light sweeps across the primary button on hover */
.btn--copper {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn--copper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, 0.38) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform 0.85s var(--ease-out);
}
.btn--copper:hover::after,
.btn--copper:focus-visible::after { transform: translateX(130%); }

/* carte rows respond to the pointer */
.menu-item {
  transition: background 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.menu-item:hover {
  background: rgba(198, 135, 79, 0.06);
  box-shadow: inset 2px 0 0 var(--copper);
}
.menu-item:hover .menu-item__name { color: var(--copper-dim); }

/* gallery + instagram tiles lift slightly under the pointer */
.hgal__item, .ig__item { transition: transform 0.5s var(--ease-out); }
.hgal__item:hover, .ig__item:hover { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) .concept__img img,
  html:not(.force-motion) .bar__img img,
  html:not(.force-motion) .events__item img,
  html:not(.force-motion) .team__img img,
  html:not(.force-motion) .film__player video { clip-path: none; }
}

/* ─── Reveal animations ─────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--d, 0s);
}

/* Small phones: scale the root so every rem-based size — type, spacing,
   gaps — shrinks together instead of forcing a fixed desktop scale onto a
   360px screen. Tap targets are set in px and stay 44px. Roughly 16px at
   420px wide down to 14.5px at 360px. */
@media (max-width: 460px) {
  html { font-size: clamp(14.5px, 3.9vw, 16px); }
}

/* Phones scroll far faster than a desktop pointer, so the slow reveal and
   its stagger left the reader waiting on a blank space. Shorten both. */
@media (max-width: 900px) {
  .reveal {
    transform: translateY(16px);
    transition-duration: 0.4s;
    transition-delay: 0s;
  }
  .concept__img img,
  .bar__img img,
  .events__item img,
  .team__img img,
  .film__player video {
    transition: clip-path 0.5s var(--ease-out) 0s;
  }
}
.reveal.in-view {
  opacity: 1;
  transform: none;
}

/* ─── Responsive ────────────────────────────────────────── */

@media (max-width: 1080px) {
  .bar__grid { grid-template-columns: 1fr; }
  .bar__media { max-width: 640px; }
  .events__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  :root { --nav-h: 72px; }

  .nav__links {
    position: fixed;
    /* .nav gains backdrop-filter once scrolled, which makes it the containing
       block for fixed children — inset: 0 would then shrink this overlay to
       the 72px nav. Size against the viewport explicitly instead; .nav sits at
       top-left and spans the full width, so the origin still lines up. */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: -1;
    flex-direction: column;
    /* The list is taller than a short phone screen once the button and
       phone number are counted, and plain `center` overflows equally in
       both directions - pushing the first link up under the header, where
       it cannot be scrolled back into view. Keep clear of the header and
       let it scroll when it does not fit. */
    justify-content: center;
    justify-content: safe center;
    /* Sized to fit the SHORT viewport: at the top of a page phone browsers
       show the full address bar, leaving ~555px on a 667px screen. Scrolling
       inside an open menu is not discoverable, so an item pushed past the
       fold reads as a dead tap. Fit rather than scroll; overflow stays as a
       backstop for the very smallest screens. */
    padding: calc(var(--nav-h) + 0.35rem) 1rem 0.9rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 0.4rem;
    background: rgba(15, 12, 10, 0.97);
    backdrop-filter: blur(18px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s var(--ease-out);
  }
  .nav__links.open {
    opacity: 1;
    pointer-events: auto;
    z-index: 99;
  }
  .nav__links > a {
    font-size: 1.08rem;
    padding: 0.4rem 0.85rem;
    min-height: 44px;          /* padding alone no longer reaches a safe tap target */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nav__mobile-extra {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }
  .nav__phone {
    color: var(--ivory-muted); text-decoration: none; font-size: 0.95rem;
    padding: 0.4rem 0.75rem;
    min-height: 44px;        /* was 36px tall - under the tap-target minimum */
    display: flex; align-items: center;
  }
  .nav__cta { display: none; }
  .nav__burger { display: flex; }

  .concept__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .concept__media { max-width: 560px; }
  .pillars { grid-template-columns: 1fr; }
  .menu__panel { grid-template-columns: 1fr; }
  .bar__lists { grid-template-columns: 1fr; }
  .reserve__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .events__cta { justify-content: center; text-align: center; }
}

/* Phone / email / ratings are the most-tapped links on a restaurant site,
   so give them a full 44px target rather than inline text height. */
@media (max-width: 900px) {
  .footer__col p a,
  .nav__phone { display: inline-block; padding-block: 0.45rem; }
  .ratings__item { min-height: 44px; }
}

/* Menu categories on a phone: every category has to be visible at once —
   no swiping — so the labels are set tighter to fit 8 tabs in a couple of
   rows rather than the 5 the desktop type size produced. */
@media (max-width: 640px) {
  .menu__tabs,
  .carte .menu__tabs {
    flex-wrap: wrap;
    /* left-aligned: centring leaves the last tab stranded mid-row */
    justify-content: flex-start;
    gap: 0 0.9rem;
    margin-bottom: var(--space-3);
  }
  .menu-tab,
  .carte .menu-tab {
    flex: 0 0 auto;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    padding-inline: 0;
  }
}

@media (max-width: 560px) {
  .section { padding-block: var(--space-6); }
  .events__grid { grid-template-columns: 1fr; }
  .events__item { aspect-ratio: 4 / 3; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .reserve__widget iframe { height: 560px; }
}

/* ═══════════════════════════════════════════════════════════
   V2 — Editorial cinema layer
   ═══════════════════════════════════════════════════════════ */

/* ─── Film grain ────────────────────────────────────────── */

.grain {
  position: fixed;
  inset: -100px;
  z-index: 350;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 0.9s steps(4) infinite;
}
@keyframes grainShift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-24px, 32px); }
  50% { transform: translate(28px, -18px); }
  75% { transform: translate(-16px, -28px); }
  100% { transform: translate(0, 0); }
}

/* ─── Watermarks ────────────────────────────────────────── */

.hero__watermark {
  position: absolute;
  z-index: 1;
  right: -0.06em;
  bottom: 0.6rem;
  font-family: "Arkhip", var(--font-body);
  font-weight: 400;
  font-size: clamp(6rem, 17vw, 15rem);
  letter-spacing: 0.06em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 236, 226, 0.14);
  user-select: none;
  pointer-events: none;
}

.section-watermark {
  position: absolute;
  top: 1rem;
  right: -0.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(5rem, 13vw, 11rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(198, 135, 79, 0.16);
  user-select: none;
  pointer-events: none;
}
.section-watermark--wine { -webkit-text-stroke-color: rgba(242, 236, 226, 0.1); }
.concept, .bar { position: relative; overflow: hidden; }

/* ─── Hero v2: line reveal + marquee ────────────────────── */

.hline { display: block; overflow: hidden; }
.hline__in { display: inline-block; }

.hero__marquee {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  padding-block: 1.1rem;
  border-top: 1px solid rgba(242, 236, 226, 0.14);
  background: rgba(20, 17, 13, 0.35);
  backdrop-filter: blur(8px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 2.4rem;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 96s linear infinite;
}
.marquee__track span {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(242, 236, 226, 0.8);
}
.marquee__track i { color: var(--copper); font-style: normal; font-size: 0.7rem; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.hero__scroll { display: none; }

/* ─── Quote band ────────────────────────────────────────── */

.quote-band {
  overflow: hidden;
  background: var(--ink);
  padding-block: var(--space-5);
  border-block: 1px solid rgba(198, 135, 79, 0.18);
}
.quote-band__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: 1.1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(198, 135, 79, 0.65);
  will-change: transform;
}

/* ─── Horizontal gallery ────────────────────────────────── */

.hgal {
  background: var(--ink);
  overflow: hidden;
}
.hgal__head { margin-bottom: var(--space-4); }
.hgal__head .h2 { margin-bottom: var(--space-2); }

.hgal__pin {
  display: flex;
  align-items: center;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 1.4rem;
  /* visible, on-brand scrollbar so the strip reads as optional */
  scrollbar-width: thin;
  scrollbar-color: var(--copper-dim) rgba(242, 236, 226, 0.12);
}
.hgal__pin::-webkit-scrollbar { height: 8px; }
.hgal__pin::-webkit-scrollbar-track {
  background: rgba(242, 236, 226, 0.12);
  border-radius: 4px;
}
.hgal__pin::-webkit-scrollbar-thumb {
  background: var(--copper-dim);
  border-radius: 4px;
}
.hgal__pin::-webkit-scrollbar-thumb:hover { background: var(--copper); }
.hgal__item { scroll-snap-align: center; }
.hgal__track {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  padding-inline: clamp(1.5rem, 5vw, 6rem);
  will-change: transform;
}
.hgal__intro {
  flex: 0 0 auto;
  width: min(420px, 78vw);
}
.hgal__hint {
  margin-top: var(--space-3);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ivory-muted);
}

.hgal__item {
  flex: 0 0 auto;
  height: clamp(260px, 52svh, 460px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--radius);
}
.hgal__item--tall { height: clamp(320px, 68svh, 580px); }
.hgal__item img {
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
  transition: transform 0.7s var(--ease-out), filter 0.5s;
}
.hgal__item:hover img, .hgal__item:focus-visible img {
  transform: scale(1.04);
  filter: brightness(1.08);
}

.hgal__word {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(3.4rem, 9vw, 7.5rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(198, 135, 79, 0.5);
  user-select: none;
  padding-inline: 0.5rem;
}

/* ─── Reserve band (index) ──────────────────────────────── */

.reserve__band {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-5);
  align-items: center;
}
.reserve__band-cta {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.reserve__info .reserve__block { margin-bottom: var(--space-3); }

/* ─── Reserve page (reserve-agora.html) ─────────────────── */

.rsv-page { background: var(--marble); }

.rsv {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  min-height: 100svh;
}

.rsv__side {
  position: relative;
  overflow: hidden;
  display: flex;
  color: var(--ivory);
}
.rsv__side-media, .rsv__side-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.rsv__side-media img { object-fit: cover; }
.rsv__side-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(20, 17, 13, 0.82) 0%, rgba(69, 28, 36, 0.88) 100%);
}
.rsv__side-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  padding: clamp(1.5rem, 4vw, 3.5rem);
}
.rsv__back {
  color: var(--ivory-muted);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-block: 0.5rem;
  transition: color 0.25s;
}
.rsv__back:hover, .rsv__back:focus-visible { color: var(--copper-light); }
.rsv__brand a { text-decoration: none; }
/* was left-aligned here only, which left it hanging off-centre under the
   logo box; every other instance on the site is centred. The brand block
   also has to shrink to the logo, otherwise "centre" means the centre of
   the full-width column rather than of the box above it. */
.rsv__brand { width: fit-content; }
.rsv__brand .logo-sub { text-align: center; }

.rsv__side-body { flex: 1; }
.rsv__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  line-height: 1.08;
  margin-bottom: var(--space-3);
}
.rsv__title em { font-style: italic; color: var(--copper-light); }
.rsv__lede {
  font-weight: 300;
  color: rgba(242, 236, 226, 0.8);
  max-width: 46ch;
  margin-bottom: var(--space-4);
}

.hours--dark td { border-bottom-color: rgba(242, 236, 226, 0.15); color: rgba(242, 236, 226, 0.7); }
.hours--dark td:last-child { color: var(--ivory); }
.hours--dark tr:first-child td { color: var(--copper-light); }

.rsv__contacts {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
}
.reserve__contact--light { color: var(--ivory); }
.reserve__contact--light svg { color: var(--copper-light); }
.reserve__contact--light:hover, .reserve__contact--light:focus-visible { color: var(--copper-light); }

.rsv__note {
  margin-top: var(--space-3);
  font-size: 0.85rem;
  color: rgba(242, 236, 226, 0.65);
  border-left: 2px solid var(--copper);
  padding-left: var(--space-2);
  max-width: 46ch;
}
.rsv__addr {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: rgba(242, 236, 226, 0.55);
}

.rsv__widget {
  display: flex;
  flex-direction: column;
  /* the iframe renders on pure white and cannot be themed from outside
     (cross-origin), so the panel matches it instead of leaving a seam */
  background: #fff;
}
.rsv__widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem clamp(1.2rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--marble-line);
  background: var(--marble);
}
/* DISH centres its own form in a fixed column; without a cap it floats in a
   wide field of white on desktop. Constrain and centre the frame instead. */
.rsv__widget-inner {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: clamp(.5rem, 2vw, 1.5rem) 0;
}
.rsv__widget-head .eyebrow { margin-bottom: 0; }
.lang-toggle--dark {
  color: var(--ink-on-light);
  border-color: rgba(38, 33, 27, 0.3);
}
.lang-toggle--dark:hover, .lang-toggle--dark:focus-visible { border-color: var(--copper-dim); background: rgba(198, 135, 79, 0.1); }
.rsv__widget iframe {
  flex: 1;
  width: 100%;
  max-width: 820px;
  min-height: 640px;
  border: 0;
}

@media (max-width: 980px) {
  .rsv { grid-template-columns: 1fr; }
  .rsv__side { min-height: auto; }
  .rsv__widget iframe { min-height: 78svh; }
  .reserve__band { grid-template-columns: 1fr; }
}

/* ─── Video slots (concept float, bar tall, gallery item) ── */

.concept__img video,
.bar__img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.concept__img--float video { aspect-ratio: 3 / 4; }
.bar__img--tall video { aspect-ratio: 4 / 5; }

.hgal__item--video { cursor: default; }
.hgal__item--video video {
  height: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
}

/* ─── Film (promo) ──────────────────────────────────────── */

.film__wrap {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--space-5);
  align-items: center;
}
.film__player {
  justify-self: center;
  width: min(400px, 100%);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 40px 90px -35px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(198, 135, 79, 0.25);
}
.film__player video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

@media (max-width: 900px) {
  .film__wrap { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ─── Team ──────────────────────────────────────────────── */

.team__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-5);
  align-items: center;
  margin-bottom: var(--space-3);
}
.team__img { overflow: hidden; border-radius: var(--radius); }
.team__img img { width: 100%; transition: transform 0.8s var(--ease-out); }
.team__img:hover img { transform: scale(1.03); }
.team__img--kitchen img { aspect-ratio: 4 / 5; object-fit: cover; }
.team__img--staff img { aspect-ratio: 21 / 9; object-fit: cover; object-position: center 30%; }

@media (max-width: 900px) {
  .team__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .team__img--staff img { aspect-ratio: 16 / 10; }
}

/* ─── Sticky mobile booking CTA ─────────────────────────── */

.mobile-reserve {
  display: none;
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 120%);
  z-index: 95;
  min-height: 48px;
  align-items: center;
  padding: 0.85rem 2.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: #221507;
  background: linear-gradient(135deg, var(--copper) 0%, var(--copper-light) 100%);
  border-radius: 100px;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6), 0 6px 24px -8px rgba(198, 135, 79, 0.6);
  opacity: 0;
  transition: transform 0.4s var(--ease-out), opacity 0.4s;
}
.mobile-reserve.visible {
  transform: translate(-50%, 0);
  opacity: 1;
}
@media (max-width: 900px) {
  .mobile-reserve { display: inline-flex; }
}

/* ─── Magnetic buttons ──────────────────────────────────── */

.magnetic { will-change: transform; }

/* ─── V2 responsive & motion guards ─────────────────────── */

@media (max-width: 900px) {
  .hero__watermark { font-size: clamp(4.5rem, 20vw, 8rem); bottom: 3.6rem; }
  .quote-band { padding-block: var(--space-4); }
}

/* ─── Reduced motion (html.force-motion = ?motion=1 override) ── */

@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) .grain { animation: none; }
  html:not(.force-motion) .marquee__track,
  html:not(.force-motion) .ig__track { animation: none; }
  /* swipeable fallback, but never a visible scrollbar */
  html:not(.force-motion) .ig__marquee {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  html:not(.force-motion) .ig__marquee::-webkit-scrollbar { display: none; }
  html:not(.force-motion) { scroll-behavior: auto; }
  html:not(.force-motion) .hero__media img { animation: none; }
  html:not(.force-motion) .reveal { opacity: 1; transform: none; transition: none; }
  html:not(.force-motion) .menu-item { animation: none; }
  html:not(.force-motion) *,
  html:not(.force-motion) *::before,
  html:not(.force-motion) *::after { transition-duration: 0.01ms !important; }
}