:root {
  --deep: #0b110c;
  --forest: #111d14;
  --moss: #1d2f21;
  --bark: #3a2a1c;
  --tan: #7d5f3d;
  --brass: #b8913c;
  --brass-lt: #d9b566;
  --bone: #e9e4d7;
  --bone-dim: #9a9385;
  --line: #22301f;
  --line-lt: #2f3f2e;
  --display: "Fraunces", "Noto Serif Georgian", Georgia, serif;
  --body: "Karla", "Noto Sans Georgian", sans-serif;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  background: var(--deep);
  color: var(--bone);
  font-family: var(--body);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}
body.reticle-on,
body.reticle-on * {
  cursor: none;
}
::selection {
  background: var(--brass);
  color: var(--deep);
}
img {
  max-width: 100%;
  display: block;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
}
#reticle {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  pointer-events: none;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  opacity: 0;
  transition:
    opacity 0.3s,
    transform 0.12s ease-out;
}
#reticle.live {
  opacity: 1;
}
#reticle.hot {
  transform: scale(1.5);
}

/* ── LOADER ── */
#loader {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--deep);
  display: grid;
  place-items: center;
  transition:
    opacity 0.9s ease,
    visibility 0.9s ease;
}
#loader.gone {
  opacity: 0;
  visibility: hidden;
}
#loader .logo-load {
  width: min(340px, 54vw);
  height: auto;
  display: block;
  margin: 0 auto 30px;
  opacity: 0;
  animation: rise 1.1s 0.15s forwards;
}
#loader .bar {
  width: 180px;
  height: 1px;
  background: #2a2a24;
  margin: 0 auto;
  overflow: hidden;
}
#loader .bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brass);
  animation: fill 1.6s ease-out forwards;
}
@keyframes fill {
  to {
    width: 100%;
  }
}

/* ── HERO COPY ──
   The crest is matched in size to the loader crest, so as the loading screen
   dissolves the crest reads as staying put while the scene resolves behind it.
   Nothing animates until .ready lands — otherwise the reveal plays out of
   sight underneath the loader. */
.hero-copy {
  position: relative;
  z-index: 20;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}
