/* Generated by scripts/build-css.php from assets/css/main.sources.css. */
/*
  Исходный список стилей. Команда сборки объединяет их в main.css.
  Порядок импорта строгий: vars → fonts → reset → base → blocks → sections → utils.
  Утилиты идут последними, чтобы перебивать блоки.
*/

/* Base */
/* source: base/vars.css */
/*
  Токены дизайн-системы.
  Источник значений — .docs/design/system/variables.json и .docs/design/direction.md.
  Сырые значения цветов, размеров и отступов вне этого файла не используются.
*/

:root {
  /* Цвета — основные роли */
  --color-primary: #111111;
  --color-secondary: #f6f1ee;
  --color-accent: #111111;
  --color-accent-hover: #3a3a3a;
  --color-bg: #ffffff;
  --color-surface: #faf8f6;
  --color-text: #1a1a1a;
  --color-text-secondary: #4a4a4a;
  --color-text-muted: #6b6b6b;
  --color-text-inverse: #ffffff;
  --color-border: #e5e0dc;
  --color-border-light: #efeae6;
  --color-border-strong: #cfc8c2;
  --color-danger: #a33a2b;
  --color-success: #3f6b4e;

  /* Цвета — тёплый второй акцент (подложки, отношение автора) */
  --color-warm: #6b5a4e;
  --color-warm-hover: #4f4238;
  --color-warm-light: #efe7e1;

  /* Цвета — семантика */
  --color-success-bg: #edf3ee;
  --color-warning: #8a5a12;
  --color-warning-bg: #fbf4e6;
  --color-danger-bg: #faeeec;
  --color-info: #3f5a73;
  --color-info-bg: #edf1f5;

  /* Цвета — тёмная поверхность (первый экран, лайтбокс) */
  --color-dark-bg: #111111;
  --color-dark-surface: #1c1c1c;
  --color-dark-raised: #262626;
  --color-dark-text: #ffffff;
  --color-dark-text-secondary: #cfcfcf;
  --color-dark-text-muted: #a8a8a8;
  --color-dark-border: #3a3a3a;
  --color-overlay: rgba(17, 17, 17, 0.72);

  /* Цвета — типы материалов и статус публикации */
  --color-material-photo: #4a4a4a;
  --color-material-photo-bg: #f6f1ee;
  --color-material-publication: #3f5a73;
  --color-material-publication-bg: #edf1f5;
  --color-material-memory: #6b5a4e;
  --color-material-memory-bg: #efe7e1;
  --color-material-document: #1a1a1a;
  --color-material-document-bg: #ffffff;
  --color-status-published: #3f6b4e;
  --color-status-published-bg: #edf3ee;
  --color-status-draft: #6b6b6b;
  --color-status-draft-bg: #f2f2f2;

  /* Типографика — семейства */
  --font-heading: "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-body: "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-reading: "PT Serif", Georgia, "Times New Roman", serif;
  --font-accent: "Playfair Display", Georgia, "Times New Roman", serif;

  /* Типографика — шкала */
  --text-xs: 0.875rem;
  --text-sm: 1rem;
  --text-base: 1.125rem;
  --text-md: 1.375rem;
  --text-lg: 1.75rem;
  --text-xl: 2.25rem;
  --text-2xl: 3rem;
  --text-3xl: 4rem;
  --text-4xl: 6rem;

  --leading-tight: 1.05;
  --leading-heading: 1.2;
  --leading-snug: 1.45;
  --leading-base: 1.6;
  --leading-reading: 1.75;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;

  --measure: 70ch;
  --measure-lead: 60ch;

  /* Отступы */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Радиусы: в проекте прямые углы, круг — только аватар */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 999px;
  --radius-button: 0;
  --radius-card: 0;
  --radius-badge: 0;
  --radius-input: 0;
  --radius-image: 0;

  /* Тени: только для всплывающих слоёв */
  --shadow-xs: 0 1px 2px rgba(17, 17, 17, 0.05);
  --shadow-sm: 0 2px 6px rgba(17, 17, 17, 0.06);
  --shadow-md: 0 8px 24px rgba(17, 17, 17, 0.1);
  --shadow-lg: 0 16px 40px rgba(17, 17, 17, 0.14);
  --shadow-xl: 0 24px 60px rgba(17, 17, 17, 0.18);
  --shadow-card: none;

  /* Переходы */
  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;
  --transition-slow: 280ms ease;

  /* Слои */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;

  /* Раскладка */
  --container-max: 1440px;
  --container-narrow: 840px;
  --container-padding: 24px;
  --header-height: 88px;
  --admin-sidebar-width: 260px;
  --admin-sidebar-collapsed: 72px;
  --admin-drawer-width: min(300px, 85vw);
  --control-height: 48px;
  --control-height-sm: 40px;
  --control-height-lg: 56px;
  --border-width: 1px;
  --icon-stroke: 1.5;
}

/* source: base/fonts.css */
/*
  Локальные шрифты (OFL): Montserrat, PT Serif, Playfair Display.
  Файлы — assets/fonts/, подмножества кириллица и латиница. CDN не используется.
  Montserrat — вариативный: один файл покрывает веса 300–500.
*/

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/montserrat-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/pt-serif-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/pt-serif-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "PT Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/pt-serif-400-italic-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "PT Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/pt-serif-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/pt-serif-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/pt-serif-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/playfair-display-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/playfair-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/playfair-display-italic-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/playfair-display-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* source: base/reset.css */
/* Сброс браузерных стилей */

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

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

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  padding: 0;
  list-style: none;
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
}

dialog {
  padding: 0;
  border: 0;
  color: inherit;
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* source: base/base.css */
/* Базовые стили документа и типографики */

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-light);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

h1 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);

  @media (max-width: 1024px) {
    font-size: var(--text-2xl);
  }

  @media (max-width: 768px) {
    font-size: var(--text-xl);
  }
}

h2 {
  font-size: var(--text-xl);

  @media (max-width: 768px) {
    font-size: var(--text-lg);
  }
}

h3 {
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
}

h4 {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}

h5 {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
}

h6 {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
}

p {
  max-width: var(--measure);
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);

  &:hover {
    text-decoration-color: transparent;
  }
}

strong,
b {
  font-weight: var(--weight-medium);
}

small {
  font-size: var(--text-xs);
}

blockquote {
  font-family: var(--font-accent);
  font-style: italic;
}

code,
kbd {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.9em;
}

mark {
  background-color: var(--color-secondary);
  color: inherit;
  padding: 0 0.15em;
}

hr {
  border: 0;
  border-top: var(--border-width) solid var(--color-border);
  margin: var(--space-8) 0;
}

img {
  height: auto;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

::selection {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}


/* Blocks — общие элементы */
/* source: blocks/icon.css */
/* Иконки из локального SVG-спрайта: assets/img/icons/sprite.svg */

.icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--xs {
  width: 16px;
  height: 16px;
}

.icon--sm {
  width: 20px;
  height: 20px;
}

.icon--md {
  width: 24px;
  height: 24px;
}

.icon--lg {
  width: 32px;
  height: 32px;
}

.icon--xl {
  width: 48px;
  height: 48px;
  stroke-width: 1.25;
}

/* source: blocks/button.css */
/* Кнопки: прямоугольные, текст в верхнем регистре */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: 0 var(--space-6);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-primary);
  background-color: transparent;
  border: var(--border-width) solid var(--color-primary);
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);

  /* На самых узких экранах длинная подпись переносится, а не выталкивает кнопку за край */
  @media (max-width: 380px) {
    white-space: normal;
    text-align: center;
  }

  &:hover {
    background-color: var(--color-secondary);
  }

  &:active {
    background-color: var(--color-border);
  }

  &:disabled,
  &[aria-disabled="true"] {
    color: var(--color-text-muted);
    border-color: var(--color-border);
    background-color: transparent;
    cursor: not-allowed;
  }
}

.button__icon {
  width: 18px;
  height: 18px;
}

.button--primary {
  color: var(--color-text-inverse);
  background-color: var(--color-primary);

  &:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
  }

  &:active {
    background-color: var(--color-primary);
  }

  &:disabled,
  &[aria-disabled="true"] {
    color: var(--color-text-muted);
    background-color: var(--color-border-light);
    border-color: var(--color-border-light);
  }
}

.button--secondary {
  color: var(--color-primary);
}

.button--ghost {
  color: var(--color-text-secondary);
  border-color: var(--color-border);

  &:hover {
    background-color: var(--color-surface);
    border-color: var(--color-border-strong);
  }
}

.button--danger {
  color: var(--color-text-inverse);
  background-color: var(--color-danger);
  border-color: var(--color-danger);

  &:hover {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    opacity: 0.88;
  }
}

.button--link {
  min-height: auto;
  padding: 0;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 0.25em;

  &:hover {
    background-color: transparent;
    text-decoration-color: transparent;
  }

  &:active {
    background-color: transparent;
  }
}

.button--small {
  min-height: var(--control-height-sm);
  padding: 0 var(--space-4);
  font-size: var(--text-xs);

  & .button__icon {
    width: 16px;
    height: 16px;
  }
}

.button--large {
  min-height: var(--control-height-lg);
  padding: 0 var(--space-8);
  font-size: var(--text-base);

  & .button__icon {
    width: 20px;
    height: 20px;
  }
}

.button--full {
  display: flex;
  width: 100%;
}

.button--icon-only {
  width: var(--control-height);
  padding: 0;

  &.button--small {
    width: var(--control-height-sm);
  }

  &.button--large {
    width: var(--control-height-lg);
  }
}

.button--on-dark {
  color: var(--color-dark-text);
  border-color: var(--color-dark-text);

  &:hover {
    color: var(--color-dark-bg);
    background-color: var(--color-dark-text);
  }
}

.button.is-hover {
  background-color: var(--color-secondary);
}

.button--primary.is-hover {
  background-color: var(--color-accent-hover);
}

.button.is-focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.button.is-active {
  background-color: var(--color-border);
}

.button--primary.is-active {
  background-color: var(--color-dark-raised);
  border-color: var(--color-dark-raised);
}

.button.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;

  &::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-border-strong);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-full);
    animation: button-spin 800ms linear infinite;
  }
}

.button--primary.is-loading::after {
  border-color: var(--color-dark-text-muted);
  border-top-color: var(--color-dark-text);
}

@keyframes button-spin {
  to {
    transform: rotate(360deg);
  }
}

/* source: blocks/input.css */
/* Поля ввода, select, чекбоксы, радио, переключатель, диапазоны */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.field__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text);
}

.field__required {
  color: var(--color-danger);
}

.field__hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.field__error {
  font-size: var(--text-xs);
  color: var(--color-danger);
}

.field__success {
  font-size: var(--text-xs);
  color: var(--color-success);
}

.input {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-input);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);

  &::placeholder {
    color: var(--color-text-muted);
  }

  &:hover {
    border-color: var(--color-text-muted);
  }

  &:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
  }

  &:disabled {
    color: var(--color-text-muted);
    background-color: var(--color-surface);
    border-color: var(--color-border);
    cursor: not-allowed;
  }

  &:read-only:not(:disabled) {
    background-color: var(--color-surface);
  }

  &[type="number"] {
    font-variant-numeric: tabular-nums;
  }
}

.input--textarea {
  min-height: 160px;
  padding: var(--space-3) var(--space-4);
  resize: vertical;
  line-height: var(--leading-base);
}

.input--error {
  border-color: var(--color-danger);

  &:focus-visible {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 1px var(--color-danger);
  }
}

.input--success {
  border-color: var(--color-success);
}

.input.is-hover {
  border-color: var(--color-text-muted);
}

.input.is-focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.input-group {
  position: relative;
  display: flex;
}

.input-group .input {
  padding-right: calc(var(--control-height) + var(--space-2));
}

.input-group__action {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height);
  height: 100%;
  color: var(--color-text-muted);

  &:hover {
    color: var(--color-primary);
  }
}

