@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/source-sans-3-latin-300-normal.ee4e72268a.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:'Source Sans 3';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/source-sans-3-latin-ext-300-normal.0eee682fcf.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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/source-sans-3-greek-300-normal.2da36c104c.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/source-sans-3-latin-400-normal.0f73f35e08.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:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/source-sans-3-latin-ext-400-normal.f5706bb057.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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/source-sans-3-greek-400-normal.7f0050bec7.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/source-sans-3-latin-600-normal.14527d193b.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:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/source-sans-3-latin-ext-600-normal.5727d1da67.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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/source-sans-3-greek-600-normal.f16b9b811a.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
/* myrtales.gr design tokens: the ONE place colours, typefaces, type sizes, radii and motion are defined.
   The palette is the old site's own (Elementor kit 14 «Myrtales Blue/Gold» globals, logo #006372, illustration
   peach/coral/charcoal); the pairs used for text are the passing pairs of the Head of Design's brief §2.A
   (2026-11-11). Declared in src/design-language.json. */
:root {
  /* palette: the Elementor kit globals, by their old names */
  --color-teal: #216068; /* Myrtales Blue: footer, buttons, frame */
  --color-teal-logo: #006372; /* logo badge */
  --color-teal-2: #137A8A; /* Myrtales Blue 2 */
  --color-steel: #6096A4; /* Myrtales Blue 3: label bars (large bold text only, 3.28:1) */
  --color-sky: #97B5C0; /* Myrtales Blue 4 */
  --color-mist: #CCDAE1; /* Myrtales Blue 5: header, panels */
  --color-stone: #E0DDDA; /* Myrtales Gold 5: page background */
  --color-gold: #7D684C; /* Myrtales Gold */
  --color-gold-2: #8A7965;
  --color-gold-3: #A3988C;
  --color-slate: #54595F; /* kit Secondary: text */
  --color-charcoal: #3F3D3D; /* illustration charcoal: strongest text */
  --color-paper: #F9FAFA; /* review cards */
  --color-white: #FFFFFF;
  --color-peach: #FCCCA2; /* illustration accent (drawn ornaments only) */
  --color-teal-scrim: rgb(33 96 104 / 0.4); /* brief A7: a 40 % teal scrim under the white «HALKIDIKI» */
  --color-teal-veil: rgb(33 96 104 / 0.92);
  --color-mist-veil: rgb(204 218 225 / 0.94); /* the hero card: the old translucent mist, opaque enough for 4.5:1 text */
  --color-ink-veil: rgb(20 30 32 / 0.9); /* lightbox backdrop */
  --color-rule: rgb(33 96 104 / 0.35);
  --color-rule-light: rgb(224 221 218 / 0.45);

  /* typefaces: Source Sans 3 stands in for the old self-hosted Myriad Pro (Head of Design 5b: no webfont licence
     on file; Adobe's open-source sibling, same weights). One family. */
  --font-text: 'Source Sans 3', 'Myriad Pro', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;

  /* type scale (brief §3.3: body 18 px Regular, titles 40/56 Light uppercase, kicker 20) */
  --text-xs: 0.875rem; /* 14 px: copyright bar, captions (brief A4) */
  --text-sm: 1rem;
  --text-base: 1.125rem; /* 18 px body */
  --text-nav: 1.0625rem; /* 17 px nav, as the old header */
  --text-lead: 1.25rem; /* 20 px kicker */
  --text-item: clamp(1.125rem, 1rem + 0.8vw, 1.5rem); /* menu dish names: 24 px desktop (the old page's 26 px Light), 19 px on a phone */
  --text-h3: 1.5rem;
  --text-cat: clamp(2rem, 4vw, 3.125rem); /* menu category (50 px, as the old page) */
  --text-foot: clamp(1.75rem, 3vw, 2.5rem); /* footer column titles (40 px) */
  --text-h2: clamp(2.5rem, 4.2vw, 3.5rem); /* section titles 40/56 */
  --text-h1: clamp(2.5rem, 4.2vw, 3.5rem);
  --text-display: clamp(3rem, 7vw, 5.5rem); /* «HALKIDIKI» on its photo */

  /* layout */
  --max: 80rem; /* 1280 px, the old content width */
  --gut: clamp(16px, 4vw, 48px);
  --sec: clamp(56px, 7vw, 96px); /* brief §3.12: 96 desktop / 56 phone */
  --measure: 65ch;
  --tap: 44px;
  --frame: 2px; /* the thin teal frame around the page */
  --hdr-h: 96px; /* the header, at the top of the page */
  --hdr-stuck: 76px; /* the header once the page has scrolled (it stays pinned, as on the old site) */
  --callbar-h: 49px; /* the phone Call/Reserve bar: 48 px buttons + its 1 px top rule */

  /* radius: the old look is square */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-round: 50%;

  /* motion */
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* myrtales.gr: the old site's look (Elementor kit 14, header 48, footer 49, pages 66/68/70/487/2345/2347/2630),
   rebuilt without Elementor, with the Head of Design's fixes (brief 2026-11-11). Every colour/size is a token. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-now) + 1rem); }
/* the pinned header's current height: full at the top, compact once src/site.js marks the page scrolled */
:root { --hdr-now: var(--hdr-h); }
:root[data-stuck] { --hdr-now: var(--hdr-stuck); }
@media (max-width: 1023px) { :root { --hdr-h: 76px; --hdr-stuck: 64px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  background: var(--color-stone);
  color: var(--color-slate);
  font: 400 var(--text-base)/1.6 var(--font-text);
  /* the old kit's custom CSS: a thin teal frame around the page */
  border: var(--frame) solid var(--color-teal);
  min-height: 100dvh;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-teal); text-underline-offset: 0.18em; }
a:hover { color: var(--color-charcoal); }
:focus-visible { outline: 3px solid var(--color-teal); outline-offset: 2px; }
p { margin: 0 0 0.8em; }
h1, h2, h3, h4 { margin: 0; font-weight: 300; line-height: 1.15; color: var(--color-charcoal); }
strong { font-weight: 600; color: var(--color-charcoal); }
ul { margin: 0; padding: 0; list-style: none; }
.sr { position: absolute !important; 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: 1rem; top: -4rem; z-index: 100; background: var(--color-teal); color: var(--color-white); padding: 0.75rem 1rem; }
.skip:focus { top: 1rem; }
.skip:hover { color: var(--color-white); }
.center { text-align: center; }
.anchor { display: block; position: relative; top: -6rem; }
main:focus { outline: none; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.wrap--1000 { max-width: calc(1000px + 2 * var(--gut)); }
.wrap--narrow { max-width: calc(52rem + 2 * var(--gut)); }
.sec { padding-block: var(--sec); }
.sec--top { padding-top: calc(var(--sec) * 0.8); }
.sec--tight { padding-top: 0; }
.sec--mist { background: var(--color-mist); }
.sec--teal { background: var(--color-teal); color: var(--color-white); }
.two { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (min-width: 900px) {
  .two--36 { grid-template-columns: 36fr 64fr; }
  .two--64 { grid-template-columns: 64fr 36fr; }
  .two--62 { grid-template-columns: 62fr 38fr; }
  .two--44 { grid-template-columns: 44fr 56fr; align-items: center; }
  .two--40 { grid-template-columns: 40fr 60fr; }
  .two--33 { grid-template-columns: 33fr 67fr; }
  .two--27 { grid-template-columns: 27fr 73fr; align-items: center; }
}

/* kicker over title, with the myrtle sprig (every section heading of the old site) */
.kick { position: relative; display: flex; align-items: flex-end; gap: 0.75rem; margin-bottom: 1.5rem; }
.kick--c { justify-content: center; }
.kick__sprig { width: 52px; height: auto; flex: none; }
.kick__h { display: flex; flex-direction: column; font-weight: 300; color: var(--color-charcoal); }
.kick__k { font-size: var(--text-lead); line-height: 1.2; }
.kick__t { font-size: var(--text-h2); text-transform: uppercase; line-height: 1.05; letter-spacing: 0.01em; }
.kick--light .kick__h, .kick--light strong { color: var(--color-white); }
.kick--tf { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.kick__sub { margin: 0; font-size: var(--text-lead); font-weight: 300; color: var(--color-charcoal); }
.title { font-size: var(--text-h1); text-transform: uppercase; margin-bottom: 1.5rem; color: var(--color-teal); }
.title--sm { font-size: var(--text-h3); margin-top: 1rem; }
.prose { max-width: var(--measure); }
.prose--c { margin-inline: auto; text-align: center; }
.prose--light, .prose--light strong { color: var(--color-white); }
.rule { border: 0; border-top: 1px dashed var(--color-rule); margin: 1.5rem 0; max-width: 18rem; }

/* buttons: one style, white on deep teal with the old double-outline frame (brief §3.14, A1, A6) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.6rem 1.4rem;
  background: var(--color-teal); color: var(--color-white);
  font: 400 var(--text-sm)/1.2 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  border: 0; border-radius: var(--radius-none); cursor: pointer;
  transition: box-shadow var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.btn--frame { box-shadow: 0 0 0 4px var(--color-stone), 0 0 0 6px var(--color-teal); margin: 6px; }
.btn--frame:hover { color: var(--color-white); box-shadow: 0 0 0 4px var(--color-stone), 0 0 0 7px var(--color-gold); }
.btn:hover { color: var(--color-white); }
.btn--light { background: var(--color-white); color: var(--color-teal); }
.btn--light:hover { color: var(--color-teal); background: var(--color-mist); }
.btn--wrap { text-transform: none; letter-spacing: 0.02em; text-align: center; overflow-wrap: anywhere; }

/* the offset outlined frame behind a mist panel (welcome box, chef video, contact form box) */
.framed { position: relative; padding: 0 1.25rem 1.25rem 0; }
.framed::before { content: ''; position: absolute; inset: 0 1.25rem 1.25rem 0; border: 1px solid var(--color-slate); }
.framed__in { position: relative; margin: 1.25rem 0 0 1.25rem; background: var(--color-mist); padding: clamp(1.25rem, 3vw, 2.5rem); }
.framed--stone .framed__in { background: var(--color-stone); }

/* ── header ─────────────────────────────────────────────────────────────────────────────────────────────── */
/* the header stays pinned on every page, as on the old site */
.hdr { background: var(--color-mist); position: sticky; top: 0; z-index: 20; }
.hdr__in { max-width: var(--max); margin-inline: auto; padding: 0.5rem var(--gut); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; height: var(--hdr-now); padding-block: 0; transition: height var(--dur-base) var(--ease-standard); }
.hdr__nav, .hdr__nav ul { height: 100%; }
.hdr__util { display: flex; align-items: center; gap: 1rem; }
.hdr__tel { display: inline-flex; align-items: center; gap: 0.4rem; min-height: var(--tap); min-width: var(--tap); color: var(--color-teal); font-weight: 600; font-size: var(--text-nav); text-decoration: none; }
.hdr__tel .ico { width: 26px; height: 26px; }
.hdr__mail { display: none; place-items: center; width: var(--tap); height: var(--tap); color: var(--color-teal); }
.hdr__mail .ico { width: 24px; height: 24px; }
.social { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.social__a { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); color: inherit; }
.social--hdr .social__a { color: var(--color-teal); }
.social .ico { width: 22px; height: 22px; }
.social--big .ico { width: 28px; height: 28px; }
.hdr__nav ul { display: flex; align-items: center; gap: clamp(0.5rem, 2vw, 2rem); }
.hdr__nav a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--color-teal); font-weight: 600; font-size: var(--text-nav); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; }
/* active item (brief A5): teal + a 2 px underline instead of gold on mist */
.hdr__nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--color-teal); }
.hdr__nav a:hover { color: var(--color-charcoal); }
/* the logo badge: teal, inside a thin teal frame, hanging below the bar (old header); compact and inside the bar once pinned */
.hdr__nav .hdr__logo-li { align-self: flex-start; padding-top: 8px; }
:root[data-stuck] .hdr__nav .hdr__logo-li { align-self: center; padding-top: 0; }
.hdr__logo { display: block; border: 1px solid var(--color-teal); padding: 5px; background: var(--color-mist); min-height: 0; }
.hdr__logo img { width: 130px; background: var(--color-teal-logo); transition: width var(--dur-base) var(--ease-standard); }
:root[data-stuck] .hdr__logo img { width: 58px; }
.hdr__nav .hdr__logo-li a { box-shadow: none; }
.hdr__act { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }
.hdr__lang { display: inline-grid; place-items: center; min-width: var(--tap); min-height: var(--tap); color: var(--color-teal); font-size: var(--text-nav); }
.mnav { display: none; }
@media (max-width: 1023px) {
  .hdr__in { grid-template-columns: auto 1fr auto; }
  .hdr__tel-t, .social--hdr, .hdr__reserve, .hdr__nav li:not(.hdr__logo-li) { display: none; }
  .hdr__nav ul { justify-content: center; }
  .hdr__logo img { width: 96px; }
  .hdr__nav .hdr__logo-li { padding-top: 6px; }
  :root[data-stuck] .hdr__logo img { width: 56px; }
  .mnav { display: block; position: static; }
}
.mnav__btn { list-style: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); color: var(--color-teal); cursor: pointer; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.mnav__btn::-webkit-details-marker { display: none; }
.mnav__btn .ico { width: 28px; height: 28px; }
/* open: the button shows an X (the old popup's close), its words read «Close menu» */
.mnav__btn .ico + .ico, .mnav__x, .mnav[open] .mnav__btn .ico:first-child, .mnav[open] .mnav__lbl { display: none; }
.mnav[open] .mnav__btn .ico + .ico { display: block; width: 32px; height: 32px; }
.mnav[open] .mnav__x { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mnav[open] .mnav__btn { position: relative; z-index: 41; }
.mnav__panel { position: fixed; inset: 0; z-index: 40; overflow-y: auto; background: var(--color-mist); display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 5rem var(--gut) 6rem; }
.mnav__logo img { width: 150px; }
.mnav__list a { display: block; padding: 0.4rem 1rem; color: var(--color-teal); font-size: clamp(2rem, 9vw, 2.25rem); font-weight: 300; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; text-align: center; }
.mnav__list a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.mnav__follow { margin: 1rem 0 0; color: var(--color-charcoal); font-size: var(--text-h3); font-weight: 300; }
.mnav .social .ico { width: 28px; height: 28px; }
.mnav .social__a { color: var(--color-teal); }

/* ── home ──────────────────────────────────────────────────────────────────────────────────────────────── */
.car { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.car::-webkit-scrollbar { display: none; }
.car > li { scroll-snap-align: start; flex: none; }
.car__nav { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1rem; }
.car__btn { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); border: 1px solid var(--color-teal); background: var(--color-teal); color: var(--color-white); cursor: pointer; }
.car__btn .ico { width: 22px; height: 22px; }
.car__btn:hover { background: var(--color-charcoal); }
.car__count { min-width: 4ch; text-align: center; font-size: var(--text-sm); color: var(--color-charcoal); }

/* hero (Head of Design 12/11, the old look): the slider fills the first screen under the header, the card is centred
   with the arrows at both sides and bar indicators at the bottom. Kept from the brief: the card is near-opaque mist
   (text 4.5:1 whatever photo is behind it) and the leaf sits in its own column, never under the title. */
.hero { position: relative; background: var(--color-mist); }
.hero__slide { width: 100%; }
.hero__img { width: 100%; height: calc(100svh - var(--hdr-h)); min-height: 460px; object-fit: cover; }
.hero__panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(30rem, calc(100% - 2 * (var(--tap) + 2rem))); background: var(--color-mist-veil); padding: clamp(1.5rem, 3vw, 2.25rem); outline: 1px solid var(--color-slate); outline-offset: -0.6rem; display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: end; }
.hero__panel .kick__sprig { grid-row: 1; width: 44px; }
.hero__panel .kick__h { color: var(--color-teal); }
.hero__panel .kick__t { font-size: clamp(2rem, 4.2vw, 3.5rem); }
.hero__panel p { grid-column: 1 / -1; margin: 0.75rem 0 0; max-width: 40ch; color: var(--color-charcoal); }
.hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); border-color: var(--color-white); }
.hero__arrow--prev { left: 1rem; }
.hero__arrow--next { right: 1rem; }
.hero__dots { position: absolute; left: 50%; bottom: 0.5rem; transform: translateX(-50%); display: flex; margin: 0; padding: 0; list-style: none; }
.hero__dot { display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; background: none; cursor: pointer; }
.hero__dot::before { content: ''; width: 32px; height: 6px; background: var(--color-white); opacity: 0.75; }
.hero__dot[aria-current="true"]::before { background: var(--color-teal); opacity: 1; }
/* a phone: the hero ends above the Call/Reserve bar (Head of Design 12/11 11:27), so its arrows and bar indicators show */
@media (max-width: 767px) { .hero__img { height: calc(100svh - var(--hdr-h) - var(--callbar-h)); } }
/* a phone: the card spans the slide; the arrows sit low at both sides, clear of the text */
@media (max-width: 599px) {
  .hero__panel { width: calc(100% - 2 * var(--gut)); top: 45%; }
  .hero__arrow { top: auto; bottom: 0.5rem; transform: none; }
}

