/* ============================================================
   Стиль раздела гайдов theromankoposov.ru - светлая тема
   С 11.09.2026 это ЕДИНСТВЕННЫЙ стиль корпуса (этап 7).
   Тёмная версия лежит в seo-infra/bak-svetlaya-20260911/guide.css.tyomnyy
   Собрана 11.09.2026 по спеке plans/2026-09-11-speka-svetloy-temy.md
   Принцип: не новый бренд, а осветление прежнего. Хвойный и янтарь
   остались, сменились роли. Тёмное ушло из фона и работает точечно:
   блок призыва и шапка таблицы.
   Все цвета проверены на контраст кодом, цифры в спеке.
   Комментарии внутри CSS только в этом формате: HTML-комментарий
   внутри стилей молча съедает следующее правило.
   ============================================================ */
:root{
  color-scheme:light;
  --paper:      #FBFAF7;
  --ink:        #1E2522;
  --ink-dim:    #5C655F;
  --hvoya:      #123A2F;
  --ssylka:     #6B4610;
  --ssylka-hov: #42290A;
  --yantar:     #E3A046;
  --yantar-deep:#C98529;
  --pod-pesok:  #F3F0E9;
  --pod-yantar: #FDF6E7;
  --pod-hvoya:  #EEF2F1;
  --cta-fon:    #14332B;
  --tabl-shapka:#CCD4CF;
  --cta-ink:    #F3EFE6;
  --cta-dim:    #A8B5AE;
  /* три уровня линий: декор еле виден, рамка мягкая, сильная там где
     граница несёт смысл - у прокручиваемой таблицы */
  --line-soft:  #E0DACE;
  --line:       #C4BCAA;
  --line-strong:#7D8C85;
  --r:          4px;
  --shell:      min(780px, 100% - 2rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Golos Text","Golos Fallback","Segoe UI",system-ui,sans-serif;
  /* 18px на телефоне: подобрано рендером, даёт 33-38 знаков в строке
     при норме для телефона 30-40. На широком экране 17px - правка владельца
     11.09: в браузере кегль уменьшен на 2 пункта относительно 19px */
  font-size:1.125rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:768px){
  body{font-size:1.0625rem}
}
.shell{width:var(--shell);margin-inline:auto}
h1,h2,h3{font-family:Literata,"Literata Fallback",Georgia,"Times New Roman",serif;font-weight:700;margin:0;
  letter-spacing:-.015em;line-height:1.2;color:var(--hvoya)}
h1,h2{text-wrap:balance}
a{color:var(--ssylka);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--ssylka-hov)}
img{max-width:100%;height:auto}

/* ---------- шапка и хлебные крошки ---------- */
.top{border-bottom:1px solid var(--line-soft);padding:.9rem 0}
.top .shell{display:flex;gap:1rem;align-items:baseline;justify-content:space-between;flex-wrap:wrap}
.brand{font-family:Literata,"Literata Fallback",Georgia,serif;font-weight:700;color:var(--hvoya);text-decoration:none;font-size:1rem}
.brand:hover{color:var(--ssylka)}
.crumbs{font-size:.86rem;color:var(--ink-dim);margin:0}
.crumbs a{color:var(--ink-dim)}
.crumbs a:hover{color:var(--ssylka)}
.crumbs span[aria-current]{color:var(--ink-dim)}

/* ---------- заголовок статьи ---------- */
.head{padding:clamp(2.25rem,6dvh,3.75rem) 0 0}
h1{font-size:clamp(1.75rem,1.15rem + 2.4vw,2.7rem);max-width:22ch}
.meta{color:var(--ink-dim);font-size:.86rem;margin:1rem 0 0;letter-spacing:.02em}
.lead{font-size:clamp(1.08rem,1rem + .4vw,1.24rem);color:var(--ink);margin:1.35rem 0 0;max-width:60ch}

/* ---------- тело статьи ---------- */
article{padding:clamp(1.75rem,4dvh,2.75rem) 0 clamp(2.5rem,6dvh,4rem)}
article h2{font-size:clamp(1.3rem,1.05rem + 1vw,1.75rem);margin:clamp(2.25rem,5dvh,3rem) 0 .85rem;max-width:26ch}
article h3{font-size:clamp(1.08rem,1rem + .5vw,1.28rem);margin:1.9rem 0 .6rem}
article p{margin:0 0 1.15rem;max-width:68ch}
article ul,article ol{margin:0 0 1.3rem;padding-left:1.35rem;max-width:66ch}
article li{margin:0 0 .55rem}
article li::marker{color:var(--yantar-deep)}
strong,b{font-weight:600;color:var(--hvoya)}
code{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:.92em;
  background:var(--pod-pesok);border:1px solid var(--line);border-radius:var(--r);padding:.1em .35em}

blockquote{
  margin:1.6rem 0;padding:.15rem 0 .15rem 1.15rem;
  border-left:3px solid var(--yantar);
  font-family:Literata,"Literata Fallback",Georgia,serif;font-style:italic;color:var(--hvoya);max-width:60ch;
}
blockquote p:last-child{margin-bottom:0}

/* ---------- пошаговый блок (под разметку HowTo) ---------- */
.steps{list-style:none;counter-reset:st;padding:0;margin:1.6rem 0;max-width:68ch}
.steps>li{counter-increment:st;position:relative;padding-left:3rem;margin:0 0 1.4rem}
.steps>li::before{
  content:counter(st);position:absolute;left:0;top:-.15rem;
  width:2rem;height:2rem;display:grid;place-items:center;border-radius:var(--r);
  background:var(--hvoya);color:var(--paper);
  font-family:Literata,"Literata Fallback",Georgia,serif;font-weight:700;font-size:.95rem;line-height:1;
}
.steps>li>b{display:block;font-family:Literata,"Literata Fallback",Georgia,serif;font-weight:700;font-size:1.08rem;
  margin:0 0 .3rem;color:var(--hvoya)}

/* ---------- врезки: три вида под разный смысл ----------
   Выделяем не темнотой, а мягкой заливкой и цветной линией слева.
   .note обычная - контекст. .vyvod - главная мысль статьи.
   .fakt - право и исследования: холодная, чтобы не читалось тревогой.
   .quick-answer - быстрый ответ первого экрана: ставит сборщик из поля
   quick_answer, вид тот же, что у .note, отдельный класс нужен разметке */
.note,.quick-answer{
  background:var(--pod-pesok);border-left:3px solid var(--hvoya);
  border-radius:0 var(--r) var(--r) 0;
  padding:1.1rem 1.25rem;margin:1.7rem 0;max-width:68ch;
}
.note p:last-child,.quick-answer p:last-child{margin-bottom:0}
.note b,.quick-answer b{color:var(--hvoya)}
.note.vyvod{background:var(--pod-yantar);border-left-color:var(--yantar-deep)}
.note.fakt{background:var(--pod-hvoya);border-left-color:var(--hvoya)}

/* ---------- блок вопросов (под разметку FAQPage) ---------- */
.faq{margin:1.5rem 0 0;max-width:68ch}
.faq h3{margin:1.6rem 0 .5rem;font-size:1.08rem}

/* ---------- призыв с код-словом ----------
   Единственный тёмный блок на светлой странице: выделяется в 13 раз
   сильнее фона. Прямое решение владельца - тёмное как акцент, а не как фон */
