@charset "UTF-8";
/* Interaction ownership is independent of scene opacity. Keep the v59 geometry. */
[inert],
[inert] * {
  pointer-events: none !important;
}
a {
  text-decoration: none;
  color: inherit;
}
.logo-link {
  display: block;
  pointer-events: auto;
}
.project-cta,
.event-card,
.discussion-remind,
.cycle-calendar-action,
.material-slide-copy,
.m-material-copy {
  pointer-events: auto;
}
.topbar-nav a {
  position: relative;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.15s ease,
    transform 0.15s ease;
}
.topbar-nav a:hover,
.topbar-nav a:focus-visible {
  color: #58b489;
  transform: translateY(-1px);
}
.topbar-nav a::after {
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 1px;
  background: #58b489;
  content: "";
  opacity: 0;
  transform: scaleX(0.4);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}
.topbar-nav a:hover::after,
.topbar-nav a:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid #70d3a4;
  outline-offset: 4px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Text that used to be a paragraph keeps its existing typography as a link. */
a.material-slide-copy {
  display: block;
  margin: 0;
}
a.m-material-copy {
  display: block;
}
/* Kazakh and Kyrgyz keep the Cyrillic "Орфан" wordmark as-is. */
html:is([lang="en"], [lang="uz"], [lang="az"]) .brand::before {
  content: "Orphan";
}
html:not([lang="ru"]) .title {
  font-size: 58px;
}
html:not([lang="ru"]) .subtitle {
  font-size: 68px;
  translate: 0 -10px;
  /* Extend the gradient paint box below the descenders in g, p and y. */
  padding-bottom: 0.2em;
}
/* The centred .topbar-nav is wide enough to overlap the language pill on the
   left at tablet widths — most visible on an iPad in landscape. Compact it
   for every language, not just the longest one. */
@media (min-width: 1024px) and (max-width: 1240px) {
  .topbar-nav {
    gap: 10px;
    font-size: 13px;
  }
  .pill-language,
  .pill-watch {
    height: 38px;
    font-size: 13px;
  }
  .pill-language {
    padding: 0 12px;
    gap: 8px;
    min-width: 98px;
  }
  .pill-watch {
    padding: 0 14px;
    gap: 4px;
  }
  .pill-language img,
  .pill-watch img {
    width: 20px;
    height: 20px;
  }
}
/* Azerbaijani has both the longest nav labels and the longest language name
   ("Azərbaycanca"), so the shared tablet compaction above still isn't
   enough — it still overlaps the language pill, and keeps overlapping well
   past 1240px where every other locale is already safe at full size
   (measured clear up to ~1420px). Compact it further for this locale only,
   over a wider range, so the other five keep the larger, more readable
   sizing at 1241px+. */
@media (min-width: 1024px) and (max-width: 1420px) {
  html[lang="az"] .topbar-nav {
    gap: 7px;
    font-size: 11px;
  }
  html[lang="az"] .pill-language {
    padding: 0 10px;
    gap: 6px;
    min-width: 0;
    font-size: 12px;
  }
}
/* Even compacted, the five nav items don't fit next to the language pill
   and "Watch" button below ~900px (e.g. an iPad in portrait) — the site
   used to just hide the nav there with no fallback. Collapse it into a
   burger-triggered dropdown instead, matching the mobile menu's pattern. */
.topbar-nav-collapsed {
  display: none;
}
@media (min-width: 641px) and (max-width: 1023px) {
  .topbar-nav {
    display: none;
  }
  .topbar-nav-collapsed {
    position: relative;
    display: block;
    pointer-events: auto;
  }
  .topbar-nav-toggle {
    display: grid;
    width: 40px;
    height: 40px;
    padding: 9px;
    place-content: center;
    gap: 5px;
    border: 1px solid #fff;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
  }
  .topbar-nav-toggle span {
    display: block;
    width: 20px;
    height: 1px;
    background: #fff;
  }
  .topbar-nav-menu {
    position: absolute;
    left: 0;
    top: 50px;
    z-index: 25;
    display: flex;
    flex-direction: column;
    width: 220px;
    margin: 0;
    padding: 8px;
    border: 1px solid #346f42;
    border-radius: 12px;
    background: rgba(1, 11, 3, 0.96);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
      opacity 0.18s ease,
      transform 0.18s ease,
      visibility 0.18s;
  }
  .topbar-nav-collapsed.is-open .topbar-nav-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .topbar-nav-menu a {
    padding: 10px 14px;
    border-radius: 8px;
    color: #fff;
    font: 300 15px/1.2 Inter, Arial, sans-serif;
  }
  .topbar-nav-menu a:hover,
  .topbar-nav-menu a:focus-visible {
    background: rgba(46, 162, 106, 0.22);
  }
}
/* Preserve the logo's original image box after wrapping it in a home link. */
@media (min-width:641px) { .logo-link .menu-logo { height:46px; } }
@media (max-width:640px) { .mobile-app a.m-chip { font-size:15px; line-height:24px; } }
/* "Дискуссионный клуб" is the longest of the six locale headings in the
   discussion-club hero and wraps to two lines on narrow phones, colliding
   with the "Онлайн" badge's fixed offset from the hero's bottom edge. Move
   the badge up so it clears the taller two-line heading, matching the gap
   the shorter single-line headings already get in the other locales. */
@media (max-width: 640px) {
  html[lang="ru"] .m-online {
    bottom: 114px;
  }
}

/* Keep both project columns on one shared vertical centre. The slides share
   a grid cell so their largest content reserves room above the controls. */
@media (min-width: 641px) {
  .third-project,
  .third-slider {
    top: 54%;
    transform: translateY(-50%);
  }
  .third-slider {
    display: grid;
    height: auto;
  }
  .third-slider .third-slide {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
  }
  .third-slider .slider-arrows {
    position: relative;
    left: auto;
    top: auto;
    grid-area: 2 / 1;
    margin-top: 32px;
  }
  html:is([lang="en"], [lang="uz"], [lang="az"]) .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    width: max-content;
  }
  html:is([lang="en"], [lang="uz"], [lang="az"]) .brand::before {
    position: static;
  }
  html:is([lang="en"], [lang="uz"], [lang="az"]) .brand-tv {
    position: relative;
    right: auto;
    top: auto;
    flex-shrink: 0;
  }
}