.facts p { margin-bottom: 1rem; }
.facts strong { color: var(--color-charcoal); letter-spacing: 0.04em; }
.sec--welcome .framed__in .kick { margin-bottom: 1.25rem; }
.sec--table { padding-block: 0; }
.table__img { width: 100%; }
.chef__media { display: grid; gap: 1rem; }
.framed--media .framed__in { padding: 0; background: var(--color-mist); }
/* the chef film plays inside the logo badge shape, as on the old site (mask = Myrtales-logo-bg-3.svg) */
.video { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: var(--color-mist); cursor: pointer; }
.video__poster { width: 100%; height: 100%; object-fit: cover; }
.video > .ico { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.halk__photo { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; }
.halk__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* brief A7: the white title always on its photo, with a 40 % teal scrim */
.halk__photo::after { content: ''; position: absolute; inset: 0; background: var(--color-teal-scrim); }
.halk__title { position: relative; z-index: 1; margin: 0; font-size: var(--text-display); font-weight: 600; text-transform: uppercase; color: var(--color-white); letter-spacing: 0.03em; }
.halk__card { position: relative; padding: 1.25rem; border: 1px solid var(--color-white); }
.halk__in { background: var(--color-white); padding: 1rem clamp(1rem, 3vw, 2rem) 1.5rem; }
.halk__bar { background: var(--color-steel); color: var(--color-white); font-weight: 600; font-size: var(--text-h3); text-transform: uppercase; text-align: center; padding: 0.4rem; margin-bottom: 1rem; }
.halk__orn { position: absolute; inset: 0; pointer-events: none; }
.halk__o1 { position: absolute; right: -0.5rem; top: -2.5rem; width: 60px; }
.halk__o2 { position: absolute; left: -1.5rem; bottom: -1.5rem; width: 60px; }
@media (max-width: 599px) { .halk__o1, .halk__o2 { display: none; } }

.strip { gap: 0.6rem; margin-top: 1rem; }
.strip__item { width: min(80vw, 300px); }
.strip--menu .strip__item { width: min(44vw, 240px); }
/* the photo row above each food category (old: the same carousel in every section): a still row, swipe on a phone */
.strip--cat { display: flex; overflow-x: auto; scrollbar-width: none; max-width: 72rem; margin: 2.5rem auto 0; }
.strip--cat::-webkit-scrollbar { display: none; }
.strip--cat > li { flex: none; }
.strip--cat .strip__item { width: min(31vw, 240px); }
.strip__img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 4px solid var(--color-white); }

