/* Self-hosted webfonts. Generated by scripts/fetch-fonts.py — do not
   edit by hand. Paths are relative to the stylesheet, which sits at the
   site root, so they resolve for /en/ too. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/archivo-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/archivo-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/archivo-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/archivo-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/archivo-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/archivo-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/public-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/public-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/public-sans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/public-sans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* AVA Bar og Spiseri — the counter.
   Palette, type and structure per site/design-brief.md. */

:root {
  --coral: #d8463c;
  --coral-loud: #ec5e56;
  --coral-ink: #8f2820;
  --coral-wash: #fdeceb;
  --teal: #127e84;
  --teal-loud: #3baeb3;
  --teal-wash: #e2f0f0;
  --green: #177f4e;
  --green-loud: #29b36f;
  --green-wash: #e2f1e9;
  --ink: #161a19;
  --ink-2: #4b5754;
  --ink-3: #7d8a86;
  --ground: #eef0ef;
  --surface: #fff;
  --surface-2: #e5e9e8;
  --rule: #d5dbd9;
  --rule-2: #bcc5c2;
  --sand: #c5bba4;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wide: 1240px;
  --gutter: 20px;
  --rail: 344px;
  --hdr: 62px;
  --catbar: 51px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: 2px;
}

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: #fff; padding: 12px 18px; }
.skip:focus { left: 8px; top: 8px; }

/* ---------------- header ---------------- */

.hdr {
  position: sticky; top: 0; z-index: 40;
  height: var(--hdr);
  background: var(--ink);
  color: #fff;
  display: flex; align-items: center;
}
.hdr .wrap { display: flex; align-items: center; gap: 18px; width: 100%; }
.hdr__logo { height: 30px; width: auto; display: block; }
.hdr__nav { display: flex; gap: 20px; margin-left: auto; align-items: center; }
.hdr__nav a {
  color: #fff; text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 0; border-bottom: 2px solid transparent;
}
.hdr__nav a:hover { border-bottom-color: var(--coral-loud); }
@media (max-width: 800px) { .hdr__nav a.is-optional { display: none; } }
/* Nav labels must never wrap — a two-line link breaks the header's height. */
.hdr__nav a { white-space: nowrap; }
@media (max-width: 620px) { .hdr__nav a.is-tight { display: none; } }
@media (max-width: 620px) {
  .hdr .wrap { gap: 10px; }
  .hdr__nav { gap: 14px; }
  .hdr__nav a { font-size: 12px; }
  .status { font-size: 11px; padding: 3px 9px; }
  .hdr__logo { height: 26px; }
}

.lang { display: flex; gap: 2px; font-family: var(--mono); font-size: 12px; }
.lang a {
  color: rgba(255,255,255,.55); text-decoration: none;
  padding: 3px 7px; border-radius: 2px; letter-spacing: .04em;
}
.lang a[aria-current="true"] { color: var(--ink); background: #fff; font-weight: 600; }

/* ---------------- open/closed pill ---------------- */

.status {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; flex: none;
  font-family: var(--mono); font-size: 12px; letter-spacing: .03em;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.1); color: #fff;
}
.status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.status.is-open .status__dot { background: var(--green-loud); box-shadow: 0 0 0 3px rgba(41,179,111,.25); }
.status.is-shut .status__dot { background: var(--coral-loud); }
/* Must come after the .status base rule above — a media query adds no
   specificity, so declaring this earlier let `display: inline-flex` win and the
   pill never actually hid on a phone. */
@media (max-width: 430px) { .status { display: none; } }

/* ---------------- hero ---------------- */

.hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .46;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(22,26,25,.94) 0%, rgba(22,26,25,.7) 46%, rgba(22,26,25,.28) 100%);
}
.hero .wrap { position: relative; z-index: 2; padding-top: 66px; padding-bottom: 60px; }
.hero__eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--teal-loud); margin: 0 0 16px;
}
.hero h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(42px, 8.5vw, 96px); line-height: .92;
  letter-spacing: -.035em; margin: 0 0 20px; max-width: 15ch;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--coral-loud); }
