/* Раздел /guides - стили статей и витрины.
   Токены скопированы 1:1 из стресс-профиль/index.html.
   Меняется палитра сайта - правится ЗДЕСЬ, в одном месте. */

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

:root {
  --beige:#FAF7F2; --beige-2:#F3EDE3; --beige-3:#E9E0D3;
  --green:#5A8A62; --green-2:#7AAF82; --green-pale:#EDF5EE;
  --terra:#C28B82; --terra-2:#D4A89F; --terra-pale:#F8EFED;
  --bronze:#B89B72;
  --ink:#1E1E1E; --ink-2:#4A4A4A; --ink-3:#8A8A8A;
  --white:#FFFFFF; --card-bg:#FFFFFF;
  --nav-bg:rgba(250,247,242,0.9); --border-clr:rgba(30,30,30,0.08);

  --grad-btn:linear-gradient(135deg,#5A8A62 0%,#7AAF82 100%);
  --grad-cta:linear-gradient(140deg,#3E6644 0%,#5A8A62 50%,#6E9E76 100%);

  --shadow-card:0 2px 20px rgba(30,30,30,.06), 0 1px 4px rgba(30,30,30,.04);
  --shadow-lift:0 12px 40px rgba(30,30,30,.10), 0 2px 8px rgba(30,30,30,.05);
  --shadow-btn:0 8px 32px rgba(90,138,98,.32);

  --radius-card:24px; --radius-btn:50px;

  /* Текстовые варианты - только для мелкого текста и ссылок.
     axe нашёл 13 провалов контраста на собственных токенах сайта:
     --ink-3 на беже 3.23:1, --green 3.74:1 при норме 4.5.
     Новых цветов не придумываем: --ink-2 есть в палитре, #3E6644 живёт в --grad-cta. */
  --green-ink:#3E6644;
  --bronze-ink:#7A5C34;   /* тёмная бронза с билда ketrinpsy.ru: #B89B72 на белом даёт 2.63:1 */

  /* Типографика длинного чтения */
  --measure:38rem;
  --fs-body:1.0625rem; --lh-body:1.75;
  --fs-h2:1.5rem; --fs-h3:1.1875rem; --lh-head:1.2;
  --space-block:2.75rem; --space-para:1.125rem;
}

[data-theme="dark"] {
  --beige:#141414; --beige-2:#1E1E1E; --beige-3:#2A2A2A;
  --green:#6EAA77; --green-2:#8DC295; --green-pale:#1A2E1C;
  --terra:#C28B82; --terra-2:#D4A89F; --terra-pale:#2A1E1C;
  --ink:#F0EDE8; --ink-2:#B8B0A6; --ink-3:#6E6560;
  --white:#1E1E1E; --card-bg:#1E1E1E;
  --nav-bg:rgba(20,20,20,0.92); --border-clr:rgba(255,255,255,0.08);
  --shadow-card:0 2px 20px rgba(0,0,0,.3), 0 1px 4px rgba(0,0,0,.2);
  --shadow-lift:0 12px 40px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --shadow-btn:0 8px 32px rgba(90,138,98,.25);
  --green-ink:#8DC295;
  --bronze-ink:#B89B72;
}

html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
  font-family:'Inter',sans-serif;
  background:var(--beige); color:var(--ink);
  font-size:var(--fs-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3 { font-family:'Playfair Display',serif; line-height:var(--lh-head); text-wrap:balance; }
p { text-wrap:pretty; }
a { color:var(--green-ink); text-underline-offset:3px; }

/* Единая колонка: шапка, тело и подвал раздела живут по одной левой границе */
.gd-col { max-width:var(--measure); margin:0 auto; padding:0 20px; }

/* --- Шапка --- */
.gd-nav {
  position:sticky; top:0; z-index:50;
  background:var(--nav-bg); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-clr);
}
.gd-nav__in {
  max-width:var(--measure); margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:14px;
}
.gd-nav__brand { font-family:'Playfair Display',serif; font-size:1rem; color:var(--ink); text-decoration:none; line-height:1.2; }
.gd-nav__brand span { display:block; font-family:'Inter',sans-serif; font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin-top:2px; }
.gd-nav__spacer { flex:1; }
.gd-nav__link { font-size:.875rem; text-decoration:none; color:var(--ink-2); }
.gd-nav__link:hover { color:var(--green-ink); }
.theme-toggle {
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--border-clr); background:var(--card-bg);
  color:var(--ink-2); cursor:pointer; font-size:.9375rem;
  display:grid; place-items:center; box-shadow:var(--shadow-card);
  transition:transform .2s; flex:none;
}
.theme-toggle:hover { transform:scale(1.08); }

/* --- Тело статьи --- */
.gd-wrap { padding-bottom:80px; }
.gd-article > * + * { margin-top:var(--space-para); }

/* Заголовок раздела с тонкой чертой сверху - ритм и цвет */
.gd-article h2 {
  font-size:var(--fs-h2); margin-top:var(--space-block);
  padding-top:1.25rem; position:relative;
}
.gd-article h2::before {
  content:''; position:absolute; top:0; left:0;
  width:38px; height:2px; background:var(--terra); border-radius:2px;
}

/* --- 1. Герой --- */
.gd-eyebrow {
  font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--green-ink); font-weight:600; margin-top:2rem;
  display:flex; align-items:center; gap:10px;
}
.gd-eyebrow::after { content:''; flex:1; height:1px; background:var(--border-clr); }
.gd-h1 { font-size:1.75rem; margin-top:.625rem; letter-spacing:-.01em; }

