/* Freeduchio: the cafe's own identity. Bottle green line art on cream paper, red-orange roses and lips,
   mustard smoke, the wide condensed capitals of the FREEDUCHIO wordmark (Fira Sans Extra Condensed),
   round signs and speech bubbles like the ones on the facade and the menu stands.
   Motion: the logo draws itself with one pen and the roses bloom, a cezve pours as you scroll,
   the round sign swings on its bracket, garlands grow between sections, pen strokes underline titles,
   pages slide in like the next menu card.
   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: "Fira Sans Extra Condensed"; src: url("/fonts/fira-sans-xc-800.woff2") format("woff2"); font-weight: 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0400-045F, U+0490-0491, U+2010-2027, U+2030-203A, U+20AC, U+2116, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Fira Sans"; src: url("/fonts/fira-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0400-045F, U+0490-0491, U+2010-2027, U+2030-203A, U+20AC, U+2116, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Fira Sans"; src: url("/fonts/fira-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0400-045F, U+0490-0491, U+2010-2027, U+2030-203A, U+20AC, U+2116, U+2122, U+2190-2193, U+2212; }
@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, U+20BE; }

:root {
  /* the cafe's colours: logo green, rose red-orange, smoke mustard, sign cream */
  --green: #00543d; --green-deep: #003d2c; --orange: #f84102; --mustard: #f0a800;
  --cream: #efe1be; --card: #f8f0dd; --muted: #2e6152;
  --tag: #f2b21c;              /* price tags: green text on it stays AA */
  --mustard-text: #f5bd36;     /* mustard for small text on green */
  --line: rgba(0, 84, 61, .2);
  --paper: var(--cream);
  /* logo parts follow these, so a drawing can sit on green as well as on cream */
  --lk-ink: var(--green); --lk-paper: var(--paper); --lk-or: var(--orange); --lk-mu: var(--mustard); --lk-disc: var(--cream);
  --ln: var(--green);
  --display: "Fira Sans Extra Condensed", "Noto Sans Georgian", "Arial Narrow", sans-serif;
  --body: "Fira Sans", "Noto Sans Georgian", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --wrap: 1180px; --gutter: clamp(16px, 4vw, 36px);
  --ease: cubic-bezier(.2, .75, .2, 1);
  --snap: cubic-bezier(.3, 1.6, .5, 1);
  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(--green); font: 400 1.0625rem/1.6 var(--body); background: var(--paper); font-synthesis: none; }
main, .site-footer { overflow-x: clip; }
img, svg { max-width: 100%; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--orange); }
a:hover { text-decoration-color: var(--green); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--green); color: var(--cream); padding: .6rem 1rem; border-radius: 999px; z-index: 50; }
.skip:focus { top: 8px; }

h1, h2, h3 { margin: 0; line-height: 1.05; }
h1, h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font: 600 1.15rem/1.25 var(--body); }
.lang-ka h1, .lang-ka h2 { text-transform: none; letter-spacing: 0; line-height: 1.2; }
.lang-ka h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
p { margin: 0 0 1rem; }
b, strong { font-weight: 600; }

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

/* ---------- the logo ---------- */
.lk-ink { fill: var(--lk-ink); }
.lk-paper { fill: var(--lk-paper); }
.lk-or { fill: var(--lk-or); }
.lk-mu { fill: var(--lk-mu); }
.lk-disc { fill: var(--lk-disc); }
.lk-ln, .lk-petal, .lk-seam { stroke: var(--lk-ink); }
.lk-neck { stroke: var(--lk-or); }
.lockup, .head-mark, .wordmark, .badge { display: block; overflow: visible; }

