* {
  margin: 0;
  padding: 0;
}

/*
  Self-hosted Dela Gothic One — только для тайтла в хедере главной.
  Файл: assets/fonts/DelaGothicOne-Regular.ttf
*/
@font-face {
  font-family: "Dela Gothic One";
  src: url("../fonts/DelaGothicOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --padding: 1.5rem;

  /* Примитивы — все hex/rgba в одном месте */

  /* текст, фон тегов */
  --color-raw-black: #000;
  --color-raw-black-dark: #C5D6FF;
  --color-raw-white: #fff;
  --color-raw-white-dark: #212150;

  /* overlay (light black-50, dark black-60) */
  --color-raw-black-50: rgba(0, 0, 0, 0.5);
  --color-raw-black-60: rgba(0, 0, 0, 0.6);

  /* tag-hover-bg (light white-60, dark white-15) */
  --color-raw-white-60: rgba(255, 255, 255, 0.6);
  --color-raw-white-15: rgba(33, 33, 80, 0.70);

  /* ссылки: link, link-hover (light blue-65, dark blue-light), tag-active-bg */
  --color-raw-blue: #0500ff;
  --color-raw-blue-dark: #0099FE;
  --color-raw-blue-65: rgba(5, 0, 255, 0.65);
  --color-raw-blue-light: rgba(0, 153, 245, 0.8);

  /* фон страницы (light lavender, dark charcoal) */
  --color-raw-lavender: #E6E6FA;
  --color-raw-charcoal: #000036;

  /* color-light, text-grey */
  --color-raw-grey-light: #efefef;
  --color-raw-grey-light-dark: #2d2d2d;

  /* прямоугольники загрузки blur-up: 2 цвета — светлая и тёмная тема */
  --color-blur-placeholder-light: rgba(255, 255, 255, 0.2);
  --color-blur-placeholder-dark: rgba(255, 255, 255, 0.1);

  /* text-grey */
  --color-raw-grey: #6C737D;
  --color-raw-grey-dark: #7782A6;

  /* блоки кода: border, light-grey, comment, white */
  --color-raw-grey-200: #c5c9c6;
  --color-raw-grey-200-dark: #9ca3af;
  --color-raw-grey-300: #cacbd1;
  --color-raw-grey-300-dark: #4b5563;
  --color-raw-grey-400: #a9aaad;
  --color-raw-grey-400-dark: #6b7280;
  --color-raw-grey-900: #333;
  --color-raw-grey-900-dark: #4b5563;

  /* подсветка синтаксиса в блоках кода; yellow-sun — иконка солнца при ховере */
  --color-raw-red: #d16464;
  --color-raw-red-dark: #f87171;
  --color-raw-orange: #de935f;
  --color-raw-orange-dark: #fb923c;
  --color-raw-yellow: #f0c674;
  --color-raw-yellow-dark: #facc15;
  --color-raw-yellow-sun: #facc15;
  --color-raw-green: #a7bd68;
  --color-raw-green-dark: #4ade80;
  --color-raw-aqua: #8abeb7;
  --color-raw-aqua-dark: #2dd4bf;
  --color-raw-blue-muted: #7e9abf;
  --color-raw-blue-muted-dark: #60a5fa;
  --color-raw-purple: #b294bb;
  --color-raw-purple-dark: #c084fc;

  /* Семантика → примитивы */
  --color-black: var(--color-raw-black);
  --color-white: var(--color-raw-white);
  --color-grey: var(--color-raw-grey);
  --color-light: var(--color-raw-grey-light);
  --color-text: var(--color-raw-black);
  --color-text-grey: var(--color-raw-grey);
  --color-background: var(--color-raw-lavender);
  --color-tag-background: var(--color-raw-white);
  --color-link: var(--color-raw-blue);
  --color-link-hover: var(--color-raw-blue-65);
  --color-tag-active-bg: var(--color-raw-blue);
  --color-tag-hover: var(--color-link);
  --color-card-hover: var(--color-link);
  --color-tag-hover-bg: var(--color-raw-white-60);
  --color-overlay: var(--color-raw-black-50);
  --color-code-border: var(--color-raw-grey-900);
  --color-code-light-grey: var(--color-raw-grey-300);
  --color-code-comment: var(--color-raw-grey-400);
  --color-code-white: var(--color-raw-grey-200);
  --color-code-red: var(--color-raw-red);
  --color-code-orange: var(--color-raw-orange);
  --color-code-yellow: var(--color-raw-yellow);
  --color-code-green: var(--color-raw-green);
  --color-code-aqua: var(--color-raw-aqua);
  --color-code-blue: var(--color-raw-blue-muted);
  --color-code-purple: var(--color-raw-purple);
  --color-theme-toggle-sun: var(--color-raw-yellow-sun);

  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

/* Светлая тема вторая: белый фон, теги лавандовые 50%, ховер 30% */
html[data-theme="light-v2"] {
  --color-background: #fff;
  --color-tag-background: rgba(230, 226, 250, 0.5);
  --color-tag-hover-bg: rgba(230, 226, 250, 0.3);
}

/* Тёмная тема — переопределяем только семантику */
html[data-theme="dark"] {
  --color-black: var(--color-raw-black-dark);
  --color-white: var(--color-raw-white-dark);
  --color-grey: var(--color-raw-grey-dark);
  --color-light: var(--color-raw-grey-light-dark);
  --color-text: var(--color-raw-black-dark);
  --color-text-grey: var(--color-raw-grey-dark);
  --color-background: var(--color-raw-charcoal);
  --color-tag-background: var(--color-raw-white-dark);
  --color-link: var(--color-raw-blue-dark);
  --color-link-hover: var(--color-raw-blue-light);
  --color-tag-active-bg: var(--color-raw-blue-dark);
  --color-tag-hover-bg: var(--color-raw-white-15);
  --color-overlay: var(--color-raw-black-60);
  --color-code-border: var(--color-raw-grey-900-dark);
  --color-code-light-grey: var(--color-raw-grey-300-dark);
  --color-code-comment: var(--color-raw-grey-400-dark);
  --color-code-white: var(--color-raw-grey-200-dark);
  --color-code-red: var(--color-raw-red-dark);
  --color-code-orange: var(--color-raw-orange-dark);
  --color-code-yellow: var(--color-raw-yellow-dark);
  --color-code-green: var(--color-raw-green-dark);
  --color-code-aqua: var(--color-raw-aqua-dark);
  --color-code-blue: var(--color-raw-blue-muted-dark);
  --color-code-purple: var(--color-raw-purple-dark);
}

html[data-theme="dark"] .header-col-title .h1,
html[data-theme="dark"] .header-col-bio .color-grey {
  color: var(--color-black);
}

html[data-theme="dark"] .header:has(.header-col-title) .menu-pages a,
html[data-theme="dark"] .header:has(.header-col-title) .social a {
  color: var(--color-link);
}

/* синие ссылки (хедер) и теги — ховер только на устройствах с указателем */
@media (hover: hover) {
  html[data-theme="dark"] .header:has(.header-col-title) .menu-pages a:hover,
  html[data-theme="dark"] .header:has(.header-col-title) .social a:hover {
    color: var(--color-link-hover);
    opacity: 0.8;
  }
  html[data-theme="dark"] .home-tag:hover,
  html[data-theme="dark"] .note-tags a:hover {
    color: var(--color-tag-hover);
  }
}

/* активный тег — исключение: цвет текста --color-raw-white (только в тёмной теме) */
html[data-theme="dark"] .home-tag--active {
  color: var(--color-raw-white);
}

/* Переключатель темы */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  padding: 0;
  flex-shrink: 0;
  opacity: 1;
  transition: filter 0.15s ease;
}

.theme-toggle__icon {
  display: none;
  width: 1rem;
  height: 1rem;
}

.theme-toggle__icon svg,
.theme-toggle__icon img {
  width: 1rem;
  height: 1rem;
  display: block;
}

/* Тёмная тема: солнце инвертируем для видимости на тёмном фоне */
html[data-theme="dark"] .theme-toggle__icon--sun img {
  filter: invert(1);
}

/* Светлая/тёмная тема: ховер по иконке темы — только на устройствах с указателем (не тач) */
@media (hover: hover) {
  html[data-theme="light"] .theme-toggle:hover .theme-toggle__icon--moon img,
  html[data-theme="light-v2"] .theme-toggle:hover .theme-toggle__icon--moon img {
    filter: invert(8%) sepia(100%) saturate(7000%) hue-rotate(246deg);
  }
  html[data-theme="dark"] .theme-toggle:hover .theme-toggle__icon--sun img {
    filter: invert(1) sepia(0.8) saturate(10) hue-rotate(10deg);
  }
}

/* Светлая тема: показываем луну (клик → тёмная) */
html[data-theme="light"] .theme-toggle__icon--moon,
html[data-theme="light-v2"] .theme-toggle__icon--moon {
  display: block;
}

/* Тёмная тема: показываем солнце (клик → светлая) */
html[data-theme="dark"] .theme-toggle__icon--sun {
  display: block;
}

/* Иконка темы в ячейке с контактами — внутренние страницы (theme внутри contacts) */
.header-internal__contacts {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding-left: 0;
}

.header-internal__contacts .social {
  flex: 0 0 auto;
}

/* Форма поиска в хедере */
.search-form {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.search-form__wrap {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: -0.2rem;
}
.search-form__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  flex-shrink: 0;
  padding-top: 0.25em;
}
.search-form__icon svg {
  width: 2rem;
  height: 2rem;
}
.search-form__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.search-form__input {
  font: inherit;
  font-size: 2rem;
  padding: 0.25rem 0 0.25rem 0;
  border: none;
  border-radius: 0;
  min-width: 8rem;
  max-width: 12rem;
  background: transparent;
  color: var(--color-text);
  caret-color: var(--color-link);
  outline: none;
}
.search-form__input::placeholder {
  color: var(--color-text-grey);
  opacity: 0.6;
}
.search-form__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.search-form__input::-ms-clear {
  display: none;
}
@media (hover: hover) {
  .search-form__input:focus {
    outline: none;
  }
  .search-form__wrap:not(:focus-within):hover .search-form__icon {
    color: var(--color-link);
  }
  .search-form__wrap:not(:focus-within):hover .search-form__input {
    color: var(--color-link);
  }
  .search-form__wrap:not(:focus-within):hover .search-form__input::placeholder {
    color: var(--color-text-grey);
    opacity: 0.6;
  }
}

/* Иконка темы — hug контента */
.header-col-theme,
.header-internal__theme {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
}

/* Колонка: иконка поиска сверху, переключатель темы снизу. Отступ между иконками — паддингом, gap: 0 */
.header-actions {
  flex-direction: column;
  gap: 0;
}

.header-col-theme .theme-toggle,
.header-internal__theme .theme-toggle {
  padding-top: 0;
}

/* Отступ между иконкой поиска и переключателем темы */
.header-internal__theme > .theme-toggle,
.header-col-theme > .theme-toggle {
  padding-top: 0.75rem;
}

/* Иконка поиска в хедере — размер как у переключателя темы (1rem) */
.header-search-link {
  display: block;
  line-height: 0;
  color: inherit;
}
.header-search-link svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

/* Тёмная тема: иконки поиска и переключателя темы как текст в хедере (главная и внутренние) */
html[data-theme="dark"] .header:has(.header-col-title) .header-search-link,
html[data-theme="dark"] .header--internal .header-search-link {
  color: var(--color-text);
}
html[data-theme="dark"] .header:has(.header-col-title) .theme-toggle,
html[data-theme="dark"] .header--internal .theme-toggle {
  color: var(--color-text);
}
html[data-theme="dark"] .header:has(.header-col-title) .theme-toggle__icon--sun img,
html[data-theme="dark"] .header--internal .theme-toggle__icon--sun img {
  filter: invert(0.8) sepia(0.4) saturate(4) hue-rotate(200deg);
}

/* Ховер: светлая тема — синий как у луны; тёмная — как у ссылок в хедере */
@media (hover: hover) {
  .header:has(.header-col-title) .header-search-link:hover,
  .header--internal .header-search-link:hover {
    color: var(--color-link);
  }
  html[data-theme="dark"] .header:has(.header-col-title) .header-search-link:hover,
  html[data-theme="dark"] .header--internal .header-search-link:hover {
    color: var(--color-link);
  }
  html[data-theme="dark"] .header:has(.header-col-title) .theme-toggle:hover .theme-toggle__icon--sun img,
  html[data-theme="dark"] .header--internal .theme-toggle:hover .theme-toggle__icon--sun img {
    filter: invert(1) sepia(0.8) saturate(10) hue-rotate(10deg);
  }
}

html {
  font-family: var(--font-family-sans);
  color: var(--color-text);
  background: var(--color-background);
  font-size: 20px; /* базовый rem. по дефолту 16px */
}
img {
  width: 100%;
}
.img[data-contain] img,
.img-simple img {
  width: auto;
  height: auto;
}
body {
  padding: 0 2rem var(--padding) 2rem;
  max-width: 113rem;
  margin: 0 auto;
}
li {
  list-style: none;
}
a {
  color: currentColor;
  text-decoration: none;
  transition: color 0.1s ease;
}

a:hover {
  color: var(--color-link);
}
button {
  font: inherit;
  background: none;
  border: 0;
  color: currentColor;
  cursor: pointer;
}
strong, b {
  font-weight: 600;
}
small {
  font-size: inherit;
  color: var(--color-text-grey);
}

.bg-light {
  background-color: var(--color-light);
}
.color-grey {
  color: var(--color-text-grey);
}

.header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.logo {
  padding: 1rem;
  padding-top: calc(1rem - 0.45rem);
  padding-left: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
/*  font-weight: 600; */
  cursor: pointer;
}

.logo-avatar-wrapper {
  position: relative;
  display: inline-block;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.logo-avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  transition: opacity 0.2s ease;
}

.logo-avatar--light {
  opacity: 1;
}

.logo-avatar--dark {
  opacity: 0;
}

html[data-theme="dark"] .logo-avatar--light {
  opacity: 0;
}

html[data-theme="dark"] .logo-avatar--dark {
  opacity: 1;
}

.logo-text {
  display: inline-block;
}

.home-cover-wrapper {
  position: relative;
  width: 100vw;
  height: 30vh;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-bottom: 1rem;
  overflow: hidden;
}

.home-cover {
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  background-position: left center;
  background-size: auto 100%;
  transition: opacity 0.2s ease;
}

.home-cover--light {
  opacity: 1;
}

.home-cover--dark {
  opacity: 0;
}

html[data-theme="dark"] .home-cover--light {
  opacity: 0;
}

html[data-theme="dark"] .home-cover--dark {
  opacity: 1;
}

/* Главная: хедер с тремя колонками на 1400+, ниже — флекс */
.header:has(.header-col-title) {
  margin-bottom: 3rem;
  --home-header-link-gap: 0.3rem;
}

/* Меню в хедере — ссылки с маленькой буквы (главная и внутренние) */
.header .menu-pages a,
.header .social a {
  text-transform: lowercase;
}

/* Меню на главной — синие ссылки */
.header:has(.header-col-title) .menu-pages a,
.header:has(.header-col-title) .social a {
  color: var(--color-link);
}
@media (hover: hover) {
  .header:has(.header-col-title) .menu-pages a:hover,
  .header:has(.header-col-title) .social a:hover {
    opacity: 0.65;
  }
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
}

.header-col-title {
  padding: 1rem;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.header-col-title .h1 {
  margin-bottom: 0;
  font-size: 1.35rem;
  line-height: 120%;
  font-weight: 400;
  color: var(--color-black);
  font-family: "Dela Gothic One", var(--font-family-sans);
}

.header-col-bio {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.header-col-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}

.header-col-bio .color-grey {
  color: var(--color-black);
  font-size: 1.35rem;
  line-height: 120%;
  font-weight: 400;
}

.header-col-bio .color-grey p {
  margin: 0;
}

.header-col-bio .color-grey p + p {
  margin-top: 1em;
}

/* На десктопе menu-pages — ряд ссылок */
.menu-pages {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}

.menu-item {
  display: flex;
  align-items: flex-start;
}

.menu-pages a {
  padding: 1rem;
  padding-left: 0;
  display: block;
}

/* активная ссылка в меню */
.menu-pages a[aria-current] {
  color: var(--color-grey);
}


.header-col-contacts .social {
  display: flex;
  flex-direction: column;
  width: max-content; /* ширина колонки = самой длинной ссылке, все ссылки одной ширины */
  padding: 0;
  margin: 0;
}

.social {
  display: flex;
  flex-direction: column;
  padding: 0 0 0 1rem;
  margin: 0;
}

.social a {
  display: block;
  padding: 0.2rem 0;
  text-decoration: none;
}

/* ——— Хедер главной: брейкпоинт min 500px (макет Figma) ——— */
@media (min-width: 500px) and (max-width: 767px) {
  body {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  .header:has(.header-inner) .header-inner {
    display: inline-grid;
    row-gap: 79px;
    column-gap: 20px;
    align-self: stretch;
    grid-template-rows: repeat(1, fit-content(100%));
    grid-template-columns: minmax(0, 2fr) fit-content(100%);
    width: 100%;
  }

  /* Первая ячейка: хединг + сабхед */
  .header-col-intro {
    display: flex;
    padding-right: 0.8rem;  /* 16px */
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 0.8em;  /* расстояние между тайтлом и сабтайтлом */
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
    justify-self: stretch;
    max-width: 20em;
  }

  .header-col-title {
    padding: 0;
    max-width: none;
  }

  .header-col-title .h1 {
    font-size: 0.85rem; /* 17px — как на 768px */
    line-height: 120%;
  }

  .header-col-bio {
    padding: 0;
  }

  .header-col-bio .color-grey {
    font-size: 0.8rem; /* 16px — как на 768px */
    line-height: 120%;
  }

  /* Вторая ячейка: меню — [nav+contacts] в колонку | иконка справа, как на 768 */
  .header:has(.header-inner) .header-col-menu {
    display: grid;
    grid-template-columns: 105.6px fit-content;
    grid-template-rows: auto auto;
    row-gap: 0.8rem;
    column-gap: 1rem;
    align-items: start;
    align-content: start;
    grid-row: 1 / span 1;
    grid-column: 2 / span 1;
    justify-self: stretch;
  }

  .header:has(.header-inner) .header-col-contacts {
    display: contents;
  }

  .header:has(.header-inner) .header-col-nav {
    grid-column: 1;
    grid-row: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: max-content;
    align-items: stretch;
    gap: 0.3rem;
  }

  .header:has(.header-inner) .header-col-contacts .social {
    grid-column: 1;
    grid-row: 2;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: max-content;
    align-items: stretch;
    gap: 0.3rem;
  }

  .header:has(.header-inner) .header-col-theme {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
  }


  .header:has(.header-inner) .header-col-nav.menu-pages a {
    padding: 0;
    font-size: 0.8rem; /* 16px — как на 768px */
    line-height: 120%;
  }

  .header:has(.header-inner) .header-col-contacts .social a {
    padding: 0;
    font-size: 0.8rem; /* 16px — как на 768px */
    line-height: 120%;
  }
}

/* ——— Хедер главной: брейкпоинт min 768px (макет Figma) ——— */
/* Только 768–1023: не влияет на 1024+ */
@media (min-width: 768px) and (max-width: 1023px) {
  .header:has(.header-inner) {
    padding: 0;
    margin-bottom: 4rem;
  }

  .header:has(.header-inner) .header-inner {
    display: inline-grid;
    row-gap: 3.95rem; /* 79px */
    column-gap: 1.25rem; /* 25px — по макету Figma */
    align-self: stretch;
    grid-template-rows: repeat(1, fit-content(100%));
    grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) fit-content(100%);
    width: 100%;
    padding: 0;
  }

  .header-col-intro {
    display: contents;
  }

  .header-col-title {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    padding: 0 0.8rem 0 0; /* pr 16px */
  }

  .header-col-title .h1 {
    font-size: 0.85rem; /* 17px */
    line-height: 120%;
    font-weight: 400;
    color: var(--color-black);
  }

  .header-col-bio {
    grid-column: 2;
    grid-row: 1;
    padding: 0 0.8rem 0 0; /* pr 16px */
    gap: 1.25rem;
  }

  .header-col-bio .color-grey {
    font-size: 0.8rem; /* 16px */
    line-height: 120%;
    font-weight: 400;
  }

  .header-col-bio .color-grey p + p {
    margin-top: 1em;
  }

  /* Колонка 3: группа [nav+contacts] | группа [иконка] — через display:contents у contacts */
  .header:has(.header-inner) .header-col-menu {
    grid-column: 3;
    grid-row: 1;
    display: grid;
    grid-template-columns: 105.6px fit-content;
    grid-template-rows: auto auto;
    row-gap: 0.8rem; /* 16px */
    column-gap: 1rem; /* 20px */
    align-items: start;
    align-content: start;
    justify-self: start;
  }

  /* contacts display:contents — social и theme участвуют в grid menu напрямую */
  .header:has(.header-inner) .header-col-contacts {
    display: contents;
  }

  .header:has(.header-inner) .header-col-nav {
    grid-column: 1;
    grid-row: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: max-content;
    align-items: stretch;
    gap: 0.3rem;
  }

  .header:has(.header-inner) .header-col-contacts .social {
    grid-column: 1;
    grid-row: 2;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: max-content;
    align-items: stretch;
    gap: 0.3rem;
  }

  .header:has(.header-inner) .header-col-theme {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
  }

  .header:has(.header-inner) .header-col-nav.menu-pages a {
    padding: 0;
    font-size: 0.8rem; /* 16px */
    line-height: 120%;
  }

  .header:has(.header-inner) .header-col-contacts .social a {
    padding: 0;
    font-size: 0.8rem; /* 16px */
    line-height: 120%;
  }
}

/* ——— Хедер главной: брейкпоинт min 1024px (макет Figma) ——— */
@media (min-width: 1024px) {
  .header:has(.header-inner) {
    padding: 0;
    margin-bottom: 4rem;
  }

  /* Обёртки не участвуют в сетке — title, bio, nav, contacts в своих колонках */
  .header-col-intro {
    display: contents;
  }

  .header-col-menu {
    display: contents;
  }

  .header:has(.header-inner) .header-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: start;
    gap: 1rem;
    width: 100%;
    padding: 0;
  }

  .header-col-nav {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
  }

  .header-col-contacts {
    grid-column: 4;
    grid-row: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .header-col-contacts .social {
    flex: 0 0 auto;
    padding: 0;
    gap: 0.3rem;
  }

  .header-col-title {
    max-width: none;
    padding: 0;
  }

  .header-col-title .h1 {
    font-size: 0.85rem; /* 17px */
    line-height: 120%;
    font-weight: 400;
    color: var(--color-black);
  }

  .header-col-bio {
    padding: 0;
    gap: 1.25rem;
  }

  .header-col-bio .color-grey {
    font-size: 0.8rem; /* 16px */
    line-height: 120%;
    font-weight: 400;
  }

  .header-col-bio .color-grey p + p {
    margin-top: 1em;
  }

  .header-col-nav {
    padding: 0;
    flex-direction: column;
    width: max-content;
    align-items: stretch;
    gap: 0.3rem;
  }

  .header-col-nav.menu-pages a {
    padding: 0;
    font-size: 0.8rem; /* 16px */
    line-height: 120%;
  }

  .header-col-contacts {
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .header-col-contacts .social {
    padding: 0;
    gap: 0.3rem;
    flex: 0 0 auto;
  }

  .header-col-contacts .social a {
    padding: 0;
    font-size: 0.8rem; /* 16px */
    line-height: 120%;
  }
}

/* ——— Хедер главной: брейкпоинт min 1400px (макет Figma) ——— */
/* Перевод px → rem: в проекте 1rem = 20px (html font-size), т.е. rem = px / 20 */
@media (min-width: 1400px) {
  .header:has(.header-inner) {
    padding: 0;
    margin-bottom: 7.75rem;
  }

  .header-col-intro {
    display: contents;
  }

  .header-col-menu {
    display: contents;
  }

  .header:has(.header-inner) .header-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: start;
    gap: 1rem;
    width: 100%;
    padding: 0;
  }

  .header-col-nav {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
  }

  .header-col-contacts {
    grid-column: 4;
    grid-row: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .header-col-contacts .social {
    flex: 0 0 auto;
  }

  .header-col-title {
    max-width: 26rem; /* 520px при 1rem = 20px — блок с текстом заголовка */
    padding: 0 0.8rem 0 0;
  }

  /* Тайтл: Figma Heahing 20 — 20px → 1rem, line-height 120% */
  .header-col-title .h1 {
    font-size: 1rem; /* 20px, стиль Heahing 20 */
    line-height: 120%;
    font-weight: 400;
    color: var(--color-black);
  }

  .header-col-bio {
    max-width: 23rem;
    padding: 0 0.8rem 0 0;
    gap: 1.25rem;
  }

  /* Био: Figma Body 18 — 18px → 0.9rem, line-height 120% */
  .header-col-bio .color-grey {
    font-size: 0.9rem; /* 18px, стиль Body 18 */
    line-height: 120%;
    font-weight: 400;
  }

  .header-col-bio .color-grey p + p {
    margin-top: 1em;
  }

  .header-col-nav {
    padding: 0;
    flex-direction: column;
    width: max-content;
    align-items: stretch;
    gap: 0.3rem;
  }

  /* Навигация: Figma Body 18 — 18px → 0.9rem */
  .header-col-nav.menu-pages a {
    padding: 0;
    font-size: 0.9rem; /* 18px */
    line-height: 120%;
  }

  .header-col-contacts {
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .header-col-contacts .social {
    padding: 0;
    gap: 0.3rem;
    flex: 0 0 auto;
  }

  /* Контакты: Figma Body 18 — 18px → 0.9rem */
  .header-col-contacts .social a {
    padding: 0;
    font-size: 0.9rem; /* 18px */
    line-height: 120%;
  }
}

/* ——— Хедер главной: брейкпоинт min 1600px ——— */
@media (min-width: 1600px) {
  .header-col-title .h1 {
    font-size: 1.1rem; /* 22px */
    line-height: 120%;
  }

  .header-col-bio .color-grey {
    font-size: 1rem;
    line-height: 120%;
  }

  .header-col-nav.menu-pages a {
    font-size: 1rem;
    line-height: 120%;
  }

  .header-col-contacts .social a {
    font-size: 1rem;
    line-height: 120%;
  }
}

/* ——— Хедер внутренних страниц (отдельный компонент, не пересекается с главным) ——— */
/* Классы: .header--internal, .header-internal__inner, .header-internal__logo, .header-internal__nav, .header-internal__contacts */
.header--internal .header-internal__logo {
  display: flex;
  align-items: start;
}

.header--internal {
  margin-top: 1rem;
  margin-bottom: 2rem;
  --internal-header-link-gap: 0.2rem;
}

/* Хедер страницы поиска: та же сетка, только логотип и крестик «Закрыть» */
.header--search .header-internal__nav.header--search__nav-placeholder {
  display: none;
}
.header--search .header-internal__contacts.header--search__close {
  justify-content: flex-end;
}
.header-close-link {
  display: block;
  line-height: 0;
  color: inherit;
}
.header-close-link svg {
  width: 1rem;
  height: 1rem;
  display: block;
}
html[data-theme="dark"] .header-close-link {
  color: var(--color-link);
}
html[data-theme="dark"] .header--search .header-close-link {
  color: var(--color-text);
}
@media (hover: hover) {
  .header-close-link:hover {
    color: var(--color-link);
  }
  html[data-theme="dark"] .header-close-link:hover {
    color: var(--color-link-hover);
    opacity: 0.8;
  }
  html[data-theme="dark"] .header--search .header-close-link:hover {
    color: var(--color-link);
    opacity: 1;
  }
}

.logo {
  padding: 0;
}
/* min 1440: текст 18px */
@media (min-width: 1440px) {
  .header--internal .header-internal__inner {
    display: grid;
    width: 100%;
    
    row-gap: 3.95rem; /* 79px */
    column-gap: 1rem; /* 20px */
    flex-shrink: 0;
    grid-template-rows: repeat(1, fit-content(100%));
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  }
  .header--internal .header-internal__logo {
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
  }
  .header--internal .header-internal__nav {
    display: inline-flex;
    padding-top: 0.45rem; /* 9px */
    flex-direction: column;
    width: max-content;
    align-items: stretch;
    gap: 0.2rem; /* 4px */
    grid-row: 1 / span 1;
    grid-column: 2 / span 1;
  }
  .header--internal .header-internal__contacts {
    display: inline-flex;
    padding-top: 0.45rem; /* 9px */
    padding-left: 0;
    margin-left: -1rem; /* убираем column-gap слева */
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    grid-row: 1 / span 1;
    grid-column: 3 / span 1;
  }
  .header--internal .header-internal__contacts .social {
    flex: 0 0 auto;
  }
  .header--internal .logo,
  .header--internal .menu-pages a,
  .header--internal .social a {
    font-size: 0.9rem; /* 18px */
    line-height: 120%;
  }
  .header--internal .header-internal__nav.menu-pages a,
  .header--internal .header-internal__contacts .social a {
    padding: 0;
  }
}

/* min 1024: текст 16px */
@media (min-width: 1024px) and (max-width: 1439px) {
  .header--internal .header-internal__inner {
    display: grid;
    width: 100%;
    row-gap: 3.95rem;
    column-gap: 1rem;
    flex-shrink: 0;
    grid-template-rows: repeat(1, fit-content(100%));
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  }
  .header--internal .header-internal__logo {
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
  }
  .header--internal .header-internal__nav {
    display: inline-flex;
    padding-top: 0.55rem; /* 11px */
    flex-direction: column;
    width: max-content;
    align-items: stretch;
    gap: 0.2rem; /* 4px */
    grid-row: 1 / span 1;
    grid-column: 2 / span 1;
  }
  .header--internal .header-internal__contacts {
    display: inline-flex;
    padding-top: 0.55rem; /* 11px */
    padding-left: 0;
    margin-left: -1rem;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    grid-row: 1 / span 1;
    grid-column: 3 / span 1;
  }
  .header--internal .header-internal__contacts .social {
    flex: 0 0 auto;
  }
  .header--internal .logo,
  .header--internal .menu-pages a,
  .header--internal .social a {
    font-size: 0.8rem; /* 16px */
    line-height: 120%;
  }
  .header--internal .header-internal__nav.menu-pages a,
  .header--internal .header-internal__contacts .social a {
    padding: 0;
  }
}

/* min 768 */
@media (min-width: 768px) and (max-width: 1023px) {
  .header--internal .header-internal__inner {
    display: grid;
    width: 100%;
    row-gap: 3.95rem;
    column-gap: 1rem;
    flex-shrink: 0;
    grid-template-rows: repeat(1, fit-content(100%));
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  }
  .header--internal .header-internal__logo {
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
  }
  .header--internal .header-internal__nav {
    display: flex;
    padding-top: 0.55rem; /* 11px */
    flex-direction: column;
    width: max-content;
    align-items: stretch;
    gap: 0.2rem; /* 4px */
    grid-row: 1 / span 1;
    grid-column: 2 / span 1;
  }
  .header--internal .header-internal__contacts {
    display: inline-flex;
    padding-top: 0.55rem; /* 11px */
    padding-left: 0;
    margin-left: -1rem;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    grid-row: 1 / span 1;
    grid-column: 3 / span 1;
  }
  .header--internal .header-internal__contacts .social {
    flex: 0 0 auto;
  }
  .header--internal .logo,
  .header--internal .menu-pages a,
  .header--internal .social a {
    font-size: 0.8rem; /* 16px */
    line-height: 120%;
  }
  .header--internal .header-internal__nav.menu-pages a,
  .header--internal .header-internal__contacts .social a {
    padding: 0;
  }
}

/* min 500 */
@media (min-width: 500px) and (max-width: 767px) {
  .header--internal .header-internal__inner {
    display: grid;
    width: 100%;
    row-gap: 3.95rem;
    column-gap: 1rem;
    flex-shrink: 0;
    grid-template-rows: repeat(1, fit-content(100%));
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) fit-content(100%);
  }
  .header--internal .header-internal__logo {
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
    justify-content: flex-start;
  }
  .header--internal .header-internal__nav {
    display: inline-flex;
    padding-top: 0.55rem; /* 11px */
    flex-direction: column;
    width: max-content;
    align-items: stretch;
    gap: 0.2rem; /* 4px */
    grid-row: 1 / span 1;
    grid-column: 2 / span 1;
  }
  .header--internal .header-internal__contacts {
    display: inline-flex;
    align-items: flex-start;
    gap: 1rem;
    grid-row: 1 / span 1;
    grid-column: 3 / span 1;
    padding-top: 0.55rem;
  }
  .header--internal .logo,
  .header--internal .menu-pages a,
  .header--internal .social a {
    font-size: 0.8rem; /* 16px */
    line-height: 120%;
  }
  .header--internal .header-internal__nav.menu-pages a,
  .header--internal .header-internal__contacts .social a {
    padding: 0;
  }
}

/* max 499: мобилка — скрыть текст лого, только аватар, выравнивание по левому краю */
@media (max-width: 499px) {
  .header:has(.header-col-title) {
    --home-header-link-gap: 0.2rem;
  }
  .header--internal .header-internal__inner {
    display: grid;
    width: 100%;
    row-gap: 3.95rem;
    column-gap: 1rem;
    flex-shrink: 0;
    grid-template-rows: repeat(1, fit-content(100%));
    grid-template-columns: minmax(0, 1fr) fit-content(100%) fit-content(100%);
  }
  .header--internal .logo-text {
    display: none;
  }
  .header--internal .header-internal__logo {
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
    justify-content: flex-start;
  }
  .header--internal .header-internal__nav {
    display: inline-flex;
    padding-top: 0;
    flex-direction: column;
    width: max-content;
    align-items: stretch;
    gap: 0.2rem; /* 4px */
    grid-row: 1 / span 1;
    grid-column: 2 / span 1;
  }
  .header--internal .header-internal__contacts {
    display: inline-flex;
    align-items: flex-start;
    gap: 1rem;
    grid-row: 1 / span 1;
    grid-column: 3 / span 1;
    padding-top: 0;
  }
  .header--internal .logo,
  .header--internal .menu-pages a,
  .header--internal .social a {
    font-size: 0.9rem;
    line-height: 120%;
   
  }
  .header--internal .header-internal__nav.menu-pages a,
  .header--internal .header-internal__contacts .social a {
    padding: 0;
  }

  
  .header--internal .menu-pages {
    margin-top: 0;
  }

}

/* Главная: расстояние между ссылками задаётся верхним паддингом */
.header:has(.header-col-title) .header-col-nav,
.header:has(.header-col-title) .header-col-contacts,
.header:has(.header-col-title) .header-col-contacts .social {
  gap: 0;
}

.header:has(.header-col-title) .header-col-nav.menu-pages .menu-item + .menu-item a,
.header:has(.header-col-title) .header-col-contacts .social a + a {
  padding-top: var(--home-header-link-gap);
}

/* Колонка нав на главной: ссылка на всю ширину колонки (по самой длинной ссылке) */
.header-col-nav.menu-pages .menu-item a {
  width: 100%;
}

/* Внутренние страницы: расстояние между ссылками задаётся верхним паддингом */
.header--internal .header-internal__nav,
.header--internal .header-internal__contacts .social {
  gap: 0;
}

/* Колонка нав на внутренних страницах: ссылка на всю ширину колонки */
.header--internal .header-internal__nav.menu-pages .menu-item a {
  width: 100%;
}


.header--internal .header-internal__contacts .social {
  padding-left: 0; /* переопределяем .social { padding: 0 0 0 1rem } */
}

.header--internal .header-internal__nav.menu-pages .menu-item + .menu-item a,
.header--internal .header-internal__contacts .social a + a {
  padding-top: var(--internal-header-link-gap);
}

.section {
  padding: 3rem 0;
}

.grid {
  --columns: 12;
  --gutter: 3rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: 1fr;
}
.grid > .column {
  margin-bottom: var(--gutter);
}

.autogrid {
  --gutter: 3rem;
  --min: 10rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
  grid-auto-flow: dense;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.text {
  line-height: 1.4em;
}
.text a {
  text-decoration: underline;
}
.template-album .text a {
  color: var(--color-link);
  text-decoration: none;
}
.template-album .text a:hover {
  color: var(--color-link-hover);
}
.text :first-child {
  margin-top: 0;
}
.text p,
.text ul,
.text ol {
  margin-bottom: 1.2rem;
}
.text ul {
  margin-left: 1rem;
}
.text ol {
  margin-left: 1.3rem;
}
.text ul p,
.text ol p {
  margin-bottom: 0;
}
.text ul > li {
  list-style: disc;
}
.text ol > li {
  list-style: decimal;
}
.text ul ol,
.text ul ul,
.text ol ul,
.text ol ol {
  margin-bottom: 0;
}
.text h1 {
  font-size: 2.3rem;
  margin-bottom: 2rem;
  line-height: 1.15em;
  font-weight: 500;
}
.h1,
.intro {
  font-size: 2.3rem;
  margin-bottom: 3rem;
  line-height: 1.15em;
  font-weight: 500;
}
.text p + h1 {
  margin-top: 3rem;
}
.text p + h2 {
  margin-top: 2rem;
}
/* Заголовок в блоке, следующем за другим блоком (p и h в разных .block-text) */
.text .block-text + .block-text h1 {
  margin-top: 3rem;
}
.text .block-text + .block-text h2 {
  margin-top: 2rem;
}
/* Блок «heading» в панели без обёртки — заголовок прямой потомок .text */
.text > h1:not(:first-child) {
  margin-top: 3rem;
}
.text > h2:not(:first-child) {
  margin-top: 2rem;
}
.note-subheading {
  font-size: 1.5rem;
  line-height: 1.2em;
  font-weight: 300;
}
.template-album .note-subheading {
  color: var(--color-black);
  margin-top: 0.5em;
}
.template-album .note-subheading small {
  font-size: inherit;
  color: inherit;
  line-height: 1.2em;
}
.note-header {
  margin-bottom: 2rem;
}
.text h2,
.h2 {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  line-height: 1.2em;
  font-weight: 500;
}
.text h3,
.h3 {
  font-weight: 600;
}
.text .codeblock {
  display: grid;
}
.text code {
  font-family: var(--font-family-mono);
  font-size: 1em;
  background: var(--color-light);
  padding: 0 .5rem;
  display: inline-block;
  color: var(--color-black);
}
.text pre {
  margin: 3rem 0;
  background: var(--color-black);
  color: var(--color-white);
  padding: 1.5rem;
  overflow-x: scroll;
  overflow-y: hidden;
  line-height: 1.5rem;
}
.text pre code {
  padding: 0;
  background: none;
  color: inherit;
}
.text hr {
  margin: 6rem 0;
}
.text dt {
  font-weight: 600;
}
.text blockquote {
  font-size: 1.25rem;
  line-height: 1.325em;
  border-left: 2px solid var(--color-black);
  padding-left: 1rem;
  margin: 3rem 0;
  max-width: 25rem;
}
.text blockquote footer {
  font-size: .875rem;
  font-style: italic;
}
.text figure {
  margin: 3rem 0;
}
.text figure:first-child {
  margin-top: 0;
}
.text figure:last-child {
  margin-bottom: 0;
}
.text figure:has(.img-simple),
.text figure:has(.img[data-contain]),
.text figure:has(.video-simple) {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  margin-bottom: 3rem;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
}
/* figure после абзаца/заголовка/списка или после текстового блока — отступ только от margin контента */
.text :is(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6, dl) + figure,
.text .block-text + figure {
  margin-top: 0;
}
.text figure:has(.img-simple) figcaption,
.text figure:has(.img[data-contain]) figcaption,
.text figure:has(.video-simple) figcaption {
  width: 100%;
  text-align: left;
}
/* Local video with blur-up: нужна ширина, иначе контейнер схлопывается */
.text figure:has(.video-simple .gallery-video-blur-up) {
  width: 100%;
}
/* Viewport video (галереи и т.д.): figure с шириной, чтобы обёртка не схлопывалась */
.text figure:has(.viewport-video-wrap) {
  width: 100%;
}

/* Special rules ONLY for iframe videos - full width, don't affect images or local videos */
.text figure:has(.video-simple iframe) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}
.text figure:has(.video-simple iframe) .video-simple {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  padding-bottom: 56.25% !important; /* 16:9 aspect ratio (standard for most videos) */
  height: 0 !important;
  overflow: hidden !important;
}
.text figcaption {
  padding-top: .75rem;
  color: var(--color-text-grey);
}
.template-album .text figcaption {
  color: var(--color-black);
}
.text figure ul {
  line-height: 0;
  display: grid;
  gap: 1.5rem;
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.text figure ul li {
  list-style: none;
}

/* Убираем нижний марджин у ссылок в галерее */
.text figure ul li a,
.text figure ul li .img {
  margin-bottom: 0;
}

/* Убираем нижний марджин у одиночных картинок */
.text figure .img-simple,
.text figure .img[data-contain] {
  margin-bottom: 0;
}

/* Картинки в галерее grid без принудительного соотношения сторон */
.text figure.gallery--grid ul li .img,
.text figure.gallery--grid ul li .img-simple {
  aspect-ratio: unset;
  padding-bottom: 0;
  width: 100%;
  height: auto;
  background: transparent;
}
/* С обёрткой тени ссылке нужна высота (обёртка absolute), восстанавливаем ratio */
.text figure.gallery--grid ul li .img:has(.img-inset-shadow-wrap) {
  aspect-ratio: var(--w) / var(--h);
}

/* Только прямой img (с обёрткой тени — общие правила как у одиночной картинки) */
.text figure.gallery--grid ul li .img > img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Gallery layout variants */
.gallery.gallery--grid ul,
.text figure.gallery--grid ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1.5rem;
}

.gallery.gallery--list ul,
.text figure.gallery--list ul {
  display: flex !important;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

.gallery.gallery--list ul li,
.text figure.gallery--list ul li {
  width: 100%;
}
.text figure.gallery--grid ul li:first-child,
.text figure.gallery--list ul li:first-child {
  margin-top: 0;
  padding-top: 0;
}

/* В list layout переопределения только когда нет обёртки тени; с тенью — как одиночная картинка (базовые .img) */
.text figure.gallery--list ul li .img:not(.has-inset-shadow) {
  aspect-ratio: unset;
  padding-bottom: 0;
  width: 100%;
  height: auto;
  background: transparent;
}

.text figure.gallery--list ul li .img-simple:not(.has-inset-shadow) {
  aspect-ratio: unset;
  padding-bottom: 0;
  width: 100%;
  height: auto;
  background: transparent;
}

/* С тенью в list: базовая обёртка; без limit height — как с limit height, пропорции от картинки (не от ratio) */
.text figure.gallery--list ul li .img.has-inset-shadow {
  display: flex;
  position: relative;
}
.text figure.gallery--list ul li .img.has-inset-shadow .img-inset-shadow-wrap {
  position: relative;
}

/* Без limit height: как версия с ограничением — ссылка по контенту, картинка в своих пропорциях */
.text figure.gallery--list ul li .img.has-inset-shadow:not(.img-limited-height) {
  width: fit-content;
  max-width: 100%;
  aspect-ratio: unset;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}
.text figure.gallery--list ul li .img.has-inset-shadow:not(.img-limited-height) .img-inset-shadow-wrap {
  flex: none;
  width: fit-content;
}
.text figure.gallery--list ul li .img.has-inset-shadow:not(.img-limited-height) .img-inset-shadow-wrap img {
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: unset !important;
}

/* С тенью + limit height: как одиночная картинка с contain — ссылка по ширине контента, по центру, без чёрных полос */
.text figure.gallery--list ul li .img.has-inset-shadow.img-limited-height {
  width: fit-content;
  max-width: 100%;
  aspect-ratio: unset;
  max-height: 87vh;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}
.text figure.gallery--list ul li .img.has-inset-shadow.img-limited-height .img-inset-shadow-wrap {
  flex: none;
  width: fit-content;
  max-height: 87vh;
}
.text figure.gallery--list ul li .img.has-inset-shadow.img-limited-height .img-inset-shadow-wrap img {
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 87vh !important;
  object-fit: unset !important;
}

/* Base styles только для img без обёртки (с обёрткой тени работают общие правила как у одиночной картинки) */
.text figure.gallery--list ul li .img > img,
.text figure.gallery--list ul li .img-simple > img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Limit height in list: переопределения только без тени; с тенью — как одиночная картинка */
.text figure.gallery--list ul li .img.img-limited-height:not(.has-inset-shadow),
.text figure.gallery--list ul li .img-simple.img-limited-height:not(.has-inset-shadow) {
  width: 100%;
  max-width: 100%;
  max-height: 87vh;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
}

.text figure.gallery--list ul li .img.img-limited-height > img,
.text figure.gallery--list ul li .img-simple.img-limited-height > img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 87vh;
  object-fit: unset;
}

/* Ссылка на видео в list (как одиночный блок: без .img — только block, размер от контента) */
.text figure.gallery--list ul li a.gallery-video-link {
  display: block;
}

/* Video limit height in list: как у одиночных блоков — контейнер по контенту, пропорциональное масштабирование */
.text figure.gallery--list ul li .video-simple.video-limited-height {
  width: fit-content;
  max-width: 100%;
  max-height: 87vh;
  margin-left: auto;
  margin-right: auto;
}

.text figure.gallery--list ul li .video-simple.video-limited-height video {
  width: auto !important;
  max-width: 100%;
  height: auto !important;
  max-height: 87vh;
  object-fit: unset;
}

/* Video с blur-up в list: viewport-video-wrap с absolute-детьми не даёт размер — оставляем width 100%, как раньше */
.text figure.gallery--list ul li .video-simple.video-limited-height:has(.gallery-video-blur-up) {
  width: 100%;
}
.text figure.gallery--list ul li .video-simple.video-limited-height:has(.gallery-video-blur-up) video {
  width: 100% !important;
  object-fit: contain;
}
.text figure.gallery--list ul li .video-simple:has(.gallery-video-blur-up) {
  width: 100%;
}
.text figure.gallery--list ul li .gallery-video-blur-up {
  width: 100%;
}

hr {
  border: 0;
  background: currentColor;
  height: 2px;
  width: 1.5rem;
  margin: 3rem auto;
}

.align-center {
  text-align: center;
}

.intro {
  max-width: 40rem;
}
.intro *:not(:last-child) {
  margin-bottom: 1em;
}

.cta {
  background: var(--color-black);
  color: var(--color-white);
  display: inline-flex;
  justify-content: center;
  padding: .75rem 1.5rem;
  border: 4px solid var(--color-white);
  outline: 2px solid var(--color-black);
}

.box {
  background: var(--color-light);
  padding: 1.5rem;
  border: 4px solid var(--color-white);
  outline: 2px solid var(--color-light);
}

.video,
.img {
  position: relative;
  display: block;
  --w: 1;
  --h: 1;
  background: transparent;
  width: 100%;
}

/* Limit height only when class is present */
.img.img-limited-height,
.img-simple.img-limited-height,
.video.video-limited-height,
.video-simple.video-limited-height {
  max-height: 87vh;
}
.img[data-contain] {
  background: transparent !important;
  width: fit-content !important;
  position: static !important;
  max-width: 100% !important;
  max-height: none !important;
  --w: unset !important;
  --h: unset !important;
  aspect-ratio: unset !important;
  padding-bottom: 0 !important;
}
.img[data-contain] img {
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: unset !important;
  border: 0;
}

/* Contain images - limit height only when class is present */
.img-limited-height.img[data-contain] img {
  max-height: 87vh !important;
}
.video {
  background: transparent;
}

@supports (aspect-ratio: 1) {
  .video,
  .img:not([data-contain]) {
    aspect-ratio: var(--w) / var(--h);
    padding-bottom: 0;
  }
  .img[data-contain] {
    aspect-ratio: unset !important;
    padding-bottom: 0 !important;
  }
}

@supports not (aspect-ratio: 1) {
  .video,
  .img:not([data-contain]) {
    padding-bottom: calc(100% / var(--w) * var(--h));
    max-height: 80vh;
  }
  .img[data-contain] {
    padding-bottom: 0 !important;
  }
}
.img:not([data-contain]) img,
.video iframe,
.video video,
.img video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.video[data-contain] video {
  object-fit: contain;
}

/* Обёртка для внутренней тени на блоке изображения — тень на wrapper, чтобы работало с limit_height */
.img-inset-shadow-wrap {
  position: relative;
  display: block;
  width: fit-content;
}
.img-inset-shadow-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 0 3em 0 rgba(134, 143, 154, 0.17) inset;
  -webkit-box-shadow: 0 0 3em 0 rgba(134, 143, 154, 0.17) inset;
}
/* С фиксированным ratio: wrapper заполняет ссылку, img заполняет wrapper */
.img:not([data-contain]) .img-inset-shadow-wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.img:not([data-contain]) .img-inset-shadow-wrap img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.img[data-contain] .img-inset-shadow-wrap img {
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: unset !important;
}
.img-limited-height.img[data-contain] .img-inset-shadow-wrap img {
  max-height: 87vh !important;
}
.img-simple .img-inset-shadow-wrap img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}
.img-limited-height.img-simple .img-inset-shadow-wrap img {
  max-height: 87vh;
}

/* Simple images without fixed aspect ratio */
.img-simple {
  display: block;
  width: fit-content;
}
.img-simple img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

/* Simple images - limit height only when class is present */
.img-limited-height.img-simple img {
  max-height: 87vh;
}

/* Simple videos without fixed aspect ratio */
.video-simple {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

/* Simple videos - limit height only when class is present */
.video-limited-height.video-simple {
  max-height: 87vh;
}
/* Iframe videos - no height restriction */
.video-simple:has(iframe) {
  max-height: none;
}
.video-simple video {
  display: block;
  width: auto !important;
  max-width: 100%;
  height: auto !important;
  object-fit: unset !important;
}

/* Simple videos - limit height only when class is present */
.video-limited-height.video-simple video {
  max-height: 87vh;
}

/* Обёртка для внутренней тени на блоке видео — тень на wrapper, чтобы работало с limit_height */
.video-inset-shadow-wrap {
  position: relative;
  display: block;
}
.video-inset-shadow-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 0 3em 0 rgba(134, 143, 154, 0.17) inset;
  -webkit-box-shadow: 0 0 3em 0 rgba(134, 143, 154, 0.17) inset;
}
.video-simple .video-inset-shadow-wrap video {
  display: block;
  width: auto !important;
  max-width: 100%;
  height: auto !important;
  object-fit: unset !important;
}
.video-limited-height.video-simple .video-inset-shadow-wrap video {
  max-height: 87vh;
}
/* Видео внутри blur-up: обёртка заполняет контейнер */
.gallery-video-blur-up .video-inset-shadow-wrap {
  position: absolute;
  inset: 0;
}
.gallery-video-blur-up .video-inset-shadow-wrap video {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.video-simple iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* Viewport video lifecycle: wrap for poster + lazy video (Safari memory fix) */
.viewport-video-wrap,
.album-card-video-wrap {
  position: relative;
  display: block;
  width: 100%;
  contain: layout style paint;
  overflow: hidden;
}
.viewport-video-wrap .viewport-video-poster,
.viewport-video-wrap .album-card-poster,
.album-card-video-wrap .album-card-poster,
.album-card-video-wrap .viewport-video-poster {
  z-index: 0;
}
.viewport-video-wrap .viewport-video,
.viewport-video-wrap .album-card-video,
.album-card-video-wrap .album-card-video,
.album-card-video-wrap .viewport-video {
  z-index: 1;
  /* Переопределяем .video-simple video: заполняем обёртку (страница проекта) */
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* Ограничение высоты (87vh): видео вписывается в контейнер целиком, без обрезки — как у одиночного video block */
.viewport-video-wrap.video-limited-height .viewport-video-poster,
.viewport-video-wrap.video-limited-height .viewport-video {
  object-fit: contain !important;
}
/* Blur-up для видео: нужна ширина, иначе контейнер схлопывается (video/img position:absolute) */
.video-simple:has(.gallery-video-blur-up) {
  width: 100%;
}
.video-simple.viewport-video-wrap,
.video-simple.album-card-video-wrap {
  width: 100%;
}

/* Blur-up для видео в галерее и video block */
.gallery-video-blur-up {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 1px; /* fallback если aspect-ratio не сработает */
  background: var(--color-blur-placeholder-light);
}
[data-theme="dark"] .gallery-video-blur-up {
  background: var(--color-blur-placeholder-dark);
}
.gallery-video-blur-up[data-blur-up]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--blur-bg);
  background-size: cover;
  background-position: center;
  filter: blur(20px);
  transform: scale(1.1);
}
.gallery-video-blur-up img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: opacity 0.4s ease;
}
.gallery-video-blur-up[data-blur-up] img {
  opacity: 0;
}
.gallery-video-blur-up.is-loaded img {
  opacity: 1;
}
.gallery-video-blur-up video {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  z-index: 1;
}
.img-caption,
.video-caption {
  padding-top: 0.6rem;

}

