/* Pelmeni bistro, Batumi. Khokhloma lacquer: gold and red brush painting on black lacquer.
   Base rules describe the final state. Motion only describes the way there, and every hidden
   starting state lives under html.js:not(.no-hide) inside prefers-reduced-motion: no-preference. */

@font-face { font-family: "Ruslan Display"; src: url(/fonts/ruslan-display.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Kurale"; src: url(/fonts/kurale.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url(/fonts/alegreya-sans-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url(/fonts/alegreya-sans-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Noto Serif Georgian"; src: url(/fonts/noto-serif-georgian.woff2) format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+10A0-10FF, U+1C90-1CBF, U+20BE; }
@font-face { font-family: "Lari"; src: url(/fonts/lari.woff2) format("woff2"); font-display: swap; unicode-range: U+20BE; }

:root {
  --lacquer: #0e0b0a;
  --lacquer-2: #19110f;
  --lacquer-3: #241815;
  --red: #c1121f;
  --red-deep: #8f0c16;
  --red-text: #f0525a;
  --gold: #d4a017;
  --gold-light: #f2cf6a;
  --gold-deep: #9a6f0c;
  --cream: #f6ead0;
  --cream-dim: #d9c8a6;
  --ink: #0e0b0a;
  --display: "Ruslan Display", "Lari", "Kurale", Georgia, serif;
  --head: "Kurale", "Lari", Georgia, serif;
  --body: "Alegreya Sans", "Lari", system-ui, sans-serif;
  --wrap: 1180px;
  --pad: clamp(18px, 4vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --pop: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: dark;
}
.lang-ka, .page-chooser [lang="ka"], .page-404 [lang="ka"] {
  --display: "Noto Serif Georgian", "Lari", serif;
  --head: "Noto Serif Georgian", "Lari", serif;
  --body: "Noto Serif Georgian", "Alegreya Sans", "Lari", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0;
  /* lacquer gloss: a warm reflection where the hero painting sits */
  background: radial-gradient(48vw 60vh at 72% 34vh, rgba(120, 40, 22, .3), transparent 70%) no-repeat, radial-gradient(30vw 30vh at 12% 10vh, rgba(212, 160, 23, .07), transparent 70%) no-repeat, var(--lacquer);
  color: var(--cream);
  font: 400 clamp(19px, 1.1vw + 13px, 21px)/1.55 var(--body);
  overflow-x: clip;
}
.lang-ka body, body.lang-ka { font-size: clamp(16px, 0.9vw + 11px, 18px); line-height: 1.7; }
img, svg { max-width: 100%; }
a { color: var(--gold-light); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: #fff1c4; }
:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-weight: 400; line-height: 1.12; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; }
address { font-style: normal; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--gold); color: var(--ink); padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.skip:focus { top: 12px; }
.nw { white-space: nowrap; }

/* ---------- painted strokes (art.mjs) ---------- */
.sf { fill: url(#gold); }
.st-red .sf, .sp-red { fill: url(#red); }
.sl { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1; }
.st-red .sl { stroke: var(--red); }
.lf-red .lb { fill: url(#red); }
.lf-gold .lb { fill: url(#gold); }
.lv { fill: none; stroke: var(--gold-light); stroke-width: 1; stroke-linecap: round; }
.lf-gold .lv { stroke: #6e0810; }
.br { transform-box: fill-box; transform-origin: center; }
.bb { fill: url(#berry); }
.bg { fill: none; stroke: #ffd98a; stroke-width: 1.2; stroke-linecap: round; opacity: .9; }
.bd { fill: #2a0607; }
.dpb { fill: url(#dough); stroke: #7a4e17; stroke-width: 1.5; }
.dps, .dpe { fill: none; stroke: #9c6b26; stroke-width: 1.4; stroke-linecap: round; }
.dph { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; opacity: .55; }
.bowl-body { fill: url(#lacquer); }
.bowl-in { fill: url(#inside); }
.bowl-rim { fill: none; stroke: url(#gold); stroke-width: 5; }
.bowl-rim-back { stroke-width: 4; opacity: .9; }
.bowl-foot { fill: url(#gold); }
.bowl-shadow { fill: #000; opacity: .45; }
.bowl-gloss { fill: none; stroke: #fff; stroke-opacity: .16; stroke-width: 7; stroke-linecap: round; }
.hero-glow { fill: url(#glow); }
.wine { fill: url(#red); }
.wine-top { fill: #e3343f; }
.glass-line { fill: none; stroke: url(#gold); stroke-width: 3; stroke-linecap: round; }
.glass-glint { fill: none; stroke: #fff; stroke-opacity: .35; stroke-width: 3; stroke-linecap: round; }
.spoon-handle, .spoon-bowl { fill: url(#gold); }
.spoon-in { fill: url(#red); }
.spoon-paint { fill: none; stroke: var(--red-deep); stroke-width: 3; stroke-linecap: round; }
.spoon-glint { fill: none; stroke: #fff; stroke-opacity: .5; stroke-width: 3; stroke-linecap: round; }
.shrimp path { fill: none; stroke: #f08a5d; stroke-width: 5; stroke-linecap: round; }
.shrimp .shrimp-l { stroke-width: 1.5; stroke: #f6b48f; }
.carrot path { fill: none; stroke: #f07a1a; stroke-width: 3.2; stroke-linecap: round; }
.broth { fill: #e6b450; opacity: .9; }
.noodle path { fill: none; stroke: #fbecc4; stroke-width: 3; stroke-linecap: round; }
.steam path { fill: none; stroke: var(--cream); stroke-width: 2.2; stroke-linecap: round; opacity: .55; }
.plate { fill: url(#gold); }
.plate-rim { fill: var(--lacquer-3); }
.syr-side { fill: #c98a3b; }
.syr-top { fill: #f0c477; stroke: #b67a2e; stroke-width: 1.2; }
.cream { fill: #fff6e6; }
.cup { fill: url(#red); }
.cup-h { fill: none; stroke: url(#gold); stroke-width: 6; stroke-linecap: round; }
.cup-top { fill: #3a2116; stroke: url(#gold); stroke-width: 3; }
.cherry-st { fill: none; stroke: #7a8a2a; stroke-width: 2; stroke-linecap: round; }
.mash { fill: #f6e3b4; stroke: #c9a463; stroke-width: 1.2; }
.mash-l { fill: none; stroke: #c9a463; stroke-width: 1.4; stroke-linecap: round; }
.cutlet ellipse { fill: #8a4b22; stroke: #5a2c10; stroke-width: 1.4; }
.cutlet-g { fill: none; stroke: #c98a4b; stroke-width: 2; stroke-linecap: round; }
.sauce-dish ellipse, .sauce-dish path { fill: url(#gold); }
.adjika { fill: url(#red); }
.bread { fill: #d9a35a; stroke: #9c6b26; stroke-width: 1.4; }
.bread-c { fill: none; stroke: #f3d29a; stroke-width: 2; stroke-linecap: round; }
.decanter, .shot { fill: rgba(255, 246, 220, .08); stroke: url(#gold); stroke-width: 3; stroke-linejoin: round; }
.decanter-in, .shot-in { fill: rgba(246, 234, 208, .28); }
.mug { fill: url(#gold); }
.foam { fill: #fff6e6; }
.nuts ellipse { fill: #d9a35a; stroke: #9c6b26; stroke-width: 1; }
.jug { fill: url(#red); }
.tumbler { fill: rgba(255, 246, 220, .1); stroke: url(#gold); stroke-width: 2.5; }
.compote { fill: #b3202c; }
.board { fill: url(#gold); }
.board-h { fill: none; stroke: url(#gold); stroke-width: 7; stroke-linecap: round; }
.snow path { fill: none; stroke: #f6ead0; stroke-width: 2.2; stroke-linecap: round; }
.ic { width: 1.5em; height: 1.5em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic .ib { fill: var(--red); stroke: none; }
.b5 { display: inline-block; vertical-align: middle; }
.b5-off { fill: none; stroke: var(--gold-deep); stroke-width: 1.5; }
.b5-on { fill: url(#gold); }
.b5-st { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; }
.vine, .band-stem { fill: none; stroke: url(#gold); stroke-width: 2.2; stroke-linecap: round; }
.band-stem { stroke-width: 2.6; }
.medal-disc { fill: var(--lacquer); }
.medal-ring { fill: none; stroke: url(#gold); stroke-width: 2; }
.dpf { fill: #fbf0d6; stroke: #7a4e17; stroke-width: 1.4; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 11px 22px; border-radius: 999px;
  background: var(--red); color: #fff7e6; border: 1.5px solid var(--gold);
  box-shadow: inset 0 0 0 3px var(--red), inset 0 0 0 4px rgba(242, 207, 106, .55);
  font: 700 17px/1.15 var(--body); text-decoration: none; text-align: center;
  transition: transform .2s var(--ease), background-color .2s, color .2s;
}
.btn .ic { width: 1.25em; height: 1.25em; }
.btn .ic .ib { fill: var(--gold-light); }
.btn:hover { background: #d81f2c; color: #fff; transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--gold-light); border-color: rgba(212, 160, 23, .7); box-shadow: none; }
.btn-ghost:hover { background: rgba(212, 160, 23, .12); color: #fff1c4; }
.btn-dark { background: var(--ink); color: var(--gold-light); border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 4px rgba(212, 160, 23, .6); }
.btn-dark:hover { background: #241815; color: #fff1c4; }
.btn-sm { min-height: 42px; padding: 8px 16px; font-size: 16px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.center { text-align: center; }
.cta-row.center { justify-content: center; }

/* ---------- header ---------- */
.site-header {
  display: flex; align-items: center; gap: 12px 26px; flex-wrap: wrap;
  max-width: var(--wrap); margin: 0 auto; padding: 16px var(--pad);
  view-transition-name: site-header;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--gold-light); }
/* the bistro's own logo on a cream coaster disc, with a thin gold rim like the lacquer ware */
.logo { border-radius: 50%; }
.logo-mark { display: block; width: 72px; height: 72px; flex: none; border-radius: 50%; box-shadow: 0 0 0 2px var(--lacquer), 0 0 0 3.5px rgba(212, 160, 23, .75); }
.nav { display: flex; gap: 24px; margin-left: auto; }
.nav a { position: relative; color: var(--cream); text-decoration: none; font: 400 20px/1.2 var(--head); padding: 8px 0; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  background: radial-gradient(circle at 4px 4px, var(--red) 3.2px, transparent 3.6px) no-repeat, linear-gradient(var(--gold), var(--gold)) 10px 3.5px / calc(100% - 10px) 1.5px no-repeat;
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.nav a:hover { color: var(--gold-light); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: none; }
.nav a[aria-current="page"] { color: var(--gold-light); }
.lang { display: flex; gap: 2px; padding: 3px; border: 1px solid rgba(212, 160, 23, .45); border-radius: 999px; }
.lang a { padding: 5px 10px; border-radius: 999px; color: var(--cream-dim); text-decoration: none; font: 700 14px/1 var(--body); letter-spacing: .06em; }
.lang a:hover { color: var(--gold-light); }
.lang a[aria-current="true"] { background: var(--gold); color: var(--ink); }

/* ---------- hero ---------- */
.hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px 40px; align-items: center;
  max-width: var(--wrap); margin: 0 auto; padding: 18px var(--pad) 36px;
}
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; color: var(--gold); font: 400 19px/1.3 var(--head); letter-spacing: .03em; }
.eyebrow::before { content: ""; width: 34px; height: 12px; flex: none; background: radial-gradient(circle at 6px 6px, var(--red) 5px, transparent 5.5px), linear-gradient(var(--gold), var(--gold)) 12px 5.2px / 22px 1.6px no-repeat; }
.hero h1, .page-head h1 { font-family: var(--display); color: var(--gold-light); font-size: clamp(38px, 4.5vw, 64px); line-height: 1.08; letter-spacing: .01em; }
.lang-ka .hero h1, .lang-ka .page-head h1 { font-weight: 700; font-size: clamp(32px, 3.9vw, 54px); line-height: 1.25; }
.hero .lede { margin: 22px 0 28px; max-width: 34em; font-size: clamp(19px, .6vw + 15px, 22px); color: var(--cream); }
.facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 26px 0 0; padding: 0; list-style: none; color: var(--cream-dim); font-size: 17px; }
.facts li { display: flex; align-items: center; gap: 8px; }
.facts .ic, .where-card .ic, .contact-card .ic { color: var(--gold); }
.hero-visual { position: relative; overflow: hidden; border-radius: 28px; }
.hero-art { display: block; width: 100%; height: auto; aspect-ratio: 640 / 560; }
.hero-visual::after { /* a sheen of light passing over the lacquer and the gilding */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 233, 170, .2) 47%, rgba(255, 246, 220, .34) 50%, rgba(255, 233, 170, .2) 53%, transparent 62%);
  mix-blend-mode: screen; transform: translateX(110%);
}
.w { display: inline-block; }
.drop-dumpling { opacity: 0; }

/* ---------- borders ---------- */
.border { display: block; width: 100%; height: 56px; margin: 0 auto; }
.border-footer { margin-bottom: 8px; }

/* ---------- sections ---------- */
.section { max-width: var(--wrap); margin: 0 auto; padding: clamp(56px, 8vw, 100px) var(--pad); }
.band-red, .band-gold { max-width: none; padding-inline: max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad))); }
.band-red { background: #a90f1b url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2780%27%20height%3D%2780%27%20viewBox%3D%270%200%2080%2080%27%3E%3Cg%20fill%3D%27%23a10e19%27%3E%3Cpath%20d%3D%27M10.1%2070l6.6-10.6%203.7-5.9%203.2-2.7%202.8-1.2%201.9-.1%201.9%20.4%201.6%201.1%201%201.6%20.1%202.1-.3%20.8-.5%20.8-.8%20.7-1%20.4-1.1%20.1-1.1-.4-.9-.9-.2%20.2%20.8%201%201.2%20.7%201.4%20.2%201.4-.2%201.3-.6%201.1-1.1%20.8-1.4%20.2-2.9-1.3-2.9-2.2-2-2.9-1.1-3.1-.2-4.2%201.3-4.6%203.5-4.4%206.7-2.6%2012.6Z%27%2F%3E%3Cpath%20d%3D%27M60.1%2030l-2.7-12.1-4-5.2-4-2.5-3.5-.7-2.5%20.4-2.2%201.1-1.6%201.9-.8%202.3%20.3%202.2%20.7%201.1%20.8%20.8%201.1%20.5%201%20.1%201.1-.2%200-.1-1-.1-.9-.3-.6-.6-.5-.8-.2-.7%20.1-1.6%20.7-1.4%201.2-.9%201.5-.5%201.5%200%202.3%20.8%202.6%201.9%203%204.5%206.4%2010.1Z%27%2F%3E%3Cpath%20d%3D%27M50%2078l6.1-1.2%205.9-1.5%205-.9%205-1.1%201.4-.5%201.7-.7%200%200-1.6-.8-1.8-.6-5.2%20.8-5.2%201.1-5.8%202.5-5.5%202.9Z%27%2F%3E%3Ccircle%20cx%3D%2766%27%20cy%3D%2764%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%2771%27%20cy%3D%2769%27%20r%3D%272.4%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: 80px 80px; box-shadow: inset 0 1px 0 rgba(242, 207, 106, .5), inset 0 -1px 0 rgba(242, 207, 106, .5); }
.band-gold { background: linear-gradient(135deg, #e7bb48, #d4a017 45%, #c08e10); color: var(--ink); }
.band-gold a { color: var(--ink); }
.sec-head { text-align: center; max-width: 46em; margin: 0 auto clamp(30px, 4vw, 48px); }
.sec-head h2, .where h2, .menu-cta h2 { font-family: var(--head); color: var(--gold-light); font-size: clamp(32px, 3.4vw, 50px); }
.band-red .sec-head h2 { color: #ffe2a0; }
.band-gold .sec-head h2, .menu-cta h2, .band-gold h3 { color: var(--ink); }
.lang-ka .sec-head h2, .lang-ka .where h2, .lang-ka .menu-cta h2 { font-weight: 700; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.3; }
.section-intro { margin: 16px auto 0; max-width: 40em; color: var(--cream-dim); }
.band-red .section-intro { color: #fbe9d0; }
.band-gold .section-intro { color: #2a1c0e; }
.more { margin: 36px 0 0; }

/* review topics */
.aspects { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 20px; margin: 0; padding: 0; list-style: none; }
.aspect { text-align: center; }
.medal-box { position: relative; width: min(150px, 100%); margin: 0 auto 10px; }
.medal { display: block; width: 100%; height: auto; }
.medal-disc { fill: var(--lacquer); }
.medal-ring { fill: none; stroke: url(#gold); stroke-width: 3; stroke-dasharray: var(--p) 100; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 60px 60px; }
.medal-wreath { transform-origin: 60px 60px; }
.aspect-pct { position: absolute; inset: 0; display: grid; place-items: center; font: 400 clamp(22px, 2vw, 28px)/1 var(--display); color: var(--gold-light); padding-top: 3px; }
.lang-ka .aspect-pct { font-family: "Ruslan Display", var(--display); }
.aspect h3 { font: 400 clamp(20px, 1.6vw, 24px)/1.2 var(--head); color: #fff4dc; }
.lang-ka .aspect h3 { font-weight: 700; font-size: 19px; }

/* dishes */
.dishes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.dish {
  position: relative; display: flex; flex-direction: column; padding: 22px 24px 24px; border-radius: 26px;
  background: radial-gradient(120% 80% at 50% 0%, #2a1c17, var(--lacquer-2) 60%);
  border: 1px solid rgba(212, 160, 23, .4); box-shadow: 0 18px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 220, 150, .12);
  transition: transform .35s var(--ease), border-color .35s, opacity .8s var(--ease);
}
.dish:hover { transform: translateY(-4px); border-color: rgba(242, 207, 106, .8); }
.dish .sprig { position: absolute; top: 8px; right: 8px; width: 88px; height: 88px; }
.unfurl { transition: transform .6s var(--pop); }
@media (hover: hover) {
  .dish:not(:hover):not(:focus-within) .unfurl { transform: rotate(-38deg) scale(.5); }
  .dish:not(:hover):not(:focus-within) .unfurl.u2 { transform: rotate(40deg) scale(.45); }
}
.dish-pic { margin: -6px auto 4px; width: min(280px, 100%); }
.dish-art { display: block; width: 100%; height: auto; transition: transform .5s var(--pop); transform-origin: 50% 90%; }
.dish:hover .dish-art { transform: rotate(-3deg) scale(1.04); }
.dish h3 { font: 400 clamp(22px, 1.7vw, 26px)/1.2 var(--head); color: var(--gold-light); margin: 6px 0 8px; }
.lang-ka .dish h3 { font-weight: 700; font-size: 20px; }
.dish h3 a { color: inherit; text-decoration: none; }
.dish h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 26px; }
.dish h3 a:hover { text-decoration: underline; }
.dish p { color: var(--cream-dim); margin: 0 0 16px; flex: 1; }
.price-num { font: 400 30px/1 "Ruslan Display", var(--display); color: var(--gold); font-family: "Ruslan Display", "Lari", serif; }
.price-unit { color: var(--cream-dim); font-size: 17px; }

/* ways and amenities on the gold ground */
.ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.way { text-align: left; }
.way .ic { width: 58px; height: 58px; padding: 13px; border-radius: 50%; background: var(--ink); color: var(--gold-light); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px rgba(14, 11, 10, .25); stroke-width: 1.5; }
.way h3 { font: 400 24px/1.2 var(--head); margin: 16px 0 8px; }
.lang-ka .way h3 { font-weight: 700; font-size: 19px; }
.way p { margin: 0; color: #24180c; }
.amen-title { text-align: center; font: 400 26px/1.2 var(--head); margin: clamp(40px, 5vw, 60px) 0 18px; }
.lang-ka .amen-title { font-weight: 700; font-size: 21px; }
.amenities { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.amenities li { display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 17px; }
.amenities .ic { color: var(--gold-light); }

/* rating */
.rating-section { text-align: center; }
.rating {
  position: relative; display: inline-grid; justify-items: center; gap: 8px; padding: 40px 56px 34px; border-radius: 40px;
  color: var(--cream); text-decoration: none; background: radial-gradient(90% 80% at 50% 0%, #2c1d17, var(--lacquer-2) 70%);
  border: 1px solid rgba(212, 160, 23, .55); box-shadow: 0 24px 60px rgba(0, 0, 0, .45), inset 0 0 0 6px var(--lacquer-2), inset 0 0 0 7px rgba(212, 160, 23, .35);
}
.rating:hover { border-color: var(--gold-light); color: var(--cream); }
.rating-num { font: 400 clamp(72px, 9vw, 112px)/1 "Ruslan Display", var(--display); color: var(--gold-light); }
.rating-src { font: 400 22px/1.2 var(--head); color: var(--cream); }
.lang-ka .rating-src { font-weight: 700; font-size: 19px; }
.berries5 { display: inline-flex; gap: 6px; margin: 6px 0; }
.b5 { transition: transform .5s var(--pop); transition-delay: calc(.4s + var(--i) * .12s); }
.rating-count { color: var(--cream-dim); }
.rating-open { color: var(--gold-light); text-decoration: underline; text-underline-offset: .2em; }

/* where */
.where { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px 56px; align-items: center; }
.where .section-intro { margin-left: 0; }
.where-card, .contact-card {
  margin: 0; padding: 28px 30px; border-radius: 26px; background: var(--lacquer-2);
  border: 1px solid rgba(212, 160, 23, .4); box-shadow: inset 0 0 0 5px var(--lacquer-2), inset 0 0 0 6px rgba(212, 160, 23, .2);
}
.where-card p, .contact-card address p { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 18px; }
.where-card strong, .contact-card strong { display: block; font: 400 15px/1.3 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.where-card .ic, .contact-card address .ic { margin-top: 4px; }
.where-card .cta-row { margin-top: 6px; }

/* faq teaser and list */
.qa-list { max-width: 820px; margin: 0 auto; }
.qa { border-top: 1px solid rgba(212, 160, 23, .35); }
.qa:last-child { border-bottom: 1px solid rgba(212, 160, 23, .35); }
.qa summary { display: flex; align-items: center; gap: 14px; padding: 18px 4px; cursor: pointer; list-style: none; font: 400 22px/1.3 var(--head); color: var(--cream); }
.lang-ka .qa summary { font-weight: 700; font-size: 18px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f0565d, var(--red) 55%, #6e0810); box-shadow: 0 0 0 3px rgba(212, 160, 23, .35); transition: transform .4s var(--pop); }
.qa[open] summary::before { transform: scale(1.35); }
.qa summary:hover { color: var(--gold-light); }
.qa p { margin: 0 0 20px 28px; color: var(--cream-dim); }
.faq-list { max-width: 900px; }
.qa-full { padding: 26px 0; border-top: 1px solid rgba(212, 160, 23, .3); }
.qa-full h2 { font: 400 clamp(23px, 2vw, 28px)/1.25 var(--head); color: var(--gold-light); margin-bottom: 10px; }
.lang-ka .qa-full h2 { font-weight: 700; font-size: 20px; }
.qa-full p { margin: 0; color: var(--cream); }

/* inner page head */
.page-head { position: relative; max-width: var(--wrap); margin: 0 auto; padding: clamp(28px, 5vw, 56px) var(--pad) clamp(26px, 4vw, 40px); }
.page-head-inner { max-width: 760px; }
.crumbs { font-size: 16px; color: var(--cream-dim); margin-bottom: 18px; }
.crumbs a { color: var(--gold); }
.page-head .lede { margin: 20px 0 0; font-size: clamp(19px, .6vw + 15px, 22px); color: var(--cream); }
.head-sprig { position: absolute; right: var(--pad); top: 50%; width: clamp(110px, 16vw, 200px); height: auto; transform: translateY(-50%); opacity: .95; }

/* menu page: painted panels with price tables */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.menu-board { columns: 2; column-gap: 26px; padding-top: clamp(36px, 5vw, 60px); }
.menu-panel {
  padding: 22px 26px 18px; border-radius: 26px; background: radial-gradient(120% 70% at 50% 0%, #2a1c17, var(--lacquer-2) 65%);
  border: 1px solid rgba(212, 160, 23, .4); box-shadow: 0 18px 40px rgba(0, 0, 0, .3), inset 0 0 0 5px var(--lacquer-2), inset 0 0 0 6px rgba(212, 160, 23, .18);
  scroll-margin-top: 24px; break-inside: avoid; margin-bottom: 26px;
}
.mp-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.mp-pic { width: 112px; flex: none; }
.mp-pic .dish-art { transform-origin: 50% 80%; }
.menu-panel:hover .mp-pic .dish-art { transform: rotate(-4deg) scale(1.05); }
.mp-head h2 { font: 400 clamp(26px, 2.2vw, 32px)/1.15 var(--head); color: var(--gold-light); }
.lang-ka .mp-head h2 { font-weight: 700; font-size: 22px; line-height: 1.3; }
.mp-head p { margin: 6px 0 0; color: var(--cream-dim); font-size: 17px; line-height: 1.4; }
.menu-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.menu-table thead th { padding: 6px 0 6px 12px; text-align: right; font: 700 14px/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.menu-table thead th:first-child { text-align: left; padding-left: 0; }
.menu-table tbody th { padding: 9px 0; text-align: left; font-weight: 400; color: var(--cream); line-height: 1.3; }
.menu-table td { padding: 9px 0 9px 14px; text-align: right; vertical-align: top; white-space: nowrap; color: var(--gold-light); font-weight: 700; }
.menu-table tbody tr + tr > * { border-top: 1px dashed rgba(212, 160, 23, .28); }
.mi-name { display: block; }
.mi-qty, .mi-note { display: block; color: var(--cream-dim); font-size: 15px; }
.mi-qty { display: inline-block; margin-top: 2px; padding: 0 8px; border-radius: 999px; border: 1px solid rgba(212, 160, 23, .4); }
.mi-own { display: block; }
.mi-own .price-unit { font-weight: 400; font-size: 15px; }
.mi-add td, .mi-add th .mi-name { color: var(--cream-dim); font-style: italic; }
.menu-cta .mc-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; }
.menu-cta .mc-copy h2 { text-align: left; }
.menu-cta .section-intro { margin: 12px 0 18px; }
.band-gold .menu-table thead th, .band-gold .menu-table td { color: var(--ink); }
.band-gold .menu-table tbody th { color: #24180c; }
.band-gold .menu-table tbody tr + tr > * { border-top-color: rgba(14, 11, 10, .3); }
.mc-side { text-align: center; padding: 24px; border-radius: 26px; background: var(--ink); color: var(--cream); }
.mc-side h3 { font: 400 28px/1.2 var(--head); color: var(--gold-light) !important; margin: 4px 0 8px; }
.lang-ka .mc-side h3 { font-weight: 700; font-size: 22px; }
.mc-side p { color: var(--cream-dim); }
.mc-pic { width: min(220px, 70%); margin: 0 auto; }
.mc-side .cta-row { justify-content: center; }
.mc-side .btn-dark { background: var(--red); color: #fff7e6; border-color: var(--gold); box-shadow: inset 0 0 0 3px var(--red), inset 0 0 0 4px rgba(242, 207, 106, .55); }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin: 0; padding-top: 14px; border-top: 1px dashed rgba(212, 160, 23, .4); }
.price-one { display: inline-flex; align-items: baseline; gap: 8px; }

/* contacts */
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.contact-card h2 { font: 400 28px/1.2 var(--head); color: var(--gold-light); margin-bottom: 18px; }
.lang-ka .contact-card h2 { font-weight: 700; font-size: 22px; }
.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { padding: 9px 0; border-bottom: 1px dashed rgba(212, 160, 23, .3); text-align: left; font-weight: 400; }
.hours td { text-align: right; color: var(--gold-light); font-variant-numeric: tabular-nums; }
.link-list { list-style: none; margin: 0; padding: 0; }
.ext { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--cream); text-decoration: none; font-size: 19px; }
.ext .ic { color: var(--gold); }
.ext:hover span { text-decoration: underline; color: var(--gold-light); }
/* two maps: Yandex and Google tabs over one lacquer stage; the open links under it work without JS */
.map-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.map-tab[aria-pressed="true"] { background: var(--gold); color: var(--ink); border-color: var(--gold-light); }
.map {
  position: relative; display: grid; place-items: center; padding: 24px;
  min-height: 360px; border-radius: 28px; overflow: hidden; background: var(--lacquer) url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2780%27%20height%3D%2780%27%20viewBox%3D%270%200%2080%2080%27%3E%3Cg%20fill%3D%27%232e2110%27%3E%3Cpath%20d%3D%27M10.1%2070l6.6-10.6%203.7-5.9%203.2-2.7%202.8-1.2%201.9-.1%201.9%20.4%201.6%201.1%201%201.6%20.1%202.1-.3%20.8-.5%20.8-.8%20.7-1%20.4-1.1%20.1-1.1-.4-.9-.9-.2%20.2%20.8%201%201.2%20.7%201.4%20.2%201.4-.2%201.3-.6%201.1-1.1%20.8-1.4%20.2-2.9-1.3-2.9-2.2-2-2.9-1.1-3.1-.2-4.2%201.3-4.6%203.5-4.4%206.7-2.6%2012.6Z%27%2F%3E%3Cpath%20d%3D%27M60.1%2030l-2.7-12.1-4-5.2-4-2.5-3.5-.7-2.5%20.4-2.2%201.1-1.6%201.9-.8%202.3%20.3%202.2%20.7%201.1%20.8%20.8%201.1%20.5%201%20.1%201.1-.2%200-.1-1-.1-.9-.3-.6-.6-.5-.8-.2-.7%20.1-1.6%20.7-1.4%201.2-.9%201.5-.5%201.5%200%202.3%20.8%202.6%201.9%203%204.5%206.4%2010.1Z%27%2F%3E%3Cpath%20d%3D%27M50%2078l6.1-1.2%205.9-1.5%205-.9%205-1.1%201.4-.5%201.7-.7%200%200-1.6-.8-1.8-.6-5.2%20.8-5.2%201.1-5.8%202.5-5.5%202.9Z%27%2F%3E%3Ccircle%20cx%3D%2766%27%20cy%3D%2764%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%2771%27%20cy%3D%2769%27%20r%3D%272.4%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: 80px 80px;
  border: 1px solid rgba(242, 207, 106, .6);
}
.map-hint { margin: 0; color: var(--gold-light); font: 400 22px/1.3 var(--head); text-align: center; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map.loaded > .map-hint { visibility: hidden; }
html:not(.js) .map-tabs, html:not(.js) .map { display: none; }
.maps > .cta-row { margin-top: 16px; }
.where-card .map-open { margin: -6px 0 18px 38px; }

/* delivery: one button per service, on the gold band of the home page and on its own in contacts */
.delivery { margin-top: clamp(32px, 4vw, 48px); padding: 24px 28px; border-radius: 28px; background: rgba(14, 11, 10, .08); box-shadow: inset 0 0 0 1.5px rgba(14, 11, 10, .35); }
.delivery h3, .delivery h2 { font: 400 26px/1.2 var(--head); margin: 0 0 8px; }
.lang-ka .delivery h3, .lang-ka .delivery h2 { font-weight: 700; font-size: 21px; }
.delivery p { margin: 0 0 16px; max-width: 40em; }
.delivery-section { padding-top: 0; }
.delivery-section .delivery { margin: 0; background: var(--lacquer-2); box-shadow: inset 0 0 0 1px rgba(212, 160, 23, .45); }
.delivery-section .delivery h2 { color: var(--gold-light); }
.delivery-btn { min-width: 150px; }
.band-gold .delivery-btn { color: #fff7e6; }

/* chooser and 404 */
.chooser { max-width: 760px; margin: 0 auto; padding: 32px var(--pad) 64px; text-align: center; }
.chooser .hero-visual { max-width: 520px; margin: 0 auto; }
.big-404 { font: 400 clamp(56px, 10vw, 104px)/1 "Ruslan Display", var(--display); color: var(--gold-light); margin: 8px 0 0; }
.chooser-brand { margin: 8px 0 0; line-height: 0; }
.chooser-brand img { width: clamp(150px, 30vw, 184px); height: auto; border-radius: 50%; box-shadow: 0 0 0 3px var(--lacquer), 0 0 0 5px rgba(212, 160, 23, .75); }
.chooser h1:not(.chooser-brand) { font: 400 clamp(26px, 3vw, 36px)/1.3 var(--head); color: var(--cream); margin: 10px 0 24px; }
.chooser-sub { font: 400 21px/1.4 var(--head); color: var(--gold); margin: 14px 0 6px; }
.chooser-sub [lang="ka"], .chooser .lede [lang="ka"], .chooser h1 [lang="ka"] { font-family: "Noto Serif Georgian", serif; }
.chooser .lede { color: var(--cream-dim); margin-bottom: 22px; }
.lang-btn { min-width: 150px; }

/* footer */
.site-footer { padding: 40px 0 120px; border-top: 1px solid rgba(212, 160, 23, .25); background: linear-gradient(#0e0b0a, #070505); }
.footer-inner { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 28px; max-width: var(--wrap); margin: 0 auto; padding: 16px var(--pad) 0; }
.site-footer .footer-brand { margin: 0 0 14px; }
.footer-brand img { display: block; width: 112px; height: 112px; border-radius: 50%; box-shadow: 0 0 0 2px var(--lacquer), 0 0 0 3.5px rgba(212, 160, 23, .6); }
.site-footer p, .site-footer li { color: var(--cream-dim); font-size: 17px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer-meta { max-width: var(--wrap); margin: 28px auto 0; padding: 18px var(--pad) 0; border-top: 1px solid rgba(212, 160, 23, .18); font-size: 16px; }
@media (min-width: 861px) { .site-footer { padding-bottom: 40px; } }

/* mobile call bar */
.cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: none; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(14, 11, 10, .94); border-top: 1px solid rgba(212, 160, 23, .45); backdrop-filter: blur(8px);
  transition: transform .4s var(--ease);
}
.cta-bar .btn { flex: 1; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .aspects { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dishes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-cta .mc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .site-header { padding-top: 12px; padding-bottom: 8px; gap: 10px 12px; }
  .logo-mark { width: 60px; height: 60px; }
  .lang { margin-left: auto; }
  .nav { order: 4; width: 100%; margin: 0; justify-content: space-between; gap: 8px; border-top: 1px solid rgba(212, 160, 23, .22); padding-top: 4px; }
  .nav a { font-size: 18px; }
  .head-call { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 8px; }
  .hero-visual { order: -1; max-width: 520px; width: 100%; margin: 0 auto; }
  .where { grid-template-columns: 1fr; }
  .menu-board { columns: 1; }
  .head-sprig { display: none; }
  .cta-bar { display: flex; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .logo-mark { width: 56px; height: 56px; }
  .lang a { padding: 5px 8px; }
}
@media (max-width: 620px) {
  .menu-panel { padding: 18px 16px 12px; }
  .mp-pic { width: 84px; }
  .aspects { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
  .dishes, .menu-section .dishes { grid-template-columns: 1fr; }
  .ways { grid-template-columns: 1fr; gap: 22px; }
  .way { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 0 16px; }
  .way .ic { grid-row: span 2; }
  .way h3 { margin: 4px 0 6px; }
  .medal-box { width: 116px; }
  .contact-grid { grid-template-columns: 1fr; }
  .rating { padding: 32px 26px 28px; }
  .footer-inner { grid-template-columns: 1fr; }
  .hero .cta-row .btn { flex: 1 1 100%; }
  .border { height: 44px; }
  .where-card, .contact-card { padding: 22px 20px; }
}

/* ---------- motion ---------- */
/* Endless motion stops when the drawing leaves the screen or the tab is hidden. */
.hero-visual.off *, .hero-visual.off::after, .tab-hidden .hero-visual *, .tab-hidden .hero-visual::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out .32s ease both; }
  ::view-transition-new(root) { animation: vt-in .7s var(--ease) both; }

  /* reveals on scroll */
  .reveal { transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
  html.js:not(.no-hide) .reveal:not(.in) { opacity: 0; transform: translateY(24px); }
  .border.reveal { transition: clip-path 1.8s var(--ease); }
  html.js:not(.no-hide) .border.reveal:not(.in) { opacity: 1; transform: none; clip-path: inset(0 48% 0 48%); }
  .medal-ring { transition: stroke-dashoffset 1.6s var(--ease) .3s; }
  .medal-wreath { transition: transform 1.4s var(--ease), opacity .8s ease; }
  html.js:not(.no-hide) .aspect:not(.in) .medal-ring { stroke-dashoffset: var(--p); }
  html.js:not(.no-hide) .aspect:not(.in) .medal-wreath { transform: rotate(-90deg) scale(.7); opacity: 0; }
  html.js:not(.no-hide) .rating:not(.in) .b5 { transform: scale(0); }
  html.js:not(.no-hide) .way:not(.in) .ic { transform: rotate(-30deg) scale(.6); }
  .way .ic { transition: transform .8s var(--pop) .2s; }

  /* hero: the headline rises word by word */
  html.js:not(.no-hide) .hero .w, html.js:not(.no-hide) .page-head .w { animation: rise .9s var(--ease) calc(.1s + var(--i) * .08s) both; }
  html.js:not(.no-hide) .hero .eyebrow, html.js:not(.no-hide) .page-head .crumbs { animation: fade .8s ease both; }
  html.js:not(.no-hide) .hero .lede, html.js:not(.no-hide) .page-head .lede { animation: rise .9s var(--ease) .55s both; }
  html.js:not(.no-hide) .hero .cta-row { animation: rise .9s var(--ease) .7s both; }
  html.js:not(.no-hide) .hero .facts { animation: fade 1s ease .9s both; }

  /* hero: the gold grass grows. A stroke is drawn as a thin line, then the brush body fills it. */
  html.js:not(.no-hide) .hero-art .sl { animation: draw 1.2s var(--ease) var(--d) both; }
  html.js:not(.no-hide) .hero-art .st .sf { animation: fade .7s ease calc(var(--d) + .8s) both; }
  html.js:not(.no-hide) .hero-art .sp { animation: fade .6s ease calc(var(--d) + .5s) both; }
  html.js:not(.no-hide) .hero-art .lf { animation: unfurl .9s var(--pop) var(--d) both; }
  html.js:not(.no-hide) .hero-art .br { animation: pop .5s var(--pop) var(--d) both; }
  html.js:not(.no-hide) .hero-art .pile-wrap { animation: pour .9s var(--pop) .5s both, settle 7s ease-in-out 3.4s infinite; }
  html.js:not(.no-hide) .hero-art .bowl, html.js:not(.no-hide) .hero-art .glass { animation: fade .8s ease both; }

  /* the wooden spoon twirls in, then every few seconds tips one more dumpling into the bowl */
  .spoon-twirl { transform-origin: -110px 16px; }
  html.js:not(.no-hide) .spoon-twirl { animation: twirl 1.4s var(--ease) 1.2s both; }
  .spoon { animation: dip 7s ease-in-out 3.4s infinite; }
  .on-spoon { animation: on-spoon 7s ease-in-out 3.4s infinite; }
  .drop-dumpling { animation: tumble 7s ease-in 3.4s infinite; }
  .hero-visual::after { animation: sheen 9s ease-in-out 2.2s infinite; }

  /* page heads on inner pages: the sprig grows */
  html.js:not(.no-hide) .head-sprig .sl { animation: draw 1.2s var(--ease) .2s both; }
  html.js:not(.no-hide) .head-sprig .st .sf { animation: fade .6s ease 1s both; }
  html.js:not(.no-hide) .head-sprig .lf, html.js:not(.no-hide) .head-sprig .br { animation: pop .6s var(--pop) 1.1s both; }

  .cta-bar { transition: transform .4s var(--ease); }
  html.js:not(.no-hide) .cta-bar:not(.show) { transform: translateY(110%); }
}

@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(.45em); } to { opacity: 1; transform: none; } }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes unfurl { from { transform: rotate(-60deg) scale(0); } to { transform: none; } }
@keyframes pour { from { transform: translateY(-120px); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes settle { 0%, 58% { transform: none; } 62% { transform: translateY(5px) scaleY(.98); } 68% { transform: translateY(-2px); } 74%, 100% { transform: none; } }
@keyframes twirl { from { transform: rotate(-330deg) scale(.3); opacity: 0; } 50% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes dip {
  0%, 34% { transform: translate(604px, 196px) rotate(-13deg); }
  44% { transform: translate(600px, 200px) rotate(-27deg); }
  56% { transform: translate(604px, 196px) rotate(-4deg); }
  66%, 100% { transform: translate(604px, 196px) rotate(-13deg); }
}
@keyframes on-spoon { 0%, 43% { opacity: 1; } 44%, 84% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes tumble {
  0%, 43% { opacity: 0; transform: translate(437px, 294px) rotate(-33deg); }
  44% { opacity: 1; transform: translate(437px, 294px) rotate(-33deg); }
  50% { transform: translate(408px, 280px) rotate(-110deg); }
  58% { opacity: 1; transform: translate(338px, 322px) rotate(-210deg); }
  64%, 100% { opacity: 0; transform: translate(328px, 340px) rotate(-230deg); }
}
@keyframes sheen { 0% { transform: translateX(-110%); } 22%, 100% { transform: translateX(110%); } }
@keyframes vt-out { to { opacity: 0; transform: scale(.985); } }
@keyframes vt-in { from { clip-path: circle(0 at 50% 0); } to { clip-path: circle(150% at 50% 0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .drop-dumpling { display: none; }
}