.select {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-2) calc(var(--space-4) * 2.5) var(--space-2) var(--space-4);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-input);
  appearance: none;
  cursor: pointer;

  &:hover {
    border-color: var(--color-text-muted);
  }

  &:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
  }

  &:disabled {
    color: var(--color-text-muted);
    background-color: var(--color-surface);
    cursor: not-allowed;
  }
}

.search-suggest {
  position: relative;
}

.search-suggest__icon {
  position: absolute;
  top: 50%;
  left: var(--space-4);
  color: var(--color-text-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.search-suggest .input {
  padding-left: calc(var(--space-4) + 28px);
}

.search-suggest__list {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  margin: 0;
  padding: var(--space-2) 0;
  list-style: none;
  background-color: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  box-shadow: var(--shadow-md);
}

.search-suggest__item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  text-align: left;

  &:hover,
  &.is-active {
    background-color: var(--color-secondary);
  }
}

.search-suggest__meta {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  cursor: pointer;
}

.check__control {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0.15em 0 0;
  background-color: var(--color-bg);
  border: var(--border-width) solid var(--color-text-muted);
  appearance: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);

  &:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
  }

  &[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 6px;
    width: 6px;
    height: 10px;
    border: solid var(--color-text-inverse);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  &[type="radio"] {
    border-radius: var(--radius-full);

    &:checked {
      background-color: var(--color-bg);
      box-shadow: inset 0 0 0 5px var(--color-primary);
    }
  }

  &:disabled {
    border-color: var(--color-border);
    background-color: var(--color-surface);
    cursor: not-allowed;
  }
}

.check--disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  cursor: pointer;
}

.toggle__control {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  margin: 0;
  background-color: var(--color-border-strong);
  border-radius: var(--radius-full);
  appearance: none;
  cursor: pointer;
  transition: background-color var(--transition-base);

  &::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background-color: var(--color-bg);
    border-radius: var(--radius-full);
    transition: transform var(--transition-base);
  }

  &:checked {
    background-color: var(--color-primary);

    &::after {
      transform: translateX(20px);
    }
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

.range {
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;

  &::-webkit-slider-runnable-track {
    height: 2px;
    background-color: var(--color-border-strong);
  }

  &::-moz-range-track {
    height: 2px;
    background-color: var(--color-border-strong);
  }

  &::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    margin-top: -9px;
    background-color: var(--color-primary);
    border: 3px solid var(--color-bg);
    border-radius: var(--radius-full);
    box-shadow: 0 0 0 1px var(--color-primary);
    appearance: none;
  }

  &::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background-color: var(--color-primary);
    border: 3px solid var(--color-bg);
    border-radius: var(--radius-full);
    box-shadow: 0 0 0 1px var(--color-primary);
  }
}

.range-double {
  display: grid;
  gap: var(--space-2);
}

.range-double__track {
  position: relative;
  height: 24px;

  & .range {
    position: absolute;
    inset: 0;
    pointer-events: none;

    &::-webkit-slider-thumb {
      pointer-events: auto;
    }

    &::-moz-range-thumb {
      pointer-events: auto;
    }
  }

  & .range + .range::-webkit-slider-runnable-track {
    background: transparent;
  }

  & .range + .range::-moz-range-track {
    background: transparent;
  }
}

.range-double__values {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-accent);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
}

.range-output {
  font-family: var(--font-accent);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
}

/* source: blocks/form.css */
/* Формы и специальные элементы форм */

.form {
  display: grid;
  gap: var(--space-6);
  max-width: 640px;
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.form__fieldset {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  border: 0;
}

.form__legend {
  margin-bottom: var(--space-2);
  padding: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.form__error-banner {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-danger);
  background-color: var(--color-danger-bg);
  border-left: 2px solid var(--color-danger);
}

.tags-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: var(--space-2);
  background-color: var(--color-bg);
  border: var(--border-width) solid var(--color-border-strong);

  &:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
  }
}

.tags-input__field {
  flex: 1 1 160px;
  min-width: 120px;
  min-height: 32px;
  padding: 0 var(--space-2);
  font-size: var(--text-base);
  border: 0;
  background: transparent;

  &:focus-visible {
    outline: none;
  }
}

.counter {
  display: inline-flex;
  align-items: stretch;
  border: var(--border-width) solid var(--color-border-strong);
}

.counter__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height);
  height: var(--control-height);
  color: var(--color-text);
  transition: background-color var(--transition-fast);

  &:hover {
    background-color: var(--color-surface);
  }

  &:disabled {
    color: var(--color-border-strong);
    background-color: transparent;
    cursor: not-allowed;
  }
}

.counter__value {
  width: 72px;
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
  text-align: center;
  border: 0;
  border-left: var(--border-width) solid var(--color-border);
  border-right: var(--border-width) solid var(--color-border);
  appearance: textfield;
  -moz-appearance: textfield;

  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
  }

  &:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
  }
}

.dropzone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  color: var(--color-text-secondary);
  background-color: var(--color-surface);
  border: var(--border-width) dashed var(--color-border-strong);
  transition: border-color var(--transition-base), background-color var(--transition-base);

  &:hover,
  &.is-dragover {
    border-color: var(--color-primary);
    background-color: var(--color-secondary);
  }

  &:focus-within {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
  }
}

.dropzone__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.dropzone__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.dropzone__hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.dropzone__files {
  display: grid;
  gap: var(--space-1);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
  text-align: left;
}

.dropzone__file {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  border: 0;
}

.swatches__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
}

.swatches__control {
  position: absolute;
  opacity: 0;
}

.swatches__dot {
  width: 28px;
  height: 28px;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 3px var(--color-bg);
}

.swatches__control:checked + .swatches__dot {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 3px var(--color-bg), 0 0 0 1px var(--color-primary);
}

.swatches__control:focus-visible + .swatches__dot {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.swatches__dot--original {
  background: linear-gradient(135deg, var(--color-warm) 50%, var(--color-warm-light) 50%);
}

.swatches__dot--mono {
  background: linear-gradient(135deg, var(--color-primary) 50%, var(--color-border) 50%);
}

.choice-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.choice-badges__item {
  position: relative;
}

.choice-badges__control {
  position: absolute;
  opacity: 0;
}

.choice-badges__label {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height-sm);
  padding: 0 var(--space-4);
  font-family: var(--font-accent);
  font-size: var(--text-base);
  border: var(--border-width) solid var(--color-border-strong);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);

  &:hover {
    border-color: var(--color-primary);
  }
}

.choice-badges__control:checked + .choice-badges__label {
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.choice-badges__control:focus-visible + .choice-badges__label {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.choice-badges__control:disabled + .choice-badges__label {
  color: var(--color-border-strong);
  border-color: var(--color-border);
  cursor: not-allowed;
}

/* source: blocks/card.css */
/* Карточка: базовая обёртка материала без тени и скругления */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  background-color: var(--color-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.card--surface {
  padding: var(--space-6);
  background-color: var(--color-surface);
}

.card--bordered {
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-border);
}

.card__media {
  overflow: hidden;
  background-color: var(--color-secondary);

  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.card__body {
  display: grid;
  gap: var(--space-2);
}

.card__eyebrow {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.card__title {
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
}

.card__link {
  text-decoration: none;

  &::after {
    content: "";
    position: absolute;
    inset: 0;
  }
}

.card__text {
  color: var(--color-text-secondary);
}

.card__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* source: blocks/badge.css */
/* Бейджи (тип материала, статус), чипы, счётчик */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 28px;
  padding: 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text-secondary);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-badge);
}

.badge--sm {
  min-height: 24px;
  padding: 0 var(--space-2);
  font-size: 0.75rem;
}

.badge--lg {
  min-height: 32px;
  padding: 0 var(--space-4);
  font-size: var(--text-xs);
}

.badge--photo {
  color: var(--color-material-photo);
  background-color: var(--color-material-photo-bg);
  border-color: transparent;
}

.badge--publication {
  color: var(--color-material-publication);
  background-color: var(--color-material-publication-bg);
  border-color: transparent;
}

.badge--memory {
  color: var(--color-material-memory);
  background-color: var(--color-material-memory-bg);
  border-color: transparent;
}

.badge--document {
  color: var(--color-material-document);
  background-color: var(--color-material-document-bg);
  border-color: var(--color-material-document);
}

.badge--published,
.badge--success {
  color: var(--color-status-published);
  background-color: var(--color-status-published-bg);
  border-color: transparent;
}

.badge--draft {
  color: var(--color-status-draft);
  background-color: var(--color-status-draft-bg);
  border-color: transparent;
}

.badge--neutral {
  color: var(--color-text-secondary);
  background-color: var(--color-bg);
}

.badge--warning {
  color: var(--color-warning);
  background-color: var(--color-warning-bg);
  border-color: transparent;
}

.badge--error {
  color: var(--color-danger);
  background-color: var(--color-danger-bg);
  border-color: transparent;
}

.badge--info {
  color: var(--color-info);
  background-color: var(--color-info-bg);
  border-color: transparent;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text);
  background-color: var(--color-bg);
  border: var(--border-width) solid var(--color-border-strong);
  transition: background-color var(--transition-fast), color var(--transition-fast);

  &:is(button):hover {
    border-color: var(--color-primary);
  }
}

.chip__icon {
  width: 16px;
  height: 16px;
}

.chip--selected {
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.chip--removable {
  padding-right: var(--space-1);
}

.chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--color-text-muted);

  &:hover {
    color: var(--color-primary);
  }
}

.counter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
}

.counter-badge-host {
  position: relative;
  display: inline-flex;

  & .counter-badge {
    position: absolute;
    top: -8px;
    right: -8px;
  }
}

/* source: blocks/table.css */
/* Таблицы: админка, списки материалов */

/* relative: абсолютные потомки (.sr-only) остаются внутри прокрутки и не расширяют страницу */
.table-wrap {
  position: relative;
  width: 100%;
  overflow-x: auto;
  border: var(--border-width) solid var(--color-border);
}

.table {
  width: 100%;
  min-width: 640px;
  font-size: var(--text-sm);
}

.table__caption {
  padding: var(--space-4);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: left;
  color: var(--color-text-muted);
  caption-side: top;
}

.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: middle;
  border-bottom: var(--border-width) solid var(--color-border);
}

.table thead th {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  background-color: var(--color-surface);
}

.table tbody tr {
  transition: background-color var(--transition-fast);

  &:hover {
    background-color: var(--color-surface);
  }

  &:last-child td,
  &:last-child th {
    border-bottom: 0;
  }
}

.table__cell--number {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.table__thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
}

/* Поля ввода в ячейках: не сжимаются колонкой до нечитаемой ширины */
.table .input {
  min-width: 11rem;
}

.table .input[type="number"] {
  min-width: 6.5rem;
}

.table .counter__value {
  min-width: 0;
}

.table__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* Перетаскивание строк: кнопка-ручка и состояние переносимой строки */
.sortable__handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: grab;
  touch-action: none;
}

.sortable__handle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.table__row--dragging {
  opacity: 0.6;
  background: var(--color-surface-muted, rgba(0, 0, 0, 0.06));
}

.table__row--dragging .sortable__handle {
  cursor: grabbing;
}

.is-sorting {
  cursor: grabbing;
  user-select: none;
}

/* source: blocks/modal.css */
/* Модальное окно на нативном <dialog> */

.modal {
  width: calc(100% - var(--space-8));
  max-width: 600px;
  max-height: calc(100vh - var(--space-8));
  margin: auto;
  color: var(--color-text);
  background-color: var(--color-bg);
  box-shadow: var(--shadow-xl);

  &::backdrop {
    background-color: var(--color-overlay);
  }

  &[open] {
    display: flex;
    flex-direction: column;
  }
}

.modal--sm {
  max-width: 420px;
}

.modal--md {
  max-width: 600px;
}

.modal--lg {
  max-width: 840px;
}

.modal--full {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
}

.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-6) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
}

.modal__title {
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
}

.modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0 0;
  color: var(--color-text-muted);

  &:hover {
    color: var(--color-primary);
  }
}

.modal__body {
  flex: 1;
  padding: var(--space-6);
  overflow-y: auto;
}

.modal__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6) var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
}

.modal-preview {
  position: relative;
  display: flex;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  background-color: var(--color-overlay);
}

.modal-preview .modal {
  position: static;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}

/* source: blocks/alert.css */
/* Уведомления в потоке (alert) и всплывающие (toast) */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text);
  background-color: var(--color-surface);
  border-left: 2px solid var(--color-text-muted);
}

.alert__icon {
  width: 20px;
  height: 20px;
  margin-top: 0.15em;
}

.alert__content {
  flex: 1;
  display: grid;
  gap: var(--space-1);
}

.alert__title {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.alert__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: calc(var(--space-1) * -1);
  color: var(--color-text-muted);

  &:hover {
    color: var(--color-primary);
  }
}

.alert--success {
  background-color: var(--color-success-bg);
  border-color: var(--color-success);

  & .alert__icon {
    color: var(--color-success);
  }
}

.alert--error {
  background-color: var(--color-danger-bg);
  border-color: var(--color-danger);

  & .alert__icon {
    color: var(--color-danger);
  }
}

.alert--warning {
  background-color: var(--color-warning-bg);
  border-color: var(--color-warning);

  & .alert__icon {
    color: var(--color-warning);
  }
}

.alert--info {
  background-color: var(--color-info-bg);
  border-color: var(--color-info);

  & .alert__icon {
    color: var(--color-info);
  }
}

.toast-stack {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: var(--z-toast);
  display: grid;
  gap: var(--space-3);
  width: min(380px, calc(100% - var(--space-8)));

  @media (max-width: 480px) {
    right: var(--space-4);
    bottom: var(--space-4);
  }
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-dark-text);
  background-color: var(--color-dark-bg);
  border-left: 3px solid var(--color-dark-text-muted);
  box-shadow: var(--shadow-lg);
  animation: toast-in var(--transition-slow);
}

.toast--static {
  position: static;
  animation: none;
}

.toast__icon {
  width: 20px;
  height: 20px;
  margin-top: 0.1em;
}

.toast__text {
  flex: 1;
}

.toast__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--color-dark-text-muted);

  &:hover {
    color: var(--color-dark-text);
  }
}

.toast--success {
  border-color: #8fc19f;
}

.toast--error {
  border-color: #e39a8f;
}

.toast--warning {
  border-color: #e2b56b;
}

.toast--info {
  border-color: #9fb6cc;
}

@keyframes toast-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* source: blocks/nav.css */
/* Навигация: хлебные крошки, пагинация, табы */

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);

  &:not(:last-child)::after {
    content: ">";
    color: var(--color-border-strong);
  }
}

.breadcrumbs__link {
  color: var(--color-text-muted);
  text-decoration: none;

  &:hover {
    color: var(--color-primary);
    text-decoration: underline;
  }
}

.breadcrumbs__current {
  color: var(--color-text);
}

.breadcrumbs__collapsed {
  padding: 0 var(--space-1);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wider);

  &:hover {
    color: var(--color-primary);
  }
}

.breadcrumbs--on-dark {
  & .breadcrumbs__list,
  & .breadcrumbs__link {
    color: var(--color-dark-text-muted);
  }

  & .breadcrumbs__current,
  & .breadcrumbs__link:hover {
    color: var(--color-dark-text);
  }
}

.pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 44px;
  height: 44px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  color: var(--color-text);
  border: var(--border-width) solid transparent;
  transition: border-color var(--transition-fast);

  &:hover {
    border-color: var(--color-border-strong);
  }

  &[aria-current="page"] {
    color: var(--color-text-inverse);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
  }

  &[aria-disabled="true"] {
    color: var(--color-border-strong);
    pointer-events: none;
  }
}

.pagination__link--text {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.pagination__gap {
  padding: 0 var(--space-2);
  color: var(--color-text-muted);
}

.pagination--prev-next .pagination__list {
  justify-content: space-between;
}

.pagination__status {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.pagination--load-more {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
}

.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  border-bottom: var(--border-width) solid var(--color-border);
}

.tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  margin-bottom: -1px;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);

  &:hover {
    color: var(--color-primary);
  }

  &[aria-selected="true"] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
  }
}

.tabs__icon {
  width: 18px;
  height: 18px;
}

.tabs__panel {
  padding-top: var(--space-6);

  &:focus-visible {
    outline-offset: 6px;
  }
}

.tabs--small {
  & .tabs__list {
    gap: var(--space-4);
  }

  & .tabs__tab {
    min-height: var(--control-height-sm);
    font-size: var(--text-xs);
  }
}

.tabs--pills {
  & .tabs__list {
    gap: var(--space-2);
    border-bottom: 0;
  }

  & .tabs__tab {
    margin-bottom: 0;
    padding: 0 var(--space-4);
    border: var(--border-width) solid var(--color-border-strong);

    &[aria-selected="true"] {
      color: var(--color-text-inverse);
      background-color: var(--color-primary);
      border-color: var(--color-primary);
    }
  }
}

/* source: blocks/accordion.css */
/* Аккордеон на нативных <details> */

.accordion {
  border-top: var(--border-width) solid var(--color-border);
}

.accordion__item {
  border-bottom: var(--border-width) solid var(--color-border);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
  padding: var(--space-3) 0;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;

  &::-webkit-details-marker {
    display: none;
  }

  &:hover {
    color: var(--color-text-secondary);
  }
}

.accordion__lead {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

.accordion__year {
  font-family: var(--font-accent);
  font-size: var(--text-lg);
  letter-spacing: 0;
  text-transform: none;
}

.accordion__icon {
  width: 20px;
  height: 20px;
  transition: transform var(--transition-base);
}

.accordion__item[open] .accordion__icon {
  transform: rotate(180deg);
}

.accordion__panel {
  padding: 0 0 var(--space-6);
  color: var(--color-text-secondary);
}

.accordion--bordered {
  border: var(--border-width) solid var(--color-border);

  & .accordion__item:last-child {
    border-bottom: 0;
  }

  & .accordion__trigger,
  & .accordion__panel {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

.accordion--plain {
  border-top: 0;

  & .accordion__item {
    border-bottom: 0;
  }

  & .accordion__trigger {
    min-height: 48px;
  }
}

/* source: blocks/avatar.css */
/* Аватар автора: ч/б фото, инициалы или иконка. Круг — единственное скругление */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  overflow: hidden;
  font-family: var(--font-accent);
  font-size: var(--text-base);
  line-height: 1;
  color: var(--color-warm);
  background-color: var(--color-warm-light);
  border-radius: var(--radius-full);
}

.avatar__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}

.avatar__icon {
  width: 55%;
  height: 55%;
}

.avatar--xs {
  width: 24px;
  height: 24px;
  font-size: 0.625rem;
}

.avatar--sm {
  width: 32px;
  height: 32px;
  font-size: 0.8125rem;
}

.avatar--md {
  width: 48px;
  height: 48px;
}

.avatar--lg {
  width: 72px;
  height: 72px;
  font-size: var(--text-md);
}

.avatar--xl {
  width: 96px;
  height: 96px;
  font-size: var(--text-lg);
}

.avatar--icon {
  color: var(--color-text-muted);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
}

/* source: blocks/tooltip.css */
/* Тултип: показывается по наведению и по фокусу, без JS */

.tooltip {
  position: relative;
  display: inline-flex;
}

.tooltip__content {
  position: absolute;
  z-index: var(--z-dropdown);
  width: max-content;
  max-width: 280px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-dark-text);
  background-color: var(--color-dark-bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

.tooltip:hover .tooltip__content,
.tooltip:focus-within .tooltip__content,
.tooltip--visible .tooltip__content {
  opacity: 1;
  visibility: visible;
}

.tooltip--top .tooltip__content {
  bottom: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
}

.tooltip--bottom .tooltip__content {
  top: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
}

.tooltip--right .tooltip__content {
  top: 50%;
  left: calc(100% + var(--space-2));
  transform: translateY(-50%);

  /* На узком экране сбоку места нет — показываем снизу */
  @media (max-width: 480px) {
    top: calc(100% + var(--space-2));
    left: 0;
    max-width: calc(100vw - var(--space-8));
    transform: none;
  }
}

.tooltip--left .tooltip__content {
  top: 50%;
  right: calc(100% + var(--space-2));
  transform: translateY(-50%);

  @media (max-width: 480px) {
    top: calc(100% + var(--space-2));
    right: auto;
    left: 0;
    max-width: calc(100vw - var(--space-8));
    transform: none;
  }
}

/* source: blocks/divider.css */
/* Разделители */

.divider {
  width: 100%;
  height: 1px;
  margin: var(--space-6) 0;
  background-color: var(--color-border);
  border: 0;
}

.divider--vertical {
  width: 1px;
  height: auto;
  min-height: 48px;
  margin: 0 var(--space-4);
  align-self: stretch;
}

.divider--label {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: auto;
  font-family: var(--font-accent);
  font-size: var(--text-md);
  color: var(--color-text-muted);
  background-color: transparent;

  &::before,
  &::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--color-border);
  }
}

/* source: blocks/skeleton.css */
/* Скелетоны загрузки. Мягкая пульсация, статично при reduced-motion */

.skeleton {
  display: block;
  background-color: var(--color-border-light);
  animation: skeleton-pulse 1600ms ease-in-out infinite;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

.skeleton--text {
  width: 100%;
  height: 1em;
  margin: 0.35em 0;

  &:last-child {
    width: 60%;
  }
}

.skeleton--title {
  width: 70%;
  height: 2rem;
}

.skeleton--avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
}

.skeleton--card {
  width: 100%;
  aspect-ratio: 4 / 3;
}

.skeleton--row {
  width: 100%;
  height: 56px;
}

.skeleton-group {
  display: grid;
  gap: var(--space-3);
}

.skeleton-group--row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

@keyframes skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.55;
  }
}

/* source: blocks/auth.css */
/* Форма входа в админку */

.auth {
  display: grid;
  gap: var(--space-6);
  width: 100%;
  max-width: 440px;
  padding: var(--space-10) var(--space-8);
  background-color: var(--color-bg);
  border: var(--border-width) solid var(--color-border);

  @media (max-width: 480px) {
    padding: var(--space-8) var(--space-5);
  }
}

.auth__header {
  display: grid;
  gap: var(--space-2);
  text-align: center;
}

.auth__title {
  font-size: var(--text-lg);
}

.auth__subtitle {
  margin: 0 auto;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.auth--disabled {
  color: var(--color-text-muted);
  background-color: var(--color-surface);
  border-style: dashed;
}


/* Blocks — компоненты проекта */
/* source: blocks/site-header.css */
/* Шапка сайта: меню разделено знаком-логотипом по центру */

.site-header {
  position: relative;
  z-index: var(--z-sticky);
  color: var(--color-text);
  background-color: var(--color-bg);
  border-bottom: var(--border-width) solid var(--color-border);
}

.site-header--overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  color: var(--color-dark-text);
  background-color: transparent;
  border-bottom: 0;
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  max-width: var(--container-max);
  min-height: var(--header-height);
  margin: 0 auto;
  padding: 0 var(--container-padding);

  /* Мобильная шапка: выравнивание по верху — верх бургера совпадает с верхом имени */
  @media (max-width: 1024px) {
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: var(--space-4);
    min-height: 72px;
    padding: var(--space-4) 16px;
  }
}

.site-header__nav {
  display: contents;

  @media (max-width: 1024px) {
    display: none;
  }
}

.site-header__list {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;

  @media (max-width: 1200px) {
    gap: var(--space-5);
  }
}

.site-header__list--start {
  justify-content: flex-start;
}

.site-header__list--end {
  justify-content: flex-end;
  grid-column: 3;
}