/* Стили для карточек на главной странице */
.grid .column .img-caption {
  line-height: 125%;
  padding-top: 0.6rem;
}

/* Описание (первый .album-card-meta, если есть второй) - line-height: 125% */
.grid .column .img-caption .album-card-meta:first-of-type:not(.album-card-year-domain) {
  line-height: 125%;
}

/* Год и внешняя ссылка в одном контейнере - font-size: 0.8rem, line-height: 125% */
.grid .column .img-caption .album-card-year-domain {
  font-size: 0.8rem;
  line-height: 125%;
  margin-top: 0.4rem;
}

/* Подсветка года/домена при hover на карточке — только на устройствах с указателем */
@media (hover: hover) {
  .grid .column a[target="_blank"]:hover .album-card-year-domain {
    color: var(--color-link);
    transition: color 0.1s ease;
  }
  .grid .column .img-caption a.album-card-domain[target="_blank"]:hover {
    color: var(--color-link);
    transition: color 0.1s ease;
  }
}

.footer {
  display: none; /* Скрыт визуально, но скрипты загружаются */
  padding: 9rem 0 6rem;
  line-height: 1.5em;
}
.footer:before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 2px;
  background: var(--color-black);
  margin-bottom: 1.5rem;
}

.footer h2 {
  font-weight: 600;
  margin-bottom: .75rem;
}
.footer ul,
.footer p {
  color: var(--color-text-grey);
}
.footer p {
  max-width: 15rem;
}
.footer a:hover {
  color: var(--color-link);
}


