/* Sachashnike: a Soviet-Georgian modernist smalt mosaic, the kind that covers bus stops and facades
   in Batumi and Tbilisi. Terracotta, turquoise, cobalt, ochre gold and charcoal tiles on cream grout;
   the grout lines are the grid. Russo One for the bold modernist display, Manrope for reading,
   Noto Sans Georgian for Georgian.
   Motion: the hero panel assembles tile by tile, rows of the sky and sea are laid in steps, the sun turns
   its rays, a glint sweeps the smalt; panels are laid in on scroll as a staircase of tiles; hovering a card
   turns a few tiles over to show their other colour; pages change through a tile wipe.
   Rule: the base style is always the FINAL state; animations only describe the way there,
   so reduced motion (and no JS) shows a complete, static page. */

@font-face { font-family: "Russo One"; src: url("/fonts/russo-one.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0401, U+0410-044F, U+0451, U+2010-2026, U+2116, U+2190-2193, U+2212, U+20BE; }
@font-face { font-family: "Manrope"; src: url("/fonts/manrope.woff2") format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0000-00FF, U+0401, U+0410-044F, U+0451, U+2010-2026, U+2116, U+2190-2193, U+2212, U+20BE; }
@font-face { font-family: "Noto Sans Georgian"; src: url("/fonts/noto-sans-georgian.woff2") format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F; }

:root {
  --grout: #efe7d6; --paper: #f8f3e8; --sand: #e7dbc2; --sand-deep: #ddceb0;
  --ink: #24211f; --muted: #574e45; --line: rgba(36, 33, 31, .14); --line-strong: rgba(36, 33, 31, .28);
  --terra: #b5502e; --terra-ink: #9a3f22; --terra-deep: #7e321d;
  --ochre: #d9a43b; --gold: #efcd74;
  --turq: #1f8a8a; --turq-ink: #166868;
  --cobalt: #23408e; --cobalt-deep: #1a3172; --cobalt-night: #152858;
  --char: #2a2623;
  --display: "Russo One", "Noto Sans Georgian", "Arial Black", system-ui, sans-serif;
  --body: "Manrope", "Noto Sans Georgian", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --wrap: 1180px; --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1); --snap: cubic-bezier(.2, .9, .3, 1.25);
  --frieze: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='16' viewBox='0 0 256 16'%3E%3Crect width='256' height='16' fill='%23efe7d6'/%3E%3Cpath fill='%2323408e' d='M1.3 1.5l12.8 .2 .5 12.9-12.7-.6z'/%3E%3Cpath fill='%2323408e' d='M17.8 .8l12.8 .6 .3 13-13.2 .2z'/%3E%3Cpath fill='%23e4b54f' d='M33.6 1.4l12.4-.6 .7 14-13.3-.5z'/%3E%3Cpath fill='%23b5502e' d='M49.3 2.2l12.8-.9 .2 13.6-12.4 .1z'/%3E%3Cpath fill='%23d9a43b' d='M65.9 .9l12.9 .9-.7 13.2-12.6-1.2z'/%3E%3Cpath fill='%2323408e' d='M81.2 2l12.9-1 .9 13.1-12.8-.1z'/%3E%3Cpath fill='%2323408e' d='M97.4 1.6l12.7-.5 .5 13.6-13.5 .2z'/%3E%3Cpath fill='%232d9d97' d='M114.2 1.1l12.5 1 .1 12.6-12.9-.1z'/%3E%3Cpath fill='%2323408e' d='M129.1 1.7l12.8-.7 1.1 12.9-13.8 .6z'/%3E%3Cpath fill='%2323408e' d='M145.5 .9l12.8 1.2-.1 12.7-12.5-.8z'/%3E%3Cpath fill='%23d9a43b' d='M161.9 .8l12.7 .8-.9 13-11.9-.5z'/%3E%3Cpath fill='%23b5502e' d='M177.6 1.2l12.7 .5 .1 12.7-13.1 .2z'/%3E%3Cpath fill='%23d9a43b' d='M193.6 1.3l12.5 .7 .7 12.3-12.9-.2z'/%3E%3Cpath fill='%2323408e' d='M209 1l13.4 .4 .2 13.7-13.1-.2z'/%3E%3Cpath fill='%2323408e' d='M224.9 1.2l12.9-.1 1.3 13.2-14 .7z'/%3E%3Cpath fill='%231f8a8a' d='M241.9 1.9l13-.9-.6 13.8-13-.4z'/%3E%3C/svg%3E"); --frieze-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='16' viewBox='0 0 192 16'%3E%3Crect width='192' height='16' fill='%232a2623'/%3E%3Cpath fill='%23e4b54f' d='M1.3 1.7l13.4-.2 .1 12.8-13.4-.4z'/%3E%3Cpath fill='%23b5502e' d='M17.4 1.4l12.5 .4 1 12-13.6 .4z'/%3E%3Cpath fill='%23d9a43b' d='M33.8 1.9l12.1-.5 .5 13.1-13.1 .1z'/%3E%3Cpath fill='%232d9d97' d='M49.5 1.6l13.7 .1-.7 13.3-13-.9z'/%3E%3Cpath fill='%2323408e' d='M65.1 2.3l13.3-1.1-.2 13-12.1 1.1z'/%3E%3Cpath fill='%232d9d97' d='M81.2 1.4l13.5-.1-.5 12.9-13.4 .7z'/%3E%3Cpath fill='%23d9a43b' d='M96.8 2.2l13.7-.5 0 12.6-13.4 .3z'/%3E%3Cpath fill='%23b5502e' d='M113 1.7l13.5-.4 .5 13.8-13.2-.6z'/%3E%3Cpath fill='%23d9a43b' d='M129.5 .8l13.3 .8-.8 13.6-12.9-.9z'/%3E%3Cpath fill='%232d9d97' d='M145.7 1.3l13.2 .3-.3 13.4-13.4-.9z'/%3E%3Cpath fill='%2330509f' d='M160.8 2l13.3-.2 .1 12.6-12.6 .6z'/%3E%3Cpath fill='%232d9d97' d='M177.1 2l13.5-1.1 .1 13.4-12.9 .1z'/%3E%3C/svg%3E");
  --frame-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' fill='%23efe7d6'/%3E%3Cpath fill='%23d9a43b' d='M1.5 1.6l13.1 .3-.1 12.1-13 .6z'/%3E%3Cpath fill='%2323408e' d='M17.5 1.9l12.9-.2 .3 12.4-13.6 .2z'/%3E%3Cpath fill='%23d9a43b' d='M33.3 1.7l12.7-.1 .6 12.7-12.6 .6z'/%3E%3Cpath fill='%2323408e' d='M1.4 17.5l13-.4 .2 14.1-13.5-1.3z'/%3E%3Cpath fill='%2323408e' d='M33.4 17.4l13.3 .6-.8 13-12.1-.8z'/%3E%3Cpath fill='%23d9a43b' d='M.8 34.2l13.4-.9 .3 13-12.5-.1z'/%3E%3Cpath fill='%2323408e' d='M17 33.4l13.7 .8-.4 12.3-13-.6z'/%3E%3Cpath fill='%23d9a43b' d='M33.5 33.7l12.9 0-.2 13.3-13.2-1.1z'/%3E%3C/svg%3E"); --frame-t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' fill='%23efe7d6'/%3E%3Cpath fill='%23d9a43b' d='M.9 1.7l14-.7-.9 13.6-12.2 .1z'/%3E%3Cpath fill='%23b5502e' d='M17.1 1.9l13.3-.3 .3 13.2-13.3-.1z'/%3E%3Cpath fill='%23d9a43b' d='M33.5 1l13.7 .6-1 12.8-13.4-.3z'/%3E%3Cpath fill='%23b5502e' d='M1 17.5l13-.6 .9 13.5-13.4 .4z'/%3E%3Cpath fill='%23b5502e' d='M33.1 17.5l13.6-.5-.7 13.5-12.4-.3z'/%3E%3Cpath fill='%23d9a43b' d='M1.5 33.6l12.4-.4 .7 13.5-13.4 .3z'/%3E%3Cpath fill='%23b5502e' d='M17.1 33.5l12.8 .3 .1 12.1-12.3 .7z'/%3E%3Cpath fill='%23d9a43b' d='M33.4 33.1l12.5 .4 .7 13.5-12.8-.8z'/%3E%3C/svg%3E"); --frame-q: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' fill='%23efe7d6'/%3E%3Cpath fill='%23b5502e' d='M1.4 .9l12.6 .1-.1 13-12.6 .5z'/%3E%3Cpath fill='%231f8a8a' d='M17.9 1.6l12.6-.3-.1 13.2-13-.1z'/%3E%3Cpath fill='%23b5502e' d='M33.5 1.6l13-.5-.3 13.5-12.6-.4z'/%3E%3Cpath fill='%231f8a8a' d='M.8 17.1l13.4 .8 .2 12.8-13.1-.3z'/%3E%3Cpath fill='%231f8a8a' d='M33.6 17l12.8-.1-.2 13.4-13.1-.1z'/%3E%3Cpath fill='%23b5502e' d='M1.9 33.2l12.1 .5 .2 12.2-12.9 1.2z'/%3E%3Cpath fill='%231f8a8a' d='M18.1 32.8l12.5 .4 0 13.1-13.6-.5z'/%3E%3Cpath fill='%23b5502e' d='M34 34l12.4-.5 .2 13.6-13-.5z'/%3E%3C/svg%3E");
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
body { margin: 0; color: var(--ink); background: var(--grout); font: 400 1.0625rem/1.65 var(--body); overflow-x: clip; }
img, svg { max-width: 100%; }
a { color: var(--cobalt); text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: rgba(35, 64, 142, .4); transition: text-decoration-color .2s, color .2s; }
a:hover { text-decoration-color: var(--terra); }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; border-radius: 2px; }
.band :focus-visible, .site-footer :focus-visible { outline-color: var(--gold); }
.skip { position: absolute; left: 8px; top: -60px; background: var(--cobalt); color: #fff; padding: .6rem 1rem; z-index: 50; }
.skip:focus { top: 8px; }
.nw { white-space: nowrap; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.04; margin: 0; color: var(--cobalt); letter-spacing: .005em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5.4vw, 4.5rem); }
h2 { font-size: clamp(2rem, 3.8vw, 3rem); }
h3 { font-size: 1.5rem; line-height: 1.12; }
.lang-ka h1, .lang-ka h2, .lang-ka h3 { font-family: "Noto Sans Georgian", var(--body); font-weight: 800; line-height: 1.22; letter-spacing: 0; }
.lang-ka h1 { font-size: clamp(2.1rem, 4.3vw, 3.5rem); }
/* Georgian inside a Russo One heading (root chooser, 404) gets its own bold face */
:is(h1, h2, h3) [lang="ka"] { font-family: "Noto Sans Georgian", var(--body); font-weight: 800; }
/* uppercase would turn Georgian into Mtavruli capitals: labels stay in ordinary Mkhedruli */
.lang-ka :is(.eyebrow, .crumbs, .rating-src, .where-card strong, .contact-card strong), .chooser-sub [lang="ka"] { text-transform: none; }
.lang-ka h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); }
.lang-ka h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }

.site-header, .section, .hero, .page-head, .footer-inner, .band-inner, .menu-board, .ask { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- header ---------- */
.site-header { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.6rem; padding: 1rem 0; view-transition-name: header; }
/* the logo: our mosaic sun and the name drawn as on the fascia (outlines, coloured by currentColor) */
.logo { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--ink); line-height: 1; }
.logo-mark { width: 44px; height: 44px; flex: none; display: block; }
.wordmark { display: block; height: 21px; width: auto; flex: none; }
.wordmark-ka { height: 30px; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.logo:hover .logo-mark { animation: mark-turn .7s var(--ease); }
@keyframes mark-turn { 50% { transform: rotate(45deg) scale(.9); } }
.nav { display: flex; gap: 1.5rem; margin-inline-start: auto; font-weight: 600; }
.nav a { color: var(--ink); text-decoration: none; padding: .3rem 0; background: linear-gradient(90deg, var(--terra) 0 30%, var(--ochre) 30% 65%, var(--turq) 65%) left bottom / 0 4px no-repeat; transition: background-size .35s var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { background-size: 100% 4px; }
.nav a[aria-current="page"] { color: var(--cobalt); }
.lang { display: flex; gap: 3px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; }
.lang a { color: var(--muted); text-decoration: none; padding: .3rem .5rem; border-radius: 2px; }
.lang a:hover { background: var(--sand); }
.lang a[aria-current="true"] { color: #fff; background: var(--cobalt); }
@media (max-width: 760px) {
  .site-header { column-gap: .5rem; padding: .8rem 0 .6rem; }
  .site-header .head-call { display: none; }
  .logo { flex: 1 1 auto; gap: .6rem; }
  .logo-mark { width: 38px; height: 38px; }
  .wordmark { height: 16px; }
  .wordmark-ka { height: 24px; }
  .lang { order: 2; }
  .nav { order: 3; flex: 1 0 100%; margin: 0; gap: 1.1rem; font-size: .95rem; }
}

/* ---------- buttons: square smalt tiles that sit on a dark shadow ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px;
  padding: .75rem 1.4rem; font: 700 1rem/1.2 var(--body); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  color: #fff; background: var(--terra-ink); border: 2px solid var(--terra-ink); border-radius: 3px;
  box-shadow: 4px 4px 0 var(--char);
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { background: var(--terra-deep); border-color: var(--terra-deep); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--char); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--char); }
.btn-ghost { background: var(--paper); color: var(--cobalt); border-color: var(--cobalt); }
.btn-ghost:hover { background: #fff; border-color: var(--cobalt); color: var(--cobalt-deep); }
.btn-sm { min-height: 42px; padding: .45rem 1.05rem; font-size: .95rem; box-shadow: 3px 3px 0 var(--char); }
.cta-row { display: flex; flex-wrap: wrap; gap: 1rem 1.1rem; margin: 1.6rem 0; }
.cta-row.center { justify-content: center; }

/* ---------- hero ---------- */
.hero { display: grid; gap: 2rem 4rem; align-items: center; padding: clamp(1.25rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 3.8rem); }
@media (min-width: 900px) { .hero { grid-template-columns: 1.1fr .9fr; } }
.eyebrow { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; font-weight: 800; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--terra-ink); }
.eyebrow::before { content: ""; width: 34px; height: 10px; background: linear-gradient(90deg, var(--terra) 0 8px, transparent 8px 13px, var(--ochre) 13px 21px, transparent 21px 26px, var(--turq) 26px); }
.lang-ka .eyebrow { letter-spacing: .05em; }
.lede { font-size: 1.2rem; line-height: 1.6; max-width: 32em; margin-top: 1.4rem; color: var(--muted); }
.facts { list-style: none; display: flex; flex-wrap: wrap; gap: .55rem; padding: 0; margin: 0; }
.facts li { padding: .4rem .85rem .4rem .75rem; border-left: 6px solid var(--turq); background: var(--paper); font-size: .9rem; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }
.facts li:nth-child(2) { border-left-color: var(--terra); }
.facts li:nth-child(3) { border-left-color: var(--ochre); }
.hero-visual { justify-self: center; width: min(100%, 500px); }
.hero-art { position: relative; overflow: hidden; box-shadow: 10px 12px 0 -2px rgba(36, 33, 31, .16); }
.mz { display: block; }
.mz-main { width: 100%; height: auto; }
.mz .grout-line { fill: none; stroke: var(--grout); stroke-width: 11; stroke-linecap: round; }
.rays { position: absolute; height: auto; aspect-ratio: 1; pointer-events: none; }
.glint { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 252, 240, .55) 48%, rgba(255, 252, 240, .12) 54%, transparent 62%); mix-blend-mode: soft-light; transform: translateX(-110%); }
@media (max-width: 899px) { .hero-visual { width: min(100%, 420px); } }
@media (max-width: 520px) { .hero .cta-row .btn { flex: 1 1 100%; } }