.hero-crest {
  width: min(340px, 54vw);
  height: auto;
  margin-bottom: 36px;
  opacity: 0;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 26px;
  opacity: 0;
}
.hero-copy h1 {
  opacity: 0;
}
.scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bone-dim);
  opacity: 0;
}
body.ready .hero-crest {
  animation: dissolve 0.9s ease forwards;
}
body.ready .eyebrow {
  animation: rise 0.9s 0.55s forwards;
}
body.ready .hero-copy h1 {
  animation: rise 1s 0.75s forwards;
}
body.ready .scroll-hint {
  animation: rise 0.9s 1.5s forwards;
}
@keyframes dissolve {
  to {
    opacity: 1;
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-height: 720px) {
  .hero-crest {
    width: min(250px, 42vw);
    margin-bottom: 22px;
  }
  .eyebrow {
    margin-bottom: 18px;
  }
}

/* ── NAV ── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 40px;
  background: rgba(11, 17, 12, 0.72);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition:
    background 0.4s,
    border-color 0.4s,
    padding 0.4s,
    transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1),
    opacity 0.7s;
}
nav.stuck {
  background: rgba(11, 17, 12, 0.96);
  border-color: var(--line);
  padding: 10px 40px;
}
nav.veiled {
  transform: translateY(-102%);
  opacity: 0;
  pointer-events: none;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--bone);
}
.logo .mark-img {
  height: 36px;
  width: auto;
  flex: none;
  opacity: 0.95;
  transition: opacity 0.3s;
}
.logo:hover .mark-img {
  opacity: 1;
}
.logo-full {
  display: block;
  text-decoration: none;
}
.logo-full img {
  width: 230px;
  height: auto;
  opacity: 0.9;
  transition: opacity 0.3s;
}
.logo-full:hover img {
  opacity: 1;
}
.logo b {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.logo i {
  display: block;
  font-style: normal;
  font-size: 8px;
  letter-spacing: 0.22em;
  color: var(--bone-dim);
  text-transform: uppercase;
  margin-top: 2px;
}
.links {
  display: flex;
  gap: 22px;
  list-style: none;
  align-items: center;
}
.links a {
  color: var(--bone-dim);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  position: relative;
  padding: 6px 0;
  transition: color 0.3s;
  white-space: nowrap;
}
.links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--brass);
  transition: width 0.35s;
}
.links a:hover,
.links a.active {
  color: var(--bone);
}
.links a.active::after,
.links a:hover::after {
  width: 100%;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.lang {
  display: flex;
  border: 1px solid var(--line-lt);
  border-radius: 2px;
  overflow: hidden;
}
.lang button {
  background: none;
  border: 0;
  color: var(--bone-dim);
  font-family: var(--body);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  padding: 6px 10px;
  transition: 0.3s;
}
.lang button.on {
  background: var(--brass);
  color: var(--deep);
}
.burger {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
}
.burger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--bone);
  margin: 5px 0;
  transition: 0.3s;
}

/* ── SHELL ── */
.wrap {
  max-width: 1180px;
  margin: 0 auto;
}
section {
  position: relative;
  padding: 110px 40px;
}
.tag {
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.tag::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--brass);
}
h1 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(27px, 3.4vw, 44px);
  line-height: 1.15;
  margin-bottom: 24px;
}
h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 20px;
  margin-bottom: 10px;
}
p {
  color: var(--bone-dim);
  max-width: 64ch;
}
em {
  font-style: italic;
  color: var(--brass-lt);
}
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.9s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.9s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.alt {
  background: var(--forest);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* page banner (inner pages) */
.banner {
  position: relative;
  padding: 190px 40px 90px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 70% 0%, #1d2f21 0%, transparent 60%),
    var(--forest);
}
.banner .wrap {
  position: relative;
  z-index: 2;
}
.crumb {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-bottom: 20px;
}
.crumb a {
  color: var(--brass);
  text-decoration: none;
}

/* placeholder image */
.ph {
  position: relative;
  background: repeating-linear-gradient(
    45deg,
    #16241a 0 12px,
    #131f16 12px 24px
  );
  border: 1px solid var(--line-lt);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.ph span {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #4e5a4a;
  text-align: center;
  padding: 0 16px;
}
.ph::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid var(--line);
  pointer-events: none;
}

.btn {
  display: inline-block;
  background: var(--brass);
  color: var(--deep);
  border: 0;
  font-family: var(--body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  padding: 16px 42px;
  text-decoration: none;
  transition: 0.35s;
}
.btn:hover {
  background: var(--brass-lt);
}
.btn.ghost {
  background: transparent;
  color: var(--brass);
  border: 1px solid var(--brass);
}
.btn.ghost:hover {
  background: var(--brass);
  color: var(--deep);
}
.note {
  font-size: 12px;
  color: #5d6b57;
  margin-top: 18px;
}

/* ── EVENT CARDS ── */
.evt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 54px;
}
.card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  background: var(--deep);
  transition:
    border-color 0.4s,
    transform 0.5s;
}
.card:hover {
  border-color: var(--brass);
  transform: translateY(-5px);
}
.card .thumb {
  aspect-ratio: 4/3;
}
.card .body {
  padding: 26px 24px 30px;
}
.card .date {
  font-family: var(--display);
  font-size: 12px;
  color: var(--brass-lt);
  letter-spacing: 0.1em;
}
.card h3 {
  margin: 12px 0 8px;
  transition: color 0.3s;
}
.card:hover h3 {
  color: var(--brass-lt);
}
.card p {
  font-size: 14px;
}
.card .foot {
  margin-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #5d6b57;
}
.card .foot .go {
  color: var(--brass);
}
.pill {
  display: inline-block;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--line-lt);
  color: var(--bone-dim);
  padding: 4px 10px;
  border-radius: 2px;
}
.pill.open {
  border-color: var(--brass);
  color: var(--brass);
}

/* ── FORM / DASHBOARD ── */
.panel {
  border: 1px solid var(--line-lt);
  background: var(--forest);
  padding: 44px 42px;
}
.field {
  margin-bottom: 24px;
}
label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-bottom: 9px;
}
input[type="text"],
input[type="tel"],
input[type="email"],
select,
textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-lt);
  color: var(--bone);
  font-family: var(--body);
  font-size: 15px;
  font-weight: 300;
  padding: 11px 0;
  transition: border-color 0.35s;
  border-radius: 0;
}
input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--brass);
}
select option {
  background: var(--forest);
  color: var(--bone);
}
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 6px;
}
.choice > div {
  position: relative;
}
.choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice label {
  border: 1px solid var(--line-lt);
  padding: 22px 20px;
  margin: 0;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bone-dim);
  font-size: 13px;
  transition: 0.35s;
  height: 100%;
}
.choice label b {
  display: block;
  font-family: var(--display);
  font-size: 17px;
  color: var(--bone);
  font-weight: 400;
  margin-bottom: 5px;
}
.choice input:checked + label {
  border-color: var(--brass);
  background: rgba(184, 145, 60, 0.08);
}
.choice input:checked + label b {
  color: var(--brass-lt);
}
.cond {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.55s ease,
    opacity 0.45s,
    margin 0.55s;
}
.cond.open {
  max-height: 320px;
  opacity: 1;
  margin-top: 26px;
}
.steps {
  display: flex;
  gap: 0;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line-lt);
}
.step {
  flex: 1;
  padding: 0 0 14px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #4e5a4a;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
}
.step.on {
  color: var(--brass);
  border-color: var(--brass);
}
.ok {
  display: none;
  text-align: center;
  padding: 30px 0;
}
.ok.show {
  display: block;
}
.ok svg {
  width: 46px;
  height: 46px;
  margin: 0 auto 20px;
}

