/* ==========================================================================
   THE TEAL MONKEY — design system
   Direction: "the dark room". One green-black ground running the whole site,
   lit things in it (photographs, cocktails, portraits). Cream "paper" for the
   menus so they read like the printed cards. One brass accent: the action.
   ========================================================================== */

@font-face { font-family: 'Fraunces'; src: url(/fonts/fraunces.woff2) format('woff2'); font-weight: 300 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url(/fonts/hanken.woff2) format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }

:root {
  /* colour roles */
  --bg: #0c1b19;          /* green-black ground, from the booths and ceiling */
  --surface: #132926;     /* one tone step up */
  --field: #0e3f3b;       /* the brand teal as a field */
  --field-2: #3a171b;     /* winter field for Christmas */
  --ink: #efe7d6;         /* cream, lifted, never pure white */
  --muted: #c3baa6;       /* secondary text — 9:1 on --bg */
  --accent: #e3ac57;      /* brass, from the lamps — the action colour */
  --accent-hi: #f0c27a;
  --accent-ink: #1b1306;
  --teal: #5cc2b6;        /* links on dark */
  --paper: #f4eee2;       /* menu card */
  --paper-2: #ebe2d0;
  --paper-ink: #132f2b;
  --paper-muted: #475651;
  --paper-accent: #0d5c56;

  /* type */
  --f-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-text: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-xl: clamp(2.75rem, 1.2rem + 6.6vw, 7.25rem);   /* hero */
  --t-l: clamp(2.1rem, 1.4rem + 3vw, 4rem);           /* page + section headings */
  --t-m: clamp(1.3rem, 1.1rem + .8vw, 1.75rem);       /* statements, h3 */
  --t-s: 1.0625rem;                                   /* 17px body */
  --t-xs: .875rem;                                    /* 14px small */

  /* space */
  --m: clamp(16px, 4vw, 56px);            /* page margin */
  --gap: clamp(16px, 2.2vw, 32px);
  --sec: clamp(88px, 11vw, 176px);        /* between sections */
  --max: 1440px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --hdr-h: 72px;
  /* left/right edge of the 1440 content column, usable inside full-width blocks */
  --edge: max(var(--m), calc((100% - var(--max)) / 2 + var(--m)));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 16px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--t-s)/1.6 var(--f-text);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
p a, li a, dd a, .plain a, address a, .faq__a a { color: var(--teal); }
p, ul, ol, dl, figure { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }
.sr-only { 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: 8px; top: -60px; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 10px 16px; font-weight: 600; }
.skip:focus { top: 8px; }
html:not(.js) .js-only { display: none !important; }