.ta { text-align: center; }
.ta__logo img { margin-inline: auto; }
.ta__site { margin: 0.5rem 0 0; font-size: var(--text-lead); font-weight: 400; color: var(--color-charcoal); }
.ta__name { margin: 0; color: var(--color-slate); }
.stars { display: flex; align-items: center; justify-content: center; gap: 0.15rem; color: var(--color-teal); margin: 0.5rem 0; }
.stars .ico { width: 20px; height: 20px; }
.stars span { margin-left: 0.4rem; color: var(--color-charcoal); }
/* reviews (Head of Design 12/11, the old look): the heading centred, the Tripadvisor badge beside ONE review at a
   time, arrows and a counter under it; author in slate (A2), body in slate on paper (A3) */
.rev { display: grid; gap: 1.5rem 2.5rem; align-items: center; max-width: 60rem; margin-inline: auto; }
.rev > * { min-width: 0; } /* the carousel scrolls inside its track, never widens it */
@media (min-width: 900px) { .rev { grid-template-columns: 13rem 1fr; } }
.reviews__list { gap: 1rem; }
.reviews__list > .review { width: 100%; }
.review { background: var(--color-paper); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1rem 1.5rem; align-items: start; }
@media (min-width: 600px) { .review { grid-template-columns: 10rem 1fr; } }
.review__q { margin: 0; color: var(--color-slate); font-size: var(--text-base); }
.review__q strong { display: block; margin-bottom: 0.25rem; }
.review__by { display: grid; grid-template-columns: 40px 1fr; column-gap: 0.75rem; align-items: center; margin: 0; }
@media (min-width: 600px) { .review__by { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 0.25rem; } .review__av { grid-row: auto; } }
.review__av { grid-row: span 2; width: 40px; }
.review__name { font-weight: 600; color: var(--color-charcoal); font-size: var(--text-sm); }
.review__date { color: var(--color-slate); font-size: var(--text-xs); }

