@import url('/fonts/fonts.css');

/* ===========================================================================
   Ephesus Meze & Grill, Saffron Walden
   ---------------------------------------------------------------------------
   Dark, warm and unhurried. The design rests on four things:

     1. A near black page with deep petrol bands breaking it up.
     2. One accent, a warm gold, used for rules, script and small marks only.
     3. Arch shaped photography: a semicircular top on a straight base. This
        is the signature; it appears in the hero, the menus, the gallery and
        around the map.
     4. Italiana set very large for headings, Jost tracked wide and uppercase
        for everything structural, Aguafina Script for two or three gold
        flourishes per page and no more.

   Two CSS traps that have bitten this codebase before, do not undo them:
     - `body { overflow-x: hidden }` silently kills `position: sticky` for
       every descendant, because it turns body into a scroll container. Use
       `html { overflow-x: clip }` instead; clip does not create one.
     - `.reveal` starts at `opacity: 0`, so if the IntersectionObserver never
       runs the page stays invisible forever. It is gated on the `js` class and
       backed by a timeout in main.js.
   ========================================================================= */

/* --- Tokens -------------------------------------------------------------- */
:root {
  /* Colour */
  --ink:        #020101;  /* page ground */
  --petrol:     #0f2934;  /* alternating bands */
  --petrol-lo:  #0b1f28;  /* footer, slightly deeper */
  --gold:       #c9a581;  /* the single accent */
  --gold-soft:  rgba(201, 165, 129, 0.28);
  --cream:      #fcf7f2;  /* warm off white for body copy */
  --white:      #ffffff;
  --logo-cream: #fcf4ad;  /* the wordmark's own butter cream */
  --muted:      rgba(252, 247, 242, 0.66);

  /* Type */
  --display: 'Italiana', 'Times New Roman', serif;
  --sans:    'Jost', 'Helvetica Neue', Arial, sans-serif;
  --script:  'Aguafina Script', 'Snell Roundhand', cursive;

  /* Measure and rhythm */
  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(72px, 11vw, 150px);
  --header-h: 104px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 900px) {
  :root { --header-h: 76px; }
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* clip, never hidden — see the note at the top of this file */
  overflow-x: clip;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* figure carries a browser default of `margin: 1em 40px`, which quietly
   shrinks every arch in a grid cell. Every image on this site sits in a
   figure, so this one line matters a lot. */
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 0.01em;
  margin: 0;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

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

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

/* --- Layout helpers ------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--petrol { background: var(--petrol); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--ink);
  padding: 12px 20px;
  z-index: 200;
}
.skip-link:focus { left: 12px; top: 12px; }

/* --- Typographic pieces -------------------------------------------------- */
.kicker {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 22px;
}

.display {
  font-family: var(--display);
  font-size: clamp(2.6rem, 6.4vw, 5.2rem);
  color: var(--white);
}

.display--sm { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }

.script {
  font-family: var(--script);
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1.15;
  color: var(--gold);
}

.lede { color: var(--muted); max-width: 52ch; }

.rule {
  height: 1px;
  background: var(--gold-soft);
  border: 0;
  margin: 0;
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 17px 34px;
  border: 1px solid rgba(252, 247, 242, 0.42);
  background: transparent;
  color: var(--white);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}

.btn:hover,
.btn:focus-visible {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--ink);
}

.btn--gold { border-color: var(--gold); color: var(--gold); }
.btn-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 40px; }

/* --- The arch: the signature image shape --------------------------------- */
/* A 999px top radius clamps to half the box width, which gives a true
   semicircle on top of a straight sided rectangle. */
.arch {
  position: relative;
  overflow: hidden;
  border-radius: 999px 999px 6px 6px;
  background: var(--petrol);
}

.arch > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arch--circle { border-radius: 999px; }
.arch--soft { border-radius: 999px 999px 999px 999px / 34% 34% 6% 6%; }

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(2, 1, 1, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(252, 247, 242, 0.08);
}

/* Split navigation: three links either side of the wordmark. The two outer
   columns are minmax(0, 1fr), which keeps them exactly equal no matter how
   wide their contents are, so the logo is truly centred. */
.nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 2.4vw, 34px);
  min-height: var(--header-h);
}

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 32px);
  margin: 0;
  padding: 0;
}

/* Both sides hug the logo so the header reads symmetrically. */
.nav-links--left { justify-content: flex-end; }

.nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(14px, 2vw, 32px);
  min-width: 0;
}