/* hero intro: the frame is laid round the panel, the sky and sea go down row by row (each row laid tile by
   tile from the left), then the figures: mountains, the sun ring by ring, the vine and its leaves, the rays.
   Delays come from the d0..d39 classes generated by art.mjs. */
.mz .grout{fill:#efe7d6}.mz .t1{fill:#b5502e}.mz .t2{fill:#a3452a}.mz .t3{fill:#c4613a}.mz .t4{fill:#8c3920}.mz .o1{fill:#d9a43b}.mz .o2{fill:#cc952f}.mz .o3{fill:#e4b54f}.mz .o4{fill:#efcd74}.mz .q1{fill:#1f8a8a}.mz .q2{fill:#18716f}.mz .q3{fill:#2d9d97}.mz .q4{fill:#68b8ad}.mz .c1{fill:#23408e}.mz .c2{fill:#1a3172}.mz .c3{fill:#30509f}.mz .c4{fill:#5574b8}.mz .s1{fill:#f3e9d3}.mz .s2{fill:#eadbbb}.mz .s3{fill:#e2cfa6}.mz .s4{fill:#f8f1e2}.mz .k1{fill:#2a2623}.mz .k2{fill:#3d3530}.mz .w1{fill:#fbf7ee}.mz .d0{--d:0s}.mz .d1{--d:0.07s}.mz .d2{--d:0.14s}.mz .d3{--d:0.21s}.mz .d4{--d:0.28s}.mz .d5{--d:0.35s}.mz .d6{--d:0.42s}.mz .d7{--d:0.49s}.mz .d8{--d:0.56s}.mz .d9{--d:0.63s}.mz .d10{--d:0.7s}.mz .d11{--d:0.77s}.mz .d12{--d:0.84s}.mz .d13{--d:0.91s}.mz .d14{--d:0.98s}.mz .d15{--d:1.05s}.mz .d16{--d:1.12s}.mz .d17{--d:1.19s}.mz .d18{--d:1.26s}.mz .d19{--d:1.33s}.mz .d20{--d:1.4s}.mz .d21{--d:1.47s}.mz .d22{--d:1.54s}.mz .d23{--d:1.61s}.mz .d24{--d:1.68s}.mz .d25{--d:1.75s}.mz .d26{--d:1.82s}.mz .d27{--d:1.89s}.mz .d28{--d:1.96s}.mz .d29{--d:2.03s}.mz .d30{--d:2.1s}.mz .d31{--d:2.17s}.mz .d32{--d:2.24s}.mz .d33{--d:2.31s}.mz .d34{--d:2.38s}.mz .d35{--d:2.45s}.mz .d36{--d:2.52s}.mz .d37{--d:2.59s}.mz .d38{--d:2.66s}.mz .d39{--d:2.73s}
html.js .mz-main [class*=" d"], html.js .rays [class*=" d"] { animation: tile-in .55s var(--snap) backwards; animation-delay: calc(var(--d, 0s) + .15s); transform-box: fill-box; transform-origin: center; }
html.js .mz-main .row { animation-name: row-lay; animation-duration: .5s; animation-timing-function: steps(10, end); }
html.js .hero .eyebrow { animation: fade-up .6s .05s var(--ease) backwards; }
html.js .w { display: inline-block; animation: word-flip .75s var(--snap) backwards; animation-delay: calc(var(--i) * .08s + .15s); }
html.js .hero .lede, html.js .page-head .lede { animation: fade-up .8s .55s var(--ease) backwards; }
html.js .hero .cta-row { animation: fade-up .8s .7s var(--ease) backwards; }
html.js .hero .facts { animation: fade-up .8s .85s var(--ease) backwards; }
/* after the assembly the rays keep turning and a glint sweeps the smalt every few seconds */
html.js .rays { animation: spin 120s 2.8s linear infinite; will-change: transform; }
html.js .glint { animation: glint 9s 3s ease-in-out infinite; }
.hero-art.off .rays, .hero-art.off .glint, .tab-hidden .rays, .tab-hidden .glint { animation-play-state: paused !important; }

@keyframes tile-in { from { opacity: 0; transform: translateY(-16px) scale(.3, .05); } 55% { opacity: 1; } }
@keyframes row-lay { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes word-flip { from { opacity: 0; transform: perspective(600px) rotateX(-88deg) translateY(.25em); } 60% { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes glint { 0% { transform: translateX(-110%); } 22%, 100% { transform: translateX(110%); } }

/* ---------- frieze: a row of tiles in the bus-stop rhythm ---------- */
.frieze { height: 16px; width: min(var(--wrap), 100% - 2 * var(--gutter)); margin: 0 auto; background: var(--frieze) left center / auto 100% repeat-x; }
.frieze-dark { width: 100%; background-image: var(--frieze-dark); }

/* ---------- sections ---------- */
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section-tint { width: 100%; max-width: none; padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2)); background-color: var(--sand);
  /* a plain tiled wall: square tiles, grout lines as the grid */
  background-image: linear-gradient(var(--grout) 2px, transparent 2px), linear-gradient(90deg, var(--grout) 2px, transparent 2px); background-size: 26px 26px; }
.sec-head { text-align: center; max-width: 46rem; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.sec-head h2::after { content: ""; display: block; width: 58px; height: 12px; margin: 1rem auto 0; background: linear-gradient(90deg, var(--terra) 0 16px, transparent 16px 21px, var(--ochre) 21px 37px, transparent 37px 42px, var(--turq) 42px); }
.section-intro { font-size: 1.12rem; color: var(--muted); margin: 1.1rem auto 0; max-width: 40em; text-wrap: pretty; }
.section-tint .section-intro { color: var(--ink); }
.more { margin-top: 2.2rem; font-weight: 700; }
.center { text-align: center; }

/* page head (inner pages) */
.page-head { text-align: center; padding: clamp(2rem, 6vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.4rem); }
.page-head .lede { margin-inline: auto; }
.crumbs { font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--terra-ink); margin-bottom: 1.1rem; }
.lang-ka .crumbs { letter-spacing: .04em; }
.crumbs a { color: var(--terra-ink); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---------- tiles that turn over on hover ---------- */
.flip { display: flex; gap: 3px; height: 14px; margin: -1px -1px 0; perspective: 300px; }
.flip i { flex: 1; position: relative; transform-style: preserve-3d; transition: transform .55s var(--snap); transition-delay: calc(var(--n, 0) * 45ms); }
.flip i::before, .flip i::after { content: ""; position: absolute; inset: 0; backface-visibility: hidden; }
.flip i::before { background: var(--a, var(--cobalt)); }
.flip i::after { background: var(--b, var(--ochre)); transform: rotateY(180deg); }
.flip i:nth-child(4n+1) { --a: var(--cobalt); --b: var(--ochre); }
.flip i:nth-child(4n+2) { --a: var(--terra); --b: var(--turq); }
.flip i:nth-child(4n+3) { --a: var(--ochre); --b: var(--cobalt); }
.flip i:nth-child(4n) { --a: var(--turq); --b: var(--terra); }
.flip i:nth-child(2) { --n: 1; } .flip i:nth-child(5) { --n: 2; } .flip i:nth-child(7) { --n: 3; } .flip i:nth-child(10) { --n: 4; } .flip i:nth-child(12) { --n: 5; } .flip i:nth-child(13) { --n: 6; }
@media (hover: hover) {
  :is(.card, .rating, .menu-panel):hover .flip i:is(:nth-child(2), :nth-child(5), :nth-child(7), :nth-child(10), :nth-child(12), :nth-child(13)) { transform: rotateY(180deg); }
}
:is(.card, .rating, .menu-panel):focus-within .flip i:is(:nth-child(2), :nth-child(5), :nth-child(7), :nth-child(10), :nth-child(12), :nth-child(13)) { transform: rotateY(180deg); }

/* ---------- cuisine cards ---------- */
.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(1rem, 2.4vw, 1.8rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.card { position: relative; display: grid; grid-template-columns: 150px 1fr; grid-template-rows: auto 1fr; gap: 0 1.4rem; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.card .flip { grid-column: 1 / -1; }
.card-art { padding: 1.3rem 0 1.3rem 1.3rem; }
.emblem { width: 100%; height: auto; }
.card-copy { padding: 1.5rem 1.5rem 1.4rem 0; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; } /* the whole card is the link */
.card p { margin: .6rem 0 0; color: var(--muted); }
@media (hover: hover) { .card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-strong), 8px 10px 0 -2px rgba(36, 33, 31, .14); } }
.card:focus-within { box-shadow: inset 0 0 0 2px var(--cobalt); }
.card h3 a:focus-visible { outline: none; }
@media (max-width: 520px) {
  .card { grid-template-columns: 96px 1fr; gap: 0 1rem; }
  .card-art { padding: 1rem 0 1rem 1rem; }
  .card-copy { padding: 1.1rem 1.1rem 1.1rem 0; }
  .card h3 { font-size: 1.3rem; }
}

/* ---------- the day band: cobalt wall, one tile per opening hour ---------- */
.band { position: relative; color: var(--grout); background: var(--cobalt-deep); padding: clamp(3rem, 7vw, 5rem) 0; }
.band::before, .band::after { content: ""; position: absolute; left: 0; right: 0; height: 16px; background: var(--frieze) left center / auto 100% repeat-x; }
.band::before { top: 0; } .band::after { bottom: 0; }
.band h2 { color: #fff; }
.band .section-intro { color: rgba(239, 231, 214, .9); margin-inline: 0; }
.day { display: grid; gap: 2rem 4rem; align-items: center; }
@media (min-width: 900px) { .day { grid-template-columns: .9fr 1.1fr; } }
.day-panel { padding: 1.4rem 1.4rem 1.2rem; background: var(--cobalt-night); box-shadow: inset 0 0 0 1px rgba(239, 231, 214, .18); }
.day-marks { display: flex; justify-content: space-between; margin-bottom: .8rem; }
.mark { width: 52px; height: 52px; }
.daybar { width: 100%; height: clamp(30px, 4.6vw, 46px); }
.day-labels { display: flex; justify-content: space-between; gap: 1rem; margin-top: .9rem; font-weight: 600; color: rgba(239, 231, 214, .88); }
.day-labels span { display: grid; gap: .1rem; }
.day-labels span:last-child { text-align: end; }
.day-labels b { font-family: "Russo One", var(--body); font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }

/* ---------- praise: 10 x 10 tile gauges ---------- */
.aspects { list-style: none; padding: 0; margin: 0 auto; display: grid; gap: clamp(1rem, 2.4vw, 1.8rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); max-width: 980px; }
.aspect { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 1.4rem; align-items: center; padding: 1.4rem; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.gauge { width: 100%; height: auto; }
.aspect-pct { display: block; font-family: "Russo One", var(--body); font-size: clamp(2.8rem, 5vw, 3.8rem); line-height: 1; color: var(--terra-ink); white-space: nowrap; }
.aspect:nth-child(2) .aspect-pct { color: var(--cobalt); }
.aspect-label { margin: .35rem 0 .9rem; font-size: .9rem; font-weight: 700; color: var(--muted); }
.aspect h3 { font-size: 1.45rem; }
.aspect-note { margin: .35rem 0 0; color: var(--muted); font-size: .95rem; }
@media (max-width: 520px) { .aspect { grid-template-columns: 110px 1fr; gap: 1rem; padding: 1rem; } }

/* ---------- ratings ---------- */
.ratings { display: grid; gap: clamp(1rem, 2.4vw, 1.8rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); max-width: 820px; margin: 0 auto; }
.rating { position: relative; display: grid; justify-items: center; gap: .4rem; padding: 0 1.4rem 1.8rem; text-align: center; color: var(--ink); text-decoration: none; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.rating .flip { justify-self: stretch; margin: -1px -1.45rem 1.6rem; }
@media (hover: hover) { .rating:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-strong), 8px 10px 0 -2px rgba(36, 33, 31, .16); } }
.rating-src { font-weight: 800; letter-spacing: .16em; text-transform: uppercase; font-size: .78rem; color: var(--terra-ink); }
.lang-ka .rating-src { letter-spacing: .04em; }
.rating-num { font-family: "Russo One", var(--body); font-size: clamp(4.2rem, 8vw, 5.6rem); line-height: .95; color: var(--cobalt); }
.stars { width: 150px; height: auto; margin: .3rem 0 .4rem; }
.rating-count { font-weight: 600; }
.count { font-variant-numeric: tabular-nums; }
.rating-open { margin-top: .5rem; font-size: .95rem; font-weight: 700; color: var(--cobalt); text-decoration: underline; text-decoration-color: var(--ochre); text-decoration-thickness: 3px; text-underline-offset: 5px; }

/* ---------- where: the house-number plaque and the address card ---------- */
.where { display: grid; gap: 2rem 4rem; align-items: center; }
@media (min-width: 880px) { .where { grid-template-columns: 1fr 1fr; } }
.where-copy .section-intro { margin-inline: 0; }
.plaque-wrap { display: inline-block; width: min(300px, 78%); margin-top: 1.6rem; rotate: -1.5deg; }
.plaque { width: 100%; height: auto; box-shadow: 6px 7px 0 -1px rgba(36, 33, 31, .2); }
.where-card, .contact-card { position: relative; font-style: normal; padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--paper); border: 16px solid transparent; border-image: var(--frame-c) 16 round; }
.where-card p { margin: 0 0 1rem; display: grid; gap: .1rem; }
.where-card strong, .contact-card strong { font-size: .76rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--terra-ink); }
.lang-ka .where-card strong, .lang-ka .contact-card strong { letter-spacing: .03em; }
.where-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.4rem; }
.where-card .walk { font-weight: 700; }
.where-card .map-open { display: flex; flex-wrap: wrap; gap: .7rem; margin: -.2rem 0 1.2rem; }
.tel { font-weight: 700; font-size: 1.12rem; white-space: nowrap; color: var(--cobalt); }

/* ---------- FAQ: a tile marks each question and turns when it opens ---------- */
.qa-list { max-width: 50rem; margin: 0 auto; border-top: 2px solid var(--line); }
.qa { border-bottom: 2px solid var(--line); }
.qa summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; padding: 1.15rem .2rem; font-family: var(--display); font-size: 1.3rem; line-height: 1.25; color: var(--cobalt); }
.lang-ka .qa summary { font-family: "Noto Sans Georgian", var(--body); font-weight: 700; font-size: 1.1rem; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "" / ""; flex: none; width: 20px; height: 20px; background: var(--ochre); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .06); transition: transform .45s var(--snap), background-color .3s; }
.qa[open] summary::after { transform: rotate(135deg) scale(.85); background: var(--terra); }
.qa p { padding: 0 .2rem 1.2rem; margin: 0; color: var(--muted); max-width: 44em; }
html.js .qa[open] p { animation: fade-up .45s var(--ease); }
.faq-list { display: grid; gap: 1.1rem; max-width: 52rem; }
.qa-full { position: relative; padding: 1.4rem 1.6rem 1.4rem 2.6rem; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.qa-full::before { content: ""; position: absolute; left: 1.1rem; top: 1.75rem; width: 12px; height: 12px; background: var(--terra); }
.qa-full:nth-child(3n+2)::before { background: var(--turq); }
.qa-full:nth-child(3n)::before { background: var(--ochre); }
.qa-full h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); line-height: 1.2; }
.lang-ka .qa-full h2 { font-size: 1.2rem; }
.qa-full p { margin: .6rem 0 0; color: var(--muted); }

