/* ==========================================================================
   Liza Didkowska — portfolio site
   Единственный таблица стилей проекта. Порядок разделов:
   0. Шрифты        1. Токены темы   2. Сброс и база   3. Каркас страницы
   4. Гамбургер и оверлей меню        5. Главная    6. Paintings
   7. Links         8. Contact        9. Подвал     10. Адаптив

   Иконки соцсетей — Simple Icons (лицензия CC0 1.0, https://simpleicons.org),
   конверт у почты нарисован нами. Все встроены как inline <svg> в links.html:
   внешних запросов нет.

   Раздел 8 назван по удалённой странице contact.html, но живой: на его классах
   свёрстан текстовый блок 404.html. Подробности — в самом разделе.
   ========================================================================== */

/* 0. Шрифты --------------------------------------------------------------- */

/* Файлы лежат в репозитории (assets/fonts/), не подключаются из внешнего
   сервиса: свойство «страницы не делают внешних запросов» сохранено.

   Формат .ttf, а не .woff2: в системе нет инструментов конвертации
   (fonttools, woff2_compress). Перевод в .woff2 срежет вес примерно вдвое —
   вынесено в docs/BACKLOG.md.

   Обе гарнитуры поставлены только в начертании Regular (usWeightClass = 400,
   бит bold в macStyle не выставлен). Поэтому font-weight у заголовков — 400:
   при 700 браузер синтезирует псевдожирный, и у декоративного Broadway это
   даёт размытые, неровно утолщённые буквы. */

