/* H Restaurant Lounge design system.
   Every colour is taken off the room itself: walnut tables, terracotta chairs,
   limestone walls, olive banquettes. Type is Oswald condensed for the headings,
   which is how the printed carte is set, over Archivo for everything spoken
   plainly, Newsreader for dish names and Archivo for the flourishes. */

:root {
  --bg: #241a12;          /* walnut, the table tops */
  --bg-2: #160f0a;        /* espresso, the ceiling */
  --panel: #1f160f;
  --line: rgba(220, 205, 180, 0.22);
  --line-soft: rgba(255, 255, 255, 0.11);
  --text: #fbf6ee;        /* warm white: pure white goes blue against wood */
  --para: #cfc2ae;        /* oat */
  --accent: #c05a38;      /* terracotta, the chairs. Every action is this colour */
  --accent-2: #dccdb4;    /* limestone, for type that needs to lift off the wood */
  --accent-soft: rgba(192, 90, 56, 0.14);
  --ink: #211007;         /* what sits on top of a terracotta fill */
  --olive: #7d8f6a;       /* the banquettes, and the H in the logo */
  --sans: 'Archivo', 'Segoe UI', sans-serif;
  --display: 'Oswald', 'Archivo Narrow', 'Segoe UI', sans-serif;
  --serif: 'Newsreader', Georgia, serif;
  --script: 'Archivo', 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Repeating wood grain, drawn rather than downloaded so it costs nothing.
     Two very low-contrast diagonal washes read as figure in the timber. */
  --grain:
    repeating-linear-gradient(96deg,
      rgba(255, 236, 205, 0.016) 0 2px,
      rgba(0, 0, 0, 0.018) 2px 5px,
      rgba(255, 236, 205, 0.010) 5px 9px),
    repeating-linear-gradient(93deg,
      rgba(0, 0, 0, 0.02) 0 17px,
      rgba(255, 236, 205, 0.012) 17px 41px);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--grain), var(--bg);
  color: var(--para);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Sections that paint their own solid background lose the body grain, so they
   carry it themselves. Photo-backed bands are left alone. */
.menu-section:not(#menu), footer, .reserve-panel { background-image: var(--grain); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

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

/* ---------- Typography ---------- */
/* Headings are condensed and set tight, so a long French title still holds one
   line and the page reads like the printed carte rather than a wide-tracked
   luxury template. */
h1, h2, h3 { font-family: var(--display); font-weight: 400; color: var(--text); line-height: 1.08; }

.kicker {
  font-family: var(--script);
  font-size: clamp(25px, 2.8vw, 36px);
  color: var(--accent-2);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  display: block;
  line-height: 1.1;
  opacity: 0.92;
}

.section-title {
  font-size: clamp(40px, 5.6vw, 74px);
  margin: 4px 0 14px;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  font-weight: 400;
}
/* Script words now match the surrounding heading — font-style only to cancel em italic */
.t-script { font-style: normal; }
.section-sub { color: var(--para); max-width: 560px; font-size: 16px; }

.serif { font-family: var(--serif); }

/* ---------- Layout ---------- */
.container { width: min(1180px, 90vw); margin: 0 auto; }
section { padding: clamp(84px, 10vw, 150px) 0; position: relative; }
.section-head { margin-bottom: clamp(36px, 5vw, 64px); }
.section-head.center { text-align: center; }
.section-head.center .section-sub { margin: 0 auto; }

/* ---------- Buttons ---------- */
/* Pills, and dark ink on the terracotta rather than white: 11.5px uppercase on
   #c05a38 does not clear the contrast bar in white, and does in ink. */
.btn {
  display: inline-block;
  padding: 15px 38px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  color: var(--text);
  background: transparent;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11.5px;
  font-weight: 600;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn.solid { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn.solid:hover { background: transparent; border-color: rgba(255, 255, 255, 0.5); color: var(--text); }
.btn.ghost { border-color: var(--line); color: var(--para); }
.btn.ghost:hover { border-color: var(--accent); background: var(--accent); color: var(--ink); }
.btn:disabled { opacity: 0.5; pointer-events: none; }

/* ---------- Nav (links left, logo center, actions right) ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  transition: background 0.4s, box-shadow 0.4s, padding 0.4s;
  padding: 22px 0;
}
.nav.scrolled { background: rgba(22, 15, 10, 0.94); backdrop-filter: blur(12px); padding: 12px 0; box-shadow: 0 1px 0 var(--line-soft); }
/* backdrop-filter turns .nav into the containing block for fixed children,
   which breaks the full-screen mobile menu; drop it while the menu is open */
.nav.menu-open, .nav.scrolled.menu-open { backdrop-filter: none; background: transparent; box-shadow: none; }
/* The bar carries more than the page content does, so it gets its own wider
   measure rather than the 1180px reading column. */
.nav .container { width: min(1560px, 94vw); }
.nav-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; }
.nav-logo { justify-self: start; grid-column: 1; grid-row: 1; display: flex; align-items: center; }
/* Explicit width, and no shrinking. The mark is square, and with width:auto a
   crowded bar collapsed the grid column to nothing and the logo vanished. */
.nav-logo img { height: 62px; width: 62px; min-width: 62px; flex: none; transition: height .3s var(--ease), width .3s var(--ease), min-width .3s var(--ease); }
.nav.scrolled .nav-logo img { height: 52px; width: 52px; min-width: 52px; }
.nav-links { display: flex; gap: 20px; align-items: center; justify-content: center; list-style: none; grid-column: 2; grid-row: 1; }
.nav-right { display: flex; gap: 18px; align-items: center; justify-content: flex-end; grid-column: 3; grid-row: 1; list-style: none; }
.nav-links a, .nav-right a {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text);
  opacity: 0.95;
  transition: opacity 0.3s, color 0.3s;
  position: relative;
  padding: 6px 0;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent-2);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav-links a:hover { opacity: 1; color: var(--accent-2); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta {
  border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px;
  padding: 10px 20px !important;
}
/* French labels are longer than the English ones and were wrapping inside the
   pills. The bar has the room; it just must not be allowed to break. */
.nav-links > li > a, .nav-right > li > a { white-space: nowrap; }
.nav-cta:hover { background: var(--accent); border-color: var(--accent); color: var(--ink) !important; }

/* Two-state pill, same outline as the buttons next to it. The knob slides
   under whichever language is active instead of two separate blocks. */
.lang-switch {
  position: relative; display: flex; padding: 3px;
  border: 1px solid var(--line-soft); border-radius: 999px;
}
.lang-switch::before {
  content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  background: var(--accent); border-radius: 999px;
  transition: transform 0.35s var(--ease);
}
.lang-switch.on-fr::before { transform: translateX(100%); }
.lang-switch button {
  position: relative; z-index: 1; background: transparent; border: 0; color: var(--para);
  font-size: 10.5px; letter-spacing: 0.12em; padding: 6px 13px; border-radius: 999px;
  transition: color 0.3s;
}
.lang-switch button.active { color: var(--ink); }

.burger { display: none; background: none; border: 0; width: 30px; height: 22px; position: relative; z-index: 70; justify-self: end; grid-column: 3; grid-row: 1; }
.burger span { position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--text); transition: 0.35s var(--ease); }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 10px; }
.burger span:nth-child(3) { top: 20px; }
.burger.open span:nth-child(1) { top: 10px; transform: rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

/* ---------- Hero (video-ready, teal frame like the reference) ---------- */
.hero {
  height: 100svh;
  min-height: 640px;
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  padding: 0;
}
.hero-bg { position: absolute; inset: 0; background: var(--bg-2); }
.hero-bg video, .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg img.kb { animation: kenburns 24s var(--ease) infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.1); } }
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22, 15, 10, 0.5) 0%, rgba(22, 15, 10, 0.18) 45%, rgba(22, 15, 10, 0.72) 100%);
}
.hero-content { position: relative; z-index: 2; padding: 0 24px; }
.hero-script {
  font-family: var(--script);
  font-size: clamp(46px, 7.2vw, 104px);
  color: #fff;
  font-weight: 400;
  line-height: 1.12;
  max-width: 15ch;
  margin: 0 auto;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.4);
}
.hero-tag {
  margin-top: 22px;
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(13px, 1.6vw, 17px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.55em;
  text-indent: 0.55em;
}
.hero-actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 44px; }

