/* ==========================================================================
   CITYHIKERS — Specialty Coffee, Tbilisi

   Brand palette, and nothing else:
     dark brown   #2E1B14  — all type
     light beige  #CEB4A5  — the logo colour; rules, frames, decoration
     blood orange #B63D32  — the wordmark, fills, accents
     white        #FFFFFF  — cards and the paper the page is printed on
   The cream base is white tinted with the brand beige.
   ========================================================================== */

:root {
  /* ---- brand colour ---- */
  --brown: #2E1B14;
  --brown-dim: #6B584E;
  /* secondary copy — 6.0:1 on cream                  */
  --beige: #CEB4A5;
  --orange: #B63D32;
  /* 5.1:1 on cream — safe for text as well as fills  */
  --orange-deep: #98322A;
  --white: #FFFFFF;

  /* ---- surfaces, all tints of the above ---- */
  --cream: #F7F1EC;
  /* page                                            */
  --cream-2: #F1E8E1;
  /* menu panel                                      */
  --cream-3: #EADFD6;
  /* visit panel                                     */

  --rule: rgba(46, 27, 20, .14);
  --rule-firm: rgba(46, 27, 20, .28);

  /* ---- type ---- */
  --f-sans: 'Archivo', 'Noto Sans Georgian', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --f-display: 'Helvetica Neue', Helvetica, 'Noto Sans Georgian', Arial, sans-serif;
  --f-note: 'Newsreader', 'Noto Sans Georgian', Georgia, 'Times New Roman', serif;

  /* ---- rhythm ---- */
  --shell: 1600px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --section: clamp(4.5rem, 11vw, 9rem);
  --header-h: 68px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------- reset -- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
  background: var(--cream);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--brown);
  font-family: var(--f-sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section);
  position: relative;
}

/* --------------------------------------------------------- typography -- */
.h2 {
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  font-weight: 800;
  color: var(--brown);
  margin: .35em 0 0;
  text-wrap: balance;
}

.h2--display {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(3.2rem, 1rem + 11vw, 8rem);
  text-transform: uppercase;
  letter-spacing: -.05em;
  color: var(--orange);
  margin-top: .1em;
}

.eyebrow {
  margin: 0;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--orange);
}

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--brown);
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .82em 1.6em;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid currentColor;
  transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}

.btn--solid {
  --btn-bg: var(--orange);
  --btn-fg: var(--white);
  border-color: var(--orange);
}

.btn--solid:hover {
  background: var(--orange-deep);
  border-color: var(--orange-deep);
}

.btn--ghost:hover {
  background: var(--brown);
  color: var(--cream);
}

.btn:hover {
  transform: translateY(-2px);
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: .8em 1.4em;
  background: var(--orange);
  color: var(--white);
  font-weight: 700;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

:focus-visible {
  outline: 2.5px solid var(--orange);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════════ header ═ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--cream) 85%, transparent);
  backdrop-filter: saturate(1.2) blur(14px);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}

.site-header.is-stuck {
  border-bottom-color: var(--rule);
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* The hero already shouts the name at full width, so the header starts with
   just the nav (left, as in the reference) and the mark slides in later. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  flex: none;
  text-decoration: none;
  max-width: 0;
  margin-right: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: max-width .5s var(--ease), margin-right .5s var(--ease), opacity .35s var(--ease);
}

.site-header.is-scrolled .wordmark {
  max-width: 16rem;
  margin-right: 1.5rem;
  opacity: 1;
  pointer-events: auto;
}

.wordmark__blot {
  width: 34px;
  height: auto;
  flex: none;
  transition: transform .6s var(--ease);
}

.wordmark:hover .wordmark__blot {
  transform: rotate(-12deg) scale(1.12);
}

.wordmark__text {
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: .09em;
  color: var(--brown);
}

.nav {
  display: flex;
  gap: clamp(1.25rem, 3vw, 3rem);
  margin-right: auto;
}

.nav a {
  position: relative;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--brown);
  padding-block: .4em;
  transition: color .2s var(--ease);
}

.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}

.nav a:hover {
  color: var(--brown);
}

.nav a.is-current {
  color: var(--orange);
}

.nav a.is-current::after,
.nav a:hover::after {
  transform: scaleX(1);
}

/* margin-left keeps these right-aligned on mobile too, where .nav goes
   position: fixed and its margin-right: auto no longer pushes anything. */
