/*
  (a) unhurried · (b) Cormorant Garamond + Mulish · (c) menu-board asymmetry · (d) hand-cut irregular coral price blob, a slightly different shape per dish

  Tokens mirror design.md. Change design.md first, then this block.
*/

:root {
  /* Colour 60 / 30 / 10 — ground / deep / accent. Ink and line are measured from the client's menu. */
  --c-ground: #F7F4EF;
  --c-deep: #3A2A20;
  --c-accent: #FF7B52;
  --c-ink: #3C3B3A;
  --c-line: #D5D6D0;

  /* 8-pt space */
  --s-half: 4px;
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --s-8: 64px;
  --s-10: 80px;
  --s-12: 96px;
  --s-16: 128px;

  --r-card: 10px;
  --r-panel: 12px;
  --r-pill: 999px;

  --shadow-rest: 0 2px 8px color-mix(in srgb, var(--c-deep) 10%, transparent);
  --shadow-lift: 0 8px 24px color-mix(in srgb, var(--c-deep) 16%, transparent);
  --shadow-pill: 0 4px 24px color-mix(in srgb, var(--c-deep) 8%, transparent);

  --header-offset: 24px;
  --header-pill: 64px;
  --header-h: calc(var(--header-offset) + var(--header-pill));
  --pill-max: 880px;
  --wrap: 1200px;
  --prose: 65ch;
  --bar-h: 64px;

  --f-display: "Cormorant Garamond", Georgia, serif;
  --f-body: "Mulish", "Segoe UI", sans-serif;
  --f-mark: "Mulish", "Segoe UI", sans-serif; /* Jost failed the glyph gate (no і ї є ґ) */
  --f-hand: "Caveat", "Mulish", cursive;

  --t-h1: clamp(3.5rem, 11vw, 7.5rem);
  --t-h2: clamp(2.25rem, 5vw, 3.5rem);
  --t-h3: 1.5rem;
  --t-dish: 1.125rem;
  --t-price: 1.375rem;
  --t-lead: 1.1875rem;
  --t-body: 1.0625rem;
  --t-label: .8125rem;

  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --t-quick: 160ms;
  --t-calm: 240ms;
  --marquee: 90s;
}

/* ------------------------------------------------------------------ fonts — self-hosted woff2 (OFL), UA + HU subsets */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/mulish-400-700-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/mulish-400-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/mulish-400-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/mulish-400-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/caveat-500-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/caveat-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/caveat-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/caveat-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ base */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html.is-locked { overflow: hidden; }

body {
  margin: 0;
  background: var(--c-ground);
  color: var(--c-ink);
  font: 400 var(--t-body) / 1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, figure, h1, h2, h3, h4, dl, dd { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.05;
  color: var(--c-deep);
}
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: var(--s-half);
}

[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

.wrap {
  width: min(var(--wrap), 100% - 2 * var(--s-3));
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 40;
  padding: var(--s-1) var(--s-2);
  background: var(--c-deep);
  color: var(--c-ground);
  border-radius: var(--r-card);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.label {
  font: 700 var(--t-label) / 1.5 var(--f-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-deep);
}

.section { padding-block: var(--s-16); }
.section__head {
  display: grid;
  gap: var(--s-2);
  max-width: var(--prose);
  margin-bottom: var(--s-8);
}

/* ------------------------------------------------------------------ links & actions */

/* W3 label roll: the span slides up while its clip slides down by the same amount,
   so the visible window stays put and the text-shadow copy rolls into it. */
.roll {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-inline: var(--s-2);
  font-weight: 700;
  text-decoration: none;
}
.roll > span {
  display: block;
  line-height: 1.4;
  text-shadow: 0 1.4em currentColor;
  clip-path: inset(0 -2px);
  transition:
    transform var(--t-quick) var(--ease-out),
    clip-path var(--t-quick) var(--ease-out);
}
.roll:hover > span,
.roll:focus-visible > span {
  transform: translateY(-1.4em);
  clip-path: inset(1.4em -2px -1.4em);
}
.roll--line { padding-inline: 0; }
.roll--line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 1px;
  background: currentColor;
}

.cta {
  display: inline-flex;
  border: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-inline: var(--s-4);
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-deep);
  font: 700 1rem / 1 var(--f-body);
  text-decoration: none;
  transition:
    background-color var(--t-quick) var(--ease-out),
    color var(--t-quick) var(--ease-out);
}
.cta:hover,
.cta:focus-visible {
  background: var(--c-deep);
  color: var(--c-ground);
}
.cta--small { padding-inline: var(--s-3); }

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-left: .28em; /* balances the trailing letter-spacing */
  font: 500 1.125rem / 1 var(--f-mark);
  letter-spacing: .28em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-deep);
}

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

