/* ===========================================================================
   The Ordnance Pub & Restaurant — design system
   Hand-authored. No framework, no build step.

   THE IDEA
   Their customers keep writing the same sentence: "just off the main street",
   "quiet", "relax from the noise", "hidden gem". Six of them, independently.
   In Valletta, where Republic Street is a crush from ten in the morning, that
   is the product. The site is built around it.

   The page runs on TWO palettes. Everything above the square is daylight on
   Valletta limestone; everything below it is night. The switch happens once,
   in the one section where the same building is shown at both hours. Each
   palette is a complete, independently contrast-checked set — nothing is
   "derived" across the boundary, because that is how a token ends up at 3:1.
   ======================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------ */
:root {
  /* --- daylight: globigerina limestone, the stone Valletta is built from --- */
  --limestone:     #EFE6D3;
  --limestone-lit: #F8F2E6;   /* raised surfaces */
  --limestone-dim: #E2D6BC;   /* recessed, hairlines */

  --ink:       #191E17;       /* near-black with a green cast, so it belongs to the green */
  --ink-soft:  #4A5245;       /* 6.6:1 on limestone */

  --bottle:     #0E4034;      /* 9.7:1 on limestone */
  --bottle-mid: #1A6B57;

  /* Copper is the beer. It needs two values: the same hex cannot clear AA on
     both grounds, and pretending otherwise is how the last site shipped a 3:1. */
  --copper-dark: #8A4A1E;     /* 5.5:1 on limestone */
  --copper-lit:  #C87F42;     /* 5.8:1 on night */

  /* --- night --- */
  --night:     #10160F;
  --night-lit: #1B2419;       /* raised surfaces at night */
  --bone:      #E8E2D4;       /* 14.4:1 on night */
  --bone-soft: #A8AA9C;       /* 6.6:1 on night */

  /* --- live stage: these three are what the page actually paints with, and
     they are the only things the day/night switch touches. ---------------- */
  --ground:  var(--limestone);
  --surface: var(--limestone-lit);
  --edge:    var(--limestone-dim);
  --text:    var(--ink);
  --text-2:  var(--ink-soft);
  --accent:  var(--bottle);
  --metal:   var(--copper-dark);

  /* --- type --- */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Newsreader', Georgia, 'Times New Roman', serif;

  /* --- measure & rhythm --- */
  --gut: clamp(1.25rem, 4vw, 3rem);
  --bay: clamp(4rem, 9vw, 8rem);      /* vertical space between sections */
  --max: 1280px;

  --rule: 1px;
  /* Slight, not rounded. Enough to take the hard corner off a control without
     softening the architecture — the image panels stay square on purpose. */
  --radius: 4px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* The night half. Applied to a section and everything inside it. */
.night {
  --ground:  var(--night);
  --surface: var(--night-lit);
  --edge:    #2C3729;
  --text:    var(--bone);
  --text-2:  var(--bone-soft);
  --accent:  #4E9B82;
  --metal:   var(--copper-lit);
}

/* ---------------------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--limestone);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.0625rem, .4vw + .95rem, 1.1875rem);
  font-optical-sizing: auto;
  line-height: 1.65;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--bottle); color: var(--limestone-lit);
  padding: .8rem 1.2rem; font-family: var(--display); font-size: .85rem;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------------------
   3. TYPE SCALE
   Display is Archivo on its WIDTH axis. "ORDNANCE" was the British artillery
   depot this street is named for; wide, flat, institutional letterforms are
   the honest reading of that name, and they are the clearest separation from
   every other site in the studio (all of which lead with a serif display).
   Body inverts the usual pairing: the reading face is the serif.
   ------------------------------------------------------------------------ */
.t-wordmark {
  font-family: var(--display);
  font-variation-settings: 'wdth' 118, 'wght' 600;
  font-size: clamp(2.6rem, 12.2vw, 11rem);
  line-height: .82;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0;
}

.t-h2 {
  font-family: var(--display);
  font-variation-settings: 'wdth' 108, 'wght' 600;
  font-size: clamp(1.75rem, 3.6vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -.005em;
  margin: 0 0 1rem;
  text-wrap: balance;
}

.t-h3 {
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.2;
  letter-spacing: .005em;
  margin: 0;
}

.t-label {
  font-family: var(--display);
  font-variation-settings: 'wdth' 92, 'wght' 600;
  font-size: .72rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--metal);
  margin: 0;
}

.t-lede {
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 46ch;
}

.t-price {
  font-family: var(--display);
  font-variation-settings: 'wdth' 96, 'wght' 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* ---------------------------------------------------------------------------
   4. FOOTER RULE
   A plain hairline. There was a ticked "ranging scale" divider here, riffing on
   Ordnance Survey — Adam cut it, and he was right: it read as decoration rather
   than as anything true about a pub.
   ------------------------------------------------------------------------ */
.foot__rule {
  height: 0;
  border-top: var(--rule) solid #2C3729;
  margin-bottom: 2rem;
}

/* ---------------------------------------------------------------------------
   5. LAYOUT
   ------------------------------------------------------------------------ */
.section {
  background: var(--ground);
  color: var(--text);
  padding-block: var(--bay);
  transition: background-color 900ms var(--ease), color 900ms var(--ease);
}
.wrap {
  width: min(100% - (var(--gut) * 2), var(--max));
  margin-inline: auto;
}

/* A two-column bay: a narrow rail for the label, a wide column for content.
   Below 900px the rail folds on top of the content instead of beside it. */
.bay {
  display: grid;
  grid-template-columns: minmax(9rem, 15%) 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) {
  .bay { grid-template-columns: 1fr; gap: 1.25rem; }
}
.bay__rail { padding-top: .5rem; }

/* ---------------------------------------------------------------------------
   6. BUTTONS
   ------------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display);
  font-variation-settings: 'wdth' 96, 'wght' 600;
  font-size: .82rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .95rem 1.5rem;
  border-radius: var(--radius);
  border: var(--rule) solid transparent;
  /* Copper is the action colour everywhere — it is the beer, and it is already
     the header CTA. Green stays structural (rules, focus, small marks) so the
     page has ONE thing that means "click this" rather than two. */
  background: var(--copper-dark);
  color: var(--limestone-lit);
  cursor: pointer;
  transition: transform 180ms var(--ease), background-color 180ms var(--ease);
}
.night .btn { background: var(--copper-lit); color: var(--night); }
.btn:hover       { transform: translateY(-2px); background: #6F3A16; }
.night .btn:hover { background: #D89257; }
.btn:active      { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--text);
}
.night .btn--ghost { color: var(--text); }
.btn--ghost:hover { background: var(--text); color: var(--ground); }

.btn__ico { width: 1.05em; height: 1.05em; flex: none; }

/* ---------------------------------------------------------------------------
   7. HEADER
   ------------------------------------------------------------------------ */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .9rem var(--gut);
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease);
  border-bottom: var(--rule) solid transparent;
}
.site-head[data-stuck="true"] {
  background: color-mix(in srgb, var(--night) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: #2C3729;
}

.site-head__mark {
  font-family: var(--display);
  font-variation-settings: 'wdth' 108, 'wght' 600;
  font-size: .95rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bone); text-decoration: none; white-space: nowrap;
}
.site-head__mark span { color: var(--copper-lit); }

