/* Spinning Bones — static site
   Single stylesheet, no build step, no external requests.
   Type and colour follow the previous Wix site: Montserrat throughout, a
   script/caps lockup for section headings, brick red on cream with an olive
   accent band. Fonts are self-hosted (latin subsets) so nothing is fetched
   from a third party at runtime. */

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-var.woff2") format("woff2");
  font-weight: 100 900;          /* variable: one file covers every weight */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lobster Two";
  src: url("/assets/fonts/lobster-two-700-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* The palette is a light one only; declaring this stops mobile browsers
     auto-inverting the page into an unreadable pseudo-dark theme. */
  color-scheme: light;

  --ink: #3d2019;
  --ink-soft: #6a4b3e;
  --paper: #ffffff;
  --paper-alt: #efebe4;
  --ember: #a33a22;
  --ember-dark: #7f2b17;
  --olive: #a39860;
  --line: #e4ddd2;
  --max: 1080px;
  --sans: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --script: "Lobster Two", Georgia, serif;
}

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

/* Single-page nav: ease the jump between sections, but respect a reader who
   has asked the OS for reduced motion. */
html { scroll-behavior: smooth; }

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

/* Keep a little air above a section that has just been scrolled to. */
section[id] { scroll-margin-top: 1rem; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--sans);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.6em;
}

h2 {
  font-size: 1.15rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

a { color: var(--ember-dark); }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ── Header ─────────────────────────────────────────────── */
/* Olive band across the very top, as on the previous site. */
.topbar { height: 10px; background: var(--olive); }

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

/* Full-bleed rather than the centred .wrap, with side padding matched to the
   award badges' offset — so the wordmark sits directly above them, on the
   same left edge, instead of being inset by the content column. */
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 84px;
  flex-wrap: wrap;
  max-width: none;
  padding-left: clamp(0.8rem, 2vw, 1.75rem);
  padding-right: clamp(0.8rem, 2vw, 1.75rem);
}

/* Wishbone first, then the name stacked on two lines beside it. */
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--ember);
  white-space: nowrap;
}

.brand img {
  display: block;
  height: 54px;
  width: auto;
  border-radius: 3px;
}

/* Block-level lines rather than a nested flex column: Safari renders this
   identically to Chrome, which the flex version did not. */
.brand-name { display: block; }

.brand-line {
  display: block;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.nav a {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.nav a:hover, .nav a[aria-current="page"] { color: var(--ember); }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-block;
  background: var(--ember);
  color: #fff;
  text-decoration: none;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}

.btn:hover { background: var(--ember-dark); }

.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}