/* ---------- line icons and ornaments ---------- */
.icon .ln, .pour-art .ln, .sign .ln, .spilled .ln, .squiggle path { fill: none; stroke: var(--ln); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.icon .ln { stroke-dasharray: 1; }
.fo { fill: var(--orange); } .fm { fill: var(--mustard); } .fp { fill: var(--card); }
.ln { stroke: var(--ln); }
.rose-mark { width: 1.35em; height: 1.35em; flex: none; }

/* ---------- header ---------- */
.site-header { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.6rem; padding: 1rem 0; view-transition-name: masthead; }
.logo { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.logo .head-mark { width: 54px; height: 54px; flex: none; }
.logo .wordmark { width: 196px; height: auto; }
@media (hover: hover) { .logo:hover .lk-rose { animation: nod .6s var(--snap); } }
.lk-rose { transform-box: fill-box; transform-origin: 50% 80%; }
@keyframes nod { 40% { transform: rotate(-12deg) scale(1.08); } }
.nav { display: flex; gap: 1.4rem; margin-inline-start: auto; font: 600 .86rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; }
.lang-ka .nav { text-transform: none; letter-spacing: 0; font-size: 1rem; }
.nav a { position: relative; text-decoration: none; padding: .45rem .1rem; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: none; }
.head-end { display: flex; align-items: center; gap: .9rem; }
.lang { display: flex; gap: .15rem; font: 600 .8rem/1 var(--body); letter-spacing: .08em; }
.lang a { text-decoration: none; padding: .45rem .5rem; border: 1.5px solid transparent; border-radius: 999px; }
.lang a[aria-current="true"] { border-color: var(--green); background: var(--card); }
@media (max-width: 760px) {
  .site-header { column-gap: .6rem; }
  .logo { flex: 1 0 100%; }
  .logo .head-mark { width: 44px; height: 44px; }
  .logo .wordmark { width: 160px; }
  .nav { margin: 0; gap: .8rem; font-size: .76rem; letter-spacing: .1em; }
  .lang a { padding: .4rem .4rem; }
  .head-end { margin-inline-start: auto; }
  .site-header .head-call { display: none; }
}

/* ---------- buttons: round like the cafe's signs ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px; padding: .7rem 1.5rem;
  font: 600 1rem/1.2 var(--body); text-decoration: none; cursor: pointer; color: var(--cream); background: var(--green);
  border: 2px solid var(--green); border-radius: 999px; transition: background .25s, color .25s, transform .25s var(--snap);
}
@media (hover: hover) { .btn:hover { background: var(--green-deep); border-color: var(--green-deep); transform: translateY(-2px); } }
.btn:active { transform: translateY(1px); }
.btn-ghost { color: var(--green); background: transparent; }
@media (hover: hover) { .btn-ghost:hover { color: var(--green); background: var(--card); border-color: var(--green); } }
.btn-sm { min-height: 42px; padding: .45rem 1.05rem; font-size: .92rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem 1rem; margin: 1.5rem 0; }
.cta-row.center { justify-content: center; }

/* ---------- hero: the logo draws itself ---------- */
.hero { display: grid; gap: 1rem 3.5rem; align-items: center; padding: clamp(.5rem, 2vw, 1.5rem) 0 clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 960px) { .hero { grid-template-columns: 1.12fr .88fr; } }
.hero-visual { position: relative; width: 100%; max-width: 660px; justify-self: center; }
.hero-lockup { width: 100%; height: auto; }
.eyebrow .rose-mark { width: 22px; height: 22px; }
.eyebrow { display: flex; align-items: center; gap: .55rem; margin: 0 0 1rem; font: 600 .8rem/1.2 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.lang-ka .eyebrow { letter-spacing: .02em; text-transform: none; font-size: .95rem; }
.h1-sub { display: block; font-size: clamp(2.3rem, 4.6vw, 3.9rem); line-height: .98; }
.lang-ka .h1-sub { font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.15; }
.lede { font-size: clamp(1.08rem, 1.5vw, 1.22rem); max-width: 34em; margin-top: 1.1rem; }
.facts { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; }
.facts li { padding: .32rem .8rem; font-weight: 600; font-size: clamp(.82rem, 2.4vw, .92rem); background: var(--card); border: 1.5px solid var(--green); border-radius: 999px; }

/* the pen: every line of the drawing is drawn from its start, top of the figure first */
.hero-lockup .lk-ln, .chooser-art .lk-ln { stroke-dasharray: 1; animation: pen .9s var(--ease) backwards; animation-delay: calc(.15s + var(--d) * .9s); }
.hero-lockup .lk-neck, .chooser-art .lk-neck { stroke-dasharray: 1; animation: pen .8s var(--ease) 1.05s backwards; }
@keyframes pen { from { stroke-dashoffset: 1; opacity: 0; } 8% { opacity: 1; } }
/* flat colours come in under the lines: hair, roses bloom one by one, lips and earring, the wine fills up */
.hero-lockup .lk-hair, .chooser-art .lk-hair { animation: fade .6s ease-out .75s backwards; }
@keyframes fade { from { opacity: 0; } }
.hero-lockup .lk-rose, .chooser-art .lk-rose { animation: bloom .7s var(--snap) backwards; animation-delay: calc(1.05s + var(--i) * .16s); }
@keyframes bloom { from { transform: scale(0) rotate(-40deg); } }
.hero-lockup .lk-pop, .chooser-art .lk-pop { transform-box: fill-box; transform-origin: 50% 50%; animation: pop .45s var(--snap) 1.5s backwards; }
@keyframes pop { from { transform: scale(0); } }
.hero-lockup .lk-wine, .chooser-art .lk-wine { transform-box: fill-box; transform-origin: 50% 100%; animation: wine 1s var(--ease) 1.25s backwards; }
@keyframes wine { from { transform: scaleY(0); } }
.lk-smoke { transform-box: fill-box; transform-origin: 70% 100%; }
.hero-lockup .lk-smoke, .chooser-art .lk-smoke { animation: smoke-in .9s var(--ease) 1.6s backwards; }
@keyframes smoke-in { from { opacity: 0; transform: translateY(8px) scaleY(.4); } }
/* the name rises letter by letter behind the arm, then the tagline appears along its arc */
.hero-lockup .lk-l, .chooser-art .lk-l { animation: rise .7s var(--ease) backwards; animation-delay: calc(.9s + var(--i) * .06s); }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }
.hero-lockup .lk-tag path, .chooser-art .lk-tag path { animation: fade .4s ease-out backwards; animation-delay: calc(1.6s + var(--i) * .035s); }
/* smoke keeps drifting: a loop, so only while app.js can pause it (off screen: .off, hidden tab: html.paused) */
html.ready .hero-lockup .lk-smoke { animation: smoke-in .9s var(--ease) 1.6s backwards, drift 5.5s ease-in-out 2.5s infinite; }
@keyframes drift { 50% { transform: translateX(-3px) skewX(-5deg) scaleY(1.04); } }
.off .lk-smoke, html.paused .lk-smoke, .off .steam, html.paused .steam { animation-play-state: paused; }

/* stickers: a speech bubble like the "Welcome" on the menu stands, and a round seal for the rating */
.sticker { position: absolute; z-index: 2; display: grid; place-items: center; text-align: center; rotate: var(--r, 0deg); pointer-events: none; }
.bubble { padding: .55rem 1.1rem .6rem; font: 800 1.3rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--orange); border-radius: 999px; }
.bubble::after { content: ""; position: absolute; left: 18%; bottom: -9px; border: 9px solid transparent; border-top-color: var(--orange); border-bottom: 0; border-left-width: 4px; rotate: 18deg; }
.lang-ka .bubble { font: 800 1.05rem/1.15 var(--body); text-transform: none; letter-spacing: 0; }
.seal { width: 7.4rem; height: 7.4rem; padding: 1rem; font: 600 .78rem/1.15 var(--body); letter-spacing: .06em; color: var(--green); background: var(--tag); border-radius: 50%; box-shadow: inset 0 0 0 5px var(--tag), inset 0 0 0 6.5px var(--green); }
.seal b { display: block; font: 800 2.1rem/1 var(--display); letter-spacing: .02em; }
.s-bubble { left: 61%; top: 1%; }
.s-rate { right: 1%; bottom: -9%; }
@media (max-width: 560px) { .bubble { font-size: 1rem; } .s-bubble { left: 64%; top: 0; } .hero .s-rate { display: none; } }
.hero .sticker { animation: speak .55s var(--snap) backwards; animation-delay: calc(2.2s + var(--i) * .3s); }
@keyframes speak { from { opacity: 0; scale: .2; translate: -30% 40%; } }

/* ---------- garlands between sections: a vine with roses, grown by scrolling ---------- */
.garland { margin-block: clamp(.8rem, 3vw, 2rem); }
.garland svg { display: block; width: 100%; height: clamp(28px, 3.4vw, 42px); }
.garland .vine { stroke-dasharray: 1; }
@supports (animation-timeline: view()) {
  .garland .vine { animation: grow linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
  .garland .g-rose { animation: fade linear both; animation-timeline: view(); animation-range: entry 30% cover 28%; }
  @keyframes grow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
}

/* ---------- sections ---------- */
.section { padding: clamp(2rem, 5vw, 3.75rem) 0; }
.sec-head { position: relative; max-width: 46em; margin-bottom: 1.8rem; }
.sec-head .rose-mark { display: block; width: 26px; height: 26px; margin-bottom: .55rem; }
.squiggle { display: block; width: 150px; height: 12px; margin: .45rem 0 .2rem; }
.squiggle path { stroke: var(--orange); stroke-width: 2.6; stroke-dasharray: 1; transition: stroke-dashoffset 1s var(--ease) .35s; }
.section-intro { font-size: 1.12rem; max-width: 40em; color: var(--muted); margin: .7rem 0 0; }
.more { margin-top: 1.6rem; font-weight: 600; }
.center { text-align: center; }

/* dish cards: like the cafe's menu cards, a line icon and a mustard price tag */
.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.card { position: relative; padding: 1.4rem 1.3rem 1.3rem; background: var(--card); border: 1.5px solid var(--green); border-radius: 26px; transition: transform .35s var(--ease), box-shadow .35s var(--ease), opacity .5s var(--ease), translate .7s var(--ease), clip-path .8s var(--ease); }
.card h3 a { text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card p { margin: .4rem 0 .9rem; color: var(--muted); font-size: .98rem; }
.price { display: inline-block; padding: .22rem .7rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--tag); border-radius: 999px; }
.card-art { display: block; width: 84px; height: 84px; margin: 0 0 .5rem; }
.card-art .icon { width: 100%; height: 100%; display: block; }
@media (max-width: 560px) {
  .cards { gap: 1rem; }
  .card { display: grid; grid-template-columns: 64px 1fr; column-gap: 1rem; padding: 1.1rem 1rem 1rem; }
  .card-art { grid-row: span 3; width: 64px; height: 64px; }
  .card p { margin-bottom: .6rem; }
  .card .price { justify-self: start; }
}
@media (hover: hover) {
  .card:hover { transform: translateY(-4px); box-shadow: 0 10px 0 -2px var(--tag); }
  .card:hover .icon .ln, .tile:hover .icon .ln, .sheet-head:hover .icon .ln { animation: pen .9s var(--ease); }
}
.card:focus-within { box-shadow: 0 0 0 3px var(--orange); }

/* coffee band: the green of the cups and menu stands, the drawing on a round cream sign */
.band { position: relative; color: var(--cream); background: var(--green); padding: clamp(2.5rem, 6vw, 4.5rem) 0; margin-block: clamp(1rem, 3vw, 2rem); --lk-ink: var(--cream); }
.band-inner { position: relative; width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; display: grid; gap: 2rem 3.5rem; align-items: center; }
@media (min-width: 900px) { .band-inner { grid-template-columns: .85fr 1.15fr; } }
.band h2 { color: var(--cream); }
.band .section-intro { color: #e3ead7; }
.band a { text-decoration-color: var(--mustard-text); }
.pour-wrap { position: relative; justify-self: center; width: min(86%, 430px); aspect-ratio: 1; display: grid; place-items: center; background: var(--cream); border-radius: 50%; box-shadow: 0 0 0 6px var(--green), 0 0 0 7.5px var(--cream); --ln: var(--green); }
.pour-art { display: block; width: 62%; height: auto; overflow: visible; }
.pour-art .liquid { transform: scaleY(var(--p, 1)); transform-box: fill-box; transform-origin: 50% 100%; }
.pour-art .crema { fill: var(--orange); opacity: .35; }
.pour-art .stream { stroke: var(--mustard); stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: opacity .25s, stroke-dashoffset .35s var(--ease); }
.pour-art.pouring .stream { opacity: 1; stroke-dashoffset: 0; }
.pour-art .pot { transform-box: view-box; transform-origin: 108px 176px; transition: transform .5s var(--ease); }
.pour-art.pouring .pot { transform: rotate(22deg); }
.pour-art .steam { stroke-dasharray: .42 .58; opacity: .9; }
html.ready .pour-art .steam { animation: steam 3.2s linear infinite; animation-delay: calc(1s + var(--i) * .5s); }
@keyframes steam { 0% { stroke-dashoffset: .58; opacity: 0; } 25% { opacity: .9; } 75% { opacity: .9; } 100% { stroke-dashoffset: -.42; opacity: 0; } }
.s-coffee { top: 2%; right: -4%; }
.coffee .sec-head { max-width: none; }
.coffee .squiggle path { stroke: var(--mustard); }
.lists { display: grid; gap: 1.2rem 2.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.lists h3 { margin: 0 0 .4rem; padding-bottom: .35rem; font: 600 .82rem/1.2 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--cream); border-bottom: 2px solid var(--mustard); }
.lang-ka .lists h3 { letter-spacing: 0; font-size: 1rem; }
.pricelist { list-style: none; margin: 0; padding: 0; }
.pricelist li, .menu-list .row { display: flex; align-items: baseline; gap: .5rem; padding: .42rem 0; }
.pl-name { font-weight: 600; }
.dots { flex: 1; min-width: 1rem; border-bottom: 2px dotted currentColor; opacity: .4; translate: 0 -.28em; }
.band .price { padding: 0; color: var(--mustard-text); background: none; }

/* review topics: thin green tubes filled with mustard to the share of positive reviews */
.ledger { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.ledger li { display: grid; grid-template-columns: minmax(6.5rem, 9.5rem) 1fr auto; align-items: center; gap: .9rem; }
.l-name { font-weight: 600; }
.l-bar { position: relative; height: 1.1rem; border: 1.5px solid var(--green); border-radius: 999px; background: var(--card); overflow: hidden; }
.l-bar i { position: absolute; inset: 2px; border-radius: inherit; background: var(--mustard); transform-origin: 0 50%; transform: scaleX(var(--v)); transition: transform 1.2s var(--ease); transition-delay: calc(.25s + var(--i) * .08s); }
html.js:not(.no-hide) .ledger:not(.in) .l-bar i { transform: scaleX(.03); }
.l-val { white-space: nowrap; font-size: .9rem; color: var(--muted); }
.l-val b { font: 800 1.55rem/1 var(--display); color: var(--green); margin-inline-end: .2rem; }
@media (max-width: 520px) { .ledger li { grid-template-columns: 1fr auto; } .l-bar { grid-column: 1 / -1; grid-row: 2; } }

/* ratings as round signs */
.stamps { display: flex; flex-wrap: wrap; gap: 2rem 3rem; justify-content: center; padding-block: .5rem; }
.stamp {
  position: relative; display: grid; align-content: center; justify-items: center; gap: .2rem; width: min(100%, 17rem); aspect-ratio: 1; padding: 2rem 1.5rem;
  text-align: center; text-decoration: none; color: var(--green); background: var(--card); border-radius: 50%; rotate: var(--r);
  box-shadow: inset 0 0 0 2px var(--green), inset 0 0 0 9px var(--card), inset 0 0 0 10.5px var(--green); transition: transform .4s var(--snap);
}
.stamp-src { font: 600 .8rem/1.2 var(--body); letter-spacing: .18em; text-transform: uppercase; }
.lang-ka .stamp-src { letter-spacing: 0; }
.stamp-num { font: 800 clamp(3.6rem, 8vw, 4.6rem)/1 var(--display); }
.stamp-count { font-weight: 600; }
.stamp-open { margin-top: .2rem; font-weight: 600; font-size: .92rem; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (hover: hover) { .stamp:hover { transform: rotate(-4deg) scale(1.03); } }
.count { font-variant-numeric: tabular-nums; }

/* ways to eat */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.tile { padding: 1.2rem 1.25rem 1.1rem; background: var(--card); border: 1.5px solid var(--green); border-radius: 26px; }
.tile .icon { display: block; width: 64px; height: 64px; margin-bottom: .5rem; }
.tile p { margin: .35rem 0 0; color: var(--muted); }

/* delivery: one button per service that carries the cafe */
.delivery { display: grid; gap: .8rem 1.6rem; align-items: center; margin-top: 1.4rem; padding: 1.3rem 1.6rem; color: var(--cream); background: var(--green); border-radius: 30px; --ln: var(--cream); scroll-margin-top: 1.5rem; }
@media (min-width: 700px) { .delivery { grid-template-columns: auto 1fr auto; } }
.delivery-art .icon { display: block; width: 64px; height: 64px; }
.delivery h2, .delivery h3 { font: 800 clamp(1.5rem, 2.6vw, 1.9rem)/1.05 var(--display); text-transform: uppercase; letter-spacing: .07em; }
.lang-ka .delivery h2, .lang-ka .delivery h3 { text-transform: none; letter-spacing: 0; }
.delivery p { margin: .35rem 0 0; color: #e3ead7; }
.delivery-btns { display: flex; flex-wrap: wrap; gap: .7rem; }
.btn-service { min-width: 9rem; color: var(--green); background: var(--cream); border-color: var(--cream); }
@media (hover: hover) { .btn-service:hover { color: var(--green); background: var(--tag); border-color: var(--tag); } }
.delivery :focus-visible { outline-color: var(--mustard-text); }

/* address card like a menu stand, and the round sign on its bracket */
.coupon { position: relative; max-width: 46rem; padding: 1.6rem 1.7rem 1.2rem; background: var(--card); border: 1.5px solid var(--green); border-radius: 28px; }
.coupon h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); margin-bottom: .6rem; }
.coupon address { font-style: normal; }
.coupon address p, .coupon > p { margin: 0 0 .75rem; }
.coupon strong { display: block; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.lang-ka .coupon strong { letter-spacing: 0; font-size: .85rem; }
.map-open { display: flex; flex-wrap: wrap; gap: .6rem; }
.tel { font-weight: 600; white-space: nowrap; }
.where-grid { display: grid; gap: 2rem 3rem; align-items: center; }
@media (min-width: 860px) { .where-grid { grid-template-columns: 1.2fr .8fr; } }
.sign-wrap { justify-self: center; width: min(100%, 360px); }
.sign-bracket { display: block; width: 100%; height: auto; }
.sign-bracket .ln { stroke-width: 3; }
.sign-board { width: 72%; margin: -4.5% auto 0; transform-origin: 50% -6%; filter: drop-shadow(0 8px 0 rgba(0, 84, 61, .1)); --lk-disc: var(--card); }
.sign-board .lk-disc { stroke: var(--green); stroke-width: 3; }
.sign-board .badge { width: 100%; height: auto; }
.sign-wrap.in .sign-board { animation: swing 2.4s var(--ease) .2s; }
@media (hover: hover) { .sign-wrap:hover .sign-board { animation: swing-soft 1.6s var(--ease); } }
@keyframes swing { 0% { rotate: -11deg; } 22% { rotate: 7deg; } 42% { rotate: -4deg; } 62% { rotate: 2deg; } 80% { rotate: -.8deg; } 100% { rotate: 0deg; } }
@keyframes swing-soft { 25% { rotate: 4deg; } 55% { rotate: -2.5deg; } 80% { rotate: 1deg; } }

/* FAQ */
.qa-list { display: grid; gap: .8rem; max-width: 52em; }
.qa { background: var(--card); border: 1.5px solid var(--green); border-radius: 22px; padding: .1rem 1.2rem; }
.qa summary { cursor: pointer; font-weight: 600; padding: .9rem 0; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+" / ""; font: 800 1.7rem/.8 var(--display); color: var(--orange); transition: transform .3s var(--snap); }
.qa[open] summary::after { transform: rotate(45deg); }
.qa[open] p { animation: qa-open .35s var(--ease); }
@keyframes qa-open { from { opacity: 0; transform: translateY(-6px); } }
.faq-list { display: grid; gap: 1.1rem; max-width: 52em; }
.qa-full { padding: 1.15rem 1.4rem; background: var(--card); border: 1.5px solid var(--green); border-radius: 24px; }
.qa-full h2 { font: 600 clamp(1.15rem, 2.2vw, 1.35rem)/1.3 var(--body); text-transform: none; letter-spacing: 0; margin-bottom: .45rem; }
.qa-full p { margin: 0; }

/* ---------- inner pages ---------- */
.page-head { padding: clamp(1.5rem, 5vw, 3.2rem) 0 .5rem; }
.page-head > .rose-mark { display: block; width: 30px; height: 30px; margin-bottom: .6rem; }
.page-head h1 { font-size: clamp(2.6rem, 7vw, 5rem); line-height: .98; }
.lang-ka .page-head h1 { font-size: clamp(2rem, 5.2vw, 3.4rem); }
.chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.chips a { padding: .42rem .95rem; font-weight: 600; font-size: .92rem; text-decoration: none; background: var(--card); border: 1.5px solid var(--green); border-radius: 999px; transition: background .2s, color .2s; }
.chips a:hover { color: var(--cream); background: var(--green); }

.sheets { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin: 2rem auto 0; columns: 2 460px; column-gap: 2rem; }
.sheet { position: relative; break-inside: avoid; margin: 0 0 2rem; padding: 1.5rem 1.5rem 1rem; background: var(--card); border: 1.5px solid var(--green); border-radius: 28px; scroll-margin-top: 1.5rem; }
.sheet-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .4rem; }
.sheet-head .icon { width: 58px; height: 58px; flex: none; }
.sheet-head h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.2rem); }
.sheet-intro { color: var(--muted); margin: .2rem 0 .4rem; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list li { padding: .1rem 0 .5rem; border-bottom: 1px solid var(--line); scroll-margin-top: 1.5rem; }
.menu-list li:last-child { border-bottom: 0; }
.menu-list .row { padding: .4rem 0 0; }
.menu-list h3 { font-size: 1.04rem; }
.menu-list p { margin: .15rem 0 0; font-size: .95rem; color: var(--muted); max-width: 34em; }
.menu-list li:target { background: rgba(242, 178, 28, .3); border-radius: 12px; }

.contact-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 840px) { .contact-grid { grid-template-columns: 1.1fr .9fr; } }
.paper-card { padding: 1.4rem 1.6rem; background: var(--card); border: 1.5px solid var(--green); border-radius: 28px; }
.paper-card h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: .5rem; }
.paper-card h2.mt { margin-top: 1.4rem; }
.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { text-align: start; padding: .38rem 0; border-bottom: 1px dotted rgba(0, 84, 61, .45); font-weight: 400; }
.hours td { text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; }
.link-list { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .1rem; font-weight: 600; }
.link-list a { display: inline-block; padding-block: .3rem; }

/* two maps: Yandex and Google tabs over one stage; the open links under it work without JS */
.maps { margin-top: .5rem; }
.map-tabs { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: .9rem; }
.map-tab[aria-pressed="true"] { color: var(--cream); background: var(--green); }
.map { position: relative; display: grid; justify-items: center; align-content: center; gap: .8rem; min-height: 340px; padding: 1.5rem; background: var(--card); border: 1.5px solid var(--green); border-radius: 28px; overflow: hidden; }
.map-rose { width: 54px; height: 54px; }
.map-hint { margin: 0; color: var(--muted); font-weight: 600; text-align: center; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map.loaded > .map-rose, .map.loaded > .map-hint { visibility: hidden; }
html:not(.js) .map-tabs, html:not(.js) .map { display: none; }
.maps .cta-row { margin-bottom: 0; }

/* ---------- footer: the green of the cups ---------- */
.site-footer { margin-top: 1rem; padding: clamp(2rem, 5vw, 3rem) 0 2rem; color: var(--cream); background: var(--green); }
.footer-inner { display: grid; gap: 1.6rem; }
@media (min-width: 780px) { .footer-inner { grid-template-columns: 1.3fr 1.1fr .9fr; } }
.footer-brand { display: flex; align-items: center; gap: .8rem; margin: 0 0 .8rem; }
.footer-brand .head-mark { width: 62px; height: 62px; flex: none; }
.footer-brand .wordmark { width: min(230px, 60vw); height: auto; }
.footer-brand .wordmark .lk-ink { fill: var(--cream); }
.site-footer address { font-style: normal; }
.site-footer address p { margin: 0 0 .3rem; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .05rem 1.6rem; grid-template-columns: repeat(2, max-content); align-content: start; font-weight: 600; }
.footer-links a, .footer-meta a { display: inline-block; padding-block: .3rem; }
.site-footer a { text-decoration-color: var(--mustard-text); }
.site-footer :focus-visible { outline-color: var(--mustard-text); }
.footer-meta { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(239, 225, 190, .35); font-size: .92rem; }

/* mobile call bar slides up after the first screen */
.cta-bar { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: 5.6rem; }
  .cta-bar { position: fixed; z-index: 20; inset: auto 0 0 0; display: flex; gap: .8rem; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background: var(--cream); border-top: 1.5px solid var(--green); transition: transform .45s var(--ease); }
  .cta-bar .btn { flex: 1; }
  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; }
}

/* root language chooser and 404 */
.chooser { display: grid; justify-items: center; gap: .4rem; text-align: center; padding: clamp(1.5rem, 5vw, 3rem) 0; min-height: 100svh; align-content: center; }
.chooser-art { width: min(100%, 560px); }
.chooser-art .lockup { width: 100%; height: auto; }
.chooser-sub { margin-top: 1rem; font-weight: 600; max-width: 40em; }
.chooser .lede { margin-top: .2rem; color: var(--muted); }
.page-404 .chooser h1 { font-size: clamp(5rem, 20vw, 9rem); line-height: 1; }
.spilled { width: 240px; height: auto; }

/* scroll reveals: a card is laid on the table, top edge first */
.reveal { transition: opacity .5s var(--ease), translate .75s var(--ease), clip-path .85s var(--ease); transition-delay: calc(var(--i, 0) * .08s); }
/* Not inset(... 100% ...): Chromium's IntersectionObserver honours the target's own clip-path, so a fully clipped block never intersects and never reveals. */
html.js:not(.no-hide) .reveal:not(.in) { opacity: 0; translate: 0 22px; clip-path: inset(0 0 94% 0); }
html.js .reveal.in { clip-path: inset(-60px -60px -60px -60px); }
/* the pen stroke under a title is drawn once the title is in */
html.js:not(.no-hide) .reveal:not(.in) .squiggle path { stroke-dashoffset: 1; }
/* stickers outside the hero pop up like a speech bubble */
.slap { transition: opacity .2s, scale .55s var(--snap), rotate .55s var(--snap); transition-delay: calc(.3s + var(--i, 0) * .14s); }
html.js:not(.no-hide) .slap:not(.in) { opacity: 0; scale: .3; rotate: calc(var(--r, 0deg) - 16deg); }

/* page transitions (Chromium, Safari): the next page slides up like the next menu card */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .4s cubic-bezier(.5, 0, .75, 0) both; }
::view-transition-new(root) { animation: vt-in .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-1.5%) scale(.985); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(5%); } }

@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; translate: none; clip-path: none; }
  html.js:not(.no-hide) .reveal:not(.in) .squiggle path { stroke-dashoffset: 0; }
  html.js:not(.no-hide) .slap:not(.in) { opacity: 1; scale: none; rotate: var(--r, 0deg); }
  html.js:not(.no-hide) .ledger:not(.in) .l-bar i { transform: scaleX(var(--v)); }
  html.js:not(.no-hide) .cta-bar:not(.show) { transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}