.masthead {
  position: fixed;
  top: var(--header-offset);
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  padding-inline: var(--s-2);
  pointer-events: none;
}
.masthead__pill {
  pointer-events: auto;
  width: min(100%, var(--pill-max));
  height: var(--header-pill);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-2);
  padding-inline: var(--s-1);
  background: color-mix(in srgb, var(--c-ground) 82%, transparent);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-pill);
}
.masthead__nav {
  display: flex;
  gap: var(--s-1);
  justify-self: start;
}
.masthead__actions {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  justify-self: end;
}
.masthead .wordmark { grid-column: 2; }

.toggle {
  display: none;
  position: relative;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-deep);
  cursor: pointer;
  transition: background-color var(--t-quick) var(--ease-out);
}
.toggle:hover { background: color-mix(in srgb, var(--c-deep) 8%, transparent); }
.toggle__bars,
.toggle__bars::before,
.toggle__bars::after {
  position: absolute;
  left: 14px;
  right: 14px;
  height: 2px;
  background: currentColor;
}
.toggle__bars { top: 23px; transition: background-color var(--t-quick); }
.toggle__bars::before,
.toggle__bars::after {
  content: "";
  left: 0;
  right: 0;
  transition: transform var(--t-calm) var(--ease-out);
}
.toggle__bars::before { transform: translateY(-6px); }
.toggle__bars::after { transform: translateY(6px); }
.toggle[aria-expanded="true"] .toggle__bars { background: transparent; }
.toggle[aria-expanded="true"] .toggle__bars::before { transform: rotate(45deg); }
.toggle[aria-expanded="true"] .toggle__bars::after { transform: rotate(-45deg); }

/* Overlay is a sibling of the header (never a child). Resting state is fully inert. */
.drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 25;
  align-content: center;
  justify-items: center;
  padding: calc(var(--header-h) + var(--s-3)) var(--s-3) calc(var(--bar-h) + var(--s-3));
  background: var(--c-deep);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--t-calm) var(--ease-out),
    visibility 0s linear var(--t-calm);
}
.drawer.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--t-calm) var(--ease-out), visibility 0s;
}
.drawer__links {
  display: grid;
  gap: var(--s-1);
  text-align: center;
}
.drawer__links a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding-inline: var(--s-3);
  font: 600 2.25rem / 1 var(--f-display);
  color: var(--c-ground);
  text-decoration: none;
  transition: color var(--t-quick) var(--ease-out);
}
.drawer__links a:hover,
.drawer__links a:focus-visible { color: var(--c-accent); }

/* ------------------------------------------------------------------ cards */

.card {
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--c-line);
  box-shadow: var(--shadow-rest);
  transform: rotate(var(--tilt, 0deg));
  transition:
    transform var(--t-calm) var(--ease-out),
    box-shadow var(--t-calm) var(--ease-out);
}
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:is(.pillar, .dish):nth-child(4n + 1) .card { --tilt: -1deg; }
:is(.pillar, .dish):nth-child(4n + 2) .card { --tilt: 1.5deg; }
:is(.pillar, .dish):nth-child(4n + 3) .card { --tilt: -.5deg; }
:is(.pillar, .dish):nth-child(4n + 4) .card { --tilt: 1deg; }
:is(.pillar, .dish):hover .card,
.card:hover {
  transform: translateY(-4px) rotate(0deg);
  box-shadow: var(--shadow-lift);
}

