/* Amedeo: Italian Riviera travel poster, 1950s-60s. Flat screen-print colours, lido stripes,
   big italic display type with a misregistered lemon shadow, generous poster margins.
   Motion: poster layers slide in on load and drift on scroll, the umbrella spins, lido awnings unroll,
   lemons drop into a bowl, pasta twirls on hover, a Vespa rides the footer promenade.
   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: "Alegreya"; src: url("/fonts/alegreya-italic.woff2") format("woff2"); font-style: italic; font-weight: 500 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-2044, U+20AC, U+20BE, U+2116, U+2122, U+2212; }
@font-face { font-family: "Alegreya Sans"; src: url("/fonts/alegreya-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-2044, U+20AC, U+20BE, U+2116, U+2122, U+2212; }
@font-face { font-family: "Alegreya Sans"; src: url("/fonts/alegreya-sans-700.woff2") format("woff2"); font-weight: 700; 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-2044, U+20AC, U+20BE, U+2116, U+2122, U+2212; }
@font-face { font-family: "Lobster"; src: url("/fonts/lobster.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0020-00FF, U+2013-2014, U+2019; }
@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 {
  --cream: #f6ecd9; --paper: #fbf5ea; --sand: #eed6a6; --sand-deep: #ddbd84;
  --terra: #c8553d; --terra-deep: #a8432e; --teal: #1b7f8a; --teal-deep: #13616a; --teal-light: #7cc1bd;
  --lemon: #f6c945; --lemon-deep: #e0a52b; --green: #2f5d3a; --green-deep: #22472c;
  --ink: #2a211c; --muted: #5b4a3f; --focus: #13616a;
  --navy: #0f0e3c; --gold: #c8975f; /* the restaurant's own logo colours */
  --display: "Alegreya", "Noto Sans Georgian", Georgia, serif;
  --script: "Lobster", "Alegreya", Georgia, cursive;
  --body: "Alegreya Sans", "Noto Sans Georgian", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 1180px; --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1); --ease-io: cubic-bezier(.65, 0, .35, 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(--ink); background: var(--cream); font: 400 1.125rem/1.55 var(--body); overflow-x: clip; }
img, svg { max-width: 100%; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
a { color: var(--terra-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--ink); text-decoration-color: var(--lemon-deep); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--ink); color: var(--paper); padding: .6rem 1rem; border-radius: 8px; z-index: 50; }
.skip:focus { top: 8px; color: var(--paper); }

h1, h2, h3 { font-family: var(--display); font-style: italic; font-weight: 800; line-height: 1.04; margin: 0; letter-spacing: -.005em; color: var(--terra-deep); }
h1 { font-size: clamp(2.6rem, 5vw, 4.15rem); text-shadow: 3px 3px 0 rgba(246, 201, 69, .85); }
h2 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); margin-bottom: .6rem; text-shadow: 2px 2px 0 rgba(246, 201, 69, .7); }
h3 { font-size: 1.6rem; color: var(--ink); }
/* Georgian has no italic: upright heavy sans, no synthetic slant */
.lang-ka h1, .lang-ka h2, .lang-ka h3 { font-style: normal; font-synthesis: none; font-weight: 800; letter-spacing: 0; }
.lang-ka h1 { font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.18; }
.lang-ka h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.22; }
.lang-ka h3 { font-size: 1.25rem; line-height: 1.3; }
.lang-ka body, body.lang-ka { font-size: 1.05rem; line-height: 1.65; }
p { margin: 0 0 1rem; }

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