.hero__sub { font-size: clamp(17px, 2.2vw, 21px); line-height: 1.45; max-width: 40ch; color: rgba(255,255,255,.86); margin: 0 0 30px; }
.hero__acts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero__meta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px 26px; font-family: var(--mono); font-size: 13px; color: rgba(255,255,255,.72); }
.hero__meta b { color: #fff; font-weight: 500; }

/* ---------------- CTAs — each its own identity ---------------- */

.cta-order {
  font-family: var(--display); font-weight: 800; font-size: 17px;
  letter-spacing: -.01em;
  background: var(--coral-loud); color: #fff; border: 0;
  padding: 16px 30px; border-radius: 3px; cursor: pointer;
  text-decoration: none; display: inline-block;
  box-shadow: 0 4px 0 var(--coral-ink);
  transition: transform .1s ease, box-shadow .1s ease;
}
.cta-order:hover { background: #f06e66; }
.cta-order:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--coral-ink); }

.cta-call {
  font-family: var(--mono); font-size: 15px; letter-spacing: .02em;
  color: #fff; text-decoration: none;
  padding: 14px 22px; border-radius: 3px;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.42);
  display: inline-block; transition: box-shadow .15s ease, background .15s ease;
}
.cta-call:hover { box-shadow: inset 0 0 0 1.5px var(--teal-loud); background: rgba(59,174,179,.14); }

.cta-link {
  font-family: var(--display); font-weight: 700; font-size: 14px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--teal); text-decoration: none;
  background-image: linear-gradient(var(--teal), var(--teal));
  background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%;
  padding-bottom: 3px; transition: background-size .22s ease;
}
.cta-link:hover { background-size: 100% 2px; }

.cta-dir { font-family: var(--body); font-weight: 600; color: var(--teal); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.cta-dir span { transition: transform .18s ease; }
.cta-dir:hover span { transform: translateX(5px); }

/* ---------------- section furniture ---------------- */

.sec { padding: 62px 0; }
.sec--tint { background: var(--surface-2); }
.sec__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.sec__head h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(27px, 4.2vw, 42px); letter-spacing: -.028em;
  margin: 0; line-height: 1;
}
.sec__head .n { font-family: var(--mono); font-size: 13px; color: var(--ink-3); margin-left: auto; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--teal); margin: 0 0 10px; }

/* ---------------- category rail ---------------- */

.rail { display: flex; gap: 12px; overflow-x: auto; padding: 4px 0 16px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.rail::-webkit-scrollbar { height: 7px; }
.rail::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 4px; }
.rail__item {
  flex: 0 0 178px; scroll-snap-align: start;
  position: relative; border-radius: 4px; overflow: hidden;
  text-decoration: none; color: #fff; background: var(--ink);
  aspect-ratio: 4 / 3; display: block;
}
.rail__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: transform .3s ease, opacity .3s ease; }
.rail__item:hover img { transform: scale(1.05); opacity: .95; }
.rail__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(22,26,25,.9) 0%, rgba(22,26,25,.1) 62%); }
.rail__label { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2; }
.rail__label b { display: block; font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.rail__label span { font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.7); }

/* ---------------- menu + basket layout ---------------- */

.menu-grid { display: grid; grid-template-columns: 1fr var(--rail); gap: 34px; align-items: start; }
@media (max-width: 1000px) { .menu-grid { grid-template-columns: 1fr; } }

.cat { margin-bottom: 44px; scroll-margin-top: calc(var(--hdr) + var(--catbar) + 14px); }
/* ---------------- sticky category bar ----------------
   Lives inside the menu section, so it sticks under the header for exactly as
   long as the menu lasts and scrolls away with it. Opaque background because
   the dishes pass underneath. */

