/* Talavari: light through the vine.
   Concept site for a fictional guesthouse in Sololaki, Old Tbilisi.
   Ground is shade, light is honey sunlight, geometry is the carved balcony lattice. */

/* ---------------------------------------------------------------- fonts (SIL OFL 1.1, see assets/fonts/OFL.txt)
   Talavari Display = Noto Serif Display (wdth 87.5, wght 300-500)
   Talavari Text    = Noto Serif (wght 350-600)
   Talavari UI      = Noto Sans (wght 400-600)
   Talavari Georgian Serif / Sans = Noto Serif Georgian (wdth 87.5-100) / Noto Sans Georgian */
@font-face { font-family: "Talavari Display"; src: url(../fonts/talavari-display-latin.woff2) format("woff2"); font-weight: 300 500; font-stretch: 87.5%; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Talavari Display"; src: url(../fonts/talavari-display-cyrillic.woff2) format("woff2"); font-weight: 300 500; font-stretch: 87.5%; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Talavari Text"; src: url(../fonts/talavari-text-latin.woff2) format("woff2"); font-weight: 350 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Talavari Text"; src: url(../fonts/talavari-text-cyrillic.woff2) format("woff2"); font-weight: 350 600; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Talavari UI"; src: url(../fonts/talavari-ui-latin.woff2) format("woff2"); font-weight: 400 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Talavari UI"; src: url(../fonts/talavari-ui-cyrillic.woff2) format("woff2"); font-weight: 400 600; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Talavari Georgian Serif"; src: url(../fonts/talavari-serif-georgian.woff2) format("woff2"); font-weight: 300 600; font-stretch: 87.5% 100%; font-display: swap; unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31; }
@font-face { font-family: "Talavari Georgian Sans"; src: url(../fonts/talavari-sans-georgian.woff2) format("woff2"); font-weight: 400 600; font-display: swap; unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31; }
/* Nine-letter subsets for the Georgian and Cyrillic words that appear on the other-language pages. */
@font-face { font-family: "Talavari KA Mini Serif"; src: url(../fonts/talavari-ka-mini-serif.woff2) format("woff2"); font-weight: 300 600; font-stretch: 87.5% 100%; font-display: swap; unicode-range: U+10D0, U+10D5, U+10D8, U+10DA, U+10E0, U+10E2, U+10E5; }
@font-face { font-family: "Talavari KA Mini Sans"; src: url(../fonts/talavari-ka-mini-sans.woff2) format("woff2"); font-weight: 400 600; font-display: swap; unicode-range: U+10D0, U+10D5, U+10D8, U+10DA, U+10E0, U+10E2, U+10E5; }
@font-face { font-family: "Talavari RU Mini UI"; src: url(../fonts/talavari-ru-mini-ui.woff2) format("woff2"); font-weight: 400 600; font-display: swap; unicode-range: U+0420, U+0421, U+0423; }
/* Space, digits, punctuation and the words WhatsApp, Email and EN for the Georgian and Russian
   pages, which would otherwise load the full Latin files for those few characters. */
@font-face { font-family: "Talavari Latin Mini Display"; src: url(../fonts/talavari-latin-mini-display.woff2) format("woff2"); font-weight: 300 500; font-stretch: 87.5%; font-display: swap; unicode-range: U+0020-0022, U+0027-0029, U+002C-003B, U+003F, U+0041, U+0045, U+004E, U+0057, U+0061, U+0068, U+0069, U+006C, U+006D, U+0070, U+0073, U+0074, U+00A0, U+00B2, U+00B7, U+00D7, U+2013, U+2014, U+2018, U+2019, U+201C-201E; }
@font-face { font-family: "Talavari Latin Mini Text"; src: url(../fonts/talavari-latin-mini-text.woff2) format("woff2"); font-weight: 350 600; font-display: swap; unicode-range: U+0020-0022, U+0027-0029, U+002C-003B, U+003F, U+0041, U+0045, U+004E, U+0057, U+0061, U+0068, U+0069, U+006C, U+006D, U+0070, U+0073, U+0074, U+00A0, U+00B2, U+00B7, U+00D7, U+2013, U+2014, U+2018, U+2019, U+201C-201E; }
@font-face { font-family: "Talavari Latin Mini UI"; src: url(../fonts/talavari-latin-mini-ui.woff2) format("woff2"); font-weight: 400 600; font-display: swap; unicode-range: U+0020-0022, U+0027-0029, U+002C-003B, U+003F, U+0041, U+0045, U+004E, U+0057, U+0061, U+0068, U+0069, U+006C, U+006D, U+0070, U+0073, U+0074, U+00A0, U+00B2, U+00B7, U+00D7, U+2013, U+2014, U+2018, U+2019, U+201C-201E; }
/* Metric-matched fallbacks, so the swap moves nothing (values from source/build_fonts.py). */
@font-face { font-family: "Talavari Display Fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"); size-adjust: 110.14%; ascent-override: 97.05%; descent-override: 26.6%; line-gap-override: 0%; }
@font-face { font-family: "Talavari Text Fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"); size-adjust: 120.04%; ascent-override: 89.05%; descent-override: 24.41%; line-gap-override: 0%; }
@font-face { font-family: "Talavari UI Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"); size-adjust: 107.15%; ascent-override: 99.77%; descent-override: 27.35%; line-gap-override: 0%; }