.map {
  --w: 2;
  --h: 1;
  padding-bottom: calc(100% / var(--w) * var(--h));
  position: relative;
  overflow: hidden;
  background: var(--color-black);
}
.map iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.margin-s {
  margin-bottom: .75rem;
}
.margin-m {
  margin-bottom: 1.5rem;
}
.margin-l {
  margin-bottom: 3rem;
}
.margin-xl {
  margin-bottom: 4.5rem;
}
.margin-xxl {
  margin-bottom: 6rem;
}


@media screen and (min-width: 60rem) {
  body {
    --padding: 1rem;
  }

  .grid {
    grid-template-columns: repeat(12, 1fr);
  }
  .grid > .column {
    grid-column: span var(--columns);
  }
}

.pagination {
  display: flex;
  padding-top: 6rem;
}
.pagination > span {
  color: var(--color-text-grey);
}
.pagination > * {
  padding: .5rem;
  width: 3rem;
  text-align: center;
  border: 2px solid currentColor;
  margin-right: 1.5rem;
}
.pagination > a:hover {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

.note-excerpt {
  line-height: 1.5em;
}
.note-excerpt header {
  margin-bottom: 1.5rem;
}
.note-excerpt figure {
  margin-bottom: .5rem;
}
.note-excerpt-title {
  font-weight: 600;
}
.note-excerpt-date {
  color: var(--color-text-grey);
}

.grid .column figure {
  margin: 0;
  display: block;
}
.grid .column figure img,
.grid .column figure video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
/* Карточки проектов: обложка заполняет область без полос, без видимой подложки */
.grid.album-grid .column figure img,
.grid.album-grid .column figure video {
  object-fit: cover;
}

/* Blur-up: картинка сразу целиком (размытая), затем плавно прорисовывается */
.grid .column figure .blur-up {
  display: block;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: var(--color-blur-placeholder-light);
}
[data-theme="dark"] .grid .column figure .blur-up {
  background: var(--color-blur-placeholder-dark);
}
/* В карточках грида — без фона и без scale у размытия, чтобы не было «тени» из-под обложки */
.grid.album-grid .column figure .blur-up {
  background: transparent;
}
[data-theme="dark"] .grid.album-grid .column figure .blur-up {
  background: transparent;
}
.grid .column figure .blur-up[data-blur-up]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--blur-bg);
  background-size: cover;
  background-position: center;
  filter: blur(20px);
  transform: scale(1.1);
  transition: opacity 0.25s ease;
}
.grid.album-grid .column figure .blur-up[data-blur-up]::before {
  transform: none;
}
/* После загрузки показываем только картинку — слой размытия скрываем, чтобы не было двойного слоя/тени */
.grid .column figure .blur-up.is-loaded[data-blur-up]::before {
  opacity: 0;
  pointer-events: none;
}
.grid .column figure .blur-up img {
  position: relative;
  z-index: 1;
  transition: opacity 0.4s ease;
}
.grid .column figure .blur-up[data-blur-up] img {
  opacity: 0;
}
.grid .column figure .blur-up.is-loaded img {
  opacity: 1;
}
/* Внутренняя тень поверх обложки — только если в админке включено «Тень на обложке в карточке» */
.grid.album-grid .column figure .blur-up.cover-inset-shadow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 0 3em 0 rgba(134, 143, 154, 0.17) inset;
  -webkit-box-shadow: 0 0 3em 0 rgba(134, 143, 154, 0.17) inset;
}
.album-card-meta {
  margin-top: 0.3rem;
  margin-bottom: 0;
}
.album-card-domain {
  margin-top: 0.5rem;
  margin-bottom: 0;
  font-size: 0.875rem;
}
/* Карточка internal + external URL: слой-ссылка на всю область, один общий hover на карточку */
.album-card-inner {
  position: relative;
}
.album-card-inner .album-card-link {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.album-card-inner .album-card-figure {
  pointer-events: none;
}
.album-card-inner .img-caption a.album-card-domain {
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

/* Hover по ссылкам в карточках — только на устройствах с указателем */
@media (hover: hover) {
  .grid.album-grid a:hover {
    color: var(--color-card-hover);
  }
  .grid.album-grid .album-card-inner:has(.album-card-link:hover) .img-caption {
    color: var(--color-card-hover);
    transition: color 0.1s ease;
  }
  .grid.album-grid .album-card-inner:has(.album-card-link:hover) .img-caption .album-card-year-domain {
    color: var(--color-text-grey);
  }
  .grid.album-grid .album-card-inner:has(.album-card-link:hover) .img-caption a.album-card-domain {
    color: var(--color-text-grey);
  }
  .grid.album-grid .album-card-inner .img-caption a.album-card-domain:hover {
    color: var(--color-card-hover);
  }
}

.grid.album-grid {
  --gutter: 1rem;
}
.grid.album-grid > .column {
  --columns: 3;
}
.grid.album-grid > .column.album-card--default {
  --columns: 3;
}
.grid.album-grid > .column.album-card--wide {
  --columns: 6;
}
.grid.album-grid > .column.album-card--full {
  --columns: 12;
}

/* 768–959px: только full в 1 колонку, default и wide — в 2 колонки */
@media (min-width: 768px) and (max-width: 959px) {
  .grid.album-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid.album-grid > .column {
    grid-column: span var(--columns);
  }
  .grid.album-grid > .column.album-card--full {
    --columns: 2;
  }
  .grid.album-grid > .column.album-card--default,
  .grid.album-grid > .column.album-card--wide {
    --columns: 1;
  }
}

/* 767px и меньше: карточки 1/4 (default) — 50%, JS добавляет .album-card--default-fill при нечётной группе (100%). 1/2 и full — на всю ширину */
@media (max-width: 767px) {
  .grid.album-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid.album-grid > .column {
    --columns: 2;
    grid-column: span var(--columns);
  }
  .grid.album-grid > .column.album-card--default {
    --columns: 1;
  }
  .grid.album-grid > .column.album-card--wide,
  .grid.album-grid > .column.album-card--full {
    --columns: 2;
  }
  /* JS добавляет .album-card--default-fill последней маленькой в нечётной группе — растягиваем на всю ширину (без дырки) */
  .grid.album-grid > .column.album-card--default.album-card--default-fill {
    --columns: 2;
  }
}

.home-tags {
  margin-bottom: 2rem;
}
.home-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Общий стиль для всех тегов (дефолт для всех брейкпоинтов, кроме 1600+ и max 499) */
.home-tag,
.note-tags a {
  display: inline-block;
  font-size: 0.8rem; /* 16px при 1rem = 20px */
  padding: 0.35rem 0.6rem 0.4rem 0.7rem; /* 7px 12px 8px 14px */
  background: var(--color-tag-background);
  color: var(--color-text);
  text-decoration: none;
  border-radius: 20rem;
  transition: background-color 0.2s, color 0.2s;
}
@media (hover: hover) {
  .home-tag:hover,
  .note-tags a:hover {
    color: var(--color-tag-hover);
    background: var(--color-tag-hover-bg);
  }
}
.home-tag--active {
  background: var(--color-tag-active-bg);
  color: var(--color-white);
  pointer-events: none;
  cursor: default;
}
.home-tag-count {
  opacity: 0.6;
  font-size: 0.88em;
  margin-left: 0.05rem;
}

/* Теги на 1600+ — крупный стиль (переопределяет дефолт, блок после базовых стилей) */
@media (min-width: 1600px) {
  .home-tag,
  .note-tags a {
    padding: 0.5rem 1rem;
  }
  .home-tag-count {
    font-size: 0.85em;
    margin-left: 0.25rem;
  }
}

/* Hidden tags (collapsed state) */
.home-tag-item--hidden {
  display: none;
}

/* Active hidden tag should be visible when collapsed */
.home-tag-item--active-hidden {
  display: block;
  /* Keep original order - don't move to end */
}

/* Expanded state - show all */
.home-tags--expanded .home-tag-item--hidden {
  display: block;
}

/* Кнопка «Все теги» — наследует размер и падинги от .home-tag (не переопределять font-size) */
.home-tag-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  border: none;
  font-family: inherit;
}
.home-tag-toggle-icon {
  transition: transform 0.2s ease;
}
.home-tags--expanded .home-tag-toggle-icon {
  transform: rotate(180deg);
}
.home-tag-toggle-wrap {
  order: 101; /* Always last */
}

/* Album loader for lazy loading */
.album-loader {
  display: flex;
  justify-content: center;
  padding: 2rem;
  min-height: 60px;
}
.album-loader-spinner {
  width: 32px;
  height: 32px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.album-loader-spinner svg {
  display: block;
  width: 100%;
  height: 100%;
}
.album-loader--loading .album-loader-spinner {
  opacity: 1;
}

/* PhotoSwipe: скрыть иконку зума */
.pswp__button--zoom {
  display: none;
}

/* Awards list */
.awards-list {
  max-width: 30rem;
  margin: 0 auto;
}

.award-item {
  text-align: center;
  margin-bottom: 3rem;
}

.award-meta {
  margin-bottom: 1.2rem;
}

.award-decoration {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  line-height: 1;
}

.award-image .img-inset-shadow-wrap img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

/* Album prevnext navigation - full width like header/footer */
.album-prevnext {
  margin-top: 0;
  width: 100%;
}

.album-prevnext-container {
  position: relative;
}

.album-prevnext-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  max-width: 113rem;
  margin: 0 auto;
}

.album-prevnext-home-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  z-index: 1;
}