/* Дисклеймер - мелкий шрифт, а не подзаголовок */
.gd-disclaimer-line {
  font-size:.8125rem; line-height:1.55; color:var(--ink-2);
  margin-top:1rem; padding-left:12px; border-left:2px solid var(--beige-3);
}

/* Лид-сцена: акцентная полоса терракотой, кегль как у тела */
.gd-lead {
  background:var(--beige-2); border-radius:var(--radius-card);
  border-left:3px solid var(--terra);
  padding:20px 22px; margin-top:1.75rem;
  font-size:var(--fs-body); line-height:1.7;
}
.gd-lead > * + * { margin-top:.75rem; }
.gd-lead p:first-child { font-weight:500; }

/* --- 2. Резюме карточками --- */
.gd-tldr { margin-top:var(--space-block); }
.gd-tldr > h2 { margin-top:0; }
.gd-tldr__grid { display:grid; gap:12px; margin-top:1.25rem; }
.gd-card {
  background:var(--card-bg); border:1px solid var(--border-clr);
  border-radius:16px; padding:18px 20px; box-shadow:var(--shadow-card);
}
.gd-card__t {
  font-family:'Inter',sans-serif; font-size:.6875rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--bronze-ink);
  margin-bottom:.5rem;
}
.gd-card p { font-size:.9375rem; line-height:1.65; }
.gd-toc {
  margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:8px;
}
.gd-toc a {
  font-size:.8125rem; text-decoration:none; color:var(--ink-2);
  background:var(--beige-2); border:1px solid var(--border-clr);
  padding:7px 13px; border-radius:var(--radius-btn);
  transition:background .2s, color .2s;
}
.gd-toc a:hover { background:var(--green-pale); color:var(--green-ink); }

/* --- 4. Практики --- */
.gd-step {
  margin-top:1.5rem; background:var(--card-bg);
  border:1px solid var(--border-clr); border-radius:16px; padding:18px 20px;
}
.gd-step__head { display:flex; align-items:center; gap:12px; }
.gd-step__n {
  flex:none; width:34px; height:34px; border-radius:50%;
  background:var(--beige-2); color:var(--bronze);
  font-family:'Playfair Display',serif; font-size:1.0625rem;
  display:grid; place-items:center;
}
.gd-step__t { font-family:'Playfair Display',serif; font-size:var(--fs-h3); line-height:1.25; }
.gd-step p { margin-top:.75rem; font-size:.9375rem; }
.gd-step b { color:var(--ink); font-weight:600; }
.gd-done {
  border-left:2px solid var(--green); padding-left:12px;
  color:var(--ink-2); background:var(--green-pale);
  padding:10px 12px; border-radius:0 10px 10px 0; margin-top:.875rem !important;
}

/* --- Магнит --- */
.gd-magnet {
  margin-top:1.75rem; padding:18px 20px;
  background:var(--green-pale); border-radius:16px;
  font-size:.9375rem;
}
.gd-magnet b { font-weight:700; letter-spacing:.05em; color:var(--green-ink); }

