/* ============================================================================
   Unique – Griechische Cuisine, Backnang
   "Warm Aegean" design system. One stylesheet, no framework, no build step.
   ========================================================================= */

/* ---- Self-hosted display face (no request ever leaves this domain) ------- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-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;
}

/* ---- Tokens ------------------------------------------------------------- */
:root {
  --c-bg:         #FAF7F2;
  --c-surface:    #FFFFFF;
  --c-stone:      #EFE9DF;
  --c-stone-2:    #E2D9CB;
  --c-ink:        #1C2A35;
  --c-ink-soft:   #4A5A66;
  --c-aegean:     #14527A;
  --c-aegean-dk:  #0E3C5B;
  --c-terracotta: #C2703D;
  --c-olive:      #6B7A52;
  --c-line:       #DCD3C6;

  --ff-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --ff-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --step--1: clamp(0.86rem, 0.83rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1.03rem, 0.99rem + 0.20vw, 1.15rem);
  --step-1:  clamp(1.22rem, 1.14rem + 0.40vw, 1.48rem);
  --step-2:  clamp(1.52rem, 1.36rem + 0.80vw, 2.05rem);
  --step-3:  clamp(1.95rem, 1.63rem + 1.55vw, 3.00rem);
  --step-4:  clamp(2.45rem, 1.85rem + 2.95vw, 4.40rem);

  --sp-1: 0.5rem;  --sp-2: 0.875rem; --sp-3: 1.25rem; --sp-4: 2rem;
  --sp-5: 3rem;    --sp-6: 4.5rem;   --sp-7: 7rem;

  --w-text: 62ch;
  --w-page: 1200px;
  --radius: 3px;
  --shadow: 0 1px 2px rgb(28 42 53 / 6%), 0 8px 28px -12px rgb(28 42 53 / 22%);
  --ring: 0 0 0 3px rgb(20 82 122 / 35%);
}

/* ---- Reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--ff-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: 1.08;
  margin: 0 0 var(--sp-3);
  letter-spacing: -0.005em;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p  { margin: 0 0 var(--sp-3); max-width: var(--w-text); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-aegean); text-underline-offset: 3px; }
a:hover { color: var(--c-terracotta); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius); }

.skip {
  position: absolute; left: var(--sp-3); top: -100px; z-index: 200;
  background: var(--c-aegean); color: #fff; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius); transition: top .15s;
}
.skip:focus { top: var(--sp-3); color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Layout ------------------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--w-page)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, 780px); margin-inline: auto; }
.section { padding-block: var(--sp-6); }
.section--tight { padding-block: var(--sp-5); }
.section--stone { background: var(--c-stone); }
.section--ink { background: var(--c-ink); color: var(--c-bg); }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--ink a { color: #EBC9A8; }

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--c-ink-soft); font-family: var(--ff-display); }

.eyebrow {
  font-size: var(--step--1); letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600; color: var(--c-terracotta); margin: 0 0 var(--sp-2);
}
.section--ink .eyebrow { color: #E0A575; }

/* Greek meander divider, redrawn from the printed menu's border */
.meander {
  height: 14px; border: 0; margin: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='14' viewBox='0 0 56 14'%3E%3Cpath d='M0 12h12V4h8v8h8V4h8v8h8V0h4' fill='none' stroke='%23C2703D' stroke-width='1.6' stroke-opacity='.55'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: center;
}

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--c-aegean); --btn-fg: #fff; --btn-bd: var(--c-aegean);
  display: inline-flex; align-items: center; gap: .55em;
  padding: .85em 1.6em; border: 1px solid var(--btn-bd); border-radius: var(--radius);
  background: var(--btn-bg); color: var(--btn-fg);
  font: inherit; font-weight: 600; font-size: var(--step--1);
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: background .18s, color .18s, transform .18s;
}
.btn:hover { background: var(--c-aegean-dk); border-color: var(--c-aegean-dk); color: #fff; transform: translateY(-1px); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-ink); --btn-bd: var(--c-line); }
.btn--ghost:hover { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.btn--light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgb(255 255 255 / 45%); }
.btn--light:hover { background: #fff; border-color: #fff; color: var(--c-ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* ---- Header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgb(250 247 242 / 92%);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-line);
}
.site-header__inner { display: flex; align-items: center; gap: var(--sp-3); min-height: 68px; }

.brand { display: flex; flex-direction: column; text-decoration: none; color: inherit; line-height: 1; margin-right: auto; }
.brand__name { font-family: var(--ff-display); font-size: 1.6rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.brand__sub { font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--c-ink-soft); margin-top: .3em; }

.nav { display: flex; align-items: center; gap: var(--sp-3); }
.nav a { color: var(--c-ink); text-decoration: none; font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase; font-weight: 500; padding: .4em 0; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--c-aegean); border-bottom-color: var(--c-terracotta); }
/* `.nav a` (0,1,1) outranks `.btn` (0,1,0), so the button colours must be
   restated here or the CTA renders dark-on-blue. */