.nav { display: flex; gap: 1.6rem; }
.nav a {
  font-family: var(--display);
  font-variation-settings: 'wdth' 92, 'wght' 500;
  font-size: .78rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--bone-soft); text-decoration: none;
  transition: color 180ms var(--ease);
}
.nav a:hover { color: var(--bone); }
@media (max-width: 860px) { .nav { display: none; } }

.head-actions { display: flex; align-items: center; gap: .7rem; }
.head-cta {
  padding: .6rem 1.05rem; font-size: .72rem;
  background: var(--copper-lit); color: var(--night);
}
.head-cta:hover { background: #D89257; }
@media (max-width: 560px) { .head-cta span { display: none; } .head-cta { padding: .6rem .8rem; } }

.nav-toggle {
  display: none; flex-direction: column; gap: 4px; justify-content: center;
  width: 40px; height: 36px; padding: 0;
  background: none; border: var(--rule) solid #3A4636; border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle__bar { display: block; width: 17px; height: 1px; background: var(--bone); margin-inline: auto; }
@media (max-width: 860px) { .nav-toggle { display: flex; } }

.nav-overlay {
  position: fixed; inset: 0; z-index: 95;
  background: var(--night);
  display: grid; grid-template-rows: 1fr auto;
  padding: 5.5rem var(--gut) 2rem;
  opacity: 0; pointer-events: none;
  transition: opacity 240ms var(--ease);
}
.nav-overlay[data-open="true"] { opacity: 1; pointer-events: auto; }
.nav-overlay__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; align-content: center; }
.nav-overlay__list a {
  font-family: var(--display);
  font-variation-settings: 'wdth' 112, 'wght' 600;
  font-size: clamp(1.9rem, 8vw, 3rem); line-height: 1.15;
  text-transform: uppercase; letter-spacing: .01em;
  color: var(--bone); text-decoration: none;
}
.nav-overlay__foot { color: var(--bone-soft); font-size: .95rem; }

/* ---------------------------------------------------------------------------
   8. HERO
   Full-bleed video, with the name set as a lintel across the whole width —
   architecture, not a badge in a corner. Deliberately not AGATA's split panel
   and not Le 2 Sicilie's low-left lockup.
   ------------------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; align-items: end;
  background: var(--night);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img,
.hero__layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__still { z-index: 0; }
.hero__layer { z-index: 1; opacity: 0; transition: opacity 1200ms var(--ease); }
.hero__layer[data-active="true"] { opacity: 1; }

.hero__scrim {
  position: absolute; inset: 0; z-index: 2;
  /* Heavier through the band the wordmark sits in: the pint glass in the first
     clip is bright enough to eat the middle of "ORDNANCE" without it. */
  background:
    linear-gradient(to top,
      rgba(16,22,15,.95)  0%,
      rgba(16,22,15,.82) 26%,
      rgba(16,22,15,.60) 48%,
      rgba(16,22,15,.26) 72%,
      rgba(16,22,15,.58) 100%);
}

