@charset "UTF-8";
/* Главная: первый экран, сетка «Из блога», блок об авторе.
   Общие компоненты — в ds-core.css. */

/* Первый экран */
.ds-hero { padding-top: var(--space-9); }
.ds-hero__kicker {
  margin: 0 0 var(--space-5);
  font-family: var(--label-family); font-size: var(--label-size); line-height: var(--label-line);
  font-weight: var(--label-weight); letter-spacing: var(--label-tracking);
  text-transform: uppercase; color: var(--ink-600);
}
.ds-hero__title {
  margin: 0;
  font-size: var(--display-1-size); line-height: var(--display-1-line);
  font-weight: var(--display-1-weight); letter-spacing: var(--display-1-tracking);
}
.ds-hero__lead {
  margin: var(--space-6) 0 0; max-width: 640px;
  font-size: var(--lead-size); line-height: var(--lead-line); color: var(--ink-600);
}
.ds-hero__actions { margin-top: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }

/* Страница 404: маскот MAV слева, текст справа; на узком экране картинка сверху.
   Картинка — кадр из content/mascot/mav-master-concept-v4.png (README, «Страница 404»). */
.ds-lost {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-8);
  align-items: center; padding: calc(var(--space-9) + var(--space-7)) 0;
}
.ds-lost__art img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
/* MAV — кнопка: открывает игру «MAV ищет ответ» (assets/mav.js, README «Игра»).
   Подсказка под картинкой видна при наведении и фокусе, на сенсорных экранах — всегда. */
.ds-lost__play {
  position: relative; display: block; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: inherit; cursor: pointer; border-radius: var(--radius-lg);
}
.ds-lost__play picture { display: block; }
.ds-lost__hint {
  position: absolute; left: 0; right: 0; top: calc(100% + var(--space-3));
  font-family: var(--label-family); font-size: var(--label-size); line-height: var(--label-line);
  font-weight: var(--label-weight); letter-spacing: var(--label-tracking); text-transform: uppercase;
  color: var(--ink-600); text-align: center; visibility: hidden;
}
.ds-lost__play:hover .ds-lost__hint, .ds-lost__play:focus-visible .ds-lost__hint { visibility: visible; }
@media (hover: none) { .ds-lost__hint { position: static; display: block; margin-top: var(--space-3); visibility: visible; } }
.ds-lost__kicker { color: var(--clay-600); }
.ds-lost__title {
  margin: 0; font-size: 48px; line-height: var(--display-1-line);
  font-weight: var(--display-1-weight); letter-spacing: var(--display-1-tracking);
}
.ds-lost__meta {
  margin: var(--space-6) 0 0;
  font-family: var(--label-family); font-size: var(--label-size); line-height: var(--label-line);
  font-weight: var(--label-weight); letter-spacing: var(--label-tracking);
  text-transform: uppercase; color: var(--ink-600);
}
/* Светлый снимок на тёмной странице чуть приглушаем, чтобы не слепил */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ds-lost__art img { filter: brightness(0.88); }
}
:root[data-theme="dark"] .ds-lost__art img { filter: brightness(0.88); }

/* Секция «Из блога» */
.ds-stories { margin-top: var(--space-9); }
.ds-stories__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5);
  padding-top: var(--space-5); border-top: 1px solid var(--line-200);
}
.ds-stories__head h2 {
  margin: 0;
  font-size: var(--heading-3-size); line-height: var(--heading-3-line);
  font-weight: var(--heading-3-weight); letter-spacing: var(--heading-3-tracking);
}
.ds-stories__grid { margin-top: var(--space-6); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.ds-stories__row { margin-top: var(--space-6); display: flex; gap: var(--space-6); align-items: stretch; }

/* Обо мне и сотрудничество */
.ds-secondary {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8);
  margin-top: var(--space-9); padding-top: var(--space-7);
  border-top: 1px solid var(--line-200);
}
.ds-secondary h2 {
  margin: 0;
  font-size: var(--heading-3-size); line-height: var(--heading-3-line);
  font-weight: var(--heading-3-weight); letter-spacing: var(--heading-3-tracking);
}
.ds-secondary p {
  margin: var(--space-5) 0 0;
  font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--ink-600);
}
.ds-secondary__actions { margin-top: var(--space-5); display: flex; gap: var(--space-6); align-items: center; }

@media (max-width: 860px) {
  .ds-hero { padding-top: var(--space-7); }
  .ds-lost { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-7) 0 var(--space-8); }
  .ds-lost__art { width: 180px; }
  .ds-lost__title { font-size: 36px; }
  .ds-hero__title { font-size: 38px; }
  .ds-stories__grid { grid-template-columns: 1fr; }
  .ds-stories__row { flex-direction: column; }
  .ds-secondary { grid-template-columns: 1fr; gap: var(--space-7); }
}

@media (max-width: 460px) {
  .ds-hero__title { font-size: 32px; }
  .ds-lost__title { font-size: 30px; }
}