.btn.ghost:hover { background: var(--ink); color: #fff; }

.btn-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.btn-row.centered { justify-content: center; }

button.btn {
  font-family: inherit;
  border: 0;
  cursor: pointer;
}

button.btn.ghost { border: 1px solid var(--ink); }

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  padding: 4rem 0 3rem;
  border-bottom: 1px solid var(--line);
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero p.lede {
  font-size: clamp(1rem, 2vw, 1.15rem);
  max-width: 52ch;
  margin: 0;
}

/* ── Photo band ─────────────────────────────────────────── */
/* The shot is shown whole — natural aspect ratio, no crop — the way it ran
   on the previous site. Badges float over its top-left corner. */
.hero-photo {
  position: relative;
  display: block;
  padding: 0;
}

.hero-photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Stacked in the photo's top-left corner. The column only reads as
   deliberate while it sits ON the photo — once it drops into the page below
   640px it becomes a centred row instead, so it does not leave a tall band
   of empty background either side. */
.hero-badges {
  position: absolute;
  top: clamp(0.8rem, 2vw, 1.75rem);
  left: clamp(0.8rem, 2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.5rem, 1vw, 0.9rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Written MICHELIN mention, required alongside the logo. */
.recognition-line {
  max-width: 62ch;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 0;
  text-align: center;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.recognition-line strong { color: var(--ink); }

/* ── Recognition badges ─────────────────────────────────── */
/* Each badge sits on its own white tile: the supplied artwork has a mix of
   transparent and opaque-white backgrounds, and none of it may be recoloured
   or cropped, so a neutral tile is the only way to present them consistently
   and to keep them legible against the photo. */
.badge-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 4px;
  padding: clamp(0.3rem, 0.9vw, 0.7rem);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

.badge-tile img {
  display: block;
  height: clamp(58px, 6.5vw, 96px);
  width: auto;
}

.badge-tile a { display: block; line-height: 0; }

/* ── Sections ───────────────────────────────────────────── */
section { padding: 3.5rem 0; }
.alt { background: var(--paper-alt); }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
}

/* ── Centered prose ─────────────────────────────────────── */
.prose-center {
  max-width: 70ch;
  margin: 0 auto;
  text-align: center;
}

/* Script word over spaced caps, as the old site set its section headings. */
.script-head {
  text-align: center;
  margin-bottom: 1.2em;
  letter-spacing: normal;
  text-transform: none;
}

.script-head .script {
  display: block;
  font-family: var(--script);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.1rem);
  line-height: 1;
  color: var(--ink);
}

.script-head .caps {
  display: block;
  font-size: clamp(1rem, 2vw, 1.3rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  /* letter-spacing pads the right edge; nudge back to stay optically centred */
  text-indent: 0.28em;
}

/* ── Hours ──────────────────────────────────────────────── */
.hours { list-style: none; padding: 0; margin: 0; }

.hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px dotted var(--line);
}

.hours .closed { color: var(--olive); }

/* ── Contact ────────────────────────────────────────────── */
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { padding: 0.3rem 0; }

/* ── OpenTable reservation widget ───────────────────────── */
/* Frameless and centred: the widget ships its own card styling, so a second
   border around it just read as a box inside a box. */
.reserve-widget {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0 0;
}

.reserve-widget iframe {
  max-width: 100%;
  margin: 0 auto;
}

.section-lede {
  max-width: 62ch;
  margin: 0 auto;
  text-align: center;
}

.section-note {
  max-width: 62ch;
  margin: 1.5rem auto 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* ── Menu ───────────────────────────────────────────────── */
.menu-head {
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}

.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 3rem;
}

.menu-list li {
  break-inside: avoid;
  margin: 0 0 1.1rem;
  /* the dish/price row plus the description underneath */
  display: grid;
  grid-template-columns: 1fr auto;
}

.menu-list .dish {
  font-weight: 600;
  color: var(--ink);
  padding-right: 0.75rem;
}

.menu-list .price {
  color: var(--ember);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.menu-list .desc {
  grid-column: 1 / -1;
  font-size: 0.9rem;
  line-height: 1.55;
}

.menu-list.tight li { margin-bottom: 0.75rem; }
.menu-list.tight { columns: 1; }

.menu-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 3rem;
}

/* ── Catering ───────────────────────────────────────────── */
.tray-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin: 2rem 0 0;
}

.tray-card {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.25rem;
  text-align: center;
}

.tray-card h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tray-card .serves {
  margin: 0;
  color: var(--ember);
  font-weight: 600;
}

.cat-menu h4 {
  font-family: var(--script);
  font-style: italic;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--ink);
  margin: 1.75rem 0 0.6rem;
}

.cat-menu ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  line-height: 1.6;
}

.cat-menu li { margin-bottom: 0.5rem; }
.cat-menu strong { color: var(--ink); }

/* The volume bands, said once up front so a bigger spread is a choice
   rather than a surprise on the total. */
.cat-deal {
  margin: 0.75rem 0 0;
  padding: 0.75rem 1rem;
  background: var(--paper-alt);
  border-left: 3px solid var(--olive);
  border-radius: 3px;
  font-size: 0.92rem;
  line-height: 1.5;
}

.cat-deal strong { color: var(--ink); }

/* The browser's own [hidden] rule loses to any class that sets display, so
   a hidden .cat-total (display: flex) stayed on screen with a $0 total.
   Make hidden mean hidden, everywhere. */
[hidden] { display: none !important; }

/* ── Catering tray picker ───────────────────────────────── */
.cat-menus { margin-top: 1.5rem; }

/* One menu, four courses. The course reads in the script face the menus
   used to; a sub-group (chicken / beef & pork / seafood) is a quiet label. */
.cat-course h4 {
  font-family: var(--script);
  font-style: italic;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--ink);
  margin: 2rem 0 0.4rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--line);
}

.cat-group {
  margin: 1rem 0 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember);
}

.cat-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 0.9rem 0;
  border-bottom: 1px dotted var(--line);
}

.cat-item-info {
  flex: 1 1 260px;
  min-width: 0;
}

.cat-item-info strong {
  display: block;
  color: var(--ink);
  font-size: 0.98rem;
}