/* ------------------------------------------------------------------ 1. hero */

.hero { padding-block: calc(var(--header-h) + var(--s-6)) var(--s-12); }
.hero__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--s-8);
  align-items: center;
}
.hero__text {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
}
.hero h1 {
  font-size: var(--t-h1);
  line-height: .95;
  letter-spacing: -.01em;
}
.hero__sub {
  max-width: 24ch;
  font: 500 clamp(1.375rem, 2.4vw, 1.875rem) / 1.2 var(--f-display);
  color: var(--c-deep);
}
.hero__line {
  max-width: 40ch;
  font-size: var(--t-lead);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.nap {
  width: 100%;
  max-width: 32rem;
  border-top: 1px solid var(--c-line);
}
.nap > div {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--s-2);
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid var(--c-line);
}
.nap dt {
  font: 700 var(--t-label) / 1.5 var(--f-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-deep);
}
.nap a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--c-line);
  transition: color var(--t-quick), text-decoration-color var(--t-quick);
}
.nap a:hover,
.nap a:focus-visible {
  color: var(--c-deep);
  text-decoration-color: var(--c-accent);
}

/* The client's menu cover: photo in a lopsided organic shape, a hairline ring slipped off-centre behind it. */
.hero__photo {
  position: relative;
  isolation: isolate;
  justify-self: end;
  width: min(100%, 440px);
}
.hero__photo img {
  width: 100%;
  aspect-ratio: 849 / 769;
  object-fit: cover;
  border-radius: 62% 38% 46% 54% / 55% 42% 58% 45%;
}
.hero__photo::before {
  content: "";
  position: absolute;
  inset: -4% -7% 3% 5%;
  z-index: -1;
  border: 1px solid var(--c-ink);
  border-radius: 48% 52% 60% 40% / 45% 58% 42% 55%;
  transform: rotate(8deg);
  pointer-events: none;
}

/* ------------------------------------------------------------------ 2. Що у нас */

.pillars__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  align-items: start;
}
.pillar {
  display: grid;
  gap: var(--s-2);
  align-content: start;
}
.pillar .card {
  aspect-ratio: 4 / 5;
  margin-bottom: var(--s-1);
}
.pillar:nth-child(2) { margin-top: var(--s-12); }
.pillar:nth-child(2) .card { aspect-ratio: 3 / 4; }
.pillar:nth-child(3) { margin-top: var(--s-4); }
.pillar:nth-child(4) { margin-top: var(--s-16); }
.pillar:nth-child(4) .card { aspect-ratio: 1; }
.pillar p { max-width: 28ch; }

.marquee {
  margin-top: var(--s-12);
  overflow: hidden;
}
.marquee__track {
  display: flex;
  width: max-content;
  padding-block: var(--s-2);
  animation: drift var(--marquee) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee li { margin-right: var(--s-3); }
.marquee img {
  width: auto;
  height: 240px;
  border-radius: var(--r-card);
}
.marquee li:nth-child(odd) img { transform: rotate(-1deg); }
.marquee li:nth-child(even) img { transform: rotate(1.5deg); }

@keyframes drift {
  to { transform: translateX(-50%); }
}

/* ------------------------------------------------------------------ 3. Будинок — the clay under the wash */

.house {
  background: var(--c-deep);
  color: var(--c-ground);
}
.house h2 { color: var(--c-ground); }
.house .label { color: var(--c-accent); }
.house__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s-10);
  align-items: center;
}
.house__photos {
  position: relative;
  aspect-ratio: 4 / 5;
}
.house__photos .card { position: absolute; }
.house__photos .card:first-child {
  inset: 0 16% 34% 0;
  --tilt: -1deg;
}
.house__photos .card:last-child {
  inset: 42% 0 0 40%;
  --tilt: 1.5deg;
}
.house__text {
  display: grid;
  gap: var(--s-3);
  max-width: var(--prose);
}
.pending {
  padding: var(--s-2) var(--s-3);
  border: 1px dashed currentColor;
  border-radius: var(--r-panel);
  font: 700 var(--t-label) / 1.6 var(--f-body);
  letter-spacing: .06em;
}