.site-header__link {
  position: relative;
  display: inline-block;
  padding: var(--space-2) 0;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid transparent;
  &::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-slow);
  }

  &:hover::after,
  &:focus-visible::after,
  &[aria-current="page"]::after {
    transform: scaleX(1);
  }
}

.site-header__logo {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
  text-decoration: none;
  color: inherit;

  @media (max-width: 1024px) {
    grid-column: 1;
    justify-items: start;
    text-align: left;
  }
}

.site-header__logo-name {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: 1.2;
}

.site-header__logo-dates {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  opacity: 0.75;
}

/*
  Иконка прижата к верхнему правому углу кнопки: верх иконки = верх строки имени.
  Кнопка остаётся 44×44 — площадь нажатия не уменьшается.
*/
.site-header__burger {
  display: none;
  align-items: flex-start;
  justify-content: flex-end;
  width: 44px;
  height: 44px;
  grid-column: 3;
  align-self: start;
  justify-self: end;
  color: inherit;

  /*
    Компенсация метрик: заглавные Montserrat начинаются на 3.8px ниже верха строки,
    верхний штрих иконки — на 6.25px ниже верха SVG. Сдвиг совмещает их по верху.
  */
  & .icon {
    margin-top: -0.15rem;
  }

  @media (max-width: 1024px) {
    display: inline-flex;
  }
}

.site-header__mobile {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  align-content: start;
  gap: var(--space-8);
  padding: var(--space-4) 16px var(--space-6);
  color: var(--color-dark-text);
  background-color: var(--color-dark-bg);
  overflow-y: auto;
}

/* Верх открытого меню повторяет шапку: имя и крестик выровнены по верху на тех же местах */
.site-header__mobile-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  & > button {
    align-items: flex-start;
    justify-content: flex-end;
    width: 44px;
    height: 44px;
  }

  /* Верхний штрих крестика — на 5.25px ниже верха SVG; сдвиг совмещает его с верхом букв */
  & > button .icon {
    margin-top: -0.09rem;
  }
}

.site-header__mobile-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__mobile-link {
  position: relative;
  display: block;
  padding: var(--space-3) 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  border-bottom: var(--border-width) solid var(--color-dark-border);

  &::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-slow);
  }

  &:hover::after,
  &:focus-visible::after,
  &[aria-current="page"]::after {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__link::after,
  .site-header__mobile-link::after { transition: none; }
}

.site-header--demo-mobile {
  & .site-header__inner {
    grid-template-columns: auto 1fr auto;
    align-items: start;
    min-height: 72px;
    padding: var(--space-4) 16px;
  }

  & .site-header__nav {
    display: none;
  }

  & .site-header__logo {
    grid-column: 1;
    justify-items: start;
    text-align: left;
  }

  & .site-header__burger {
    display: inline-flex;
  }
}

/* source: blocks/site-footer.css */
/* Подвал сайта */

.site-footer {
  color: var(--color-dark-text-secondary);
  background-color: var(--color-dark-bg);
}

/*
  Колонка имени не сжимается уже своего содержимого (max-content),
  а меню переносится внутри своей колонки — наложения нет ни на одной ширине.
  На планшете и уже — одна колонка: имя сверху, меню под ним.
*/
.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) minmax(0, auto);
  align-items: start;
  gap: var(--space-8) var(--space-12);
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-16) var(--container-padding) var(--space-10);

  @media (max-width: 1024px) {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-12) 16px var(--space-8);
  }
}

.site-footer__name {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-dark-text);
}

.site-footer__dates {
  margin-top: var(--space-2);
  font-family: var(--font-accent);
  font-size: var(--text-base);
  white-space: nowrap;
}

.site-footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__link {
  position: relative;
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-dark-text-secondary);

  &:hover {
    color: var(--color-dark-text);
  }

  &::after {
    content: "";
    position: absolute;
    inset: auto 0 -3px;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-slow);
  }

  &:hover::after,
  &:focus-visible::after,
  &[aria-current="page"]::after { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__link::after { transition: none; }
}

/* max-width: none — у <p> базовое ограничение 70ch, из-за него линия обрывалась */
.site-footer__bottom {
  grid-column: 1 / -1;
  max-width: none;
  padding-top: var(--space-6);
  font-size: var(--text-xs);
  color: var(--color-dark-text-muted);
  border-top: var(--border-width) solid var(--color-dark-border);
}

/* source: blocks/timeline.css */
/*
  Жизненный путь: центральная ось-полоса, события чередуются сторонами,
  годы — крупной антиквой в две строки по две цифры.
*/

.timeline {
  position: relative;
  display: grid;
  gap: var(--space-20);
  margin: 0;
  padding: var(--space-16) 0;
  list-style: none;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 200px;
    background-color: var(--color-secondary);
    transform: translateX(-50%);
  }

  @media (max-width: 768px) {
    gap: var(--space-12);
    padding: var(--space-8) 0;

    &::before {
      left: 0;
      width: 3px;
      transform: none;
    }
  }
}

.timeline__event {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr);
  align-items: start;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding-left: var(--space-6);
  }
}

.timeline__year {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  justify-items: center;
  font-family: var(--font-accent);
  font-size: var(--text-4xl);
  font-weight: var(--weight-regular);
  line-height: 0.92;
  letter-spacing: 0;
  color: var(--color-text);

  @media (max-width: 1024px) {
    font-size: var(--text-3xl);
  }

  @media (max-width: 768px) {
    grid-column: 1;
    display: flex;
    justify-items: start;
    font-size: var(--text-2xl);
  }
}

.timeline__content {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
  padding: 0 var(--space-8);

  @media (max-width: 768px) {
    padding: 0;
  }
}

.timeline__event--right .timeline__content {
  grid-column: 3;
  grid-row: 1;
  justify-items: start;

  @media (max-width: 768px) {
    grid-column: 1;
    grid-row: 2;
  }
}

.timeline__event--left .timeline__content {
  grid-column: 1;
  grid-row: 1;
  justify-items: end;
  text-align: right;

  @media (max-width: 768px) {
    grid-row: 2;
    justify-items: start;
    text-align: left;
  }
}

.timeline__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  line-height: 1.2;

  @media (max-width: 768px) {
    font-size: var(--text-md);
  }
}

.timeline__title-muted {
  display: block;
  color: var(--color-text-muted);
}

.timeline__text {
  max-width: 44ch;
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.timeline__media {
  width: 100%;
  max-width: 400px;

  & img {
    width: 100%;
    filter: grayscale(1);
  }
}

.timeline__caption {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.timeline__tick {
  position: absolute;
  bottom: calc(var(--space-10) * -1);
  left: 50%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  color: var(--color-text-muted);

  &::before {
    content: "";
    width: 40px;
    height: 1px;
    background-color: var(--color-border-strong);
  }

  @media (max-width: 768px) {
    display: none;
  }
}

/* source: blocks/article.css */
/* Длинный текст: биография, воспоминание */

.article {
  display: grid;
  gap: var(--space-8);
  max-width: var(--container-narrow);
  margin: 0 auto;
}

.article__header {
  display: grid;
  gap: var(--space-4);
}

.article__lead {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--color-text-secondary);
}

.article__dates {
  font-family: var(--font-accent);
  font-size: var(--text-md);
}

.article__toc {
  padding: var(--space-6);
  background-color: var(--color-surface);
}

.article__toc-title {
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
}

.article__toc-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.article__toc-item {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
  counter-increment: toc;

  &::before {
    content: counter(toc, decimal-leading-zero);
    font-family: var(--font-accent);
    color: var(--color-text-muted);
  }
}

.article__body {
  display: grid;
  gap: var(--space-5);
  font-family: var(--font-reading);
  font-size: var(--text-base);
  line-height: var(--leading-reading);

  & h2 {
    margin-top: var(--space-8);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
  }

  & h3 {
    margin-top: var(--space-4);
    font-family: var(--font-heading);
  }

  & ul,
  & ol {
    display: grid;
    gap: var(--space-2);
    padding-left: var(--space-6);
  }
}

.article__figure {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0;

  & img {
    width: 100%;
    filter: grayscale(1);
  }
}

.article__figure--offset {
  float: right;
  width: 45%;
  margin: var(--space-2) 0 var(--space-4) var(--space-8);

  @media (max-width: 768px) {
    float: none;
    width: 100%;
    margin: var(--space-4) 0;
  }
}

.article__caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.article__source {
  padding-top: var(--space-6);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  border-top: var(--border-width) solid var(--color-border);
}

.article__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-border);

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.article__nav-link {
  display: grid;
  gap: var(--space-1);
  text-decoration: none;

  &:hover .article__nav-title {
    text-decoration: underline;
  }
}

.article__nav-link--next {
  text-align: right;

  @media (max-width: 768px) {
    text-align: left;
  }
}

.article__nav-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.article__nav-title {
  font-family: var(--font-reading);
}

/* source: blocks/author.css */
/* Блок автора воспоминания */

.author {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.author__info {
  display: grid;
  gap: 2px;
}

.author__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.author__regalia {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.author__relation {
  font-family: var(--font-reading);
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--color-warm);
}

/* source: blocks/quote.css */
/* Цитата с подписью автора */

.quote {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

.quote__text {
  max-width: none;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);

  & p {
    max-width: none;
  }
}

.quote__author {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-style: normal;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);

  &::before {
    content: "— ";
  }
}

.quote--large {
  justify-items: center;
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-16) 0;
  text-align: center;

  & .quote__text {
    font-size: var(--text-xl);
    line-height: 1.3;

    @media (max-width: 768px) {
      font-size: var(--text-lg);
    }
  }
}

.quote--inline {
  padding-left: var(--space-6);
  border-left: 1px solid var(--color-primary);

  & .quote__text {
    font-size: var(--text-md);
  }
}

/* source: blocks/manuscript.css */
/* Просмотр рукописи: страница, листание, увеличение, миниатюры */

.manuscript {
  display: grid;
  gap: var(--space-5);
}

.manuscript__stage {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 420px;
  padding: var(--space-8);
  overflow: auto;
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);

  @media (max-width: 768px) {
    min-height: 300px;
    padding: var(--space-4);
  }
}

.manuscript__page {
  max-height: 560px;
  width: auto;
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
  transition: transform var(--transition-slow);
}

.manuscript.is-zoomed .manuscript__page {
  max-height: none;
  cursor: zoom-out;
}

.manuscript.is-loading .manuscript__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-surface);
  opacity: 0.7;
}

.manuscript__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.manuscript__counter {
  font-family: var(--font-accent);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
}

.manuscript__thumbs {
  display: flex;
  gap: var(--space-3);
  margin: 0;
  padding: 0 0 var(--space-2);
  overflow-x: auto;
  list-style: none;
}

.manuscript__thumb {
  flex-shrink: 0;
  width: 72px;
  border: 2px solid transparent;
  opacity: 0.6;
  transition: opacity var(--transition-fast), border-color var(--transition-fast);

  &:hover {
    opacity: 1;
  }

  &[aria-current="true"] {
    border-color: var(--color-primary);
    opacity: 1;
  }

  & img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }
}

/* source: blocks/awards.css */
/* Награды: сетка изображений с названием и годом */

.awards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-8) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.awards__item {
  display: grid;
  gap: var(--space-3);
  text-align: center;
}

.awards__image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: var(--space-5);
  background-color: var(--color-surface);
}