.cta{
  margin:clamp(2.5rem,6dvh,3.5rem) 0 0;padding:1.7rem 1.5rem;
  background:var(--cta-fon);color:var(--cta-ink);
  border-radius:var(--r);max-width:68ch;
}
.cta h2{margin:0 0 .6rem;font-size:1.3rem;color:var(--yantar)}
.cta p{margin:0 0 1.1rem;color:#DCE4DF}
/* :not(.btn) обязателен. Без него это правило (0-1-1) перебивает .btn (0-1-0),
   надпись кнопки красится в цвет её же фона и кнопка становится пустым
   прямоугольником. В тёмной теме правила .cta a не было, дефект родился здесь */
.cta a:not(.btn){color:var(--yantar)}
.cta b,.cta strong{color:var(--cta-ink)}
.btn{
  display:inline-block;background:var(--yantar);color:var(--cta-fon);
  font-weight:600;text-decoration:none;border-radius:var(--r);
  padding:.8rem 1.5rem;transition:background .2s ease,transform .2s ease;
}
.btn:hover{background:var(--yantar-deep);color:var(--cta-fon);transform:translateY(-1px)}
.cta .fine{color:var(--cta-dim);font-size:.86rem;margin:.9rem 0 0}
.fine{color:var(--ink-dim);font-size:.86rem;margin:.9rem 0 0}

/* ---------- список гайдов в разделе ---------- */
.list{list-style:none;padding:0;margin:2rem 0 0}
.list li{border-top:1px solid var(--line-soft);padding:1.25rem 0}
.list li:last-child{border-bottom:1px solid var(--line-soft)}
.list a{font-family:Literata,"Literata Fallback",Georgia,serif;font-weight:700;font-size:1.15rem;
  text-decoration:none;color:var(--hvoya)}
.list a:hover{color:var(--ssylka)}
.list p{margin:.45rem 0 0;color:var(--ink-dim);font-size:.94rem;max-width:64ch}
.empty{color:var(--ink-dim);border:1px dashed var(--line);border-radius:var(--r);padding:1.25rem;margin:2rem 0 0}

/* ---------- подвал ---------- */
footer{border-top:1px solid var(--line-soft);padding:1.6rem 0 2.5rem;color:var(--ink-dim);font-size:.9rem}
footer p{margin:0 0 .4rem;max-width:68ch}

@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
  .btn:hover{transform:none}
}
@media print{
  :root{--paper:#fff;--cta-fon:#fff;--cta-ink:#111}
  html,body{background:#fff;color:#111}
  .cta{border:1px solid #111;color:#111}
  .cta h2,.cta a{color:#6B4610}
  .cta p{color:#111}
  .btn{background:#fff;color:#111;border:1px solid #111}
}

/* ---------- таблицы-выжимки ----------
   Подпись стоит в figcaption НАД .tabl, а не в <caption>: caption лежит
   внутри области прокрутки и на телефоне уезжает вбок вместе с таблицей.
   Обёртка .tabl обязательна: без неё широкая таблица тянет горизонтальный
   скролл всей страницы. 11.09.2026 этот механизм восстановлен в трёх статьях,
   где он отсутствовал - страница ездила вбок на всех телефонных ширинах.
   Шапка тёмной плашкой: второе место, где тёмное работает как выделение */
.tabl-blok{margin:1.7rem 0;max-width:68ch}
.tabl-blok figcaption{
  font-family:Literata,"Literata Fallback",Georgia,serif;font-weight:700;color:var(--hvoya);
  font-size:1.02rem;line-height:1.35;margin:0 0 .6rem;
}
.tabl{
  overflow-x:auto;border:1px solid var(--line-strong);border-radius:var(--r);
  -webkit-overflow-scrolling:touch;
  /* тени у краёв: на узком экране таблица уезжает вбок, и без этого намёка
     обрыв колонки читается как поломка вёрстки, а не как «листайте вбок».
     Тень гаснет сама, когда прокрутили до края: attachment local против scroll.
     Пересчитано под светлый фон: градиент от бумаги, а не от хвойного графита */
  background:
    linear-gradient(to right, var(--paper) 30%, rgba(251,250,247,0)) left center,
    linear-gradient(to left,  var(--paper) 30%, rgba(251,250,247,0)) right center,
    radial-gradient(farthest-side at 0 50%,    rgba(30,37,34,.22), rgba(30,37,34,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(30,37,34,.22), rgba(30,37,34,0)) right center;
  background-repeat:no-repeat;
  background-size:34px 100%, 34px 100%, 15px 100%, 15px 100%;
  background-attachment:local, local, scroll, scroll;
}
.tabl table{border-collapse:collapse;width:100%;min-width:32rem;font-size:.95rem}
.tabl th,.tabl td{
  text-align:left;vertical-align:top;padding:.7rem 1rem;
  border-top:1px solid var(--line);line-height:1.5;
}
.tabl thead th{
  color:var(--ink);font-family:"Golos Text","Golos Fallback","Segoe UI",system-ui,sans-serif;
  font-weight:600;font-size:.84rem;letter-spacing:.03em;text-transform:uppercase;
  background:var(--tabl-shapka);border-top:0;
}
.tabl tbody th{font-weight:600;color:var(--hvoya)}
.tabl tbody tr:nth-child(even){background:var(--pod-pesok)}

/* ---------- собственные кадры (figure.kadr) ----------
   Подпись стоит ПОД кадром: у таблицы подпись сверху работает как заголовок
   блока, а у скриншота она объясняет уже увиденное */
.kadr{margin:1.7rem 0;max-width:68ch}
.kadr img{
  display:block;width:100%;height:auto;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--pod-pesok);
}
.kadr figcaption{
  margin:.6rem 0 0;color:var(--ink-dim);
  font-size:.9rem;line-height:1.5;
}

/* Кадр открывается по нажатию: на телефоне он ужат с 1280 до ~330 точек,
   и разглядеть цифры внутри иначе нельзя. Ссылка не должна выглядеть ссылкой */
.kadr a.kadr-zoom{display:block;text-decoration:none;border:0;cursor:zoom-in}
.kadr a.kadr-zoom:hover img{border-color:var(--yantar)}