/* ==========================================================================
   ARTICLE.CSS — общий скелет статьи.
   Здесь НЕТ ни одного цвета напрямую: только токены из темы.
   Тема подключается ПОСЛЕ этого файла: /css/theme-<имя>.css
   ========================================================================== */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
::selection{background:var(--accent); color:var(--ink)}

.wrap{max-width:760px; margin:0 auto; padding:0 26px}
@media (max-width:560px){ .wrap{padding:0 20px} }

/* ---------- шапка статьи ---------- */
.masthead{
  background:var(--head-bg);
  color:var(--head-ink);
  border-bottom:var(--head-rule, 4px solid var(--head-accent));
}
.topbar{
  max-width:760px; margin:0 auto; padding:22px 26px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.topbar .home{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em;
  color:var(--head-ink); font-weight:500;
}
.topbar .home:hover{color:var(--head-accent)}
.topbar .tg{font-family:var(--mono); font-size:12.5px; color:var(--head-dim)}
.topbar .tg:hover{color:var(--head-accent)}

.kicker{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--head-accent); font-weight:500;
  display:flex; gap:14px; align-items:center; padding-top:20px;
}
.kicker::after{content:""; flex:1; height:1px; background:var(--head-line)}

.hero{padding:22px 0 46px}
.hero h1{
  font-family:var(--disp); font-weight:900; color:var(--head-ink);
  font-size:clamp(38px, 6.6vw, 66px); line-height:1.03;
  letter-spacing:-.015em; margin:.15em 0 .4em;
}
@media (max-width:560px){ .hero h1{font-size:clamp(34px, 9vw, 44px)} }
.hero h1 .hl{color:var(--head-accent)}
.dek{
  font-family:var(--disp); font-style:italic; font-weight:400;
  font-size:clamp(19px, 2.4vw, 24px); line-height:1.5; color:var(--head-dim);
  max-width:47ch; margin:0 0 28px;
}
.meta{
  font-family:var(--mono); font-size:12.5px; color:var(--head-dim);
  letter-spacing:.04em; display:flex; gap:18px; flex-wrap:wrap;
  padding-top:18px; border-top:1px solid var(--head-line);
}
.meta b{color:var(--head-ink); font-weight:500}

/* ---------- глава ---------- */
.chapter{
  border-top:1px solid var(--line);
  margin-top:56px; padding-top:34px; scroll-margin-top:20px;
}
.chapter:first-of-type{border-top:none; margin-top:0; padding-top:56px}

.chapter .num{
  font-family:var(--disp); font-weight:900; font-size:60px; line-height:1;
  color:var(--num-fill, transparent);
  -webkit-text-stroke:var(--num-stroke, 1.4px var(--brand-deep));
}
@media (max-width:560px){ .chapter .num{font-size:48px} }

.chapter .lbl{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand-deep); margin:6px 0 0;
}
.chapter h2{
  font-family:var(--disp); font-weight:600;
  font-size:clamp(26px,3.6vw,37px); line-height:1.16;
  letter-spacing:-.01em; margin:14px 0 26px;
}
.chapter p{margin:0 0 22px; max-width:66ch}
.chapter p .em{
  background:linear-gradient(180deg, transparent 60%, var(--accent-soft) 60%);
}

.chapter ul{max-width:66ch; margin:0 0 22px; padding-left:0; list-style:none}
.chapter ul li{position:relative; padding-left:26px; margin:0 0 10px}
.chapter ul li::before{
  content:var(--bullet, "—"); position:absolute; left:0;
  color:var(--brand); font-weight:600;
}

/* буквица */
.dropcap::first-letter{
  font-family:var(--disp); font-weight:900; float:left;
  font-size:76px; line-height:.72; padding:8px 12px 0 0; color:var(--brand);
}

/* цитата */
.pull{
  font-family:var(--disp); font-weight:600; font-style:italic;
  font-size:clamp(23px,3.2vw,32px); line-height:1.3; color:var(--brand-deep);
  margin:38px 0; padding:6px 0 6px 26px;
  border-left:5px solid var(--accent); border-radius:2px;
  max-width:24ch;
}

/* иллюстрация / мем */
.shot{
  position:relative; margin:46px auto 26px; max-width:560px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:4px;
  box-shadow:0 22px 50px -28px var(--shadow, rgba(0,0,0,.4));
}
.shot.l{transform:rotate(-1.1deg)}
.shot.r{transform:rotate(1deg)}
.shot .tape{
  position:absolute; top:-15px; left:50%; transform:translateX(-50%) rotate(2deg);
  width:118px; height:28px;
  background:var(--tape-bg, var(--accent));
  border:1px dashed var(--tape-line, var(--brand));
}
.shot figcaption{
  font-family:var(--mono); font-size:12px; color:var(--muted);
  padding:0 14px 12px; letter-spacing:.02em;
}
.shot figcaption b{color:var(--brand); font-weight:500}

.shot.meme{max-width:500px; padding:0; background:none; border:none; box-shadow:none}
.shot.meme img{
  display:block; width:100%; height:auto; border-radius:6px;
  box-shadow:0 18px 44px -22px var(--shadow, rgba(0,0,0,.4));
}

/* число-выноска */
.stat{
  display:flex; align-items:baseline; gap:18px; margin:34px 0 8px;
  padding:24px 28px; background:var(--paper-2); border-radius:10px;
  border-left:4px solid var(--brand);
}
.stat .big{
  font-family:var(--disp); font-weight:900;
  font-size:clamp(50px,9vw,80px); line-height:.86;
  color:var(--brand-deep); letter-spacing:-.02em;
}
.stat .cap{font-family:var(--mono); font-size:13px; color:var(--muted); line-height:1.55}
.stat .cap b{color:var(--ink); font-weight:500}
.stat + p{font-family:var(--disp); font-style:italic; font-size:20px; color:var(--muted)}

/* подвал */
.foot{
  border-top:1px solid var(--line); margin-top:56px; padding:26px 0 46px;
  font-family:var(--mono); font-size:12px; color:var(--muted);
  text-align:center; letter-spacing:.05em;
}
.foot a:hover{color:var(--brand)}