.nav-links a {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.brand { display: block; }
.brand img { width: clamp(120px, 14vw, 176px); }

/* menus dropdown */
.has-sub { position: relative; }

.has-sub > a::after {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.subnav {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 232px;
  list-style: none;
  margin: 0;
  padding: 14px 0;
  background: var(--petrol);
  border: 1px solid var(--gold-soft);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}

.has-sub:hover .subnav,
.has-sub:focus-within .subnav {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.subnav a {
  display: block;
  padding: 9px 24px;
  border-bottom: 0;
  letter-spacing: 0.16em;
}

/* mobile toggle */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  height: 1px;
  background: var(--cream);
  margin: 6px auto;
  width: 26px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav { grid-template-columns: auto 1fr auto; }
  .nav-toggle { display: block; order: 1; }
  .brand { order: 2; justify-self: center; }

  /* Dissolve the right-hand group so the button can stay in the top row
     while its links join the drop-down panel below. */
  .nav-right { display: contents; }
  .nav-cta { order: 3; }

  .nav-links {
    grid-column: 1 / -1;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .nav-links--left  { order: 4; padding: 8px 0 0; }
  .nav-links--right { order: 5; padding: 0 0 26px; }

  .nav-open .nav-links { display: flex; }
  .nav-links a { font-size: 13px; padding-block: 10px; }

  .subnav {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    border: 0;
    background: transparent;
    padding: 0 0 6px 18px;
    min-width: 0;
  }
  .subnav a { padding: 7px 0; opacity: .82; }
  .has-sub > a::after { display: none; }
}

@media (max-width: 560px) {
  .nav-cta .btn { padding: 13px 18px; font-size: 11px; letter-spacing: 0.14em; }
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(56px, 8vw, 108px) 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}

.hero h1 { margin-bottom: 34px; }
.hero .lede { max-width: 46ch; }

/* The script tucks under the arch and is allowed to hang past its right edge,
   so the figure keeps a little room for it and never lets it leave the page. */
.hero-figure {
  position: relative;
  padding-bottom: clamp(56px, 6vw, 96px);
}
.hero-figure .arch { aspect-ratio: 53 / 68; }

.hero-script {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: rotate(-8deg);
  transform-origin: 100% 100%;
  pointer-events: none;
  text-align: center;
  /* Two short lines, the way the reference sets it. */
  width: 5.6em;
  line-height: 1.05;
  margin: 0;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-script { position: static; transform: none; margin: 26px auto 0; max-width: none; }
}

/* --- Story band ---------------------------------------------------------- */
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.story-heading {
  text-align: center;
  margin: 0 auto clamp(40px, 6vw, 84px);
  max-width: 18ch;
}

.story-figure { position: relative; }
.story-figure .arch { aspect-ratio: 4 / 5; }

.story-figure .arch--inset {
  position: absolute;
  left: clamp(-40px, -4vw, -12px);
  bottom: clamp(-30px, -3vw, -8px);
  width: clamp(120px, 20%, 200px);
  aspect-ratio: 1;
  border: 6px solid var(--petrol);
}

.mark {
  width: 74px; height: 74px;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  display: grid;
  place-items: center;
  margin-bottom: 34px;
  color: var(--gold);
}
.mark svg { width: 30px; height: 30px; }

@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-figure .arch--inset { display: none; }
}

/* --- Full bleed photograph ----------------------------------------------- */
/* A fixed background is sized against the viewport, not the band, so the
   photograph behind it has to be tall enough to cover a whole screen or the
   browser blows it up and it goes soft. These are 1400x2100 for that reason.
   Do not swap in a short wide crop here. */
.bleed {
  height: clamp(280px, 46vw, 620px);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

@media (hover: none) {
  /* fixed attachment stutters badly on touch devices */
  .bleed { background-attachment: scroll; }
}

/* --- Menus --------------------------------------------------------------- */
.menus { position: relative; }

.menus-grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 1.25fr) 1fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
}

.menus-mid { text-align: center; }

.menus-side { display: grid; gap: clamp(24px, 4vw, 56px); }
.menus-side .arch { aspect-ratio: 3 / 4; }
.menus-side--right { padding-top: clamp(40px, 8vw, 120px); }

.leaf {
  width: 62px;
  margin: 0 auto 26px;
  color: var(--gold);
}

.menu-list {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.menu-list a {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  padding-block: 8px;
  transition: color .28s var(--ease), letter-spacing .28s var(--ease);
}

.menu-list a:hover,
.menu-list a:focus-visible {
  color: var(--gold);
  letter-spacing: 0.11em;
}

@media (max-width: 900px) {
  .menus-grid { grid-template-columns: 1fr; }
  .menus-side { display: none; }
}

/* --- The art of dining --------------------------------------------------- */
.art { position: relative; }

.art-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 40px);
  align-items: end;
}