.cat-desc {
  display: block;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.cat-sizes {
  display: flex;
  gap: 0.5rem;
  flex: 0 0 auto;
}

/* Each size is one tap target: label, price and quantity stacked in a tile,
   so the three sizes read as a row of choices rather than a form. */
.cat-size {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  width: 74px;
  padding: 0.4rem 0.3rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  cursor: pointer;
}

.cat-size:focus-within { border-color: var(--ember); }

.cat-size-name {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.cat-size-price {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

.cat-qty {
  width: 100%;
  padding: 0.25rem;
  text-align: center;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
}

.cat-qty:focus { outline: 2px solid var(--ember); outline-offset: 1px; }

/* A tray in the basket should be obvious at a glance while scrolling. */
.cat-size.is-selected {
  background: #f6ede3;
  border-color: var(--ember);
  box-shadow: inset 0 0 0 1px var(--ember);
}

.cat-size.is-selected .cat-size-name { color: var(--ember); }
.cat-size.is-selected .cat-qty { font-weight: 700; border-color: var(--ember); background: #fff; }

/* Running total. Sticks to the bottom so it stays visible while picking down
   a long list, rather than making you scroll back to check the damage. */
.cat-total {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--ink);
  color: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

.cat-total-main {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex: 1 1 auto;
}

.cat-total-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}

.cat-total-value { font-size: 1.6rem; font-weight: 700; }

/* The pieces under the headline: the money breakdown first, the advice
   about the spread below it, both quieter than the total. */
.cat-total-sub {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  opacity: 0.8;
}

.cat-total-breakdown,
.cat-total-notes { display: block; }

.cat-total-notes {
  font-size: 0.74rem;
  opacity: 0.85;
  margin-top: 0.15rem;
}

.cat-total-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.cat-total .cat-send,
.cat-total .cat-clear {
  flex: 0 0 auto;
  padding: 0.5rem 1rem;
  font-size: 0.7rem;
}

.cat-total .cat-clear {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

.cat-total .cat-clear:hover { background: #fff; color: var(--ink); }

/* The paper-plane button is the phone's Send; desktop uses the worded one. */
.cat-total .cat-send-icon {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
}

@media (max-width: 560px) {
  .cat-item { gap: 0.6rem; }
  .cat-sizes { width: 100%; }
  .cat-size { flex: 1 1 0; width: auto; }
  .cat-qty { font-size: 1rem; padding: 0.4rem 0.25rem; } /* comfortable to tap */

  /* On a phone the running total is a pill in the top-right corner: the
     figure and a send button, nothing else, so the trays stay readable. */
  .cat-total {
    position: fixed;
    top: 0.75rem;
    right: 0.75rem;
    bottom: auto;
    left: auto;
    width: auto;
    max-width: calc(100vw - 1.5rem);
    margin: 0;
    padding: 0.5rem 0.5rem 0.5rem 0.9rem;
    gap: 0.6rem;
    flex-wrap: nowrap;
    align-items: center;
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    z-index: 50;
  }
  .cat-total-main { gap: 0.4rem; }
  .cat-total-label { display: none; }
  .cat-total-value { font-size: 1.15rem; white-space: nowrap; }
  .cat-total-sub { display: none; }
  .cat-total-actions { flex: 0 0 auto; gap: 0; }
  .cat-total .cat-send, .cat-total .cat-clear { display: none; }
  .cat-total .cat-send-icon { display: inline-flex; }

  .cat-summary { padding: 1rem; }
  .cat-summary td + td { white-space: normal; padding-left: 0.5rem; }
  .cat-summary td.num { white-space: nowrap; }
  .order-done { padding: 1.25rem; }
}

/* A phone number split across two lines reads as two numbers. */
a[href^="tel:"] { white-space: nowrap; }

/* ── Forms ──────────────────────────────────────────────── */
.form { margin-top: 1.5rem; }

.form fieldset {
  border: 0;
  border-top: 1px solid var(--line);
  padding: 1.25rem 0 0.5rem;
  margin: 0 0 1rem;
}

.form legend {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  padding-right: 0.75rem;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.field-grid .span-2 { grid-column: 1 / -1; }

.form label,
.field-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.form .optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink-soft);
}

.form input,
.form select,
.form textarea {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.65rem 0.75rem;
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: normal;
  text-transform: none;
  font-weight: 400;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: 2px solid var(--ember);
  outline-offset: 1px;
  border-color: var(--ember);
}

.form textarea { resize: vertical; }

/* Inline help under a field, in body case rather than the label's caps. */
.form .field-hint,
.form .field-note {
  display: block;
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-soft);
}

.form .field-note { margin-top: 1rem; }

/* Honeypot: invisible to people, present for bots. Clipped in place rather
   than pushed off-screen — iOS Safari lets a page scroll sideways to reach
   an element parked at left: -9999px. */
.form .hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The order as the invoice will show it, just above the button. */
.cat-summary {
  margin: 1.5rem 0 0;
  padding: 1.25rem 1.5rem;
  background: var(--paper-alt);
  border-left: 3px solid var(--ember);
  border-radius: 3px;
}

.cat-summary h4 {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.cat-summary table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.cat-summary td {
  padding: 0.35rem 0;
  border-bottom: 1px dotted var(--line);
  vertical-align: top;
}

.cat-summary td + td { padding-left: 1rem; white-space: nowrap; }
.cat-summary td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cat-summary tr.sum td { border-bottom: 0; padding-top: 0.25rem; padding-bottom: 0.1rem; color: var(--ink-soft); }
.cat-summary tr.sum:first-of-type td { padding-top: 0.75rem; }
.cat-summary tr.total td { color: var(--ink); font-weight: 700; font-size: 1.05rem; padding-top: 0.5rem; }

.form-error {
  margin: 1rem 0 0;
  padding: 0.9rem 1.1rem;
  background: #fbeeea;
  border-left: 3px solid var(--ember);
  border-radius: 3px;
  color: var(--ember-dark);
  font-size: 0.92rem;
  line-height: 1.55;
}

.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ember-dark);
  text-decoration: underline;
  cursor: pointer;
}

/* Orders this browser has placed, with their manage links. */
.cat-recent {
  margin: 1.25rem 0 0;
  padding: 1rem 1.25rem;
  background: var(--paper-alt);
  border-left: 3px solid var(--olive);
  border-radius: 3px;
}

.cat-recent h4 {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.cat-recent ul { margin: 0; padding-left: 1.1rem; font-size: 0.92rem; line-height: 1.7; }
.cat-recent .section-note { margin: 0.5rem 0 0; text-align: left; }

.cat-recent-status {
  margin-left: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ember);
}
.cat-recent-status:empty { display: none; }

.cat-recent-hint {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.cat-recent li { margin-bottom: 0.5rem; }

/* After the invoice has gone out. */
.order-done {
  margin-top: 2rem;
  padding: 1.75rem;
  background: var(--paper-alt);
  border-left: 3px solid var(--olive);
  border-radius: 3px;
}

.order-done h3 { margin-top: 0; }
.order-done:focus { outline: none; }

.order-done-lead { font-size: 1rem; line-height: 1.6; }

.order-done-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem 1.5rem;
  margin: 1.25rem 0;
}

.order-done-facts div { margin: 0; }

.order-done-facts dt {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.order-done-facts dd {
  margin: 0.2rem 0 0;
  color: var(--ink);
  font-weight: 600;
}

/* No field may ever be wider than its column. iOS gives date and select
   inputs an intrinsic width it will not shrink below unless told, which
   pushed the pickup date past the screen edge and made the whole page
   scroll sideways. */
.form input,
.form select,
.form textarea {
  max-width: 100%;
  min-width: 0;
}

.field-grid > label { min-width: 0; }
.form select { -webkit-appearance: menulist-button; }

/* ── Composed-enquiry fallback ──────────────────────────── */
/* The site is static, so a form cannot POST anywhere. The message is handed
   to the visitor's mail client, and shown here in case that does nothing. */
.enquiry-result {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--paper-alt);
  border-left: 3px solid var(--ember);
  border-radius: 3px;
}

.enquiry-result h3 { margin-top: 0; }

.enquiry-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  line-height: 1.6;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1rem;
  margin: 1rem 0 0;
  max-height: 22rem;
  overflow: auto;
}

/* ── Order ──────────────────────────────────────────────── */
.order-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
}