/* ---------- menu page: three big mosaic panels ---------- */
.menu-board { display: grid; gap: clamp(1.2rem, 3vw, 2rem); margin-top: clamp(2rem, 5vw, 3.5rem); }
.menu-panel { position: relative; display: grid; grid-template-columns: minmax(140px, 260px) 1fr; grid-template-rows: auto 1fr; gap: 0 clamp(1.2rem, 4vw, 3rem); align-items: center; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); scroll-margin-top: 1rem; }
.menu-panel .flip { grid-column: 1 / -1; height: 16px; }
.menu-art { padding: clamp(1rem, 3vw, 2rem) 0 clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem); }
.menu-copy { padding: clamp(1.2rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2rem) 0; }
.menu-copy h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
.menu-copy p { margin: .9rem 0 0; font-size: 1.12rem; color: var(--muted); max-width: 34em; }
.menu-panel:nth-child(2) { grid-template-columns: 1fr minmax(140px, 260px); }
.menu-panel:nth-child(2) .menu-art { order: 2; padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem) 0; }
.menu-panel:nth-child(2) .menu-copy { padding: clamp(1.2rem, 3vw, 2rem) 0 clamp(1.2rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2rem); }
@media (max-width: 600px) {
  .menu-panel, .menu-panel:nth-child(2) { grid-template-columns: 1fr; }
  .menu-art, .menu-panel:nth-child(2) .menu-art { order: 0; width: min(200px, 70%); padding: 1.2rem 1.2rem 0; }
  .menu-copy, .menu-panel:nth-child(2) .menu-copy { padding: 1rem 1.2rem 1.4rem; }
}
.ask { text-align: center; padding: clamp(2.5rem, 6vw, 4rem) 0 0; }
.ask p { font-size: 1.15rem; margin: 0; }