/* ── type roles ─────────────────────────────────────────────────────────── */
.h1, .h2, .hero__h, .panel__h, .ftr__name {
  font-family: var(--f-display); font-weight: 340; letter-spacing: -.025em; line-height: 1.02;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
.h1, .h2 { font-size: var(--t-l); max-width: 18ch; }
.h3 { font-family: var(--f-display); font-size: var(--t-m); line-height: 1.2; font-weight: 400; letter-spacing: -.01em; }
.statement { font-family: var(--f-display); font-size: var(--t-m); line-height: 1.35; font-weight: 340; max-width: 34ch; }
small, .form__small { font-size: var(--t-xs); color: var(--muted); }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: 0 26px; border: 0; border-radius: 0;
  background: var(--accent); color: var(--accent-ink);
  font: 600 1rem/1 var(--f-text); text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--ease), transform .2s var(--ease), color .2s;
}
.btn:hover { background: var(--accent-hi); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--alt { background: var(--surface); color: var(--ink); }
.btn--alt:hover { background: var(--field); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: .95rem; }
.linkish { background: none; border: 0; padding: 0; color: var(--teal); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; font-size: inherit; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ── header ─────────────────────────────────────────────────────────────── */
.hdr {
  position: sticky; top: 0; z-index: 50; height: var(--hdr-h);
  display: flex; align-items: center; gap: 24px; padding: 0 var(--edge);
  background: var(--bg); transition: transform .3s var(--ease);
}
.hdr.is-hidden { transform: translateY(-100%); }
.hdr__logo img { height: 46px; width: auto; }
.hdr__nav { margin-left: auto; }
.hdr__nav ul { display: flex; gap: clamp(16px, 2.2vw, 34px); list-style: none; padding: 0; }
.hdr__nav a { text-decoration: none; font-weight: 500; padding: 8px 0; color: var(--ink); transition: color .2s; }
.hdr__nav a:hover, .hdr__nav a[aria-current] { color: var(--accent); }
.hdr__actions { display: flex; align-items: center; gap: 12px; }
.hdr__toggle { display: none; width: 48px; height: 48px; background: var(--surface); border: 0; cursor: pointer; position: relative; }
.burger, .burger::before, .burger::after { position: absolute; left: 13px; width: 22px; height: 2px; background: var(--ink); content: ''; transition: transform .25s var(--ease), opacity .2s; }
.burger { top: 23px; } .burger::before { left: 0; top: -7px; } .burger::after { left: 0; top: 7px; }
[aria-expanded="true"] .burger { background: transparent; }
[aria-expanded="true"] .burger::before { transform: translateY(7px) rotate(45deg); }
[aria-expanded="true"] .burger::after { transform: translateY(-7px) rotate(-45deg); }
.drawer { position: fixed; inset: var(--hdr-h) 0 0; z-index: 49; background: var(--bg); padding: 24px var(--m) 120px; overflow-y: auto; }
.drawer__main { list-style: none; padding: 0; }
.drawer__main a { display: block; padding: 10px 0; font-family: var(--f-display); font-size: 2rem; line-height: 1.15; text-decoration: none; }
.drawer__meta { margin-top: 32px; color: var(--muted); }
.drawer__meta a { color: var(--ink); }
@media (max-width: 959px) {
  .hdr__nav { display: none; }
  .hdr__toggle { display: block; }
  .hdr__actions { margin-left: auto; }
}
@media (max-width: 420px) { .hdr__logo img { height: 38px; } .hdr .btn--sm { padding: 0 14px; } }

/* mobile quick bar */
.mbar { display: none; }
@media (max-width: 759px) {
  .mbar {
    display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--surface); padding-bottom: env(safe-area-inset-bottom);
  }
  .mbar a { display: flex; align-items: center; justify-content: center; min-height: 56px; text-decoration: none; font-weight: 600; font-size: .95rem; }
  .mbar__book { background: var(--accent); color: var(--accent-ink); }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}

/* ── shared layout ─────────────────────────────────────────────────────── */
main > section, main > header, main > nav, main > div, main > article { margin-left: auto; margin-right: auto; max-width: var(--max); padding-left: var(--m); padding-right: var(--m); }
main > * + * { margin-top: var(--sec); }
main > .mswitch, main > .mswitch + .paper { margin-top: 0; }

/* hero */
/* Hero: text on the content edge, photo bleeding off the right edge, both the height of the screen */
.hero { max-width: none !important; padding: 0 !important; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; height: clamp(560px, calc(100svh - var(--hdr-h)), 980px); }
.hero__text { grid-column: 1; align-self: center; padding: 32px clamp(32px, 4vw, 72px) 48px max(var(--m), calc((200% - var(--max)) / 2 + var(--m))); position: relative; z-index: 2; } /* 200% = full width: the text sits in one of two equal columns */
.hero__h { font-size: min(var(--t-xl), 5.2vw); max-width: 13ch; }
@media (max-width: 899px) { .hero__h { font-size: var(--t-xl); } }
.hero__lede { margin: 28px 0 32px; max-width: 40ch; font-size: 1.15rem; color: var(--ink); }
.hero__links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 24px; }
.hero__links a { color: var(--ink); font-weight: 500; }
.hero__links a:hover { color: var(--accent); }
.hero__status { margin-top: 20px; }
.hero__pic { grid-column: 2; height: 100%; overflow: hidden; margin: 0; }
.hero__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; filter: brightness(1.06) contrast(1.03); animation: drift 14s var(--ease) both; }
@keyframes drift { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (max-width: 899px) {
  .hero { grid-template-columns: 1fr; height: auto; }
  .hero__text, .hero__pic { grid-column: 1; }
  .hero__text { padding: clamp(16px, 3vw, 40px) var(--m) 40px; }
  .hero__pic { height: 62svh; }
}

.open-status { color: var(--muted); font-size: .98rem; }
.open-status strong { color: var(--ink); font-weight: 600; }
.open-status .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); margin-right: 8px; vertical-align: 1px; }
.open-status.is-open .dot { background: #6fd39a; }
.open-status a { color: var(--muted); }

/* intro: picture + statement */
.intro { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: center; }
.intro__pic { grid-column: 1 / span 5; aspect-ratio: 4 / 5; overflow: hidden; }
.intro__pic img { width: 100%; height: 100%; object-fit: cover; }
.intro__text { grid-column: 7 / span 6; display: grid; gap: 28px; }
.intro__text > p:not(.statement) { max-width: 52ch; }
@media (max-width: 899px) { .intro { grid-template-columns: 1fr; } .intro__pic, .intro__text { grid-column: 1; } .intro__pic { aspect-ratio: 4 / 3; } }

/* ── tapas deal builder (the live thing) ─────────────────────────────── */
.tapas { background: var(--surface); padding-top: clamp(32px, 5vw, 64px) !important; padding-bottom: clamp(32px, 5vw, 64px) !important; }
.tapas__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 40px; margin-bottom: 32px; }
.tapas__head p { font-size: 1.1rem; }
.tapas__form { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px 48px; }
.tapas fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.tapas legend { font-family: var(--f-display); font-size: var(--t-m); margin-bottom: 14px; padding: 0; }
.tapas legend span { font-family: var(--f-text); font-size: 1rem; color: var(--muted); }
.tapas__plates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tapas__plates legend { grid-column: 1 / -1; }
.tapas__gt { color: var(--muted); font-size: var(--t-xs); margin-bottom: 8px; font-weight: 600; }
.tapas__side { display: grid; gap: 28px; align-content: start; }
.tapas__out { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px; background: var(--field); padding: 24px 28px; }
.tapas__price { font-family: var(--f-display); font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: 1; color: var(--accent); }
.tapas__sum { max-width: 60ch; }
.tapas__small { margin-top: 16px; color: var(--muted); font-size: var(--t-xs); }
.chip { display: flex; margin: 0 0 6px; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: block; width: 100%; padding: 11px 14px; background: var(--bg); font-size: .95rem; line-height: 1.3; transition: background-color .15s, color .15s; }
.chip span em { font-style: normal; color: var(--accent); white-space: nowrap; }
.chip:hover span { background: #0f2421; }
.chip input:checked + span { background: var(--accent); color: var(--accent-ink); }
.chip input:checked + span em { color: var(--accent-ink); }
.chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.chip input:disabled + span { opacity: .45; cursor: not-allowed; }
.tapas__side .chip { display: inline-flex; margin: 0 6px 6px 0; }
.tapas__side .chip span { width: auto; }
@media (max-width: 899px) { .tapas__form { grid-template-columns: 1fr; } .tapas__plates { grid-template-columns: 1fr; } }
@media (min-width: 600px) and (max-width: 899px) { .tapas__plates { grid-template-columns: 1fr 1fr; } }

/* ── index with preview (signature move) ───────────────────────────── */
.index { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: start; }
.index__pic { grid-column: 1 / span 5; position: sticky; top: calc(var(--hdr-h) + 6vh); aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }
.index__frame { position: absolute; inset: 0; opacity: 0; transition: opacity .3s var(--ease), transform .6s var(--ease); transform: scale(1.03); }
.index__frame.is-on { opacity: 1; transform: none; }
.index__frame img { width: 100%; height: 100%; object-fit: cover; }
.index__list { grid-column: 7 / span 6; }
.index__list .h2 { margin-bottom: 40px; }
.index__list ul { list-style: none; padding: 0; }
.index__row a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; text-decoration: none; }
.index__name { font-family: var(--f-display); font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.25rem); line-height: 1.1; color: var(--muted); transition: color .24s, transform .24s var(--ease); }
.index__meta { color: var(--muted); font-size: .95rem; text-align: right; white-space: nowrap; }
.index__row.is-on .index__name, .index__row a:hover .index__name, .index__row a:focus-visible .index__name { color: var(--ink); transform: translateX(6px); }
.index__row.is-on .index__meta { color: var(--accent); }
.index__text { display: grid; grid-template-rows: 0fr; overflow: hidden; color: var(--ink); max-width: 44ch; transition: grid-template-rows .3s var(--ease), padding .3s; }
.index__text { max-height: 0; }
.index__row.is-on .index__text { max-height: 8em; padding-bottom: 14px; }
.index__inline { display: none; }
@media (max-width: 899px) {
  .index { grid-template-columns: 1fr; }
  .index__pic { display: none; }
  .index__list { grid-column: 1; }
  .index__text { max-height: none; padding-bottom: 10px; }
  .index__name { color: var(--ink); }
  .index__inline { display: block; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 18px; }
  .index__inline img { width: 100%; height: 100%; object-fit: cover; }
}
html:not(.js) .index__text { max-height: none; }

