/* ==========================================================================
   404 - стили страницы.

   Собрано из source/tajiro скриптом tools/port-tajiro.mjs. Править здесь
   бессмысленно: следующий прогон затрёт. Правка идёт в src/css/.
   ========================================================================== */

/* ========================= HEADER STYLES ========================= */
/* Переопределения шапки для этой страницы. Общая шапка живёт в style.css
   в корне темы. */
/* ========================= /HEADER STYLES ======================== */

/* ========================= PAGE STYLES =========================== */
/* ---------------------------------------------------------------
   css/404/00-404.css
   --------------------------------------------------------------- */
/* ==========================================================================
   tajiro — 404

   Один экран: цифры, заголовок, пояснение, две кнопки — всё по центру.
   Ничего нового в систему не заводится: .h1, .lead и кнопки взяты
   готовыми, здесь только раскладка и бледные цифры.

   Экран занимает высоту окна за вычетом шапки, чтобы подвал не
   подпрыгивал к середине экрана на пустой странице. svh, а не vh: на
   телефоне vh считает окно без панели браузера, и экран вылезал бы за
   сгиб. Всё, что ниже, — телефонные значения, ступени по возрастанию.
   ========================================================================== */
.er {
    display: flex;
    align-items: center;
    min-height: calc(100svh - var(--nav-h, 72px));
    padding-block: 64px;
}

.er__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Цифры — подложка, а не заголовок: дисплейным, песочным на креме, почти
   без контраста. Заголовок заходит на их нижнюю часть — так у образца, и
   так цифры читаются фоном, а не второй строкой текста. */
.er__code {
    font-family: var(--f-display);
    font-size: clamp(120px, 34vw, 160px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--c-sand);
    opacity: 0.22;
    user-select: none;
}

.er__title {
    margin-top: -0.42em;
}

/* Курсивное слово подтянуто к предыдущему — тот же приём, что у
   заголовков «о нас» и контактов: наклон, подделанный браузером,
   раздвигает пробел перед курсивом. */
.er__title em { margin-inline-start: 0; }

.er__lede {
    max-width: 440px;
    margin-top: 16px;
    color: var(--c-text-body);
    text-wrap: balance;
}

/* Кнопки на телефоне во всю ширину, одна под другой (общее правило .btn
   из core/base.css); с 601 — в ряд по содержимому. */
/* center, а не stretch: на 461–600 колонка шире потолка кнопки (420,
   core/base.css), и при stretch кнопки прижимались к левому краю, мимо
   оси цифр и заголовка. */
.er__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 32px;
}

@media (min-width: 601px) {
  .er { padding-block: 80px; }
  .er__code { font-size: 200px; }
  .er__actions {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    width: auto;
    margin-top: 36px;
  }
}

@media (min-width: 901px) {
  .er { padding-block: 96px; }
  .er__code { font-size: 240px; }
}
/* ========================= /PAGE STYLES ========================== */

/* ========================= FOOTER STYLES ========================= */
/* Переопределения подвала для этой страницы. */
/* ========================= /FOOTER STYLES ======================== */