.awards__image {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

.awards__title {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.awards__year {
  font-family: var(--font-accent);
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

/* source: blocks/award-list.css */
/* Перечень наград текстом и портрет с наградами рядом; сетка наград идёт ниже */

.award-list {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
  margin-bottom: var(--space-12);

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

.award-list__photo {
  margin: 0;
}

/* source: blocks/album-card.css */
/* Альбом фотоархива */

.albums {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-10) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;

  @media (max-width: 1024px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (max-width: 480px) {
    grid-template-columns: 1fr;
  }
}

.album-card {
  position: relative;
  display: grid;
  gap: var(--space-4);
}

.album-card__cover {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-secondary);

  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    transition: opacity var(--transition-base);
  }
}

/* Обложка ещё не выбрана — нейтральная подложка с иконкой */
.album-card__cover--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.album-card__body {
  display: grid;
  gap: var(--space-1);
}

.album-card__title {
  font-size: var(--text-md);
  font-weight: var(--weight-light);
}

.album-card__link {
  text-decoration: none;

  &::after {
    content: "";
    position: absolute;
    inset: 0;
  }
}

.album-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.album-card__period {
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.album-card:hover .album-card__cover img,
.album-card.is-hover .album-card__cover img {
  opacity: 0.85;
}

.album-card:hover .album-card__link,
.album-card.is-hover .album-card__link {
  text-decoration: underline;
}

.album-card--empty {
  opacity: 0.55;

  & .album-card__cover {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
  }
}

/* source: blocks/photo-grid.css */
/* Фотографии альбома: ровная сетка или «кирпичная» раскладка */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;

  @media (max-width: 1024px) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  @media (max-width: 768px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-4);
  }

  @media (max-width: 380px) {
    grid-template-columns: 1fr;
  }
}

.photo-grid--masonry {
  display: block;
  columns: 4 240px;
  column-gap: var(--space-6);

  & .photo-grid__item {
    margin-bottom: var(--space-8);
    break-inside: avoid;
  }
}

.photo-card {
  display: grid;
  gap: var(--space-3);
}

.photo-card__button {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background-color: var(--color-secondary);
  cursor: url('../img/icons/photo-zoom-cursor.svg') 24 24, pointer;

  &:focus-visible {
    outline-offset: 4px;
  }

  &:focus-visible::after {
    content: "";
    position: absolute;
    width: 48px;
    height: 48px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url('../img/icons/photo-zoom-cursor.svg') center / contain no-repeat;
    pointer-events: none;
  }
}

.photo-card__image {
  width: 100%;
  transition: opacity 400ms ease, transform 600ms ease;
}

.photo-grid:not(.photo-grid--masonry) .photo-card__image {
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.photo-card__button:hover .photo-card__image,
.photo-card__button:focus-visible .photo-card__image,
.photo-card.is-hover .photo-card__image {
  opacity: 0.85;
  transform: scale(1.025);
}

@media (prefers-reduced-motion: reduce) {
  .photo-card__image { transition: none; }
  .photo-card__button:hover .photo-card__image,
  .photo-card__button:focus-visible .photo-card__image { transform: none; }
}

.photo-card__caption {
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-text-secondary);
}

.photo-card__meta {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* source: blocks/lightbox.css */
/* Просмотр фото на весь экран */

.lightbox {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  color: var(--color-dark-text);
  background-color: transparent;
  opacity: 0;
  transition: opacity 280ms ease;

  &::backdrop {
    background-color: rgba(10, 10, 10, .82);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 280ms ease;
  }

  &[open] {
    display: grid;
    grid-template-rows: auto 1fr auto;
  }
}

.lightbox.is-visible,
.lightbox.is-visible::backdrop { opacity: 1; }

html:has(.lightbox[open]) { overflow: hidden; }

.lightbox :focus-visible { outline-color: var(--color-dark-text); }

.lightbox--preview {
  opacity: 1;
  background-color: var(--color-dark-bg);
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 640px;
}

.lightbox__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
}

.lightbox__counter {
  font-family: var(--font-accent);
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
  color: var(--color-dark-text-secondary);
}

.lightbox__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--color-dark-text);

  &:hover {
    color: var(--color-dark-text-muted);
  }
}

.lightbox__stage {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  align-items: center;
  min-height: 0;
  padding: 0 var(--space-4);

  @media (max-width: 768px) {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    padding: 0 var(--space-2);
  }
}

.lightbox__image {
  justify-self: center;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  width: 100%;
  height: 100%;
  max-height: calc(100dvh - 220px);
  opacity: 0;
  transform: scale(.975);
  transition: opacity 550ms ease, transform 700ms cubic-bezier(.22, 1, .36, 1);
}

.lightbox.is-image-ready .lightbox__image,
.lightbox--preview .lightbox__image {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox::backdrop,
  .lightbox__image { transition: none; }
  .lightbox__image { transform: none; }
}

.lightbox__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--color-dark-text);
  border: var(--border-width) solid var(--color-dark-border);
  transition: border-color var(--transition-fast);

  &:hover {
    border-color: var(--color-dark-text);
  }

  &:disabled {
    color: var(--color-dark-border);
    border-color: var(--color-dark-raised);
    cursor: default;
  }

  @media (max-width: 768px) {
    width: 40px;
    height: 40px;
  }
}

.lightbox__info {
  display: grid;
  gap: var(--space-2);
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-6) var(--space-8);
  text-align: center;
}

.lightbox__caption {
  max-width: none;
  font-family: var(--font-reading);
  font-size: var(--text-base);
  color: var(--color-dark-text);
}

.lightbox__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  font-size: var(--text-xs);
  color: var(--color-dark-text-muted);
}

/* source: blocks/publications.css */
/* Архив научных публикаций */

.publications {
  display: grid;
  gap: var(--space-12);
}

.publications__filter {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--space-4);

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.publications__count {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.publications__group {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--space-8);
  padding-top: var(--space-8);
  border-top: var(--border-width) solid var(--color-border);

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

.publications__decade {
  font-family: var(--font-accent);
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;

  @media (max-width: 768px) {
    font-size: var(--text-xl);
  }
}

.publications__list {
  display: grid;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.publication {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
  border-bottom: var(--border-width) solid var(--color-border-light);

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

.publication__year {
  font-family: var(--font-accent);
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

.publication__body {
  display: grid;
  gap: var(--space-1);
}

.publication__authors {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.publication__author--main {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

.publication__title {
  max-width: none;
  font-family: var(--font-reading);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
}

.publication__source {
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-text-secondary);
}

/* source: blocks/file-download.css */
/* Скачивание документа */

.file-download {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
}

.file-download__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.file-download__body {
  display: grid;
  gap: 2px;
}

.file-download__title {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.file-download__meta {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.file-download__action {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.file-download--inline {
  &:hover .file-download__meta {
    color: var(--color-primary);
    text-decoration: underline;
  }
}

.file-download--card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-5);
  width: 100%;
  padding: var(--space-6);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  transition: border-color var(--transition-base);

  &:hover {
    border-color: var(--color-primary);
  }

  & .file-download__icon {
    width: 40px;
    height: 40px;
  }

  & .file-download__title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  @media (max-width: 480px) {
    grid-template-columns: auto minmax(0, 1fr);

    & .file-download__action {
      grid-column: 2;
    }
  }
}

/* source: blocks/memory-card.css */
/* Лента воспоминаний и карточка воспоминания */

.memories {
  display: grid;
  gap: var(--space-8);
}

.memories__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.memory-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-5);
  height: 100%;
  padding: var(--space-8);
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-primary);

  @media (max-width: 480px) {
    padding: var(--space-6) var(--space-5);
  }
}

.memory-card__title {
  font-size: var(--text-md);
  font-weight: var(--weight-light);
}

.memory-card__excerpt {
  display: -webkit-box;
  overflow: hidden;
  font-family: var(--font-reading);
  font-size: var(--text-base);
  line-height: var(--leading-reading);
  color: var(--color-text-secondary);
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

.memory-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--color-border);
}

/* Ссылка растягивается на всю карточку: ::after позиционируется от .memory-card */
.memory-card__more {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;

  &::after {
    content: "";
    position: absolute;
    inset: 0;
  }
}

.memory-card:hover .memory-card__more {
  text-decoration-color: transparent;
}

/* source: blocks/teaser.css */
/* Анонс раздела на главной */

.teasers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12) var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

.teaser {
  position: relative;
  display: grid;
  gap: var(--space-4);
}

.teaser__image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--color-secondary);

  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
  }
}

.teaser__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
}

.teaser__text {
  font-family: var(--font-reading);
  color: var(--color-text-secondary);
}

.teaser__link {
  justify-self: start;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;

  &::after {
    content: "";
    position: absolute;
    inset: 0;
  }
}

.teaser--text {
  align-content: start;
  padding: var(--space-8) 0 0;
  border-top: 1px solid var(--color-primary);
}

/* source: blocks/anniversary.css */
/* Юбилейные материалы «Слинько 100» */

.anniversary {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: var(--space-12);

  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

.anniversary__cover {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: var(--color-dark-bg);

  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    opacity: 0.6;
  }
}

.anniversary__number {
  position: absolute;
  inset: auto var(--space-6) var(--space-6);
  font-family: var(--font-accent);
  font-size: var(--text-4xl);
  line-height: 1;
  color: var(--color-dark-text);
}

.anniversary__body {
  display: grid;
  gap: var(--space-6);
}

.anniversary__title {
  font-size: var(--text-xl);
}

.anniversary__text {
  font-family: var(--font-reading);
  color: var(--color-text-secondary);
}

.anniversary__pages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;

  @media (max-width: 640px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Слайды презентации горизонтальные (4:3): сетка на ширину колонки, на телефоне — по два */
.anniversary__page {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-secondary);
  border: var(--border-width) solid var(--color-border);

  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
  }
}

/* source: blocks/contacts.css */
/* Контакты семьи и форма сообщения */

.contacts {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--space-16);

  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

.contacts__list {
  display: grid;
  align-content: start;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contacts__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.contacts__icon {
  width: 24px;
  height: 24px;
  margin-top: 2px;
  color: var(--color-text-muted);
}

.contacts__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.contacts__value {
  font-size: var(--text-base);
  overflow-wrap: anywhere;
}

/* source: blocks/empty-state.css */
/* Пустое состояние */

.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-6);
  text-align: center;
  border: var(--border-width) solid var(--color-border);
}

.empty-state__icon {
  width: 48px;
  height: 48px;
  color: var(--color-text-muted);
}

.empty-state__title {
  font-size: var(--text-md);
  font-weight: var(--weight-light);
}

.empty-state__text {
  max-width: 48ch;
  color: var(--color-text-muted);
}

/* source: blocks/admin.css */
/*
  Админка: светлая монохромная панель.

  Десктоп (≥1025px): сайдбар слева на всю высоту экрана. Переключатель наверху
  сворачивает его до узкой колонки иконок (.admin.is-collapsed).

  Планшет и телефон (≤1024px): сверху панель с кнопкой меню, сайдбар выезжает
  слева поверх контента (.admin.is-open) на затемнённой подложке.

  В обоих режимах кнопка выхода закреплена внизу сайдбара.
*/

.admin {
  display: grid;
  grid-template-columns: var(--admin-sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
  background-color: var(--color-surface);

  @media (max-width: 1024px) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }
}

.admin.is-collapsed {
  grid-template-columns: var(--admin-sidebar-collapsed) minmax(0, 1fr);

  @media (max-width: 1024px) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.admin--preview {
  min-height: 560px;
  border: var(--border-width) solid var(--color-border);
}

/* ---------- Верхняя панель (только ≤1024px) ---------- */

.admin__topbar {
  display: none;

  @media (max-width: 1024px) {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 56px;
    padding: var(--space-2) 16px;
    background-color: var(--color-bg);
    border-bottom: var(--border-width) solid var(--color-border);
  }
}

/* ---------- Сайдбар ---------- */

.admin__sidebar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  overflow: hidden;
  background-color: var(--color-bg);
  border-right: var(--border-width) solid var(--color-border);

  @media (max-width: 1024px) {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-modal);
    width: var(--admin-drawer-width);
    height: auto;
    box-shadow: var(--shadow-xl);
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform var(--transition-slow), visibility var(--transition-slow);
  }
}

/*
  При открытии видимость включается сразу (visibility 0s) — иначе в начале перехода
  сайдбар ещё скрыт и фокус в него не ставится. При закрытии действует базовый переход:
  видимость гаснет после того, как сайдбар уехал.
*/
.admin.is-open .admin__sidebar {
  @media (max-width: 1024px) {
    visibility: visible;
    transform: none;
    transition: transform var(--transition-slow), visibility 0s;
  }
}