/* ── bands (full-width fields) ─────────────────────────────────────── */
.band { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: center; max-width: none !important; padding-top: clamp(48px, 7vw, 112px) !important; padding-bottom: clamp(48px, 7vw, 112px) !important; }
.band--brunch { background: var(--field); }
.band--xmas { background: var(--field-2); }
.band__pic { grid-column: 1 / span 6; aspect-ratio: 3 / 2; overflow: hidden; }
.band__pic img { width: 100%; height: 100%; object-fit: cover; }
.band__text { grid-column: 8 / span 5; display: grid; gap: 24px; justify-items: start; }
.band--xmas .band__text { grid-column: 1 / span 5; }
.band--xmas .band__pic { grid-column: 7 / span 6; aspect-ratio: 4 / 5; }
.band__big { font-family: var(--f-display); font-size: 1.25rem; }
.band__big span { font-size: clamp(3.5rem, 2.6rem + 3.6vw, 6.5rem); line-height: .9; color: var(--accent); margin-right: 8px; letter-spacing: -.03em; }
.facts { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.facts strong { display: block; font-family: var(--f-display); font-size: 1.6rem; font-weight: 400; line-height: 1.1; }
@media (max-width: 899px) {
  .band { grid-template-columns: 1fr; }
  .band__pic, .band__text, .band--xmas .band__text, .band--xmas .band__pic { grid-column: 1; }
  .band--xmas .band__pic { aspect-ratio: 4 / 3; order: -1; }
}

/* ── staggered gallery ─────────────────────────────────────────────── */
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: start; }
.gallery__h { grid-column: 1 / span 7; max-width: none; }
.gallery__lede { grid-column: 8 / span 5; align-self: end; font-size: 1.1rem; max-width: 40ch; }
.g { position: relative; }
.g img { width: 100%; height: 100%; object-fit: cover; }
.g figcaption { margin-top: 10px; font-size: var(--t-xs); color: var(--muted); }
.g--1 { grid-column: 1 / span 4; aspect-ratio: 3 / 4; margin-top: 48px; }
.g--2 { grid-column: 7 / span 6; aspect-ratio: 5 / 4; margin-top: 14vh; }
.g--3 { grid-column: 6 / span 6; aspect-ratio: 3 / 2; margin-top: -4vh; }
.g--4 { grid-column: 2 / span 3; aspect-ratio: 4 / 5; margin-top: -18vh; }
.g img { aspect-ratio: inherit; }
@media (max-width: 899px) {
  .gallery { grid-template-columns: 1fr; gap: 48px; }
  .gallery__h, .gallery__lede { grid-column: 1; }
  .g { margin-top: 0 !important; grid-column: 1 !important; }
  .g--1 { width: 72%; } .g--2 { width: 86%; justify-self: end; } .g--3 { width: 100%; } .g--4 { width: 58%; }
}