/* --- 5. Чек-лист --- */
.gd-check {
  margin-top:var(--space-block); padding:22px;
  background:var(--terra-pale); border:1px solid var(--terra-2);
  border-radius:var(--radius-card); color:var(--ink);
}
.gd-check h2 { margin-top:0; padding-top:1.25rem; }
.gd-check ul { margin:1rem 0 0; padding-left:1.1rem; font-size:.9375rem; }
.gd-check li { margin-bottom:.5rem; }
.gd-check li::marker { color:var(--terra); }
.gd-check__sub { margin-top:1.25rem; font-weight:600; }
.gd-check p { font-size:.9375rem; margin-top:.75rem; }
.gd-check__note { margin-top:1.25rem; font-size:.8125rem; line-height:1.6; color:var(--ink-2); }

/* --- 6. Тест --- */
.gd-test {
  margin-top:var(--space-block); padding:30px 24px;
  background:var(--grad-cta); border-radius:var(--radius-card);
  color:#fff; text-align:center;
}
.gd-test h2 { margin-top:0; padding-top:0; color:#fff; font-size:1.5rem; }
.gd-test h2::before { display:none; }
.gd-test p { margin-top:.875rem; color:rgba(255,255,255,.92); font-size:.9375rem; }
.gd-btn {
  display:inline-block; margin-top:1.5rem;
  background:#fff; color:#3E6644; text-decoration:none;
  border-radius:var(--radius-btn); padding:14px 28px;
  font-size:.9375rem; font-weight:600;
  box-shadow:0 8px 28px rgba(0,0,0,.18);
  transition:transform .2s;
}
.gd-btn:hover { transform:translateY(-2px); }
/* 16.08.2026: было rgba(255,255,255,.75) - axe ловил серьёзное нарушение контраста
   мелкого текста на градиенте CTA. Правка общая, чинит все статьи кластера сразу. */
.gd-test__meta { margin-top:.875rem; font-size:.75rem; color:rgba(255,255,255,.95); letter-spacing:.02em; }

/* --- 7. Вопросы --- */
.gd-faq { margin-top:var(--space-block); }
.gd-faq h2 { margin-top:0; }
.gd-faq details { border-bottom:1px solid var(--border-clr); padding:14px 0; }
.gd-faq summary {
  cursor:pointer; font-weight:600; list-style:none; font-size:.9375rem;
  display:flex; align-items:flex-start; gap:12px;
}
.gd-faq summary::-webkit-details-marker { display:none; }
.gd-faq summary::after {
  content:'+'; margin-left:auto; color:var(--terra);
  font-size:1.25rem; line-height:1; flex:none;
}
.gd-faq details[open] summary::after { content:'\2013'; }
.gd-faq details p { margin-top:.75rem; color:var(--ink-2); font-size:.9375rem; }

/* --- 8. Автор --- */
.gd-author {
  margin-top:var(--space-block); padding:18px 20px;
  background:var(--beige-2); border-radius:16px;
  display:flex; gap:14px; align-items:center;
}
.gd-author img { width:52px; height:52px; border-radius:50%; object-fit:cover; flex:none; }
.gd-author__n { font-family:'Playfair Display',serif; font-size:1rem; }
.gd-author p { font-size:.8125rem; color:var(--ink-2); margin-top:.25rem; line-height:1.55; }
.gd-author__d { font-size:.75rem; color:var(--ink-2); margin-top:.35rem; }

/* --- 9. Витрина --- */
.gd-index-head { padding-top:3rem; }
.gd-index-head .gd-h1 { font-size:1.875rem; }
.gd-index-head p { margin-top:.875rem; color:var(--ink-2); }
.gd-grid { display:grid; gap:14px; margin-top:2rem; }
.gd-tile {
  display:block; text-decoration:none; color:inherit;
  background:var(--card-bg); border:1px solid var(--border-clr);
  border-radius:var(--radius-card); padding:22px 24px;
  box-shadow:var(--shadow-card); transition:box-shadow .2s, transform .2s;
}
.gd-tile:hover { box-shadow:var(--shadow-lift); transform:translateY(-2px); }
.gd-tile__k {
  font-size:.625rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--green-ink); font-weight:600;
}
.gd-tile__t { font-family:'Playfair Display',serif; font-size:1.1875rem; margin-top:.5rem; line-height:1.3; }
.gd-tile__d { margin-top:.625rem; color:var(--ink-2); font-size:.9375rem; line-height:1.6; }
.gd-tile__m { margin-top:1rem; font-size:.75rem; color:var(--ink-2); }