.hero-content > * { opacity: 0; transform: translateY(26px); animation: heroIn 1.1s var(--ease) forwards; }
.hero-content > *:nth-child(2) { animation-delay: 0.18s; }
.hero-content > *:nth-child(3) { animation-delay: 0.36s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
@keyframes navItemIn { to { opacity: 1; transform: none; } }

/* Rotating reserve badge */
.reserve-badge {
  position: fixed; right: 34px; bottom: 34px; z-index: 55;
  width: 110px; height: 110px; display: grid; place-items: center;
}
.reserve-badge svg { position: absolute; inset: 0; animation: spin 14s linear infinite; }
.reserve-badge svg text { fill: #fff; font-family: var(--sans); font-size: 8.4px; letter-spacing: 0.28em; text-transform: uppercase; }
/* The monogram sits still while the wording turns around it */
.reserve-badge .badge-center { display: grid; place-items: center; transition: transform 0.5s var(--ease); }
.reserve-badge .badge-center img { width: 46px; height: 46px; border-radius: 50%; }
.reserve-badge:hover .badge-center { transform: scale(1.1); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Opening hours under the hero buttons: the single fact people look for */
.hero-hours {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 34px; font-size: 12px; letter-spacing: 0.34em; color: var(--accent-2);
}
.hero-hours i { display: block; width: 46px; height: 1px; background: currentColor; opacity: 0.5; }
@media (max-width: 700px) { .hero-hours { margin-top: 26px; letter-spacing: 0.22em; } }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
/* slide-in from the left (about images) */
.reveal-left { opacity: 0; transform: translateX(-90px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.reveal-left.visible { opacity: 1; transform: none; }
.reveal[data-delay='1'], .reveal-left[data-delay='1'] { transition-delay: 0.12s; }
.reveal[data-delay='2'], .reveal-left[data-delay='2'] { transition-delay: 0.24s; }
.reveal[data-delay='3'], .reveal-left[data-delay='3'] { transition-delay: 0.36s; }

/* Someone who has asked their system for less motion gets the content, not the
   choreography. Without this the page reads as blank until it animates in. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-left { opacity: 1; transform: none; transition: none; }
  .gal-track, .reserve-badge svg, .kb { animation: none; }
  .hero video { display: none; }
}

/* ---------- About (arched + leaf images, reference signature) ---------- */
.about-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.about-images { position: relative; padding-bottom: 80px; }
/* One cut corner per composition. Both images carrying one made the pair fight
   each other where they overlap. */
.about-images .img-main { width: 78%; border-radius: 3px 118px 3px 3px; }
.about-images .img-accent {
  position: absolute; right: 0; bottom: 0; width: 48%;
  border-radius: 4px;
  border: 10px solid var(--bg);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}
.img-frame { overflow: hidden; }
.img-frame img { transition: transform 1.2s var(--ease); }
.img-frame:hover img { transform: scale(1.06); }
.about-text p { color: var(--para); margin: 22px 0; font-size: 16px; }
/* The signature under the story — needs size to read as a signature. */
.about-sign { font-family: var(--script); font-size: 72px; color: var(--accent-2); margin-top: 10px; line-height: 1; opacity: 0.85; }

/* ---------- Menu ---------- */
.menu-section { background: var(--bg-2); }
/* Homepage menu section sits on a moody photo band, like the reference */
#menu.menu-section {
  background:
    linear-gradient(180deg, rgba(22, 15, 10, 0.78) 0%, rgba(22, 15, 10, 0.9) 40%, rgba(26, 18, 12, 0.97) 100%),
    url('../images/menu-bg.jpg') center / cover fixed;
}
.menu-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 40px; }
.menu-tabs button {
  background: transparent; border: 1px solid var(--line-soft); color: var(--para);
  border-radius: 999px;
  padding: 12px 34px; text-transform: uppercase; letter-spacing: 0.24em; font-size: 11px; transition: 0.35s;
}
.menu-tabs button.active { border-color: var(--accent); color: var(--accent-2); background: var(--accent-soft); }
/* minmax(0, 1fr) rather than 1fr. A bare 1fr floors each track at its
   min-content, and with dish names set nowrap that floor is the longest name
   in the column: the tracks came out 344 / 465 / 358 instead of equal thirds,
   and the row ran past the right edge of the container, which read as the
   whole carte sitting off centre. The zero minimum lets the tracks be equal
   and keeps the grid inside the container it is centred in. */
.menu-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 46px) clamp(36px, 5vw, 80px); align-items: start; }
/* A third column on a wide screen: 23 categories in two columns is a lot of
   scrolling on a monitor that has the room for more. */
/* Three columns on a wide screen, but only on the full carte. The home page
   shows a short preview, and a third column there left one category stranded
   on a row of its own. */
@media (min-width: 1500px) {
  .menu-page .menu-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Three columns inside 1180px leaves each one narrow, so on the carte a long
     name wraps instead of pushing its track wider. The leader dots and the
     price stay on the first line, the way they already do on a phone. */
  .menu-page .menu-item .mi-name { white-space: normal; }
  /* Narrower price columns too: three tracks inside 1180px leave little room,
     and the name needs what the figures do not use. */
  .menu-page .menu-cat.two-way { --price-col: 58px; --price-col-alt: 70px; }
}
.menu-cat h3 {
  font-family: var(--script);
  font-size: 33px;
  color: var(--accent-2);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 18px;
  font-weight: 400;
}
.menu-cat h3::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.menu-cat-sub {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent-2);
  font-size: 15px;
  margin: -8px 0 10px;
}
/* Tightened deliberately: the carte is long, and air between every line pushed
   most of it below the fold without making any of it easier to read. */
.menu-item { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; }
.menu-item .mi-name { font-family: var(--serif); font-size: 17.5px; font-weight: 500; color: var(--text); white-space: nowrap; }
.menu-item .mi-dots { flex: 1; border-bottom: 1px dotted rgba(207, 194, 174, 0.3); transform: translateY(-5px); }
.menu-item .mi-price { font-family: var(--serif); font-style: italic; color: var(--accent-2); font-size: 15px; white-space: nowrap; }
.menu-item-desc { color: var(--para); opacity: 0.8; font-size: 13.5px; margin: -3px 0 6px; max-width: 88%; }
.menu-actions { text-align: center; margin-top: 44px; }

/* ---------- The booking button ---------- */
/* Qualified with .btn so it outweighs .btn.solid, which is the same weight
   and would otherwise repaint this terracotta.
   WhatsApp green rather than the house terracotta: this button leaves the
   site, and the guest should recognise where it goes before pressing it. */