/* В демо дизайн-системы сайдбар не растягивается на высоту экрана */
.admin--preview .admin__sidebar {
  @media (min-width: 1025px) {
    position: static;
    height: auto;
  }
}

.admin__sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 64px;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
  border-bottom: var(--border-width) solid var(--color-border);
}

.admin.is-collapsed .admin__sidebar-head {
  @media (min-width: 1025px) {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
}

.admin__brand {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-overflow: ellipsis;
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-text);
}

.admin.is-collapsed .admin__sidebar-head .admin__brand {
  @media (min-width: 1025px) {
    display: none;
  }
}

.admin__toggle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast), background-color var(--transition-fast);

  &:hover {
    color: var(--color-primary);
    background-color: var(--color-surface);
  }
}

.admin__nav {
  flex: 1;
  min-height: 0;
  padding: var(--space-4) var(--space-3);
  overflow-y: auto;
}

.admin__nav-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin__nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-text-secondary);
  border-left: 2px solid transparent;
  transition: color var(--transition-fast), background-color var(--transition-fast);

  &:hover {
    color: var(--color-primary);
    background-color: var(--color-surface);
  }

  &[aria-current="page"] {
    color: var(--color-primary);
    background-color: var(--color-secondary);
    border-left-color: var(--color-primary);
  }
}

.admin__nav-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.admin__nav-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size var(--transition-slow);
}

.admin__nav-link:hover .admin__nav-text,
.admin__nav-link:focus-visible .admin__nav-text {
  background-size: 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
  .admin__nav-text { transition: none; }
}

/* Свёрнутый сайдбар: только иконки, подписи остаются доступными для скринридеров */
.admin.is-collapsed .admin__nav {
  @media (min-width: 1025px) {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
}

.admin.is-collapsed .admin__nav-link {
  @media (min-width: 1025px) {
    justify-content: center;
    padding: 0;
  }
}

.admin.is-collapsed .admin__nav-text {
  @media (min-width: 1025px) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

.admin.is-collapsed .admin__nav-link .counter-badge {
  @media (min-width: 1025px) {
    position: absolute;
    top: 4px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 0.6875rem;
  }
}

/* Низ сайдбара: выход из админки */
.admin__sidebar-foot {
  padding: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
}

.admin.is-collapsed .admin__sidebar-foot {
  @media (min-width: 1025px) {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
}

.admin__logout:hover {
  color: var(--color-danger);
  background-color: var(--color-danger-bg);
}

/* Подложка под выехавшим сайдбаром */
.admin__backdrop {
  display: none;

  @media (max-width: 1024px) {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal) - 1);
    display: block;
    background-color: var(--color-overlay);
  }
}

/* ---------- Контент ---------- */

.admin__main {
  display: grid;
  align-content: start;
  gap: var(--space-6);
  min-width: 0;
  padding: var(--space-8);

  @media (max-width: 768px) {
    padding: var(--space-5) 16px;
  }
}

.admin__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.admin__title {
  font-size: var(--text-lg);
}

.admin__panel {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6);
  background-color: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
}

.admin__panel-title {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}

/* Форма записи: основные поля слева, публикация и служебное — справа */
.admin__columns {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-6);

  @media (max-width: 1200px) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.admin__aside {
  display: grid;
  gap: var(--space-6);
}

.admin__panel.is-saving {
  opacity: 0.6;
  pointer-events: none;
}

.admin__editor {
  min-height: 200px;
  padding: var(--space-4);
  font-family: var(--font-reading);
  border: var(--border-width) solid var(--color-border-strong);
}

/* Одиночное фото в форме: небольшое превью слева, поля загрузки справа */
.admin__photo-edit {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-6);

  @media (max-width: 768px) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.admin__photo-preview {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--text-xs);

  & img {
    width: 100%;
    max-width: 160px;
    height: auto;
    border: var(--border-width) solid var(--color-border);
  }
}

.admin__uploads {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin__upload {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-xs);

  & img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
}

/* source: blocks/section-title.css */
/* Заголовок секции страницы: подпись, заголовок, вводный текст и ссылка справа */

.section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
  margin-bottom: var(--space-12);

  @media (max-width: 768px) {
    margin-bottom: var(--space-8);
  }
}

.section-title__text {
  display: grid;
  gap: var(--space-3);
  max-width: 760px;
}

.section-title__eyebrow {
  font-family: var(--font-accent);
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

.section-title__lead {
  font-family: var(--font-reading);
  color: var(--color-text-secondary);
}

.section-title__link {
  flex-shrink: 0;
}

.section-title--center {
  justify-content: center;
  text-align: center;

  & .section-title__text {
    justify-items: center;
  }
}

/* source: blocks/page-bar.css */
/* Полоса под первым экраном внутренней страницы: хлебные крошки */

.page-bar {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
}

/* source: blocks/stat-card.css */
/* Сводные показатели в админке */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stat-card {
  position: relative;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  background-color: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  transition: border-color var(--transition-base);

  &:hover {
    border-color: var(--color-primary);
  }
}

.stat-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--color-text-muted);
}

.stat-card__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.stat-card__value {
  font-family: var(--font-accent);
  font-size: var(--text-2xl);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat-card__link {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);

  &::after {
    content: "";
    position: absolute;
    inset: 0;
  }
}

.stat-card--accent {
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  border-color: var(--color-primary);

  & .stat-card__head,
  & .stat-card__link {
    color: var(--color-dark-text-secondary);
  }

  &:hover {
    border-color: var(--color-accent-hover);
    background-color: var(--color-accent-hover);
  }
}

/* source: blocks/activity.css */
/* Лента последних изменений в админке */

.activity {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.activity__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: var(--border-width) solid var(--color-border-light);

  &:last-child {
    border-bottom: 0;
  }

  @media (max-width: 480px) {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

.activity__icon {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--color-text-muted);
}

.activity__text {
  display: grid;
  gap: 2px;
  font-size: var(--text-sm);
}

.activity__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.activity__time {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;

  @media (max-width: 480px) {
    grid-column: 2;
  }
}


/* Sections */
/* source: sections/hero.css */
/* Первый экран: ч/б фото на тёмном фоне, крупный заголовок, вводный текст */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(100vh, 900px);
  overflow: hidden;
  color: var(--color-dark-text);
  background-color: var(--color-dark-bg);

  @media (max-width: 768px) {
    min-height: 640px;
  }
}

.hero--section {
  /* Общая геометрия внутренних страниц, независимо от длины описания. */
  height: 520px;
  min-height: 520px;
  align-items: flex-start;

  & .hero__inner {
    padding-top: 200px;
    padding-bottom: var(--space-16);
  }

  @media (max-width: 768px) {
    & .hero__inner { padding-top: 144px; }
    & .hero__title { font-size: clamp(var(--text-lg), 8vw, var(--text-xl)); }
  }
}

.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: grayscale(1);
  opacity: 0.55;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0.55) 0%, rgba(17, 17, 17, 0.2) 45%, rgba(17, 17, 17, 0.85) 100%);
}

.hero__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-6);
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: calc(var(--header-height) + var(--space-12)) var(--container-padding) var(--space-16);
  text-align: center;

  @media (max-width: 768px) {
    gap: var(--space-5);
    padding: calc(72px + var(--space-10)) 16px var(--space-12);
  }
}

.hero__title {
  display: grid;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-light);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;

  @media (max-width: 1024px) {
    font-size: var(--text-2xl);
  }

  @media (max-width: 768px) {
    font-size: var(--text-xl);
  }
}

.hero__title-line--small {
  font-size: 0.55em;
  letter-spacing: var(--tracking-wider);
}

.hero__dates {
  font-family: var(--font-accent);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-wide);

  @media (max-width: 768px) {
    font-size: var(--text-md);
  }
}

.hero__regalia {
  max-width: 60ch;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-dark-text-secondary);
}

.hero__intro {
  max-width: 64ch;
  font-family: var(--font-reading);
  font-size: var(--text-base);
  line-height: var(--leading-reading);
  color: var(--color-dark-text-secondary);
}

.hero--no-photo {
  background-color: var(--color-dark-surface);
}

.hero--preview {
  min-height: 640px;
}

.hero--preview.hero--section {
  min-height: 520px;
}

.hero__breadcrumbs {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-4) var(--container-padding);
}

/* source: sections/home-bio.css */
/* Главная: краткая биография — текст, ключевые факты и портрет */

.home-bio {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--space-16);

  @media (max-width: 1024px) {
    gap: var(--space-10);
  }

  @media (max-width: 768px) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.home-bio__text {
  display: grid;
  gap: var(--space-6);
}

.home-bio__lead {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
}

.home-bio__paragraph {
  font-family: var(--font-reading);
  line-height: var(--leading-reading);
  color: var(--color-text-secondary);
}

.home-bio__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin: var(--space-2) 0;
  padding: var(--space-6) 0;
  border-top: var(--border-width) solid var(--color-border);
  border-bottom: var(--border-width) solid var(--color-border);

  @media (max-width: 480px) {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
}

.home-bio__fact {
  display: grid;
  gap: var(--space-1);
}

.home-bio__fact-value {
  font-family: var(--font-accent);
  font-size: var(--text-xl);
  line-height: 1;
}