.hero__inner {
  position: relative; z-index: 3;
  width: min(100% - (var(--gut) * 2), var(--max));
  margin-inline: auto;
  padding-block: 8rem 4.5rem;
  color: var(--bone);
}
.hero__wordmark { color: var(--bone); }

.hero__strap {
  font-family: var(--display);
  font-variation-settings: 'wdth' 88, 'wght' 500;
  font-size: clamp(.72rem, 1.5vw, .88rem);
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--copper-lit);
  margin: 1.5rem 0 2rem;
}
.hero__lede {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.45;
  max-width: 30ch;
  margin: 0 0 2rem;
  color: var(--bone);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero .btn--ghost { color: var(--bone); border-color: var(--bone); }
.hero .btn--ghost:hover { background: var(--bone); color: var(--night); }

/* ---------------------------------------------------------------------------
   9. STATE STRIP — what is true right now, in Malta time
   ------------------------------------------------------------------------ */
.state {
  background: var(--night-lit);
  color: var(--bone);
  border-block: var(--rule) solid #2C3729;
}
.state__inner {
  width: min(100% - (var(--gut) * 2), var(--max));
  margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
  padding: .85rem 0;
  font-family: var(--display);
  font-variation-settings: 'wdth' 92, 'wght' 500;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
}
.state__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #5FBF95; flex: none;
}
.state[data-open="false"] .state__dot { background: var(--copper-lit); }
.state__detail { color: var(--bone-soft); }
/* #3A4636 came in at 1.6:1 — invisible, and it is still rendered text.
   #8B9686 is 5.3:1 on the strip and still reads as a quiet separator. */
.state__sep { color: #8B9686; }
.state__hours { margin-left: auto; color: var(--bone-soft); font-variant-numeric: tabular-nums; }
@media (max-width: 620px) { .state__hours { margin-left: 0; width: 100%; } }

/* ---------------------------------------------------------------------------
   10. THE THESIS SECTION — "off Republic Street"
   ------------------------------------------------------------------------ */
.thesis__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 860px) { .thesis__grid { grid-template-columns: 1fr; } }