/* ------------------------------------------------------------------ 4. Меню */

.menu__grid {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: var(--s-8);
  align-items: start;
}
.menu__rail {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  display: grid;
  gap: var(--s-3);
  justify-items: start;
}
.menu__index .roll { padding-inline: 0; }
.menu__pdf { margin-top: var(--s-10); }

.group + .group { margin-top: var(--s-12); }
.group__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-line);
}
.group__head h3 { letter-spacing: .06em; }
.group__cur {
  display: inline-block;
  font: 500 1.5rem / 1 var(--f-hand);
  color: var(--c-deep);
  transform: rotate(-4deg);
}
.group__note {
  margin-top: var(--s-3);
  font-style: italic;
}

.dishes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--s-8) var(--s-4);
}
.dish {
  position: relative;
  display: grid;
  gap: var(--s-1);
  align-content: start;
  container-type: inline-size;
}
.dish__photo {
  aspect-ratio: 1;
  margin-bottom: var(--s-2);
}
.dish__name {
  font: 600 var(--t-dish) / 1.25 var(--f-display);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dish__desc { font-size: 1rem; }

.price {
  font: 600 var(--t-price) / 1 var(--f-display);
  font-variant-numeric: lining-nums;
  color: var(--c-deep);
  white-space: nowrap;
}
.dish--plain .price { margin-top: var(--s-1); }

/* (d) the hand-cut blob: three irregular shapes rotate through the dishes. */
.price--blob {
  position: absolute;
  top: calc(100cqi - 2.2em);
  right: var(--s-1);
  z-index: 1;
  display: grid;
  place-items: center;
  min-inline-size: 3.25em;
  block-size: 2.6em;
  padding-inline: .55em;
  background: var(--c-accent);
  border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%;
}
.dish:nth-child(3n + 2) .price--blob { border-radius: 45% 55% 40% 60% / 55% 45% 58% 42%; }
.dish:nth-child(3n + 3) .price--blob { border-radius: 52% 48% 62% 38% / 40% 52% 48% 60%; }

/* The drinks board */
.group--board {
  padding: var(--s-6);
  border-radius: var(--r-panel);
  background: var(--c-deep);
  color: var(--c-ground);
}
.group--board h3,
.group--board .price { color: var(--c-ground); }
.group--board .group__head { border-bottom-color: color-mix(in srgb, var(--c-ground) 22%, var(--c-deep)); }
.group--board .group__cur { color: var(--c-accent); }
.drinks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--s-8);
}
.drink {
  display: flex;
  align-items: baseline;
  gap: var(--s-1);
  padding-block: var(--s-1);
}
.drink__desc {
  display: block;
  font-size: 1rem;
}
.drink__lead {
  flex: 1;
  min-width: var(--s-3);
  border-bottom: 1px dotted color-mix(in srgb, var(--c-ground) 40%, var(--c-deep));
}

/* ------------------------------------------------------------------ 5. Google strip */

.rating { border-block: 1px solid var(--c-line); }
.rating__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding-block: var(--s-6);
  font: 700 1.125rem / 1.3 var(--f-body);
  color: var(--c-deep);
  text-align: center;
  text-decoration: none;
}
.rating__score {
  margin-right: var(--s-1);
  font: 600 clamp(3rem, 7vw, 4.5rem) / 1 var(--f-display);
  vertical-align: middle;
}
.rating__star,
.rating__arrow {
  width: var(--s-4);
  height: var(--s-4);
  flex: none;
  transition: transform var(--t-calm) var(--ease-out);
}
.rating__star { fill: var(--c-accent); }
.rating__link:hover .rating__star,
.rating__link:focus-visible .rating__star { transform: rotate(72deg) scale(1.1); }
.rating__link:hover .rating__arrow,
.rating__link:focus-visible .rating__arrow { transform: translate(4px, -4px); }