.btn.wa-btn {
  display: inline-flex; align-items: center; gap: 11px;
  background: #25d366; border-color: #25d366; color: #06301a;
}
.btn.wa-btn:hover { background: #1fb457; border-color: #1fb457; color: #06301a; }
.btn.wa-btn.busy { opacity: .6; pointer-events: none; }
.btn.wa-btn svg { width: 19px; height: 19px; fill: currentColor; flex: none; }
/* The full carte is a reference list, so it starts closer to the top than a
   landing section would and the promo notice sits tight above the tabs. */
.menu-page { padding-top: clamp(46px, 5vw, 74px); }

/* The carte reads in its own language, chosen here rather than from the site
   switch in the bar: a guest can read the dishes in Spanish while the rest of
   the page stays in French. Underline rather than a filled pill, so it reads
   as a setting for the list below it and not as another pair of tabs. */
.carte-lang { display: flex; justify-content: center; gap: 0; margin: 18px 0 clamp(30px, 3vw, 48px); }
.carte-lang button {
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 10px 16px; min-height: 44px; color: var(--para); opacity: .75;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), opacity .3s var(--ease), border-color .3s var(--ease);
}
.carte-lang button + button { border-left: 1px solid var(--line-soft); }
.carte-lang button:hover { opacity: 1; color: var(--text); }
.carte-lang button.active { opacity: 1; color: var(--accent-2); border-bottom-color: var(--accent); }
@media (max-width: 560px) {
  .carte-lang { margin: 14px 0 26px; }
  .carte-lang button { padding: 10px 11px; font-size: 11px; letter-spacing: .1em; }
}
.menu-page .promo-notice { margin-bottom: 22px; }

/* Sold by the glass and by the bottle: one row, two price columns, right
   aligned so the figures line up down the list.

   The widths are px and not em. The column heading sits at 10px and the
   figures at 15px, and an em width resolves against each element's own
   font-size, so VERRE and BOUTEILLE were holding columns a third narrower
   than the numbers underneath them and never lined up. One width per
   column, shared by the heading and the figures, is what aligns them. */
.menu-cat.two-way { --price-col: 84px; --price-col-alt: 93px; }
/* Centred, not right-aligned: the figures sit under the middle of VERRE and
   BOUTEILLE, the way a centred spreadsheet column reads. Heading and figures
   share one width, so centring both lines them up on the same axis. */
/* flex: none matters as much as the width. These are flex children, and
   flex-shrink defaults to 1, so in a narrow column the two price cells gave
   up different amounts of width depending on how long the name beside them
   was, and the figures drifted off the centre line by up to 25px. */
.menu-cat.two-way .mi-price { width: var(--price-col); flex: none; text-align: center; }
.menu-cat.two-way .mi-price.alt { width: var(--price-col-alt); }

/* Categories priced at one figure: the name is the only thing on the line, so
   it may wrap. Left nowrap it would run past the column edge on a narrow
   screen, with no dots beside it to give way first. */
.menu-cat.flat-price .mi-name { white-space: normal; }
.menu-item.mi-head { padding: 0 0 4px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.menu-item.mi-head .mi-price {
  font-family: var(--sans); font-style: normal;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--para); opacity: 0.75;
}

/* ---------- The week, under the Ritual ---------- */
/* The cards are the posters above in miniature: same square, same clipped
   corner, same border and the same lift on hover. They sit outside the
   reading column for the same reason the posters do, because six cards at
   that size do not fit 1180px, and shrinking them to fit made them read as a
   different component rather than the same one a row down. */
.nights-invite {
  display: grid; justify-items: center; gap: 10px;
  margin-top: clamp(30px, 3.4vw, 48px);
  text-align: center;
}
.nights-invite.hidden { display: none; }
.nights-invite p {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(15px, 1.5vw, 17.5px); color: var(--accent-2);
  margin: 0;
}
.nights-hand { display: block; width: 46px; color: var(--accent); }
.nights-hand svg { width: 100%; height: auto; display: block; fill: currentColor; }
/* A short fall and a pause, so it points rather than fidgets */
@keyframes nightsPoint {
  0%, 62%, 100% { transform: translateY(0); }
  76% { transform: translateY(7px); }
  88% { transform: translateY(2px); }
}
.nights-hand svg { animation: nightsPoint 3.4s var(--ease) infinite; }

.nights {
  margin-top: clamp(16px, 1.8vw, 26px);
  width: 100vw; margin-left: calc(50% - 50vw);
  padding-inline: clamp(14px, 3vw, 54px);
}
.nights-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(158px, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 4px 0 10px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.nights-track::-webkit-scrollbar { display: none; }

.night-card {
  position: relative; overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line-soft);
  border-radius: 3px 62px 3px 3px;
  background: var(--bg-2); padding: 0; cursor: pointer;
  scroll-snap-align: start;
  display: grid; place-items: end center;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.night-card.is-empty { cursor: default; opacity: .55; }
/* The picture is the background, so it is blurred and darkened without
   touching the day sitting on top of it. Scaled up because a blur feathers
   the edges and would otherwise show the card behind them. */
.night-bg {
  content: ''; position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: blur(5px) brightness(.55) saturate(.9);
  transform: scale(1.14);
  transition: filter .45s var(--ease), transform .6s var(--ease);
}
.night-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22, 15, 10, .25), rgba(22, 15, 10, .8));
}
.night-label {
  position: relative; z-index: 2;
  display: grid; gap: 3px; justify-items: center;
  padding: 0 10px clamp(16px, 1.6vw, 24px); text-align: center;
}
.night-label strong {
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(11.5px, 1vw, 13px); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text);
}
.night-label small {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(11.5px, 1vw, 13px);
  color: var(--accent-2); opacity: .9;
}
.night-card:not(.is-empty):hover { border-color: var(--accent); transform: translateY(-4px); }
.night-card:not(.is-empty):hover .night-bg { filter: blur(2px) brightness(.68) saturate(1); transform: scale(1.06); }
.night-card.is-today { border-color: var(--accent); }
.night-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A clip in the lightbox sits in the same box a picture would */
.lightbox .lb-video {
  max-width: 90vw; max-height: 86vh; max-height: 86dvh;
  background: #000; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
}
.lightbox .hidden { display: none !important; }
.lightbox.lb-single .lb-prev, .lightbox.lb-single .lb-next { display: none; }

@media (prefers-reduced-motion: reduce) {
  .nights-hand svg { animation: none; }
}
@media (max-width: 560px) {
  .night-label strong { letter-spacing: .14em; }
  .nights-hand { width: 34px; }
}

/* ---------- Spaces ---------- */
.spaces-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.space-card { position: relative; overflow: hidden; aspect-ratio: 3 / 4.2; border-radius: 3px 92px 3px 3px; }
.space-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.space-card:hover img { transform: scale(1.08); }
.space-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(22, 15, 10, 0.88));
  border-radius: inherit;
}
.space-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 22px; z-index: 2;
  text-align: center;
  font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text);
}
/* The sub-label is optional; an empty one must not reserve space. */
.space-card figcaption small:empty { display: none; }
.space-card figcaption small {
  display: block;
  font-family: var(--script);
  font-size: 22px; letter-spacing: 0; text-transform: none;
  color: var(--accent-2); margin-top: 2px;
}

/* ---------- Afterwork band ---------- */
.afterwork {
  background:
    linear-gradient(100deg, rgba(22, 15, 10, 0.94) 0%, rgba(36, 26, 18, 0.88) 55%, rgba(22, 15, 10, 0.96) 100%),
    var(--grain), var(--bg-2);
  border-block: 1px solid var(--line);
}
.afterwork-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 100px); align-items: center;
}
.afterwork-copy .section-title { margin-bottom: 6px; }
.afterwork-copy p { color: var(--para); margin-bottom: 22px; max-width: 44ch; }
.afterwork-time {
  font-family: var(--serif); font-style: italic; font-size: 22px;
  color: var(--accent-2); margin: 0 0 18px !important;
}
.afterwork-copy .btn { margin-top: 6px; }
/* Same dotted leader as the menu, on a slightly warmer card so the band reads
   as a card pinned to the wall rather than another menu section. */