.thesis__body p + p { margin-top: 1.1rem; }
.thesis__quote {
  margin: 1.8rem 0 0;
  padding-left: 1.2rem;
  border-left: 2px solid var(--metal);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--text-2);
}
.thesis__quote cite {
  display: block; margin-top: .5rem;
  font-family: var(--display); font-style: normal;
  font-variation-settings: 'wdth' 92, 'wght' 500;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--metal);
}
.thesis__pic { position: relative; }
.thesis__pic img { width: 100%; height: auto; }
.thesis__cap {
  margin: .7rem 0 0;
  font-family: var(--display);
  font-variation-settings: 'wdth' 88, 'wght' 400;
  font-size: .7rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--text-2);
}

/* Facts strip — three numbers that are all verifiable */
.facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; margin-top: clamp(2rem, 5vw, 3.5rem);
  background: var(--edge);
  border: var(--rule) solid var(--edge);
}
.fact { background: var(--ground); padding: 1.4rem 1.2rem; }
.fact__n {
  font-family: var(--display);
  font-variation-settings: 'wdth' 112, 'wght' 600;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1; letter-spacing: -.01em;
  display: flex; align-items: center; gap: .26em;
  color: var(--text);
}

/* The star takes its colour from the number it sits beside — currentColor, so
   it follows the day/night switch without a second declaration. */
.rating-star {
  width: .56em; height: .56em; flex: none;
  position: relative; top: -.02em;
}
.fact__l {
  font-family: var(--display);
  font-variation-settings: 'wdth' 88, 'wght' 500;
  font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-2); margin: .55rem 0 0;
}
@media (max-width: 620px) { .facts { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   11. THE FOOD STRIP
   A marquee that runs left to right on its own, full-bleed, no labels.

   It replaced an image accordion with captions over each photo. The captions
   were doing two jobs badly — the dishes are named and priced on the menu page,
   and text over a photograph is where "tacky" comes from. This is one job:
   make you hungry.

   The track is duplicated in JS so a -50% translate loops seamlessly, which is
   the same trick the review ribbons use vertically.
   ------------------------------------------------------------------------ */
.strip {
  position: relative;
  margin-top: clamp(2rem, 5vw, 3.25rem);
  overflow: hidden;
  /* full-bleed: the strip escapes .wrap and runs edge to edge */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.strip__track {
  display: flex;
  gap: clamp(.5rem, 1.2vw, 1rem);
  width: max-content;
  animation: strip-run 64s linear infinite;
  will-change: transform;
}
@keyframes strip-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.strip:hover .strip__track,
.strip:focus-within .strip__track { animation-play-state: paused; }

.dish {
  margin: 0;
  flex: none;
  width: clamp(15rem, 26vw, 24rem);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--edge);
}
.dish img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* The sources are diner phone photos taken under very different light. A
     light, uniform grade stops the strip looking like a pile of found images. */
  filter: saturate(1.02) contrast(1.04) brightness(1.09);
}

/* The strip runs to both edges, so it needs to fade out rather than be cut. */
.strip__fade {
  position: absolute; top: 0; bottom: 0; width: clamp(2rem, 7vw, 7rem);
  pointer-events: none; z-index: 2;
}
.strip__fade--l { left: 0;  background: linear-gradient(to right, var(--ground) 0%, var(--ground) 22%, transparent 100%); }
.strip__fade--r { right: 0; background: linear-gradient(to left,  var(--ground) 0%, var(--ground) 22%, transparent 100%); }

.strip__foot { margin-top: clamp(1.5rem, 3.5vw, 2.25rem); margin-bottom: 0; }
#counter-section { padding-bottom: clamp(2.5rem, 5vw, 4rem); }

@media (max-width: 780px) {
  .dish { width: 72vw; }
  .strip__track { animation-duration: 46s; }
}

/* ---------------------------------------------------------------------------
   12. THE SQUARE — the signature
   The same building at ten in the morning and ten at night. As the section
   passes through the viewport the day panel gives way to the night one, and
   the whole page changes palette with it.

   Scroll-driven, with NO drag handle, on purpose: Le 2 Sicilie already has a
   draggable compare-wipe, and two studio sites reaching for the same gesture
   is exactly what makes a small studio's work look like one template.
   ------------------------------------------------------------------------ */
.square { padding-block: 0; }
.square__stage {
  position: relative;
  display: flex;
  gap: var(--rule);
  height: clamp(26rem, 78vh, 46rem);
  background: var(--edge);
  overflow: hidden;
}
.square__panel {
  position: relative;
  min-width: 0;
  overflow: hidden;
  flex: 0 0 auto;
}
.square__panel img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Widths are driven from JS via --split (0 = all day, 1 = all night). */
.square__panel--day   { width: calc((1 - var(--split, 0)) * 100%); }
.square__panel--night { width: calc(var(--split, 0) * 100%); }

/* Each panel keeps its picture the full stage width, so the image does not
   squash as the panel narrows — it is revealed, not scaled. */
.square__panel img { width: max(100%, var(--stage-w, 100vw)); }
.square__panel--night img { right: 0; left: auto; }

.square__panel::after {
  content: "";
  position: absolute; inset: auto 0 0 0; z-index: 2;
  height: 46%;
  background: linear-gradient(to top, rgba(16,22,15,.9) 0%, rgba(16,22,15,.45) 45%, rgba(16,22,15,0) 100%);
  pointer-events: none;
}

.square__tag {
  position: absolute; z-index: 3; bottom: 1.4rem;
  font-family: var(--display);
  font-variation-settings: 'wdth' 108, 'wght' 600;
  font-size: clamp(1.6rem, 5vw, 3.4rem);
  line-height: 1; letter-spacing: -.01em;
  color: var(--bone);
  text-shadow: 0 2px 24px rgba(16,22,15,.75);
  white-space: nowrap;
}
.square__tag--day   { left: 1.4rem; }
.square__tag--night { right: 1.4rem; }
.square__tag small {
  display: block; margin-top: .5rem;
  font-variation-settings: 'wdth' 88, 'wght' 500;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--copper-lit);
}