.order-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  height: 100%;
  padding: 1.75rem 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
}

.order-card:hover {
  border-color: var(--ember);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.07);
}

/* The four wordmarks have very different aspect ratios (DoorDash is 8.5:1,
   Square 4:1). Boxing them at a fixed size with object-fit keeps them
   optically the same weight instead of scaling one to twice the width. */
.order-logo {
  display: block;
  width: 100%;
  max-width: 210px;
  /* Grows on narrow screens, where each card spans the full width and a
     small mark stranded in the middle of it is hard to read. */
  height: clamp(38px, 9vw, 46px);
  object-fit: contain;
  object-position: center;
}

.order-sub { font-size: 0.85rem; color: var(--ink-soft); }

/* ── Social ─────────────────────────────────────────────── */
.social-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* ── Back to top ────────────────────────────────────────── */
.to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ember);
  color: #fff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
  /* hidden until the reader is far enough down for it to be useful */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover { background: var(--ember-dark); }

@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--ink);
  color: #ded2c9;
  padding: 2.75rem 0;
  font-size: 0.88rem;
}

.site-footer a { color: #fff; }

.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* MICHELIN require the distinction to be stated in words, with the vintage. */
.footer-note {
  max-width: 34ch;
  font-size: 0.8rem;
  line-height: 1.6;
  color: #c3b3a8;
  margin: 0;
}

.note {
  background: var(--paper-alt);
  border-left: 3px solid var(--olive);
  padding: 0.9rem 1.1rem;
  margin: 1.5rem 0 0;
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .site-header .wrap { min-height: 0; padding-top: 0.9rem; padding-bottom: 0.9rem; }
  .hero { padding: 2.5rem 0 2rem; }
  section { padding: 2.5rem 0; }
  /* Centred body copy is hard to read at phone measure; headings stay centred. */
  .prose-center { text-align: left; }
  .prose-center .script-head { text-align: center; }
  .prose-center .btn-row { justify-content: center; }

  /* Over the photo the badges cover the dishes on a narrow screen, so drop
     them into normal flow below it. A row rather than a column here: stacked
     vertically they left a tall band of empty space either side. */
  .hero-badges {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1.25rem 1rem 0;
  }
  .badge-tile { padding: 0.4rem; }
  /* Big enough to actually read the vintage on a phone. Past ~66px the three
     tiles no longer fit one line, but the row wraps and stays centred, so
     legibility is worth the second line. */
  .badge-tile img { height: 74px; }

  .recognition-line { padding-top: 1rem; font-size: 0.86rem; }

  /* Two columns of dishes is unreadable at phone width. */
  .menu-list { columns: 1; }

  .to-top { right: 0.9rem; bottom: 0.9rem; }
}

/* ── Your order (order.html) ────────────────────────────── */
.wrap-narrow { max-width: 760px; }

.order-card {
  margin-top: 2rem;
  padding: 1.75rem;
  background: var(--paper-alt);
  border-left: 3px solid var(--olive);
  border-radius: 3px;
}

.order-card-error { border-left-color: var(--ember); }
.order-card h3 { margin-top: 0; }

.order-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}

