/* Bora Mediterranean: shared system. Palette (owner brand package, 2026-10-07): Whitetail cream #F4EFE4 is the page
   ground, Secret Garden olive #4F523A is the brand ground and the colour of display type and rules on cream, Earthen
   Jug terracotta #A85E39 is the one action colour (white text on it). Derived: a dark olive night for after-dark
   sections and body text, a darker terracotta for small terracotta text on cream (AA), a light terracotta for accents
   on night, sand for accents on olive. Terracotta and olive never touch (1.66:1).
   Shape rule: everything you can press is a pill; photos, panels and type blocks are square-cornered.
   Type: Mona Sans variable (OFL), condensed black for display, expanded for labels, normal width for text. */

@font-face {
  font-family: "Mona Sans";
  src: url("/assets/fonts/MonaSans-Variable.ttf") format("truetype");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched local fallbacks (advance widths and ascent/descent measured against Mona Sans) keep line breaks and
   baselines in place while the web font loads, so the swap does not shift layout. Overrides are divided by size-adjust. */
@font-face { font-family: "Mona Fallback Arial"; src: local("Arial"); size-adjust: 104.3%; ascent-override: 104.5%; descent-override: 30.7%; line-gap-override: 0%; }
@font-face { font-family: "Mona Fallback Helvetica"; src: local("Helvetica Neue"), local("Helvetica"); size-adjust: 100.3%; ascent-override: 108.7%; descent-override: 31.9%; line-gap-override: 0%; }
@font-face { font-family: "Mona Display Narrow"; src: local("Arial Narrow"); size-adjust: 92.2%; ascent-override: 118.2%; descent-override: 34.7%; line-gap-override: 0%; }
@font-face { font-family: "Mona Display Arial"; src: local("Arial"); size-adjust: 75.6%; ascent-override: 144.2%; descent-override: 42.3%; line-gap-override: 0%; }

:root {
  --cream: #f4efe4;          /* Whitetail: the page ground */
  --cream-lift: #fbf8f1;     /* panels, fields and the header strip on cream */
  --cream-2: #e9e2d2;        /* sunken tracks and read-only fields */
  --olive: #4f523a;          /* Secret Garden: the brand ground (cream on it 7.0:1); display type and rules on cream (7.0:1) */
  --olive-deep: #3e412d;     /* pressed olive (cream on it 9.2:1) */
  --olive-wash: rgb(79 82 58 / 0.11);
  --night: #26281c;          /* dark olive night: after-dark grounds (cream on it 13.1:1) and body text on cream (13.1:1) */
  --night-2: #313427;
  --terracotta: #a85e39;     /* Earthen Jug: actions (white on it 4.9:1); large display marks on cream only (4.2:1) */
  --terracotta-text: #8e4f30; /* small terracotta text on cream (5.5:1) and cream-lift (6.0:1); pressed terracotta (white 6.3:1) */
  --terracotta-night: #d98b62; /* terracotta on night (5.6:1); never on olive */
  --sand: #e3c9a8;           /* accent text on olive (5.1:1) and night (9.4:1) */
  --mute-cream: #5a5d46;     /* descriptions on cream (5.9:1) and cream-lift (6.4:1) */
  --mute-olive: #dcd6c6;     /* secondary text on olive (5.6:1) */
  --mute-night: #bdbba6;     /* descriptions on night (7.7:1) */
  --line: var(--olive);      /* heavy rules on cream */
  --font: "Mona Sans", "Mona Fallback Arial", "Mona Fallback Helvetica", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Mona Sans", "Mona Display Narrow", "Mona Display Arial", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --gutter: clamp(20px, 4.4vw, 72px);
  --focus: var(--olive);
  /* Chrome footprint. The header strip is --chrome-band tall (pills plus equal space above and below); anchors,
     focused controls and stage tops clear it by --chrome-clear. On phones the dock footprint (--dock-clear: buttons,
     padding, its offset and the home-indicator safe area) is reserved at the page bottom and in sticky stages. All
     offsets derive from these tokens, the same values that size the chrome. */
  --chrome-top: 10px;
  --chrome-h: 52px;
  --chrome-band: calc(var(--chrome-top) * 2 + var(--chrome-h));
  --chrome-clear: calc(var(--chrome-band) + 16px);
  --dock-btn: 44px;
  --dock-pad: 4px;
  --dock-gap: 8px;
  --dock-h: calc(var(--dock-btn) + var(--dock-pad) * 2);
  --dock-clear: 0px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background: var(--cream);
  color: var(--night);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: var(--chrome-clear);
  scroll-padding-bottom: calc(var(--dock-clear) + 24px);
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 420;
  font-stretch: 100%;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* Off-canvas plates and drifting type are clipped by main (overflow: clip keeps sticky stages working). */
main, .footer { overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
picture { display: contents; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a, button, [role="tab"] { touch-action: manipulation; }
input { font: inherit; }

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

.on-dark { --focus: var(--sand); }
.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; z-index: 100; top: 10px; left: 10px;
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px;
  background: var(--night); color: var(--cream); border-radius: 999px; font-weight: 700; text-decoration: none;
  transform: translateY(-160%);
  --focus: var(--sand);
}
.skip:focus-visible, .skip:focus { transform: none; outline: 3px solid var(--terracotta); outline-offset: 3px; }

/* ---------- type helpers ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 860;
  font-stretch: 75%;
  line-height: 0.9;
  letter-spacing: -0.012em;
}
.label {
  font-size: 14px;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.price {
  font-weight: 700;
  font-stretch: 100%;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.fine { font-size: 16px; line-height: 1.45; }

/* ---------- buttons (pills) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0 22px;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 16px; font-weight: 680; font-stretch: 108%; line-height: 1.1; letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap;
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.btn-primary, .btn-order { background: var(--terracotta); color: #fff; }
.btn-ink { background: var(--night); color: var(--cream); }
.btn-ghost { color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.btn-quiet { color: inherit; background: rgb(38 40 28 / 0.06); }
/* Owner rule: nothing animates while the page is still. Press feedback is an immediate state change, never a timed
   scale or fade: the pressed color appears at once and clears at once on release. */
.btn-primary:active, .btn-order:active { background: var(--terracotta-text); }
.btn-ink:active { background: var(--olive); }
.btn-ghost:active { box-shadow: inset 0 0 0 3px currentColor; }
.btn-quiet:active { background: rgb(38 40 28 / 0.16); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover, .btn-order:hover { background: var(--terracotta-text); }
  .btn-ink:hover { background: var(--olive); }
  .btn-ghost:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
  .btn-quiet:hover { background: rgb(38 40 28 / 0.12); }
  .text-link:hover { text-decoration-thickness: 3px; }
}
/* Pill-shaped controls keep a square hit box (corners included) the size of their border box. */
.btn, .nav a, .brand, .footer-index a { position: relative; }
.btn::after, .nav a::after, .brand::after, .footer-index a::after { content: ""; position: absolute; inset: 0; }
.text-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 680; font-stretch: 108%; text-decoration: underline; text-decoration-thickness: 2px;
}

/* ---------- header strip ---------- */
.chrome {
  position: fixed; z-index: 40; top: 0; left: 0; right: 0; height: var(--chrome-band);
  padding: var(--chrome-top) 12px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  pointer-events: none;
}
.chrome > * { pointer-events: auto; }
/* The backing: a solid strip under the pills. It is shown on every page except over the Home hero, where the pills
   float on the cream ground (site.js adds .chrome-backed once the hero has scrolled out from under the strip). */
.chrome::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: var(--cream-lift); box-shadow: 0 1px 0 rgb(38 40 28 / 0.12);
  pointer-events: auto;
}
html.js body[data-page="home"] .chrome::before { display: none; }
html.js.chrome-backed body[data-page="home"] .chrome::before { display: block; }
/* On the backed strip the pills are part of one bar (no floating shadow). */
html:not(.js) .pill, body:not([data-page="home"]) .pill, html.chrome-backed .pill { box-shadow: none; }
.pill {
  display: flex; align-items: center; gap: 2px;
  height: var(--chrome-h); padding: 0 4px;
  background: var(--cream-lift); color: var(--night);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgb(38 40 28 / 0.1), 0 14px 30px -18px rgb(38 40 28 / 0.55);
  --focus: var(--olive);
}
.brand { display: flex; align-items: center; height: 44px; padding: 0 12px; border-radius: 999px; }
.brand img { height: 30px; width: auto; }
.nav { display: flex; }
.nav a, .pill-link {
  display: inline-flex; align-items: center; height: 44px; padding: 0 15px;
  border-radius: 999px; text-decoration: none;
  font-size: 16px; font-weight: 640; font-stretch: 108%;
}
.nav a[aria-current="page"] { background: var(--olive-wash); color: var(--olive); }
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { background: rgb(38 40 28 / 0.07); }
}
/* At most one date in the chrome: before the launch the dated order link carries it, so the status chip (whose
   static text is dated) appears only once Bora has opened and its text is the live, undated status. */