/* ---------------------------------------------------------------- registered properties (animated) */
@property --o { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --s { syntax: "<number>"; inherits: false; initial-value: 2; }
@property --on { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --dim { syntax: "<number>"; inherits: true; initial-value: 1; }

/* ---------------------------------------------------------------- tokens */
:root {
  --ground: #0c1a15;
  --ground-deep: #07120e;
  --ground-raised: #13241d;
  --ground-raised-2: #1a2e26;
  --ink: #f1e9d5;
  --ink-2: #cbc4ae;
  --ink-3: #a7a693;
  --sun: #f0ba5f;
  --sun-hi: #f8d18b;
  --sun-deep: #d9913d;
  --turq: #5fb3ae;
  --cobalt: #4f78c8;
  --leaf: #7aa364;
  --coral: #f5926c;
  --line: rgba(241, 233, 213, 0.14);
  --line-strong: rgba(241, 233, 213, 0.3);
  --draw: #8f9a88;

  --f-display: "Talavari Display", "Talavari Display Fallback", "Times New Roman", serif;
  --f-text: "Talavari Text", "Talavari Text Fallback", Georgia, serif;
  --f-ui: "Talavari UI", "Talavari UI Fallback", Arial, sans-serif;

  --fs-hero: clamp(3.5rem, 1.6rem + 5.6vw, 6rem);
  --fs-h1: clamp(2.75rem, 1.6rem + 3.6vw, 5rem);
  --fs-h2: clamp(2.25rem, 1.5rem + 2.4vw, 3.75rem);
  --fs-h3: clamp(1.625rem, 1.3rem + 1vw, 2.25rem);
  --fs-h4: clamp(1.25rem, 1.15rem + .35vw, 1.4rem);
  --fs-lede: clamp(1.1875rem, 1.08rem + .45vw, 1.4375rem);
  --fs-body: 1.125rem;
  --fs-small: .9375rem;
  --fs-ui: .9375rem;
  --fs-label: .78rem;
  --lh-display: 1.04;
  --lh-body: 1.62;
  --track-display: -0.014em;
  --track-label: .14em;

  --gutter: clamp(16px, 4.6vw, 72px);
  --max: 1360px;
  --gap: clamp(14px, 2vw, 28px);
  --section: clamp(5rem, 4rem + 6vw, 10rem);
  --header-h: 72px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-light: cubic-bezier(.22, .7, .2, 1);
  color-scheme: dark;
}
:root:lang(ka) {
  /* Digits and punctuation come from small Latin subsets; full Latin files load only if needed. */
  --f-display: "Talavari Georgian Serif", "Talavari Latin Mini Text", "Talavari Display", "Talavari Display Fallback", serif;
  --f-text: "Talavari Georgian Serif", "Talavari Latin Mini Text", "Talavari Text", "Talavari Text Fallback", serif;
  --f-ui: "Talavari Georgian Sans", "Talavari Latin Mini UI", "Talavari UI", "Talavari UI Fallback", sans-serif;
  /* Georgian is never set smaller than the other languages. */
  --fs-body: 1.1875rem;
  --fs-small: 1rem;
  --fs-ui: 1rem;
  --fs-label: .84rem;
  --lh-display: 1.22;
  --lh-body: 1.74;
  --track-display: 0em;
  --track-label: .05em;
}
:root:lang(ru) {
  --f-display: "Talavari Latin Mini Display", "Talavari Display", "Talavari Display Fallback", serif;
  --f-text: "Talavari Latin Mini Text", "Talavari Text", "Talavari Text Fallback", serif;
  --f-ui: "Talavari Latin Mini UI", "Talavari UI", "Talavari UI Fallback", sans-serif;
}
/* Georgian runs inside English or Russian pages take the Georgian faces (the mini subset first),
   and the Cyrillic switch label on the other pages takes the Cyrillic mini subset. */
:root:not(:lang(ka)) :lang(ka) { --f-display: "Talavari KA Mini Serif", "Talavari Georgian Serif", serif; --f-text: "Talavari KA Mini Serif", "Talavari Georgian Serif", serif; --f-ui: "Talavari KA Mini Sans", "Talavari Georgian Sans", sans-serif; }
:root:not(:lang(ru)) :lang(ru) { --f-ui: "Talavari RU Mini UI", "Talavari UI", "Talavari UI Fallback", sans-serif; }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); background: var(--ground); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--fs-body);
  font-weight: 390;
  line-height: var(--lh-body);
  font-kerning: normal;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