.square__caption {
  background: var(--ground);
  color: var(--text);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  transition: background-color 900ms var(--ease), color 900ms var(--ease);
}

@media (max-width: 780px) {
  /* A side-by-side reveal needs width to read. On a phone the two hours
     stack instead, which says the same thing without the mechanism. */
  /* Stacked 4:5 panels came to two full screens of scrolling for one idea.
     4:3 says the same thing in a bit over half a screen. */
  .square__stage { display: grid; grid-template-columns: 1fr; gap: var(--rule); height: auto; }
  .square__panel { width: 100% !important; aspect-ratio: 4 / 3; }
  .square__panel img { width: 100%; }
  .square__panel--day img   { object-position: 22% center; }
  .square__panel--night img { object-position: 42% center; }
  .square__tag--night { right: auto; left: 1.1rem; }
  .square__tag--day   { left: 1.1rem; }
  .square__tag { bottom: 1rem; }
}

/* ---------------------------------------------------------------------------
   13. MENU PREVIEW
   ------------------------------------------------------------------------ */
.picks { display: grid; gap: 0; margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.pick {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .8rem 1.5rem;
  align-items: baseline;
  padding: 1.15rem 0;
  border-top: var(--rule) solid var(--edge);
}
.pick:last-child { border-bottom: var(--rule) solid var(--edge); }
.pick__name {
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: 1.05rem; letter-spacing: .005em;
  margin: 0;
}
.pick__desc { grid-column: 1 / -1; margin: 0; color: var(--text-2); font-size: .98rem; max-width: 58ch; }
.pick__price { color: var(--metal); font-size: 1rem; }

/* ---------------------------------------------------------------------------
   14. REVIEWS — twin ribbons flanking the map
   ------------------------------------------------------------------------ */
.rv-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: stretch;
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}
@media (max-width: 960px) { .rv-grid { grid-template-columns: 1fr; } }

.map-frame {
  position: relative;
  min-height: 26rem;
  border: var(--rule) solid var(--edge);
  overflow: hidden;
  background: var(--surface);
}
.map-frame iframe { width: 100%; height: 100%; min-height: 26rem; border: 0; display: block; filter: grayscale(.35) contrast(1.05); }

