/* 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 Parisienne 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: 'Parisienne', 'Newsreader', Georgia, 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;
}
/* The one word per heading that is written rather than printed */
.t-script {
  font-family: var(--script);
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent-2);
  font-size: 0.74em;
  font-weight: 400;
  vertical-align: -0.02em;
  padding-left: 0.14em;
}
.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; 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; }
/* Parisienne sets far larger per em than a spidery copperplate would, so the
   hero holds one line at roughly two thirds of the size that face needed. */
.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. Parisienne's capital is small on the body, so
   it needs the size to read as a signature rather than a stray mark. */
.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); }
.menu-cols { display: grid; grid-template-columns: 1fr 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. */
@media (min-width: 1500px) { .menu-cols { grid-template-columns: repeat(3, 1fr); } }
.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 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); }
.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. */
.menu-cat.two-way .mi-price { width: 5.6em; text-align: right; }
.menu-cat.two-way .mi-price.alt { width: 6.2em; }
.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;
}

/* ---------- 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; } }

.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; 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; }
.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; }
  /* long dish names must wrap instead of overflowing */
  .menu-item { flex-wrap: wrap; }
  .menu-item .mi-name { white-space: normal; max-width: 75%; }
  .menu-item .mi-dots { min-width: 20px; }

  /* Two price columns have to survive a narrow screen. Wrapping the row put the
     bottle price on a line of its own under names like Glenmorangie Single
     Malt, so here the row never wraps: the name takes the slack and runs to a
     second line inside its own cell, and the two figures hold their columns. */
  .menu-cat.two-way .menu-item { flex-wrap: nowrap; align-items: baseline; }
  .menu-cat.two-way .mi-name { min-width: 0; max-width: none; flex: 1 1 auto; }
  .menu-cat.two-way .mi-dots { flex: 0 1 18px; min-width: 0; }
  .menu-cat.two-way .mi-price { flex: none; width: 3.6em; }
  .menu-cat.two-way .mi-price.alt { width: 4.4em; }
  /* 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; 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; }

@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;
  background: linear-gradient(180deg, rgba(22, 15, 10,.90), rgba(36, 26, 18,.80) 45%, rgba(22, 15, 10,.92));
}
.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; }
.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;
  cursor: grab;
  padding: 4px 0;
}
.ritual-track::-webkit-scrollbar { display: none; }
.ritual-track.dragging { cursor: grabbing; }
/* While dragging, the pointer is scrolling the rail, not aiming at a poster */
.ritual-track.dragging .ritual-card { pointer-events: 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); }