picture { display: contents; }
p, ul, ol, dl, dd, figure, h1, h2, h3, h4 { margin: 0; }
ul, ol { padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
[hidden] { display: none !important; }
main:focus { outline: none; }

/* Browser surfaces in the palette */
::selection { background: var(--sun); color: var(--ground-deep); }
html { scrollbar-color: #2c4136 var(--ground-deep); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ground-deep); }
::-webkit-scrollbar-thumb { background: #2c4136; border: 2px solid var(--ground-deep); }
::-webkit-scrollbar-thumb:hover { background: #3c5547; }
input, textarea { caret-color: var(--sun); }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 100; padding: .75rem 1.1rem; background: var(--sun); color: var(--ground-deep); font: 600 var(--fs-ui)/1.2 var(--f-ui); text-decoration: none; transform: translateY(-160%); transition: transform .2s var(--ease-out); }
.skip:focus { transform: none; outline: 2px solid var(--ink); outline-offset: 3px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.section { position: relative; padding-top: 10rem; padding-bottom: 10rem; }
@media (max-width: 79.99em) { .section { padding-top: 8rem; padding-bottom: 8rem; } }
@media (max-width: 47.99em) { .section { padding-top: 5.5rem; padding-bottom: 5.5rem; } }

/* ---------------------------------------------------------------- type */
.h1, .h2, .h3, .hero__title, .room__name, .room-row__name, .floor__title, .prac dt {
  font-family: var(--f-display);
  font-weight: 330;
  font-stretch: 87.5%;
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  text-wrap: balance;
  font-variant-numeric: lining-nums;
}
:lang(ka) :is(.h1, .h2, .h3, .hero__title, .room__name, .room-row__name, .floor__title, .prac dt) { font-weight: 400; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.h4 { font: 500 var(--fs-h4)/1.35 var(--f-text); letter-spacing: 0; }
.lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--ink); }
p { text-wrap: pretty; }
.note { font-size: var(--fs-small); color: var(--ink-3); }
.label, .room-row__meta dt, .specs dt {
  font-family: var(--f-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1.4;
}
/* Mtavruli is authored in the Georgian copy; CSS never uppercases Georgian. */
:lang(ka) :is(.label, .room-row__meta dt, .specs dt) { text-transform: none; }

/* ---------------------------------------------------------------- header */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h); color: var(--ink); transition: background-color .4s var(--ease-light), border-color .4s var(--ease-light); border-bottom: 1px solid transparent; }
.site-header::before { content: ""; position: absolute; inset: 0 0 -56px; z-index: -1; background: linear-gradient(180deg, rgba(7, 18, 14, .88) 0%, rgba(7, 18, 14, .8) 55%, rgba(7, 18, 14, 0) 100%); pointer-events: none; transition: opacity .4s; }
.site-header:not(.is-solid) :is(.nav a, .menu-btn, .langs__link, .brand__name) { text-shadow: 0 0 1px rgba(7, 18, 14, .7), 0 1px 14px rgba(7, 18, 14, .6); }
.site-header.is-solid { background: rgba(12, 26, 21, .97); border-bottom-color: var(--line); }
.site-header.is-solid::before { opacity: 0; }
.bar { height: 100%; display: flex; align-items: center; gap: clamp(.75rem, 1.6vw, 1.5rem); }
.brand { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; text-decoration: none; color: var(--ink); }
.brand__mark { width: 26px; height: 26px; fill: none; stroke: var(--sun); stroke-width: 1.4; }
.brand__core { fill: var(--sun); stroke: none; }
.brand__name { font: 400 1.5rem/1 var(--f-display); font-stretch: 87.5%; letter-spacing: .01em; }
:lang(ka) .brand__name { font-size: 1.375rem; letter-spacing: .06em; font-weight: 450; }
.concept { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .6rem; border: 1px solid rgba(240, 186, 95, .55); color: var(--sun); font: 600 .75rem/1 var(--f-ui); letter-spacing: .04em; white-space: nowrap; }
:lang(ka) .concept { font-size: .8125rem; letter-spacing: .02em; }
.concept svg { width: 8px; height: 8px; fill: currentColor; }
.menu { margin-left: auto; display: flex; align-items: center; gap: clamp(.75rem, 1.5vw, 1.5rem); }
.nav ul { list-style: none; display: flex; gap: clamp(.25rem, 1vw, 1rem); }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .35rem; font: 500 var(--fs-ui)/1 var(--f-ui); color: var(--ink); text-decoration: none; background: linear-gradient(var(--sun), var(--sun)) no-repeat left calc(50% + .85em) / 0 1px; transition: background-size .45s var(--ease-out), color .25s; }
.nav a:hover, .nav a[aria-current="page"] { background-size: 100% 1px; color: var(--sun-hi); }
.langs { display: inline-flex; align-items: center; }
.langs__link { position: relative; display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 .4rem; font: 600 .8125rem/1 var(--f-ui); letter-spacing: .06em; color: var(--ink-2); text-decoration: none; transition: color .2s; }
.langs__link[lang="ka"] { font-size: .875rem; letter-spacing: .02em; }
.langs__link:hover { color: var(--ink); }
.langs__link[aria-current="true"] { color: var(--sun); }
.langs__link[aria-current="true"]::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 5px; height: 5px; background: currentColor; transform: translateX(-50%) rotate(45deg); }
.menu-btn { display: none; margin-left: auto; align-items: center; gap: .6rem; min-height: 44px; padding: 0 .25rem 0 .75rem; background: none; border: 0; color: var(--ink); font: 600 var(--fs-ui)/1 var(--f-ui); }
.menu-btn__lines { position: relative; width: 22px; height: 10px; }
.menu-btn__lines i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .35s var(--ease-out), top .35s var(--ease-out); }
.menu-btn__lines i:first-child { top: 0; }
.menu-btn__lines i:last-child { top: 8px; }
.menu-btn[aria-expanded="true"] .menu-btn__lines i:first-child { top: 4px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__lines i:last-child { top: 4px; transform: rotate(-45deg); }

/* ---------------------------------------------------------------- buttons and links */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 50px; padding: 0 1.45em; border: 1px solid transparent; border-radius: 0; font: 600 var(--fs-ui)/1.1 var(--f-ui); letter-spacing: .02em; text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer; transition: background-color .3s var(--ease-light), color .3s var(--ease-light), border-color .3s var(--ease-light), transform .2s var(--ease-out); }
.btn--sm { min-height: 44px; padding: 0 1.1em; }
.btn--sun { background: var(--sun); color: var(--ground-deep); }
.btn--sun::before { content: ""; position: absolute; inset: -2px -40%; z-index: -1; background: linear-gradient(115deg, transparent 38%, rgba(255, 250, 235, .55) 50%, transparent 62%); transform: translateX(-75%); transition: transform .9s var(--ease-out); }
.btn--sun:hover { background: var(--sun-hi); }
.btn--sun:hover::before { transform: translateX(75%); }
.btn--sun:focus-visible { outline-color: var(--ink); }
.btn--line { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--line:hover { border-color: var(--sun); color: var(--sun-hi); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; transform: none; }
.more-link { display: inline-flex; align-items: center; gap: .75rem; min-height: 44px; font: 600 var(--fs-ui)/1.2 var(--f-ui); color: var(--sun); text-decoration: none; }
.more-link svg { width: 24px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .45s var(--ease-out); }
.more-link:hover svg { transform: translateX(6px); }
.more-link span { background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 100% 1px; padding-bottom: 2px; }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; height: 100svh; min-height: 640px; max-height: 1200px; color: var(--ink); }
.hero__media { position: absolute; inset: 0; overflow: hidden; background: #1b2a21; }
.hero__img, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero__video { opacity: 0; transition: opacity 1.4s var(--ease-light); }
.hero__video.is-on { opacity: 1; }
.hero__veil { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(ellipse 46% 50% at 16% 80%, rgba(7, 18, 14, .58), rgba(7, 18, 14, 0) 70%),
  radial-gradient(ellipse 30% 34% at 90% 84%, rgba(7, 18, 14, .62), rgba(7, 18, 14, 0) 70%),
  linear-gradient(0deg, rgba(7, 18, 14, .9) 0%, rgba(7, 18, 14, .68) 18%, rgba(7, 18, 14, .24) 42%, rgba(7, 18, 14, 0) 62%),
  linear-gradient(90deg, rgba(7, 18, 14, .68) 0%, rgba(7, 18, 14, .34) 30%, rgba(7, 18, 14, 0) 55%); }
.hero__body { position: absolute; left: 0; right: 0; bottom: clamp(5rem, 11vh, 8rem); z-index: 2; text-shadow: 0 0 1px rgba(7, 18, 14, .6), 0 2px 22px rgba(7, 18, 14, .55); }
.hero__body .btn { text-shadow: none; }
.hero__title { font-size: var(--fs-hero); font-weight: 320; line-height: .96; letter-spacing: -0.02em; }
:lang(ka) .hero__title { letter-spacing: .03em; line-height: 1.05; font-weight: 380; }
.hero__line { margin-top: 1.1rem; max-width: 36ch; font-size: var(--fs-lede); line-height: 1.5; color: var(--ink); text-wrap: balance; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero__actions .btn--line { border-color: rgba(241, 233, 213, .5); background: rgba(7, 18, 14, .28); }
.hero__aside { position: absolute; right: var(--gutter); bottom: clamp(5rem, 11vh, 8rem); z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 1.1rem; max-width: 19rem; text-align: right; }
.hero__define { font-size: var(--fs-small); line-height: 1.5; color: var(--ink); text-shadow: 0 0 1px rgba(7, 18, 14, .7), 0 1px 14px rgba(7, 18, 14, .65); }
.hero__define [lang="ka"] { color: var(--ink); }
.film-btn { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: 0 1rem 0 .85rem; background: rgba(7, 18, 14, .5); border: 1px solid rgba(241, 233, 213, .4); color: var(--ink); font: 600 .8125rem/1 var(--f-ui); letter-spacing: .03em; transition: border-color .25s, color .25s; }
:lang(ka) .film-btn { font-size: .875rem; }
.film-btn:hover { border-color: var(--sun); color: var(--sun-hi); }
.film-btn__icon { width: 14px; height: 14px; fill: currentColor; }
.film-btn__icon--play { display: none; }
.film-btn.is-paused .film-btn__icon--play { display: block; }
.film-btn.is-paused .film-btn__icon--pause { display: none; }

/* The carved valance: the ground rises into the picture in a fretwork edge. */
.valance { position: absolute; left: 0; right: 0; bottom: -1px; height: 22px; z-index: 1; background: var(--ground);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 22'%3E%3Cpath fill-rule='evenodd' d='M0 22V15c8 0 13-3 17-8 2-2.5 3.5-4.5 5-7 1.5 2.5 3 4.5 5 7 4 5 9 8 17 8v7zM22 9.5l3 3-3 3-3-3z'/%3E%3C/svg%3E") left bottom / 44px 22px round no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 22'%3E%3Cpath fill-rule='evenodd' d='M0 22V15c8 0 13-3 17-8 2-2.5 3.5-4.5 5-7 1.5 2.5 3 4.5 5 7 4 5 9 8 17 8v7zM22 9.5l3 3-3 3-3-3z'/%3E%3C/svg%3E") left bottom / 44px 22px round no-repeat; }
.lattice-band { height: 18px; width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 18'%3E%3Cg fill='none' stroke='%23f0ba5f' stroke-width='.9'%3E%3Cpath d='M0 9 9 0l9 9-9 9zM18 9l9-9 9 9-9 9z'/%3E%3Cpath d='M9 5.5 12.5 9 9 12.5 5.5 9zM27 5.5 30.5 9 27 12.5 23.5 9z' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") center / 36px 18px round no-repeat; }

/* ---------------------------------------------------------------- the lattice reveal (light opening through a carved screen) */
.reveal { --cell: 24px; }
.js .reveal {
  --t: calc((1 - var(--o)) * 50%);
  -webkit-mask-image:
    linear-gradient(135deg, #000 calc(var(--s) * 100% - 26%), transparent calc(var(--s) * 100%)),
    linear-gradient(135deg, transparent var(--t), #000 0), linear-gradient(225deg, transparent var(--t), #000 0),
    linear-gradient(315deg, transparent var(--t), #000 0), linear-gradient(45deg, transparent var(--t), #000 0);
  -webkit-mask-size: 100% 100%, var(--cell) var(--cell), var(--cell) var(--cell), var(--cell) var(--cell), var(--cell) var(--cell);
  -webkit-mask-repeat: no-repeat, repeat, repeat, repeat, repeat;
  -webkit-mask-composite: source-over, source-in, source-in, source-in, source-over;
  mask-image:
    linear-gradient(135deg, #000 calc(var(--s) * 100% - 26%), transparent calc(var(--s) * 100%)),
    linear-gradient(135deg, transparent var(--t), #000 0), linear-gradient(225deg, transparent var(--t), #000 0),
    linear-gradient(315deg, transparent var(--t), #000 0), linear-gradient(45deg, transparent var(--t), #000 0);
  mask-size: 100% 100%, var(--cell) var(--cell), var(--cell) var(--cell), var(--cell) var(--cell), var(--cell) var(--cell);
  mask-repeat: no-repeat, repeat, repeat, repeat, repeat;
  mask-composite: add, intersect, intersect, intersect, add;
}
.js .reveal.is-open { -webkit-mask-image: none; mask-image: none; }
@keyframes lattice { from { --o: 0; --s: -0.3; } to { --o: 1; --s: 1.3; } }
.js .reveal--intro { animation: lattice 1.5s var(--ease-light) .1s both; }
.js .reveal:not(.reveal--intro) { --o: 0; --s: -0.3; }
.js .reveal.is-in:not(.reveal--intro) { animation: lattice 1.4s var(--ease-light) both; }
@supports (animation-timeline: view()) {
  .js .reveal:not(.reveal--intro) { animation: lattice linear both; animation-timeline: view(); animation-range: entry 4% cover 38%; }
}

/* Cursor light: a warm source behind a lattice, following the pointer. */
.lit { position: relative; isolation: isolate; }
.lit::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(circle 260px at var(--mx, 50%) var(--my, 50%), rgba(255, 226, 170, .62), rgba(255, 226, 170, 0) 72%);
  mix-blend-mode: soft-light;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.4 14.6 8 8 14.6 1.4 8z'/%3E%3C/svg%3E") 0 0 / 16px 16px repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.4 14.6 8 8 14.6 1.4 8z'/%3E%3C/svg%3E") 0 0 / 16px 16px repeat;
  transition: opacity .7s var(--ease-light);
}
@media (hover: hover) and (pointer: fine) { .lit.is-lit::after { opacity: 1; } }

/* Scroll-linked depth */
.depth__frame { position: relative; overflow: hidden; aspect-ratio: 16 / 8; background: #1b2a21; }
.depth__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transform-origin: 50% 50%; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .depth__frame { view-timeline: --depth block; }
    .js .depth__img { animation: depth linear both; animation-timeline: --depth; animation-range: cover 0% cover 100%; }
    .js .hero__media { animation: hero-recede linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
    .js .hero__body, .js .hero__aside { animation: hero-lift linear both; animation-timeline: scroll(root block); animation-range: 0 80vh; }
  }
}
@keyframes depth { from { transform: translate3d(0, -6%, 0) scale(1.12); } to { transform: translate3d(0, 6%, 0) scale(1.12); } }
@keyframes hero-recede { to { transform: translate3d(0, 16%, 0) scale(1.06); filter: brightness(.7); } }
@keyframes hero-lift { to { transform: translate3d(0, -14vh, 0); opacity: 0; } }

/* Frames and captions */
.frame { position: relative; margin: 0; }
.frame img, .frame-wide img { width: 100%; height: auto; background: var(--tint, var(--ground-raised)); }
figcaption { margin-top: .85rem; font: 500 var(--fs-small)/1.45 var(--f-ui); color: var(--ink-3); }
figcaption::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .6rem; vertical-align: .14em; background: var(--sun); transform: rotate(45deg); }

/* ---------------------------------------------------------------- house */
.house { overflow: clip; }
.house__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.house__text { grid-column: 1 / span 6; display: grid; gap: 1.25rem; max-width: 40rem; }
.house__text .h2 { margin-bottom: .75rem; }
.house__text p:not(.lede):not(.facts) { color: var(--ink-2); max-width: 62ch; }
.facts { margin-top: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--sun); font: 600 var(--fs-ui)/1.5 var(--f-ui); letter-spacing: .01em; font-variant-numeric: lining-nums tabular-nums; }
.house__figure { grid-column: 8 / span 5; margin-top: clamp(0rem, 6vw, 6rem); }

/* ---------------------------------------------------------------- rooms (home) */
.section-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section-head .h2 { grid-column: 1 / span 5; }
.section-head__text { grid-column: 7 / span 6; color: var(--ink-2); max-width: 46ch; }
.rooms__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.elevation { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + 2rem); margin: 0; }
.elevation figcaption { max-width: 34ch; }
.room-index { grid-column: 7 / span 6; list-style: none; border-top: 1px solid var(--line); }
.room-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem; padding: 1.35rem 1rem 1.45rem; border-bottom: 1px solid var(--line); transition: background-color .4s var(--ease-light); }
.room-row.lit::after { mix-blend-mode: screen; background: radial-gradient(circle 280px at var(--mx, 50%) var(--my, 50%), rgba(240, 186, 95, .2), rgba(240, 186, 95, 0) 70%); }
.room-row__name { font-size: var(--fs-h3); line-height: 1.1; }
.room-row__name a { color: var(--ink); text-decoration: none; transition: color .3s; }
.room-row__name a::after { content: ""; position: absolute; inset: 0; z-index: 4; }
.room-row__name a:focus-visible { outline: none; }
.room-row:has(a:focus-visible) { outline: 2px solid var(--sun); outline-offset: -2px; }
.room-row:hover .room-row__name a, .room-row.is-active .room-row__name a { color: var(--sun-hi); }
.room-row.is-active { background: rgba(240, 186, 95, .045); }
.room-row__kind { font: 500 var(--fs-small)/1.4 var(--f-ui); color: var(--sun); }
.room-row__line { color: var(--ink-2); max-width: 52ch; }
.room-row__meta { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; margin-top: .55rem; }
.room-row__meta div { display: flex; gap: .5rem; align-items: baseline; }
.room-row__meta dt { color: var(--ink-3); font-size: .7rem; }
:lang(ka) .room-row__meta dt { font-size: .78rem; }
.room-row__meta dd { font: 500 var(--fs-small)/1.4 var(--f-ui); color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.rooms__photos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: end; margin-top: clamp(4rem, 8vw, 7rem); }
.rooms__photo--tall { grid-column: 1 / span 4; }
.rooms__photo--wide { grid-column: 6 / span 7; }
.rooms__more { margin-top: 2.5rem; display: flex; justify-content: flex-end; }

/* The elevation drawing */
.elev { width: 100%; height: auto; overflow: visible; }
.elev .e-line, .elev .e-line path, .elev .e-line rect { fill: none; stroke: var(--draw); stroke-width: 1.1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.elev .e-fine { fill: none; stroke: var(--draw); stroke-width: .8; opacity: .75; vector-effect: non-scaling-stroke; }
.elev .e-line .e-wall { fill: #0f2019; }
.elev .e-line .e-masonry { fill: url(#elev-brick); }
.elev .e-brick { fill: none; stroke: #23362c; stroke-width: .7; }
.elev .e-line .e-gate, .elev .e-line .e-dark { fill: #06100c; }
.elev .e-line .e-slab { fill: #16271f; }
.elev .e-drop { fill: var(--ground); stroke: var(--draw); stroke-width: .8; vector-effect: non-scaling-stroke; }
.elev .e-roof { stroke-width: 1.4; }
.elev .e-leaf { fill: #24402a; stroke: #6f9a5c; stroke-width: .6; vector-effect: non-scaling-stroke; }
.elev .e-grape circle { fill: #35486a; }
.elev .e-fruit circle { fill: var(--sun-deep); }
.elev .e-mullion { fill: none; stroke: #2a1d0a; stroke-width: 1.3; opacity: calc(.25 + .6 * var(--on) * var(--dim)); vector-effect: non-scaling-stroke; }
.win { --dim: 1; transition: --dim .5s var(--ease-light); }
.win__halo { fill: var(--sun); opacity: calc(.42 * var(--on) * var(--dim)); }
.win__glass > * { fill: url(#elev-glass); opacity: calc(.08 + .82 * var(--on) * min(var(--dim), 1)); }
.win__frame > * { fill: none; stroke: var(--ink-2); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
#win-shushabandi .win__glass > * { opacity: calc(.05 + .45 * var(--on) * min(var(--dim), 1)); }
.pane { stroke: #2a1d0a; stroke-width: .6; fill: transparent; }
.pane--amber { fill: var(--sun); }
.pane--cobalt { fill: var(--cobalt); }
.pane--turq { fill: var(--turq); }
.pane--leaf { fill: var(--leaf); }
.pane--clear { fill: #f6dfae; }
.pane { fill-opacity: calc(.12 + .8 * var(--on) * min(var(--dim), 1)); }
.elev.has-active .win { --dim: .22; }
.elev.has-active .win.is-active { --dim: 1.35; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .elevation { view-timeline: --elev block; }
    .js .win { animation: lights-on linear both; animation-timeline: --elev; }
    .js #win-ezo { animation-range: cover 6% cover 18%; }
    .js #win-brotseuli { animation-range: cover 10% cover 22%; }
    .js #win-aivani { animation-range: cover 14% cover 26%; }
    .js #win-bukhari { animation-range: cover 18% cover 30%; }
    .js #win-shushabandi { animation-range: cover 23% cover 36%; }
    .js #win-mtatsminda { animation-range: cover 28% cover 40%; }
    .js #win-skhveni { animation-range: cover 33% cover 46%; }
  }
}
@keyframes lights-on { from { --on: 0; } to { --on: 1; } }

/* ---------------------------------------------------------------- courtyard */
.court { padding-top: 0; }
.court__wide { margin: 0 0 clamp(4rem, 8vw, 7rem); }
.court__wide figcaption { margin-top: 1rem; }
.court__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); row-gap: clamp(3rem, 6vw, 5.5rem); align-items: start; }
.court__text { grid-column: 1 / span 6; display: grid; gap: 1.3rem; }
.court__text .h4 { margin-top: 1rem; color: var(--sun); }
.bf-list { list-style: none; border-top: 1px solid var(--line); }
.bf-list li { position: relative; padding: .8rem 0 .8rem 1.6rem; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.bf-list li::before { content: ""; position: absolute; left: .2rem; top: 1.45em; width: 6px; height: 6px; border: 1px solid var(--sun); transform: rotate(45deg); }
.court__breakfast { grid-column: 8 / span 5; margin-top: clamp(0rem, 4vw, 4rem); }
.court__night { grid-column: 1 / span 8; }
.court__evening { grid-column: 9 / span 4; align-self: end; color: var(--ink-2); }

/* ---------------------------------------------------------------- neighbourhood */
.hood__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.hood__text { grid-column: 1 / span 5; display: grid; gap: 1.4rem; }
.hood__text > p:not(.note) { color: var(--ink-2); }
.hood__map { grid-column: 6 / span 7; margin: 0; position: sticky; top: calc(var(--header-h) + 1.5rem); }
.walks { margin: .5rem 0 0; padding: 0; border: 0; min-width: 0; }
.walks legend { padding: 0; margin-bottom: .75rem; font: 600 var(--fs-label)/1.4 var(--f-ui); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
:lang(ka) .walks legend { text-transform: none; }
.walk:first-child label { border-top: 1px solid var(--line); }
.walk { position: relative; }
.walk input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.walk label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; min-height: 48px; padding: .7rem .5rem .7rem 1.6rem; border-bottom: 1px solid var(--line); cursor: pointer; font: 500 var(--fs-ui)/1.35 var(--f-ui); color: var(--ink-2); transition: color .25s, background-color .25s; }
.walk label::before { content: ""; position: absolute; left: .35rem; top: 1.25rem; width: 7px; height: 7px; border: 1px solid var(--ink-3); transform: rotate(45deg); transition: background-color .25s, border-color .25s; }
.walk label:hover { color: var(--ink); background: rgba(241, 233, 213, .03); }
.walk input:checked + label { color: var(--sun-hi); }
.walk input:checked + label::before { background: var(--sun); border-color: var(--sun); }
.walk input:focus-visible + label { outline: 2px solid var(--sun); outline-offset: -2px; }
.walk__time { white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; color: var(--ink); }
.walk__up { color: var(--ink-3); font-size: .85em; margin-left: .35rem; }
.hood__dusk { margin-top: clamp(4rem, 8vw, 7rem); }

/* The map */
.map { width: 100%; height: auto; overflow: hidden; }
.map text { font-family: var(--f-ui); font-size: 14px; }
.m-contour { fill: none; stroke: #263a30; stroke-width: 1; vector-effect: non-scaling-stroke; }
.m-contour--top { stroke: #34493d; }
.m-hatch { fill: none; stroke: #263a30; stroke-width: 1; vector-effect: non-scaling-stroke; }
.m-ridge-label, .m-district, .m-river-label { fill: var(--ink-3); font-size: 13px; letter-spacing: .28em; text-transform: uppercase; }
:lang(ka) :is(.m-ridge-label, .m-district, .m-river-label) { text-transform: none; letter-spacing: .12em; }
.m-district { font-size: 15px; letter-spacing: .4em; fill: var(--ink-2); }
.m-river__body { fill: none; stroke: #0f2f2b; stroke-width: 44; stroke-linecap: round; }
.m-river__edge { fill: none; stroke: var(--turq); stroke-width: 1; opacity: .45; vector-effect: non-scaling-stroke; }
.m-river-label { fill: #8cc6c1; }
.m-street { fill: none; stroke: #24372e; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.m-street--main { stroke: #3d5247; stroke-width: 2; }
.m-route { fill: none; stroke: var(--sun); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); opacity: 0; transition: stroke-dashoffset 1.3s var(--ease-light), opacity .35s; vector-effect: non-scaling-stroke; }
.m-route.is-active { stroke-dashoffset: 0; opacity: 1; }
.m-place__mark { fill: var(--ground); stroke: var(--ink-2); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: fill .3s, stroke .3s; }
.m-place__label { fill: var(--ink-2); transition: fill .3s; }
.m-place.is-active .m-place__mark { fill: var(--sun); stroke: var(--sun); }
.m-place.is-active .m-place__label { fill: var(--sun-hi); font-weight: 600; }
.m-house__glow { fill: var(--sun); opacity: .45; }
.m-house__mark { fill: var(--sun); }
.m-house__core { fill: var(--ground); }
.m-house__label { fill: var(--sun); font-weight: 600; font-size: 15px; }

/* ---------------------------------------------------------------- request form */
.request { isolation: isolate; }
.request::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ground-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.request__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.request__intro { grid-column: 1 / span 4; display: grid; gap: 1.2rem; position: sticky; top: calc(var(--header-h) + 2rem); }
.rates { font: 600 var(--fs-ui)/1.4 var(--f-ui); color: var(--sun); }
.request__panel { grid-column: 6 / span 7; }
.form { display: grid; gap: 1.6rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.form__row--dates { grid-template-columns: 1fr 1fr; }
.nights { grid-column: 1 / -1; min-height: 1.4em; margin-top: -.6rem; font: 500 var(--fs-small)/1.4 var(--f-ui); color: var(--sun); font-variant-numeric: tabular-nums; }
.field { display: grid; gap: .5rem; min-width: 0; }
.field label { font: 600 var(--fs-ui)/1.35 var(--f-ui); color: var(--ink); }
.field__opt { font-weight: 400; color: var(--ink-3); }
.field__hint { font: 400 var(--fs-small)/1.45 var(--f-ui); color: var(--ink-3); }
.field__error { display: flex; gap: .5rem; align-items: flex-start; font: 600 var(--fs-small)/1.45 var(--f-ui); color: var(--coral); }
.field__error::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .45em; background: currentColor; transform: rotate(45deg); }
input, select, textarea { width: 100%; min-height: 52px; padding: .8rem 1rem; background: var(--ground-raised); border: 1px solid var(--line-strong); border-radius: 0; color: var(--ink); font: 400 1.0625rem/1.4 var(--f-ui); transition: border-color .2s, background-color .2s; -webkit-appearance: none; appearance: none; }
:lang(ka) :is(input, select, textarea) { font-size: 1.125rem; }
textarea { min-height: 128px; resize: vertical; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:hover, select:hover, textarea:hover { border-color: rgba(241, 233, 213, .55); background: var(--ground-raised-2); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; border-color: var(--sun); background: var(--ground-raised-2); }
[aria-invalid="true"] { border-color: var(--coral); }
input:disabled, select:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; }
input[type="date"] { font-variant-numeric: tabular-nums; }
input[type="date"]:focus, input[type="date"]:focus-within { outline: 2px solid var(--sun); outline-offset: 2px; border-color: var(--sun); }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .85; cursor: pointer; padding: 4px; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
input[type="number"] { -moz-appearance: textfield; text-align: center; font-variant-numeric: tabular-nums; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; }
.stepper input { border-inline: 0; }
.stepper__btn { display: grid; place-items: center; min-height: 52px; background: var(--ground-raised); border: 1px solid var(--line-strong); color: var(--ink); transition: background-color .2s, border-color .2s, color .2s; }
.stepper__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.stepper__btn:hover:not(:disabled) { color: var(--sun); border-color: var(--sun); }
.stepper__btn:disabled { opacity: .4; cursor: not-allowed; }
.select { position: relative; }
.select select { padding-right: 2.75rem; cursor: pointer; }
.select svg { position: absolute; right: 1rem; top: 50%; width: 16px; height: 16px; margin-top: -8px; fill: none; stroke: var(--sun); stroke-width: 1.6; pointer-events: none; }
select option { background: var(--ground-raised); color: var(--ink); }
select option:disabled { color: #7d8073; }
.form__summary { padding: 1.1rem 1.25rem; border: 1px solid var(--coral); background: rgba(245, 146, 108, .06); }
.form__summary:focus-visible { outline-offset: 4px; }
.form__summary-title { font: 600 var(--fs-ui)/1.4 var(--f-ui); color: var(--coral); }
.form__summary ul { margin-top: .5rem; list-style: none; display: grid; gap: .25rem; }
.form__summary a { display: inline-flex; min-height: 32px; align-items: center; color: var(--ink); font: 500 var(--fs-small)/1.4 var(--f-ui); }
.form__actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.btn--submit { min-width: 15rem; }
.btn__sending { display: none; align-items: center; gap: .6rem; }
.btn--submit.is-sending .btn__label { display: none; }
.btn--submit.is-sending .btn__sending { display: inline-flex; }
.btn--submit.is-sending { background: var(--sun-deep); color: var(--ground-deep); }
.btn--submit:disabled::before { display: none; }
.dots { display: inline-flex; gap: 5px; }
.dots i { width: 6px; height: 6px; background: currentColor; transform: rotate(45deg) scale(.6); opacity: .35; animation: dot 1.1s var(--ease-light) infinite; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 40% { transform: rotate(45deg) scale(1); opacity: 1; } }
.form-done { display: grid; justify-items: start; gap: 1.1rem; padding: 2.5rem; border: 1px solid rgba(240, 186, 95, .45); background: radial-gradient(120% 90% at 0% 0%, rgba(240, 186, 95, .09), transparent 60%), var(--ground-raised); }
.form-done:focus-visible { outline-offset: 4px; }
.form-done__mark { width: 56px; height: 56px; fill: none; stroke: var(--sun); stroke-width: 1.2; }
.form-done__mark path:last-child { fill: var(--sun); }
.form-done p { color: var(--ink-2); max-width: 52ch; }

/* ---------------------------------------------------------------- practical */
.practical .h2 { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.prac { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gap); border-top: 1px solid var(--line); }
.prac > div { padding: 1.75rem 0 2.1rem; border-bottom: 1px solid var(--line); display: grid; gap: .6rem; align-content: start; padding-right: 1rem; }
.prac dt { font-size: var(--fs-h4); color: var(--sun); }
.prac dd { color: var(--ink-2); font-variant-numeric: lining-nums; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--ground-deep); border-top: 1px solid var(--line); padding: clamp(3.5rem, 6vw, 5rem) 0 2rem; }
.footer__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.footer__brand { grid-column: 1 / span 4; display: grid; gap: .5rem; }
.footer__name { display: inline-flex; align-items: center; gap: .65rem; font: 400 2rem/1 var(--f-display); font-stretch: 87.5%; }
:lang(ka) .footer__name { font-size: 1.75rem; letter-spacing: .05em; }
.footer__name .brand__mark { width: 30px; height: 30px; }
.footer__place { color: var(--ink-3); font: 500 var(--fs-small)/1.4 var(--f-ui); }
.footer__nav { grid-column: 6 / span 4; }
.footer__nav ul { list-style: none; columns: 2; column-gap: var(--gap); }
.footer__nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); font: 500 var(--fs-ui)/1.35 var(--f-ui); text-decoration: none; }
.footer__nav a:hover { color: var(--sun-hi); text-decoration: underline; }
.site-footer .langs { grid-column: 11 / span 2; justify-self: end; }
.footer__base { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding-top: 1.75rem; flex-wrap: wrap; }
.footer__concept { display: flex; align-items: center; gap: .75rem; font: 500 var(--fs-small)/1.5 var(--f-ui); color: var(--ink-2); }
.concept--quiet { padding: .5rem; }
.footer__top-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); font: 500 var(--fs-small)/1 var(--f-ui); }
.footer__top-link:hover { color: var(--sun-hi); }

/* ---------------------------------------------------------------- rooms page */
[data-page="rooms"] .site-header { background: rgba(12, 26, 21, .97); border-bottom-color: var(--line); }
[data-page="rooms"] .site-header::before { opacity: 0; }
.rp-intro { padding: calc(var(--header-h) + clamp(3rem, 7vw, 6.5rem)) 0 clamp(3.5rem, 7vw, 6rem); }
.rp-intro__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: end; }
.rp-intro__text { grid-column: 1 / span 7; display: grid; gap: 1.5rem; }
.rp-intro__text .lede { color: var(--ink-2); max-width: 54ch; }
.rp-intro__figure { grid-column: 9 / span 4; }
.floors ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.floors a { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0 1rem; border: 1px solid var(--line-strong); color: var(--ink); text-decoration: none; font: 500 var(--fs-ui)/1 var(--f-ui); transition: border-color .25s, color .25s; }
.floors a::before { content: ""; width: 6px; height: 6px; border: 1px solid var(--sun); transform: rotate(45deg); }
.floors a:hover { border-color: var(--sun); color: var(--sun-hi); }
.floor { padding-top: 5rem; padding-bottom: 5rem; border-top: 1px solid var(--line); }
@media (max-width: 47.99em) { .floor { padding-top: 3.5rem; padding-bottom: 3.5rem; } }
.floor__title { display: flex; align-items: center; gap: .9rem; font-size: var(--fs-h4); color: var(--sun); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.floor__title::before { content: ""; width: 9px; height: 9px; background: var(--sun); transform: rotate(45deg); }
.room { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; padding-top: clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.room + .room { border-top: 1px solid var(--line); }
.room__text { grid-column: 1 / span 6; display: grid; gap: 1rem; align-content: start; }
.room__name { font-size: var(--fs-h2); }
.room__kind { font: 500 var(--fs-ui)/1.35 var(--f-ui); color: var(--sun); margin-top: -.4rem; }
.room__line { color: var(--ink); }
.room__desc { color: var(--ink-2); max-width: 60ch; }
.room__text .btn { justify-self: start; margin-top: .75rem; }
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap); margin-top: .75rem; border-top: 1px solid var(--line); }
.specs div { display: grid; gap: .2rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.specs dt { color: var(--ink-3); }
.specs dd { font: 500 var(--fs-ui)/1.4 var(--f-ui); font-variant-numeric: tabular-nums lining-nums; }
.room__plan { grid-column: 8 / span 5; margin: 0; padding: clamp(1rem, 2vw, 1.75rem); border: 1px solid var(--line); background: rgba(19, 36, 29, .5); }
.room__plan svg { width: 100%; max-width: 380px; margin-inline: auto; height: auto; }
.room--photo .room__plan { grid-column: 8 / span 5; }
.room__photo { grid-column: 1 / span 9; margin-top: clamp(1rem, 3vw, 2rem); }
.room--photo .room__photo { grid-column: 1 / span 9; }
.room__photo img { aspect-ratio: 16 / 10; object-fit: cover; object-position: var(--pos, 50% 50%); }
#shushabandi .room__photo img { --pos: 50% 62%; }
.plan .p-wall { fill: var(--ink-2); }
.plan .p-gap { fill: #142a21; }
.room__plan .plan .p-gap { fill: #10221b; }
.plan .p-glass { fill: none; stroke: var(--turq); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.plan .p-swing { fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.plan .p-part { fill: none; stroke: var(--ink-2); stroke-width: 3; }
.plan .p-fix, .plan .p-furn { fill: none; stroke: var(--ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plan .p-fold { stroke-dasharray: 2 3; }
.plan .p-outside { fill: none; stroke: var(--line-strong); stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.plan .p-lattice { fill: none; stroke: var(--sun); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plan .p-pane { fill: var(--cobalt); opacity: .7; }
.plan .p-pane:nth-child(3n) { fill: var(--sun); }
.plan .p-pane:nth-child(4n) { fill: var(--turq); }
.plan .p-hearth { fill: #3b5246; }
.plan .p-kilim { fill: none; stroke: var(--sun-deep); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plan .p-beam { stroke: #3b5246; stroke-dasharray: 8 6; vector-effect: non-scaling-stroke; }
.plan .p-sky { fill: rgba(95, 179, 174, .08); stroke: var(--turq); stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.plan .p-tree { fill: none; stroke: var(--leaf); vector-effect: non-scaling-stroke; }

/* Gallery */
.gallery { border-top: 1px solid var(--line); }
.gallery__grid { list-style: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 250px); gap: var(--gap); }
.gallery__item { grid-row: span 2; grid-column: span 4; }
.gallery__item:nth-child(1) { grid-column: span 8; }
.gallery__item:nth-child(4) { grid-column: span 5; }
.gallery__item:nth-child(5) { grid-column: span 3; }
.gallery__item:nth-child(7) { grid-column: span 8; }
.gallery__item:nth-child(8) { grid-column: span 8; }
.thumb { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--ground-raised); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), filter .6s; }
.thumb:hover img { transform: scale(1.035); }
.thumb:focus-visible { outline-offset: 4px; }
.lightbox { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); }
.lightbox::backdrop { background: rgba(5, 12, 9, .96); }
.lightbox__inner { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 1rem; padding: clamp(16px, 3vw, 40px); }
.lightbox__figure { margin: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; }
.lightbox__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; min-height: 0; }
.lightbox__caption { margin-top: .9rem; text-align: center; max-width: 70ch; color: var(--ink-2); }
.lightbox__bar { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.lightbox__count { min-width: 6rem; text-align: center; font: 500 var(--fs-small)/1 var(--f-ui); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.icon-btn { display: inline-grid; place-items: center; width: 48px; height: 48px; background: transparent; border: 1px solid var(--line-strong); color: var(--ink); transition: border-color .2s, color .2s; }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.icon-btn:hover { border-color: var(--sun); color: var(--sun-hi); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 79.99em) {
  .nav ul { gap: 0; }
  .nav a { padding: 0 .3rem; }
}
@media (max-width: 71.99em) {
  :root { --header-h: 64px; }
  .menu-btn { display: inline-flex; }
  .menu { position: fixed; top: var(--header-h); left: 0; right: 0; display: grid; gap: 1.25rem; align-content: start; padding: 1.5rem var(--gutter) 2rem; background: var(--ground-deep); border-bottom: 1px solid var(--line); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .3s var(--ease-light), transform .35s var(--ease-out), visibility 0s linear .35s; }
  .menu.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .3s var(--ease-light), transform .35s var(--ease-out), visibility 0s; }
  .nav ul { flex-direction: column; }
  .nav a { min-height: 52px; font-size: 1.25rem; padding: 0; width: 100%; border-bottom: 1px solid var(--line); background: none; }
  :lang(ka) .nav a { font-size: 1.3125rem; }
  .menu .langs { margin-left: -.4rem; }
  .menu__cta { justify-self: start; }
  .site-header.menu-open { background: var(--ground-deep); border-bottom-color: var(--line); }
}
@media (max-width: 63.99em) {
  .house__text { grid-column: 1 / span 7; }
  .house__figure { grid-column: 8 / span 5; }
  .elevation { grid-column: 1 / span 5; }
  .room-index { grid-column: 6 / span 7; }
  .request__intro { grid-column: 1 / -1; position: static; max-width: 40rem; }
  .request__panel { grid-column: 1 / -1; }
  .hood__text { grid-column: 1 / -1; max-width: 40rem; }
  .hood__map { grid-column: 1 / -1; position: static; }
  .prac { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room__text { grid-column: 1 / span 7; }
  .room__plan, .room--photo .room__plan { grid-column: 8 / span 5; }
  .room--photo .room__photo { grid-column: 1 / -1; }
  .rp-intro__text { grid-column: 1 / span 7; }
  .rp-intro__figure { grid-column: 8 / span 5; }
  .footer__brand { grid-column: 1 / span 6; }
  .footer__nav { grid-column: 7 / span 6; }
  .site-footer .langs { grid-column: 1 / -1; justify-self: start; margin-left: -.4rem; }
  .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .gallery__item, .gallery__item:nth-child(n) { grid-column: span 1; grid-row: auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 63.99em) {
  .hero { height: auto; min-height: 0; max-height: none; display: flex; flex-direction: column; }
  .hero__media { position: relative; inset: auto; height: 64svh; min-height: 400px; max-height: 760px; }
  .hero__veil { background: linear-gradient(180deg, rgba(7, 18, 14, .55) 0%, rgba(7, 18, 14, 0) 26%), linear-gradient(0deg, rgba(12, 26, 21, .7) 0%, rgba(12, 26, 21, 0) 30%); }
  .hero__body { position: relative; bottom: auto; padding-top: 1.6rem; }
  .hero__aside { position: static; align-items: stretch; text-align: left; max-width: 34rem; padding: 1.5rem var(--gutter) 0; }
  .film-btn { position: absolute; right: var(--gutter); top: calc(min(max(64svh, 400px), 760px) - 44px - 34px); align-self: flex-end; }
  .js .hero__media, .js .hero__body, .js .hero__aside { animation: none; }
}
@media (max-width: 47.99em) {
  :root { --header-h: 60px; }
  .hero__title { font-size: clamp(3.25rem, 15vw, 4.5rem); }
  .hero__actions .btn { flex: 1 1 auto; }
  .brand__name { font-size: 1.3125rem; }
  .concept { padding: .45rem .5rem; }
  .menu-btn [data-menu-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .menu-btn { min-width: 44px; justify-content: center; padding: 0; }
  .house__text, .house__figure, .section-head .h2, .section-head__text, .elevation, .room-index,
  .rooms__photo--tall, .rooms__photo--wide, .court__text, .court__breakfast, .court__night, .court__evening,
  .room__text, .room__plan, .room--photo .room__plan, .room--photo .room__photo, .rp-intro__text, .rp-intro__figure,
  .footer__brand, .footer__nav { grid-column: 1 / -1; }
  .house__figure { margin-top: 1rem; }
  .elevation { position: relative; top: auto; margin-bottom: 1.5rem; }
  .room-row { padding-inline: .25rem; }
  .depth__frame { aspect-ratio: 4 / 5; }
  .form__row, .form__row--dates { grid-template-columns: minmax(0, 1fr); }
  .btn--submit { width: 100%; }
  .prac { grid-template-columns: minmax(0, 1fr); }
  .specs { grid-template-columns: minmax(0, 1fr); }
  .gallery__grid { grid-template-columns: minmax(0, 1fr); }
  .gallery__item, .gallery__item:nth-child(n) { aspect-ratio: auto; }
  .gallery__item .thumb img { height: auto; }
  .map .m-place__label { display: none; }
  .map .m-place.is-active .m-place__label { display: block; font-size: 24px; }
  .map .m-house__label { font-size: 24px; }
  .m-ridge-label, .m-river-label { font-size: 22px; }
  .m-district { font-size: 24px; }
  .footer__base { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------- reduced motion: finished, still states */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  .js .reveal { -webkit-mask-image: none !important; mask-image: none !important; animation: none !important; }
  .lit::after { display: none; }
  .depth__img { transform: none; }
  .win { animation: none !important; --on: 1; }
  .dots i { opacity: 1; transform: rotate(45deg) scale(.8); }
}
@media (forced-colors: active) {
  .valance, .lattice-band, .lit::after { display: none; }
  .btn { border: 1px solid ButtonText; }
}