.header-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-left: auto;
}

.lang-toggle {
  display: flex;
  border: 1.5px solid var(--rule-firm);
  border-radius: 999px;
  padding: 2px;
}

.lang-btn {
  padding: .3em .8em;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--brown-dim);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}

.lang-btn.is-active {
  background: var(--orange);
  color: var(--white);
}

.burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: .5rem .25rem;
}

.burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--brown);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}

.scroll-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--orange);
  transition: width .1s linear;
}

/* ═════════════════════════════════════════════════════════════════ hero ═ */
.hero {
  padding-block: clamp(1rem, 3vw, 2.5rem) clamp(2.5rem, 6vw, 4.5rem);
}

/* Sized in vw so the name always spans the full measure, edge to edge.
   The negative right margin cancels the trailing letter-space. */
.hero__wordmark {
  margin: 0 -.045em 0 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 17.1vw;
  line-height: .82;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--orange);
  white-space: nowrap;
}

/* .hero__frame holds the chip; .hero__frame-media clips the video to its
   aspect ratio. Splitting them lets the mobile breakpoint drop the chip out
   of the clipped box into normal flow below it — see the note in the HTML. */
.hero__frame {
  position: relative;
  margin-top: clamp(1rem, 2.5vw, 2rem);
}

.hero__frame-media {
  aspect-ratio: 2.8;
  overflow: hidden;
  background: var(--cream-3);
}

.hero__frame-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
}

.hero__visit {
  position: absolute;
  right: 0;
  bottom: clamp(1rem, 3vw, 2.5rem);
  padding: .85em 1.6em;
  background: var(--cream);
  color: var(--brown);
  font-size: clamp(.9rem, .85rem + .3vw, 1.1rem);
  font-weight: 500;
  text-decoration: none;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}

.hero__visit:hover {
  background: var(--orange);
  color: var(--white);
}

.hero__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.hero__kicker {
  margin: 0;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--orange);
}

.hero__lede {
  max-width: 38ch;
  margin: .7rem 0 0;
  font-family: var(--f-note);
  font-style: italic;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem);
  line-height: 1.45;
  color: var(--brown-dim);
}

.hero__blot {
  width: clamp(56px, 8vw, 104px);
  flex: none;
}

/* ══════════════════════════════════════════════════════════════ marquee ═ */
.marquee {
  background: var(--orange);
  color: var(--white);
  padding-block: .85rem;
  overflow: hidden;
  position: relative;
}

.marquee__track {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  animation: slide 34s linear infinite;
  font-size: clamp(.8rem, .74rem + .3vw, 1rem);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}

@keyframes slide {
  to {
    transform: translateX(-50%);
  }
}

.marquee__track span {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
}

/* U+2733 rendered as a full-colour emoji on iOS/macOS, clashing with the
   flat brand type — U+2022 has no emoji presentation anywhere. */
.marquee__track span::after {
  content: '•';
  opacity: .6;
}

/* ════════════════════════════════════════════════════════════════ about ═ */
.about {
  overflow: hidden;
}

.about__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .about__grid {
    grid-template-columns: 1.05fr 1fr;
  }
}

.about__lead {
  position: relative;
}

.about__lead .h2 {
  max-width: 14ch;
  position: relative;
  z-index: 2;
}

.about__blot {
  position: absolute;
  right: -18%;
  top: -35%;
  width: min(46vw, 420px);
  opacity: .13;
  z-index: 1;
  pointer-events: none;
}

.about__body p {
  margin: 0 0 1.2em;
  color: var(--brown-dim);
  max-width: 56ch;
}

.facts {
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
  max-width: 56ch;
}

.facts li {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  padding: .85rem 0;
  border-bottom: 1px solid var(--rule);
}

.facts__k {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brown-dim);
}

.facts__v {
  font-weight: 600;
}

/* ═════════════════════════════════════════════════════════════════ menu ═ */
.menu {
  background: var(--cream-2);
}

.menu__head {
  text-align: center;
}

.menu__head .h2--display {
  line-height: .85;
}

.menu__hint {
  margin: .4rem 0 0;
  font-family: var(--f-note);
  font-style: italic;
  color: var(--brown-dim);
  font-size: .95rem;
}