.art-grid .arch { aspect-ratio: 3 / 4; }
.art-grid .arch:nth-child(2) { transform: translateY(clamp(-56px, -5vw, -20px)); }

.art-head {
  position: relative;
  z-index: 2;
  margin-bottom: clamp(-56px, -4vw, -24px);
  /* Wide enough for "The Art of" to sit on one line above "Dining"; a ch
     based limit is measured on Jost, not the display face, so it under-counts
     badly here. */
  max-width: 520px;
}

/* The script hangs over the top of the first arch, which is the effect we
   want, but it has to stay inside the left column or it runs across the
   middle photograph. */
.art-script {
  margin-top: 18px;
  max-width: 8.5em;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
}

@media (max-width: 780px) {
  .art-grid { grid-template-columns: 1fr 1fr; }
  .art-grid .arch:nth-child(3) { display: none; }
  .art-head { margin-bottom: 32px; max-width: none; }
  .art-grid .arch:nth-child(2) { transform: none; }
}

/* --- Find us ------------------------------------------------------------- */
.find-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.find-details {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  color: var(--muted);
}

.find-details a:hover { color: var(--gold); }

.map-arch {
  aspect-ratio: 1 / 1.08;
  border-radius: 999px 999px 6px 6px;
  overflow: hidden;
  background: var(--petrol);
}
.map-arch iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 900px) {
  .find-grid { grid-template-columns: 1fr; }
}

/* --- Gallery strip ------------------------------------------------------- */
/* Straight-edged tiles here; the arch is saved for the hero photography so
   it stays a signature rather than wallpaper. */
.strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 22px);
}

.strip-tile {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 8px;
  background: var(--petrol);
}
/* A gentle stagger so the strip has a skyline rather than a flat top. */
.strip-tile:nth-child(even) { transform: translateY(clamp(10px, 1.6vw, 22px)); }

.strip-tile > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.strip-tile:hover > img { transform: scale(1.05); }

@media (max-width: 1000px) { .strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .strip { grid-template-columns: repeat(2, 1fr); } }

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  background: var(--petrol-lo);
  padding-block: clamp(56px, 7vw, 96px) 0;
}

.footer-cols {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.footer-logo img { width: 150px; }

.footer-cols h3 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 22px;
}

.footer-cols p,
.footer-cols li { color: var(--muted); font-size: 15px; }
.footer-cols a:hover { color: var(--gold); }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.socials { display: flex; gap: 14px; }
.socials a {
  width: 42px; height: 42px;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  display: grid;
  place-items: center;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.socials a:hover { border-color: var(--gold); color: var(--gold); }
.socials svg { width: 17px; height: 17px; }

.footer-bar {
  margin-top: clamp(40px, 5vw, 72px);
  border-top: 1px solid rgba(252, 247, 242, 0.1);
  padding-block: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(252, 247, 242, 0.5);
}
.footer-bar a:hover { color: var(--gold); }

@media (max-width: 880px) {
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-logo { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-cols { grid-template-columns: 1fr; }
}

/* --- Inner page banner --------------------------------------------------- */
.banner {
  background: var(--petrol);
  padding-block: clamp(56px, 8vw, 118px);
  text-align: center;
}
.banner-inner { max-width: 860px; }
.banner-lede { margin: 26px auto 0; }

/* --- Contact ------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}

/* The one panel on the site that carries depth. Keep it that way. */
.panel {
  border: 1px solid var(--gold-soft);
  background: linear-gradient(180deg, rgba(15, 41, 52, 0.62), rgba(15, 41, 52, 0.28));
  padding: clamp(28px, 3.4vw, 46px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.panel::before {
  content: '';
  display: block;
  width: 46px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 26px;
}

.panel-title {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  color: var(--white);
  margin: 0 0 8px;
}

.facts { margin: 26px 0 0; }

.fact {
  display: grid;
  gap: 6px;
  padding: 20px 0;
  border-top: 1px solid rgba(252, 247, 242, 0.1);
}
.fact:first-of-type { border-top: 0; padding-top: 0; }

.fact dt {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}
.fact dd { margin: 0; color: var(--cream); font-size: 15px; }
.fact dd a:hover { color: var(--gold); }

.fact-link {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold-soft);
  width: fit-content;
  padding-bottom: 3px;
}

.panel-note {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(252, 247, 242, 0.1);
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
}

/* --- Form ---------------------------------------------------------------- */
/* Underline only fields, nothing boxed, so the form reads as typography. */
.form { margin-top: 40px; }

.field { margin-bottom: 30px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 34px); }

.field label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.field input,
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(252, 247, 242, 0.24);
  color: var(--white);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  padding: 10px 0;
  border-radius: 0;
  transition: border-color .3s var(--ease);
}
.field textarea { resize: vertical; line-height: 1.7; }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--gold);
}

