/* ==========================================================================
   876 District — Jamaican kitchen & bar, Brixton Road
   --------------------------------------------------------------------------
   Palette sampled from their own printed flyers and bottle labels, not
   invented: black, the lime green of their "8", the gold of their "76", and
   cream for text. Their menu board prints burgers in green and wings in gold,
   so this page does the same.

   The first version was bone-and-brass, chosen to avoid resembling The George
   Spot (charcoal, sun-red, teal) whose owners know this client. The worry was
   real but it was solved the wrong way — by inventing a palette instead of
   using the client's. 876's own identity is black, lime and gold, which is
   already nothing like coral-and-teal. Using what they actually print is both
   more honest and more distinctive.
   ========================================================================== */

:root {
  color-scheme: dark;

  --black:      #0A0A0A;
  --night:      #121110;
  --card:       #191714;
  --card-lift:  #221F1A;

  --lime:       #8CC63E;
  --lime-deep:  #5E9E2E;
  --gold:       #F2B029;
  --gold-deep:  #D08E14;
  --sea:        #1E5C33;

  --cream:      #F6F3EA;
  --muted:      #A79F91;
  --muted-dim:  #776F62;

  --line:       rgba(246,243,234,0.13);
  --line-lime:  rgba(140,198,62,0.34);
  --line-gold:  rgba(242,176,41,0.34);

  --font-display: "Bebas Neue", "Haettenschweiler", "Arial Narrow", sans-serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius: 5px;
  --radius-lg: 12px;
  --shadow: 0 14px 40px rgba(0,0,0,0.5);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --wrap: 1180px;
  --gutter: 20px;
  --nav-h: 80px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--black);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--gold); color: #140F05; padding: 12px 18px; text-decoration: none; }
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ============================== Type ============================== */

.h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  line-height: 0.92; letter-spacing: 0.012em;
  text-transform: uppercase; color: var(--cream); margin: 0 0 12px;
}
.h2 em { font-style: normal; color: var(--lime); }
.h2 b  { font-weight: 400; color: var(--gold); }

.kicker { font-weight: 600; font-size: 0.76rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin: 0 0 9px; }
.kicker.green { color: var(--lime); }

.sub { font-size: 1.06rem; color: var(--muted); max-width: 62ch; margin: 0 0 26px; }
.note { font-size: 0.94rem; color: var(--muted-dim); font-style: italic; }
.small { font-size: 0.88rem; color: var(--muted); }
.price { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.02em; color: var(--gold); white-space: nowrap; }

/* ============================== Buttons ============================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px; border: 2px solid transparent; border-radius: var(--radius);
  font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em;
  text-decoration: none; cursor: pointer;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn-sm { padding: 9px 16px; font-size: 0.84rem; }
.btn-lg { padding: 17px 34px; font-size: 1.02rem; }
.btn-gold { background: var(--gold); color: #140F05; border-color: var(--gold); }
.btn-gold:hover { background: #FFC54A; border-color: #FFC54A; }
.btn-lime { background: var(--lime); color: #0C1405; border-color: var(--lime); }
.btn-lime:hover { background: #A2DB50; border-color: #A2DB50; }
.btn-outline { background: transparent; color: var(--cream); border-color: rgba(246,243,234,0.4); }
.btn-outline:hover { background: rgba(246,243,234,0.09); border-color: var(--cream); }
.btn-ghost { background: transparent; color: var(--cream); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

/* ============================== Nav ============================== */

.nav { position: sticky; top: 0; z-index: 100; background: rgba(10,10,10,0.93); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav.stuck { box-shadow: 0 8px 26px rgba(0,0,0,0.55); }
.nav-in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); height: var(--nav-h); display: flex; align-items: center; gap: 22px; }

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.brand img { width: 52px; height: 52px; border-radius: 50%; }
.brand-txt { display: flex; flex-direction: column; line-height: 1; }
.brand-num { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 0.05em; }
.brand-num i { font-style: normal; color: var(--lime); }
.brand-num s { text-decoration: none; color: var(--gold); }
.brand-word { font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cream); }

