/* ============================================================================
 * kupil-erubl.com — S5 «Дневник наблюдения»
 * Собственная вёрстка. Из общего пакета взяты только токены и шрифт.
 *
 * Схема имён: префикс dnv-, минимум классов, максимум селекторов по структуре
 * (.dnv-lenta > article > .dnv-shtamp > time). Карточек нет, радиусы нулевые,
 * границы — волосяные линии. Ведущий цвет приглушённый (gray-400), синий
 * появляется ровно один раз — на бейдже последней записи.
 * ========================================================================== */

:root {
  --dnv-shirina: 748px;
  --dnv-data: 96px;          /* колонка даты в ленте */
  --dnv-provod: 24px;        /* зазор между датой и текстом */
  --dnv-mezhdu-zapisyami: 32px;
  --dnv-mezhdu-blokami: 80px;
  --dnv-polya: 20px;

  --dnv-kegl: 19px;
  --dnv-stroka: 1.72;
  --dnv-ves: 350;

  --dnv-chernila: var(--color-ink-900);
  --dnv-bumaga: var(--color-gray-400);
  --dnv-tikho: var(--color-gray-500);
  --dnv-linia: var(--color-border-default);
  --dnv-akcent: var(--color-blue-600);
}

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

html { scroll-padding-top: 24px; }

body {
  margin: 0;
  background: var(--color-white);
  color: var(--dnv-chernila);
  font-size: var(--dnv-kegl);
  line-height: var(--dnv-stroka);
  font-weight: var(--dnv-ves);
}

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }

img { display: block; max-width: 100%; height: auto; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--dnv-bumaga);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duration-fast) var(--ease-out);
}

a:hover { text-decoration-color: var(--dnv-chernila); }

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

/* --- служебная ссылка для клавиатуры ------------------------------------- */

.dnv-propusk {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-white);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--dnv-linia);
}

.dnv-propusk:focus { left: 0; z-index: 2; }

/* --- шапка: строка, а не панель ------------------------------------------ */

.dnv-shapka {
  max-width: var(--dnv-shirina);
  margin: 0 auto;
  padding: var(--space-8) var(--dnv-polya) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.dnv-shapka > p { font-weight: var(--fw-medium); letter-spacing: 0.01em; }
.dnv-shapka > p > a { text-decoration: none; }
.dnv-shapka > p > span { color: var(--dnv-bumaga); font-weight: var(--fw-regular); }

.dnv-shapka > nav {
  display: flex;
  gap: var(--space-4);
  color: var(--dnv-tikho);
}

/* --- строка предупреждения ------------------------------------------------ */

.dnv-ostorozhno {
  max-width: var(--dnv-shirina);
  margin: 0 auto;
  padding: var(--space-3) var(--dnv-polya);
  border-top: 1px solid var(--dnv-linia);
  border-bottom: 1px solid var(--dnv-linia);
  color: var(--dnv-tikho);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

/* --- основной поток ------------------------------------------------------- */

main {
  max-width: var(--dnv-shirina);
  margin: 0 auto;
  padding: var(--space-12) var(--dnv-polya) var(--space-20);
}

main > section,
main > article,
main > nav,
main > p { margin-bottom: var(--dnv-mezhdu-blokami); }

main > *:last-child { margin-bottom: 0; }

/* --- заголовки ------------------------------------------------------------ */

h1 {
  font-size: clamp(30px, 4.4vw + 12px, 42px);
  line-height: 1.18;
  font-weight: var(--fw-light);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h2 {
  font-size: 24px;
  line-height: 1.3;
  font-weight: var(--fw-regular);
  text-wrap: balance;
}

h3 {
  font-size: 21px;
  line-height: 1.35;
  font-weight: var(--fw-medium);
}

/* --- вводный блок главной ------------------------------------------------- */

.dnv-vvod > h1 { margin-bottom: var(--space-6); }
.dnv-vvod > p + p { margin-top: var(--space-4); }
.dnv-vvod > p:first-of-type { font-size: 21px; }

/* --- правила дневника ----------------------------------------------------- */

.dnv-pravila > h2 { margin-bottom: var(--space-6); }

.dnv-pravila ul { list-style: none; }

.dnv-pravila li {
  padding: var(--space-3) 0 var(--space-3) var(--space-8);
  border-top: 1px solid var(--dnv-linia);
  position: relative;
}

.dnv-pravila li:last-child { border-bottom: 1px solid var(--dnv-linia); }

.dnv-pravila li::before {
  content: counter(list-item);
  position: absolute;
  left: 0;
  color: var(--dnv-bumaga);
  font-variant-numeric: tabular-nums;
}

/* --- лента записей: дата слева, текст справа ------------------------------ */

.dnv-lenta > article {
  display: grid;
  grid-template-columns: var(--dnv-data) minmax(0, 1fr);
  gap: 0 var(--dnv-provod);
  padding-block: var(--dnv-mezhdu-zapisyami);
  border-top: 1px solid var(--dnv-linia);
}

.dnv-lenta > article:last-child { border-bottom: 1px solid var(--dnv-linia); }

.dnv-lenta > article > div > h2 {
  font-size: 22px;
  line-height: 1.32;
  font-weight: var(--fw-regular);
}

.dnv-lenta > article > div > h2 > a { text-decoration-color: transparent; }
.dnv-lenta > article > div > h2 > a:hover { text-decoration-color: var(--dnv-bumaga); }

.dnv-lenta > article > div > p { margin-top: var(--space-3); color: var(--dnv-tikho); }

/* --- штамп даты ----------------------------------------------------------- */

.dnv-shtamp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
  color: var(--dnv-bumaga);
}

.dnv-shtamp > time {
  font-variant-numeric: tabular-nums;
  color: var(--dnv-chernila);
  font-weight: var(--fw-medium);
}

.dnv-metka,
.dnv-svezhaya {
  border: 1px solid var(--dnv-linia);
  border-radius: var(--radius-pill);
  padding: 1px var(--space-3);
  font-size: var(--text-label-xs-size);
  line-height: 18px;
  white-space: nowrap;
}

.dnv-metka[data-metka="nepriyatnaya"] {
  border-color: var(--dnv-chernila);
  color: var(--dnv-chernila);
}

.dnv-svezhaya {
  border-color: var(--dnv-akcent);
  color: var(--dnv-akcent);
}

/* --- темы ----------------------------------------------------------------- */

.dnv-temy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.dnv-temy > a,
.dnv-temy > span {
  border: 1px solid var(--dnv-linia);
  border-radius: var(--radius-pill);
  padding: 1px var(--space-3);
  color: var(--dnv-tikho);
  text-decoration: none;
}

.dnv-temy > a:hover { border-color: var(--dnv-bumaga); color: var(--dnv-chernila); }

/* --- запись целиком ------------------------------------------------------- */

.dnv-zapis > header { margin-bottom: var(--space-8); }

.dnv-zapis > header > .dnv-shtamp {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.dnv-zapis > header > h1,
.dnv-zapis > header > h3 { font-weight: var(--fw-light); }

.dnv-zapis > header > h3 {
  font-size: clamp(26px, 3vw + 12px, 34px);
  line-height: 1.22;
}

.dnv-zapis > header > h3 > a { text-decoration-color: transparent; }
.dnv-zapis > header > h3 > a:hover { text-decoration-color: var(--dnv-bumaga); }

.dnv-tekst { max-width: 62ch; }

.dnv-tekst > * + * { margin-top: var(--space-6); }

.dnv-tekst h2 {
  margin-top: var(--space-12);
  font-size: 22px;
  font-weight: var(--fw-medium);
}

.dnv-tekst ul,
.dnv-tekst ol { padding-left: var(--space-6); }

.dnv-tekst li + li { margin-top: var(--space-2); }

.dnv-tekst blockquote {
  padding-left: var(--space-6);
  border-left: 1px solid var(--dnv-bumaga);
  color: var(--dnv-tikho);
}

.dnv-tekst strong { font-weight: var(--fw-semibold); }

.dnv-tekst code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--color-gray-50);
  padding: 1px 4px;
}

/* --- незаполненные места -------------------------------------------------- */

.dnv-zapolnit {
  background: var(--color-gray-150);
  color: var(--dnv-tikho);
  padding: 0 4px;
  font-size: 0.86em;
  font-weight: var(--fw-medium);
}

/* --- служебные заметки над записью --------------------------------------- */

.dnv-zametka {
  margin-bottom: var(--space-8);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--dnv-chernila);
  border-bottom: 1px solid var(--dnv-chernila);
  color: var(--dnv-tikho);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

/* --- постоянная сноска ---------------------------------------------------- */

.dnv-zapis > footer { margin-top: var(--space-12); }

.dnv-snoska {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--dnv-linia);
  max-width: 62ch;
  color: var(--dnv-tikho);
  font-size: var(--text-body-sm-size);
  line-height: 1.6;
}

.dnv-postoyannaya { color: var(--dnv-tikho); font-size: var(--text-body-sm-size); }

/* --- соседние записи ------------------------------------------------------ */

.dnv-sosedi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--dnv-linia);
}

.dnv-sosedi > p:only-child { grid-column: span 2; }

.dnv-sosedi span {
  display: block;
  color: var(--dnv-bumaga);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.dnv-sosedi a { text-decoration-color: transparent; }
.dnv-sosedi a:hover { text-decoration-color: var(--dnv-bumaga); }

.dnv-sosedi time {
  display: block;
  color: var(--dnv-bumaga);
  font-size: var(--text-body-sm-size);
  font-variant-numeric: tabular-nums;
}

/* --- списки и архивы ------------------------------------------------------ */

.dnv-spisok > h1 { margin-bottom: var(--space-4); }

.dnv-podzagolovok {
  color: var(--dnv-tikho);
  max-width: 62ch;
  margin-bottom: var(--space-8);
}

.dnv-mesyacy > h2,
.dnv-podpiska > h2,
.dnv-kto > h2,
.dnv-poslednyaya > h2,
.dnv-arhiv-lenta > h2 { margin-bottom: var(--space-6); }

.dnv-mesyacy ul { list-style: none; }

.dnv-mesyacy li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--dnv-linia);
}

.dnv-mesyacy li:last-child { border-bottom: 1px solid var(--dnv-linia); }
.dnv-mesyacy li > span { color: var(--dnv-bumaga); font-variant-numeric: tabular-nums; }

.dnv-temy-vse { margin-bottom: var(--space-8); }
.dnv-temy-vse > p { color: var(--dnv-bumaga); font-size: var(--text-body-sm-size); }

.dnv-temy-vse ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  list-style: none;
  font-size: var(--text-body-sm-size);
}

.dnv-temy-vse a {
  display: inline-block;
  border: 1px solid var(--dnv-linia);
  border-radius: var(--radius-pill);
  padding: 1px var(--space-3);
  text-decoration: none;
  color: var(--dnv-tikho);
}

.dnv-temy-vse a:hover { border-color: var(--dnv-bumaga); color: var(--dnv-chernila); }
.dnv-temy-vse a > span { color: var(--dnv-bumaga); font-variant-numeric: tabular-nums; }

/* --- постраничная навигация ----------------------------------------------- */

.dnv-stranicy {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  font-size: var(--text-body-sm-size);
}

.dnv-stranicy ol {
  display: flex;
  gap: var(--space-3);
  list-style: none;
  font-variant-numeric: tabular-nums;
}

.dnv-stranicy [aria-current="page"] { color: var(--dnv-bumaga); }

/* --- текстовые страницы --------------------------------------------------- */

.dnv-stranica { max-width: 62ch; }
.dnv-stranica > * + * { margin-top: var(--space-6); }
.dnv-stranica > h1 { margin-bottom: var(--space-8); }
.dnv-stranica > h2 { margin-top: var(--space-12); }
.dnv-stranica > .dnv-lid { font-size: 21px; }
.dnv-stranica ul { padding-left: var(--space-6); }
.dnv-stranica li + li { margin-top: var(--space-2); }

.dnv-vozvrat { color: var(--dnv-tikho); font-size: var(--text-body-sm-size); }

/* --- подвал в одну строку ------------------------------------------------- */

.dnv-podval {
  max-width: var(--dnv-shirina);
  margin: 0 auto;
  padding: var(--space-6) var(--dnv-polya) var(--space-12);
  border-top: 1px solid var(--dnv-linia);
  color: var(--dnv-tikho);
  font-size: var(--text-body-sm-size);
  line-height: 1.6;
}

.dnv-podval > p + p { margin-top: var(--space-3); color: var(--dnv-bumaga); }

/* --- мобильная раскладка: дата уходит строкой над записью ---------------- */

@media (max-width: 719px) {
  :root {
    --dnv-kegl: 18px;
    --dnv-polya: 16px;
    --dnv-mezhdu-blokami: 56px;
  }

  .dnv-lenta > article {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .dnv-shtamp {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .dnv-sosedi { grid-template-columns: minmax(0, 1fr); }
  .dnv-sosedi > p:only-child { grid-column: auto; }

  .dnv-shapka { padding-top: var(--space-6); }
  main { padding-block: var(--space-8) var(--space-16); }
}

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