/* ── MEMBERS ── */
.mem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.mem {
  border: 1px solid var(--line);
  background: var(--deep);
  transition:
    border-color 0.4s,
    transform 0.5s;
}
.mem:hover {
  border-color: var(--brass);
  transform: translateY(-5px);
}
.mem .ph {
  aspect-ratio: 3/4;
}
.mem-body {
  padding: 22px 20px 26px;
}
.mem-body h3 {
  margin: 0 0 8px;
  font-size: 18px;
  transition: color 0.3s;
}
.mem:hover .mem-body h3 {
  color: var(--brass-lt);
}
.mem .role {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.mem p {
  font-size: 13px;
  line-height: 1.6;
}
@media (max-width: 980px) {
  .mem-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .mem-grid {
    grid-template-columns: 1fr;
  }
}

/* ── LAYOUT UTILITIES ──
   These exist so the breakpoints below can reach them. Inline grid styles
   cannot be overridden by a media query, which is why the site did not
   collapse properly on phones. */
.g2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: start;
}
.g2.v-center {
  align-items: center;
}
.g3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.g-event {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: start;
}
.g-contact {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 70px;
  align-items: start;
}
/* hairline grid: the 1px gap IS the divider, so it must survive every breakpoint */
.hair {
  gap: 1px;
  background: var(--line-lt);
  border: 1px solid var(--line-lt);
  margin-top: 44px;
}
.masonry {
  columns: 3;
  column-gap: 16px;
}
.sticky-panel {
  position: sticky;
  top: 100px;
}
.spec-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-lt);
}
.tl-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 30px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line-lt);
}
.stat-row {
  display: flex;
  gap: 44px;
  margin-top: 36px;
  flex-wrap: wrap;
}

/* ── FOOTER ── */
footer {
  background: var(--deep);
  border-top: 1px solid var(--line);
  padding: 70px 40px 30px;
}
.foot {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 50px;
}
.foot h4 {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 16px;
  font-weight: 400;
}
.foot a {
  display: block;
  color: var(--bone-dim);
  text-decoration: none;
  font-size: 14px;
  padding: 5px 0;
  transition: color 0.3s;
}
.foot a:hover {
  color: var(--bone);
}
.copy {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid #1c2a1d;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 11px;
  color: #4e5a4a;
  letter-spacing: 0.1em;
  flex-wrap: wrap;
}

/* ── LANG ──
   Only ever hide the inactive language. Never set display on the visible one:
   that used to override component rules (the mobile menu, flex rows, options)
   and broke layout whenever the language was switched. */
html[lang="ka"] [data-en],
html[lang="en"] [data-ka] {
  display: none !important;
}

@media (max-width: 980px) {
  .evt-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .foot {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 820px) {
  /* ── RESPONSIVE: CONTAINERS ── */
  @media (max-width: 900px) {
    .g2,
    .g3,
    .g-event,
    .g-contact {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .g2.hair,
    .g3.hair {
      gap: 1px;
    } /* keep the hairline dividers */
    .masonry {
      columns: 2;
    }
    .sticky-panel {
      position: static;
    } /* sticky in a single column just jams */
    .spec-row {
      grid-template-columns: 1fr;
      gap: 2px;
      padding: 14px 0;
    }
    .tl-row {
      grid-template-columns: 1fr;
      gap: 6px;
      padding: 20px 0;
    }
    .stat-row {
      gap: 30px;
    }
  }
  @media (max-width: 560px) {
    .masonry {
      columns: 1;
    }
    .hero-crest {
      width: min(240px, 64vw);
    }
    h1 {
      font-size: clamp(30px, 8vw, 44px);
    }
    .stat-row {
      gap: 22px;
    }
  }

  /* Eight menu items in Georgian need room — collapse to the burger earlier. */
  @media (max-width: 1140px) {
    nav {
      padding: 14px 20px;
    }
    .links {
      position: fixed;
      top: 60px;
      left: 0;
      right: 0;
      background: rgba(11, 17, 12, 0.98);
      flex-direction: column;
      gap: 0;
      padding: 0 20px;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.5s;
      border-bottom: 1px solid var(--line);
    }
    .links.open {
      max-height: 520px;
      padding: 14px 20px 24px;
    }
    .links li {
      width: 100%;
      border-bottom: 1px solid var(--line);
    }
    .links a {
      display: block;
      padding: 15px 0;
      font-size: 13px;
    }
    .links a::after {
      display: none;
    }
    .burger {
      display: block;
    }
  }
  @media (max-width: 820px) {
    section {
      padding: 70px 20px;
    }
    .banner {
      padding: 150px 20px 60px;
    }
    .evt-grid,
    .row,
    .choice,
    .foot,
    .panel {
      padding: 30px 22px;
    }
    .logo-full img {
      width: 190px;
    }
  }
}