.nav-links { display: flex; gap: 24px; }
.nav-links a { text-decoration: none; font-size: 0.88rem; font-weight: 500; letter-spacing: 0.04em; color: var(--cream); padding: 6px 0; position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--lime); transition: width 0.22s var(--ease); }
.nav-links a:hover::after { width: 100%; }
.nav-cta { display: flex; gap: 10px; align-items: center; }

.burger { display: none; width: 44px; height: 44px; background: transparent; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.burger span { display: block; width: 20px; height: 2px; background: var(--cream); transition: transform 0.22s var(--ease), opacity 0.22s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer { display: flex; flex-direction: column; padding: 8px var(--gutter) 22px; border-top: 1px solid var(--line); background: var(--black); }
.drawer[hidden] { display: none; }
.drawer a { padding: 14px 0; text-decoration: none; font-size: 1.04rem; font-weight: 500; border-bottom: 1px solid var(--line); }
.drawer a:last-child { border-bottom: 0; }
.drawer-call { color: var(--gold); font-weight: 600; }
.drawer-order { margin-top: 14px; background: var(--gold); color: #140F05; text-align: center; border-radius: var(--radius); font-weight: 700; border-bottom: 0 !important; }

/* ============================== Hero ============================== */

.hero { position: relative; min-height: min(88vh, 780px); display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; overflow: hidden; background: var(--black); }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(5,5,5,0.95) 0%, rgba(5,5,5,0.86) 32%, rgba(5,5,5,0.46) 62%, rgba(5,5,5,0.32) 100%),
    linear-gradient(180deg, rgba(5,5,5,0.6) 0%, transparent 26%, rgba(5,5,5,0.6) 100%);
}
.hero-in { position: relative; max-width: var(--wrap); width: 100%; margin: 0 auto; padding: 120px var(--gutter) 44px; }

.tagline { font-family: var(--font-display); font-size: clamp(0.95rem, 1.7vw, 1.2rem); letter-spacing: 0.26em; text-transform: uppercase; color: var(--lime); margin: 0 0 16px; }
.tagline span { color: var(--gold); }

.hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(3rem, 8.4vw, 6.6rem); line-height: 0.88; letter-spacing: 0.01em; text-transform: uppercase; color: var(--cream); margin: 0 0 20px; max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--gold); }