@font-face {
  font-family: "Broadway";
  src: url("../fonts/broadway-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/century-gothic-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 1. Токены темы ---------------------------------------------------------- */

:root {
  --bg: #ffffff;
  --ink: #0c0082;
  /* Приглушённые тексты — тот же тёмно-синий с прозрачностью, а не отдельный
     серый: так вторичный текст остаётся в одной гамме с основным.
     --ink-dim и --rule заданы через rgba() — в таблице они встречаются только
     в color и border-*, ни в каких склейках значений не участвуют. */
  --ink-dim: rgba(12, 0, 130, 0.65);
  --head: #3a29e1;
  --head-dim: rgba(58, 41, 225, 0.5);
  --rule: rgba(12, 0, 130, 0.25);
  --accent: #e15c2a;

  --font: "Century Gothic", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-head: "Broadway", "Century Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --shell-max: 1080px;
  --shell-pad: clamp(1.25rem, 5vw, 3rem);
  --gap-block: clamp(3rem, 10vh, 7rem);

  --toggle-size: 44px;
  --toggle-inset: clamp(0.75rem, 2.5vw, 1.5rem);
}

/* 2. Сброс и база --------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Блокировка прокрутки, пока открыт оверлей меню.
   <dialog> сам этого не делает — поведение браузеров расходится. */
body.is-menu-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* 3. Каркас страницы ------------------------------------------------------ */

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

.page {
  padding-block: calc(var(--gap-block) * 0.9) var(--gap-block);
  /* Контейнер запросов: cqi = ширина content-box колонки, то есть ровно та
     ширина, которую занимает изображение. От неё считается размер вордмарка. */
  container-type: inline-size;
}

/* Главная: вордмарк поднят к самому верху страницы. Верхний отступ задан не
   «на глаз», а коробкой закреплённой кнопки-гамбургера (position: fixed):
   отбивка от края плюс её высота. Так надпись начинается ровно под кнопкой и
   не может под неё заехать ни на какой ширине.

   Собственный margin у .wordmark при этом не обнуляется — он добавляет
   просвет под кнопкой и нужен в запасном варианте, без контейнерных запросов. */
.page--home {
  padding-block-start: calc(var(--toggle-inset) + var(--toggle-size));
}

.wordmark {
  margin: clamp(1rem, 3vh, 1.5rem) 0 0;

  /* Запасной вариант для браузеров без контейнерных запросов: прежнее
     поведение. Нижняя граница clamp намеренно мелкая — при 2.4rem слово
     «LIZA DIDKOWSKA» не влезало в 375 px и распирало документ.
     Проверено на делителе 9.303: при 320/375/414 px строка занимает
     261/300/331 px из 280/335/373 px доступной колонки. */
  font-size: clamp(1.75rem, 8.6vw, 6.5rem);

  /* Размер выводится из ширины колонки, а не наоборот: тогда надпись садится
     ровно в края изображения. 9.303 — ширина ТУШИ «LIZA DIDKOWSKA» на 1 em
     кегля при letter-spacing: 0.01em, ИЗМЕРЕННАЯ ТАК, КАК СТРОКУ РИСУЕТ
     БРАУЗЕР, то есть С КЕРНИНГОМ: у broadway-regular.ttf есть таблица kern,
     и Chrome её применяет. Кернящихся пар три — «KO», «OW», «WS», вместе они
     снимают 0.098 em. Без их учёта надпись недотягивала бы до краёв колонки
     примерно 1% (около 5 px на сторону при широкой колонке).

     Замер 2026-08-08 (вторая итерация): при перестановке слов
     «DIDKOWSKA LIZA» → «LIZA DIDKOWSKA» все три числа СОВПАЛИ до пятого
     знака — 9.30236 туши, 0.05664 слева, 0.00270 справа. Причина: буквы те же,
     «D» и «L» имеют одинаковую левую отбивку, последняя буква по-прежнему «A»,
     а все кернящиеся пары лежат внутри нетронутого куска «DIDKOWSKA» — пары со
     пробелом («A␣», «␣L», «␣D») в таблице kern отсутствуют. Это ВЫВОД ИЗ
     ЗАМЕРА, а не допущение: перестановка слов сама по себе безопасной не
     является, проверять нужно каждый раз.

     Прежнее значение 8.824 для «DIDKIVSKA LIZA» было посчитано ПО hmtx, без
     кернинга; для той строки кернинг составлял всего 0.022 em, и промах в
     0.25% оставался незаметен.

     Константа привязана к КОНКРЕТНОЙ строке букв, а не только к гарнитуре:
     меняется надпись или шрифт — пересчитывать, см. docs/GOTCHAS.md. */
  font-size: calc(100cqi / 9.303);

  /* Гашение боковых отбивок: слева «L» отступает на 0.057 em, справа «A»
     свисает за свой advance на 0.003 em. Без этого в края колонки попадала бы
     рамка строки, а не сами буквы. */
  margin-inline: -0.057em 0.003em;
  white-space: nowrap;

  font-family: var(--font-head);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: var(--head);
  text-transform: uppercase;
  /* По центру, а не по левому краю: если Broadway не загрузится, подменная
     Century Gothic уже 7.25 em, и недобор разложится поровну на обе стороны. */
  text-align: center;
}

.page-title {
  margin: 0 0 clamp(2rem, 6vh, 3.5rem);
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--head);
  text-transform: uppercase;
}

/* 4. Гамбургер и оверлей меню --------------------------------------------- */

.menu-toggle {
  position: fixed;
  top: var(--toggle-inset);
  right: var(--toggle-inset);
  left: auto;
  z-index: 10;
  display: grid;
  place-items: center;
  width: var(--toggle-size);
  height: var(--toggle-size);
  padding: 0;
  border: 0;
  background: none;
  /* Кнопка управляет меню, поэтому берёт цвет меню, а не основного текста. */
  color: var(--head);
  cursor: pointer;
}

.menu-toggle:hover {
  color: var(--accent);
}

/* Пока панель открыта, гамбургер прячется — иначе он просвечивает СКВОЗЬ
   подложку и наслаивается на крестик: модальный <dialog> лежит в top layer,
   куда z-index кнопки не достаёт, а подложка намеренно полупрозрачная.
   На экране получался клубок из трёх полосок и креста.

   ЗАВИСИМОСТЬ: syncClosedState() в assets/js/menu.js снимает класс с body
   ДО вызова toggle.focus(). Поменяется порядок — focus() придёт на скрытый
   элемент и фокус провалится на <body>. */
body.is-menu-open [data-menu-toggle] {
  visibility: hidden;
}

/* Три полоски: центральная — сам span, крайние — псевдоэлементы. */
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  display: block;
  width: 26px;
  height: 2px;
  background: currentColor;
}

