/* Old Ambari: an old Georgian granary printed as a two-block woodcut on aged parchment.
   Inks: walnut (key block) and wine (second block), brass for the lantern light.
   Motion language: barn doors open, the gouge carves lines, the wine block slides into register,
   lanterns flicker, carved borders open from the middle, planks slide in.
   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: "Vollkorn"; src: url("/fonts/vollkorn.woff2") format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0000-024F, U+02BC, U+02C6, U+02DA, U+02DC, U+0400-045F, U+0490-0491, U+2000-206F, U+2116, U+2190-2193, U+2212, U+2215; }
@font-face { font-family: "Noto Serif Georgian"; src: url("/fonts/noto-serif-georgian.woff2") format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F; }

:root {
  --parchment: #efe3c8; --tint: #e6d5b0; --paper: #f6eedb; --walnut: #2b1d14; --soot: #15100c;
  --wine: #7a1f2b; --wine-2: #63151f; --brass: #b08a3e; --amber: #e9b85a; --muted: #5b4a3a;
  --serif: "Vollkorn", "Noto Serif Georgian", Georgia, "Times New Roman", serif;
  --wrap: 1160px; --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1); --carve: cubic-bezier(.55, 0, .25, 1);
  --t0: 0s;
  --braid-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10'%3E%3Cpath d='M0,2.6 C6,2.6 6,7.4 12,7.4 S18,2.6 24,2.6 M0,7.4 C6,7.4 6,2.6 12,2.6 S18,7.4 24,7.4' fill='none' stroke='%23efe3c8' stroke-width='1.1'/%3E%3C/svg%3E");
  --braid-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='24'%3E%3Cpath d='M2.6,0 C2.6,6 7.4,6 7.4,12 S2.6,18 2.6,24 M7.4,0 C7.4,6 2.6,6 2.6,12 S7.4,18 7.4,24' fill='none' stroke='%23efe3c8' stroke-width='1.1'/%3E%3C/svg%3E");
  color-scheme: light;
}
html.doors:not(.no-hide) { --t0: .8s; } /* the hero starts carving while the doors swing */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
body {
  margin: 0; color: var(--walnut); font: 400 1.125rem/1.62 var(--serif); font-variant-numeric: lining-nums;
  background-color: var(--parchment);
  /* aged parchment: fine fibre grain plus a few soft foxing stains, printed once, never animated */
  background-image:
    radial-gradient(60% 40% at 12% 18%, rgba(176, 138, 62, .10), transparent 70%),
    radial-gradient(50% 35% at 88% 62%, rgba(176, 138, 62, .09), transparent 70%),
    radial-gradient(140% 70% at 50% 0%, rgba(255, 249, 232, .55), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23a)'/%3E%3C/svg%3E");
}
img, svg { max-width: 100%; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: rgba(122, 31, 43, .6); }
a:hover { color: var(--wine); text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--wine); outline-offset: 3px; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--walnut); color: var(--paper); padding: .6rem 1rem; z-index: 50; }
.skip:focus { top: 8px; }

h1, h2, h3 { font-family: var(--serif); line-height: 1.08; margin: 0; letter-spacing: -.005em; text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(2.3rem, 5.6vw, 3.9rem); }
h2 { font-weight: 800; font-size: clamp(1.9rem, 4.2vw, 2.85rem); }
h3 { font-weight: 700; font-size: 1.45rem; }
.lang-ka h1 { font-size: clamp(1.8rem, 4.6vw, 3rem); line-height: 1.25; }
.lang-ka h2 { font-size: clamp(1.45rem, 3.4vw, 2.15rem); line-height: 1.3; }
.lang-ka h3 { font-size: 1.2rem; line-height: 1.35; }
body.lang-ka { font-size: 1.05rem; }
p { margin: 0 0 1rem; text-wrap: pretty; }
.kicker, .eyebrow { margin: 0 0 .5rem; font-weight: 700; font-variant-caps: all-small-caps; letter-spacing: .14em; font-size: 1.1rem; color: var(--wine); }

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