/* ---------- top awning ---------- */
.awning { height: 30px; background: linear-gradient(var(--ink) 0 5px, transparent 5px), repeating-linear-gradient(90deg, var(--terra) 0 30px, var(--paper) 30px 60px);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% 16px no-repeat, radial-gradient(circle at 50% 0, #000 14.5px, #0000 15px) 0 16px / 30px 14px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% 16px no-repeat, radial-gradient(circle at 50% 0, #000 14.5px, #0000 15px) 0 16px / 30px 14px repeat-x;
  view-transition-name: awning; animation: unroll 1.1s var(--ease-io) backwards; }
@keyframes unroll { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- header ---------- */
.site-header { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1.6rem; padding: .7rem 0 1rem; view-transition-name: site-header; }
/* the restaurant's own logo: gold monogram and navy AMEDEO */
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo-lockup { display: block; width: 214px; height: auto; aspect-ratio: 312 / 75; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nav { display: flex; gap: 1.4rem; margin-inline-start: auto; font-weight: 700; font-size: 1.05rem; }
.nav a { color: var(--ink); text-decoration: none; padding: .3rem 0; background: linear-gradient(var(--lemon), var(--lemon)) 0 88% / 0 6px no-repeat; transition: background-size .3s var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { background-size: 100% 6px; }
.lang { display: flex; gap: .2rem; font: 700 .85rem/1 var(--body); }
.lang a { color: var(--ink); text-decoration: none; padding: .45rem .55rem; border-radius: 999px; border: 2px solid transparent; }
.lang a:hover { border-color: var(--sand-deep); }
.lang a[aria-current="true"] { background: var(--teal-deep); color: var(--paper); }
@media (max-width: 800px) {
  .site-header { column-gap: .6rem; padding-bottom: .6rem; }
  .site-header .head-call { display: none; }
  .logo { flex: 1 1 auto; }
  .logo-lockup { width: 168px; }
  .nav { order: 3; flex: 1 0 100%; margin: 0; gap: 1.1rem; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px;
  padding: .7rem 1.4rem; font: 700 1.02rem/1.2 var(--body); text-decoration: none; cursor: pointer; white-space: nowrap;
  color: var(--paper); background: var(--terra-deep); border: 2px solid var(--terra-deep); border-radius: 999px;
  box-shadow: 4px 4px 0 var(--lemon); transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s;
}
.btn:hover { color: var(--paper); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--lemon); background-image: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(255, 255, 255, .1) 10px 20px); background-size: 28.28px 28.28px; animation: march .7s linear infinite; }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--lemon); }
@keyframes march { to { background-position: 28.28px 0; } }
.btn-ghost { color: var(--ink); background: var(--paper); border-color: var(--ink); box-shadow: 4px 4px 0 var(--teal-light); }
.btn-ghost:hover { color: var(--ink); background-color: var(--paper); box-shadow: 6px 6px 0 var(--teal-light); background-image: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(124, 193, 189, .25) 10px 20px); }
.btn-sm { min-height: 42px; padding: .45rem 1.1rem; font-size: .95rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: .9rem 1rem; margin: 1.5rem 0; }
.cta-row.center { justify-content: center; }

/* ---------- hero poster ---------- */
.hero { width: min(1320px, 100% - 2 * var(--gutter)); margin: .4rem auto 0; }
.poster { position: relative; display: flex; align-items: flex-start; min-height: clamp(620px, 84vh, 800px); overflow: hidden; background: var(--cream); border: 12px solid var(--paper); box-shadow: 0 0 0 1px rgba(42, 33, 28, .08), 0 28px 50px -30px rgba(42, 33, 28, .45); }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-copy { position: relative; z-index: 1; width: min(600px, 52%); padding: clamp(28px, 4.5vw, 60px) 0 2rem clamp(24px, 4.5vw, 60px); }
.eyebrow { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; font: 700 .82rem/1.2 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--teal-deep); }
.eyebrow::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--terra); box-shadow: 3px 0 0 var(--lemon); }
.lede { font-size: 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: .35rem .85rem; border-radius: 999px; font-weight: 700; font-size: .95rem; background: var(--paper); color: var(--teal-deep); box-shadow: inset 0 0 0 2px rgba(19, 97, 106, .25); }
@media (max-width: 900px) {
  .poster { flex-direction: column; min-height: 0; border-width: 8px; }
  .hero-copy { width: auto; padding: 1.6rem 1.25rem .5rem; }
  .scene { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 5; order: 2; margin-top: -6rem; }
}

/* load: poster layers slide in, each from its own direction (base state = finished poster) */
.ly { animation: ly-up 1s var(--ease) backwards; }
.ly-sky { animation-name: fade; animation-duration: .6s; }
.ly-sun .sun { animation: sun-rise 1.6s .25s var(--ease) backwards; }
.ly-far { animation-delay: .35s; }
.ly-sea { animation-delay: .15s; animation-name: sea-up; }
.ly-coast { animation: coast-in 1.2s .45s var(--ease) backwards; }
.ly-sand { animation-delay: .6s; animation-name: sand-up; }
.ly-umbrella { animation: plant 1.1s .95s cubic-bezier(.3, 1.35, .5, 1) backwards; }
.ly-gulls { animation: fade 1s 1.5s backwards; }
@keyframes fade { from { opacity: 0; } }
@keyframes ly-up { from { transform: translateY(40px); opacity: 0; } }
@keyframes sea-up { from { transform: translateY(140px); } }
@keyframes sand-up { from { transform: translateY(160px); } }
@keyframes sun-rise { from { transform: translateY(180px); } }
@keyframes coast-in { from { transform: translateX(320px); } }
@keyframes plant { from { transform: translateY(-460px) rotate(-10deg); opacity: 0; } 30% { opacity: 1; } }
.hero-copy > * { animation: copy-up .8s var(--ease) backwards; }
.hero-copy .eyebrow { animation-delay: .15s; }
.hero-copy .lede { animation-delay: .85s; }
.hero-copy .cta-row { animation-delay: 1s; }
.hero-copy .facts { animation-delay: 1.15s; }
.hero-copy h1 { animation: none; }
@keyframes copy-up { from { transform: translateY(18px); opacity: 0; } }
.w { display: inline-block; animation: rise .8s var(--ease) backwards; animation-delay: calc(.3s + var(--i) * .07s); }
@keyframes rise { from { transform: translateY(.55em) rotate(2deg); opacity: 0; } }