/* ── menu page ─────────────────────────────────────────────────────────────────────────────────────────── */
.mboxes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mbox { display: grid; justify-items: center; gap: 0.5rem; text-decoration: none; color: var(--color-teal); font-size: var(--text-h3); min-height: var(--tap); }
.mbox__img { width: 100%; max-width: 160px; aspect-ratio: 1; object-fit: contain; }
.mbox:hover .mbox__t { text-decoration: underline; }
/* the category navigator (Head of Design 12/11, the old «Menu Navigation»): ONE column of icons fixed at the right
   edge on a desktop, a bar fixed at the bottom on a phone (it takes the place of Call/Reserve there; those stay in
   the header). The current category is framed; the name shows as a tooltip on hover and focus. */
.mnavi { position: fixed; z-index: 25; }
.mnavi__list { display: flex; margin: 0; padding: 0; list-style: none; }
.mnavi__list > li { flex: none; }
.mnavi__a { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid transparent; color: var(--color-gold); text-decoration: none; }
.mnavi__icon { width: 30px; height: 30px; opacity: 0.6; transition: opacity var(--dur-fast) var(--ease-standard); }
.mnavi__a:hover .mnavi__icon, .mnavi__a:focus-visible .mnavi__icon, .mnavi__a[aria-current="true"] .mnavi__icon { opacity: 1; }
.mnavi__a[aria-current="true"] { border-color: var(--color-gold); }
.mnavi__ini { font-size: var(--text-lead); font-weight: 600; }
.mnavi__a::after { content: attr(data-tip); position: absolute; z-index: 1; padding: 0.3rem 0.6rem; background: var(--color-teal); color: var(--color-white); font-size: var(--text-sm); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-standard); }
.mnavi__a:hover::after, .mnavi__a:focus-visible::after { opacity: 1; }
@media (min-width: 1024px) {
  .mnavi { right: 0.5rem; top: calc(var(--hdr-now) + 1rem); transition: top var(--dur-base) var(--ease-standard); }
  .mnavi__list { flex-direction: column; gap: 2px; }
  .mnavi__a::after { right: calc(100% + 0.5rem); top: 50%; transform: translateY(-50%); }
  .is-menu .menus { padding-right: calc(var(--gut) + 48px); }
}
@media (max-width: 1023px) {
  .mnavi { left: 0; right: 0; bottom: 0; background: var(--color-mist); border-top: 1px solid var(--color-rule); }
  .mnavi__list { overflow-x: auto; scrollbar-width: none; padding-inline: 0.25rem; }
  .mnavi__list::-webkit-scrollbar { display: none; }
  .mnavi__a::after { display: none; }
  body.is-menu { padding-bottom: 50px; }
  .is-menu .callbar { display: none; }
  .is-menu .hdr__mail { display: inline-grid; }
}
.menus { padding-bottom: var(--sec); }
.menu { padding-top: calc(var(--sec) * 0.6); }
.menu__h { font-size: var(--text-h2); text-transform: uppercase; color: var(--color-teal); text-align: center; margin-bottom: 1rem; }
.mcat { padding-block: 2.5rem; border-bottom: 1px solid var(--color-rule); max-width: 72rem; margin-inline: auto; }
.menu, .mcat__h, .msub__h { scroll-margin-top: calc(var(--hdr-stuck) + 5.5rem); }
.mcat__h { font-size: var(--text-cat); text-transform: uppercase; color: var(--color-teal); font-weight: 400; margin-bottom: 1.25rem; }
.msub__h { font-size: var(--text-h3); text-transform: uppercase; color: var(--color-charcoal); font-weight: 400; margin: 1.5rem 0 0.5rem; }
/* a plate beside every category (desktop), as the old page */
.mcat__plate { display: none; }
@media (min-width: 1100px) {
  .mcat { display: grid; grid-template-columns: 260px 1fr; column-gap: 3rem; align-items: start; }
  .mcat__plate { display: block; position: sticky; top: calc(var(--hdr-stuck) + 6rem); }
  .mcat__plate-img { width: 260px; aspect-ratio: 1; object-fit: contain; opacity: 0.85; }
}
.dishes { display: grid; gap: 0.9rem; }
.dish__n { display: flex; justify-content: space-between; gap: 1rem; margin: 0; }
.dish__name { font-size: var(--text-item); text-transform: uppercase; color: var(--color-teal); line-height: 1.25; }
.dish__p { flex: none; color: var(--color-charcoal); font-weight: 600; }
.dish__d { margin: 0.1rem 0 0; font-size: var(--text-sm); color: var(--color-slate); }
.mcat__note { margin-top: 1rem; font-style: italic; color: var(--color-charcoal); }