.nav a.btn { color: var(--btn-fg); text-transform: uppercase; border-bottom-color: var(--btn-bd); }
.nav a.btn:hover { color: #fff; border-bottom-color: var(--c-aegean-dk); }

.nav-toggle { display: none; background: none; border: 1px solid var(--c-line); border-radius: var(--radius); padding: .55em .7em; cursor: pointer; color: var(--c-ink); }
.nav-toggle svg { display: block; }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 68px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--c-bg); border-bottom: 1px solid var(--c-line);
    padding: var(--sp-2) 1.25rem var(--sp-4);
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
    max-height: calc(100dvh - 68px); overflow-y: auto;
  }
  .nav[data-open='true'] { transform: none; opacity: 1; pointer-events: auto; }
  .nav a { padding: .9em 0; border-bottom: 1px solid var(--c-line); font-size: var(--step-0); }
  .nav .btn { margin-top: var(--sp-3); justify-content: center; border-bottom: 1px solid var(--c-aegean); }
}

/* ---- Open-now badge ----------------------------------------------------- */
.status {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: var(--step--1); font-weight: 600; letter-spacing: .04em;
  padding: .35em .85em; border-radius: 999px;
  background: var(--c-stone); color: var(--c-ink-soft); border: 1px solid var(--c-line);
}
.status__dot { width: .55em; height: .55em; border-radius: 50%; background: currentColor; flex: none; }
.status[data-state='open']   { background: #E6F0E8; color: #2E6B3E; border-color: #BFD9C6; }
.status[data-state='closed'] { background: #F5E7E2; color: #9A462B; border-color: #E4C9BE; }
.status:not([data-state]) { display: none; }
.hero .status { background: rgb(255 255 255 / 15%); color: #fff; border-color: rgb(255 255 255 / 30%); backdrop-filter: blur(4px); }
.hero .status[data-state='open']   { background: rgb(126 196 143 / 22%); color: #D8F0DE; border-color: rgb(190 230 200 / 45%); }
.hero .status[data-state='closed'] { background: rgb(220 150 120 / 22%); color: #F6DCD2; border-color: rgb(235 190 170 / 45%); }

/* ---- Hero --------------------------------------------------------------- */
.hero { position: relative; display: grid; align-items: end; min-height: clamp(460px, 78svh, 760px); color: #fff; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(16 28 38 / 55%) 0%, rgb(16 28 38 / 30%) 38%, rgb(16 28 38 / 82%) 100%);
}
.hero__body { padding-block: var(--sp-6) var(--sp-5); }
.hero h1 { color: #fff; max-width: 15ch; text-shadow: 0 2px 24px rgb(0 0 0 / 35%); }
.hero__sub { font-family: var(--ff-display); font-size: var(--step-1); max-width: 46ch; color: rgb(255 255 255 / 92%); margin-bottom: var(--sp-4); text-shadow: 0 1px 12px rgb(0 0 0 / 45%); }
/* Terracotta on a photo fails contrast — the hero eyebrow goes warm-white instead. */
.hero .eyebrow { color: #F3D9C4; text-shadow: 0 1px 10px rgb(0 0 0 / 65%); }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; margin-bottom: var(--sp-4); font-size: var(--step--1); }

/* ---- Cards / grids ------------------------------------------------------ */
.grid { display: grid; gap: var(--sp-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

.card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.card__body { padding: var(--sp-3); }
.card__body h3 { margin-bottom: .35em; }
.card__body p { margin: 0; color: var(--c-ink-soft); font-size: var(--step--1); }

.split { display: grid; gap: var(--sp-5); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.split__media img { border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.split--reverse .split__media { order: -1; }
@media (min-width: 900px) { .split--reverse .split__media { order: 1; } }

/* ============================================================================
   Motion
   Every effect below is opt-in via .js (set by head.js) so the site is fully
   visible with JavaScript disabled, and every effect is switched off under
   prefers-reduced-motion.
   ========================================================================= */

/* ---- Scroll reveal ------------------------------------------------------ */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms),
              transform .75s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; will-change: auto; }

/* Children of a revealed grid come in one after another. */
.js .reveal-group > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}
.js .reveal-group.is-in > * { opacity: 1; transform: none; }
.js .reveal-group.is-in > :nth-child(1) { transition-delay: 0ms; }
.js .reveal-group.is-in > :nth-child(2) { transition-delay: 90ms; }
.js .reveal-group.is-in > :nth-child(3) { transition-delay: 180ms; }
.js .reveal-group.is-in > :nth-child(4) { transition-delay: 270ms; }
.js .reveal-group.is-in > :nth-child(5) { transition-delay: 360ms; }
.js .reveal-group.is-in > :nth-child(6) { transition-delay: 450ms; }

/* ---- Hero entrance + slow drift ----------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes kenburns { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.15) translate3d(0, -1.2%, 0); } }

.js .hero__body > * { animation: rise .9s cubic-bezier(.16, 1, .3, 1) backwards; }
.js .hero__body > :nth-child(1) { animation-delay: .10s; }
.js .hero__body > :nth-child(2) { animation-delay: .20s; }
.js .hero__body > :nth-child(3) { animation-delay: .32s; }
.js .hero__body > :nth-child(4) { animation-delay: .44s; }
.js .hero__body > :nth-child(5) { animation-delay: .54s; }

.hero__media img { animation: kenburns 26s ease-out both alternate infinite; }

/* ---- Hover / interaction ------------------------------------------------ */
.card { transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease, border-color .35s ease; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--c-stone-2); }
.card img { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.card:hover img { transform: scale(1.045); }

.review { transition: transform .35s cubic-bezier(.16, 1, .3, 1), background-color .35s ease; }
.review:hover { transform: translateY(-3px); }

.split__media img { transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.split__media:hover img { transform: scale(1.02); }

.menu-item { transition: background-color .2s ease; }
.menu-item:hover { background: rgb(20 82 122 / 3.5%); }

.menu-nav a { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.menu-nav a:hover { transform: translateY(-1px); }

.btn:active { transform: translateY(0) scale(.985); }

/* Nav underline grows from the centre instead of snapping on. */
.nav a { position: relative; }
.nav a::after {
  content: ''; position: absolute; left: 50%; right: 50%; bottom: -1px; height: 1px;
  background: var(--c-terracotta); transition: left .28s ease, right .28s ease;
}
.nav a:hover::after, .nav a[aria-current='page']::after { left: 0; right: 0; }
.nav a.btn::after { display: none; }

/* Status dot gently pulses while the restaurant is open. */
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
.status[data-state='open'] .status__dot { animation: pulse 2.4s ease-in-out infinite; }

/* ---- Respect the user's setting ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal-group > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .hero__body > *,
  .hero__media img,
  .status[data-state='open'] .status__dot { animation: none !important; }
  .card:hover, .review:hover, .menu-nav a:hover { transform: none !important; }
  .card:hover img, .split__media:hover img { transform: none !important; }
}

/* ---- Inline icons -------------------------------------------------------
   Inline SVG has no intrinsic size, so without this it expands to fill its
   container. Every icon() call emits .ico, so this is the single guard. */
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.16em; }

/* ---- Facts list --------------------------------------------------------- */
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.facts li { display: grid; grid-template-columns: 1.6em 1fr; gap: .6em; align-items: start; }
.facts .ico { margin-top: .28em; color: var(--c-terracotta); }

.card__body h3 .ico { color: var(--c-terracotta); margin-right: .15em; }
.menu-note .ico { color: var(--c-terracotta); margin-right: .2em; }
.map-consent .ico { width: 1.8em; height: 1.8em; color: var(--c-terracotta); }

/* ---- Reviews ------------------------------------------------------------ */
.review { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.review blockquote { margin: 0; font-family: var(--ff-display); font-size: var(--step-1); line-height: 1.42; }
.review figcaption { font-size: var(--step--1); color: var(--c-ink-soft); margin-top: auto; }
.review__name { font-weight: 600; color: var(--c-ink); display: block; }
.stars { color: var(--c-terracotta); letter-spacing: .12em; font-size: .95rem; }
.review-note { font-size: var(--step--1); color: var(--c-ink-soft); max-width: 70ch; }
.section--ink .review { background: rgb(255 255 255 / 6%); border-color: rgb(255 255 255 / 14%); }
.section--ink .review blockquote { color: #fff; }
.section--ink .review figcaption { color: rgb(250 247 242 / 72%); }
.section--ink .review__name { color: #fff; }
.section--ink .review-note { color: rgb(250 247 242 / 62%); }

/* ---- Gallery ------------------------------------------------------------ */
.gallery { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.gallery button { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius); overflow: hidden; display: block; }
.gallery img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform .4s ease, filter .4s ease; }
.gallery button:hover img { transform: scale(1.035); filter: brightness(1.04); }

dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96svh; }
dialog.lightbox::backdrop { background: rgb(12 20 28 / 88%); backdrop-filter: blur(3px); }
dialog.lightbox img { max-width: 96vw; max-height: 88svh; width: auto; height: auto; border-radius: var(--radius); }
dialog.lightbox figcaption { color: rgb(255 255 255 / 85%); font-size: var(--step--1); padding: var(--sp-2) 0 0; text-align: center; }
.lightbox__close { position: fixed; top: 1rem; right: 1rem; background: rgb(255 255 255 / 12%); color: #fff; border: 1px solid rgb(255 255 255 / 30%); border-radius: 50%; width: 2.6rem; height: 2.6rem; font-size: 1.3rem; cursor: pointer; line-height: 1; }

/* ---- Map consent -------------------------------------------------------- */
.map-consent { position: relative; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; background: var(--c-stone); min-height: 320px; display: grid; place-items: center; text-align: center; padding: var(--sp-4); }
.map-consent__inner { max-width: 44ch; display: grid; gap: var(--sp-2); justify-items: center; }
.map-consent p { font-size: var(--step--1); color: var(--c-ink-soft); margin: 0; }
.map-consent iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }
.map-consent[data-loaded='true'] { padding: 0; display: block; }

/* ---- Menu (speisekarte) ------------------------------------------------- */
.menu-nav { position: sticky; top: 68px; z-index: 50; background: rgb(250 247 242 / 95%); backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-line); padding-block: var(--sp-2); }
.menu-nav ul { display: flex; gap: var(--sp-2); overflow-x: auto; list-style: none; margin: 0; padding: 0 0 .25rem; scrollbar-width: thin; }
.menu-nav a { white-space: nowrap; font-size: var(--step--1); text-decoration: none; color: var(--c-ink-soft); border: 1px solid var(--c-line); border-radius: 999px; padding: .4em 1em; background: var(--c-surface); }
.menu-nav a:hover { color: #fff; background: var(--c-aegean); border-color: var(--c-aegean); }

.menu-search { display: flex; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-4); }
.menu-search input { flex: 1; max-width: 26rem; font: inherit; font-size: var(--step-0); padding: .7em 1em; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-surface); color: inherit; }
.menu-search input::placeholder { color: #97A2AB; }

.menu-cat { margin-bottom: var(--sp-6); scroll-margin-top: 130px; }
.menu-cat > h2 { margin-bottom: .2em; }
.menu-cat__sub { font-size: var(--step--1); color: var(--c-ink-soft); letter-spacing: .04em; margin-bottom: var(--sp-3); }
.menu-group { margin-top: var(--sp-4); }
.menu-group h3 { font-family: var(--ff-body); font-size: var(--step--1); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-terracotta); border-bottom: 1px solid var(--c-line); padding-bottom: .5em; margin-bottom: var(--sp-2); }

.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-item { display: grid; grid-template-columns: 2.6em 1fr auto; gap: .2em var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-line); align-items: baseline; }
.menu-item:last-child { border-bottom: 0; }
.menu-item__nr { color: var(--c-ink-soft); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.menu-item__name { font-weight: 600; margin: 0; max-width: none; }
.menu-item__price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--c-aegean); }
.menu-item__desc { grid-column: 2 / -1; margin: .15em 0 0; font-size: var(--step--1); color: var(--c-ink-soft); max-width: 62ch; }
.menu-item__prices { grid-column: 2 / -1; margin: .3em 0 0; font-size: var(--step--1); color: var(--c-ink-soft); display: flex; flex-wrap: wrap; gap: .35em 1.1em; list-style: none; padding: 0; }
.menu-item__prices b { color: var(--c-aegean); font-variant-numeric: tabular-nums; }
.menu-item sup { font-size: .68em; color: var(--c-ink-soft); font-weight: 400; }
.menu-item[hidden] { display: none; }

.menu-note { background: var(--c-stone); border-left: 3px solid var(--c-terracotta); padding: var(--sp-3); font-size: var(--step--1); border-radius: 0 var(--radius) var(--radius) 0; }
.menu-note p:last-child { margin-bottom: 0; }
.menu-empty { padding: var(--sp-4); text-align: center; color: var(--c-ink-soft); }

.legend { columns: 2 18rem; gap: var(--sp-4); font-size: var(--step--1); color: var(--c-ink-soft); list-style: none; padding: 0; margin: 0; }
.legend li { break-inside: avoid; margin-bottom: .4em; }
.legend b { color: var(--c-ink); }

/* ---- FAQ ---------------------------------------------------------------- */
.faq { border-top: 1px solid var(--c-line); }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__item summary {
  cursor: pointer; list-style: none; padding: var(--sp-3) 2.2rem var(--sp-3) 0;
  font-family: var(--ff-display); font-size: var(--step-1); line-height: 1.3;
  position: relative; transition: color .2s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--c-aegean); }
.faq__item summary::after {
  content: ''; position: absolute; right: .35rem; top: 50%; width: .62rem; height: .62rem;
  border-right: 2px solid var(--c-terracotta); border-bottom: 2px solid var(--c-terracotta);
  transform: translateY(-65%) rotate(45deg); transition: transform .25s ease;
}
.faq__item[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq__item p { margin: 0 0 var(--sp-3); color: var(--c-ink-soft); max-width: 64ch; }

/* ---- Hours table -------------------------------------------------------- */
.hours { width: 100%; border-collapse: collapse; max-width: 30rem; }
.hours th, .hours td { text-align: left; padding: .55em 0; border-bottom: 1px solid var(--c-line); font-weight: 400; font-variant-numeric: tabular-nums; }
.hours th { font-weight: 600; width: 8.5em; }
.hours tr[data-today='true'] th, .hours tr[data-today='true'] td { color: var(--c-aegean); font-weight: 700; }
.hours .closed { color: var(--c-terracotta); }
.section--ink .hours th, .section--ink .hours td { border-bottom-color: rgb(255 255 255 / 15%); }
.section--ink .hours tr[data-today='true'] th, .section--ink .hours tr[data-today='true'] td { color: #EBC9A8; }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { background: var(--c-ink); color: rgb(250 247 242 / 78%); padding-block: var(--sp-5) var(--sp-4); font-size: var(--step--1); }
.site-footer h3 { color: #fff; font-family: var(--ff-body); font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--sp-2); }
.site-footer a { color: rgb(250 247 242 / 88%); text-decoration: none; }
.site-footer a:hover { color: #EBC9A8; text-decoration: underline; }
.site-footer address { font-style: normal; }
.footer-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-bottom: var(--sp-4); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; }
.footer-bottom { border-top: 1px solid rgb(255 255 255 / 14%); padding-top: var(--sp-3); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); justify-content: space-between; color: rgb(250 247 242 / 55%); }
.footer-bottom nav { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.footer-bottom .credit { color: rgb(250 247 242 / 60%); transition: color .2s ease; }
.footer-bottom .credit strong { color: rgb(250 247 242 / 88%); font-weight: 600; }
.footer-bottom .credit:hover { color: #EBC9A8; text-decoration: none; }
.footer-bottom .credit:hover strong { color: #EBC9A8; }

/* ---- Sticky mobile call bar --------------------------------------------- */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; gap: 1px; background: var(--c-line); border-top: 1px solid var(--c-line); }
.callbar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: .5em; padding: .95em .5em; background: var(--c-surface); color: var(--c-ink); text-decoration: none; font-size: var(--step--1); font-weight: 600; }
.callbar a.is-primary { background: var(--c-aegean); color: #fff; }
.callbar svg { width: 1.05em; height: 1.05em; }
@media (max-width: 700px) {
  .callbar { display: flex; }
  body { padding-bottom: 3.6rem; }
  .menu-nav { top: 60px; }
}

/* ---- Legal / prose pages ------------------------------------------------ */
.prose h2 { font-size: var(--step-2); margin-top: var(--sp-5); }
.prose h3 { font-size: var(--step-1); margin-top: var(--sp-4); }
.prose ul { max-width: var(--w-text); padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
.prose dl { max-width: var(--w-text); }
.prose dt { font-weight: 600; margin-top: var(--sp-2); }
.prose dd { margin: 0 0 .4em; color: var(--c-ink-soft); }

/* Placeholder marker — deploy.ps1 refuses to publish live while any of these remain */
.todo {
  background: #FFF3CD; color: #6B4A00; border: 1px dashed #C9A227;
  padding: .1em .45em; border-radius: 2px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em; font-weight: 600;
}

/* ---- Print -------------------------------------------------------------- */
@media print {
  .site-header, .callbar, .menu-nav, .menu-search, .site-footer, .hero, .btn { display: none !important; }
  body { background: #fff; font-size: 10.5pt; }
  .menu-cat { break-inside: avoid; margin-bottom: 1.2rem; }
  .menu-item { break-inside: avoid; }
  a[href]::after { content: ''; }
}