/* ── inset panel (events teaser) ───────────────────────────────────── */
.panel { background: var(--surface); max-width: calc(var(--max) - 40px) !important; margin-left: 20px !important; margin-right: 20px !important; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding: clamp(32px, 5vw, 64px) !important; overflow: hidden; }
@media (min-width: 1480px) { .panel { margin-left: auto !important; margin-right: auto !important; } }
.panel__h { font-size: var(--t-l); max-width: 11ch; }
.panel__left { display: grid; gap: 40px; align-content: start; }
.panel__pic { width: min(100%, 460px); aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0; overflow: hidden; margin-bottom: calc(-1 * clamp(32px, 5vw, 64px)); }
.panel__pic img { width: 100%; height: 100%; object-fit: cover; }
.panel__right { display: grid; gap: 40px; align-content: center; justify-items: start; max-width: 420px; justify-self: center; }
.panel__right p { margin-top: 10px; }
@media (max-width: 899px) { .panel { grid-template-columns: 1fr; margin-left: 10px !important; margin-right: 10px !important; } .panel__right { justify-self: start; } .panel__left { display: contents; } .panel__pic { order: 3; justify-self: center; } }

/* visit */
.visit { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: center; }
.visit__pic { grid-column: 1 / span 5; aspect-ratio: 4 / 5; overflow: hidden; }
.visit__pic img { width: 100%; height: 100%; object-fit: cover; }
.visit__text { grid-column: 7 / span 6; display: grid; gap: 24px; justify-items: start; }
@media (max-width: 899px) { .visit { grid-template-columns: 1fr; } .visit__pic, .visit__text { grid-column: 1; } .visit__pic { aspect-ratio: 16 / 10; } }

.hours { display: grid; gap: 6px; }
.hours div { display: grid; grid-template-columns: minmax(10.5em, auto) 1fr; gap: 16px; }
.hours dt { color: var(--muted); }
.hours dd { margin: 0; font-variant-numeric: tabular-nums; }

/* plain sentence CTA */
.send { display: grid; gap: 24px; justify-items: start; padding-top: 6vh !important; }
.send__line { font-family: var(--f-display); font-size: var(--t-m); max-width: 32ch; line-height: 1.3; }