/* ── gallery page: 1 column phone, 2–3 desktop (brief §3.7) ───────────────────────────────────────────── */
.grid { display: grid; gap: 0.75rem; grid-template-columns: 1fr; margin-top: 1rem; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.tile { display: block; }
.tile__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: opacity var(--dur-fast) var(--ease-standard); }
.tile:hover .tile__img { opacity: 0.85; }
.lb { padding: 0; border: 0; max-width: 100vw; max-height: 100dvh; width: 100%; height: 100%; background: transparent; }
.lb::backdrop { background: var(--color-ink-veil); }
.lb[open] { display: grid; place-items: center; }
.lb__img { max-width: 94vw; max-height: 88dvh; width: auto; height: auto; }
.lb__x { position: fixed; top: 1rem; right: 1rem; width: var(--tap); height: var(--tap); display: grid; place-items: center; background: var(--color-teal); color: var(--color-white); border: 0; cursor: pointer; }
.lb__x .ico { width: 24px; height: 24px; }

/* ── contact page ──────────────────────────────────────────────────────────────────────────────────────── */
.clist { display: grid; gap: 0.4rem; margin-top: 1rem; }
.clist a { display: inline-block; padding-block: 0.4rem; color: var(--color-slate); text-decoration: none; }
.clist a:hover { color: var(--color-teal); text-decoration: underline; }
.clist strong { color: var(--color-charcoal); }
.follow { margin: 0; font-size: var(--text-h3); font-weight: 300; color: var(--color-charcoal); }
.social--big .social__a { color: var(--color-teal); }
.ways { display: grid; gap: 0.75rem; margin-top: 1rem; }
.ways .btn { width: calc(100% - 12px); }
.mapbox { border: 1px solid var(--color-white); padding: 1rem; }
.map { position: relative; display: grid; place-items: center; align-content: center; gap: 0.75rem; min-height: 360px; background: var(--color-teal-2); text-align: center; padding: 1rem; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__note { margin: 0; color: var(--color-white); font-size: var(--text-sm); }
.gps { margin: 1rem 0 0; text-align: center; }
.gps a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0.4rem 1rem; border: 1px solid var(--color-white); color: var(--color-white); font-size: var(--text-h3); text-decoration: none; }
.gps a strong { color: var(--color-white); margin-right: 0.3em; }
.gps a:hover, .sec--teal a:hover { color: var(--color-mist); }
.hboxes { display: grid; gap: 1rem; }
.hbox { display: grid; grid-template-columns: 1.5rem 1fr; column-gap: 0.5rem; }
.hbox__i { grid-row: span 2; color: var(--color-sky); padding-top: 0.3rem; }
.hbox__i .ico { width: 14px; height: 14px; }
.hbox__t { font-size: var(--text-h3); text-transform: uppercase; color: var(--color-charcoal); font-weight: 300; }
.hbox__d a { color: var(--color-charcoal); }
.plates { gap: 1rem; }
.plates__item { width: 100%; }
.plates__img { width: min(100%, 480px); margin-inline: auto; aspect-ratio: 1; object-fit: contain; }