/* ---------- header: logo, centred nav, tools; a double rule like a print margin ---------- */
.site-header { view-transition-name: masthead; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem 1.5rem; padding: 1rem 0 .9rem; border-bottom: 4px double var(--walnut); }
.logo { justify-self: start; white-space: nowrap; display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; font-weight: 900; font-size: 1.65rem; line-height: 1; letter-spacing: -.01em; }
.logo:hover { color: var(--walnut); }
/* the lockup: the gable rosette, then Old Ambari over ძველი ამბარი; on hover the rosette turns by one blade */
.logo-mark { width: 46px; height: 46px; flex: none; transition: transform .7s cubic-bezier(.3, 1.3, .4, 1); }
.logo:hover .logo-mark { transform: rotate(-51.4deg); }
.logo-word { display: grid; justify-items: start; }
.lw-1 { font-weight: 900; letter-spacing: -.01em; }
.lw-2 { margin-top: .26rem; font: 600 .5em/1.1 "Noto Serif Georgian", var(--serif); letter-spacing: .03em; color: var(--wine); }
.nav { display: flex; gap: 1.6rem; font-weight: 700; font-variant-caps: all-small-caps; letter-spacing: .1em; font-size: 1.2rem; }
.nav a { text-decoration: none; padding: .3rem 0; background: linear-gradient(var(--wine), var(--wine)) no-repeat 50% 100% / 0 2px; transition: background-size .35s var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { background-size: 100% 2px; color: var(--walnut); }
.nav a[aria-current="page"] { color: var(--wine); }
.head-end { justify-self: end; display: flex; align-items: center; gap: 1rem; }
.lang { display: flex; gap: .1rem; font-size: .9rem; font-weight: 700; letter-spacing: .06em; }
.lang a { text-decoration: none; padding: .25rem .45rem; border: 1.5px solid transparent; }
.lang a[aria-current="true"] { border-color: var(--walnut); background: var(--paper); }
@media (max-width: 820px) {
  .site-header { grid-template-columns: 1fr auto; }
  .logo { font-size: 1.45rem; }
  .nav { grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: 1.1rem; font-size: 1.1rem; border-top: 1px solid rgba(43, 29, 20, .35); padding-top: .4rem; }
  .site-header .head-call { display: none; }
}

/* ---------- buttons: a wine label with an engraved inner line; pressing is a stamp ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px;
  padding: .7rem 1.45rem; font: 700 1.05rem/1.2 var(--serif); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  color: var(--paper); background: var(--wine); border: 2px solid var(--walnut); border-radius: 2px;
  box-shadow: inset 0 0 0 3px var(--wine), inset 0 0 0 4px rgba(246, 238, 219, .55), 3px 3px 0 var(--walnut);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background-color .2s;
}
.btn:hover { color: var(--paper); background: var(--wine-2); box-shadow: inset 0 0 0 3px var(--wine-2), inset 0 0 0 4px rgba(246, 238, 219, .55), 5px 5px 0 var(--walnut); transform: translate(-1px, -1px); }
.btn:active { transform: translate(3px, 3px); box-shadow: inset 0 0 0 3px var(--wine-2), inset 0 0 0 4px rgba(246, 238, 219, .55), 0 0 0 var(--walnut); }
.btn-ghost { color: var(--walnut); background: rgba(246, 238, 219, .6); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px rgba(43, 29, 20, .35), 3px 3px 0 var(--walnut); }
.btn-ghost:hover { color: var(--walnut); background: var(--paper); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px rgba(122, 31, 43, .55), 5px 5px 0 var(--walnut); }
.btn-ghost:active { box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px rgba(122, 31, 43, .55), 0 0 0 var(--walnut); }
.btn-sm { min-height: 42px; padding: .45rem 1rem; font-size: .98rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 1rem 1.2rem; margin: 1.5rem 0; }
.cta-row.center, .center { justify-content: center; text-align: center; }

/* ---------- barn doors: first page of a session only (flag set in <head>) ---------- */
.barn { display: none; }
html.doors:not(.no-hide) .barn { display: block; position: fixed; inset: 0; z-index: 100; pointer-events: none; perspective: 1500px; animation: barn-gone 2.05s linear both; }
@keyframes barn-gone { 0%, 97% { visibility: visible; } 100% { visibility: hidden; } }
.door {
  position: absolute; top: 0; bottom: 0; width: 50.5%; backface-visibility: hidden;
  background-color: #4a3121;
  background-image:
    linear-gradient(90deg, #1e140d 0 3px, transparent 3px),
    repeating-linear-gradient(90deg, transparent 0 13px, rgba(239, 227, 200, .07) 13px 14px, transparent 14px 31px, rgba(0, 0, 0, .12) 31px 33px, transparent 33px 52px, rgba(239, 227, 200, .05) 52px 53px),
    linear-gradient(180deg, #5b3c27, #3a271a);
  background-size: 78px 100%, 78px 100%, 100% 100%;
  box-shadow: inset 0 0 0 12px var(--walnut), inset 0 0 90px rgba(0, 0, 0, .5);
}
.door::before, .door::after { /* top and bottom rails with iron nails */
  content: ""; position: absolute; left: 12px; right: 12px; height: clamp(44px, 8vh, 72px);
  background: radial-gradient(circle, #bfa36c 0 3px, #15100c 3.5px 5px, transparent 5.5px) 0 50% / 52px 100% repeat-x, linear-gradient(180deg, #3d2819, #2b1d14);
  border-block: 3px solid #15100c;
}
.door::before { top: 9%; } .door::after { bottom: 9%; }
.brace { position: absolute; left: 6%; right: 6%; top: calc(9% + 60px); bottom: calc(9% + 60px); width: 88%; height: auto; overflow: visible; }
.brace path { fill: none; stroke: #33231a; stroke-width: 34px; stroke-linecap: butt; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }
.door-l { left: 0; transform-origin: 0 50%; animation: door-l 1.3s .55s var(--carve) both; }
.door-r { right: 0; transform-origin: 100% 50%; animation: door-r 1.3s .55s var(--carve) both; }
@keyframes door-l { 0% { transform: none; } 75% { opacity: 1; } 100% { transform: rotateY(-98deg); opacity: 0; } }
@keyframes door-r { 0% { transform: none; } 75% { opacity: 1; } 100% { transform: rotateY(98deg); opacity: 0; } }
.seam { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: linear-gradient(transparent, var(--amber) 18%, var(--amber) 82%, transparent); box-shadow: 0 0 30px 8px rgba(233, 184, 90, .5); animation: seam 1.4s .1s ease-out both; }
@keyframes seam { 0% { opacity: .35; } 35% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(30); } }
.latch { position: absolute; left: 50%; top: 50%; width: min(40vw, 380px); height: 34px; transform: translate(-50%, -50%); background: linear-gradient(180deg, #6a4630, #3d2819); border: 3px solid var(--soot); box-shadow: 0 6px 0 rgba(0, 0, 0, .35); animation: latch .55s .15s cubic-bezier(.5, 0, .7, .2) both; }
.latch::before, .latch::after { content: ""; position: absolute; top: -10px; bottom: -10px; width: 22px; border: 5px solid var(--soot); border-top: 0; }
.latch::before { left: 18%; } .latch::after { right: 18%; }
@keyframes latch { to { transform: translate(-50%, -330%) rotate(-7deg); opacity: 0; } }

/* ---------- hero: a carved gable over a symmetric triptych ---------- */
.hero { text-align: center; padding: clamp(.6rem, 2vw, 1.4rem) 0 clamp(1.5rem, 4vw, 2.5rem); }
.hero-gable { width: min(100%, 1000px); margin: 0 auto; }
.hero-gable svg, .hero-side svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero-body { display: grid; grid-template-columns: 1fr minmax(0, 600px) 1fr; gap: 1rem clamp(1rem, 3vw, 2.5rem); align-items: end; }
.hero-side { max-width: 290px; width: 100%; }
.hero-side-l { justify-self: end; } .hero-side-r { justify-self: start; }
.hero-copy { padding-top: .2rem; }
.h1-brand { display: block; font-weight: 900; font-size: clamp(3.3rem, 8.6vw, 6.4rem); line-height: .92; letter-spacing: -.02em; }
.h1-sub { display: block; margin-top: .55rem; font-weight: 700; font-size: clamp(1.25rem, 2.5vw, 1.7rem); font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--wine); line-height: 1.2; }
.lang-ka .h1-sub { font-size: clamp(1.15rem, 2.4vw, 1.45rem); letter-spacing: .02em; }
/* Georgian has no small caps (Chrome would fake them from Mtavruli): plain letters, tighter tracking */
.lang-ka :is(.nav, .kicker, .eyebrow, .h1-sub, .rating-src, .where-card strong, .contact-card strong) { font-variant-caps: normal; letter-spacing: .02em; }
.lang-ka .nav { font-size: 1rem; }
.lang-ka .kicker, .lang-ka .eyebrow { font-size: .95rem; }
.lang-ka .where-card strong, .lang-ka .contact-card strong { font-size: .9rem; }
.lang-ka .facts { font-size: .9rem; }
.hero .orn { margin: .9rem auto .3rem; }
.lede { font-size: 1.22rem; max-width: 33em; margin: 1rem auto 0; }
.lang-ka .lede { font-size: 1.1rem; }
.facts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 0; padding: 0; margin: 0; font-weight: 700; font-size: 1rem; }
.facts li { display: inline-flex; align-items: center; }
.facts li + li::before { content: ""; width: .42em; height: .42em; margin: 0 .85em; background: var(--wine); transform: rotate(45deg); }
@media (max-width: 900px) {
  .hero-body { grid-template-columns: 1fr 1fr; grid-template-areas: "copy copy" "l r"; }
  .hero-copy { grid-area: copy; } .hero-side-l { grid-area: l; max-width: 210px; } .hero-side-r { grid-area: r; max-width: 210px; }
}
@media (max-width: 520px) {
  .facts { flex-direction: column; align-items: center; } .facts li + li::before { display: none; }
  .hero-gable { width: calc(100% + 2 * var(--gutter) - 8px); margin-inline: calc(4px - var(--gutter)); }
}

/* stamped headline words: each word lands like a block pressed onto paper */
html.js .w { display: inline-block; animation: press .7s calc(var(--t0) + .15s + var(--i) * .13s) cubic-bezier(.3, 1.4, .5, 1) backwards; }
@keyframes press { from { opacity: 0; transform: translateY(-.25em) scale(1.12); filter: blur(3px); } 60% { opacity: 1; filter: none; } }
html.js .hero .eyebrow { animation: fade .6s calc(var(--t0) + .05s) both; }
html.js .h1-sub { animation: wipe .8s calc(var(--t0) + .55s) var(--ease) backwards; }
html.js .hero .lede, html.js .page-head .lede, html.js .chooser .lede { animation: rise .7s calc(var(--t0) + .8s) var(--ease) both; }
html.js .hero .cta-row, html.js .chooser .cta-row { animation: rise .7s calc(var(--t0) + .95s) var(--ease) both; }
html.js .hero .facts, html.js .chooser-sub { animation: rise .7s calc(var(--t0) + 1.05s) var(--ease) both; }
@keyframes fade { from { opacity: 0; } }
/* clip-path keyframes need an end of the same shape: inset() never interpolates with none, it flips at half time.
   The end reaches past the box so overhangs stay whole; fill is backwards, so the finished element has no clip-path at all. */
@keyframes wipe { from { clip-path: inset(-.4em 50% -.4em 50%); } to { clip-path: inset(-.4em); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

/* ---------- woodcut drawings on load: siding and outlines draw, ink rolls on,
   the gouge carves highlights, the wine block slides into register ---------- */
.ln, .cut { stroke-dasharray: 1; }
html.js .hero-art .ln, html.js .hero-art .cut { animation: carve .9s calc(var(--t0) + var(--d, .2s) + var(--i, 0) * .06s) var(--carve) both; }
html.js .hero-art .siding .ln { --d: .05s; animation-duration: .6s; }
html.js .hero-art .roof .cut { --d: .6s; animation-duration: .45s; }
html.js .hero-art .horns .ln { --d: .75s; }
html.js .hero-art .knob { animation: fade .4s calc(var(--t0) + 1.4s) both; }
html.js .hero-art .vine .ln { --d: .9s; animation-duration: 1.4s; }
html.js .hero-art .beam .cut { --d: 1s; }
html.js .still .cut { --d: .95s; }
html.js .still .dumpling .ln { --d: .45s; animation-duration: .7s; }
html.js .hero-art .roof, html.js .hero-art .beam, html.js .hero-art .ink-pass { animation: roll .85s calc(var(--t0) + var(--d, .25s)) var(--carve) backwards; }
html.js .hero-art .roof { --d: .12s; }
html.js .hero-art .beam { --d: .6s; }
html.js .hero-art .dumpling > path:not(.ln) { animation: fade .5s calc(var(--t0) + .95s + var(--i) * .1s) both; }
html.js .hero-art .reg { animation: register .9s calc(var(--t0) + .45s) var(--ease) both; }
html.js .hero-art .rose { animation: rose-in 1.1s calc(var(--t0) + .35s) cubic-bezier(.3, 1.2, .4, 1) both; }
html.js .hero-art .leaf-g { animation: pop .6s calc(var(--t0) + 1.25s + var(--i) * .12s) cubic-bezier(.3, 1.6, .5, 1) both; }
html.js .hero-art .grape-g { animation: drop .8s calc(var(--t0) + 1.5s + var(--i) * .1s) cubic-bezier(.3, 1.5, .5, 1) both; }
html.js .hero-art .lantern { animation: hang 1.6s calc(var(--t0) + 1.1s) cubic-bezier(.3, 1.4, .4, 1) both; }
@keyframes carve { from { stroke-dashoffset: 1; } }
@keyframes roll { from { clip-path: inset(-40px 100% -40px -40px); } to { clip-path: inset(-40px); } }
@keyframes register { from { opacity: 0; transform: translate(9px, -7px); } }
@keyframes rose-in { from { opacity: 0; transform: rotate(-150deg) scale(.3); } }
@keyframes pop { from { opacity: 0; transform: scale(0) rotate(-30deg); } }
@keyframes drop { from { opacity: 0; transform: translateY(-14px) scale(.6); } }
@keyframes hang { 0% { opacity: 0; transform: translateY(-30px) rotate(8deg); } 30% { opacity: 1; } 55% { transform: rotate(-5deg); } 75% { transform: rotate(2.5deg); } 100% { transform: none; } }

/* lantern light: a warm halo that flickers; paused off screen and in background tabs (app.js) */
.glow { transform-box: fill-box; transform-origin: center; animation: flicker 3.7s 2.6s infinite; }
.flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flame 1.9s 2.6s infinite alternate ease-in-out; }
.lantern .swing { animation: sway 5.5s 3s infinite alternate ease-in-out; }
@keyframes flicker { 0%, 100% { opacity: .85; transform: scale(1); } 7% { opacity: .62; transform: scale(.96); } 12% { opacity: .9; } 31% { opacity: .74; transform: scale(1.03); } 46% { opacity: .95; } 58% { opacity: .66; transform: scale(.97); } 63% { opacity: .88; } 82% { opacity: .72; transform: scale(1.02); } }
@keyframes flame { from { transform: scale(.9, 1.06) rotate(-3deg); } to { transform: scale(1.06, .92) rotate(3deg); } }
@keyframes sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
.off .glow, .off .flame, .off .swing, html.paused .glow, html.paused .flame, html.paused .swing { animation-play-state: paused; }

/* the vine sways when the pointer rests on it */
.vine { transform-box: view-box; }
.vine-l { transform-origin: 96px 236px; } .vine-r { transform-origin: 1104px 236px; }
.leaf-g { transform-origin: 0 -20px; }
@media (hover: hover) {
  .hero-gable:hover .vine-l { animation: vine-sway 2.6s ease-in-out infinite alternate; }
  .hero-gable:hover .vine-r { animation: vine-sway 2.6s ease-in-out infinite alternate-reverse; }
  .hero-gable:hover .leaf-g, .hero-side:hover .leaf-g { animation: flutter 1.4s calc(var(--i) * -.3s) ease-in-out infinite alternate; }
}
@keyframes vine-sway { from { transform: rotate(-.7deg); } to { transform: rotate(.8deg); } }
@keyframes flutter { from { transform: rotate(-7deg); } to { transform: rotate(6deg); } }

/* ---------- section scaffolding ---------- */
.section { padding: clamp(2.2rem, 5vw, 4rem) 0; }
.section-tint {
  width: 100%; max-width: none; padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2)); background: var(--tint);
  box-shadow: inset 0 3px 0 var(--walnut), inset 0 7px 0 var(--tint), inset 0 8px 0 var(--walnut), inset 0 -3px 0 var(--walnut), inset 0 -7px 0 var(--tint), inset 0 -8px 0 var(--walnut);
}
.sec-head { text-align: center; max-width: 44em; margin: 0 auto; }
.sec-head .orn { margin: .6rem auto .2rem; }
.section-intro { font-size: 1.15rem; margin: .6rem auto 0; color: #3e2e22; }
.orn { display: block; width: min(300px, 80%); height: auto; overflow: visible; }
.orn-rose { --cut: var(--paper); color: var(--wine); }
.more { margin-top: 1.8rem; font-weight: 700; text-align: center; }
.note { color: var(--muted); font-size: .98rem; }
.small { font-size: .95rem; color: var(--muted); }
.page-head { text-align: center; padding: clamp(1.6rem, 5vw, 3.4rem) 0 1rem; }
.page-head .orn { margin: 1rem auto .4rem; }

/* plank divider: a carved board slides in from the left */
.plank { overflow: hidden; height: 40px; margin: .5rem 0; }
.plank-art { display: block; width: 100%; height: 40px; }

/* ---------- carved frame: braided bands open from the middle, rosettes in the corners ---------- */
.framed { position: relative; padding: clamp(1.8rem, 4vw, 2.8rem); background: var(--paper); }
.framed::before { content: ""; position: absolute; inset: 16px; border: 1px solid rgba(43, 29, 20, .45); pointer-events: none; }
.band { position: absolute; display: block; background-color: var(--walnut); }
.band-t, .band-b { left: 0; right: 0; height: 10px; background-image: var(--braid-h); background-position: center; }
.band-t { top: 0; } .band-b { bottom: 0; }
.band-l, .band-r { top: 0; bottom: 0; width: 10px; background-image: var(--braid-v); background-position: center; }
.band-l { left: 0; } .band-r { right: 0; }
.corner { position: absolute; width: 32px; height: 32px; color: var(--walnut); --cut: var(--paper); }
.corner-tl { left: -11px; top: -11px; } .corner-tr { right: -11px; top: -11px; } .corner-bl { left: -11px; bottom: -11px; } .corner-br { right: -11px; bottom: -11px; }

/* ---------- cards: printed plates with a carved icon ---------- */
.cards { list-style: none; padding: 0; margin: 2.2rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.card { flex: 1 1 280px; max-width: 370px; position: relative; display: flex; flex-direction: column; text-align: center; padding: 1.6rem 1.5rem 1.5rem; background: var(--paper); border: 2px solid var(--walnut); box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7px rgba(43, 29, 20, .4), 6px 6px 0 rgba(43, 29, 20, .16); }
.card h3 { margin-bottom: .5rem; }
.card h3 a { text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; } /* whole plate is the link */
.card p { margin: 0 0 .4rem; color: #3e2e22; }
.icon { display: block; flex: none; width: 120px; height: 120px; margin: 0 auto .7rem; overflow: visible; transform-origin: 50% 0; }
@media (hover: hover) { .card:hover .icon, .order-item:hover .icon { animation: sign-swing 1.4s var(--ease); } }
@keyframes sign-swing { 0% { transform: rotate(0); } 20% { transform: rotate(-6deg); } 45% { transform: rotate(4deg); } 70% { transform: rotate(-2deg); } 100% { transform: rotate(0); } }
.card:focus-within { outline: 3px solid var(--wine); outline-offset: 4px; }
.card h3 a:focus-visible { outline: none; }

/* ---------- ledger of guest topics ---------- */
.ledger-card { max-width: 760px; margin: 2rem auto 0; }
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger li { display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr auto; align-items: center; gap: .4rem 1.2rem; padding: .6rem 0; border-bottom: 1px dashed rgba(43, 29, 20, .4); }
.l-name { font-weight: 800; font-size: 1.15rem; }
.l-bar { position: relative; height: 14px; background: repeating-linear-gradient(90deg, rgba(43, 29, 20, .32) 0 2px, transparent 2px 9px); }
.l-bar::after { content: ""; position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--v)); background: repeating-linear-gradient(104deg, var(--wine) 0 7px, #94313e 7px 8px); }
.l-val { white-space: nowrap; font-size: 1rem; }
.l-val b { font-size: 1.25rem; font-weight: 900; }
@media (max-width: 640px) {
  .ledger li { grid-template-columns: auto minmax(0, 1fr); }
  .l-val { white-space: normal; text-align: end; font-size: .85rem; line-height: 1.2; }
  .l-val b { display: block; }
  .l-bar { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- ratings: two wax seals ---------- */
.ratings { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem clamp(2rem, 8vw, 6rem); margin: 2.2rem 0 1.6rem; }
.rating { display: grid; justify-items: center; text-align: center; gap: .15rem; width: 250px; text-decoration: none; }
.rating:hover { color: var(--walnut); }
.seal { position: relative; display: grid; place-items: center; width: 190px; height: 190px; margin-bottom: .5rem; }
.seal-art { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(4px 5px 0 rgba(43, 29, 20, .22)); transition: transform .5s var(--ease); }
.rating:hover .seal-art { transform: rotate(10deg); }
.rating-num { position: relative; font-weight: 900; font-size: 4rem; line-height: 1; color: var(--paper); }
.count { font-variant-numeric: tabular-nums; }
.rating-src { font-weight: 800; font-variant-caps: all-small-caps; letter-spacing: .1em; font-size: 1.3rem; }
.rating-count { font-weight: 600; }
.rating-open { margin-top: .35rem; font-weight: 700; text-decoration: underline; text-decoration-color: var(--wine); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- three ways to eat ---------- */
.order { list-style: none; padding: 0; margin: 2.2rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.order-item { text-align: center; padding: .4rem 1.6rem 1rem; }
.order-item + .order-item { border-inline-start: 2px solid var(--walnut); box-shadow: inset 4px 0 0 var(--parchment), inset 5px 0 0 rgba(43, 29, 20, .4); }
.order-item h3 { margin-bottom: .4rem; }
.order-item p { margin: 0; }
@media (max-width: 760px) {
  .order { grid-template-columns: 1fr; }
  .order-item { padding: 1.2rem .5rem; }
  .order-item + .order-item { border-inline-start: 0; box-shadow: none; border-top: 2px solid var(--walnut); }
}

/* ---------- where / contacts ---------- */
.where-card { max-width: 760px; margin: 2rem auto 0; text-align: center; }
.where-card address, .contact-card address { font-style: normal; }
.where-card address p, .contact-card p { margin: 0 0 .9rem; }
.where-card strong, .contact-card strong { display: block; font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--wine); font-size: 1.05rem; }
.name-note { color: var(--muted); }
.contact-grid { display: grid; gap: 2.2rem; }
@media (min-width: 860px) { .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.contact-card h2 { font-size: clamp(1.7rem, 3vw, 2.1rem); margin-bottom: 1rem; }
.contact-card h2.mt { margin-top: 1.8rem; }
.tel { font-weight: 800; font-size: 1.2rem; white-space: nowrap; }
.hours { width: 100%; border-collapse: collapse; margin-bottom: .8rem; }
.hours th, .hours td { text-align: start; padding: .4rem 0; border-bottom: 1px dashed rgba(43, 29, 20, .4); font-weight: 500; }
.hours td { text-align: end; font-weight: 800; font-variant-numeric: tabular-nums; }
.link-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; font-weight: 700; }
.link-list a { display: inline-block; padding-block: .3rem; }
.where-row { display: grid; gap: 2.2rem; align-items: center; margin-top: 2rem; }
@media (min-width: 900px) { .where-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.where-row .where-card { margin: 0; max-width: none; }
.where-card .map-open { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem 1rem; margin: .2rem 0 1.1rem; }

/* ---------- the plan from OpenStreetMap (src/map.mjs), printed as a woodcut: lanes gouged between walnut
   edges, a walnut sea with parchment waves, hatched parks, carved landmark discs, a wine stitch for the walk ---------- */
.plan { margin: 0; }
.plan-frame, .map { position: relative; overflow: hidden; background: var(--paper); border: 2px solid var(--walnut); box-shadow: 6px 6px 0 rgba(43, 29, 20, .16); }
.plan-art { display: block; width: 100%; height: auto; }
.m-ground { fill: var(--parchment); }
.m-sea { fill: var(--walnut); }
.m-coast { fill: none; stroke: var(--paper); stroke-width: 3; stroke-linejoin: round; }
.m-park { fill: #e8d9b5; }
.m-square { fill: var(--tint); }
.m-beach { fill: #ead7ad; }
.m-case path { fill: none; stroke: var(--walnut); stroke-opacity: .78; stroke-linecap: round; stroke-linejoin: round; }
.m-lane path { fill: none; stroke: #fbf6e8; stroke-linecap: round; stroke-linejoin: round; }
.m-walk { fill: none; stroke: var(--wine); stroke-width: 4.5; stroke-dasharray: 8 6; }
.m-labels text { fill: var(--walnut); font-family: var(--serif); font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: #fbf6e8; stroke-width: 4; stroke-linejoin: round; }
.m-labels .m-own { fill: var(--wine); font-weight: 800; }
.m-lm > circle { fill: var(--walnut); }
.m-lm .m-ring { fill: none; stroke: var(--paper); stroke-width: 1.4; }
.m-lm g { fill: none; stroke: var(--paper); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.m-lmtext text { fill: var(--walnut); font-family: var(--serif); font-weight: 800; text-anchor: middle; paint-order: stroke; stroke: var(--parchment); stroke-width: 5; stroke-linejoin: round; }
.m-seaname { fill: var(--paper); font-family: var(--serif); font-weight: 700; letter-spacing: .12em; text-anchor: middle; }
.m-scale rect { fill: var(--paper); stroke: var(--walnut); stroke-width: 1.5; }
.m-scale path { fill: none; stroke: var(--walnut); stroke-width: 2; }
.m-scale text { fill: var(--walnut); font-family: var(--serif); font-weight: 700; text-anchor: middle; }
.m-tag rect { fill: var(--walnut); }
.m-tag .m-tag-line { fill: none; stroke: var(--paper); stroke-opacity: .55; stroke-width: 1; }
.m-tag text { fill: var(--paper); font-family: var(--serif); font-weight: 800; text-anchor: middle; }
/* the pin is stamped onto the plan when it comes into view, and stamped again when you point at it */
.m-pin-in { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .7s .35s cubic-bezier(.3, 1.4, .5, 1), opacity .3s .35s; }
html.js:not(.no-hide) .reveal:not(.in) .m-pin-in { transform: translateY(-36px) scale(1.15); opacity: 0; }
@media (hover: hover) { .plan:hover .m-pin-in, .map:not(.loaded):hover .m-pin-in { animation: stamp .6s var(--ease); } }
@keyframes stamp { 40% { transform: translateY(-8px) scale(1.08); } 70% { transform: scale(.96, 1.04); } }
.plan figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .2rem 1rem; }
.walk { display: flex; align-items: center; gap: .6rem; margin: .8rem 0 0; font-weight: 700; color: var(--wine); }
.walk::before { content: ""; width: 34px; height: 4px; flex: none; background: repeating-linear-gradient(90deg, var(--wine) 0 8px, transparent 8px 14px); }
.section > .walk { justify-content: center; margin-top: 1.2rem; }
.map-credit { margin: .5rem 0 0; font-size: .85rem; text-align: end; color: var(--muted); }
.map-credit a { color: var(--muted); }
/* contacts: the plan is the stage; a tab loads its live map over it, pressed again it gives the plan back */
.maps { margin-top: 1.4rem; }
.map-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 1rem; margin-bottom: 1.1rem; }
.map-tab[aria-pressed="true"], .map-tab[aria-pressed="true"]:hover { color: var(--paper); background: var(--walnut); box-shadow: inset 0 0 0 3px var(--walnut), inset 0 0 0 4px rgba(246, 238, 219, .5); transform: translate(3px, 3px); }
.map .plan-art[data-view="card"] { display: none; }
@media (max-width: 700px) { .map .plan-art[data-view="wide"] { display: none; } .map .plan-art[data-view="card"] { display: block; } }
.map iframe { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; background: var(--paper); }
html:not(.js) .map-tabs { display: none; }
.map-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.2rem; padding: 1.4rem 0 0; }

/* ---------- delivery: one wine label per service ---------- */
.delivery { margin-top: 1.8rem; text-align: center; }
.delivery-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.2rem; }
.delivery-btn { min-width: 9.5rem; }
.delivery.framed { max-width: 760px; margin: 0 auto; }
.delivery.framed h2 { margin-bottom: .6rem; }
.section-delivery { padding-top: 0; }

/* ---------- questions ---------- */
.qa-list { display: grid; gap: .9rem; max-width: 50em; margin: 2rem auto 0; }
.qa { background: var(--paper); border: 2px solid var(--walnut); box-shadow: 4px 4px 0 rgba(43, 29, 20, .14); }
.qa summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.2rem; font-weight: 700; font-size: 1.1rem; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+" / ""; flex: none; display: grid; place-items: center; width: 1.6em; height: 1.6em; color: var(--paper); background: var(--wine); font-weight: 900; line-height: 1; transition: transform .3s var(--ease); }
.qa[open] summary::after { transform: rotate(135deg); }
.qa p { margin: 0; padding: 0 1.2rem 1.1rem; }
.qa[open] p { animation: rise .4s var(--ease); }
.faq-list { display: grid; gap: 1.3rem; max-width: 50em; }
.qa-full { padding: 1.3rem 1.6rem; background: var(--paper); border: 2px solid var(--walnut); border-inline-start: 8px solid var(--wine); box-shadow: 5px 5px 0 rgba(43, 29, 20, .14); }
.qa-full h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin-bottom: .45rem; }
.lang-ka .qa-full h2 { font-size: 1.2rem; line-height: 1.4; }
.qa-full p { margin: 0; }

.takeaway { max-width: 760px; margin: 0 auto; text-align: center; }
.takeaway h2 { margin-bottom: .6rem; }

/* ---------- footer: the walnut block printed solid, vine in brass ---------- */
.site-footer { margin-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: 2.5rem; background: var(--walnut); color: var(--parchment); }
.vine-wrap { color: var(--brass); --cut: var(--walnut); --grape: #6e5222; padding-top: 1.1rem; overflow: hidden; }
.vine-border { display: block; width: 100%; height: 58px; }
.footer-grid { display: grid; gap: 1.6rem; padding-top: 1.6rem; }
@media (min-width: 780px) { .footer-grid { grid-template-columns: 1.3fr 1.2fr 1fr; } }
.footer-brand { display: flex; align-items: center; gap: .75rem; font-weight: 900; font-size: 2rem; line-height: 1; margin-bottom: .8rem; }
.footer-rose { width: 54px; height: 54px; flex: none; }
.footer-brand .lw-2 { color: var(--brass); }
.site-footer address { font-style: normal; }
.site-footer address p { margin: 0 0 .35rem; }
.site-footer a { text-decoration-color: rgba(176, 138, 62, .8); }
.site-footer a:hover { color: var(--amber); }
.site-footer :focus-visible { outline-color: var(--amber); }
.footer-links { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 1.5rem; font-weight: 700; }
.footer-links a, .footer-meta a { display: inline-block; padding-block: .3rem; }
.footer-meta { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid rgba(239, 227, 200, .25); color: #d9c9a6; font-size: .95rem; }

/* mobile call bar slides up after the first screen */
.cta-bar { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: 5.6rem; }
  .cta-bar { view-transition-name: callbar; 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(--walnut); border-top: 4px double var(--brass); transition: transform .45s var(--ease); }
  .cta-bar .btn { flex: 1; }
  .cta-bar .btn-ghost { color: var(--parchment); background: transparent; box-shadow: inset 0 0 0 3px var(--walnut), inset 0 0 0 4px rgba(239, 227, 200, .5), 3px 3px 0 var(--soot); border-color: var(--parchment); }
  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 { display: grid; justify-items: center; align-content: center; gap: .4rem; text-align: center; min-height: 100svh; padding: clamp(1.5rem, 5vw, 3rem) 0; }
.chooser .hero-gable { width: min(100%, 760px); }
.chooser h1 { margin-top: .4rem; }
.chooser-sub { margin: .4rem 0 0; font-weight: 700; color: var(--wine); font-size: 1.15rem; }
.chooser .orn { margin: .6rem auto 0; }
.lang-btn { min-width: 10rem; }
.doors-art { width: min(220px, 60vw); height: auto; margin-bottom: 1rem; }
.page-404 h1 { font-size: clamp(4rem, 14vw, 7rem); font-weight: 900; }

/* ---------- scroll reveals: the block is inked from the top, like a roller pass ---------- */
.reveal { transition: opacity .6s var(--ease), transform .75s var(--ease), clip-path .9s var(--ease); transition-delay: calc(var(--i, 0) * .1s); }
.rating.reveal { transition: opacity .6s var(--ease), transform .75s var(--ease), clip-path .9s var(--ease), color .2s; }
/* Not inset(0 0 100% 0): 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(18px); clip-path: inset(0 0 96% 0); }
html.js .reveal.in { clip-path: inset(-40px -40px -40px -40px); }

/* parts that move after their block is revealed */
.orn .ln { transition: stroke-dashoffset 1.1s .35s var(--carve); }
.orn-rose { transform-origin: 0 0; transition: transform 1s .3s cubic-bezier(.3, 1.3, .4, 1), opacity .5s .3s; }
html.js:not(.no-hide) .reveal:not(.in) .orn .ln { stroke-dashoffset: 1; }
html.js:not(.no-hide) .reveal:not(.in) .orn-rose { transform: rotate(-140deg) scale(.2); opacity: 0; }
html.js .page-head .orn .ln, html.js .hero .orn .ln, html.js .chooser .orn .ln { animation: carve 1.1s calc(var(--t0) + .7s) var(--carve) both; }
html.js .page-head .orn-rose, html.js .hero .orn-rose, html.js .chooser .orn-rose { animation: rose-in 1s calc(var(--t0) + .6s) cubic-bezier(.3, 1.3, .4, 1) both; }

.icon .ln, .icon .cut { transition: stroke-dashoffset .9s calc(.3s + var(--i, 0) * .07s) var(--carve); }
.icon .reg { transition: transform .8s .35s var(--ease), opacity .6s .35s; }
.icon .ink-pass { transition: clip-path .7s .2s var(--carve); clip-path: inset(0 0 0 0); }
html.js:not(.no-hide) .reveal:not(.in) .icon .ln, html.js:not(.no-hide) .reveal:not(.in) .icon .cut { stroke-dashoffset: 1; }
html.js:not(.no-hide) .reveal:not(.in) .icon .reg { transform: translate(9px, -7px); opacity: 0; }
html.js:not(.no-hide) .reveal:not(.in) .icon .ink-pass { clip-path: inset(0 100% 0 0); }

.band { transition: clip-path 1.1s .3s var(--carve); clip-path: inset(0 0 0 0); }
.corner { transition: transform .9s .9s cubic-bezier(.3, 1.4, .4, 1), opacity .4s .9s; }
html.js:not(.no-hide) .framed:not(.in) .band-t, html.js:not(.no-hide) .framed:not(.in) .band-b { clip-path: inset(0 50% 0 50%); }
html.js:not(.no-hide) .framed:not(.in) .band-l, html.js:not(.no-hide) .framed:not(.in) .band-r { clip-path: inset(50% 0 50% 0); }
html.js:not(.no-hide) .framed:not(.in) .corner { transform: rotate(-120deg) scale(.3); opacity: 0; }

.l-bar::after { transition: transform 1.3s calc(.45s + var(--i) * .09s) var(--carve); }
html.js:not(.no-hide) .ledger-card:not(.in) .l-bar::after { transform: scaleX(0); }

.seal-art { transition: transform .75s .2s cubic-bezier(.3, 1.5, .5, 1), opacity .35s .2s; }
html.js:not(.no-hide) .rating:not(.in) .seal-art { transform: scale(1.4) rotate(-28deg); opacity: 0; }

.plank-art { transition: transform 1.1s var(--carve); }
html.js:not(.no-hide) .plank:not(.in) .plank-art { transform: translateX(-101%); }

.vine-border .ln { transition: stroke-dashoffset 2.4s .2s var(--carve); }
.vine-border .leaf-g, .vine-border .grape-g { transition: transform .6s calc(.5s + var(--i) * .13s) cubic-bezier(.3, 1.6, .5, 1), opacity .4s calc(.5s + var(--i) * .13s); }
html.js:not(.no-hide) .vine-wrap:not(.in) .ln { stroke-dashoffset: 1; }
html.js:not(.no-hide) .vine-wrap:not(.in) .leaf-g, html.js:not(.no-hide) .vine-wrap:not(.in) .grape-g { transform: scale(0); opacity: 0; }

/* ---------- page transitions (Chromium, Safari): the next page opens like barn doors ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-old .6s var(--carve) both; }
::view-transition-new(root) { animation: vt-new .65s var(--carve) both; }
@keyframes vt-old { to { filter: brightness(.7) sepia(.4); } }
@keyframes vt-new { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html.doors .barn, .barn { display: none !important; }
  html.js:not(.no-hide) .reveal:not(.in) { opacity: 1; transform: none; clip-path: none; }
  html.js:not(.no-hide) .reveal:not(.in) .orn .ln, html.js:not(.no-hide) .reveal:not(.in) .icon .ln, html.js:not(.no-hide) .reveal:not(.in) .icon .cut, html.js:not(.no-hide) .vine-wrap:not(.in) .ln { stroke-dashoffset: 0; }
  html.js:not(.no-hide) .reveal:not(.in) .orn-rose, html.js:not(.no-hide) .reveal:not(.in) .icon .reg, html.js:not(.no-hide) .reveal:not(.in) .m-pin-in, html.js:not(.no-hide) .framed:not(.in) .corner, html.js:not(.no-hide) .rating:not(.in) .seal-art, html.js:not(.no-hide) .vine-wrap:not(.in) .leaf-g, html.js:not(.no-hide) .vine-wrap:not(.in) .grape-g { transform: none; opacity: 1; }
  html.js:not(.no-hide) .reveal:not(.in) .icon .ink-pass, html.js:not(.no-hide) .framed:not(.in) .band { clip-path: none; }
  html.js:not(.no-hide) .ledger-card:not(.in) .l-bar::after { transform: scaleX(var(--v)); }
  html.js:not(.no-hide) .plank:not(.in) .plank-art, html.js:not(.no-hide) .cta-bar:not(.show) { transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}