.catbar {
  position: sticky; top: var(--hdr); z-index: 30;
  height: var(--catbar);
  margin: 0 0 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
}
.catbar__scroll {
  display: flex; align-items: center; gap: 6px;
  height: 100%; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.catbar__scroll::-webkit-scrollbar { display: none; }
.catbar a {
  flex: none; text-decoration: none; white-space: nowrap;
  font-family: var(--display); font-weight: 700; font-size: 13px;
  padding: 6px 13px; border-radius: 999px;
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--rule-2);
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.catbar a:hover { color: var(--ink); border-color: var(--ink); }
.catbar a[aria-current="true"] {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
/* Edges fade so it reads as scrollable rather than clipped. */
.catbar::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 1px; width: 34px;
  background: linear-gradient(to right, rgba(229,233,232,0), var(--surface-2));
  pointer-events: none;
}

.cat__head { display: flex; align-items: baseline; gap: 12px; border-bottom: 3px solid var(--ink); padding-bottom: 8px; margin-bottom: 18px; }
.cat__head h3 { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 3.4vw, 32px); letter-spacing: -.028em; margin: 0; }
.cat__head .c { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-left: auto; }

.dishes { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 14px; }
@media (max-width: 620px) {
  .dishes { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .dish__body { padding: 10px 11px 12px; gap: 6px; }
  .dish__name { font-size: 14px; }
  .dish__price { font-size: 14px; }
  .dish__desc { font-size: 12.5px; line-height: 1.4; }
  .dish .add { font-size: 11.5px; padding: 6px 12px; letter-spacing: .03em; }
}

.dish {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 4px;
  display: flex; flex-direction: column; overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dish:hover { border-color: var(--rule-2); box-shadow: 0 6px 20px -14px rgba(22,26,25,.5); }
.dish__img {
  aspect-ratio: 4 / 3; width: 100%; object-fit: cover;
  background: var(--surface-2); display: block;
  /* The card is a column flexbox, so without this the image's flex base size is
     taken from the intrinsic height attribute (300px) and aspect-ratio never
     applies — every photo rendered as a tall crop that got worse as the card
     narrowed. flex-basis: content sizes it from the constrained width instead. */
  flex-grow: 0; flex-shrink: 0; flex-basis: content;
}
.dish__body { padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.dish__top { display: flex; align-items: baseline; gap: 10px; }
.dish__name { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -.015em; margin: 0; line-height: 1.2; }
.dish__price { font-family: var(--mono); font-weight: 500; font-size: 16px; color: var(--coral); margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dish__desc { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); margin: 0; }
.dish__tags { display: flex; flex-wrap: wrap; gap: 5px; }

/* Size buttons — one per printed size, so the choice is made in one tap
   instead of a dropdown. */
.dish__vars { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.add--var {
  margin-top: 0; align-self: auto;
  font-size: 12px; letter-spacing: .02em; padding: 6px 12px;
  text-transform: none;
}
@media (max-width: 620px) {
  .dish__vars { gap: 5px; }
  .dish .add--var { font-size: 11px; padding: 5px 9px; }
}
/* ---------------- list rows ----------------
   Sides, sauces and drinks. No photograph, because none of these items has a
   description either: the name and the price are the whole decision. */

.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px;
  align-items: center; padding: 11px 4px 11px 2px;
  border-bottom: 1px solid var(--rule);
}
.row:hover { background: var(--surface); }
.row__name {
  font-family: var(--display); font-weight: 700; font-size: 15px;
  letter-spacing: -.012em; display: flex; align-items: center; gap: 8px;
  min-width: 0; overflow-wrap: anywhere;
}
.row__price {
  font-family: var(--mono); font-weight: 500; font-size: 15px; color: var(--coral);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.add--sm {
  margin: 0; align-self: center; flex: none;
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 420px) {
  .row { gap: 9px; }
  .row__name { font-size: 14px; }
  .row__price { font-size: 14px; }
}

.tag { font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; padding: 2px 6px; border-radius: 2px; }
.tag--veg { background: var(--green-wash); color: var(--green); }
.tag--pickup { background: var(--teal-wash); color: var(--teal); }
.tag--alg { background: var(--coral-wash); color: var(--coral-ink); }

.add {
  margin-top: auto; align-self: flex-start;
  font-family: var(--display); font-weight: 700; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--coral); background: transparent; cursor: pointer;
  border: 1.5px solid var(--coral); border-radius: 999px;
  padding: 7px 16px; transition: background .14s ease, color .14s ease;
}
.add:hover { background: var(--coral); color: #fff; }
.add.is-added { background: var(--green); border-color: var(--green); color: #fff; }

/* price fly-to-basket */
.fly {
  position: fixed; z-index: 60; pointer-events: none;
  font-family: var(--mono); font-weight: 600; font-size: 15px; color: var(--coral-loud);
  transition: transform .62s cubic-bezier(.4,.1,.3,1), opacity .62s ease;
}

/* ---------------- basket rail ---------------- */

/* Clears the header and the sticky category bar above it. */
.basket { position: sticky; top: calc(var(--hdr) + var(--catbar) + 18px); }
/* On a phone the basket is a one-line bar, not a panel. It grew with every
   item until it owned most of the screen; now the bar stays 56px whatever is in
   it, and the full list opens as a sheet on top when you ask for it. */
.basket__peek, .basket__scrim, .basket__close { display: none; }

@media (max-width: 1000px) {
  .basket {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 48;
    border-radius: 0; transition: transform .28s ease;
  }
  .basket.is-empty { transform: translateY(100%); }

  .basket__peek {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 14px 16px; border: 0; cursor: pointer; text-align: left;
    background: var(--ink); color: #fff;
    font-family: var(--display); font-weight: 800; font-size: 15px;
    box-shadow: 0 -6px 26px -14px rgba(22,26,25,.7);
  }
  .basket__peekn {
    background: var(--coral-loud); color: var(--ink); border-radius: 999px;
    padding: 2px 10px; font-family: var(--mono); font-size: 13px; font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .basket__peektot {
    margin-left: auto; font-family: var(--mono); font-weight: 600; font-size: 17px;
    font-variant-numeric: tabular-nums;
  }

  /* The sheet sits directly above the bar and is out of flow, so the bar keeps
     its height no matter how long the order gets. */
  .basket__inner {
    position: absolute; left: 0; right: 0; bottom: 100%;
    max-height: 78vh; border-radius: 14px 14px 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
    transform: translateY(102%); visibility: hidden;
    /* Flip to visible immediately on open so the close button can take focus;
       delay the flip back to hidden until the slide-out has finished. */
    transition: transform .28s ease, visibility 0s linear .28s;
  }
  .basket.is-open .basket__inner {
    transform: translateY(0); visibility: visible;
    transition: transform .28s ease, visibility 0s linear 0s;
  }
  .basket__list { max-height: 48vh; overscroll-behavior: contain; }

  .basket__close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; margin: -4px -4px -4px 0;
    background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 999px;
    font-size: 14px; line-height: 1; cursor: pointer;
  }
  .basket__close:hover { background: rgba(255,255,255,.26); }
  .basket__count { margin-left: auto; }

  .basket__scrim {
    display: block; position: fixed; inset: 0; z-index: 47;
    background: rgba(22,26,25,.55); border: 0;
    opacity: 1; transition: opacity .22s ease;
  }
  .basket__scrim[hidden] { display: none; }
}
.basket__inner {
  background: var(--surface); border: 1px solid var(--rule-2); border-radius: 4px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 -6px 26px -18px rgba(22,26,25,.6);
}
.basket__head {
  background: var(--ink); color: #fff; padding: 13px 16px;
  display: flex; align-items: center; gap: 10px;
}
.basket__head h2 { font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: -.01em; margin: 0; }
.basket__count { font-family: var(--mono); font-size: 12px; color: var(--ink); background: var(--coral-loud); border-radius: 999px; padding: 1px 8px; margin-left: auto; }
.basket__list { list-style: none; margin: 0; padding: 0; overflow-y: auto; max-height: 44vh; }
.basket__list li { display: grid; grid-template-columns: 1fr auto auto; gap: 9px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.basket__nm { font-size: 13.5px; line-height: 1.3; }
.basket__nm small { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.basket__qty { display: flex; align-items: center; gap: 4px; }
.qbtn { width: 24px; height: 24px; border: 1px solid var(--rule-2); background: var(--surface); border-radius: 3px; cursor: pointer; font-family: var(--mono); font-size: 14px; line-height: 1; color: var(--ink); }
.qbtn:hover { border-color: var(--coral); color: var(--coral); }
.basket__n { font-family: var(--mono); font-size: 13px; min-width: 16px; text-align: center; font-variant-numeric: tabular-nums; }
.basket__ln { font-family: var(--mono); font-size: 13.5px; font-variant-numeric: tabular-nums; min-width: 62px; text-align: right; }
.basket__empty { padding: 22px 16px; color: var(--ink-3); font-size: 14px; }
.basket__foot { padding: 14px 16px 16px; border-top: 2px solid var(--ink); display: flex; flex-direction: column; gap: 12px; }
.basket__tot { display: flex; align-items: baseline; }
.basket__tot span { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .02em; text-transform: uppercase; }
.basket__tot b { margin-left: auto; font-family: var(--mono); font-weight: 600; font-size: 24px; font-variant-numeric: tabular-nums; }
.basket__note { font-size: 12px; color: var(--ink-3); line-height: 1.4; margin: 0; }

.cta-send {
  font-family: var(--display); font-weight: 800; font-size: 16px;
  background: var(--green-loud); color: #06301c; border: 0;
  padding: 15px 20px; border-radius: 3px; cursor: pointer;
  text-decoration: none; text-align: center; display: block;
  box-shadow: 0 3px 0 #0f6b41; transition: transform .1s ease, box-shadow .1s ease;
}
.cta-send:hover { background: #38c47d; }
.cta-send:active { transform: translateY(2px); box-shadow: 0 1px 0 #0f6b41; }
.cta-send[aria-disabled="true"] { background: var(--surface-2); color: var(--ink-3); box-shadow: none; cursor: not-allowed; }

/* ---------------- split panel ---------------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); border-radius: 4px; overflow: hidden; }
@media (max-width: 720px) { .split { grid-template-columns: 1fr; } }
.split > div { background: var(--surface); padding: 26px 24px; }
.split h3 { font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: -.02em; margin: 0 0 10px; }
.split p { margin: 0 0 12px; font-size: 14.5px; color: var(--ink-2); max-width: 46ch; }
.split .big { font-family: var(--mono); font-size: 30px; color: var(--coral); font-variant-numeric: tabular-nums; display: block; margin-bottom: 4px; }

/* ---------------- place ---------------- */

.place { display: grid; grid-template-columns: 1.05fr .95fr; gap: 36px; align-items: center; }
@media (max-width: 820px) { .place { grid-template-columns: 1fr; } }
.place img { width: 100%; border-radius: 4px; display: block; aspect-ratio: 4/3; object-fit: cover; }
.place p { font-size: 16px; line-height: 1.62; color: var(--ink-2); max-width: 52ch; }
.place p.lead { font-size: 19px; color: var(--ink); }

/* ---------------- contact ---------------- */

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
@media (max-width: 720px) { .contact { grid-template-columns: 1fr; } }
.dl { margin: 0; }
.dl div { display: flex; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.dl dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); min-width: 116px; padding-top: 2px; }
.dl dd { margin: 0; font-size: 15.5px; }
.dl dd a { color: var(--ink); text-decoration-color: var(--teal); text-underline-offset: 3px; }
.hours-row { display: flex; gap: 14px; font-variant-numeric: tabular-nums; }
.hours-row b { font-family: var(--mono); font-weight: 500; margin-left: auto; }
.hours-note { font-size: 12.5px; color: var(--ink-3); margin: 10px 0 0; }

/* ---------------- footer ---------------- */

.ftr { background: var(--ink); color: rgba(255,255,255,.62); padding: 40px 0 30px; font-size: 13.5px; }
.ftr__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
@media (max-width: 720px) { .ftr__grid { grid-template-columns: 1fr; } }
.ftr h4 { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin: 0 0 12px; }
.ftr a { color: rgba(255,255,255,.82); text-decoration: none; }
.ftr a:hover { color: var(--coral-loud); }
.ftr ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ftr__logo { height: 42px; width: auto; margin-bottom: 14px; display: block; }
.ftr__base { margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); font-family: var(--mono); font-size: 11.5px; color: rgba(255,255,255,.42); display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* ---------------- allergen note ---------------- */

.alg { background: var(--coral-wash); border-left: 3px solid var(--coral); padding: 16px 18px; border-radius: 0 3px 3px 0; }
.alg h3 { font-family: var(--display); font-weight: 800; font-size: 15px; margin: 0 0 6px; letter-spacing: -.01em; }
.alg p { margin: 0; font-size: 14px; color: var(--ink-2); max-width: 62ch; }

/* ---------------- back to top ---------------- */

.totop {
  position: fixed; right: 18px; z-index: 44;
  bottom: calc(var(--basket-h, 0px) + 18px);
  width: 46px; height: 46px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: var(--ink); cursor: pointer;
  border: 0; border-radius: 999px;
  box-shadow: 0 6px 22px -8px rgba(22,26,25,.55);
  transition: bottom .28s ease, opacity .2s ease, transform .2s ease;
}
.totop[hidden] { display: none; }
.totop svg { width: 21px; height: 21px; }
.totop:hover { transform: translateY(-2px); background: var(--coral); }
@media (max-width: 620px) { .totop { right: 12px; width: 42px; height: 42px; } }

/* The header takes programmatic focus when you jump back to the top. Keyboard
   users still get their ring; a mouse click should not paint one. */
.hdr:focus { outline: none; }
.hdr:focus-visible { outline: 3px solid var(--teal); outline-offset: -3px; }

/* Footnotes the printed menu carries under a section heading. */
.cat__note {
  font-size: 13.5px; color: var(--ink-2); font-style: italic;
  margin: -8px 0 16px;
}

/* ---------------- table booking ---------------- */

.book__lead { max-width: 56ch; margin: 0 0 24px; }
.book { max-width: 780px; }
.book__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.book label {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--display); font-weight: 700; font-size: 13px;
  letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2);
}
.book__wide { grid-column: 1 / -1; }
.book input {
  font-family: var(--body); font-size: 16px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule-2);
  border-radius: 3px; padding: 11px 12px; width: 100%;
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
.book input:hover { border-color: var(--ink-3); }
.book__acts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 20px;
}
.book__acts .cta-order:disabled { opacity: .5; cursor: not-allowed; box-shadow: 0 4px 0 var(--coral-ink); }
.book__or { font-family: var(--mono); font-size: 14px; color: var(--ink-2); }
.book__or a { color: var(--teal); }
.book__note { font-size: 13.5px; color: var(--ink-3); margin: 12px 0 0; }
.book__note:empty { display: none; }

@media (max-width: 720px) { .book__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 430px) { .book__grid { grid-template-columns: 1fr; } }

/* Third hero CTA. Booking sits below a very long menu, so it needs a way in
   from the top of the page rather than a scroll to the bottom. */
.cta-book {
  font-family: var(--display); font-weight: 700; font-size: 15px;
  letter-spacing: .03em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  padding: 14px 22px; border-radius: 3px;
  box-shadow: inset 0 0 0 1.5px var(--teal-loud);
  display: inline-block; transition: background .15s ease;
}
.cta-book:hover { background: var(--teal-loud); color: var(--ink); }

/* The booking summary: nothing was submitted, so this is what you read out. */
.book__out {
  margin-top: 22px; padding: 20px 22px;
  background: var(--surface); border: 1px solid var(--rule-2);
  border-left: 4px solid var(--teal); border-radius: 4px;
  max-width: 520px;
}
.book__out[hidden] { display: none; }
.book__out:focus { outline: none; }
.book__out:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.book__outhead {
  font-family: var(--display); font-weight: 800; font-size: 17px;
  margin: 0 0 14px; letter-spacing: -.015em;
}
.book__out dl {
  margin: 0 0 18px; display: grid; grid-template-columns: auto 1fr;
  gap: 6px 16px; font-size: 15px;
}
.book__out dt {
  font-family: var(--mono); font-size: 12px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3); align-self: baseline;
}
.book__out dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }