/* Тема блога DevContent.
   Гарнитура — Onest (OFL, файлы лежат у нас, см. fonts/OFL.txt), одна на всё:
   и текст, и заголовки, и подписи. Раньше тело статьи набиралось Georgia,
   а интерфейс — системным гротеском; два семейства в одном тексте и разный
   вид на каждой ОС — от этого текст и «съезжал».

   Цвет — оранжевый ITSM4U, чтобы блог и портал читались одной семьёй.
   Две роли, два токена (значения и контрасты — из itsm4u/src/partials/base.html):
   --warm      #DD5A2B — 3,77:1 на белом. Только крупный кегль и заливки.
   --warm-ink  #C24A18 — 4,90:1 на белом. Ссылки, метки, мелкий текст.

   Пропорции набора — по образцу maximilyahov.com: заголовок 55/53,
   лид 26/30, текст 18/26, мелкое 12/14, колонка 720. */

/* ── Гарнитура ───────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/onest-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/onest-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/onest-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/onest-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Токены ──────────────────────────────────────────────────────────── */

:root {
  --paper:     #ffffff;
  --ground:    #f5f5f7;
  --ink:       #1d1d1f;
  --ink-2:     #515154;
  --muted:     #86868b;
  --hair:      #d2d2d7;
  --hair-2:    #ebebed;

  --warm:      #dd5a2b;
  --warm-ink:  #c24a18;
  --warm-wash: #fdf0ea;
  --warm-hair: rgba(194, 74, 24, 0.22);
  --warm-hover:#a63709;

  --mark:      #fdf0ea;

  --font: 'Onest', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono: Consolas, 'Cascadia Mono', 'DejaVu Sans Mono', monospace;

  --title:      55px;  --title-lh:  53px;
  --lead:       26px;  --lead-lh:   30px;
  --text:       18px;  --text-lh:   26px;
  --sub:        25px;  --sub-lh:    25px;
  --small:      12px;  --small-lh:  14px;

  --col:  720px;   /* колонка чтения */
  --page: 1280px;  /* ширина макета */
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #202020;
    --ground:    #2a2a2a;
    --ink:       #c0c0c0;
    --ink-2:     #a8a8a8;
    --muted:     #8a8a8a;
    --hair:      rgba(192, 192, 192, 0.22);
    --hair-2:    rgba(192, 192, 192, 0.12);

    --warm:      #ff7a4d;   /* 6,32:1 на #202020 */
    --warm-ink:  #ff8a5c;   /* 7,02:1 на #202020 */
    --warm-wash: #33261f;
    --warm-hair: rgba(255, 138, 92, 0.28);
    --warm-hover:#ffa07a;

    --mark:      #4a3526;
  }
}

/* ── Основа ──────────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; background: var(--paper); }

body {
  margin: 0;
  padding: 0 9%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text);
  line-height: var(--text-lh);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--warm-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--warm-hair);
  transition: color 0.2s ease, border-color 0.2s ease;
}
a:hover { color: var(--warm-hover); border-bottom-color: var(--warm-hover); }
a:focus-visible { outline: 2px solid var(--warm); outline-offset: 3px; border-radius: 3px; }

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

.tnum { font-variant-numeric: tabular-nums; }

/* ── Шапка ───────────────────────────────────────────────────────────── */

.top {
  max-width: var(--page);
  margin: 0 auto;
  padding: 48px 0 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 28px;
  border-bottom: 1px solid var(--hair-2);
}

.top__brand {
  color: var(--ink);
  border-bottom: 0;
  font-size: 20px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.top__brand:hover { color: var(--warm-ink); }

.top__nav { display: flex; flex-wrap: wrap; gap: 20px; margin-left: auto; }
.top__nav a {
  color: var(--ink-2);
  border-bottom: 0;
  font-size: var(--small);
  line-height: var(--small-lh);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.top__nav a:hover { color: var(--warm-ink); }

.main { max-width: var(--page); margin: 0 auto; padding: 56px 0 88px; }

/* ── Лента ───────────────────────────────────────────────────────────── */

.feed__lead {
  max-width: var(--col);
  margin-bottom: 52px;
  font-size: var(--lead);
  line-height: var(--lead-lh);
  color: var(--ink);
}

.feed__title {
  max-width: var(--col);
  margin-bottom: 44px;
  font-size: var(--title);
  line-height: var(--title-lh);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--warm);
  text-wrap: balance;
}

.feed { list-style: none; }

.feed__item { max-width: var(--col); padding: 30px 0; border-bottom: 1px solid var(--hair-2); }
.feed__item:first-child { padding-top: 0; }

.feed__link { display: block; color: inherit; border-bottom: 0; }
.feed__link:hover .feed__name { color: var(--warm-hover); }

.feed__cover { display: block; width: 100%; margin-bottom: 14px; border-radius: 6px; }

.feed__head { display: block; }

.feed__name {
  display: block;
  color: var(--warm);
  font-size: 35px;
  line-height: 35px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
  transition: color 0.2s ease;
}

.feed__date {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--small);
  line-height: var(--small-lh);
  font-variant-numeric: tabular-nums;
}

.feed__excerpt {
  display: block;
  margin-top: 10px;
  color: var(--ink);
  font-size: var(--text);
  line-height: var(--text-lh);
}

.empty { color: var(--muted); }

/* ── Метки ───────────────────────────────────────────────────────────── */

.tags { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }

.tags__one {
  color: var(--warm-ink);
  font-size: var(--small);
  line-height: var(--small-lh);
}