.album-prevnext-item {
  display: flex;
  flex-direction: column;
}

.album-prevnext-item--prev {
  flex: 0 1 auto;
  min-width: 0;
  width: auto;
  max-width: 15%;
  min-width: 10rem;
  text-align: left;
}

.album-prevnext-item--next {
  flex: 0 1 auto;
  min-width: 0;
  width: auto;
  max-width: 15%;
  min-width: 10rem;
  text-align: right;
}

.album-prevnext-item--empty {
  flex: 0 1 auto;
  max-width: 15%;
  min-width: 10rem;
}

.album-prevnext-link {
  display: block;
  width: 100%;
  text-decoration: none;
  color: currentColor;
}

.album-prevnext-link--home {
  text-decoration: none;
  color: currentColor;
}

.album-prevnext-label {
  display: block;
  margin-bottom: 0.8rem;
  line-height: 1.5em;
  /* Наследует стиль от body - font-weight, font-size, font-family */
}

.album-prevnext-label--prev {
  text-align: left;
}

.album-prevnext-label--home {
  text-align: center;
}

.album-prevnext-label--next {
  text-align: right;
}

.album-prevnext-link figure {
  margin: 0;
  width: 100%;
}

.album-prevnext-link figure img,
.album-prevnext-link figure video {
  width: 100%;
  height: auto;
  display: block;
}