/* ------------------------------------------------------------------ 6. Як нас знайти */

.visit__grid {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: var(--s-10);
  align-items: center;
}
.visit__text {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
}
.visit__nap { display: grid; }
.visit__nap a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font: 500 clamp(1.5rem, 3vw, 2rem) / 1.2 var(--f-display);
  color: var(--c-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: var(--c-line);
  transition: text-decoration-color var(--t-quick);
}
.visit__nap a:hover,
.visit__nap a:focus-visible { text-decoration-color: var(--c-accent); }
.visit__note { font-weight: 700; }
.visit__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}
.visit__photo {
  aspect-ratio: 4 / 3;
  --tilt: 1.5deg;
}

/* ------------------------------------------------------------------ 7. footer */

.footer {
  padding-block: var(--s-10);
  background: var(--c-deep);
  color: var(--c-ground);
}
.footer__grid {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
}
.footer .wordmark {
  padding-left: 0;
  font-size: 1.5rem;
  color: var(--c-ground);
}
.footer a:not(.wordmark) {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  text-underline-offset: 4px;
  transition: color var(--t-quick);
}
.footer a:not(.wordmark):hover,
.footer a:not(.wordmark):focus-visible { color: var(--c-accent); }

/* ------------------------------------------------------------------ mobile bottom bar */

.bar { display: none; }

/* ------------------------------------------------------------------ the one breakpoint */