.field-hint { margin: 10px 0 0; font-size: 13px; color: rgba(252, 247, 242, 0.5); }

.notice {
  margin: 28px 0 0;
  padding: 16px 20px;
  border-left: 2px solid var(--gold);
  background: rgba(201, 165, 129, 0.08);
  font-size: 15px;
}
.notice--bad { border-left-color: #d98080; background: rgba(217, 128, 128, 0.09); }

.map-wide {
  height: clamp(300px, 40vw, 520px);
  border-radius: 999px 999px 6px 6px;
  overflow: hidden;
  background: var(--petrol);
}
.map-wide iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .map-wide { border-radius: 200px 200px 6px 6px; }
}

/* --- Hours table --------------------------------------------------------- */
.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td {
  font-weight: 300;
  font-size: 15px;
  text-align: left;
  padding: 3px 0;
  color: var(--muted);
}
.hours td { text-align: right; white-space: nowrap; }
.hours .closed { font-style: italic; opacity: .7; }

/* --- Scroll reveal ------------------------------------------------------- */
/* Only the `js` class turns this on, so a failed observer can never leave the
   page blank. main.js also clears it after a timeout as a second safety net. */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- The menu page (/menu) ----------------------------------------------- */
/* Every menu on one page: a centred heading per menu, then its courses as
   cards. Alternate menus sit on the petrol band so the page has a rhythm
   rather than five identical stretches of black. */
.menu-group { scroll-margin-top: calc(var(--header-h) + 60px); }

.menu-group-head {
  text-align: center;
  margin-bottom: clamp(38px, 5vw, 66px);
}

.menu-group-head .leaf { margin-bottom: 20px; }

.menu-group-head .rule {
  display: block;
  width: 72px;
  margin: 24px auto 0;
}

.menu-group-head h2 { margin: 0; }

/* A photograph before the closing reservation band. */
.menu-bleed { height: clamp(200px, 26vw, 380px); }

/* The menu tabs. One tab per menu, sticky under the site header, with the
   dish search on the right. `html` uses overflow-x: clip rather than hidden
   precisely so this keeps working. */
:root { --tabs-h: 58px; }

.menu-tabs {
  position: sticky;
  top: var(--header-h);
  z-index: 60;
  background: rgba(2, 1, 1, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(252, 247, 242, 0.1);
}

.menu-tabs-inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  min-height: var(--tabs-h);
}

.tab-scroll {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tab-scroll::-webkit-scrollbar { display: none; }

.tab-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: clamp(18px, 2.6vw, 40px);
  width: max-content;
  min-width: 100%;
}

.menu-tab {
  position: relative;
  display: block;
  white-space: nowrap;
  padding: 19px 2px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .26s var(--ease);
}

/* The gold underline grows out from the centre of the active tab. */
.menu-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .35s var(--ease);
}

.menu-tab:hover,
.menu-tab:focus-visible { color: var(--cream); }
.menu-tab.is-active { color: var(--gold); }
.menu-tab.is-active::after { transform: scaleX(1); }