.home-bio__fact-label {
  margin: 0;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.home-bio__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.home-bio__photo {
  display: grid;
  gap: var(--space-3);

  & img {
    width: 100%;
    filter: grayscale(1);
  }

  @media (max-width: 768px) {
    order: -1;
    max-width: 420px;
  }
}

.home-bio__caption {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* source: sections/home-motion.css */
/* Главная: композиция портрета и движение архивных материалов.
   Все материалы доступны без JS; скрытие включается только после инициализации. */
.hero--home {
  min-height: min(100svh, 900px);

  & .hero__photo {
    object-position: 74% center;
    opacity: 1;
  }

  & .hero__overlay {
    background: linear-gradient(90deg, rgba(17, 17, 17, .68), transparent 70%),
      linear-gradient(180deg, rgba(17, 17, 17, .35), transparent 25%, rgba(17, 17, 17, .45));
  }

  & .hero__inner {
    width: 62%;
    max-width: 1000px;
    margin-left: 0;
    padding-inline: var(--space-8);
  }

  & .hero__intro { max-width: 52ch; }

  @media (max-width: 1024px) {
    min-height: 720px;

    & .hero__inner { width: 65%; padding-inline: var(--container-padding); }
    & .hero__photo { object-position: 68% center; }
  }

  @media (max-width: 768px) {
    min-height: 0;

    & .hero__photo {
      top: 76px;
      height: 440px;
      object-position: 78% top;
    }

    & .hero__overlay {
      top: 76px;
      height: 442px;
      background: linear-gradient(180deg, var(--color-dark-bg), transparent 15%, transparent 60%, var(--color-dark-bg));
    }

    & .hero__inner {
      width: 100%;
      max-width: none;
      padding: 470px var(--container-padding) var(--space-12);
    }
  }
}

.home-page {
  --home-reveal-distance: 16px;
  --home-motion-duration: 650ms;
  --home-motion-easing: cubic-bezier(.22, 1, .36, 1);

  & .teaser__image { overflow: hidden; }
  & .home-reveal--second { --reveal-delay: 120ms; }
  & .teaser:nth-child(2),
  & .memories__list > li:nth-child(2) .home-reveal { --reveal-delay: 100ms; }
  & .teaser:nth-child(3) { --reveal-delay: 200ms; }
  & .teaser:nth-child(4) { --reveal-delay: 300ms; }

  @media (max-width: 768px) {
    --home-reveal-distance: 8px;
    --home-motion-duration: 450ms;
  }
}

.home-page .timeline--animated {
  &::before {
    transform: translateX(-50%) scaleY(var(--timeline-progress, 1));
    transform-origin: top;
  }

  & .timeline__event::before {
    content: "";
    position: absolute;
    top: var(--space-3);
    left: calc(50% + 84px);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-border-strong);
  }

  & .timeline__event.is-current::before { background: var(--color-primary); }

  & .timeline__tick {
    width: 24px;
    height: 1px;
    margin-left: -12px;
    background: var(--color-border-strong);
    box-shadow: 0 -10px var(--color-border), 0 10px var(--color-border);
  }

  & .timeline__tick::before { content: none; }

  @media (max-width: 768px) {
    &::before { transform: scaleY(var(--timeline-progress, 1)); }
    & .timeline__event::before { left: -2px; top: var(--space-5); }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero--home .hero__photo { animation: home-portrait-in 1000ms ease-out both; }
  .hero--home .hero__inner > * {
    animation: home-material-in 800ms var(--home-motion-easing) both;
  }
  .hero--home .hero__title { animation-delay: 100ms; }
  .hero--home .hero__dates { animation-delay: 200ms; }
  .hero--home .hero__regalia { animation-delay: 300ms; }
  .hero--home .hero__intro { animation-delay: 400ms; }

  .home-page.is-motion-ready {
    & .home-reveal,
    & .timeline__year > span,
    & .timeline__content,
    & .timeline__tick {
      transition: opacity var(--home-motion-duration) ease,
        transform var(--home-motion-duration) var(--home-motion-easing);
      transition-delay: var(--reveal-delay, 0ms);
    }

    & .home-reveal.is-pending,
    & .timeline__event.is-pending .timeline__year > span,
    & .timeline__event.is-pending .timeline__content,
    & .timeline__event.is-pending .timeline__tick {
      opacity: 0;
      transform: translateY(var(--home-reveal-distance));
    }

    & .timeline__year > span:nth-child(2) { transition-delay: 90ms; }
    & .timeline__content { transition-delay: 160ms; }
    & .timeline__event--left.is-pending .timeline__content { transform: translateX(calc(-1 * var(--home-reveal-distance))); }
    & .timeline__event--right.is-pending .timeline__content { transform: translateX(var(--home-reveal-distance)); }

    & .timeline__media img {
      clip-path: inset(0);
      transition: clip-path 700ms var(--home-motion-easing) 240ms;
    }

    & .timeline__event.is-pending .timeline__media img { clip-path: inset(0 0 100%); }
    & .timeline__event.is-pending::before { opacity: 0; }

    & .quote__author { transition: opacity 600ms ease 240ms; }
    & .quote.is-pending .quote__author { opacity: 0; }

    & .home-reveal:focus-within {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .home-page .teaser__image img { transition: transform 600ms var(--home-motion-easing); }
    .home-page .teaser:hover .teaser__image img,
    .home-page .teaser:focus-within .teaser__image img { transform: scale(1.035); }
  }
}

@keyframes home-portrait-in {
  from { opacity: .2; }
  to { opacity: 1; }
}

@keyframes home-material-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media print {
  .home-page .hero__photo,
  .home-page .hero__inner > * { animation: none; }
  .home-page.is-motion-ready .home-reveal,
  .home-page.is-motion-ready .timeline__event .timeline__year > span,
  .home-page.is-motion-ready .timeline__event .timeline__content,
  .home-page.is-motion-ready .timeline__event .timeline__tick,
  .home-page.is-motion-ready .quote .quote__author {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .home-page.is-motion-ready .timeline__event .timeline__media img { clip-path: none; }
  .home-page.is-motion-ready .timeline__event::before { opacity: 1; }
  .home-page .timeline--animated::before { transform: translateX(-50%); }
}

/* source: sections/memories-hero.css */
/* Архивный снимок: монохром, кадрирование и медленное приближение/отдаление. */
.hero--memories {
  --ambient-zoom-start: 1.08;
  --ambient-zoom-end: 1.2;
  --ambient-shift: -3%;
  & .hero__photo {
    object-position: 54% 48%;
    opacity: .85;
    transform: scale(var(--ambient-zoom-start)) translate(var(--ambient-shift), 0);
    transform-origin: 54% 50%;
  }

  & .hero__overlay {
    background: linear-gradient(180deg, rgba(17, 17, 17, .65), rgba(17, 17, 17, .42) 35%, rgba(17, 17, 17, .78));
  }

  @media (max-width: 768px) {
    --ambient-zoom-start: 1.04;
    --ambient-zoom-end: 1.12;
    --ambient-shift: 0%;
    & .hero__photo {
      top: 72px;
      height: clamp(210px, 65vw, 360px);
      object-position: 57% center;
      mask-image: linear-gradient(180deg, transparent, #000 12%, #000 80%, transparent);
    }
    & .hero__overlay {
      background: linear-gradient(180deg, var(--color-dark-bg) 50px, rgba(17, 17, 17, .4) 110px, rgba(17, 17, 17, .55) 230px, var(--color-dark-bg) 390px);
    }
  }
}

/* source: sections/biography-hero.css */
/* Кабинет: лицо над заголовком, стол сохраняется в широком кадре. */
.hero--biography {
  --ambient-zoom-start: 1.04;
  --ambient-zoom-end: 1.16;
  --ambient-shift: 0%;

  & .hero__photo {
    height: calc(100% - 64px);
    object-position: 52% 45%;
    mask-image: linear-gradient(180deg, #000 75%, transparent);
    opacity: .9;
    transform: scale(var(--ambient-zoom-start));
    transform-origin: 52% 28%;
  }

  & .hero__overlay {
    background: linear-gradient(180deg, rgba(17, 17, 17, .65), rgba(17, 17, 17, .22) 27%, rgba(17, 17, 17, .65) 56%, rgba(17, 17, 17, .85));
  }

  @media (max-width: 768px) {
    --ambient-zoom-end: 1.12;

    & .hero__photo {
      top: 32px;
      height: 240px;
      object-position: 52% center;
      mask-image: linear-gradient(180deg, transparent, #000 12%, #000 75%, transparent);
    }

    & .hero__overlay {
      background: linear-gradient(180deg, var(--color-dark-bg) 50px, rgba(17, 17, 17, .2) 125px, rgba(17, 17, 17, .45) 240px, var(--color-dark-bg) 370px);
    }

  }
}

/* source: sections/gallery-hero.css */
.hero--gallery {
  --ambient-zoom-start: 1.04;
  --ambient-zoom-end: 1.16;
  --ambient-shift: 0%;

  & .hero__photo {
    object-position: 35% center;
    opacity: .85;
    transform: scale(var(--ambient-zoom-start));
    transform-origin: 25% 45%;
  }

  & .hero__overlay {
    background: linear-gradient(180deg, rgba(17, 17, 17, .65), rgba(17, 17, 17, .4) 30%, rgba(17, 17, 17, .8));
  }

  @media (max-width: 768px) {
    --ambient-zoom-end: 1.12;
    & .hero__photo { object-position: 18% center; }
  }
}

/* source: sections/publications-hero.css */
/* Тематическая иллюстрация: научные труды и рукописи. */
.hero--publications {
  --ambient-zoom-start: 1.04;
  --ambient-zoom-end: 1.16;
  --ambient-shift: 0%;

  & .hero__photo {
    object-position: center;
    opacity: .85;
    transform: scale(var(--ambient-zoom-start));
    transform-origin: 60% 55%;
  }

  & .hero__overlay {
    background: linear-gradient(180deg, rgba(17, 17, 17, .6), rgba(17, 17, 17, .3) 35%, rgba(17, 17, 17, .8));
  }

  @media (max-width: 768px) {
    --ambient-zoom-end: 1.12;
    & .hero__photo { object-position: 72% center; }
  }
}

/* source: sections/contacts-hero.css */
/* Семейная переписка: общий для разделов эффект плавного движения. */
.hero--contacts {
  --ambient-zoom-start: 1.04;
  --ambient-zoom-end: 1.16;
  --ambient-shift: 0%;

  & .hero__photo {
    object-position: center;
    opacity: .85;
    transform: scale(var(--ambient-zoom-start));
    transform-origin: 65% 55%;
  }

  & .hero__overlay {
    background: linear-gradient(180deg, rgba(17, 17, 17, .6), rgba(17, 17, 17, .3) 35%, rgba(17, 17, 17, .8));
  }

  @media (max-width: 768px) {
    --ambient-zoom-end: 1.12;
    & .hero__photo { object-position: 85% center; }
  }
}

/* source: sections/slinko-100-hero.css */
/* Юбилейная конференция: монохромный зал и общее движение фона. */
.hero--slinko-100 {
  --ambient-zoom-start: 1.04;
  --ambient-zoom-end: 1.16;
  --ambient-shift: 0%;

  & .hero__photo {
    object-position: center;
    opacity: .85;
    transform: scale(var(--ambient-zoom-start));
    transform-origin: 70% 55%;
  }

  & .hero__overlay {
    background: linear-gradient(180deg, rgba(17, 17, 17, .6), rgba(17, 17, 17, .3) 35%, rgba(17, 17, 17, .8));
  }

  @media (max-width: 768px) {
    --ambient-zoom-end: 1.12;
    & .hero__photo { object-position: 78% center; }
  }
}

/* source: sections/ambient-hero.css */
.hero__motion-toggle {
  position: absolute;
  right: var(--container-padding);
  bottom: var(--space-5);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  color: var(--color-dark-text-secondary);
  background: rgba(17, 17, 17, .65);
  border: 1px solid var(--color-dark-border);
  font-size: var(--text-xs);
  cursor: pointer;

  &:hover { color: var(--color-dark-text); border-color: currentColor; }
  &:focus-visible { outline-color: var(--color-dark-text); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero--ambient.is-motion-enabled .hero__photo {
    animation: ambient-photo-drift 18s ease-in-out infinite alternate;
    will-change: transform;
  }

  .hero--ambient.is-motion-paused .hero__photo { animation-play-state: paused; }
}

@keyframes ambient-photo-drift {
  from { transform: scale(var(--ambient-zoom-start)) translate(var(--ambient-shift), 0); }
  to { transform: scale(var(--ambient-zoom-end)) translate(var(--ambient-shift), -1%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__motion-toggle { display: none; }
}

@media print {
  .hero--ambient.is-motion-enabled .hero__photo { animation: none; }
  .hero__motion-toggle { display: none; }
}

/* source: sections/album-view.css */
/* Галерея: открытый альбом — шапка альбома, сетка фото, навигация между альбомами */

.album-view {
  display: grid;
  gap: var(--space-10);
}

.album-view__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: var(--border-width) solid var(--color-border);
}

.album-view__heading {
  display: grid;
  gap: var(--space-3);
}

.album-view__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-muted);

  &:hover {
    color: var(--color-primary);
  }
}

.album-view__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.album-view__period {
  font-family: var(--font-accent);
  font-size: var(--text-md);
  color: var(--color-text);
}

.album-view__description {
  font-family: var(--font-reading);
  color: var(--color-text-secondary);
}

.album-view__nav {
  padding-top: var(--space-8);
  border-top: var(--border-width) solid var(--color-border);
}

/* source: sections/auth-page.css */
/* Страница входа в админку */

.auth-page {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-8);
  min-height: 100vh;
  padding: var(--space-10) 16px;
  background-color: var(--color-surface);
}

.auth-page__brand {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  text-align: center;
  text-decoration: none;
  color: var(--color-text);
}

.auth-page__name {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.auth-page__dates {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.auth-page__back {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* source: sections/design-system.css */
/* Служебная раскладка страницы дизайн-системы: prototypes/design-system/ui-design-system.html */

.ds {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);

  @media (max-width: 1024px) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ds__nav {
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  padding: var(--space-8) var(--space-5);
  overflow-y: auto;
  border-right: var(--border-width) solid var(--color-border);

  @media (max-width: 1024px) {
    position: static;
    max-height: none;
    border-right: 0;
    border-bottom: var(--border-width) solid var(--color-border);
  }
}

.ds__brand {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-8);
}

.ds__brand-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.ds__brand-subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.ds__nav-group {
  margin: var(--space-6) 0 var(--space-2);
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.ds__nav-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;

  @media (max-width: 1024px) {
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  }
}

.ds__nav-link {
  display: block;
  padding: var(--space-1) 0;
  font-size: var(--text-xs);
  text-decoration: none;
  color: var(--color-text-secondary);

  &:hover {
    color: var(--color-primary);
    text-decoration: underline;
  }
}

.ds__main {
  min-width: 0;
}

.ds__intro {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-12) var(--space-12);
  border-bottom: var(--border-width) solid var(--color-border);

  @media (max-width: 768px) {
    padding: var(--space-10) 16px var(--space-8);
  }
}

.ds-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  padding: var(--space-16) var(--space-12);
  border-bottom: var(--border-width) solid var(--color-border);
  scroll-margin-top: var(--space-4);

  @media (max-width: 768px) {
    padding: var(--space-10) 16px;
  }
}

.ds-section__header {
  display: grid;
  gap: var(--space-2);
}

.ds-section__source {
  font-size: var(--text-xs);
  color: var(--color-text-muted);

  & code {
    color: var(--color-text-secondary);
  }
}

.ds-group {
  display: grid;
  gap: var(--space-4);
}

.ds-group__title {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
}

.ds-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.ds-row--start {
  align-items: flex-start;
}

.ds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-6);
}

.ds-grid--wide {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));

  @media (max-width: 480px) {
    grid-template-columns: 1fr;
  }
}

.ds-demo {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.ds-demo__label {
  font-size: 0.75rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.ds-canvas {
  padding: var(--space-8);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);

  @media (max-width: 480px) {
    padding: var(--space-4);
  }
}

.ds-canvas--dark {
  color: var(--color-dark-text);
  background-color: var(--color-dark-bg);
  border-color: var(--color-dark-bg);
}

.ds-canvas--flush {
  padding: 0;
  overflow: hidden;
}

.ds-canvas--white {
  background-color: var(--color-bg);
}

.ds-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-4);
}

.ds-swatch {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

.ds-swatch__color {
  height: 72px;
  border: var(--border-width) solid var(--color-border);
}

.ds-swatch__name {
  font-weight: var(--weight-medium);
}

.ds-swatch__value {
  font-family: ui-monospace, Consolas, monospace;
  color: var(--color-text-muted);
}

.ds-swatch__color--bg-primary { background-color: var(--color-bg); }
.ds-swatch__color--bg-secondary { background-color: var(--color-secondary); }
.ds-swatch__color--bg-tertiary { background-color: var(--color-surface); }
.ds-swatch__color--text-primary { background-color: var(--color-text); }
.ds-swatch__color--text-secondary { background-color: var(--color-text-secondary); }
.ds-swatch__color--text-muted { background-color: var(--color-text-muted); }
.ds-swatch__color--text-inverse { background-color: var(--color-text-inverse); }
.ds-swatch__color--accent { background-color: var(--color-accent); }
.ds-swatch__color--accent-hover { background-color: var(--color-accent-hover); }
.ds-swatch__color--warm { background-color: var(--color-warm); }
.ds-swatch__color--warm-hover { background-color: var(--color-warm-hover); }
.ds-swatch__color--warm-light { background-color: var(--color-warm-light); }
.ds-swatch__color--success { background-color: var(--color-success); }
.ds-swatch__color--success-bg { background-color: var(--color-success-bg); }
.ds-swatch__color--warning { background-color: var(--color-warning); }
.ds-swatch__color--warning-bg { background-color: var(--color-warning-bg); }
.ds-swatch__color--danger { background-color: var(--color-danger); }
.ds-swatch__color--danger-bg { background-color: var(--color-danger-bg); }
.ds-swatch__color--info { background-color: var(--color-info); }
.ds-swatch__color--info-bg { background-color: var(--color-info-bg); }
.ds-swatch__color--border-light { background-color: var(--color-border-light); }
.ds-swatch__color--border { background-color: var(--color-border); }
.ds-swatch__color--border-strong { background-color: var(--color-border-strong); }
.ds-swatch__color--dark-bg { background-color: var(--color-dark-bg); }
.ds-swatch__color--dark-surface { background-color: var(--color-dark-surface); }
.ds-swatch__color--dark-raised { background-color: var(--color-dark-raised); }
.ds-swatch__color--dark-text-secondary { background-color: var(--color-dark-text-secondary); }
.ds-swatch__color--dark-text-muted { background-color: var(--color-dark-text-muted); }
.ds-swatch__color--dark-border { background-color: var(--color-dark-border); }

.ds-type {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-6);
  padding: var(--space-4) 0;
  border-bottom: var(--border-width) solid var(--color-border-light);

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

.ds-type__meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.ds-type__sample {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ds-type__sample--xs { font-size: var(--text-xs); }
.ds-type__sample--sm { font-size: var(--text-sm); }
.ds-type__sample--base { font-size: var(--text-base); }
.ds-type__sample--md { font-size: var(--text-md); }
.ds-type__sample--lg { font-size: var(--text-lg); line-height: 1.3; }
.ds-type__sample--xl { font-size: var(--text-xl); line-height: 1.2; }
.ds-type__sample--2xl { font-size: var(--text-2xl); line-height: 1.1; }
.ds-type__sample--3xl { font-size: var(--text-3xl); line-height: 1.05; }
.ds-type__sample--4xl { font-size: var(--text-4xl); line-height: 0.95; }
.ds-type__sample--heading { font-family: var(--font-heading); }
.ds-type__sample--reading { font-family: var(--font-reading); }
.ds-type__sample--accent { font-family: var(--font-accent); }
.ds-type__sample--light { font-weight: var(--weight-light); }
.ds-type__sample--regular { font-weight: var(--weight-regular); }
.ds-type__sample--medium { font-weight: var(--weight-medium); }
.ds-type__sample--bold { font-family: var(--font-reading); font-weight: var(--weight-bold); }
.ds-type__sample--tight { letter-spacing: var(--tracking-tight); }
.ds-type__sample--normal { letter-spacing: var(--tracking-normal); }
.ds-type__sample--wide { letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.ds-type__sample--wider { letter-spacing: var(--tracking-wider); text-transform: uppercase; }

.ds-scale {
  display: grid;
  gap: var(--space-3);
}

.ds-scale__row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-xs);
}

.ds-scale__bar {
  height: 16px;
  background-color: var(--color-primary);
}

.ds-scale__bar--0 { width: 1px; background-color: var(--color-border-strong); }
.ds-scale__bar--1 { width: var(--space-1); }
.ds-scale__bar--2 { width: var(--space-2); }
.ds-scale__bar--3 { width: var(--space-3); }
.ds-scale__bar--4 { width: var(--space-4); }
.ds-scale__bar--5 { width: var(--space-5); }
.ds-scale__bar--6 { width: var(--space-6); }
.ds-scale__bar--8 { width: var(--space-8); }
.ds-scale__bar--10 { width: var(--space-10); }
.ds-scale__bar--12 { width: var(--space-12); }
.ds-scale__bar--16 { width: var(--space-16); }
.ds-scale__bar--20 { width: var(--space-20); }
.ds-scale__bar--24 { width: var(--space-24); }

.ds-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-6);
}