.afterwork-list {
  background: rgba(192, 90, 56, 0.06);
  border: 1px solid var(--line);
  border-radius: 3px 90px 3px 3px;
  padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 38px);
}
.aw-row { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; }
.aw-name { font-family: var(--serif); font-size: 17px; color: var(--text); }
.aw-dots { flex: 1; border-bottom: 1px dotted rgba(207, 194, 174, 0.28); transform: translateY(-4px); }
.aw-price { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--accent-2); white-space: nowrap; }
@media (max-width: 900px) {
  .afterwork-inner { grid-template-columns: 1fr; }
  .afterwork-list { border-radius: 3px 60px 3px 3px; }
}

/* ---------- Gallery: two half-bands sliding in opposite directions ---------- */
.gallery-section { background: var(--bg-2); }
.gal-rows {
  display: grid; gap: 16px;
  /* full-bleed band, breaking out of .container */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.gal-marquee {
  overflow: hidden;
  position: relative;
  /* soft fade on both edges so photos glide in and out */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.gal-track { display: flex; width: max-content; animation: gal-slide 60s linear infinite; }
.gal-marquee.reverse .gal-track { animation-direction: reverse; animation-duration: 70s; }
.gal-marquee:hover .gal-track { animation-play-state: paused; }
.gal-track img {
  height: 290px; width: auto; display: block; flex-shrink: 0;
  margin-right: 16px; cursor: zoom-in;
  transition: filter 0.5s, opacity 0.5s;
}
.gal-track img:hover { filter: brightness(1.12); }
@keyframes gal-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 700px) { .gal-track img { height: 170px; margin-right: 10px; } }

/* ---------- Welcome pop-up ---------- */
/* The image the owner hangs on the live banner. Sits above everything except
   nothing: it is the first thing a guest sees, so it owns the screen until it
   is dismissed. */
.welcome-pop {
  position: fixed; inset: 0; z-index: 130;
  display: grid; place-items: center; padding: 24px;
  background: rgba(22, 15, 10, 0.86);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.welcome-pop.open { opacity: 1; pointer-events: auto; }
.welcome-pop-card {
  position: relative;
  width: min(760px, 100%);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 3px 62px 3px 3px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
  padding: 14px 14px 26px;
  transform: translateY(14px);
  transition: transform 0.35s var(--ease);
}
.welcome-pop.open .welcome-pop-card { transform: none; }
/* An inner rule, the way the ritual cards carry one */
.welcome-pop-card::after {
  content: ''; position: absolute; inset: 8px; pointer-events: none;
  border: 1px solid rgba(220, 205, 180, 0.22);
  border-radius: 2px 54px 2px 2px;
}
.welcome-pop-img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  position: relative; z-index: 1;
}
.welcome-pop-cta {
  position: relative; z-index: 1;
  display: block; width: max-content; margin: 22px auto 4px;
}
.welcome-pop-close {
  position: absolute; top: -14px; right: -14px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  font-size: 22px; line-height: 1; display: grid; place-items: center;
  transition: color 0.3s, border-color 0.3s;
}
.welcome-pop-close:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 560px) {
  .welcome-pop { padding: 18px; }
  .welcome-pop-close { top: -10px; right: -10px; }
  .welcome-pop-card { padding: 10px 10px 22px; border-radius: 3px 40px 3px 3px; }
  .welcome-pop-card::after { border-radius: 2px 34px 2px 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-pop, .welcome-pop-card { transition: none; }
  .welcome-pop-card { transform: none; }
}

.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(20, 14, 9, 0.96);
  display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity 0.35s;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 90vw; max-height: 86vh; max-height: 86dvh; object-fit: contain; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5); }
.lightbox button {
  position: absolute; background: none; border: 1px solid var(--line-soft); color: var(--text);
  width: 48px; height: 48px; font-size: 18px; transition: 0.3s; display: grid; place-items: center;
}
.lightbox button:hover { border-color: var(--accent); color: var(--accent-2); }
.lb-close { top: 26px; right: 26px; }
.lb-prev { left: 26px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 26px; top: 50%; transform: translateY(-50%); }

/* ---------- Hours / contact / map ---------- */
.info-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 5vw, 80px); align-items: stretch; }
/* Set by main.js when no coordinates exist yet, so the hours are not left
   sitting next to an empty half of the page. */