/* ── terms, sitemap, legal ─────────────────────────────────────────────────────────────────────────────── */
.terms { align-items: start; }
.toc { border: 1px solid var(--color-slate); padding: 1.25rem; font-size: var(--text-sm); }
@media (min-width: 900px) { .toc { position: sticky; top: 1rem; max-height: calc(100dvh - 2rem); overflow-y: auto; } }
.toc__h { font-size: var(--text-h3); margin-bottom: 0.75rem; color: var(--color-charcoal); }
.toc ol { margin: 0; padding-left: 1.5rem; }
.toc a { display: inline-block; padding-block: 0.25rem; color: var(--color-slate); text-transform: uppercase; text-decoration: none; }
.toc a:hover { color: var(--color-teal); text-decoration: underline; }
.legal { max-width: 56rem; }
.legal h2 { font-size: var(--text-h3); color: var(--color-teal); text-transform: uppercase; margin: 2rem 0 0.75rem; scroll-margin-top: 1rem; }
.legal h3 { font-size: var(--text-lead); color: var(--color-charcoal); margin: 1rem 0 0.5rem; font-weight: 600; }
.legal ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.legal li { margin-bottom: 0.35rem; }
.pending { border: 2px dashed var(--color-gold); padding: 1rem; color: var(--color-charcoal); }
.smap { display: grid; gap: 0.25rem; margin-top: 1rem; }
.smap a { display: inline-flex; min-height: var(--tap); align-items: center; font-size: var(--text-lead); }