/* --- Миниатюра в карточке витрины (11.08.2026) ---
       Причина: внутри статей появились иллюстрации, а вход в раздел
       остался белым списком. Дверь должна выглядеть как то, что за ней.
       Картинка тянется из общей библиотеки /guides/img/, новых файлов нет. --- */
.gd-tile { padding:0; overflow:hidden; }
.gd-tile__img {
  display:block; width:100%;
  /* 🔴 height:auto обязателен: без него атрибут height="714" из HTML
     побеждает, aspect-ratio не применяется и миниатюра встаёт во весь
     рост картинки. Поймано 11.08 замером getBoundingClientRect. */
  height:auto; aspect-ratio:16/9; object-fit:cover;
  background:var(--beige-2); transition:opacity .18s ease;
}
.gd-tile__in { padding:20px 24px 22px; }
.gd-tile:hover .gd-tile__img { opacity:.92; }
.gd-index-foot { margin-top:2.5rem; padding-bottom:80px; color:var(--ink-2); font-size:.9375rem; }

/* --- Подвал --- */
.gd-foot { border-top:1px solid var(--border-clr); padding:22px 20px 36px; text-align:center; font-size:.8125rem; color:var(--ink-2); }

/* --- Десктоп --- */
@media (min-width:768px) {
  :root { --fs-body:1.0625rem; --fs-h2:1.75rem; --fs-h3:1.25rem; }
  .gd-nav__in { max-width:var(--measure); }
  .gd-col { max-width:var(--measure); }
  .gd-h1 { font-size:2.5rem; }
  .gd-index-head .gd-h1 { font-size:2.5rem; }
  .gd-lead { padding:26px 28px; font-size:1.125rem; }
  .gd-tldr__grid { grid-template-columns:1fr 1fr; gap:14px; }
  .gd-step, .gd-magnet { padding:22px 24px; }
  .gd-check, .gd-test { padding:32px; }
  .gd-eyebrow { margin-top:3rem; }
}

/* На узком экране плашки оглавления мельче, чтобы вставали по две в ряд
   и последняя не оставалась одна на строке (ловит layout-audit) */
@media (max-width:480px) {
  .gd-toc { gap:6px; }
  .gd-toc a { font-size:.75rem; padding:6px 10px; }
}

/* Якоря не должны уезжать под липкую шапку */
[id] { scroll-margin-top:72px; }

/* Длинные абзацы по центру рвутся некрасиво - центрируем только заголовок и кнопку */
.gd-test p { text-align:left; }
.gd-test__meta { text-align:center; }

/* ===========================================================
   Блоки, добавленные 08.08.2026 после разбора статей-эталонов.
   Причина: на всю статью не было ни одного изображения и ни одной
   таблицы - глазу не за что зацепиться, читается как стена текста.
   Все четыре блока используют только существующие токены палитры.
   =========================================================== */

/* --- Схема-рисунок с подписью (инлайн-SVG, ничего не весит) --- */
.gd-fig { margin:var(--space-block) 0 0; }
.gd-fig svg { display:block; width:100%; height:auto; }
.gd-fig figcaption {
  margin-top:.75rem; font-size:.8125rem; line-height:1.55;
  color:var(--ink-2); text-align:center;
}
.gd-fig__box {
  background:var(--beige-2); border:1px solid var(--border-clr);
  border-radius:14px; padding:20px 16px;
}

/* --- Иллюстрации из кадров роликов (общая библиотека /guides/img/) ---
       Заведено 11.08.2026. Катерина: «у нас лист белый с буковками».
       Картинки берём из уже снятых кадров yuzhket: та же героиня, что
       в ленте, ноль новой стоимости, статья и рилсы перестают быть
       двумя разными мирами. --- */
.gd-fig img {
  display:block; width:100%; height:auto; border-radius:10px;
}
.gd-fig--img .gd-fig__box { padding:0; overflow:hidden; background:var(--beige-2); }

/* Кадр под заголовком: задаёт настроение до первой строки текста */
.gd-hero-img {
  margin:1.75rem 0 0; border-radius:16px; overflow:hidden;
  border:1px solid var(--border-clr); background:var(--beige-2);
}
.gd-hero-img img { display:block; width:100%; height:auto; }

/* Врезка-цитата: разбивает полотно текста, ставится раз-два на статью */
.gd-pull {
  margin:var(--space-block) 0 0; padding:22px 24px;
  background:var(--green-pale); border-left:3px solid var(--green);
  border-radius:0 14px 14px 0;
}
.gd-pull p {
  margin:0 !important; font-family:'Playfair Display', serif;
  font-size:1.1875rem; line-height:1.45; color:var(--ink);
}