/* The search field: an underline, a magnifier, nothing boxed. */
.menu-search {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  border-bottom: 1px solid rgba(252, 247, 242, 0.24);
  padding-bottom: 6px;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.menu-search:focus-within { border-color: var(--gold); color: var(--gold); }
.menu-search svg { width: 15px; height: 15px; flex: none; }

.menu-search input {
  width: clamp(150px, 16vw, 210px);
  background: transparent;
  border: 0;
  color: var(--cream);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.06em;
  padding: 0;
}
.menu-search input:focus { outline: none; }
.menu-search input::placeholder { color: rgba(252, 247, 242, 0.42); }
.menu-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

@media (max-width: 760px) {
  /* The search drops to its own row under the tabs. */
  .menu-tabs-inner { flex-wrap: wrap; gap: 0 16px; padding-block: 0 14px; }
  .tab-scroll { flex-basis: 100%; }
  .menu-search { flex: 1 1 100%; }
  .menu-search input { width: 100%; }
}

/* --- Tab mode ------------------------------------------------------------ */
/* Only the script adds .is-tabbed; without it every menu stays stacked on
   the page, so the content never depends on JavaScript. */
.menu-page.is-tabbed .menu-group { display: none; background: transparent; }
.menu-page.is-tabbed .menu-group.is-open { display: block; }

/* While a search is live, the tabs stand aside: every menu with a matching
   dish is shown, with the misses hidden. */
.menu-page.is-searching .menu-group,
.menu-page.is-tabbed.is-searching .menu-group.is-open { display: none; }
.menu-page.is-searching .menu-group.has-hits { display: block !important; }
.menu-page.is-searching .dish.no-hit,
.menu-page.is-searching .menu-card.no-hit,
.menu-page.is-searching .menu-secnav { display: none; }

.menu-search-status {
  padding-block: 34px 0;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.dish-name-text mark {
  background: transparent;
  color: var(--gold);
  border-bottom: 1px solid var(--gold-soft);
}

/* --- Course chips inside a menu ------------------------------------------ */
.menu-secnav {
  position: sticky;
  top: calc(var(--header-h) + var(--tabs-h));
  z-index: 50;
  margin-bottom: clamp(34px, 4vw, 54px);
  padding-block: 10px;
  background: var(--ink);
}
.menu-page:not(.is-tabbed) .menu-secnav { position: static; background: transparent; }

.secnav-scroll {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.sec-chip {
  display: block;
  white-space: nowrap;
  padding: 9px 18px;
  border: 1px solid rgba(252, 247, 242, 0.16);
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .26s var(--ease), border-color .26s var(--ease), background-color .26s var(--ease);
}
.sec-chip:hover,
.sec-chip:focus-visible {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--gold);
}

@media (max-width: 760px) {
  /* On a phone the chips scroll sideways in one line and do not stick. */
  .menu-secnav { position: static; }
  .secnav-scroll {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .secnav-scroll::-webkit-scrollbar { display: none; }
}

/* Two balanced columns of courses on a wide screen, one on a phone. Multiple
   columns rather than a grid: a grid ties every course in a row to the tallest
   one in that row, which leaves long gaps under the short courses. */
.menu-cols {
  column-count: 2;
  column-gap: clamp(36px, 5vw, 78px);
}

@media (max-width: 900px) {
  .menu-cols { column-count: 1; }
}

.menu-card {
  /* Keep a course whole rather than letting it split across the two columns. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: clamp(24px, 3vw, 40px);
  /* Clear the header, the tabs and the chip row when a chip jumps here. */
  scroll-margin-top: calc(var(--header-h) + var(--tabs-h) + 70px);
  /* A quiet panel, so each course reads as its own card on the board. */
  border: 1px solid rgba(252, 247, 242, 0.09);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(15, 41, 52, 0.4), rgba(15, 41, 52, 0.12));
  padding: clamp(24px, 3vw, 38px);
  transition: border-color .4s var(--ease);
}
.menu-card:hover { border-color: var(--gold-soft); }

/* Courses rise in one after another when a menu opens. */
@media (prefers-reduced-motion: no-preference) {
  .is-tabbed .menu-group.is-animating .menu-group-head { animation: menuRise .55s var(--ease) backwards; }
  .is-tabbed .menu-group.is-animating .menu-secnav { animation: menuRise .55s var(--ease) .08s backwards; }
  .is-tabbed .menu-group.is-animating .menu-card {
    animation: menuRise .65s var(--ease) backwards;
    animation-delay: calc(0.12s + var(--i, 0) * 0.07s);
  }
}

@keyframes menuRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

.menu-card-head { margin-bottom: 26px; }

.menu-card-title {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gold-soft);
}

.menu-card-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  font-style: italic;
}

.dish-list { list-style: none; margin: 0; padding: 0; }

.dish + .dish { margin-top: 24px; }

.dish-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}

.dish-name { color: var(--cream); font-weight: 400; }
.dish-name-text { transition: color .3s var(--ease); }
.dish:hover .dish-name-text { color: var(--gold); }

/* The dotted leader that carries the eye across to the price. */
.dish-fill {
  flex: 1 1 auto;
  min-width: 18px;
  border-bottom: 1px dotted rgba(252, 247, 242, 0.28);
  transform: translateY(-4px);
  transition: border-color .3s var(--ease);
}
.dish:hover .dish-fill { border-bottom-color: var(--gold); }