/* scroll + pointer parallax: app.js writes --py (px scrolled) and --mx (-1..1) on .poster */
.ly-sun { translate: calc(var(--mx, 0) * -6px) calc(var(--py, 0) * .3px); }
.ly-far { translate: calc(var(--mx, 0) * -4px) calc(var(--py, 0) * .14px); }
.ly-coast { translate: calc(var(--mx, 0) * -12px) calc(var(--py, 0) * .1px); }
.ly-sand { translate: calc(var(--mx, 0) * -18px) 0; }
.ly-umbrella { translate: calc(var(--mx, 0) * -26px) 0; }
.ly-gulls { translate: calc(var(--mx, 0) * 10px) calc(var(--py, 0) * .2px); }

/* loops: the umbrella spins and sways, the sea rolls, the boat bobs */
.umb-spin { animation: spin 8s linear infinite; }
.umb-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 6s ease-in-out infinite alternate; }
@keyframes spin { to { transform: rotate(60deg); } }
@keyframes sway { from { transform: rotate(-1.4deg); } to { transform: rotate(1.4deg); } }
.wave { animation: roll 6s linear infinite; }
.waves-b .wave { animation-duration: 9s; animation-direction: reverse; }
@keyframes roll { to { stroke-dashoffset: var(--p, -120px); } }
.boat { transform-box: fill-box; transform-origin: 50% 100%; animation: bob 3.6s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(3px) rotate(2deg); } }
.gulls { animation: drift 10s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(40px, -12px); } }
.glint { transform-box: fill-box; transform-origin: 50% 0; animation: glint 2.6s ease-in-out infinite alternate; }
@keyframes glint { to { transform: scaleX(.82); opacity: .75; } }
.off, .off * { animation-play-state: paused !important; }