.lede { font-size: clamp(1rem, 1.5vw, 1.14rem); color: var(--muted); max-width: 54ch; margin: 0 0 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.hero-proof { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stars { color: var(--gold); letter-spacing: 0.12em; }
.hero-proof strong { font-family: var(--font-display); font-size: 1.45rem; color: var(--cream); letter-spacing: 0.04em; }
.proof-text { color: var(--muted); font-size: 0.9rem; }

.hours-strip { position: relative; background: var(--lime); color: #0C1405; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 13px var(--gutter); font-size: 0.9rem; font-weight: 600; text-align: center; }
.hours-strip .sep { opacity: 0.45; }
.hours-strip .dot { width: 9px; height: 9px; border-radius: 50%; background: #16691F; box-shadow: 0 0 0 3px rgba(0,0,0,0.12); }
.hours-strip .dot.shut { background: #B3301B; }

/* ============================== Bands ============================== */

.band { padding: clamp(48px, 5.5vw, 78px) 0; background: var(--black); }
.band-night { background: var(--night); }
.band-sea { background: var(--sea); }

/* ============================== Photos ============================== */

.shot { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: #fff; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.shot-sq { aspect-ratio: 1 / 1; }
.shot-tall { aspect-ratio: 4 / 5; }
.shot-wide { aspect-ratio: 16 / 10; }
.dish:hover .shot img, .split-shots .shot:hover img { transform: scale(1.04); }

.shot.no-img img { display: none; }
.shot.no-img::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(140,198,62,0.14) 0 10px, transparent 10px 20px), linear-gradient(160deg, var(--sea), var(--black)); }
.shot.no-img::after { content: attr(data-dish); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 18px; font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 2rem); letter-spacing: 0.08em; text-transform: uppercase; text-align: center; color: var(--gold); }

/* ============================== Dishes ============================== */

.dish-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.dish .shot { margin-bottom: 15px; box-shadow: var(--shadow); }
.dish h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.55rem; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 6px; color: var(--lime); }
.dish p { margin: 0; font-size: 0.94rem; color: var(--muted); }

/* ============================== Their words ============================== */

.saying { background: var(--night); padding: clamp(42px,5vw,66px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.saying-in { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px,4.5vw,60px); align-items: center; }
.saying-in .shot { box-shadow: var(--shadow); }
.saying blockquote { margin: 0; }
/* Their full Google description. The opening sentence carries at display size;
   the rest would be a wall of condensed caps, so it drops to body type. */
.saying .lead { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.45rem, 3.2vw, 2.4rem); line-height: 1.12; color: var(--cream); margin: 0 0 18px; }
.saying .rest { font-size: 1.02rem; line-height: 1.7; color: var(--muted); margin: 0 0 16px; }
.saying .rest b { color: var(--lime); font-weight: 500; }
.saying cite { font-style: normal; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }

/* ============================== Splits ============================== */

.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4vw, 54px); align-items: start; }
.split-rev .split-copy { order: 2; }
.split-rev .split-shots { order: 1; }
.split-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.split-shots.one { grid-template-columns: 1fr; }
.split-shots .shot { box-shadow: var(--shadow); }

.tick-list { list-style: none; margin: 0 0 18px; padding: 0; }
.sub-h { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--lime); margin: 0 0 10px; }
.tick-list li { position: relative; padding: 7px 0 7px 28px; font-size: 0.98rem; color: var(--muted); }
.tick-list li b { color: var(--cream); }
.tick-list li::before { content: ""; position: absolute; left: 3px; top: 16px; width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); }

/* ===================== Burgers & wings: their board ===================== */

.board { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 34px); }
.board-card { border: 2px solid var(--line-lime); border-radius: var(--radius-lg); padding: clamp(20px,2.6vw,30px); background: rgba(0,0,0,0.3); }
.board-card.gold { border-color: var(--line-gold); }
.board-card > h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: 0.05em; text-transform: uppercase; margin: 0 0 4px; color: var(--lime); }
.board-card.gold > h3 { color: var(--gold); }
.board-note { font-size: 0.82rem; color: var(--muted-dim); margin: 0 0 18px; }
.board-note b { color: var(--lime); font-weight: 600; }
.board-card.gold .board-note b { color: var(--gold); }

.board-row { display: grid; grid-template-columns: 1fr auto; gap: 10px 18px; align-items: baseline; padding: 13px 0; border-bottom: 1px dashed var(--line); }
.board-row:last-child { border-bottom: 0; }
.board-row h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; letter-spacing: 0.04em; text-transform: uppercase; margin: 0; color: var(--lime); }
.board-card.gold .board-row h4 { color: var(--gold); }
.board-row p { margin: 2px 0 0; font-size: 0.86rem; color: var(--muted); }
.two-price { display: flex; gap: 16px; text-align: right; }
.two-price div { min-width: 54px; }
.two-price span { display: block; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-dim); }
.two-price b { font-family: var(--font-display); font-weight: 400; font-size: 1.28rem; letter-spacing: 0.03em; color: var(--lime); }
.board-card.gold .two-price b { color: var(--gold); }

/* ============================== Rituals ============================== */