.menu-toggle__bars {
  position: relative;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-toggle__bars::before {
  top: -8px;
}

.menu-toggle__bars::after {
  top: 8px;
}

/* Крестик закрытия — тот же span, две полоски крест-накрест. */
.menu-toggle__cross {
  position: relative;
  display: block;
  width: 26px;
  height: 26px;
}

.menu-toggle__cross::before,
.menu-toggle__cross::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 26px;
  height: 2px;
  background: currentColor;
}

.menu-toggle__cross::before {
  transform: rotate(45deg);
}

.menu-toggle__cross::after {
  transform: rotate(-45deg);
}

/* Обнуление стилей UA для <dialog>: по умолчанию это узкий центрированный
   блок с рамкой, отступами и margin: auto. Нам нужна небольшая панель,
   привязанная к кнопке-гамбургеру в правом верхнем углу.

   Собственный padding у диалога остаётся нулевым: отступы панели заданы на
   .site-menu__nav. Так клик в отступ попадает внутрь прямоугольника панели —
   это важно для закрытия по клику мимо панели, см. assets/js/menu.js. */
.site-menu,
.site-menu[open] {
  position: fixed;
  top: calc(var(--toggle-inset) + var(--toggle-size) + 0.5rem);
  right: var(--toggle-inset);
  left: auto;
  bottom: auto;
  width: min(16rem, calc(100vw - 2 * var(--toggle-inset)));
  height: auto;
  max-width: none;
  /* Низкие экраны и альбомная ориентация: панель не вылезает за нижний край,
     остаток уходит в прокрутку внутри самой панели. */
  max-height: calc(100vh - 2 * var(--toggle-inset) - var(--toggle-size) - 0.5rem);
  margin: 0;
  padding: 0;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--ink);
  overflow: auto;
}

/* Фокус при открытии уводится на саму панель (dialog.focus() в menu.js), а не
   на крестик — иначе :focus-visible рисует оранжевую рамку вокруг кнопки,
   которую никто не нажимал. Своей рамки контейнеру не нужно: он не орган
   управления. По Tab фокус идёт на крестик и пункты меню, и там рамка есть. */
.site-menu:focus,
.site-menu:focus-visible {
  outline: none;
}

/* Подложка полупрозрачная: страница под панелью должна просвечивать.
   На белом фоне чёрная вуаль читается как сбой, поэтому берётся тёмно-синий
   из основного текста и малая непрозрачность: белая панель отделяется от
   белой страницы, но страница остаётся видимой. */
.site-menu::backdrop {
  background: rgba(12, 0, 130, 0.18);
}

.site-menu[open] {
  display: block;
}

.site-menu__nav {
  padding: 1rem 1.25rem;
}

.site-menu__nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.site-menu__nav li + li {
  margin-top: clamp(0.35rem, 1.5vh, 0.75rem);
}