.album-prevnext-link figure .blur-up {
  display: block;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: var(--color-blur-placeholder-light);
}
[data-theme="dark"] .album-prevnext-link figure .blur-up {
  background: var(--color-blur-placeholder-dark);
}
.album-prevnext-link figure .blur-up[data-blur-up]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--blur-bg);
  background-size: cover;
  background-position: center;
  filter: blur(20px);
  transform: scale(1.1);
}
.album-prevnext-link figure .blur-up img {
  position: relative;
  z-index: 1;
  transition: opacity 0.4s ease;
}
.album-prevnext-link figure .blur-up[data-blur-up] img {
  opacity: 0;
}
.album-prevnext-link figure .blur-up.is-loaded img {
  opacity: 1;
}
.album-prevnext-link figure .blur-up.cover-inset-shadow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 0 3em 0 rgba(134, 143, 154, 0.17) inset;
  -webkit-box-shadow: 0 0 3em 0 rgba(134, 143, 154, 0.17) inset;
}

.album-prevnext-link .img-caption {
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  font-size: 0.8rem;
  line-height: 1.3em;
}

.album-prevnext-link .album-card-meta {
  margin-top: 0.25rem;
  font-size: 0.75rem;
}

/* Мобилка: только до 499px; 500–767px — отдельный брейкпоинт хедера */
@media (max-width: 499px) {
  html {
    font-size: 18px; /* 1rem = 18px на мобиле */
  }
  body {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }
  
  /* Скрыть текст в лого на мобиле, оставить только аватар */
  .logo-text {
    display: none;
  }
  
  /* Размер текста в хедере на мобиле (внутренние страницы) */
  .logo,
  .menu-pages a,
  .social a {
    font-size: 0.9rem;
  }
  
  /* ——— Главная: хедер max 499px (макет Figma) ——— */
  .header:has(.header-inner) {
    margin-bottom: 3.6rem;
  }
  
  .header:has(.header-inner) .header-inner {
    display: inline-grid;
    row-gap: 1.3rem;   /* 26px */
    column-gap: 1rem;  /* 20px */
    align-self: stretch;
    grid-template-rows: repeat(2, fit-content(100%));
    grid-template-columns: minmax(0, 2fr);
    width: 100%;
    margin-top: 0;
  }
  
  /* Первая ячейка: тайтл + сабтайтл */
  .header:has(.header-inner) .header-col-intro {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
    gap: 0.8em;
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
    justify-self: stretch;
    max-width: 20em;
  }
  
  .header:has(.header-inner) .header-col-title {
    width: 100%;
    max-width: none;
    padding: 0;
  }
  
  .header:has(.header-inner) .header-col-title .h1 {
    font-size: 1rem;
    line-height: 120%;
  }
  
  .header:has(.header-inner) .header-col-bio {
    padding: 0;
  }
  
  .header:has(.header-inner) .header-col-bio .color-grey {
    font-size: 0.9rem;
    line-height: 120%;
  }
  
  /* Вторая ячейка: меню — [nav | contacts | theme] */
  .header:has(.header-inner) .header-col-menu {
    display: inline-grid;
    row-gap: 16px;
    column-gap: 16px;
    grid-template-rows: repeat(1, fit-content(100%));
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) fit-content(100%);
    grid-row: 2 / span 1;
    grid-column: 1 / span 1;
    justify-self: stretch;
  }
  
  .header:has(.header-inner) .header-col-contacts {
    display: contents;
  }
  
  .header:has(.header-inner) .header-col-nav {
    grid-column: 1;
    grid-row: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: max-content;
    align-items: stretch;
    gap: 0.2rem;
  }

  .header:has(.header-inner) .header-col-contacts .social {
    grid-column: 2;
    grid-row: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: max-content;
    align-items: stretch;
    gap: 0.2rem;
  }

  .header:has(.header-inner) .header-col-theme {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
  }
  
  .header:has(.header-inner) .header-col-nav.menu-pages a,
  .header:has(.header-inner) .header-col-contacts .social a {
    font-size: 0.9rem;
    padding: 0;
    color: var(--color-link);
  }
  
  .header {
    justify-content: space-between;
    align-items: flex-start;
  }
  
  .header-inner {
    flex-direction: column;
    margin-top: 0;
  }
  
  .menu-pages {
    flex-direction: row;
    gap: 2rem;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 0;
  }
  
  .menu-item {
    width: auto;
  }
  
  /* На мобиле уменьшаем отступы для ссылок меню (внутренние страницы) */
  .menu-pages a {
    padding: 0.2rem 0;
  }
  
  .social {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  
  .social a {
    padding: 0.2rem 0;
  }
  
  /* Блок "далее ранее" на мобиле */
  .album-prevnext {
    margin-top: 0;
  }
  
  .album-prevnext-row {
    gap: 0;
  }
  
  .album-prevnext-label {
    font-size: 0.9rem;
  }
  
  .album-prevnext-item--prev,
  .album-prevnext-item--next,
  .album-prevnext-item--empty {
    min-width: 38%;
  }

  .album-prevnext-link .img-caption {
    font-size: 0.7rem;
    line-height: 1.3em;
  }
  
  /* Размер текста и падинги тегов на мобиле (6px 12px 8px 12px) */
  .home-tag,
  .note-tags a {
    font-size: 0.7rem;
    padding: 0.3rem 0.6rem 0.4rem 0.6rem;
  }
  
  /* Марджин боттом у тегов на главной странице на мобиле */
  .home-tags {
    margin-bottom: 1.6rem;
  }
  
  /* Высота кавера на главной странице на мобиле */
  .home-cover-wrapper {
    height: 25vh;
  }
  
  /* Размер заголовков на мобиле */
  .text h1,
  .h1 {
    font-size: 2rem;
    line-height: 1.15em;
  }

  .text h2,
  .h2 {
    font-size: 1.4rem;
    line-height: 1.2em;
  }

  .text h3,
  .h3 {
    font-size: 1rem;
    line-height: 1.4em;
    margin-bottom: 0.1em;
    font-weight: 600;
  }
  
  .note-header {
    margin-bottom: 1.7rem;
  }

  .note-header .h1,
  .note-header .note-title {
    font-size: 1.8rem;
    line-height: 115%;
  }

  .note-subheading {
    font-size: 1.4rem;
    line-height: 1.2em;
  }
  
  /* Отступы между картинками в галерее на мобиле */
  .text figure.gallery--grid ul,
  .text figure.gallery--list ul {
    gap: 0.8rem;
  }
  
  /* Уменьшаем отступ у подписей на мобиле */
  .text figcaption {
    padding-top: 0.35rem;
  }
}