.tabs {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: .4rem;
  margin: clamp(2rem, 5vw, 3.2rem) 0 clamp(2rem, 4vw, 3rem);
  padding: .55rem 0;
  overflow-x: auto;
  scrollbar-width: none;
  background: linear-gradient(var(--cream-2) 70%, transparent);
}

.tabs::-webkit-scrollbar {
  display: none;
}

@media (min-width: 720px) {
  .tabs {
    justify-content: center;
    flex-wrap: wrap;
  }
}

.tab {
  flex: none;
  padding: .55em 1.15em;
  border-radius: 999px;
  border: 1.5px solid var(--rule-firm);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brown-dim);
  white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}

.tab:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.tab.is-active {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}

/* Print-menu style: groups flow in newspaper columns */
.menu__columns {
  columns: 1;
  column-gap: clamp(2.5rem, 6vw, 5rem);
}

@media (min-width: 780px) {
  .menu__columns {
    columns: 2;
  }
}

.mgroup {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 clamp(2.2rem, 4vw, 3.2rem);
  transition: opacity .3s var(--ease);
}

.mgroup__kicker {
  margin: 0 0 .15rem;
  font-family: var(--f-note);
  font-style: italic;
  font-size: .95rem;
  color: var(--brown-dim);
}

.mgroup__title {
  margin: 0 0 .9rem;
  font-size: clamp(1.05rem, .95rem + .35vw, 1.3rem);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange);
}

.mitem {
  padding: .5rem 0;
  border-bottom: 1px solid var(--rule);
}

.mitem:last-child {
  border-bottom: 0;
}

.mitem__row {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}

.mitem__name {
  font-weight: 600;
}

.mitem__dots {
  flex: 1;
  min-width: 1.5rem;
  height: 1em;
  border-bottom: 1.5px dotted var(--beige);
  transform: translateY(-.28em);
}

.mitem__price {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--orange);
  white-space: nowrap;
}

.mitem__note {
  margin: .1rem 0 0;
  font-family: var(--f-note);
  font-style: italic;
  font-size: .93rem;
  line-height: 1.4;
  color: var(--brown-dim);
  max-width: 48ch;
}

.menu__columns.is-swapping .mgroup {
  opacity: 0;
}

/* ══════════════════════════════════════════════════════════════ gallery ═
   Heading and intro run full width, then three frames sit in one even row.
   Every frame shares the same aspect ratio, so nothing has to stretch to
   match a neighbour — that stretching is what produced the huge dead gaps
   and the crushed, cropped-to-nothing bar photo in the previous layout. */
.gallery__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.gallery__intro {
  max-width: 40ch;
  margin: 0;
  font-family: var(--f-note);
  font-style: italic;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem);
  line-height: 1.45;
  color: var(--brown-dim);
}

.gallery__grid {
  display: grid;
  gap: clamp(.85rem, 2vw, 1.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .gallery__grid {
    grid-template-columns: 1fr 1.3fr 1fr;
    align-items: start;
  }
}

.gallery__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(1.25rem, 3vw, 2rem);
}

.gallery__caption {
  max-width: 34ch;
  margin: 0;
  text-align: right;
  font-family: var(--f-note);
  font-style: italic;
  color: var(--brown-dim);
}

/* Frames: one consistent portrait ratio, so the row reads as one gallery
   strip rather than three unrelated boxes. */
.frame {
  position: relative;
  overflow: hidden;
  background: var(--cream-3);
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
}

.frame video,
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
}

/* the centre panel is the video and leads the row, so it runs a little taller */
@media (min-width: 700px) {
  .frame--tall {
    aspect-ratio: 4 / 5;
  }
}

.frame__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(26, 15, 11, .55));
  pointer-events: none;
}

.frame__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: .9rem 1rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
}

/* Placeholder frames: brand gradient + the logo, so an empty photo slot still
   reads as CITYHIKERS rather than a broken image. To use a real photo:
     <figure class="frame" style="background-image: url('assets/room.jpg')">
   and drop the frame--placeholder class.                                    */
.frame--placeholder {
  background-image: linear-gradient(150deg, var(--cream-3), var(--beige));
}

.frame--placeholder::before {
  content: '';
  position: absolute;
  inset: 12%;
  background: url('assets/logo.svg') no-repeat center / contain;
  opacity: .3;
}

/* ════════════════════════════════════════════════════════════════ visit ═ */
.visit {
  background: var(--cream-3);
}

