/* Основа: сброс, роли текста, шапка, меню. Все значения в tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Полоса прокрутки не двигает страницы: у внутренних место под неё оставлено всегда, у главной ширина окна целиком, соты до края */
html:not([data-route="home"]) { scrollbar-gutter: stable; }
.home { width: 100vw; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  letter-spacing: var(--type-body-track);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul { margin: 0; padding: 0; }
h1, h2, h3 { font-family: var(--font-head); }
h1 {
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-lh);
  letter-spacing: var(--type-display-track);
}
h2 {
  font-size: var(--type-title-size);
  font-weight: var(--type-title-weight);
  line-height: var(--type-title-lh);
  letter-spacing: var(--type-title-track);
}
h3 {
  font-size: var(--type-subtitle-size);
  font-weight: var(--type-subtitle-weight);
  line-height: var(--type-subtitle-lh);
  letter-spacing: var(--type-subtitle-track);
}
ul { list-style: none; }
img, svg { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Заголовок получает фокус от смены страницы, с Tab до него не дойти: контур здесь ни о чём не говорит */
h1[tabindex="-1"]:focus-visible { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.logo-mark { width: 100%; height: auto; color: var(--ink); fill: currentColor; }

/* Значок меню: две линии */
.icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--touch); height: var(--touch);
}
.menu-icon { position: relative; display: block; width: var(--icon-w, 30px); height: 10px; }
.menu-icon span {
  position: absolute; left: 0; right: 0; height: 2px; background: var(--ink);
  transition: transform var(--dur-short) var(--ease-short);
}
.menu-icon span:first-child { top: 0; }
.menu-icon span:last-child { bottom: 0; }
.icon-button:hover .menu-icon span:first-child { transform: translateY(-2px); }
.icon-button:hover .menu-icon span:last-child { transform: translateY(2px); }
.menu-icon--x span:first-child, .icon-button:hover .menu-icon--x span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-icon--x span:last-child, .icon-button:hover .menu-icon--x span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Языки: тихо, по кнопке на язык */
.langs { display: flex; }
.langs button {
  min-width: var(--touch); height: var(--touch); padding: 0 6px;
  font-size: var(--type-small-size);
  color: var(--pale);
  transition: color var(--dur-short) var(--ease-short);
}
.langs button:hover { color: var(--ink); }
.langs button[aria-pressed="true"] { color: var(--ink); font-weight: var(--weight-strong); }

/* Шапка внутренних страниц */
.bar {
  display: flex; align-items: center; gap: clamp(8px, 2vw, 24px);
  padding: var(--bar-pad) var(--gut);
  position: relative; z-index: 5;
}
.bar__logo { display: flex; align-items: center; min-height: var(--touch); width: clamp(132px, 14vw, 240px); margin-right: auto; }
.bar .langs { margin-right: clamp(0px, 1vw, 16px); }
/* Страница проекта: шапка меньше и всегда видна над сценой. Нажимается только то, что в ней есть */
html[data-route] .bar.bar--compact {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  padding-block: 0;
  background: linear-gradient(to bottom, rgb(var(--paper-rgb) / .86), rgb(var(--paper-rgb) / 0));
  pointer-events: none;
}
.bar--compact > * { pointer-events: auto; }