.tags--post { margin-top: 40px; }

/* ── Заметка ─────────────────────────────────────────────────────────── */

.post { max-width: var(--col); }

.post__title {
  margin-bottom: 14px;
  color: var(--warm);
  font-size: var(--title);
  line-height: var(--title-lh);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.post__meta {
  margin-bottom: 30px;
  color: var(--muted);
  font-size: var(--small);
  line-height: var(--small-lh);
  font-variant-numeric: tabular-nums;
}

.post__lead {
  margin-bottom: 26px;
  font-size: var(--lead);
  line-height: var(--lead-lh);
  color: var(--ink);
}

.post__body > *:first-child { margin-top: 0; }
.post__body p { margin-bottom: 16px; }

.post__body h2 {
  margin: 40px 0 14px;
  color: var(--ink);
  font-size: var(--sub);
  line-height: var(--sub-lh);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.post__body h3 {
  margin: 30px 0 10px;
  color: var(--ink);
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
}

.post__body strong { font-weight: 700; }
.post__body mark { background: var(--mark); color: var(--ink); padding: 0 2px; }

.post__body ul, .post__body ol { margin-bottom: 16px; padding-left: 22px; }
.post__body li { margin-bottom: 6px; }

.post__body img { display: block; margin: 26px 0; border-radius: 6px; }
.post__body figure { margin: 26px 0; }
.post__body figure img { margin: 0; }
.post__body figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--small);
  line-height: var(--small-lh);
}

.post__body blockquote {
  margin: 26px 0;
  padding-left: 18px;
  border-left: 2px solid var(--warm);
  color: var(--ink-2);
}

.post__body pre {
  margin: 26px 0;
  padding: 14px 16px;
  overflow-x: auto;
  border-radius: 6px;
  background: var(--ground);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 21px;
}
.post__body code { font-family: var(--mono); font-size: 0.9em; }
.post__body :not(pre) > code {
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--ground);
}

.post__body table {
  width: 100%;
  margin: 26px 0;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 21px;
}
.post__body th, .post__body td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--hair-2);
  text-align: left;
}
.post__body th { font-weight: 700; }

.post__body hr { margin: 40px 0; border: 0; border-top: 1px solid var(--hair-2); }

.draft-note {
  max-width: var(--col);
  margin-bottom: 30px;
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--warm-wash);
  color: var(--ink-2);
  font-size: 15px;
  line-height: 21px;
}

/* ── «Дальше» ────────────────────────────────────────────────────────── */

.next { max-width: var(--col); margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--hair-2); }

.next__title {
  margin-bottom: 22px;
  color: var(--muted);
  font-size: var(--small);
  line-height: var(--small-lh);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.next__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.next__link { display: block; color: inherit; border-bottom: 0; }
.next__link:hover .next__name { color: var(--warm-hover); }

.next__thumb {
  display: block;
  aspect-ratio: 4 / 3;
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--ground);
}
.next__thumb img { width: 100%; height: 100%; object-fit: cover; }

.next__name {
  display: block;
  color: var(--warm-ink);
  font-size: 15px;
  line-height: 19px;
  font-weight: 600;
  transition: color 0.2s ease;
}
.next__year {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--small);
  line-height: var(--small-lh);
  font-variant-numeric: tabular-nums;
}

/* ── Соседние заметки ────────────────────────────────────────────────── */

.around {
  display: flex;
  gap: 24px;
  max-width: var(--col);
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--hair-2);
}

.around__side { flex: 1 1 0; min-width: 0; color: inherit; border-bottom: 0; }
.around__newer { text-align: right; margin-left: auto; }
.around__side:hover .around__name { color: var(--warm-hover); }

.around__hint {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: var(--small);
  line-height: var(--small-lh);
}

.around__name {
  display: block;
  color: var(--warm-ink);
  font-size: 15px;
  line-height: 19px;
  transition: color 0.2s ease;
}

/* ── Постраничная навигация ──────────────────────────────────────────── */

.pager {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: var(--col);
  margin-top: 44px;
}
.pager__pos {
  color: var(--muted);
  font-size: var(--small);
  line-height: var(--small-lh);
  font-variant-numeric: tabular-nums;
}
.pager__next { margin-left: auto; }

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

.notfound { max-width: var(--col); padding: 40px 0; }
.notfound__code {
  margin-bottom: 14px;
  color: var(--warm);
  font-size: var(--title);
  line-height: var(--title-lh);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.notfound__text { margin-bottom: 16px; color: var(--ink); }

/* ── Подвал ──────────────────────────────────────────────────────────── */

.bottom {
  max-width: var(--page);
  margin: 0 auto;
  padding: 26px 0 48px;
  border-top: 1px solid var(--hair-2);
  font-size: var(--small);
  line-height: var(--small-lh);
}
.bottom__row { margin-bottom: 8px; }
.bottom__muted { color: var(--muted); }

/* ── Узкий экран ─────────────────────────────────────────────────────── */

@media (max-width: 735px) {
  body { padding: 0 4%; }

  .top { padding: 20px 0 16px; }
  .main { padding: 32px 0 56px; }

  .post__title,
  .feed__title,
  .notfound__code { font-size: 36px; line-height: 36px; }

  .feed__name { font-size: 26px; line-height: 28px; }

  .post__lead, .feed__lead { font-size: 21px; line-height: 26px; }

  .post__body h2, .next { margin-top: 32px; }

  .next__list { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  .around { flex-direction: column; gap: 20px; }
  .around__newer { text-align: left; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}