/* ---------- lido awnings between sections: unroll when they enter ---------- */
.lido { height: 34px; width: 100%;
  background: linear-gradient(var(--wood, #7a4a2c) 0 6px, transparent 6px), repeating-linear-gradient(90deg, var(--terra) 0 30px, var(--paper) 30px 60px);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% 20px no-repeat, radial-gradient(circle at 50% 0, #000 14.5px, #0000 15px) 0 20px / 30px 14px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% 20px no-repeat, radial-gradient(circle at 50% 0, #000 14.5px, #0000 15px) 0 20px / 30px 14px repeat-x;
  transition: clip-path 1.3s var(--ease-io); }
.lido-teal { background: linear-gradient(var(--wood, #7a4a2c) 0 6px, transparent 6px), repeating-linear-gradient(90deg, var(--teal) 0 30px, var(--paper) 30px 60px); }
.lido-green { background: linear-gradient(var(--wood, #7a4a2c) 0 6px, transparent 6px), repeating-linear-gradient(90deg, var(--green) 0 30px, var(--lemon) 30px 60px); }
html.js:not(.no-hide) .lido:not(.in) { clip-path: inset(0 96% 0 0); }
html.js .lido.in { clip-path: inset(0 0 0 0); }

/* ---------- sections ---------- */
.section { padding: clamp(2.6rem, 6vw, 4.6rem) 0; }
.section-intro { font-size: 1.18rem; max-width: 38em; color: var(--muted); }
.page-head { padding: clamp(2rem, 6vw, 4.5rem) 0 .5rem; }
.page-head.with-art { display: grid; gap: 1rem 3rem; align-items: center; }
@media (min-width: 900px) { .page-head.with-art { grid-template-columns: 1fr 340px; } .page-head.with-art > :not(.page-art) { grid-column: 1; } .page-art { grid-column: 2; grid-row: 1 / span 4; } }
.page-art { position: relative; display: block; border: 10px solid var(--paper); box-shadow: 0 0 0 1px rgba(42, 33, 28, .07), 10px 10px 0 var(--sand); rotate: 2deg; animation: copy-up .9s .2s var(--ease) backwards; }
@media (max-width: 899px) { .page-art { display: none; } }
.page-head .lede { max-width: 36em; }
.more { margin-top: 2rem; font-weight: 700; }
.center { text-align: center; }
.kicker { margin: 0; font: 400 1.5rem/1.1 var(--script); color: var(--teal); }

/* pillars: three little travel posters */
.pillar-list { list-style: none; padding: 0; margin: 2.2rem 0 0; display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.pillar { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 10px solid var(--paper); box-shadow: 0 0 0 1px rgba(42, 33, 28, .07), 10px 10px 0 var(--sand); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.pillar:hover, .pillar:focus-within { transform: translate(-3px, -4px) rotate(-.6deg); box-shadow: 0 0 0 1px rgba(42, 33, 28, .07), 14px 14px 0 var(--sand); }
.pillar-svg { display: block; width: 100%; height: auto; }
.pillar-copy { padding: 1.1rem .5rem .4rem; }
.pillar h3 { margin: .2rem 0 .5rem; font-size: 2rem; color: var(--terra-deep); }
.pillar h3 a { color: inherit; text-decoration: none; }
.pillar h3 a::after { content: ""; position: absolute; inset: 0; }
.pillar h3 a:focus-visible { outline: none; }
.pillar:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; }
.pillar p:last-child { margin: 0; color: var(--muted); }
/* hover moments: pasta twirls on the fork, breakfast sun rays turn, coffee steams */
.twirl { transition: transform 1.6s var(--ease); }
.fork { transition: transform .9s var(--ease); }
.pillar:hover .twirl, .pillar:focus-within .twirl, .menu-section:hover .icon-pasta .twirl, .page-art:hover .twirl { transform: rotate(-720deg); }
.pillar:hover .fork, .pillar:focus-within .fork, .menu-section:hover .icon-pasta .fork, .page-art:hover .fork { animation: fork-wiggle 1.6s var(--ease); }
@keyframes fork-wiggle { 25% { transform: rotate(-9deg); } 55% { transform: rotate(7deg); } 80% { transform: rotate(-3deg); } }
.rays { transform-origin: 160px 250px; transition: transform 1.6s var(--ease); }
.pillar:hover .rays, .pillar:focus-within .rays, .page-art:hover .rays { transform: rotate(14deg); }
.yolk { transform-box: fill-box; transform-origin: 50% 50%; }
.pillar:hover .yolk { animation: wobble .7s var(--ease); }
@keyframes wobble { 30% { transform: scale(1.15, .88); } 60% { transform: scale(.94, 1.06); } }
.puff { stroke-dasharray: 1 0; }
.pillar:hover .puff, .pillar:focus-within .puff, .page-art:hover .puff { stroke-dasharray: .35 .25; animation: steam 1.4s linear infinite; animation-delay: calc(var(--i) * -.45s); }
@keyframes steam { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 1.2; } }

/* praise: a row of lido cabins on the sea */
.sea { position: relative; margin-top: 1.5rem; background: var(--teal-deep); color: var(--paper); }
.sea::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 19px; background: var(--teal-deep);
  -webkit-mask: radial-gradient(circle at 50% 100%, #000 19px, #0000 19.5px) 0 0 / 46px 19px repeat-x; mask: radial-gradient(circle at 50% 100%, #000 19px, #0000 19.5px) 0 0 / 46px 19px repeat-x; }
.sea h2 { color: var(--lemon); text-shadow: 3px 3px 0 rgba(200, 85, 61, .9); }
.sea .section-intro { color: #e9f1ee; }
.cabins { list-style: none; padding: 0; margin: 2.2rem 0 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.cabin { display: flex; flex-direction: column; }
.cabin-roof { height: 34px; background: var(--terra); clip-path: polygon(0 100%, 50% 0, 100% 100%); margin: 0 -6px; }
.cabin:nth-child(even) .cabin-roof { background: var(--lemon); }
.cabin-body { flex: 1; display: grid; place-items: end center; min-height: 190px; padding: 1.2rem .7rem .9rem; background: repeating-linear-gradient(90deg, var(--paper) 0 16px, var(--terra) 16px 32px); }
.cabin:nth-child(even) .cabin-body { background: repeating-linear-gradient(90deg, var(--paper) 0 16px, var(--teal) 16px 32px); }
.cabin-plaque { display: grid; justify-items: center; gap: .2rem; width: 100%; padding: .7rem .5rem .8rem; background: var(--paper); color: var(--ink); border-radius: 8px 8px 2px 2px; box-shadow: 0 4px 0 var(--sand-deep); }
.cabin-num { font: italic 800 2.6rem/1 var(--display); color: var(--terra-deep); font-variant-numeric: lining-nums tabular-nums; }
.cabin-label { font-weight: 700; font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.lang-ka .cabin-label { letter-spacing: 0; text-transform: none; }
.lang-ka .eyebrow { letter-spacing: .05em; }
.count { font-variant-numeric: tabular-nums; }
html.js:not(.no-hide) .cabin.reveal:not(.in) { transform: translateY(46px); }

/* ratings: postage stamps with a postmark */
.stamps { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-top: 2.2rem; }
@media (min-width: 1000px) { .ratings-section { display: grid; grid-template-columns: .75fr 1.25fr; gap: 0 3.5rem; align-items: center; } .ratings-section > h2, .ratings-section > .section-intro { grid-column: 1; } .ratings-section .stamps { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; } }
.stamp { position: relative; display: block; padding: 9px; background: var(--paper); text-decoration: none; color: var(--paper); rotate: -1.5deg;
  -webkit-mask: radial-gradient(circle at 9px 9px, #0000 5px, #000 5.5px) -9px -9px / 18px 18px, linear-gradient(#000 0 0) content-box;
  mask: radial-gradient(circle at 9px 9px, #0000 5px, #000 5.5px) -9px -9px / 18px 18px, linear-gradient(#000 0 0) content-box;
  filter: drop-shadow(0 6px 0 rgba(42, 33, 28, .12)); transition: transform .25s var(--ease), rotate .25s var(--ease); }
.stamp + .stamp { rotate: 1.5deg; }
.stamp:hover { color: var(--paper); transform: translateY(-4px); rotate: 0deg; }
.stamp-in { display: grid; justify-items: start; gap: .25rem; padding: 1.3rem 1.5rem 1.4rem; background: var(--terra-deep); outline: 2px solid rgba(251, 245, 234, .55); outline-offset: -9px; }
.stamp + .stamp .stamp-in { background: var(--teal-deep); }
.stamp-num { font: italic 800 clamp(4rem, 9vw, 5.4rem)/.9 var(--display); color: var(--lemon); }
.stamps .stars { margin: .2rem 0 .35rem; }
.stamps .stars polygon:not(.fill) { fill: rgba(251, 245, 234, .3); }
.stamps .stars .fill { fill: var(--lemon); }
.stamp-src { font-weight: 700; font-size: 1.15rem; }
.stamp-count { font-size: 1.05rem; }
.stamp-open { margin-top: .5rem; font-weight: 700; text-decoration: underline; text-decoration-color: var(--lemon); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.postmark { position: absolute; right: 14px; top: 10px; width: 112px; height: 112px; color: var(--paper); opacity: .55; rotate: -14deg; transition: opacity .5s .55s; }
html.js:not(.no-hide) .stamp:not(.in) .postmark { opacity: 0; }
.stamp.in { animation: stamp-land .55s cubic-bezier(.3, 1.5, .5, 1) backwards; }
@keyframes stamp-land { from { transform: scale(1.22) translateY(-10px); } }
.stars { display: block; height: auto; }

/* features + the lemon bowl */
.features { display: grid; gap: 2rem clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) { .features { grid-template-columns: .9fr 1.1fr; } }
.bowl { max-width: 420px; justify-self: center; width: 100%; }
.bowl-svg { display: block; width: 100%; height: auto; overflow: visible; }
.feature-list { display: grid; gap: 1.2rem 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin: 1.6rem 0 0; }
.feature { margin: 0; padding: .2rem 0 0 1.1rem; border-inline-start: 5px solid var(--lemon); }
.feature:nth-child(3n + 2) { border-color: var(--terra); }
.feature:nth-child(3n) { border-color: var(--teal); }
.feature dt { font: italic 800 1.45rem/1.1 var(--display); color: var(--terra-deep); }
.lang-ka .feature dt { font-style: normal; font-weight: 800; font-size: 1.12rem; }
.feature dd { margin: .3rem 0 0; color: var(--muted); }
.feature-price dd { font: italic 800 1.5rem/1.2 var(--display); color: var(--ink); }
.lang-ka .feature-price dd { font: 700 1.2rem/1.3 var(--body); }
/* lemons fall one by one and bounce into the bowl when it scrolls in */
.drop { will-change: transform; }
html.js:not(.no-hide) .reveal-bowl:not(.in) .drop { opacity: 0; }
.reveal-bowl.in .drop { animation: lemon-drop 1.15s var(--d, 0s) linear backwards; }
@keyframes lemon-drop {
  0% { transform: translateY(-300px) rotate(-30deg); opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  46% { transform: translateY(0) rotate(0); animation-timing-function: cubic-bezier(.1, .5, .5, 1); }
  64% { transform: translateY(-46px) rotate(8deg); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  80% { transform: translateY(0) rotate(0); animation-timing-function: cubic-bezier(.1, .5, .5, 1); }
  90% { transform: translateY(-12px) rotate(-3deg); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  100% { transform: translateY(0) rotate(0); }
}

/* where: a postcard */
.postcard { position: relative; display: grid; gap: 1.2rem 2.4rem; align-items: center; margin-top: 1.8rem; padding: clamp(1.4rem, 4vw, 2.6rem); background: var(--paper); box-shadow: 0 0 0 1px rgba(42, 33, 28, .07), 10px 10px 0 var(--sand); rotate: -.6deg; }
@media (min-width: 820px) { .where .postcard { grid-template-columns: 1fr 1.3fr; } .where .postcard::before { content: ""; position: absolute; left: 43.5%; top: 2.2rem; bottom: 2.2rem; border-inline-start: 2px dashed var(--sand-deep); } }
.postcard-greet { margin: 0; font: 400 clamp(2.8rem, 6vw, 4.4rem)/1 var(--script); color: var(--terra); text-shadow: 3px 3px 0 rgba(246, 201, 69, .8); rotate: -6deg; }
.postcard-addr { font-style: normal; }
.postcard-addr p { margin: 0; padding: .55rem 0; border-bottom: 2px dotted var(--sand-deep); }
.postcard-addr strong { display: block; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-deep); }
.lang-ka .postcard-addr strong { letter-spacing: .02em; }
.postcard-stamp { position: absolute; right: 18px; top: -18px; width: 70px; height: 84px; display: grid; place-items: center; background: var(--navy); rotate: 7deg; box-shadow: 0 2px 0 rgba(42, 33, 28, .15);
  -webkit-mask: radial-gradient(circle at 5px 5px, #0000 3px, #000 3.5px) -5px -5px / 10px 10px, linear-gradient(#000 0 0) content-box; mask: radial-gradient(circle at 5px 5px, #0000 3px, #000 3.5px) -5px -5px / 10px 10px, linear-gradient(#000 0 0) content-box; padding: 5px; }
.stamp-mono { width: 50px; height: 50px; }
.tel { font-weight: 700; white-space: nowrap; }

/* FAQ */
.qa-list { display: grid; gap: .8rem; max-width: 54em; margin-top: 1.6rem; }
.qa { background: var(--paper); border-inline-start: 8px solid transparent; border-image: repeating-linear-gradient(180deg, var(--terra) 0 12px, var(--lemon) 12px 24px) 8; padding: .15rem 1.2rem; }
.qa summary { cursor: pointer; font-weight: 700; font-size: 1.12rem; padding: .85rem 0; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+" / ""; flex: none; font: 400 1.9rem/0.8 var(--script); color: var(--terra-deep); transition: transform .3s var(--ease); }
.qa[open] summary::after { transform: rotate(45deg); }
.qa[open] p { animation: qa-open .4s var(--ease); }
.qa p { color: var(--muted); }
@keyframes qa-open { from { opacity: 0; transform: translateY(-6px); } }
.faq-list { display: grid; gap: 1.2rem; max-width: 54em; }
.qa-full { padding: 1.2rem 1.4rem 1.1rem; background: var(--paper); border-inline-start: 8px solid var(--teal); box-shadow: 8px 8px 0 var(--sand); }
.qa-full:nth-child(3n + 2) { border-color: var(--terra); }
.qa-full:nth-child(3n) { border-color: var(--lemon-deep); }
.qa-full h2 { font-size: clamp(1.5rem, 3vw, 1.95rem); text-shadow: none; }
.lang-ka .qa-full h2 { font-size: 1.22rem; line-height: 1.35; }
.qa-full p { margin: .5rem 0 0; color: var(--muted); }

/* ---------- menu page ---------- */
.chips ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1.6rem 0 0; }
.chips a { display: inline-block; padding: .45rem 1rem; border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 700; text-decoration: none; box-shadow: inset 0 0 0 2px var(--sand-deep); transition: background-color .2s; }
.chips a:hover { background: var(--lemon); }
.menu-section { scroll-margin-top: 1rem; }
.menu-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.6rem; }
.menu-icon { width: 84px; height: 84px; flex: none; }
.menu-head h2 { margin: 0; }
.menu-note { margin: .4rem 0 0; color: var(--muted); }
.dishes { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.3rem 3.2rem; }
@media (min-width: 860px) { .dishes { grid-template-columns: 1fr 1fr; } }
.dish { scroll-margin-top: 1rem; }
.dish-line { display: flex; align-items: baseline; gap: .6rem; }
.dish h3 { font: 700 1.16rem/1.3 var(--body); color: var(--ink); }
.lang-ka .dish h3 { font-size: 1.05rem; }
.leader { flex: 1; min-width: 1.2rem; border-bottom: 3px dotted var(--sand-deep); transform: translateY(-.3em); }
.price { font: italic 800 1.45rem/1 var(--display); color: var(--terra-deep); white-space: nowrap; }
.dish p { margin: .3rem 0 0; color: var(--muted); font-size: 1.02rem; max-width: 34em; }
.chili { display: inline-block; vertical-align: -.1em; margin-inline-start: .2rem; }
.dish:target { background: linear-gradient(90deg, rgba(246, 201, 69, .35), transparent); outline: 8px solid rgba(246, 201, 69, .35); }
.full-menu p { max-width: 36em; margin-inline: auto; }

/* ---------- contacts ---------- */
.contact-grid { display: grid; gap: 2rem; padding-top: 2rem; }
@media (min-width: 860px) { .contact-grid { grid-template-columns: 1.15fr 1fr; align-items: start; } }
.contact-card { margin: 0; }
.contact-card h2 { font-size: 2rem; }
.contact-card h2.mt { margin-top: 1.6rem; }
.contact-card address { font-style: normal; }
.contact-card .big { font: italic 800 1.6rem/1.25 var(--display); color: var(--ink); }
.lang-ka .contact-card .big { font: 700 1.25rem/1.4 var(--body); }
.contact-card.plain { padding: clamp(1.4rem, 4vw, 2.2rem); background: var(--paper); box-shadow: 0 0 0 1px rgba(42, 33, 28, .07), 10px 10px 0 var(--sand); }
.contact-card.postcard { display: block; }
.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { text-align: start; padding: .45rem 0; border-bottom: 2px dotted var(--sand-deep); font-weight: 400; }
.hours td { text-align: end; font-weight: 700; font-variant-numeric: tabular-nums; }
.link-list { list-style: none; padding: 0; margin: .6rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.link-list a { display: inline-block; padding: .45rem 1rem; border-radius: 999px; background: var(--cream); color: var(--ink); font-weight: 700; text-decoration: none; box-shadow: inset 0 0 0 2px var(--sand-deep); }
.link-list a:hover { background: var(--lemon); }
/* two maps: tabs load Yandex or Google on click; the open links below work without JS */
.maps { margin-top: 1.8rem; }
.map-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem 1rem; margin-bottom: 1.2rem; }
.map-tab { color: var(--ink); background: var(--paper); border-color: var(--ink); box-shadow: 4px 4px 0 var(--teal-light); }
.map-tab:hover { color: var(--ink); background-color: var(--paper); }
.map-tab[aria-pressed="true"] { color: var(--paper); background: var(--teal-deep); border-color: var(--teal-deep); box-shadow: 4px 4px 0 var(--lemon); }
.map-figure { margin: 0; }
/* the drawn plan of the spot (src/map.mjs) on a paper mount; a live map tab loads its iframe over it */
.map { position: relative; padding: 10px; background: var(--paper); box-shadow: 0 0 0 1px rgba(42, 33, 28, .07), 10px 10px 0 var(--teal-light); }
.plan { display: block; width: 100%; height: auto; }
.plan-tall { display: none; }
@media (max-width: 699px) { .plan-wide { display: none; } .plan-tall { display: block; } }
.plan text { font-family: var(--body); }
.plan .names text { text-anchor: middle; paint-order: stroke; stroke: var(--paper); stroke-width: 3.6px; stroke-linejoin: round; }
.plan .st text { dominant-baseline: central; fill: var(--muted); }
.plan .pl text { font-weight: 700; fill: var(--ink); }
.plan .pl .pk { fill: var(--green); }
.plan .pl .pr { fill: var(--terra-deep); }
.plan .pl .wt { fill: var(--teal-deep); }
.plan .pl .sea-name { dominant-baseline: central; letter-spacing: .25em; fill: var(--paper); stroke: none; }
.plan .tag rect { fill: var(--navy); }
.plan .tag text { font-weight: 700; letter-spacing: .06em; text-anchor: middle; fill: var(--gold); }
.plan .north text, .plan .sbar text { font-size: 13px; font-weight: 700; fill: var(--ink); }
.plan .pin { transition: translate .8s var(--ease) .35s, opacity .4s .35s; }
html.js:not(.no-hide) .maps.reveal:not(.in) .plan .pin { translate: 0 -46px; opacity: 0; }
.map iframe { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); border: 0; background: var(--paper); }
.map-credit { margin: .8rem 0 0; font-size: .8rem; line-height: 1.3; text-align: end; color: var(--muted); }
.map-credit a { color: var(--muted); }
html:not(.js) .map-tabs { display: none; }
.maps .cta-row { margin-top: 1.4rem; }
.map-open { display: flex; flex-wrap: wrap; gap: .7rem 1rem; margin: 1.6rem 0 0; }

/* ---------- footer: promenade with a Vespa ---------- */
.site-footer { margin-top: 2rem; }
.promenade { position: relative; height: 176px; overflow: hidden; background: linear-gradient(transparent 0 36px, var(--teal) 36px 118px, var(--sand) 118px); }
.promenade::before { content: ""; position: absolute; left: 0; right: 0; top: 36px; height: 6px; background: var(--teal-deep); }
.balustrade { position: absolute; left: 0; right: 0; top: 62px; height: 58px; filter: drop-shadow(0 4px 0 rgba(42, 33, 28, .12));
  background: linear-gradient(var(--paper) 0 10px, transparent 10px 50px, var(--paper) 50px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='58'%3E%3Cpath d='M16,10 h12 v3 c0,4 -4,5 -4,10 c0,5 7,7 7,15 c0,5 -2,8 -2,12 h-14 c0,-4 -2,-7 -2,-12 c0,-8 7,-10 7,-15 c0,-5 -4,-6 -4,-10 z' fill='%23fbf5ea'/%3E%3C/svg%3E") 0 0 / 44px 58px repeat-x; }
.rider { position: absolute; left: 0; bottom: 8px; width: 150px; transform: translateX(min(64vw, 100vw - 220px)); }
.vespa { display: block; width: 100%; height: auto; overflow: visible; }
.promenade.ride .rider { animation: ride 17s linear infinite; }
.promenade.ride .vespa { animation: bump .32s ease-in-out infinite alternate; }
.promenade.ride .wheel { animation: wheel .45s linear infinite; }
.promenade.ride .puff { animation: exhaust 1s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.promenade.ride .puff.p2 { animation-delay: -.5s; }
@keyframes ride { from { transform: translateX(-200px); } to { transform: translateX(calc(100vw + 40px)); } }
@keyframes bump { to { transform: translateY(-2px); } }
@keyframes wheel { to { transform: rotate(360deg); } }
@keyframes exhaust { from { transform: translate(0, 0) scale(.6); opacity: .9; } to { transform: translate(-26px, -6px) scale(1.5); opacity: 0; } }
.footer-inner { width: 100%; max-width: none; padding: 2.4rem max(var(--gutter), calc((100% - var(--wrap)) / 2)) 2.6rem; background: var(--green); color: var(--paper); }
.footer-inner a { color: var(--paper); text-decoration-color: var(--lemon); }
.footer-inner a:hover { color: var(--lemon); }
.footer-grid { display: grid; gap: 1.6rem; }
@media (min-width: 820px) { .footer-grid { grid-template-columns: 1.4fr 1.3fr .8fr 1fr; } }
.footer-brand { margin: 0 0 .9rem; --logo-ink: var(--paper); --logo-gold: var(--gold); }
.footer-logo { display: block; width: 230px; height: auto; aspect-ratio: 312 / 75; }
.site-footer address { font-style: normal; }
.site-footer address p { margin: 0 0 .35rem; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; align-content: start; font-weight: 700; }
.footer-links a, .footer-meta a { display: inline-block; padding-block: .3rem; }
.footer-meta { margin: 1.6rem 0 0; color: #dfe9df; font-size: .95rem; }

/* mobile call bar slides up after the first screen */
.cta-bar { display: none; }
@media (max-width: 800px) {
  body { padding-bottom: 5.5rem; }
  .cta-bar { position: fixed; z-index: 20; inset: auto 0 0 0; display: flex; gap: .7rem; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background: var(--paper); box-shadow: 0 -4px 0 var(--terra); transition: transform .45s var(--ease); }
  .cta-bar .btn { flex: 1; box-shadow: none; }
  html.js:not(.no-hide) .cta-bar:not(.show) { transform: translateY(115%); }
  html.js .cta-bar:not(.show):focus-within { transform: none; }
  html { scroll-padding-bottom: 6rem; }
}

/* root language chooser and 404 */
.chooser { padding: clamp(.6rem, 2vw, 1.2rem) var(--gutter) 2rem; }
.poster-chooser { min-height: calc(100svh - 70px); justify-content: center; }
.chooser-copy { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; padding: clamp(2rem, 6vw, 4.5rem) 1.25rem 1rem; }
.chooser-copy h1 { font-size: inherit; text-shadow: none; }
.chooser-logo { display: block; width: min(520px, 82vw); height: auto; aspect-ratio: 312 / 75; margin: .4rem 0 .6rem; animation: rise 1s .3s var(--ease) backwards; }
.chooser-copy .eyebrow { justify-content: center; }
.chooser-copy .eyebrow::before { display: none; }
.chooser-copy .lede { margin-top: .6rem; }
.lang-btn { min-width: 9.5rem; }
@media (max-width: 900px) { .poster-chooser .scene { aspect-ratio: 10 / 8; margin-top: 0; } }
.lost { display: grid; justify-items: center; text-align: center; padding: 2rem var(--gutter) 4rem; }
.lost-art { width: min(320px, 80vw); }
.lost h1 { font-size: clamp(5rem, 14vw, 8rem); }

/* scroll reveals: blocks unroll downward like a poster being let down */
.reveal { transition: opacity .6s var(--ease), transform .8s var(--ease), clip-path .9s var(--ease-io); transition-delay: calc(var(--i, 0) * .08s); }
.pillar.reveal { transition: opacity .6s var(--ease), transform .8s var(--ease), clip-path .9s var(--ease-io), box-shadow .3s var(--ease); transition-delay: calc(var(--i, 0) * .1s); }
/* 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; transform: translateY(22px); clip-path: inset(0 0 94% 0); }
html.js .reveal.in { clip-path: inset(-40px -40px -40px -40px); }
.pillar.reveal.in:hover, .pillar.reveal.in:focus-within { transition-delay: 0s; }

/* page transitions (Chromium/Safari): the next page unrolls from the top like an awning */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .35s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .7s var(--ease-io) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes vt-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [class*="ly-"] { translate: none !important; }
  html.js:not(.no-hide) .reveal:not(.in) { opacity: 1; transform: none; clip-path: none; }
  html.js:not(.no-hide) .lido:not(.in) { clip-path: none; }
  html.js:not(.no-hide) .reveal-bowl:not(.in) .drop, html.js:not(.no-hide) .stamp:not(.in) .postmark { opacity: 1; }
  html.js:not(.no-hide) .cabin.reveal:not(.in) { transform: none; }
  html.js:not(.no-hide) .cta-bar:not(.show) { transform: none; }
  html.js:not(.no-hide) .maps.reveal:not(.in) .plan .pin { translate: none; opacity: 1; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* chooser and 404 are written in Georgian first: no uppercase or tracking on Georgian, a looser line for its taller letters */
.chooser [lang="ka"] { text-transform: none; letter-spacing: .02em; }
.chooser .eyebrow [lang="ka"] { letter-spacing: .05em; }
.chooser .lede [lang="ka"] { line-height: 1.6; }