/* The Google embed cannot be styled from here, and by the time the page reaches
   the reviews it is running the night palette — a white map next to it reads as
   a hole punched in the page. Inverting the hue wheel back keeps the roads and
   the pin the right colours while the paper goes dark. */
.night .map-frame iframe,
.map-frame iframe { transition: filter 900ms var(--ease); }
.night .map-frame iframe {
  filter: invert(.92) hue-rotate(180deg) saturate(.55) contrast(.92) brightness(1.05);
}

.ribbons {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px;
  height: clamp(26rem, 60vh, 34rem);
  overflow: hidden;
}
@media (max-width: 520px) { .ribbons { grid-template-columns: 1fr; } }

.ribbon { overflow: hidden; }
.ribbon__track { display: grid; gap: 1px; will-change: transform; }
@keyframes ribbon-up   { from { transform: translateY(0); }    to { transform: translateY(-50%); } }
@keyframes ribbon-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.ribbon--up   .ribbon__track { animation: ribbon-up 46s linear infinite; }
.ribbon--down .ribbon__track { animation: ribbon-down 52s linear infinite; }
.ribbons:hover .ribbon__track,
.ribbons:focus-within .ribbon__track { animation-play-state: paused; }

.rv {
  background: var(--surface);
  border: var(--rule) solid var(--edge);
  padding: 1.1rem 1.1rem 1.2rem;
}
.rv__stars { color: var(--metal); font-size: .8rem; letter-spacing: .18em; }
.rv__text { margin: .55rem 0 .8rem; font-size: .97rem; line-height: 1.5; }
.rv__who {
  font-family: var(--display);
  font-variation-settings: 'wdth' 92, 'wght' 600;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
}
.rv__meta { display: block; margin-top: .25rem; color: var(--text-2); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase;
  font-family: var(--display); font-variation-settings: 'wdth' 88, 'wght' 400; }

.ribbons__fade {
  position: absolute; left: 0; right: 0; height: 5rem; pointer-events: none; z-index: 2;
}
.ribbons__fade--t { top: 0;    background: linear-gradient(to bottom, var(--ground), transparent); }
.ribbons__fade--b { bottom: 0; background: linear-gradient(to top,    var(--ground), transparent); }

.rv-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.1rem; }
.rv-score {
  font-family: var(--display);
  font-variation-settings: 'wdth' 112, 'wght' 600;
  font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1;
  color: var(--text);
  display: inline-flex; align-items: center; gap: .24em;
}
.rv-count { color: var(--text-2); font-size: .95rem; }

/* ---------------------------------------------------------------------------
   15. FIND US
   ------------------------------------------------------------------------ */
.find__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 4rem); }
@media (max-width: 780px) { .find__grid { grid-template-columns: 1fr; } }