/* ── review page (Elementor canvas: no header/footer, as before) ───────────────────────────────────────── */
.is-canvas { background: var(--color-stone); }
.canvas { max-width: 64rem; margin-inline: auto; padding: 1.5rem var(--gut) 3rem; }
.canvas__logo { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.rcards { display: grid; gap: 1rem; }
.rcard { background: var(--color-white); padding: 1.5rem; }
.rcard__logo img { margin-inline: auto; } /* the width/height attributes reserve the box (no shift while the SVG loads) */
.rcard .stars { justify-content: flex-start; }
.stars--gold { color: var(--color-gold); }
.rcard__name { color: var(--color-charcoal); }

/* ── footer ────────────────────────────────────────────────────────────────────────────────────────────── */
/* the plate above the footer: tucked under the footer's top edge, its upper part showing (old footer) */
.plate { display: flex; justify-content: center; align-items: flex-start; margin: var(--sec) auto 0; padding-inline: var(--gut); width: min(100%, calc(600px + 2 * var(--gut))); aspect-ratio: 600 / 380; overflow: hidden; }
/* brief §2.D.1: the 600 px PNG is never shown wider than it is */
.plate__img { width: min(100%, 600px); }
.ftr { background: var(--color-teal); color: var(--color-mist); position: relative; }
/* the berry pattern as the old two bands: at the top of the footer and above the copyright bar */
.ftr::before, .ftr__copy::before { content: ''; position: absolute; left: 0; right: 0; height: clamp(56px, 7vw, 90px); background: url(/img/myrtales-white.27c76fa819.svg) 0 0 / 50px auto repeat; opacity: 0.12; pointer-events: none; }
.ftr::before { top: 0; }
.ftr__copy::before { bottom: 100%; }
.ftr__in { position: relative; max-width: var(--max); margin-inline: auto; padding: clamp(5rem, 9vw, 7.5rem) var(--gut); display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .ftr__in { grid-template-columns: repeat(3, 1fr); } }
.ftr__h { color: var(--color-stone); font-size: var(--text-foot); font-weight: 400; padding-bottom: 0.75rem; margin-bottom: 1.25rem; border-bottom: 1px dashed var(--color-mist); display: inline-block; }
.ftr a { color: var(--color-stone); }
.ftr a:hover { color: var(--color-white); }
.ftr strong { color: var(--color-white); }
/* opening hours: always visible, never animated (brief §2.B.7, §3.8) */
.fboxes { display: grid; gap: 1.25rem; }
.fbox { display: grid; grid-template-columns: 1.75rem 1fr; column-gap: 0.5rem; }
.fbox__i { grid-row: span 2; color: var(--color-mist); padding-top: 0.2rem; }
.fbox__i .ico { width: 18px; height: 18px; }
.fbox__t { font-size: var(--text-h3); font-weight: 300; text-transform: uppercase; color: var(--color-stone); line-height: 1.25; }
.fbox__d { color: var(--color-mist); }
.ftr__text p { margin: 0 0 0.5rem; }
.ftr__sub { margin: 1rem 0 0; font-size: var(--text-h3); font-weight: 300; color: var(--color-stone); }
.ftr__sub--first { margin: 0 0 0.5rem; }
.social--ftr .social__a { color: var(--color-stone); }
.social--ftr .ico { width: 26px; height: 26px; }
.ftr__addr a { text-decoration: none; }
.ftr__legal { margin-top: 1rem; display: grid; gap: 0.25rem; }
.ftr__legal a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--tap); text-decoration: none; }
.ftr__legal .ico { width: 18px; height: 18px; color: var(--color-stone); }
/* copyright bar (brief A4): stone on slate, 14 px */
.ftr__copy { position: relative; background: var(--color-slate); color: var(--color-stone); text-align: center; font-size: var(--text-xs); padding: 0.75rem var(--gut); }
.ftr__copy p { margin: 0; }