.info-grid.no-map { grid-template-columns: 1fr; max-width: 620px; }
.hours-list { list-style: none; margin-top: 30px; }
.hours-list li { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.hours-list .day-col { min-width: 150px; display: flex; flex-direction: column; gap: 2px; }
.hours-list .day { text-transform: uppercase; letter-spacing: 0.16em; font-size: 11.5px; color: var(--para); opacity: 0.85; }
/* What plays that night, under the day it belongs to */
.hours-list .day-note { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--accent-2); opacity: 0.9; }
.hours-list .dots { flex: 1; border-bottom: 1px dotted rgba(207, 194, 174, 0.25); transform: translateY(-4px); }
.hours-list .time { color: var(--text); }
.hours-list .closed { color: var(--accent-2); font-family: var(--serif); font-style: italic; }
.contact-lines { margin-top: 28px; display: grid; gap: 10px; color: var(--para); font-size: 15px; }
.contact-lines a:hover { color: var(--accent-2); }
.contact-lines strong { color: var(--text); font-weight: 400; }
#map { min-height: 420px; height: 100%; border: 1px solid var(--line); z-index: 1; }
.map-pin { position: relative; width: 22px; height: 22px; }
.map-pin::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.map-pin::after {
  content: '';
  position: absolute; inset: -12px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: pin-pulse 2s ease-out infinite;
}
@keyframes pin-pulse {
  from { transform: scale(0.5); opacity: 0.9; }
  to { transform: scale(1.3); opacity: 0; }
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #fff; color: #333; }
.leaflet-popup-content a { color: #c05a38; font-weight: 500; }

/* ---------- Reservation ---------- */
.reserve-section { background: linear-gradient(rgba(22, 15, 10, 0.86), rgba(22, 15, 10, 0.93)), url('../images/space-restaurant.jpg') center/cover fixed; }
.reserve-panel {
  max-width: 760px; margin: 0 auto; background: rgba(31, 22, 15, 0.85);
  backdrop-filter: blur(8px); border: 1px solid var(--line);
  padding: clamp(34px, 5vw, 64px);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 34px; }
.form-field { display: grid; gap: 8px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.28em; color: var(--para); opacity: 0.85; }
.form-field input, .form-field select {
  background: rgba(22, 15, 10, 0.55);
  border: 1px solid var(--line-soft);
  color: var(--text);
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.03em;
  transition: border-color 0.3s;
  width: 100%;
  border-radius: 0;
  appearance: none;
}
.form-field input:focus, .form-field select:focus { outline: none; border-color: var(--accent); }
.form-field input::placeholder { color: rgba(207, 194, 174, 0.45); }
.form-field select { background-image: linear-gradient(45deg, transparent 50%, var(--para) 50%), linear-gradient(135deg, var(--para) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.form-field input[type='date'], .form-field input[type='time'] { color-scheme: dark; }
.form-field label .opt { text-transform: none; letter-spacing: 0.04em; opacity: 0.7; }
.field-hint { font-size: 12.5px; color: var(--para); opacity: 0.7; line-height: 1.5; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-msg .ref { font-family: var(--display); letter-spacing: 0.12em; color: var(--text); white-space: nowrap; }
.phone-row { display: grid; grid-template-columns: 132px 1fr; gap: 10px; }
.form-note { color: var(--para); opacity: 0.8; font-size: 13px; margin-top: 18px; text-align: center; }
.form-submit { margin-top: 30px; text-align: center; }
.form-msg { margin-top: 18px; text-align: center; font-size: 14px; display: none; }
.form-msg.ok { display: block; color: #9ab28a; }
.form-msg.err { display: block; color: #e0a49b; }

/* ---------- Footer ---------- */
footer { background: var(--bg-2); border-top: 1px solid var(--line-soft); padding: 70px 0 34px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 44px; margin-bottom: 50px; }
.footer-grid h4 { font-family: var(--script); font-size: 26px; font-weight: 400; margin-bottom: 16px; color: var(--accent-2); }
.footer-grid p, .footer-grid a, .footer-grid li { color: var(--para); font-size: 14px; list-style: none; }
.footer-grid a:hover { color: var(--accent-2); }
.footer-grid ul { display: grid; gap: 9px; }
.footer-logo { height: 48px; width: auto; margin-bottom: 16px; }
.socials { display: flex; gap: 14px; margin-top: 22px; }
/* The brand mark is the button: no frame around it, so the logo fills the box.
   Full brand colour at all times, never dimmed or filtered. */
.socials a {
  width: 42px; height: 42px;
  display: block; border-radius: 10px; overflow: hidden;
  transition: transform 0.3s var(--ease);
}
.socials a img { width: 100%; height: 100%; object-fit: contain; display: block; }
.socials a:hover { transform: translateY(-2px); }
.footer-bottom { border-top: 1px solid var(--line-soft); padding-top: 26px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--para); opacity: 0.85; font-size: 12px; letter-spacing: 0.08em; }
.footer-bottom a:hover { color: var(--accent-2); }

/* ---------- Subpages ---------- */
.page-hero { height: 48vh; min-height: 360px; display: grid; place-items: center; text-align: center; position: relative; overflow: hidden; padding: 0; }
.page-hero .hero-bg img { animation: none; }
/* Dish photography is bright, so the page title needs a heavier scrim here
   than the darker home hero does */
.page-hero .hero-bg::after {
  background: linear-gradient(180deg, rgba(22, 15, 10, 0.68) 0%, rgba(22, 15, 10, 0.46) 45%, rgba(22, 15, 10, 0.8) 100%);
}
/* The poster carries the still, so a browser that blocks autoplay or a guest
   who asked for less motion still gets the dish rather than an empty slab. */
.hero-video { display: block; }
/* A short wide band can only show a slice of a portrait photo, which blown up
   reads as a badly cropped close-up. A light blur turns it into a backdrop and
   keeps the title legible. The scale hides the soft edges the blur leaves. */
.page-hero .hero-video { filter: blur(3px) saturate(1.04); transform: scale(1.05); }
/* Phones get the still: 1.8 MB of loop is not worth spending on mobile data,
   and iOS low power mode refuses to autoplay it anyway. Same for anyone who
   asked their system for less motion. */
@media (prefers-reduced-motion: reduce), (max-width: 720px) {
  .hero-video { display: none; }
  .page-hero .hero-bg {
    background: url('../images/menu-hero-poster.jpg') center / cover no-repeat;
  }
}
.page-hero h1 { font-size: clamp(40px, 6vw, 76px); position: relative; z-index: 2; text-transform: uppercase; letter-spacing: 0.1em; }
.page-hero .kicker { position: relative; z-index: 2; }
.legal { max-width: 800px; margin: 0 auto; }
.legal h1 { text-transform: uppercase; letter-spacing: 0.06em; }
.legal h2 { font-size: 24px; margin: 44px 0 14px; color: var(--accent-2); font-weight: 400; }
.legal p, .legal li { color: var(--para); font-size: 15px; margin-bottom: 12px; }
.legal ul { padding-left: 20px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 30px; left: 50%; transform: translate(-50%, 20px);
  background: var(--panel); border: 1px solid var(--accent); color: var(--text);
  padding: 14px 28px; font-size: 13.5px; letter-spacing: 0.05em; z-index: 100;
  opacity: 0; pointer-events: none; transition: 0.4s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .spaces-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .menu-cols { grid-template-columns: 1fr; }
  .reserve-badge { display: none; }
}
/* Seven links plus the language switch, the booking pill and two account
   links do not fit a laptop bar. Below this the whole lot moves into the
   burger panel, which already lists every one of them. */
@media (max-width: 1260px) {
  .nav-inner { grid-template-columns: auto 1fr auto; }
  .nav-logo { grid-column: 1; justify-self: start; }
  .nav-logo img { height: 40px; }
  .nav-links {
    position: fixed; inset: 0;
    height: 100svh;
    background: #140e09;
    flex-direction: column; justify-content: center; align-items: center; gap: 26px;
    /* clip-path slide instead of translateX: a translated full-screen panel
       widens the layout viewport and lets the page pan sideways on phones */
    clip-path: inset(0 0 0 100%);
    visibility: hidden;
    transition: clip-path 0.5s var(--ease), visibility 0s 0.5s;
    grid-column: auto; grid-row: auto;
    z-index: 65;
    list-style: none;
  }
  .nav-links.open {
    clip-path: inset(0);
    visibility: visible;
    transition: clip-path 0.5s var(--ease);
  }
  .nav-links a { font-size: 17px; letter-spacing: 0.24em; text-indent: 0.24em; display: inline-block; }
  .nav-links .nav-cta { border: 1px solid var(--accent); padding: 14px 30px !important; }
  .nav-links li { width: 100%; text-align: center; opacity: 0; transform: translateY(16px); }
  .nav-links .lang-switch { display: inline-flex; }
  .nav-links.open li { animation: navItemIn 0.5s var(--ease) forwards; }
  .nav-links.open li:nth-child(1) { animation-delay: 0.08s; }
  .nav-links.open li:nth-child(2) { animation-delay: 0.14s; }
  .nav-links.open li:nth-child(3) { animation-delay: 0.2s; }
  .nav-links.open li:nth-child(4) { animation-delay: 0.26s; }
  .nav-links.open li:nth-child(5) { animation-delay: 0.32s; }
  .nav-links.open li:nth-child(6) { animation-delay: 0.38s; }
  .nav-links.open li:nth-child(7) { animation-delay: 0.44s; }
  .nav-right { display: none; }
  .nav-links .mobile-only { display: block; }
  .burger { display: block; }
  /* Simple navs (legal pages) have no burger: keep their links inline */
  .nav-simple .nav-links {
    position: static; height: auto; background: none;
    flex-direction: row; transform: none; gap: 18px; z-index: auto;
  }
  .nav-simple .nav-links li { opacity: 1; transform: none; }
  .nav-simple .nav-links a { font-size: 11px; }
}

@media (max-width: 900px) {
  .about-grid, .info-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  #map { min-height: 340px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  /* iOS ignores background-attachment: fixed; keep the band readable */
  #menu.menu-section, .reserve-section { background-attachment: scroll; }
}
@media (min-width: 901px) {
  .nav-links .mobile-only { display: none; }
}
@media (max-width: 560px) {
  .spaces-grid { grid-template-columns: 1fr; }
  .space-card { aspect-ratio: 16 / 11; border-radius: 3px 70px 3px 3px; }
  .hero-actions .btn { width: 100%; text-align: center; }
  .hero-tag { letter-spacing: 0.3em; text-indent: 0.3em; }
  /* No row wraps here any more. Letting it wrap dropped the price onto a line
     of its own under any name that needed two lines, and stranded the leader
     dots out to the right of the first line, which is what made the carte look
     broken on a phone. Instead the name takes the slack and runs to a second
     line inside its own cell, while the price holds the right edge and sits on
     the first line's baseline, level with the dots. */
  .menu-item { flex-wrap: nowrap; align-items: baseline; }
  .menu-item .mi-name {
    white-space: normal; max-width: none;
    flex: 1 1 auto; min-width: 0; overflow-wrap: break-word;
  }
  .menu-item .mi-dots { flex: 0 1 18px; min-width: 0; }
  .menu-item .mi-price { flex: none; }

  /* Narrower columns, still one width each shared by heading and figures */
  .menu-cat.two-way { --price-col: 54px; --price-col-alt: 66px; }
  /* BOUTEILLE is a long word for a narrow column; drop the tracking so the
     heading sits inside it instead of running off the edge. */
  .menu-cat.two-way .mi-head .mi-price { font-size: 8.5px; letter-spacing: 0.06em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .reveal-left { opacity: 1; transform: none; }
}

/* ---------- Account (sign in, sign up, member area) ---------- */
.nav-auth {
  background: var(--accent); color: var(--ink) !important; border: 1px solid var(--accent);
  border-radius: 999px; padding: 10px 20px !important; letter-spacing: 0.14em;
  transition: background .3s, color .3s;
}
.nav-auth:hover { background: var(--accent-2); border-color: var(--accent-2); }
.nav-auth.signed-in { background: transparent; color: var(--accent-2) !important; }

/* The photo sits behind the whole page, so scrolling never reveals a bare slab */
.page-account { background: var(--bg-2); }
.page-account::before {
  content: ''; position: fixed; inset: 0; z-index: -2;
  background: url('/images/account-bg.jpg') center/cover no-repeat;
}
.page-account::after {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(22, 15, 10,.62), rgba(22, 15, 10,.78) 55%, rgba(22, 15, 10,.92));
}
/* A form page has no hero, so the bar is solid from the start */
.page-account .nav {
  background: rgba(22, 15, 10, 0.95); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line-soft); padding: 12px 0;
}
.page-account .nav-logo img { height: 52px; }
/* border-box so the padding is inside the viewport height: the card centres
   in what is left under the nav instead of pushing the page into a scroll */
.account-main { padding: 96px 0 36px; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; display: flex; align-items: center; }
.account-main > .container { width: 100%; }
.page-account footer { border-top: 1px solid var(--line-soft); background: rgba(22, 15, 10,.55); }

/* These are <section> elements, which the site pads generously by default;
   inside the account shell that padding is what pushed the card off screen. */
.account-main section { padding: 0; }
.auth-wrap { display: flex; justify-content: center; width: 100%; }
.auth-card {
  width: min(560px, 100%); background: rgba(31, 22, 15, 0.86); border: 1px solid var(--line);
  border-radius: 18px; padding: 30px 32px; text-align: center;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.auth-logo { width: 54px; height: 54px; border-radius: 50%; margin-bottom: 8px; }
.auth-card .section-title { font-size: 25px; margin-bottom: 4px; }
.auth-sub { color: var(--para); font-size: 13px; line-height: 19px; margin-bottom: 12px; }
.auth-form { display: grid; gap: 6px; text-align: left; }
/* Sign-up has more fields, so it runs two across and needs no scrolling */
#signupForm { grid-template-columns: 1fr 1fr; column-gap: 14px; }
#signupForm .full { grid-column: 1 / -1; }
.auth-form label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--para); opacity: 0.8; margin-top: 6px;
}
.auth-form input {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 11px 13px; color: var(--text);
  font-family: var(--sans); font-size: 14.5px;
}
.auth-form input:focus { outline: none; border-color: var(--accent); }
.auth-form .btn { margin-top: 14px; width: 100%; }
.auth-form .btn.ghost { margin-top: 8px; }
.auth-hint { font-size: 10.5px; color: var(--para); opacity: 0.7; line-height: 16px; margin-top: 4px; }
/* Gender: optional, three choices, same shape as the app */
.gender-row { display: flex; gap: 8px; }
.gender-row button {
  flex: 1; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 10px;
  color: var(--para); padding: 9px 6px; font-size: 13px; font-family: var(--sans); transition: .25s;
}
.gender-row button:hover { border-color: var(--accent); }
.gender-row button.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-2); }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-msg { font-size: 13px; min-height: 18px; margin-top: 8px; text-align: center; grid-column: 1 / -1; }
.auth-msg.err { color: #e0a49b; }
.auth-msg.ok { color: #9ab28a; }
.auth-switch { font-size: 13px; color: var(--para); text-align: center; margin-top: 10px; grid-column: 1 / -1; }
.auth-switch a { color: var(--accent-2); text-decoration: underline; }
.pending-title { font-family: var(--serif); font-size: 23px; font-weight: 500; margin-bottom: 8px; }

.member-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 26px 0 40px; }
.member-card { background: rgba(31, 22, 15,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 16px; padding: 26px; }
.member-card h3 { font-family: var(--serif); font-size: 20px; font-weight: 500; margin-bottom: 6px; }
.member-card .btn { margin-top: 14px; width: 100%; }
.member-card .muted { color: var(--para); font-size: 14px; }

.fidelity-card { background: linear-gradient(140deg, #44543a, #2a3325 60%, var(--panel)); border-color: #5c6b52; }
.fidelity-card .kicker { display: block; margin-bottom: 6px; }
.fidelity-card b { font-family: var(--serif); font-size: 54px; font-weight: 500; color: #fff; line-height: 1; }
.fidelity-card p { color: var(--para); font-size: 13px; margin-top: 10px; line-height: 20px; }
.fidelity-card.off b { color: var(--para); opacity: 0.6; }

.member-heading { font-family: var(--serif); font-size: 22px; font-weight: 500; margin-bottom: 16px; }
.res-list { display: grid; gap: 12px; }
.res-card {
  display: flex; align-items: center; gap: 18px; background: rgba(31, 22, 15,.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line-soft); border-radius: 14px; padding: 16px 20px;
}
.res-when { display: grid; min-width: 88px; }
.res-when b { font-family: var(--serif); font-size: 19px; color: var(--accent-2); }
.res-when span { font-size: 12px; color: var(--para); opacity: 0.8; }
.res-meta { display: grid; flex: 1; }
.res-meta b { font-size: 14px; font-weight: 500; }
.res-meta span { font-size: 12px; color: var(--para); opacity: 0.7; }
.res-badge { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; border: 1px solid; }
.res-badge.pending { color: var(--accent-2); border-color: var(--accent); }
.res-badge.confirmed { color: #9ab28a; border-color: rgba(154, 178, 138, 0.5); }
.res-badge.cancelled { color: #e0a49b; border-color: rgba(224, 164, 155, 0.5); }

.prefill-note { color: var(--accent-2); font-size: 13px; margin-top: 10px; }
.hidden { display: none !important; }
.auth-hidden { display: none !important; }

@media (max-width: 720px) {
  .account-main { padding: 110px 0 50px; min-height: auto; }
  .nav-auth { padding: 8px 14px !important; font-size: 11px; }
  .auth-card { padding: 24px 18px; }
  #signupForm { grid-template-columns: 1fr; }
  .res-card { flex-wrap: wrap; gap: 10px; }
  .res-when { min-width: 70px; }
}

/* ---------- Contact band ---------- */
.contact-band {
  position: relative; padding: 96px 0; overflow: hidden;
  background: url('/images/contact-bg.jpg') center/cover no-repeat fixed;
}
.contact-band::before {
  content: ''; position: absolute; inset: 0;
  /* Kept dark at the edges so the band still separates from the sections above
     and below, but lifted through the middle so the room photo is actually
     visible. The previous .80–.92 scrim hid it almost entirely. White text sits
     on the darker top/bottom thirds, so contrast stays well past AA. */
  background:
    linear-gradient(180deg, rgba(22, 15, 10,.82), rgba(36, 26, 18,.58) 45%, rgba(22, 15, 10,.86)),
    radial-gradient(120% 80% at 50% 50%, rgba(0,0,0,0) 35%, rgba(18,12,8,.45) 100%);
}
.contact-band > .container { position: relative; }
.contact-inner { text-align: center; max-width: 1060px; margin: 0 auto; }
.contact-inner .section-title { font-size: clamp(38px, 5vw, 60px); margin-bottom: 14px; }
.contact-lead { color: var(--para); max-width: 620px; margin: 0 auto 40px; line-height: 26px; }

.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; margin-bottom: 36px; }
.contact-card {
  display: flex; align-items: center; gap: 14px; text-align: left; text-decoration: none;
  background: rgba(31, 22, 15, 0.72); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
a.contact-card:hover { border-color: var(--accent); transform: translateY(-3px); background: rgba(31, 22, 15, 0.9); }
.cc-icon {
  width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid var(--line);
}
.cc-icon svg { width: 16px; height: 16px; fill: var(--accent-2); }
.cc-body { display: grid; gap: 3px; min-width: 0; }
.cc-body small { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--para); opacity: 0.75; }
.cc-body b { font-weight: 400; font-size: 14.5px; color: var(--text); overflow-wrap: anywhere; }

.contact-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.contact-band .socials { justify-content: center; }

@media (max-width: 720px) {
  .contact-band { padding: 70px 0; background-attachment: scroll; }
  .contact-cards { grid-template-columns: minmax(0, 1fr); }
  .contact-actions .btn { width: 100%; }
}

/* On a short screen, centring a tall card pushes it below the fold, so it
   starts just under the bar instead and uses the height that is there. */
@media (max-height: 900px) {
  .account-main { align-items: flex-start; padding-top: 88px; }
}

/* ---------- Auth card details ---------- */
.auth-logo { display: block; margin-left: auto; margin-right: auto; }

.auth-form select {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 11px 13px; color: var(--text);
  font-family: var(--sans); font-size: 14.5px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent-2) 50%),
                    linear-gradient(135deg, var(--accent-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.auth-form select:focus { outline: none; border-color: var(--accent); }
.auth-form select option { background: var(--bg-2); color: var(--text); }

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 46px; }
.pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; line-height: 0;
  padding: 9px 11px; color: var(--para); opacity: .8; transition: color .2s, opacity .2s;
}
.pw-eye svg { width: 21px; height: 21px; fill: currentColor; display: block; }
.pw-eye .eye-shut { display: none; }
.pw-eye.on { color: var(--accent-2); opacity: 1; }
.pw-eye.on .eye-open { display: none; }
.pw-eye.on .eye-shut { display: block; }
.pw-eye:hover { color: var(--text); opacity: 1; }

.auth-form label.stay-row {
  display: flex; align-items: center; gap: 9px; margin-top: 12px;
  font-size: 13px; text-transform: none; letter-spacing: 0.01em;
  color: var(--para); opacity: 1; cursor: pointer;
}
.stay-row input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
/* Keeps "Forgot password?" on the same line as the checkbox, so the card
   does not grow taller and push the button below the fold */
.stay-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.stay-line .stay-row { margin-top: 12px; }
.forgot-link {
  margin-top: 12px; font-size: 13px; color: var(--accent-2);
  text-decoration: underline; white-space: nowrap;
}
.forgot-link:hover { color: var(--accent); }
.birthday-note {
  font-size: 12px; color: var(--accent-2); margin-top: 10px; text-align: center;
  background: var(--accent-soft); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px;
}

/* ---------- Members' deal prices ---------- */
.mi-was { color: var(--para); opacity: 0.55; margin-right: 10px; font-size: 0.92em; }
.mi-deal { color: #9ab28a; font-weight: 500; }
.nav-deals { color: #9ab28a !important; }

/* ---------- Deals page ---------- */
.deals-main { align-items: flex-start; padding-top: 118px; }
.deals-main .section-head { margin-bottom: 30px; }
.deals-empty {
  background: rgba(31, 22, 15,.82); border: 1px solid var(--line); border-radius: 16px;
  padding: 40px 30px; text-align: center; color: var(--para); max-width: 560px; margin: 0 auto;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.deals-empty .contact-actions { margin-top: 22px; margin-bottom: 0; }
.deal-group { margin-bottom: 40px; }
.deal-group h2 { font-family: var(--serif); font-size: 26px; font-weight: 500; margin-bottom: 16px; }
.deal-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.deal-card {
  position: relative; display: flex; gap: 14px; align-items: center;
  background: rgba(31, 22, 15,.85); border: 1px solid rgba(154, 178, 138,.35); border-radius: 16px;
  padding: 14px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.deal-card:hover { transform: translateY(-3px); border-color: #9ab28a; }
.deal-card img { width: 74px; height: 74px; border-radius: 12px; object-fit: cover; flex: none; }
.deal-body { min-width: 0; flex: 1; }
.deal-body h3 { font-size: 17px; font-weight: 400; margin-bottom: 2px; }
.deal-body p { color: var(--para); font-size: 12px; opacity: .8; margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.deal-prices { display: flex; align-items: baseline; gap: 10px; }
.deal-prices s { color: var(--para); opacity: .55; font-size: 13px; }
.deal-prices b { color: #9ab28a; font-size: 17px; font-weight: 500; }
.deal-badge {
  position: absolute; top: 12px; right: 12px; background: rgba(154, 178, 138,.16);
  color: #9ab28a; border-radius: 999px; padding: 4px 10px; font-size: 11px; letter-spacing: .06em;
}

/* ---------- Delete account ---------- */
.del-card { max-width: 640px; text-align: left; }
.del-card .section-title { text-align: center; }
.del-card .auth-sub { text-align: center; margin-bottom: 26px; }
.del-block { margin-bottom: 26px; }
.del-block h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--accent-2); margin-bottom: 10px;
}
.del-list { list-style: none; display: grid; gap: 8px; }
.del-list li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--para); }
.del-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.del-note { font-size: 13px; color: var(--para); margin-top: 12px; line-height: 1.6; }
.del-or { margin-top: 20px; }
.del-app { border-top: 1px solid var(--line-soft); padding-top: 16px; margin-top: 22px; opacity: 0.85; }
.del-card .btn { width: 100%; margin-top: 12px; text-align: center; }
.btn.danger { background: #8f3b32; border-color: #8f3b32; color: #fff; }
.btn.danger:hover { background: transparent; border-color: #e0a49b; color: #e0a49b; }

/* ---------- Reservation time picker ---------- */
.timepick { position: relative; }
.timepick-btn {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: rgba(22, 15, 10, 0.55); border: 1px solid var(--line-soft); color: var(--para);
  padding: 14px 16px; font-family: var(--sans); font-size: 15px; font-weight: 300;
  letter-spacing: 0.03em; text-align: left; transition: border-color 0.3s, color 0.3s;
}
.timepick-btn:hover { border-color: var(--accent); }
.timepick-btn.open { border-color: var(--accent); }
.timepick-btn.chosen { color: var(--text); }
.timepick-btn .tp-caret {
  width: 0; height: 0; flex: none; margin-left: auto;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 5px solid var(--para);
  transition: transform 0.25s var(--ease);
}
.timepick-btn.open .tp-caret { transform: rotate(180deg); }
.timepick-btn svg { width: 16px; height: 16px; fill: var(--accent-2); flex: none; }
.timepick-panel {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px);
  max-height: 232px; overflow-y: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px;
  background: #1f160f; border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
/* An author `display` beats the browser's own [hidden] rule, so the closed
   state has to be stated here or the panel stays on screen for good. */
.timepick-panel[hidden] { display: none; }
.timepick-slot {
  background: rgba(255, 255, 255, 0.04); border: 1px solid transparent; color: var(--para);
  padding: 9px 4px; font-family: var(--sans); font-size: 13.5px; letter-spacing: 0.04em;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.timepick-slot:hover { background: var(--accent-soft); color: var(--text); border-color: var(--accent); }
.timepick-slot.on { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.timepick-panel::-webkit-scrollbar { width: 6px; }
.timepick-panel::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

@media (max-width: 720px) {
  .timepick-panel { grid-template-columns: repeat(4, 1fr); max-height: 200px; }
}

/* ---------- Boot cover ---------- */
.page-boot {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--bg-2); transition: opacity .25s ease;
}
.page-boot.gone { opacity: 0; pointer-events: none; }
.boot-mark { position: relative; width: 104px; height: 104px; display: grid; place-items: center; }
.boot-mark img { width: 62px; height: 62px; border-radius: 50%; }
.boot-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(220, 205, 180, 0.18); border-top-color: var(--accent);
  animation: bootSpin .9s linear infinite;
}
@keyframes bootSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-ring { animation-duration: 2.4s; } }

/* ---------- Marketing ---------- */
/* Announcement strip. Sits above the fixed nav, which promo.js pushes down by
   the measured height. The text runs right to left on a loop: two identical
   sets of copies slide exactly half the track, so the seam never shows. */
.promo-banner {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  background: #c05a38;
  border-bottom: 1px solid rgba(0, 0, 0, 0.22);
  overflow: hidden; padding: 9px 0;
}
.promo-track {
  display: flex; width: max-content;
  animation-name: promo-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}
.promo-banner:hover .promo-track { animation-play-state: paused; }
.promo-banner-text {
  flex: none; white-space: nowrap; padding-right: 5rem;
  color: #000; font-weight: 700;
  font-size: 14px; letter-spacing: 0.08em; text-decoration: none;
}
a.promo-banner-text:hover { color: #2b2b2b; }
@keyframes promo-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Reading a moving line can be impossible for some people, so hold it still */
@media (prefers-reduced-motion: reduce) {
  .promo-track { animation: none; }
}

@media (max-width: 860px) {
  .promo-banner { font-size: 13px; padding: 8px 14px; }
}

/* Live promotion notice on the menu page */
.promo-notice {
  display: block; margin: 0 auto 26px; max-width: 640px;
  background: #c05a38; color: #000; font-weight: 700;
  border-radius: 999px; padding: 11px 26px;
  text-align: center; font-size: 14.5px; letter-spacing: 0.06em;
}
.promo-notice.hidden { display: none; }

/* Small explainer under a form field */
.field-note { display: block; margin-top: 6px; font-size: 12.5px; color: rgba(207, 194, 174, 0.65); letter-spacing: 0.03em; }

/* ---------- The H Ritual: the posters, drifting right to left ---------- */
.ritual-section { background: var(--bg-2); background-image: var(--grain); overflow: hidden; }
/* The arrows sit on the stage, outside the faded marquee, so they stay solid */
.ritual-stage { position: relative; }
.ritual-marquee {
  position: relative;
  /* Edge to edge, so it escapes the reading column */
  width: 100vw; margin-left: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* The drift is JavaScript moving scrollLeft, not a keyframe, so that dragging
   and swiping use the very same mechanism and cannot fight it. */
.ritual-track {
  display: flex;
  gap: clamp(14px, 1.6vw, 24px);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  padding: 4px 0;
}
.ritual-track::-webkit-scrollbar { display: none; }

.ritual-card {
  flex: 0 0 auto;
  width: clamp(240px, 26vw, 380px);
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 3px 62px 3px 3px;
  overflow: hidden;
  background: none;
  cursor: zoom-in;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.ritual-card img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }
.ritual-card:hover { border-color: var(--accent); transform: translateY(-4px); }

.ritual-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(22, 15, 10, 0.72);
  backdrop-filter: blur(6px);
  color: var(--text);
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.ritual-arrow.prev { left: clamp(10px, 3vw, 46px); }
.ritual-arrow.next { right: clamp(10px, 3vw, 46px); }
.ritual-arrow svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.ritual-arrow:hover {
  background: var(--accent); border-color: var(--accent); color: var(--ink);
  transform: translateY(-50%) scale(1.07);
}
.ritual-arrow:active { transform: translateY(-50%) scale(0.96); }
.ritual-arrow:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }

@media (max-width: 760px) {
  .ritual-arrow { width: 46px; height: 46px; }
  .ritual-arrow svg { width: 18px; height: 18px; }
}


/* ==========================================================================
   Phones: iPhone and Android

   Audited across 8 device viewports from 280px to 430px. The page itself
   never overflowed; what was wrong was everything a thumb has to hit, plus
   one iOS fault that made the booking form genuinely unpleasant to use.
   ========================================================================== */

/* iOS Safari zooms the entire page in when a focused field is under 16px, and
   does not zoom back out. Every field on the booking form was 15px and the
   sign-in fields 14.5px, so tapping "Full name" threw the layout sideways on
   an iPhone. 16px is the threshold, not a preference. */
@media (max-width: 860px) {
  /* !important on purpose. The component rules (.form-field input at 15px,
     .auth-form input at 14.5px) carry a class and so outrank a bare element
     selector; a media query adds no specificity of its own. This is a platform
     constraint rather than a style preference, and it has to win over any rule
     added later, so it is stated once here instead of chased around the file. */
  input, select, textarea { font-size: 16px !important; }
}

/* Text stays where the design put it when a phone is turned to landscape.
   Without this iOS inflates it and the carte reflows on rotation alone. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* The grey flash on tap belongs to the browser, not to this palette */
a, button, summary, [role="button"] { -webkit-tap-highlight-color: rgba(192, 90, 56, 0.18); }

/* The menu button was 30x22. Apple asks for 44x44 and Android for 48dp, and at
   that size it is genuinely easy to miss. The button itself grows to 48x48
   rather than gaining an invisible overlay, so the target is the thing you can
   actually measure. The three bars keep their 30px width, centred inside it,
   so nothing about the design moves. Scoped to the width where the burger is
   shown at all. */
@media (max-width: 1260px) {
  .burger { width: 48px; height: 48px; }
  .burger span { left: 50%; width: 30px; transform: translateX(-50%); }
  .burger span:nth-child(1) { top: calc(50% - 11px); }
  .burger span:nth-child(2) { top: 50%; }
  .burger span:nth-child(3) { top: calc(50% + 11px); }
  .burger.open span:nth-child(1) { top: 50%; transform: translateX(-50%) rotate(45deg); }
  .burger.open span:nth-child(3) { top: 50%; transform: translateX(-50%) rotate(-45deg); }
}

@media (max-width: 900px) {
  /* Food / Drinks were 38px tall */
  .menu-tabs button { min-height: 44px; }

  /* Leaflet ships 30px controls. Its own selector carries three classes, so
     matching it takes the same shape rather than an !important. */
  .leaflet-touch .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; }
}

@media (max-width: 720px) {
  /* Footer and contact links were 14 to 16px tall, which is a line of text,
     not a target. They grow by min-height rather than padding, so the box
     gets taller around the same text and nothing shifts sideways. */
  .footer-grid ul a, .footer-bottom a {
    display: inline-flex; align-items: center; min-height: 44px; line-height: 1.25;
  }
  .footer-grid ul { gap: 0; }
  .footer-bottom { row-gap: 4px; }
  .contact-lines a { display: inline-flex; align-items: center; min-height: 40px; }

  /* Sign-in helper links were 14 to 21px tall */
  .auth-switch a, .forgot-link { display: inline-block; padding: 11px 4px; }
  .stay-line { flex-wrap: wrap; row-gap: 2px; }

  /* The reveal-password button and the stay-signed-in box are both hit while
     typing a password, which is when a miss costs the most. */
  .pw-eye { width: 44px; height: 44px; }
  .stay-row { min-height: 44px; }
  .stay-row input { width: 20px; height: 20px; }

  /* Inside the map bubble, so reached only after a tap on the pin, but it is
     still a link a thumb has to land on. */
  .leaflet-popup-content a { display: inline-block; padding: 8px 0; }
  .leaflet-popup-close-button { width: 32px !important; height: 32px !important; }
  .contact-lines { gap: 4px; }

  /* 10px is below what a phone renders comfortably. Only the smallest labels
     move, and only here: the desktop typography is untouched. */
  .form-field label, .auth-form label { font-size: 12px; }
}