/* ——— Страница поиска ——— */
.search-page {
  max-width: 26rem;
  margin: 0 auto;
  overflow-x: hidden;
}
.search-page__form {
  margin-bottom: 1.5rem;
}
.search-page__form .search-form {
  max-width: 20rem;
}
.search-page__form .search-form__input {
  min-width: 12rem;
  max-width: none;
}
@media (max-width: 499px) {
  .search-page {
    padding-left: 0.2rem;
  }
  .search-page__form .search-form__wrap {
    margin-left: -0.2rem;
  }
  .search-page__form .search-form__input {
    min-width: 0;
  }
  .search-results__link,
  .search-results__year {
    font-size: 0.9rem;
  }

  /* Размер иконок: поиск, переключатель темы, крестик закрытия — 1.12rem на мобиле */
  .header-search-link svg {
    width: 1.12rem;
    height: 1.12rem;
  }
  .theme-toggle,
  .theme-toggle__icon,
  .theme-toggle__icon svg,
  .theme-toggle__icon img {
    width: 1.12rem;
    height: 1.12rem;
  }
  .header-close-link svg {
    width: 1.12rem;
    height: 1.12rem;
  }

  /* Отступ сверху у блока поиск+тема и у крестика закрытия */
  .header-col-theme,
  .header-internal__theme,
  .header-close-link {
    margin-top: 0.1em;
  }
}
.search-page__heading {
  color: var(--color-text-grey);
  font-size: 0.8rem;
  line-height: 125%;
  margin-bottom: 1rem;
}
@media (max-width: 499px) {
  .search-page__heading {
    font-size: 0.7rem;
  }
}
.search-page__hint {
  color: var(--color-text-grey);
}
.search-results {
  padding: 0;
  margin: 0;
}
.search-results__item {
  list-style: none;
}
.search-results__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0;
  text-decoration: none;
  color: inherit;
}
.search-results__row:hover {
  color: var(--color-link);
}
.search-results__cover {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  overflow: hidden;
  background: var(--color-light);
}
.search-results__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
}
.search-results__text {
  flex: 1;
  min-width: 0;
}
.search-results__link {
  min-width: 0;
  margin-right: 0.1rem;
}
.search-results__year {
  color: var(--color-text-grey);
  font-size: 0.9em;
}