/* Меню: белый лист на весь экран */
.menu {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  height: 100dvh;
  padding: var(--bar-pad) var(--gut) var(--space-5);
  background: var(--paper);
  overflow-y: auto;
}
.menu-open, .menu-open body { overflow: hidden; }
.menu__top { display: flex; align-items: center; justify-content: space-between; }
.menu__logo { display: flex; align-items: center; min-height: var(--touch); width: clamp(132px, 14vw, 240px); }
.menu__list {
  flex: 1 0 auto;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(2px, 1vh, 12px);
  padding: clamp(16px, 4vh, 48px) 0;
}
.menu__list a, .menu__group {
  display: flex; align-items: center;
  min-height: var(--touch);
  font-family: var(--font-head);
  font-weight: var(--type-menu-weight);
  font-size: var(--type-menu-size);
  line-height: var(--type-menu-lh);
  letter-spacing: var(--type-menu-track);
  text-decoration: none;
  transition: color var(--dur-short) var(--ease-short);
  animation: menu-in var(--dur-mid) var(--ease-mid) both;
}
.menu__group { color: var(--pale); }
.menu__child { padding-left: var(--space-5); }
.menu__list > :nth-child(2) { animation-delay: calc(var(--dur-short) * .2); }
.menu__list > :nth-child(3) { animation-delay: calc(var(--dur-short) * .4); }
.menu__list > :nth-child(4) { animation-delay: calc(var(--dur-short) * .6); }
@media (hover: hover) {
  .menu__list:hover a:not(:hover) { color: var(--pale); }
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.menu__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.menu__phone {
  font-family: var(--font-head);
  font-size: var(--type-title-size);
  font-weight: var(--type-title-weight);
  letter-spacing: var(--type-title-track);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
  min-height: var(--touch); display: inline-flex; align-items: center;
}

/* Зелёная сота в углу на телефоне: при прокрутке уходит, встала на месте без текста под ней (js/shell.js) */
.phone-cell.phone-cell--corner { width: var(--corner-w); transition: opacity var(--dur-short) var(--ease-short), visibility var(--dur-short) var(--ease-short); }
.phone-cell.phone-cell--corner.is-away { opacity: 0; visibility: hidden; }

/* Простая страница */
.page { padding: var(--space-3) var(--gut) var(--space-8); padding-right: calc(var(--gut) + var(--page-end)); }

/* Кнопка-контур: только контур, заливки нет. Кольцо вырезано правилом evenodd, поэтому фон виден насквозь.
   Множители: при косом крае под углом соты толщина линии по горизонтали больше в 1,155 раза, сдвиг угла 0,577 */
.button-outline {
  --stroke: var(--button-line);
  --button-ring: polygon(evenodd,
    var(--button-cut) 0, calc(100% - var(--button-cut)) 0, 100% 50%, calc(100% - var(--button-cut)) 100%, var(--button-cut) 100%, 0 50%, var(--button-cut) 0,
    calc(var(--button-cut) + var(--stroke) * .577) var(--stroke), calc(var(--stroke) * 1.155) 50%, calc(var(--button-cut) + var(--stroke) * .577) calc(100% - var(--stroke)),
    calc(100% - var(--button-cut) - var(--stroke) * .577) calc(100% - var(--stroke)), calc(100% - var(--stroke) * 1.155) 50%, calc(100% - var(--button-cut) - var(--stroke) * .577) var(--stroke),
    calc(var(--button-cut) + var(--stroke) * .577) var(--stroke));
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--button-h);
  padding-inline: calc(var(--button-cut) + var(--space-3));
  color: var(--ink);
  font-family: var(--font-head);
  font-size: var(--type-subtitle-size);
  font-weight: var(--type-subtitle-weight);
  line-height: var(--type-subtitle-lh);
  letter-spacing: var(--type-subtitle-track);
  text-decoration: none;
  white-space: nowrap;
}
.button-outline::before, .button-outline::after {
  content: ""; position: absolute; inset: 0;
  background: var(--ink);
  clip-path: var(--button-ring);
  pointer-events: none;
}
/* Фокус: второй контур снаружи, обычный outline лёг бы прямоугольником */
.button-outline::after { inset: calc(-1 * var(--space-1)); opacity: 0; }
.button-outline:hover { --stroke: calc(var(--button-line) * 2); }
.button-outline:focus-visible { outline: none; }
.button-outline:focus-visible::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .menu__list a, .menu__group { animation: none; }
  .menu-icon span, .langs button, .menu__list a, .phone-cell.phone-cell--corner { transition: none; }
}

/* Волна сот поверх всего. Высота самая большая: на телефоне панель браузера не откроет край */
body > .cover-wave { z-index: 55; inset: 0 auto auto 0; width: 100vw; height: 100lvh; }
.cover-wave__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* Старая страница поверх новой, пока по ней идёт фронт: непрозрачная, на месте, нажатия мимо */
.is-wave-old { position: fixed; z-index: 54; overflow: hidden; background: var(--paper); pointer-events: none; }
.wave-copy, .wave-copy * { animation: none !important; transition: none !important; }

/* Новая страница не успела за 600 мс: фронт ждёт, внизу дышит маленькая сота */
.nav-wait {
  position: fixed; z-index: 60; left: 50%; bottom: var(--space-6);
  width: var(--space-5); aspect-ratio: 0.866;
  margin-left: calc(var(--space-5) / -2);
  background: var(--t3);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  pointer-events: none;
  animation: nav-wait var(--dur-long) var(--ease-long) infinite alternate;
}
@keyframes nav-wait {
  from { opacity: .35; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-wait { animation: none; }
}