.site-menu__nav a {
  display: inline-block;
  font-family: var(--font-head);
  font-size: clamp(1.1rem, 3.5vw, 1.35rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.005em;
  color: var(--head);
}

.site-menu__nav a:hover {
  color: var(--accent);
}

/* Текущая страница — приглушена, кликать некуда. Приглушается именно цвет
   заголовков, а не основного текста: иначе пункт выпал бы из гаммы меню. */
.site-menu__nav a[aria-current="page"] {
  color: var(--head-dim);
}

/* 5. Главная -------------------------------------------------------------- */

/* Ширина не ограничивается мерой строки: блок занимает всю колонку, чтобы его
   края совпадали с краями вордмарка и изображения. Строка получается длинной —
   это осознанное решение владельца от 2026-08-05. */
/* Полный межблочный отступ: с 2026-08-08 биография идёт ПОД подписью к снимку,
   и меньший отступ склеивал бы её с подписью в один блок текста. */
.intro {
  max-width: none;
  margin: var(--gap-block) 0 0;
}

.intro p {
  margin: 0;
}

.intro__lead + .intro__quote {
  margin-top: 1.5rem;
}

/* Без вертикальной линейки и отступа слева: цитата должна начинаться на той же
   вертикали, что и остальной текст, вордмарк и изображение. Отличают её только
   курсив и приглушённый цвет. */
.intro__quote {
  margin: 1.5rem 0 0;
  color: var(--ink-dim);
  font-style: italic;
}

.intro__quote p {
  margin: 0;
}

/* Снимок идёт сразу за вордмарком, поэтому отступ уменьшенный: цель правки от
   2026-08-08 — поднять надпись к самому верху, а большой зазор под ней эту
   цель бы отменил. Класс встречается только в index.html.

   Средний член — vw, а не vh (правка 2026-08-08, вторая итерация). На vh
   телефон и десктоп давали одно и то же (около 56 px): при любой разумной
   высоте экрана 7vh перебивало верхнюю границу, и она решала всё. По ширине
   зазор наконец различает устройства: 28 px до 400 px ширины, 29 px на 414,
   54 px на 768 и 56 px на десктопе. */
.composition {
  margin: clamp(1.75rem, 7vw, 3.5rem) 0 0;
}

.caption {
  margin-top: 1.25rem;
  color: var(--ink-dim);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.caption span {
  display: block;
}

.caption__title {
  color: var(--ink);
}

/* 6. Paintings ------------------------------------------------------------ */

.stream {
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
  margin: 0;
}

.stream figure {
  margin: 0;
}

/* 7. Links ---------------------------------------------------------------- */

/* Список прижат к левому краю колонки (решение владельца от 2026-08-05, отмена
   центрирования, сделанного в тот же день ранее). margin: 0, а не
   margin-inline: 0 — в разделе «Сброс и база» нет правила ul { margin: 0 }, и
   это единственное место, где гасится вертикальный отступ UA у списка. */
.links {
  max-width: 34rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.links li + li {
  margin-top: clamp(1.25rem, 4vh, 2.25rem);
}

.links__link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.35rem 0;
}

.links__link:hover {
  color: var(--accent);
}

.links__icon {
  flex: none;
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.links__text {
  display: block;
  font-size: clamp(1rem, 2.6vw, 1.25rem);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* 8. Contact -------------------------------------------------------------- */

/* ⛔ НЕ УДАЛЯТЬ вместе со страницей. Страница contact.html удалена 2026-08-08,
   но классы .contact и .contact__line остались в работе: на них свёрстан
   текстовый блок 404.html («Back to the home page»). Секция выглядит мёртвым
   кодом, но мёртвой не является. */
.contact {
  max-width: 62ch;
}

.contact p {
  margin: 0 0 1.5rem;
}

.contact__line {
  font-size: clamp(1.125rem, 3vw, 1.5rem);
}

.contact a {
  border-bottom: 1px solid var(--rule);
}

.contact a:hover {
  color: var(--accent);
  border-bottom-color: currentColor;
}

/* 9. Подвал --------------------------------------------------------------- */

.site-footer {
  padding-block: clamp(2rem, 6vh, 3.5rem);
  color: var(--ink-dim);
  font-size: 0.875rem;
}

.site-footer p {
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

/* 10. Адаптив ------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .site-menu[open] {
    animation: menu-fade 0.25s ease-out;
  }

  @keyframes menu-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}