.hours { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.hours th, .hours td { text-align: left; padding: .62rem 0; border-bottom: var(--rule) solid var(--edge); font-weight: 400; }
.hours th {
  font-family: var(--display); font-variation-settings: 'wdth' 92, 'wght' 500;
  font-size: .76rem; letter-spacing: .11em; text-transform: uppercase; color: var(--text-2);
}
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr[data-today="true"] th { color: var(--metal); }
.hours tr[data-today="true"] td { color: var(--metal); }

.contact { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .9rem; }
.contact a { text-decoration: none; border-bottom: var(--rule) solid var(--edge); }
.contact a:hover { border-bottom-color: var(--metal); }

/* ---------------------------------------------------------------------------
   16. FOOTER
   ------------------------------------------------------------------------ */
.site-foot {
  background: var(--night); color: var(--bone-soft);
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
}
.site-foot a { color: var(--bone); text-decoration: none; }
.site-foot a:hover { color: var(--copper-lit); }
.foot__grid { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: space-between; align-items: flex-start; }
/* #6E7A68 measured 4.06:1 — just under AA. #808C7A is 5.4:1 and still quiet. */
.foot__fine { margin-top: 2.5rem; font-size: .85rem; color: #808C7A; }

/* ---------------------------------------------------------------------------
   17. MENU PAGE
   ------------------------------------------------------------------------ */
.page-menu { background: var(--limestone); }

.menu-hero {
  background: var(--night);
  color: var(--bone);
  padding-block: clamp(6.5rem, 12vw, 9rem) clamp(2.5rem, 5vw, 3.5rem);
}
.menu-hero .t-label { color: var(--copper-lit); }
.menu-hero__title { color: var(--bone); margin-top: .6rem; }
.menu-hero__lede { color: var(--bone-soft); margin-top: 1.2rem; }

/* A flex-wrap of eleven differently-sized chips wrapped into a ragged three-row
   block that read as clutter. An auto-fit grid gives every option the same width
   and aligns the rows, at every breakpoint, without a media query. */
.menu-jump {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: .45rem;
  margin-top: 1.8rem;
}
@media (min-width: 900px) {
  .menu-jump { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); max-width: 58rem; }
}
.menu-jump a {
  font-family: var(--display);
  font-variation-settings: 'wdth' 90, 'wght' 500;
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
  padding: .62rem .8rem;
  text-align: center;
  border: var(--rule) solid #3A4636;
  border-radius: var(--radius);
  color: var(--bone-soft);
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.menu-jump a:hover { color: var(--bone); border-color: var(--copper-lit); }

.menu-body { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem); }

.ms { margin-bottom: clamp(2.5rem, 6vw, 4rem); scroll-margin-top: 5rem; }
.ms__head { border-top: 2px solid var(--ink); padding-top: .9rem; margin-bottom: .4rem; }
.ms__title {
  font-family: var(--display);
  font-variation-settings: 'wdth' 110, 'wght' 600;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  letter-spacing: -.005em; text-transform: none;
  margin: 0;
}
.ms__note { margin: .45rem 0 0; color: var(--ink-soft); font-size: .98rem; max-width: 60ch; }

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

.mi {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .35rem 1.5rem;
  align-items: baseline;
  padding: .95rem 0;
  border-bottom: var(--rule) solid var(--limestone-dim);
}
.mi__main { min-width: 0; }
.mi__name {
  font-family: var(--display);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: 1.02rem; line-height: 1.25;
  margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
}
.mi__desc { margin: .3rem 0 0; color: var(--ink-soft); font-size: .97rem; line-height: 1.5; max-width: 62ch; }
.mi__price { text-align: right; white-space: nowrap; color: var(--copper-dark); font-size: 1rem; }

.mi__var { display: inline-flex; align-items: baseline; gap: .4rem; margin-left: 1rem; }
.mi__var:first-child { margin-left: 0; }
.mi__varlabel {
  font-family: var(--display);
  font-variation-settings: 'wdth' 86, 'wght' 400;
  font-size: .66rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-soft);
}
@media (max-width: 560px) {
  .mi__var { display: flex; margin-left: 0; justify-content: flex-end; }
}

.tag {
  font-family: var(--display);
  font-variation-settings: 'wdth' 86, 'wght' 600;
  /* 0.56rem worked out at 8.96px, which is below the floor even for an
     uppercase micro-label. 0.66rem is 10.56px and still reads as a badge. */
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .2rem .45rem;
  border: var(--rule) solid currentColor;
  border-radius: 3px;
  line-height: 1;
}
.tag--sig { color: var(--copper-dark); }
.tag--veg { color: var(--bottle); }

.menu-foot { margin-top: 2rem; color: var(--ink-soft); font-size: .92rem; max-width: 62ch; }

.menu-cta {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--night); color: var(--bone);
}
.menu-cta .t-h3 { color: var(--bone); }
.menu-cta .btn { background: var(--copper-lit); color: var(--night); }
.menu-cta .btn:hover { background: #D89257; }

/* ---------------------------------------------------------------------------
   18. MOTION — the reveal
   Targets are assigned in JS, never by hand in the markup. Anything already
   on screen at load shows immediately rather than waiting for a scroll.
   ------------------------------------------------------------------------ */
.rv-in { opacity: 0; transform: translateY(14px); }
.rv-in[data-shown="true"] {
  opacity: 1; transform: none;
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .rv-in, .rv-in[data-shown="true"] { opacity: 1; transform: none; transition: none; }
  .ribbon--up .ribbon__track, .ribbon--down .ribbon__track { animation: none; }
  .slat { transition: none; }
  .hero__layer { transition: none; }
  .section, .square__caption { transition: none; }
}