.visit__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 860px) {
  .visit__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.visit__address {
  display: flex;
  flex-direction: column;
  font-style: normal;
  margin: 1.6rem 0 1.2rem;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.5;
}

.visit__links {
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 0;
}

.visit__links li {
  padding: .45rem 0;
  border-bottom: 1px solid var(--rule);
}

.visit__links a {
  text-decoration: none;
  color: var(--brown-dim);
  transition: color .2s var(--ease);
}

.visit__links a:hover {
  color: var(--orange);
}

.hours {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4rem 0 1.2rem;
}

.hours th,
.hours td {
  padding: .7rem 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}

.hours th {
  color: var(--brown-dim);
  font-weight: 500;
}

.hours td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.visit__note {
  margin: 0 0 1.8rem;
  font-family: var(--f-note);
  font-style: italic;
  color: var(--brown-dim);
}

.map {
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule);
  text-decoration: none;
}

/* Baked from real Tbilisi street geometry (see assets/map.svg) — loaded as an
   <img>, so the pin inside it is static art rather than a CSS animation. */
.map__img {
  width: 100%;
  height: auto;
  transition: transform .5s var(--ease);
}

.map:hover .map__img { transform: scale(1.04); }

.map__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: .7rem 1rem;
  background: var(--orange);
  color: var(--white);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════ footer ═ */
.footer {
  background: var(--brown);
  color: var(--cream);
  padding-block: 2.5rem;
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 2rem;
  justify-content: space-between;
}

.footer__mark {
  font-weight: 800;
  letter-spacing: .12em;
}

.footer__meta {
  font-size: .8rem;
  letter-spacing: .05em;
  color: color-mix(in srgb, var(--cream) 62%, transparent);
}

.noscript-note {
  padding: 1.2rem;
  border: 1.5px solid var(--orange);
  color: var(--orange);
  font-weight: 600;
}

/* ═════════════════════════════════════════════════════════ interactions ═ */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════ mobile ═ */
@media (max-width: 800px) {
  .burger {
    display: flex;
  }

  /* On desktop the wordmark only earns its place once the huge hero name has
     scrolled away. On mobile the nav collapses behind the burger, so without
     it the header is just an empty bar until you scroll — show it from the
     start so there's something to anchor the bar. */
  .wordmark {
    max-width: 16rem;
    margin-right: auto;
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    flex-direction: column;
    gap: 0;
    padding: 1rem var(--gutter) 1.8rem;
    background: var(--cream);
    border-bottom: 1px solid var(--rule);
    transform: translateY(-120%);
    transition: transform .4s var(--ease);
    z-index: 30;
  }

  .nav.is-open {
    transform: none;
  }

  .nav a {
    padding: .9rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: 1rem;
  }

  .nav a::after {
    display: none;
  }

  .burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* taller than the desktop letterbox crop, closer to the source video's
     own portrait shape */
  .hero__frame-media {
    aspect-ratio: 4 / 5;
  }

  .hero__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    margin-top: 1.75rem;
  }

  /* the logo mark reads as an orphan on its own row at this width — the
     wordmark and header already carry the brand mark on mobile */
  .hero__blot {
    display: none;
  }
}

/* Wordmark + language toggle + burger overrun a narrow row at full size */
@media (max-width: 480px) {
  .header-inner {
    gap: .6rem;
  }

  .wordmark {
    gap: .45rem;
  }

  .wordmark__blot {
    width: 26px;
  }

  .wordmark__text {
    font-size: .88rem;
    letter-spacing: .05em;
  }

  .header-actions {
    gap: .5rem;
  }

  .lang-btn {
    padding: .3em .6em;
    font-size: .7rem;
  }
}

/* Georgian sets wider than Latin — ease the tracking back */
html[lang="ka"] .eyebrow,
html[lang="ka"] .tab,
html[lang="ka"] .nav a,
html[lang="ka"] .mgroup__title {
  letter-spacing: .04em;
}

/* ═════════════════════════════════════════════════════════ a11y / print ═ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

@media print {

  .site-header,
  .hero,
  .marquee,
  .gallery,
  .tabs {
    display: none !important;
  }

  body,
  .menu,
  .visit {
    background: #fff !important;
    color: #000 !important;
  }

  .menu__columns {
    columns: 2;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .section {
    padding-block: 1rem;
  }
}