.order-status {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink-soft);
}

.order-status.is-good { background: var(--olive); }
.order-status.is-pending { background: var(--ember); }
.order-status.is-off { background: #8a8a8a; }
.order-status.is-bad { background: var(--ember-dark); }

.order-number {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.order-lead { font-size: 1rem; line-height: 1.6; }

.order-lines {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1rem;
  font-size: 0.92rem;
}

.order-lines td {
  padding: 0.45rem 0;
  border-bottom: 1px dotted var(--line);
  vertical-align: top;
}

.order-lines td + td { padding-left: 1rem; white-space: nowrap; }
.order-lines td.num { text-align: right; font-variant-numeric: tabular-nums; }
.order-lines tr.total td { border-bottom: 0; font-weight: 700; color: var(--ink); padding-top: 0.75rem; }

.order-line-sub {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

@media (max-width: 560px) {
  .order-card { padding: 1.25rem; }
}

/* Nothing on this site should scroll sideways, on any browser. iOS Safari
   ignores overflow-x: hidden on the root in enough cases that the page is
   also told, at the gesture level, that horizontal panning is not a thing
   here — only vertical scrolling and pinch zoom. Blocks that genuinely
   scroll sideways (code, wide text) opt back in. */
html, body { overflow-x: hidden; overflow-x: clip; }
body { position: relative; touch-action: pan-y pinch-zoom; }
main, .site-header, .site-footer { overflow-x: clip; }
.enquiry-text { touch-action: auto; }

/* ── Footer: visit us ───────────────────────────────────── */
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem 3rem;
  margin-bottom: 1.5rem;
  text-align: left;
}

.site-footer .menu-head { margin-top: 0; }
.site-footer .footer-address a { font-size: 1.05rem; line-height: 1.5; }
.site-footer .footer-line { padding-top: 1rem; border-top: 1px solid var(--line); }

/* Details filled in from the last order: said out loud, with a way out. */
.autofill-note {
  margin: 0 0 1rem;
  padding: 0.7rem 1rem;
  background: var(--paper-alt);
  border-left: 3px solid var(--olive);
  border-radius: 3px;
  font-size: 0.9rem;
}

/* The form's own button, once the pill has brought the customer to it. */
#catering-submit.is-ready { box-shadow: 0 0 0 4px var(--ember-soft, rgba(163, 58, 34, 0.25)); }

/* ── Privacy and terms ──────────────────────────────────── */
.legal .wrap { max-width: 70ch; }
.legal h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.25rem; }
.legal h2 { font-size: 1.15rem; margin: 2rem 0 0.5rem; scroll-margin-top: 1rem; }
.legal .legal-date { color: var(--ink-soft); font-size: 0.9rem; margin-top: 0; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: 0.6rem; }