/* ── sub-page heroes ───────────────────────────────────────────────── */
.xhero { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: center; padding-top: clamp(16px, 3vw, 40px); }
.xhero__pic { grid-column: 1 / span 6; height: min(78svh, 760px); overflow: hidden; }
.xhero__pic img { width: 100%; height: 100%; object-fit: cover; animation: drift 14s var(--ease) both; }
.xhero__text { grid-column: 8 / span 5; display: grid; gap: 24px; justify-items: start; }
.xhero__text:first-child { grid-column: 1 / span 6; }
.xhero__text:first-child + .xhero__pic { grid-column: 8 / span 5; }
.xhero__lede { font-size: 1.15rem; max-width: 44ch; }
@media (max-width: 899px) {
  .xhero { grid-template-columns: 1fr; }
  .xhero__pic, .xhero__text, .xhero__text:first-child, .xhero__text:first-child + .xhero__pic { grid-column: 1; }
  .xhero__pic { height: 52svh; margin: 0 calc(-1 * var(--m)); order: 2; }
}
.xhero--xmas { background: var(--field-2); max-width: none !important; padding-top: clamp(32px, 5vw, 72px) !important; padding-bottom: clamp(32px, 5vw, 72px) !important; }
.xprices { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; }
.xprices__d { color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.xprices__n { font-family: var(--f-display); font-size: 2.4rem; line-height: 1.1; color: var(--accent); margin-right: 6px; }

.steps .h2 { margin-bottom: 40px; }
.steps__list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); counter-reset: none; }
.steps__list li { background: var(--surface); padding: 28px; display: grid; gap: 8px; align-content: start; }
.steps__list li:nth-child(2) { background: var(--field); }
.steps__list strong { font-family: var(--f-display); font-weight: 400; font-size: var(--t-m); }
@media (max-width: 899px) { .steps__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .steps__list { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: center; }
.split__pic { grid-column: 1 / span 6; aspect-ratio: 4 / 3; overflow: hidden; }
.split__pic img { width: 100%; height: 100%; object-fit: cover; }
.split__text { grid-column: 8 / span 5; display: grid; gap: 22px; justify-items: start; }
.split--rev .split__pic { grid-column: 7 / span 6; order: 2; }
.split--rev .split__text { grid-column: 1 / span 5; }
#music .split__pic { aspect-ratio: 4 / 5; grid-column: 1 / span 5; }
@media (max-width: 899px) { .split { grid-template-columns: 1fr; } .split__pic, .split__text, .split--rev .split__pic, .split--rev .split__text, #music .split__pic { grid-column: 1; order: 0; } }

.occasions .h2 { margin-bottom: 32px; }
.occasions__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 14px; }
.occasions__list li { font-family: var(--f-display); font-size: clamp(1.4rem, 1rem + 1.6vw, 2.6rem); line-height: 1.15; }
.occasions__list li:not(:last-child)::after { content: ' ·'; color: var(--accent); }

/* ── menus: cream paper ────────────────────────────────────────────── */
.mhead { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: end; padding-top: clamp(16px, 3vw, 40px); }
.mhead__text { grid-column: 1 / span 7; display: grid; gap: 22px; justify-items: start; padding-bottom: 8px; }
.mhead--hub .mhead__text { grid-column: 1 / -1; }
.mhead__lede { font-size: 1.15rem; max-width: 50ch; }
.mhead__pic { grid-column: 9 / span 4; aspect-ratio: 4 / 5; max-height: 52svh; overflow: hidden; justify-self: end; width: 100%; }
.mhead__pic img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) { .mhead { grid-template-columns: 1fr; } .mhead__text { grid-column: 1; } .mhead__pic { display: none; } }
.dl { color: var(--ink); font-weight: 500; }
.dl:hover { color: var(--accent); }

.mswitch { margin-top: clamp(40px, 5vw, 72px) !important; position: sticky; top: var(--hdr-h); z-index: 30; background: var(--bg); }
.mswitch ul { list-style: none; display: flex; gap: 6px; padding: 10px 0; overflow-x: auto; scrollbar-width: none; }
.mswitch ul::-webkit-scrollbar { display: none; }
.mswitch a { display: block; white-space: nowrap; padding: 10px 16px; text-decoration: none; background: var(--surface); font-weight: 500; transition: background-color .2s; }
.mswitch a:hover { background: var(--field); }
.mswitch a[aria-current] { background: var(--paper); color: var(--paper-ink); }