.status-chip {
  display: none; align-items: center; height: 44px; padding: 0 14px 0 16px;
  font-size: 14px; font-weight: 640; font-stretch: 105%; color: var(--mute-cream); white-space: nowrap;
}
html[data-business-state="open"] .status-chip { display: flex; }
.status-chip [data-status="short"] { display: none; }
.pill .btn { min-height: 44px; }
.pill .order-note { padding: 0 16px 0 4px; font-size: 14px; font-weight: 640; color: var(--mute-cream); white-space: nowrap; }

.dock { display: none; }

/* ---------- footer: the one Visit destination on every page ---------- */
.footer {
  background: var(--night); color: var(--cream);
  padding: clamp(72px, 9vw, 128px) var(--gutter) calc(40px + var(--dock-clear));
  --focus: var(--sand);
}
.visit {
  display: grid; gap: 40px 48px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
}
.visit-head { grid-column: 1 / span 7; }
.visit-title { font-size: clamp(64px, 9vw, 150px); color: var(--cream); }
.visit-status { margin-top: 18px; font-size: 18px; font-weight: 640; font-stretch: 108%; color: var(--sand); }
.visit-address { margin-top: 28px; display: grid; gap: 4px; font-size: clamp(22px, 2.2vw, 32px); font-weight: 600; line-height: 1.2; }
.visit-address .street { font-family: var(--font-display); font-size: clamp(40px, 4.6vw, 72px); font-weight: 860; font-stretch: 75%; line-height: 0.95; }
.visit-address .area { color: var(--mute-night); font-size: 18px; font-weight: 500; }
.visit-maps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.visit-side { grid-column: 8 / span 5; display: grid; gap: 32px; padding-top: clamp(0px, 2vw, 28px); }
.visit-block h3 { font-size: 14px; font-weight: 700; font-stretch: 125%; letter-spacing: 0.02em; color: var(--sand); margin-bottom: 10px; }
.hours { display: grid; gap: 6px; font-size: 19px; }
.hours p { display: flex; justify-content: space-between; gap: 24px; border-bottom: 1px solid rgb(244 239 228 / 0.14); padding-bottom: 6px; }
.hours p:last-child { border-bottom: 0; }
.phone { display: inline-flex; align-items: center; min-height: 48px; font-family: var(--font-display); font-size: clamp(34px, 3vw, 46px); font-weight: 860; font-stretch: 75%; text-decoration: none; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .phone:hover { text-decoration: underline; text-decoration-thickness: 3px; } }
.visit-order { display: grid; gap: 10px; justify-items: start; }
.visit-order .fine { color: var(--mute-night); }
.visit-review a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35em; min-height: 44px; font-weight: 650; }
.visit-review .new-tab { font-size: 16px; font-weight: 500; color: var(--mute-night); }
.footer-base {
  margin-top: clamp(72px, 9vw, 120px); padding-top: 32px; border-top: 1px solid rgb(244 239 228 / 0.16);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px 48px; align-items: end;
}
.footer-logo { grid-column: 1 / span 5; }
.footer-logo img { width: min(100%, 420px); height: auto; }
.footer-index { grid-column: 6 / span 3; display: grid; gap: 2px; }
.footer-index a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 640; font-stretch: 108%; text-decoration: none; justify-self: start; }
@media (hover: hover) and (pointer: fine) { .footer-index a:hover { text-decoration: underline; } }
.footer-note { grid-column: 9 / span 4; display: grid; gap: 12px; color: var(--mute-night); font-size: 16px; }