.ds-tile {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-xs);
}

.ds-tile__box {
  height: 96px;
  background-color: var(--color-secondary);
  border: var(--border-width) solid var(--color-border-strong);
}

.ds-tile__box--radius-none { border-radius: var(--radius-none); }
.ds-tile__box--radius-sm { border-radius: var(--radius-sm); }
.ds-tile__box--radius-md { border-radius: var(--radius-md); }
.ds-tile__box--radius-lg { border-radius: var(--radius-lg); }
.ds-tile__box--radius-xl { border-radius: var(--radius-xl); }
.ds-tile__box--radius-2xl { border-radius: var(--radius-2xl); }
.ds-tile__box--radius-full { border-radius: var(--radius-full); }
.ds-tile__box--radius-button { border-radius: var(--radius-button); }
.ds-tile__box--radius-card { border-radius: var(--radius-card); }
.ds-tile__box--radius-badge { border-radius: var(--radius-badge); }
.ds-tile__box--radius-input { border-radius: var(--radius-input); }
.ds-tile__box--radius-image { border-radius: var(--radius-image); }

.ds-tile__box--shadow { background-color: var(--color-bg); border-color: var(--color-border-light); }
.ds-tile__box--shadow-xs { box-shadow: var(--shadow-xs); }
.ds-tile__box--shadow-sm { box-shadow: var(--shadow-sm); }
.ds-tile__box--shadow-md { box-shadow: var(--shadow-md); }
.ds-tile__box--shadow-lg { box-shadow: var(--shadow-lg); }
.ds-tile__box--shadow-xl { box-shadow: var(--shadow-xl); }
.ds-tile__box--shadow-card { box-shadow: var(--shadow-card); }

.ds-transition {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-xs);
}

.ds-transition__track {
  height: 56px;
  padding: var(--space-2);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
}

.ds-transition__dot {
  width: 40px;
  height: 40px;
  background-color: var(--color-primary);
}

.ds-transition:hover .ds-transition__dot,
.ds-transition:focus-within .ds-transition__dot {
  transform: translateX(160px);
  background-color: var(--color-warm);
}

.ds-transition__dot--fast { transition: transform var(--transition-fast), background-color var(--transition-fast); }
.ds-transition__dot--base { transition: transform var(--transition-base), background-color var(--transition-base); }
.ds-transition__dot--slow { transition: transform var(--transition-slow), background-color var(--transition-slow); }

.ds-parts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-parts__item {
  padding: var(--space-1) var(--space-2);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
}

.ds-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.ds-mobile-frame {
  width: 100%;
  max-width: 390px;
  overflow: hidden;
  border: var(--border-width) solid var(--color-border-strong);
}


/* Utils */
/* source: utils/utils.css */
/* Утилиты. Подключаются последними */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);

  @media (max-width: 1024px) {
    padding-left: 16px;
    padding-right: 16px;
  }

  @media (max-width: 480px) {
    padding-left: 12px;
    padding-right: 12px;
  }
}

.container--narrow {
  max-width: calc(var(--container-narrow) + var(--container-padding) * 2);
}

.section {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);

  @media (max-width: 768px) {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }
}

.section--surface {
  background-color: var(--color-surface);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  transform: translateY(-200%);

  &:focus {
    transform: none;
  }
}

.stack {
  display: grid;
  gap: var(--space-4);
}

.stack--sm {
  gap: var(--space-2);
}

.stack--lg {
  gap: var(--space-8);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

/* Вид заголовка без смены уровня в иерархии документа */
.title-1,
.title-2,
.title-3,
.title-4,
.title-5,
.title-6 {
  font-family: var(--font-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.title-1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);

  @media (max-width: 1024px) {
    font-size: var(--text-2xl);
  }

  @media (max-width: 768px) {
    font-size: var(--text-xl);
  }
}

.title-2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-light);

  @media (max-width: 768px) {
    font-size: var(--text-lg);
  }
}

.title-3 {
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
}

.title-4 {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}

.title-5 {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
}

.title-6 {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-reading {
  font-family: var(--font-reading);
  line-height: var(--leading-reading);
}

.text-lead {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--color-text-secondary);
}

.text-small {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.text-caption {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.text-year {
  font-family: var(--font-accent);
  font-size: var(--text-4xl);
  line-height: 0.95;

  @media (max-width: 768px) {
    font-size: var(--text-2xl);
  }
}

.text-quote {
  font-family: var(--font-accent);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: var(--leading-snug);
}

.text-uppercase {
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.text-center {
  text-align: center;
}

.mono-image {
  filter: grayscale(1);
}

.mt-0 {
  margin-top: 0;
}

.mt-4 {
  margin-top: var(--space-4);
}

.mt-8 {
  margin-top: var(--space-8);
}