/* ==========================================================================
   ТЕМА СТАТЕЙ — тихая роскошь: крем · navy · оранжевый.
   Подключается ПОСЛЕ article.css. Шахматка Клавика — в article-klavik.css.
   ========================================================================== */
:root{
  /* бумага и текст */
  --paper:      #fbfaf6;   /* кремовый лист-читалка */
  --paper-2:    #e4eef4;   /* голубая подложка (иллюстрации, выноски) */
  --ink:        #16264a;   /* navy — основной текст */
  --muted:      #5a6472;   /* вторичный текст */
  --line:       #eae8e0;   /* тонкие линии */

  /* фирменные */
  --brand:      #e0551d;   /* оранжевый акцент */
  --brand-deep: #bd4715;
  --accent:     #e0551d;   /* линии, подчёркивания, рамки */
  --accent-soft:#e4eef4;   /* мягкая подсветка текста — голубая */

  /* шапка — тёмно-синий герой */
  --head-bg:     #16264a;
  --head-ink:    #fbfaf6;
  --head-dim:    #bcd6e4;
  --head-accent: #e0551d;
  --head-line:   rgba(255,255,255,.20);
  --head-rule:   4px solid #e0551d;

  /* детали */
  --shadow:     rgba(24,50,80,.35);
  --num-fill:   transparent;
  --num-stroke: 1.4px #e0551d;
  --tape-bg:    rgba(224,85,29,.16);
  --tape-line:  rgba(224,85,29,.70);

  /* шрифты — как на новом сайте */
  --disp:"Instrument Serif", Georgia, "Times New Roman", serif;
  --sans:"Inter", ui-sans-serif, system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
}

/* кремовая читаемая страница + мягкое свечение по углам */
body{
  background:var(--paper);
  background-image:
    radial-gradient(circle at 12% 4%, rgba(22,38,74,.04), transparent 38%),
    radial-gradient(circle at 92% 96%, rgba(224,85,29,.05), transparent 40%);
}
/* тонкая голубая полоса-акцент под navy-шапкой */
.masthead{box-shadow:0 6px 0 0 var(--paper-2)}

/* разделители глав — оранжевые точки вместо линии */
.chapter{border-top:none; margin-top:40px; padding-top:16px}
.chapter:not(:first-of-type)::before{
  content:"• • •";
  display:block; text-align:center;
  color:var(--brand); font-size:20px; letter-spacing:.1em;
  margin:6px 0 34px;
}

/* Instrument Serif тоньше Fraunces — вернём вес заголовкам */
.hero h1{font-weight:400}
.chapter h2{font-weight:400}
.chapter .num{font-weight:400}
.dropcap::first-letter{font-weight:400}
.pull{font-weight:400}
.stat .big{font-weight:400}

/* ==========================================================================
   ГЕРОЙ СТРАНИЦЫ — квадрат-акцент слева от колонки (спорящие).
   Задаётся в статье: <div class="masthead has-hero" style="--hero:url('/img/avito-spor.jpg')">
   ========================================================================== */
.masthead{position:relative; overflow:hidden}
.masthead > *{position:relative; z-index:1}

.masthead.has-hero::after{
  content:"";
  position:absolute;
  right:calc(50% + 400px);
  top:50%; transform:translateY(-50%) rotate(var(--hero-tilt, -3deg));
  width:var(--hero-size, 210px); height:var(--hero-size, 150px);
  background:var(--hero) center/cover no-repeat;
  border:3px solid var(--accent);
  border-radius:8px;
  box-shadow:8px 8px 0 rgba(24,50,80,.30);
  pointer-events:none; user-select:none; z-index:0;
}
@media (max-width:1260px){ .masthead.has-hero::after{display:none} }