@media (max-width: 1080px) {
  body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }

  .masthead { padding-inline: var(--s-2); }
  .masthead__pill {
    width: 100%;
    grid-template-columns: 48px 1fr 48px;
  }
  .masthead__nav,
  .masthead__actions { display: none; }
  .masthead .wordmark { justify-self: center; }
  .toggle {
    display: block;
    grid-column: 3;
  }
  .drawer { display: grid; }

  .bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-1);
    padding: var(--s-1) var(--s-1) calc(var(--s-1) + env(safe-area-inset-bottom));
    background: var(--c-deep);
  }
  .bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border-radius: var(--r-card);
    font: 700 1rem / 1 var(--f-body);
    color: var(--c-ground);
    text-decoration: none;
    transition: background-color var(--t-quick), transform var(--t-quick);
  }
  .bar a:first-child {
    background: var(--c-accent);
    color: var(--c-deep);
  }
  .bar a:hover,
  .bar a:active { transform: translateY(1px); }
  .bar a:not(:first-child):hover,
  .bar a:not(:first-child):active { background: color-mix(in srgb, var(--c-ground) 12%, var(--c-deep)); }

  .section { padding-block: var(--s-12); }
  .section__head { margin-bottom: var(--s-6); }

  .hero { padding-block: calc(var(--header-h) + var(--s-3)) var(--s-10); }
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
  .hero__text { gap: var(--s-2); }
  .hero__photo {
    justify-self: center;
    width: min(88%, 400px);
  }

  .pillars__grid {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }
  .pillar,
  .pillar:nth-child(2),
  .pillar:nth-child(3),
  .pillar:nth-child(4) {
    width: 88%;
    margin-top: 0;
  }
  .pillar:nth-child(even) { justify-self: end; }
  .marquee img { height: 200px; }

  .house__grid,
  .visit__grid {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }
  .house__photos { aspect-ratio: 1; }

  .menu__grid {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
  .menu__rail { position: static; }
  .menu__index {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--s-3);
  }
  .menu__pdf { margin-top: var(--s-8); }

  .dishes {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
  .dish {
    grid-template-columns: 6rem 1fr;
    column-gap: var(--s-3);
    row-gap: var(--s-half);
    container-type: normal;
  }
  .dish > :not(.dish__photo, .price--blob) { grid-column: 2; }
  .dish--plain > * { grid-column: 1 / -1; }
  .dish__photo {
    grid-row: 1 / span 3;
    margin-bottom: 0;
  }
  .price--blob {
    top: calc(6rem - 1.6em);
    left: calc(6rem - 2.6em);
    right: auto;
    font-size: 1.125rem;
  }

  .group--board { padding: var(--s-3); }
  .drinks { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .marquee { overflow-x: auto; }
}

/* ------------------------------------------------------------------ admin.html only */

.admin [hidden] { display: none !important; }

.adm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: var(--s-10);
  border-bottom: 1px solid var(--c-line);
}
.adm-head .wordmark { padding-left: 0; }
.adm-main {
  display: grid;
  gap: var(--s-4);
  max-width: 56rem;
  padding-block: var(--s-6) var(--s-12);
}
.adm-main h1 { font-size: var(--t-h2); }
.adm-main > section {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
}
[data-status] {
  min-height: 1.6em;
  font-weight: 700;
  color: var(--c-deep);
}
[data-status].is-error {
  padding-left: var(--s-2);
  border-left: var(--s-half) solid var(--c-accent);
}
[data-groups] {
  display: grid;
  gap: var(--s-8);
  width: 100%;
}
.adm-group {
  display: grid;
  gap: var(--s-2);
}
.adm-group h2 {
  padding-bottom: var(--s-1);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--t-h3);
  letter-spacing: .06em;
}
.adm-item {
  display: grid;
  grid-template-columns: 6rem 1fr 10rem;
  gap: var(--s-2);
  align-items: start;
  padding: var(--s-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-panel);
}
.adm-item--new { border-style: dashed; }
.adm-photo {
  grid-column: 1;
  grid-row: 1 / span 4;
}
.adm-photo img {
  width: 6rem;
  height: 6rem;
  object-fit: cover;
  border-radius: var(--r-card);
}
.adm-item > label {
  grid-column: 2;
  display: grid;
  gap: var(--s-half);
  font: 700 var(--t-label) / 1.4 var(--f-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-deep);
}
.adm-item > .adm-price,
.adm-item > .adm-check { grid-column: 3; }
.adm-item > .adm-wide,
.adm-actions { grid-column: 2 / -1; }
.adm-item input:not([type="checkbox"]),
.adm-item textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-ground);
  color: var(--c-ink);
  font: 400 1rem / 1.4 var(--f-body);
  letter-spacing: 0;
  text-transform: none;
}
.adm-item input[type="file"] {
  padding-inline: 0;
  border: 0;
}
.adm-item input:user-invalid { border-color: var(--c-accent); }
.adm-item > .adm-check {
  display: flex;
  align-items: center;
  align-self: end;
  gap: var(--s-1);
  min-height: 48px;
}
.adm-check input {
  width: var(--s-3);
  height: var(--s-3);
  accent-color: var(--c-deep);
}
.adm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}
.adm-delete {
  min-height: 48px;
  padding-inline: var(--s-3);
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-deep);
  font: 700 1rem / 1 var(--f-body);
  cursor: pointer;
  transition: background-color var(--t-quick), color var(--t-quick);
}
.adm-delete:hover,
.adm-delete:focus-visible {
  background: var(--c-deep);
  color: var(--c-ground);
}
.cta:disabled {
  cursor: progress;
  background: var(--c-line);
  color: var(--c-ink);
}

@media (max-width: 1080px) {
  .adm-item { grid-template-columns: 1fr; }
  .adm-photo,
  .adm-item > label,
  .adm-item > .adm-price,
  .adm-item > .adm-check,
  .adm-item > .adm-wide,
  .adm-actions {
    grid-column: 1;
    grid-row: auto;
  }
}