.ritual { position: relative; padding: clamp(52px,6.5vw,86px) 0; isolation: isolate; background: var(--night); overflow: hidden; }
.ritual-bg { position: absolute; inset: 0; z-index: -2; border-radius: 0; }
.ritual-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.26; }
.ritual-bg.no-img::after { content: none; }
.ritual::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,10,10,0.84), rgba(10,10,10,0.94)); }
.ritual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px,3vw,40px); }
.ritual-card { border: 2px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px,3vw,32px); background: rgba(0,0,0,0.45); }
.ritual-card .day { font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin: 0 0 6px; }
.ritual-card.green .day { color: var(--lime); }
.ritual-card h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem,3.4vw,2.6rem); letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 10px; color: var(--cream); }
.ritual-card p { margin: 0 0 16px; color: var(--muted); font-size: 0.96rem; }
.ritual-list { list-style: none; margin: 0; padding: 0; }
.ritual-list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dotted var(--line); font-size: 0.95rem; }
.ritual-list li:last-child { border-bottom: 0; }
.ritual-list b { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; color: var(--gold); }
.ritual-card.green .ritual-list b { color: var(--lime); }

/* ============================== Juices ============================== */

.juice-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px,2.4vw,26px); }
.juice { text-align: center; }
.juice .shot { margin-bottom: 10px; }
.juice b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(1rem,1.6vw,1.3rem); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream); line-height: 1.15; }
.juice span { font-size: 0.85rem; color: var(--gold); }

/* ============================== Menu ============================== */

/* The menu as expanding sections rather than six columns of prices. Built on
   <details>, so it opens and closes with no JavaScript at all and is readable
   to a screen reader as a disclosure. */
.menu-acc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; align-items: start; }
.menu-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(0,0,0,0.28);
  overflow: hidden;
  transition: border-color 0.2s var(--ease);
}
.menu-item[open] { border-color: var(--line-lime); }
.menu-item.gold[open] { border-color: var(--line-gold); }
.menu-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.4rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--lime);
}
.menu-item.gold summary { color: var(--gold); }
.menu-item summary::-webkit-details-marker { display: none; }
.menu-item summary:hover { background: rgba(246,243,234,0.035); }
/* A plus that becomes a minus, drawn in CSS so there is no icon to load. */
.menu-item summary i { position: relative; width: 14px; height: 14px; flex: none; }
.menu-item summary i::before, .menu-item summary i::after {
  content: ""; position: absolute; background: currentColor;
  transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
}
.menu-item summary i::before { left: 0; top: 6px; width: 14px; height: 2px; }
.menu-item summary i::after { left: 6px; top: 0; width: 2px; height: 14px; }
.menu-item[open] summary i::after { transform: rotate(90deg); opacity: 0; }
.menu-body { padding: 0 20px 18px; }
.menu-body .menu-note { margin-top: -2px; }
.menu-block h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: 0.07em; text-transform: uppercase; margin: 0 0 4px; color: var(--lime); }
.menu-block.gold h3 { color: var(--gold); }
.menu-note { margin: 0 0 12px; font-size: 0.82rem; color: var(--muted-dim); font-style: italic; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px dotted var(--line); font-size: 0.95rem; color: var(--cream); }
.menu-list li span { flex: 1; }
.menu-list li em { font-style: normal; display: block; font-size: 0.8rem; color: var(--muted-dim); }
.menu-list li b { font-family: var(--font-display); font-weight: 400; font-size: 1.16rem; letter-spacing: 0.03em; color: var(--gold); white-space: nowrap; }
.menu-foot { margin: 30px 0 0; font-size: 0.93rem; color: var(--muted); }
.menu-foot a { color: var(--gold); font-weight: 600; }

/* ============================== Reviews ============================== */

/* Reviews on a scroll track rather than a grid: all six are reachable, it
   swipes on a phone, and the arrows move it both ways. Scroll snapping does
   the positioning, so there is no slide index to keep in sync. */
.rev-carousel { position: relative; margin-bottom: 28px; }
.rev-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(270px, 1fr);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 2px 2px 10px;
}
.rev-track::-webkit-scrollbar { display: none; }
.rev-track > .rev { scroll-snap-align: start; margin: 0; }
.rev-track:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: var(--radius); }