/* the sticky Call / Reserve bar on a phone (brief §3.9, Head of Design 5b) */
.callbar { display: none; }
@media (max-width: 767px) {
  .callbar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--color-teal); border-top: 1px solid var(--color-mist); }
  .callbar__a { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; color: var(--color-white); text-decoration: none; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
  .callbar__a + .callbar__a { border-left: 1px solid var(--color-mist); }
  .callbar__a .ico { width: 20px; height: 20px; }
  .callbar__a:hover { color: var(--color-mist); }
  body:not(.is-canvas) { padding-bottom: 48px; }
}

/* menu: the wine sprig beside each Wine List heading */
.mcat__sprig { display: inline-block; width: 40px; vertical-align: middle; margin-right: 0.5rem; }
.dish__d { white-space: pre-line; }
.mcat__rule { display: flex; align-items: center; gap: 0; margin-bottom: 0.75rem; }
.mcat__rule::after { content: ''; width: 160px; border-top: 4px dashed var(--color-rule-light); }
.mcat__icon { width: 44px; height: 44px; padding: 8px; border-radius: var(--radius-round); background: var(--color-rule-light); opacity: 0.8; }
.menu__h { position: relative; display: grid; place-items: center; }
.menu__hbg { grid-area: 1 / 1; opacity: 0.5; }
.menu__ht { grid-area: 1 / 1; position: relative; }
/* the gallery's divider: the old thin line, 80 % wide */
.divider { margin: 1.5rem auto; width: 80%; border: 0; border-top: 2px solid var(--color-stone); }

.review:focus-visible { outline: 3px solid var(--color-teal); outline-offset: 2px; }