/* Секция с заливкой - чтобы страница не была сплошным белым листом */
.gd-band {
  margin:var(--space-block) 0 0; padding:28px 22px;
  background:var(--beige-2); border-radius:16px;
}
.gd-band h2 { margin-top:0 !important; }

/* --- Таблица. На узком экране скроллится внутри себя,
       страница вбок не едет --- */
.gd-tablewrap {
  margin-top:var(--space-block); overflow-x:auto;
  border:1px solid var(--border-clr); border-radius:14px;
  -webkit-overflow-scrolling:touch;
}
.gd-table { border-collapse:collapse; width:100%; min-width:520px; font-size:.875rem; }
.gd-table th, .gd-table td {
  text-align:left; padding:12px 14px; vertical-align:top;
  border-bottom:1px solid var(--border-clr);
}
.gd-table th {
  background:var(--beige-2); font-weight:600; color:var(--ink);
  font-size:.8125rem; letter-spacing:.01em;
}
.gd-table tr:last-child td { border-bottom:0; }
.gd-table td:first-child { font-weight:600; white-space:nowrap; }

/* --- Памятка «сохрани себе» с кнопкой копирования --- */
.gd-memo {
  margin-top:var(--space-block); padding:22px 20px;
  background:var(--green-pale); border:1px solid var(--border-clr);
  border-radius:14px;
}
.gd-memo h2 { margin-top:0 !important; }
.gd-memo ul { margin-top:.875rem; padding-left:1.1rem; }
.gd-memo li { margin-top:.5rem; font-size:.9375rem; line-height:1.6; }
.gd-copy {
  margin-top:1.125rem; display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:999px; cursor:pointer;
  background:var(--card-bg); color:var(--green-ink);
  border:1px solid var(--green-ink); font:inherit; font-size:.875rem; font-weight:600;
}
.gd-copy:hover { background:var(--beige-2); }
.gd-copy[data-done="1"] { border-color:var(--green); color:var(--green); }

/* На телефоне таблица в три колонки нечитаема, а горизонтальный скролл
   прячет последнюю колонку - самую полезную. Поэтому ниже 640px строка
   таблицы разворачивается в карточку с подписями из data-l. */
@media (max-width:639px) {
  .gd-tablewrap { overflow-x:visible; border:0; border-radius:0; }
  .gd-table { min-width:0; display:block; }
  .gd-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .gd-table tbody, .gd-table tr, .gd-table td { display:block; width:100%; }
  .gd-table tr {
    border:1px solid var(--border-clr); border-radius:14px;
    padding:16px 18px; margin-bottom:12px; background:var(--card-bg);
  }
  .gd-table tr:last-child { margin-bottom:0; }
  .gd-table td { border-bottom:0; padding:0; }
  .gd-table td + td { margin-top:.75rem; }
  .gd-table td:first-child {
    white-space:normal; font-family:'Playfair Display',serif;
    font-size:1.0625rem; font-weight:500;
  }
  .gd-table td:not(:first-child)::before {
    content:attr(data-l); display:block;
    font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-3); margin-bottom:.25rem;
  }
}

@media (min-width:768px) {
  .gd-memo { padding:28px 32px; }
  .gd-fig__box { padding:28px 24px; }
  .gd-table { font-size:.9375rem; }
}

/* --- Уважение к настройкам --- */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

/* --- кнопка в блоке магнита: ведёт код-слово в бота (заведено 13.08.2026) --- */
.gd-magnet__btn {
  display:inline-block; margin-top:.875rem;
  background:var(--grad-btn); color:#fff; text-decoration:none;
  border-radius:var(--radius-btn); padding:12px 24px;
  font-size:.9375rem; font-weight:600; letter-spacing:.01em;
  box-shadow:0 6px 18px rgba(90,138,98,.28);
  transition:transform .2s, box-shadow .2s;
}
.gd-magnet__btn:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(90,138,98,.34); }
/* 16.08.2026: был --ink-3 - на зелёной подложке магнита 3.1:1 в светлой теме и 2.54:1
   в тёмной при норме 4.5. Тот же случай, что разобран в шапке файла: берём --ink-2,
   новых цветов не придумываем. Правка общая, чинит блок магнита во всех статьях. */
.gd-magnet__note { margin:.625rem 0 0; font-size:.8125rem; color:var(--ink-2); }