.paper { background: var(--paper); color: var(--paper-ink); padding-top: clamp(32px, 5vw, 72px) !important; padding-bottom: clamp(32px, 5vw, 72px) !important; }
.paper a { color: var(--paper-accent); }
.paper .h2 { margin-bottom: 20px; }
.paper__cols { columns: 2; column-gap: clamp(32px, 6vw, 96px); }
.paper__cols--single { columns: 1; max-width: 860px; }
.msec { break-inside: avoid-column; margin-bottom: 44px; }
.msec__title { font-family: var(--f-display); font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); font-weight: 400; letter-spacing: -.01em; margin-bottom: 18px; color: var(--paper-accent); }
.mgroup { margin-bottom: 28px; }
.mgroup__title { font: 600 1rem/1.3 var(--f-text); color: var(--paper-muted); margin-bottom: 10px; }
.mlist { list-style: none; padding: 0; display: grid; gap: 18px; }
.mlist--compact { gap: 8px; }
.mi__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.mi__name { font: 500 1.06rem/1.3 var(--f-display); letter-spacing: .015em; }
.mi__price { font: 600 1.02rem/1.3 var(--f-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mi__desc { color: var(--paper-muted); font-size: 1rem; line-height: 1.5; max-width: 52ch; }
.mi__origin { color: var(--paper-muted); font-size: var(--t-xs); font-weight: 600; }
.mi__note { margin-top: 4px; font-size: .95rem; font-weight: 600; color: var(--paper-accent); }
.mi--sig .mi__name::after { content: ' — our signature'; font: 400 .9rem var(--f-text); color: var(--paper-muted); letter-spacing: 0; }
.mlist--compact .mi__name { font-size: 1rem; }
.diet { font: 600 .82rem var(--f-text); color: var(--paper-accent); letter-spacing: 0; }
.deal { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; background: var(--paper-ink); color: var(--paper); padding: 14px 18px; margin-bottom: 22px; font-family: var(--f-display); font-size: 1.1rem; }
.deal strong { color: var(--accent); font-weight: 500; font-size: 1.4rem; }
.deal a { color: var(--paper); font-family: var(--f-text); font-size: .95rem; margin-left: auto; }
.msec__intro { color: var(--paper-muted); margin-bottom: 14px; }
.mlist-inline { line-height: 1.8; }
.mjump { margin-bottom: 36px; }
.mjump ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mjump a { display: block; padding: 8px 14px; background: var(--paper-2); text-decoration: none; color: var(--paper-ink); font-size: .95rem; font-weight: 500; }
.mjump a:hover { background: #e1d6bf; }
.allergy { margin-top: 28px; font-weight: 600; font-size: .95rem; color: var(--paper-ink); }
.mkey { color: var(--paper-muted); font-size: .95rem; margin-bottom: 24px; max-width: 70ch; }
.also { margin-top: 40px; background: var(--paper-2); padding: 24px 28px; }
.also ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.also a { font-weight: 600; margin-right: 6px; }
.paper__more { margin-top: 28px; }
@media (max-width: 899px) { .paper__cols { columns: 1; } .paper { margin-left: 0; margin-right: 0; } }

.setprice { display: flex; flex-wrap: wrap; gap: 8px 40px; margin-bottom: 36px; align-items: baseline; }
.setprice__n { font-family: var(--f-display); font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); color: var(--paper-accent); margin-right: 6px; }
.setprice__when { flex-basis: 100%; font-weight: 600; }
.setmenu__course { margin-bottom: 44px; }
.setmenu__cols { display: grid; gap: 24px clamp(32px, 6vw, 96px); }
.setmenu--two .setmenu__cols { grid-template-columns: 1fr 1fr; }
.setmenu__coltitle { font-weight: 600; color: var(--paper-muted); margin-bottom: 12px; }
.setmenu__col:nth-child(2) { background: var(--paper-2); padding: 20px 22px; }
@media (max-width: 759px) { .setmenu--two .setmenu__cols { grid-template-columns: 1fr; } }

/* hub */
.hub__list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); }
.hub__item a { display: grid; gap: 8px; text-decoration: none; }
.hub__item img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; transition: transform .5s var(--ease), filter .3s; }
.hub__item { overflow: hidden; }
.hub__item a:hover img { transform: scale(1.03); filter: brightness(1.08); }
.hub__h { font-family: var(--f-display); font-size: 1.5rem; margin-top: 8px; }
.hub__item a:hover .hub__h { color: var(--accent); }
.hub__p { color: var(--muted); font-size: .98rem; }
@media (max-width: 1099px) { .hub__list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .hub__list { grid-template-columns: 1fr 1fr; } .hub__h { font-size: 1.2rem; } }
.downloads { display: grid; gap: 20px; }
.downloads__list { list-style: none; padding: 0; display: grid; gap: 4px; max-width: 720px; }
.downloads__list li { display: flex; justify-content: space-between; gap: 16px; background: var(--surface); padding: 14px 18px; }
.downloads__list a { color: var(--ink); font-weight: 600; }
.downloads__list span { color: var(--muted); font-size: .95rem; text-align: right; }