/* ---------- contacts ---------- */
.contact-grid { display: grid; gap: 1.5rem; }
@media (min-width: 820px) { .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.contact-card:nth-child(2) { border-image-source: var(--frame-t); }
.contact-card h2 { font-size: 2rem; margin-bottom: 1rem; }
.lang-ka .contact-card h2 { font-size: 1.45rem; }
.contact-card h2.mt { margin-top: 1.8rem; }
.contact-card address { font-style: normal; }
.contact-card .plaque-wrap { margin-top: .4rem; }
.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { text-align: start; padding: .5rem 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.hours td { text-align: end; font-weight: 700; font-variant-numeric: tabular-nums; }
.link-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .2rem; font-weight: 600; }
.link-list a { display: inline-block; padding-block: .3rem; }
/* two maps over the drawn mosaic map (OpenStreetMap data, src/map.mjs): each live map loads on its first click */
.route-grid { display: grid; gap: 1.4rem 2.4rem; }
@media (min-width: 900px) { .route-grid { grid-template-columns: 3fr 2fr; align-items: start; } }
.map-tabs { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1rem; }
.map-tab[aria-pressed="true"] { color: #fff; background: var(--cobalt); border-color: var(--cobalt); }
.map { position: relative; border: 16px solid transparent; border-image: var(--frame-q) 16 round; background: var(--grout); }
.map iframe { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; }
.map.loaded .osm { visibility: hidden; }
html:not(.js) .map-tabs { display: none; }
.osm { display: block; width: 100%; height: auto; font-family: var(--body); }
.osm-tall { display: none; }
@media (max-width: 560px) { .osm-wide { display: none; } .osm-tall { display: block; } }
.osm-names rect { fill: var(--cobalt); }
.osm-names text { fill: #fff; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.osm-places text, .osm-areas text, .osm-scale text { fill: var(--char); font-weight: 800; stroke: var(--grout); stroke-width: 3.5px; stroke-linejoin: round; paint-order: stroke; }
.osm-areas text { font-weight: 700; font-style: italic; }
.osm-areas .osm-lake { fill: #fff; stroke: var(--cobalt); }
.osm-tag rect { fill: var(--terra); }
.osm-tag text { fill: #fff; font-weight: 800; text-anchor: middle; }
.osm-tag .osm-sub { font-weight: 600; fill: #fbe7c6; }
.osm-pin > g { transform-box: fill-box; transform-origin: 50% 100%; }
@media (hover: hover) { .map:hover .osm-pin > g { animation: pin-hop .9s var(--ease); } }
@keyframes pin-hop { 40% { translate: 0 -10px; } 70% { translate: 0 2px; } }
.osm-credit { margin: .4rem 0 0; font-size: .8rem; text-align: end; }
.osm-credit a { color: var(--muted, inherit); }
.route-side .walk { font-weight: 700; font-size: 1.15rem; }
.route-side .cta-row { margin-top: .4rem; }

/* ---------- footer: charcoal wall with a gold frieze ---------- */
.site-header + main { padding-bottom: clamp(2rem, 6vw, 4rem); }
.site-footer { color: rgba(239, 231, 214, .88); background: var(--char); padding: 0 0 2.5rem; }
.site-footer a { color: #fff; text-decoration-color: rgba(255, 255, 255, .35); }
.site-footer a:hover { text-decoration-color: var(--gold); }
.footer-inner { padding-top: 2.6rem; }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.3fr 1.2fr 1fr; } }
.footer-brand { display: flex; align-items: center; margin-bottom: .8rem; }
.footer-brand .logo { color: #fff; }
.footer-brand .logo-mark { width: 44px; height: 44px; }
.site-footer address { font-style: normal; }
.site-footer address p { margin: 0 0 .4rem; }
.site-footer .tel { color: #fff; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; font-weight: 600; }
.footer-links a, .footer-meta a { display: inline-block; padding-block: .3rem; }
.footer-meta { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .16); color: rgba(239, 231, 214, .75); font-size: .88rem; }

/* mobile call bar slides up after the first screen */
.cta-bar { display: none; }
@media (max-width: 760px) {
  .cta-bar { position: fixed; z-index: 20; inset: auto 0 0 0; display: flex; gap: .8rem; padding: .7rem 1rem calc(.8rem + env(safe-area-inset-bottom)); background: rgba(239, 231, 214, .97); border-top: 4px solid var(--cobalt); transition: transform .45s var(--ease); }
  .cta-bar .btn { flex: 1; box-shadow: 3px 3px 0 var(--char); }
  html.js:not(.no-hide) .cta-bar:not(.show) { transform: translateY(110%); }
  html.js .cta-bar:not(.show):focus-within { transform: none; }
  html { scroll-padding-bottom: 6rem; }
  .site-footer { padding-bottom: 6.5rem; }
}

/* ---------- root language chooser and 404 ---------- */
.chooser { display: grid; gap: 2rem 4rem; align-items: center; width: min(1040px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: clamp(1.5rem, 5vw, 3.5rem) 0; min-height: 100svh; align-content: center; }
@media (min-width: 860px) { .chooser { grid-template-columns: .85fr 1.15fr; } }
.chooser > * { min-width: 0; }
.chooser .hero-visual { width: min(100%, 400px); }
.chooser h1 { font-size: clamp(2rem, 9vw, 5rem); letter-spacing: .04em; text-transform: uppercase; }
.chooser-sub { font-weight: 800; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--terra-ink); margin: .8rem 0 0; }
.chooser .lede { margin-top: .8rem; }
.lang-btn { min-width: 9.5rem; }
@media (max-width: 520px) { .lang-btn { min-width: 0; flex: 1 1 28%; padding-inline: .6rem; } }
.chooser-404 { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.big-404 { width: min(420px, 90%); }
.plaque-404 { width: 100%; height: auto; }
.page-404 h1 { font-size: clamp(1.3rem, 3vw, 1.9rem); letter-spacing: 0; text-transform: none; }
.page-404 .frieze { width: 240px; }

/* ---------- scroll reveals ---------- */
/* text blocks rise gently */
.reveal { transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * .08s); }
html.js:not(.no-hide) .reveal:not(.in) { opacity: 0; transform: translateY(18px); }

/* panels are laid in like a mosaic: a staircase of tile-sized steps sweeps from the top left.
   The hidden panel keeps a sliver at its top left corner, so IntersectionObserver always sees it.
   Then the tiles of its picture drop into place (their delays come from the d0..d39 classes). */
html.js:not(.no-hide) .panel:not(.in) { clip-path: polygon(-10% -10%, 4% -10%, 4% 10%, -8% 10%, -8% 30%, -20% 30%, -20% 50%, -32% 50%, -32% 70%, -44% 70%, -44% 90%, -56% 90%, -56% 110%, -10% 110%); }
html.js .panel.in { animation: panel-lay .9s steps(12, end) backwards; animation-delay: calc(var(--i, 0) * .14s); }
@keyframes panel-lay {
  from { clip-path: polygon(-10% -10%, 4% -10%, 4% 10%, -8% 10%, -8% 30%, -20% 30%, -20% 50%, -32% 50%, -32% 70%, -44% 70%, -44% 90%, -56% 90%, -56% 110%, -10% 110%); }
  to { clip-path: polygon(-10% -10%, 170% -10%, 170% 10%, 158% 10%, 158% 30%, 146% 30%, 146% 50%, 134% 50%, 134% 70%, 122% 70%, 122% 90%, 110% 90%, 110% 110%, -10% 110%); }
}
html.js:not(.no-hide) .panel:not(.in) .mz [class*=" d"] { opacity: 0; }
html.js .panel.in .mz [class*=" d"] { animation: tile-in .5s var(--snap) backwards; animation-delay: calc(var(--d, 0s) + var(--i, 0) * .14s + .45s); transform-box: fill-box; transform-origin: center; }

/* failsafe (app.js never started): show everything at once instead of animating the way there */
html.no-hide .reveal { transition: none; }

/* ---------- page transitions (Chromium, Safari): the next page is laid over the old one in a tile wipe ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: vt-tiles .7s steps(14, end) both; }
@keyframes vt-tiles {
  from { clip-path: polygon(0 0, 0 0, 0 12.5%, -8% 12.5%, -8% 25%, -16% 25%, -16% 37.5%, -24% 37.5%, -24% 50%, -32% 50%, -32% 62.5%, -40% 62.5%, -40% 75%, -48% 75%, -48% 87.5%, -56% 87.5%, -56% 100%, 0 100%); }
  to { clip-path: polygon(0 0, 156% 0, 156% 12.5%, 148% 12.5%, 148% 25%, 140% 25%, 140% 37.5%, 132% 37.5%, 132% 50%, 124% 50%, 124% 62.5%, 116% 62.5%, 116% 75%, 108% 75%, 108% 87.5%, 100% 87.5%, 100% 100%, 0 100%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html.js:not(.no-hide) .reveal:not(.in) { opacity: 1; transform: none; }
  html.js:not(.no-hide) .panel:not(.in) { clip-path: none; }
  html.js:not(.no-hide) .panel:not(.in) .mz [class*=" d"] { opacity: 1; }
  html.js:not(.no-hide) .cta-bar:not(.show) { transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}