.dish-price {
  color: var(--gold);
  font-size: 15px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  /* A fixed measure so the prices line up down the column rather than
     wandering with the length of each figure. */
  min-width: 62px;
  text-align: right;
}

/* The dietary letters lifted out of the dish name. */
.diet {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  border: 1px solid var(--gold-soft);
  border-radius: 2px;
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  vertical-align: 2px;
}

.dish-desc {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 54ch;
}

/* --- Gallery ------------------------------------------------------------- */
/* A quilt rather than a wall of arches: four columns of straight-edged
   tiles, dense-packed, with every eighth photograph spread over two columns
   and two rows so the page reads like a magazine spread. */
.gallery-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(150px, 21vw, 264px);
  grid-auto-flow: dense;
  gap: clamp(10px, 1.6vw, 20px);
}

.gw-tile {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--petrol);
  cursor: pointer;
}

.gw-tile:nth-child(8n + 1) {
  grid-column: span 2;
  grid-row: span 2;
}
/* A second, right-leaning feature keeps the spread from repeating itself. */
.gw-tile:nth-child(16n + 12) { grid-row: span 2; }

.gw-tile > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), filter 1.1s var(--ease);
}

.gw-tile:hover > img,
.gw-tile:focus-visible > img {
  transform: scale(1.06);
  filter: brightness(0.88);
}

.gw-tile:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

/* The caption rises from the bottom edge on hover. */
.gw-cap {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 44px 18px 14px;
  background: linear-gradient(180deg, rgba(2, 1, 1, 0) 0%, rgba(2, 1, 1, 0.78) 76%);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  pointer-events: none;
}

.gw-tile:hover .gw-cap,
.gw-tile:focus-visible .gw-cap {
  opacity: 1;
  transform: none;
}

.gw-cap-text {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--cream);
  line-height: 1.5;
}

.gw-cap-view {
  flex: none;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold-soft);
  padding-bottom: 2px;
}

/* The tiles arrive in a soft cascade, column by column. */
.js .gallery-wall .reveal:nth-child(4n + 2) { transition-delay: .08s; }
.js .gallery-wall .reveal:nth-child(4n + 3) { transition-delay: .16s; }
.js .gallery-wall .reveal:nth-child(4n)     { transition-delay: .24s; }

@media (hover: none) {
  /* No hover on touch; keep captions readable in the lightbox instead. */
  .gw-cap { display: none; }
}

@media (max-width: 1000px) {
  .gallery-wall { grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(140px, 26vw, 230px); }
}
@media (max-width: 640px) {
  .gallery-wall { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(130px, 34vw, 210px); }
  .gw-tile:nth-child(16n + 12) { grid-row: span 1; }
}

/* The lightbox. Ink, not black, so it belongs to the site. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 70px);
  background: rgba(2, 1, 1, 0.94);
  backdrop-filter: blur(8px);
}
.lightbox.open { display: flex; }

.lightbox img {
  max-width: min(100%, 900px);
  max-height: 82vh;
  border-radius: 6px;
  object-fit: contain;
}

.lb-close,
.lb-btn {
  position: absolute;
  background: none;
  border: 1px solid rgba(252, 247, 242, 0.22);
  color: var(--cream);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .26s var(--ease), color .26s var(--ease);
}
.lb-close:hover,
.lb-btn:hover { border-color: var(--gold); color: var(--gold); }

.lb-close { top: clamp(16px, 3vw, 34px); right: clamp(16px, 3vw, 34px); }
.lb-prev { left: clamp(12px, 3vw, 40px); top: 50%; transform: translateY(-50%); }
.lb-next { right: clamp(12px, 3vw, 40px); top: 50%; transform: translateY(-50%); }

.lb-cap {
  position: absolute;
  bottom: clamp(16px, 3vw, 34px);
  left: 0;
  right: 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.06em;
}

/* --- About --------------------------------------------------------------- */
.about-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(34px, 6vw, 90px);
  align-items: start;
}

.about-hours { margin-top: 30px; max-width: 420px; }

@media (max-width: 800px) {
  .about-facts { grid-template-columns: 1fr; }
}

/* --- Long form copy (privacy, terms) ------------------------------------- */
.prose {
  max-width: 68ch;
  margin-inline: auto;
  color: var(--muted);
}
.prose p { margin: 0 0 22px; }
.prose a { color: var(--gold); border-bottom: 1px solid var(--gold-soft); }
.prose a:hover { color: var(--cream); }