/* Общие стили раздела «Дневник» на chelapko.pro.
   Базовая типографика намеренно повторяет index.html — страница-кейс держит стили
   внутри себя, и трогать её ради этого файла не нужно. */
:root{
  --ink:#16191d;
  --muted:#5b636d;
  --line:#e3e6ea;
  --bg:#ffffff;
  --alt:#f6f7f9;
  --accent:#b4531b;
  --maxw:980px;
  --readw:720px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:24px;padding-right:24px}
/* Только ширина и боковые поля. Вертикальные отступы задают longhand-ы у .intro / .list / article —
   шорткат padding здесь обнулял бы их: .wrap-read (класс) перебивает article (элемент). */
.wrap-read{max-width:var(--readw);margin:0 auto;padding-left:24px;padding-right:24px}
h1,h2,h3{line-height:1.25;margin:0 0 20px;font-weight:650;letter-spacing:-0.01em}
h1{font-size:clamp(26px,3.8vw,38px);letter-spacing:-0.02em}
h2{font-size:clamp(21px,2.6vw,28px)}
p{margin:0 0 18px}
a{color:var(--accent)}
b,strong{font-weight:650}
.eyebrow{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 14px}
.lead{font-size:clamp(17px,2vw,19px);color:var(--muted)}

.draft{background:#8a1c1c;color:#fff;text-align:center;font-size:13px;font-weight:600;padding:8px 16px;letter-spacing:.02em}

/* ── шапка с навигацией ── */
.topbar{border-bottom:1px solid var(--line);padding:18px 0}
.topbar .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.topbar .brand{font-weight:650;letter-spacing:-0.01em;color:var(--ink);text-decoration:none;font-size:17px}
.topbar nav{font-size:15px}
.topbar nav a{color:var(--muted);text-decoration:none;margin-left:22px;border-bottom:1px solid transparent}
.topbar nav a:hover{color:var(--accent);border-bottom-color:var(--line)}
.topbar nav a.on{color:var(--ink);font-weight:600}

/* ── список постов ── */
.intro{padding-top:52px;padding-bottom:8px}
.list{list-style:none;margin:0;padding-top:28px;padding-bottom:64px;padding-left:0;padding-right:0}
.list li{border-top:1px solid var(--line);padding:26px 0}
.list li:last-child{border-bottom:1px solid var(--line)}
.list .date{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.list h2{margin:8px 0 10px;font-size:clamp(19px,2.2vw,23px)}
.list h2 a{color:var(--ink);text-decoration:none}
.list h2 a:hover{color:var(--accent)}
.list p{margin:0;color:var(--muted);font-size:15.5px}

/* ── текст поста ── */
article{padding-top:44px;padding-bottom:56px}
article .date{font-size:13.5px;color:var(--muted);margin:0 0 14px;font-variant-numeric:tabular-nums}
article h1{margin-bottom:26px}
article p{font-size:17px;line-height:1.72}
article p.first{font-size:19px;line-height:1.6;margin-bottom:24px;color:var(--muted)}
/* нумерованный список внутри записи */
article ol{margin:0 0 18px;padding-left:26px;font-size:17px;line-height:1.72}
article ol li{margin-bottom:10px}
.origin{font-size:14px;color:var(--muted);border-left:2px solid var(--line);padding:2px 0 2px 16px;margin:0 0 30px}

/* ── листалка между постами ── */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:44px}
/* Только прямые потомки: .pager span иначе цепляет .k и .t внутри самих ячеек. */
.pager > a,.pager > span{background:var(--bg);padding:20px 22px;text-decoration:none;display:block}
.pager .k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
.pager .t{color:var(--ink);font-size:15.5px;font-weight:600;line-height:1.4}
.pager a:hover .t{color:var(--accent)}
.pager .next{text-align:right}
.pager span .t{color:#aeb4bb;font-weight:400}

/* ── подписка / контакты ── */
.cta{background:var(--ink);color:#fff;padding:56px 0;margin-top:0}
.cta h2{color:#fff;margin-bottom:14px}
.cta p{color:#b9c0c8;max-width:62ch}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:650;font-size:16px;padding:14px 28px;border-radius:8px;margin-top:10px}
.btn:hover{background:#9c4616}
.contacts{margin-top:24px;font-size:15px;color:#b9c0c8}
.contacts a{color:#fff;text-decoration:none;border-bottom:1px solid #4a525b}
.contacts > span{display:inline-block;margin-right:24px;margin-bottom:8px}

footer{padding:30px 0;font-size:14px;color:var(--muted);border-top:1px solid var(--line)}

@media (max-width:680px){
  .wrap,.wrap-read{padding-left:16px;padding-right:16px}
  .topbar nav a{margin-left:0;margin-right:18px}
  .topbar .wrap{gap:10px}
  .pager{grid-template-columns:1fr}
  .pager .next{text-align:left}
  .contacts > span{display:block;margin-right:0}
  article p{font-size:16.5px}
  article ol{font-size:16.5px;padding-left:22px}
}