.rev-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; line-height: 1;
  color: var(--cream);
  background: rgba(10,10,10,0.88);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), opacity 0.18s var(--ease);
}
.rev-nav:hover { background: var(--card-lift); border-color: var(--gold); color: var(--gold); }
.rev-nav.prev { left: -14px; }
.rev-nav.next { right: -14px; }
.rev-nav[disabled] { opacity: 0.25; cursor: default; }
.rev-nav[disabled]:hover { background: rgba(10,10,10,0.88); border-color: var(--line); color: var(--cream); }
.rev { margin: 0; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--radius); padding: 22px; }
.rev p { margin: 0 0 14px; font-size: 1rem; line-height: 1.5; }
.rev footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rev footer strong { font-size: 0.88rem; letter-spacing: 0.04em; color: var(--muted); }
.rev .stars { font-size: 0.82rem; }

.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.facts li { background: var(--black); padding: 20px 16px; text-align: center; }
.facts li b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--lime); }
.facts li span { font-size: 0.84rem; color: var(--muted); }

/* ============================== Order ============================== */

.order-head { text-align: center; max-width: 62ch; margin: 0 auto 26px; }
.order-head .sub { margin-left: auto; margin-right: auto; }
.order-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 14px; }
.order-card { display: flex; flex-direction: column; gap: 3px; padding: 22px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); text-decoration: none; transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease); }
.order-card:hover { background: var(--card-lift); border-color: var(--gold); transform: translateY(-3px); }
.order-card strong { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cream); }
.order-card span { font-size: 0.84rem; color: var(--muted); }

/* ============================== Find us ============================== */

.find-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px,1fr)); gap: 36px; }
.find-col h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--lime); display: inline-block; color: var(--cream); }
.addr { font-size: 1.08rem; line-height: 1.5; margin: 0 0 16px; }
.hours { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.hours th, .hours td { text-align: left; padding: 8px 0; border-bottom: 1px dotted var(--line); font-weight: 400; color: var(--muted); }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.today th, .hours tr.today td { color: var(--lime); font-weight: 700; }
.hours tr.shut th, .hours tr.shut td { color: var(--muted-dim); }
.contact-list { list-style: none; margin: 0 0 16px; padding: 0; }
.contact-list li { padding: 7px 0; border-bottom: 1px dotted var(--line); }
.contact-list a { font-weight: 600; text-decoration: none; color: var(--gold); }
.contact-list a:hover { text-decoration: underline; }

/* ============================== Footer ============================== */

.foot { background: var(--night); color: var(--muted); padding: 44px 0 30px; border-top: 1px solid var(--line); }
.foot-in { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 32px; align-items: start; }
.foot-brand img { width: 96px; height: 96px; border-radius: 50%; margin-bottom: 14px; }
.foot-brand p { margin: 0; font-size: 0.89rem; }
.foot-tag { font-family: var(--font-display); letter-spacing: 0.15em; text-transform: uppercase; color: var(--lime); font-size: 0.95rem; margin-top: 8px !important; }
.foot-col h4 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.05rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lime); margin: 0 0 12px;
}
.foot-links { display: flex; flex-direction: column; gap: 9px; }
.foot-hours { margin-top: 12px !important; color: var(--cream); }
.foot-hours span { color: var(--muted-dim); }
/* One line left in here now the studio credit has gone, so centre it rather
   than pin it to the left of an empty row. */
.foot-bottom {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line);
}
.foot-bottom p { margin: 0; }
.foot-bottom a { color: var(--gold); text-decoration: none; }
.foot-links a { text-decoration: none; font-size: 0.9rem; }
.foot-links a:hover { color: var(--gold); }
.foot-meta p { margin: 0 0 7px; font-size: 0.9rem; }
.foot-meta a { color: var(--gold); text-decoration: none; }
.tiny { font-size: 0.8rem; color: var(--muted-dim); }

/* ============================== Reveal ============================== */

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .order-card { transform: none; }
  .shot img { transition: none; }
}

