/* Nocturne — служебные страницы: 404 и дальше контакты, инфо-страницы,
   карта сайта. Цвета только переменными, макет — на общей сетке темы. */

/* ── 404 ────────────────────────────────────────────────────────── */

.nc-404 {
  display: grid; grid-template-columns: 300px 1fr; gap: var(--space-8);
  align-items: center; padding-top: 64px; padding-bottom: 72px;
}
.nc-404__code {
  font-family: var(--font-heading); font-size: 140px; line-height: .9;
  font-weight: 500; letter-spacing: -.04em; color: var(--color-accent-900);
  /* цифра — фон, а не заголовок: не спорит с текстом и не читается вслух */
  -webkit-text-stroke: 1px var(--color-accent-800);
}
.nc-404__body { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.nc-404__title { font-size: 34px; margin: var(--space-2) 0 0; }
.nc-404__text { margin: 0; font-size: 15px; color: var(--color-neutral-300); max-width: 60ch; }

.nc-404__search { display: flex; gap: var(--space-3); width: 100%; max-width: 520px; }
.nc-404__search .nc-input { flex: 1; min-height: 44px; }
.nc-404__search .nc-btn { min-height: 44px; padding: 0 22px; }

.nc-404__cats { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.nc-404__acts { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }

@media (max-width: 1023px) {
  .nc-404 { grid-template-columns: 1fr; gap: var(--space-4); padding-top: 48px; padding-bottom: 56px; }
  .nc-404__code { font-size: 96px; }
}
@media (max-width: 767px) {
  .nc-404__code { font-size: 72px; }
  .nc-404__title { font-size: 26px; }
  .nc-404__search { flex-direction: column; }
  .nc-404__search .nc-btn { width: 100%; }
}

/* ── карта сайта ────────────────────────────────────────────────── */

.nc-sm-head { padding-top: var(--space-4); }
.nc-sm-head__title { font-size: 38px; line-height: 1.1; margin: var(--space-3) 0 0; }
.nc-sm-head__note { margin: var(--space-3) 0 0; font-size: 15px; color: var(--color-neutral-400); }

.nc-sm { padding-top: var(--space-6); padding-bottom: 64px; }
/* Список длинный: в одну колонку это простыня на несколько экранов. */
.nc-sm__list {
  columns: 3; column-gap: var(--space-8);
  list-style: none; margin: 0; padding: 0;
}
.nc-sm__item {
  break-inside: avoid; display: flex; gap: var(--space-3);
  padding: 5px 0; font-size: 15px; line-height: 1.45;
}
.nc-sm__num { color: var(--color-neutral-600); font-size: 13px; min-width: 28px; text-align: right; flex: none; }
.nc-sm__link { color: var(--color-neutral-200); text-decoration: none; }
.nc-sm__link:hover { color: var(--color-accent-200); }
.nc-sm__pagi { margin-top: var(--space-8); }
.nc-sm__empty { color: var(--color-neutral-400); }

@media (max-width: 1023px) { .nc-sm__list { columns: 2; column-gap: var(--space-6); } }
@media (max-width: 767px) {
  .nc-sm-head__title { font-size: 26px; }
  .nc-sm__list { columns: 1; }
  /* строка-ссылка это цель нажатия — на телефоне доводим до 44px */
  .nc-sm__item { padding: 0; }
  .nc-sm__link { display: flex; align-items: center; min-height: 44px; }
}