/* ---------- tablet ---------- */
@media (max-width: 1099px) {
  .visit, .footer-base { column-gap: 24px; }
  .nav a { padding: 0 11px; }
  .status-chip [data-status="long"] { display: none; }
  .status-chip [data-status="short"] { display: inline; }
  .visit-head, .visit-side { grid-column: 1 / -1; }
  .visit-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-logo { grid-column: 1 / -1; }
  .footer-index { grid-column: 1 / span 5; }
  .footer-note { grid-column: 6 / -1; }
}

/* ---------- phone: slim header strip + one thumb dock (the single menu entry point) ---------- */
@media (max-width: 759px) {
  :root {
    --chrome-h: 44px; --chrome-top: 8px;
    --dock-clear: calc(var(--dock-h) + var(--dock-gap) + env(safe-area-inset-bottom, 0px));
  }
  body { font-size: 17px; }
  .chrome { padding: var(--chrome-top) 8px; }
  .nav, .pill .btn-order, .pill .order-note, .pill [data-slot="header"] { display: none; }
  .pill { box-shadow: 0 0 0 1px rgb(38 40 28 / 0.1), 0 10px 24px -16px rgb(38 40 28 / 0.55); }
  .brand { padding: 0 10px; }
  .brand img { height: 26px; }
  .pill-side { display: none; }
  html[data-business-state="open"] .pill-side { display: flex; }
  .status-chip { padding: 0 12px; font-size: 14px; }
  .dock {
    position: fixed; z-index: 40; left: 8px; right: 8px; bottom: calc(var(--dock-gap) + env(safe-area-inset-bottom, 0px));
    display: flex; gap: var(--dock-pad); padding: var(--dock-pad);
    background: var(--cream-lift); color: var(--night); border-radius: 999px;
    box-shadow: 0 0 0 1px rgb(38 40 28 / 0.12), 0 18px 34px -16px rgb(38 40 28 / 0.6);
    --focus: var(--olive);
  }
  /* Away while reading down and over the opening list and footer: moved fully below the viewport (it covers nothing)
     with no transition. A keyboard user who tabs into it brings it back, so focus is never on a hidden control. */
  html.dock-away .dock:not(:focus-within) { transform: translateY(calc(100% + var(--dock-gap) + env(safe-area-inset-bottom, 0px))); }
  /* Menu, Catering, Visit and Order (owner request 17021): each control takes its label's width plus an equal share of
     the rest, so all four labels stay whole down to 320px. */
  .dock > * { flex: 1 1 auto; }
  .dock .btn { min-height: var(--dock-btn); padding: 0 8px; font-size: 15px; }
  .dock .slot { display: grid; }
  .dock .slot > * { width: 100%; }
  .dock .btn-quiet { background: rgb(38 40 28 / 0.07); }
  .dock-note { display: flex; flex-direction: column; justify-content: center; min-height: var(--dock-btn); padding: 0 12px; font-size: 13px; line-height: 1.2; font-weight: 600; color: var(--mute-cream); }
  .dock-note span:first-child { font-weight: 750; color: var(--night); }
  .visit, .footer-base { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .visit > *, .footer-base > * { grid-column: 1 / -1; }
  .visit { gap: 36px; }
  .visit-side { grid-template-columns: 1fr; gap: 28px; }
  .visit-maps .btn { white-space: normal; text-align: center; }
  .footer-base { grid-template-columns: 1fr; }
  .footer-logo, .footer-index, .footer-note { grid-column: 1 / -1; }
  .footer-logo img { width: 72%; }
  .fine, .footer-note, .visit-review .new-tab { font-size: 15px; }
}