.brunch-menu { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: start; }
.brunch-menu__pic { grid-column: 1 / span 4; position: sticky; top: calc(var(--hdr-h) + 24px); aspect-ratio: 3 / 4; overflow: hidden; }
.brunch-menu__pic img { width: 100%; height: 100%; object-fit: cover; }
.brunch-menu .paper { grid-column: 5 / span 8; padding-left: clamp(24px, 4vw, 56px); padding-right: clamp(24px, 4vw, 56px); }
.xmenu { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: start; }
.xmenu .paper { grid-column: 1 / span 8; padding-left: clamp(24px, 4vw, 56px); padding-right: clamp(24px, 4vw, 56px); }
.xmenu__pic { grid-column: 9 / span 4; position: sticky; top: calc(var(--hdr-h) + 24px); aspect-ratio: 2 / 3; overflow: hidden; }
.xmenu__pic img { width: 100%; height: 100%; object-fit: cover; }
.setmenu-feature .paper { padding-left: clamp(24px, 4vw, 56px); padding-right: clamp(24px, 4vw, 56px); }
@media (max-width: 899px) {
  .brunch-menu, .xmenu { grid-template-columns: 1fr; }
  .brunch-menu__pic, .xmenu__pic { display: none; }
  .brunch-menu .paper, .xmenu .paper { grid-column: 1; }
  .brunch-menu, .xmenu, .setmenu-feature { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ── FAQ ───────────────────────────────────────────────────────────── */
.faq { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }
.faq .h2 { grid-column: 1 / span 4; }
.faq__list { grid-column: 6 / span 7; display: grid; gap: 6px; }
.faq__item { background: var(--surface); }
.faq__item summary { cursor: pointer; padding: 20px 56px 20px 22px; font-family: var(--f-display); font-size: 1.25rem; list-style: none; position: relative; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-family: var(--f-text); font-size: 1.5rem; color: var(--accent); transition: transform .2s; }
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__a { padding: 0 22px 22px; max-width: 60ch; }
@media (max-width: 899px) { .faq { grid-template-columns: 1fr; } .faq .h2, .faq__list { grid-column: 1; } }

/* ── forms ─────────────────────────────────────────────────────────── */
.enq { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: start; }
.enq__intro { grid-column: 1 / span 4; display: grid; gap: 18px; position: sticky; top: calc(var(--hdr-h) + 24px); }
.enq__direct { color: var(--muted); }
.form { grid-column: 6 / span 7; display: grid; gap: 18px; background: var(--surface); padding: clamp(20px, 3vw, 40px); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > span, .field legend { font-weight: 600; font-size: .98rem; padding: 0; }
.field small { font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; font: 400 1rem/1.4 var(--f-text); color: var(--ink);
  background: var(--bg); border: 1px solid #45605b; border-radius: 0; appearance: none;
}
.field select { background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23efe7d6' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center; padding-right: 40px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: #ff8f7a; }
.field .err { color: #ffb4a5; font-size: .92rem; }
.field input::placeholder, .field textarea::placeholder { color: #8f9a93; }
.field input[type="date"] { color-scheme: dark; }
.field--checks { display: block; }
.field--checks legend { margin-bottom: 10px; }
.field--checks .chip { display: inline-flex; margin: 0 6px 6px 0; }
.field--checks .chip span { background: var(--bg); }
.form .btn { justify-self: start; min-width: 200px; }
.form .btn[disabled] { opacity: .6; cursor: progress; }
.form__status { font-weight: 600; }
.form__status.is-ok { color: #8fe0b0; }
.form__status.is-err { color: #ffb4a5; }
.hp { position: absolute; left: -9999px; }
@media (max-width: 899px) { .enq { grid-template-columns: 1fr; } .enq__intro, .form { grid-column: 1; position: static; } .form { margin: 0 calc(-1 * var(--m)); } }
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }

/* booking */
.book { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: start; padding-top: clamp(16px, 3vw, 40px); }
.book__side { grid-column: 1 / span 5; display: grid; gap: 20px; }
.book__widget { grid-column: 7 / span 6; background: var(--paper); color: var(--paper-ink); padding: clamp(12px, 2vw, 28px); min-height: 640px; }
.book__widget a { color: var(--paper-accent); }
.rd-iframe { display: block; width: 100%; height: 760px; border: 0; background: #fff; }
.book__fallback { margin-top: 16px; font-size: .95rem; }
.plain { padding-left: 1.1em; display: grid; gap: 8px; }
@media (max-width: 899px) { .book { grid-template-columns: 1fr; } .book__side, .book__widget { grid-column: 1; } .book__widget { order: -1; margin: 0 calc(-1 * var(--m)); } .book__side { order: 2; } }

/* contact */
.contact { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: start; padding-top: clamp(16px, 3vw, 40px); }
.contact__text { grid-column: 1 / span 6; display: grid; gap: 24px; justify-items: start; }
.contact__addr { font-family: var(--f-display); font-size: var(--t-m); }
.contact__addr a, .contact__big a { color: var(--ink); }
.contact__big { font-size: 1.2rem; }
.contact__pic { grid-column: 8 / span 5; aspect-ratio: 2 / 3; overflow: hidden; }
.contact__pic img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) { .contact { grid-template-columns: 1fr; } .contact__text, .contact__pic { grid-column: 1; } .contact__pic { aspect-ratio: 16 / 10; } }

.legal { max-width: 820px !important; display: grid; gap: 22px; padding-top: 32px !important; }
.legal .h3 { margin-top: 16px; }
.nf { padding-top: 12vh !important; padding-bottom: 8vh !important; display: grid; gap: 24px; justify-items: start; }
.buy { display: grid; gap: 24px; }
.buy .gift-up-target { background: var(--paper); padding: clamp(8px, 2vw, 24px); min-height: 400px; }
.voucher-offline { background: var(--surface); padding: 32px; display: grid; gap: 12px; max-width: 720px; }

/* staging-only notes for the owner (disappear at launch) */
.review-flag { background: #f6e27a; color: #222; padding: 12px 16px; font-size: .9rem; line-height: 1.45; max-width: 60ch; }

/* ── footer ────────────────────────────────────────────────────────── */
.ftr { margin-top: var(--sec); padding: 0 var(--m); max-width: var(--max); margin-left: auto; margin-right: auto; }
.ftr__cta { display: grid; gap: 24px; justify-items: start; padding: clamp(40px, 6vw, 80px) 0; }
.ftr__line { font-family: var(--f-display); font-size: var(--t-m); max-width: 30ch; line-height: 1.3; }
.ftr__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.ftr__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); background: var(--surface); padding: clamp(28px, 4vw, 56px); margin: 0 calc(-1 * var(--m)); }
.ftr__h { font: 600 1rem var(--f-text); color: var(--muted); margin-bottom: 14px; }
.ftr address { font-style: normal; margin-bottom: 14px; }
.ftr address a { color: var(--ink); }
.ftr__grid p a { color: var(--ink); }
.ftr__links { list-style: none; padding: 0; display: grid; gap: 6px; }
.ftr__links a { text-decoration: none; }
.ftr__links a:hover { color: var(--accent); text-decoration: underline; }
.hours--ftr div { grid-template-columns: 1fr; gap: 0; margin-bottom: 8px; }
.ftr__name { font-size: clamp(3rem, 12.4vw, 11.5rem); line-height: .9; white-space: nowrap; margin: clamp(32px, 5vw, 64px) 0 12px; color: #2a8178; letter-spacing: -.045em; }
.ftr__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 16px 0 28px; color: var(--muted); font-size: var(--t-xs); }
.ftr__base a { color: var(--muted); }
@media (max-width: 899px) { .ftr__grid { grid-template-columns: 1fr 1fr; } .ftr__name { white-space: normal; } }
@media (max-width: 520px) { .ftr__grid { grid-template-columns: 1fr; } }

/* consent */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 560px; background: var(--paper); color: var(--paper-ink); padding: 20px 22px; display: grid; gap: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.consent a { color: var(--paper-accent); }
.consent__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.consent .btn--alt { background: var(--paper-2); color: var(--paper-ink); }
@media (max-width: 759px) { .consent { bottom: calc(68px + env(safe-area-inset-bottom)); left: 10px; right: 10px; } }

/* Christmas page tint */
.xmas .faq__item, .xmas .form { background: #1d2422; }

/* ── motion: section entrances ────────────────────────────────────── */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv-pic { clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease); transition-delay: var(--d, 0ms); }
.js .rv-pic.in { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .rv, .js .rv-pic { opacity: 1; transform: none; clip-path: none; }
}

@media print {
  .hdr, .mbar, .ftr, .mswitch, .mjump, .consent, .tapas, .mhead__pic, .hero__btns, .review-flag { display: none !important; }
  body, .paper { background: #fff; color: #000; }
  .paper__cols { columns: 2; }
}

/* hidden must always win over component display rules */
[hidden] { display: none !important; }

/* ── mobile touch fixes ─────────────────────────────────────────────── */
/* chip inputs are visually hidden; never let the form-field sizing apply to them */
.chip { position: relative; }
.field .chip input, .chip input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; }
.diet { font-size: .875rem; }
@media (max-width: 899px) {
  /* every stand-alone link or button gets a 44px-high touch area */
  .hdr__logo { display: flex; align-items: center; min-height: 48px; }
  .hero__links a, .dl, .deal a, .also a, .downloads__list a, .book__fallback a, .plain a, .ftr__base a, .linkish { display: inline-flex; align-items: center; min-height: 44px; }
  .ftr__links { gap: 0; }
  .ftr__links a { display: flex; align-items: center; min-height: 44px; }
  .ftr__base p { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
}

html:not(.js) .consent { display: none; }

.xhero__both { font-weight: 600; max-width: 44ch; }