/* ============================== Responsive ============================== */

@media (max-width: 980px) {
  .menu-acc { grid-template-columns: 1fr; }
  .rev-nav.prev { left: 2px; }
  .rev-nav.next { right: 2px; }
  .nav-links, .nav-cta { display: none; }
  .burger { display: flex; }
  .split { grid-template-columns: 1fr; }
  .saying-in { grid-template-columns: 1fr; }
  .saying-in .shot { max-width: 420px; }
  .split-rev .split-copy, .split-rev .split-shots { order: initial; }
  .board { grid-template-columns: 1fr; }
  .ritual-grid { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { min-height: auto; }
  .hero-in { padding: 100px var(--gutter) 42px; }
  .hero h1 { max-width: 100%; }
  .hero-actions .btn { width: 100%; }
  .dish-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .dish h3 { font-size: 1.2rem; }
  .juice-row { grid-template-columns: 1fr 1fr; }
  .split-shots { grid-template-columns: 1fr 1fr; }
  /* Stacked on a phone, the price pair sat hard left under the dish name with
     half the card empty beside it. Centre the whole card instead: heading,
     item, description and prices all on one axis. */
  .board-card { text-align: center; }
  .board-note { margin-left: auto; margin-right: auto; max-width: 34ch; }
  .board-row { grid-template-columns: 1fr; justify-items: center; }
  .two-price { justify-content: center; }
  .foot-in { grid-template-columns: 1fr; }
  .hours-strip { font-size: 0.8rem; gap: 7px; }
  .hours-strip .sep { display: none; }
}

/* ==========================================================================
   Find us: map, details, and the enquiry form
   --------------------------------------------------------------------------
   The map is an ordinary Google embed rather than the JavaScript Maps API, so
   there is no key to leak, no billing account to attach, and nothing to break
   when a quota runs out. It is lazy-loaded so it costs nothing until scrolled
   to.
   ========================================================================== */

.find-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(24px, 3.5vw, 44px);
  margin: clamp(28px, 3.5vw, 40px) 0 clamp(34px, 4.5vw, 54px);
}
/* A concrete height, not aspect-ratio. Google's embed measures itself once at
   load; given a ratio-derived box (and loading="lazy") it painted a ~130px map
   inside a correctly sized 608px frame. A fixed height renders in full. */
.map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card);
  /* A definite height. Google's embed measures itself once at load and cannot
     resolve a percentage or ratio-derived box. */
  height: clamp(280px, 30vw, 420px);
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(0.9); }


/* ---- form ---- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(24px, 4vw, 54px);
  align-items: start;
  border-top: 1px solid var(--line);
  padding-top: clamp(30px, 4vw, 48px);
}
.contact-copy .small { margin: 0 0 18px; }

.form { margin: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }
.field { margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.field label span { letter-spacing: 0.04em; text-transform: none; color: var(--muted-dim); font-weight: 400; }
.field input, .field textarea {
  font-family: var(--font-body); font-size: 1rem;
  color: var(--cream);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  width: 100%;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: var(--card-lift); }
.field textarea { resize: vertical; min-height: 120px; }

/* The honeypot has to be reachable by a bot and invisible to a person — so it
   is moved off-screen rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: 0.8rem; color: var(--muted-dim); margin: 12px 0 0; }
.form-ok, .form-err {
  grid-column: 1 / -1;
  margin: 18px 0 0; padding: 16px 18px;
  border-radius: var(--radius); font-size: 0.97rem;
}
.form-ok { background: rgba(140,198,62,0.12); border: 1px solid var(--line-lime); color: var(--cream); }
.form-ok strong { color: var(--lime); display: block; margin-bottom: 4px; }
.form-ok a { color: var(--gold); }
.form-err { background: rgba(192,64,42,0.14); border: 1px solid rgba(192,64,42,0.45); color: #F0C9C2; }

@media (max-width: 980px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .map { height: 300px; }
}