/* Дизайн-решения (гайды, режим landing):
   1. Якорь — существующий лендинг: фон --paper #f7f4ee, текст --ink #173f35, шрифт Nunito из /fonts/fonts.css.
   2. Акцент — --coral #ef7b68 (CTA и фокус-кольцо). Текст на коралле — --ink-strong #0d2b24 (5.3:1), сам --ink на коралле даёт 4.3:1 и не проходит. --mint-pale #dff4ea — фон блока примера. --ink — только текст, не акцент.
   3. Статья выровнена по левому краю, колонка 68ch, без иллюстраций и эмодзи; шапка и подвал повторяют лендинг.
   4. Порядок блоков: задача → пошаговый пример → ограничения → короткие ответы → регистрация. Всё видимо без JS, без свёрнутых блоков. */
:root {
  --paper: #f7f4ee;
  --white: #fffdf9;
  --ink: #173f35;
  --ink-strong: #0d2b24;
  --ink-soft: #43635b;
  --on-dark: #e8f3eb;
  --brand: #2a8e6e;
  --mint-pale: #dff4ea;
  --coral: #ef7b68;
  --coral-hover: #f38a78;
  --line: rgba(23, 63, 53, .14);
  --shadow: 0 8px 18px rgba(23, 63, 53, .14);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 56px;
  --space-9: 64px;
  --gutter: clamp(20px, 5vw, 72px);
  --gutter-article: clamp(20px, 5vw, 32px);
  --pad-top-article: clamp(32px, 6vw, 64px);
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-base: 17px;
  --fs-md: 18px;
  --fs-btn-s: 15px;
  --fs-brand: 27px;
  --fs-lead: 20px;
  --fs-h3: 19px;
  --fs-h2: 27px;
  --fs-h2-m: 24px;
  --fs-h1: clamp(34px, 5vw, 48px);
  --fs-h1-m: 32px;
  --r-sm: 4px;
  --r-md: 8px;
  color-scheme: light;
}
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Nunito', system-ui, sans-serif; font-size: var(--fs-base); line-height: 1.6; }
a { color: var(--ink); font-weight: 800; text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }
a:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: var(--r-sm); }
.site-head {
  min-height: 72px; padding: 0 var(--gutter); display: flex; align-items: center; gap: var(--space-7); flex-wrap: wrap;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; gap: var(--space-2); font-family: 'Pacifico', cursive; font-size: var(--fs-brand); color: var(--brand); text-decoration: none; }
.brand img { width: 38px; height: 38px; }
.site-head nav { display: flex; gap: var(--space-5); margin-left: auto; font-size: var(--fs-sm); }
.site-head nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; text-decoration: none; color: var(--ink-soft); }
.button {
  min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-5); box-sizing: border-box;
  border: 1px solid var(--coral); border-radius: var(--r-md); background: var(--coral); color: var(--ink-strong); font-size: var(--fs-md); font-weight: 900;
  text-decoration: none; box-shadow: var(--shadow);
}
.button:hover { background: var(--coral-hover); text-decoration: none; }
.button--small { min-height: 44px; padding: 0 var(--space-4); font-size: var(--fs-btn-s); }
.guide { max-width: 68ch; margin: 0 auto; padding: var(--pad-top-article) var(--gutter-article) var(--space-8); }
.crumbs { margin: 0 0 var(--space-5); font-size: var(--fs-sm); color: var(--ink-soft); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.eyebrow { margin: 0 0 var(--space-3); font-size: var(--fs-xs); font-weight: 900; text-transform: uppercase; color: var(--ink); }
.guide h1 { margin: 0 0 var(--space-5); font-size: var(--fs-h1); line-height: 1.12; font-weight: 1000; }
.lead { margin: 0 0 var(--space-6); font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-soft); font-weight: 700; }
.guide h2 { margin: var(--space-7) 0 var(--space-4); font-size: var(--fs-h2); line-height: 1.25; font-weight: 900; }
.guide h3 { margin: var(--space-6) 0 var(--space-2); font-size: var(--fs-h3); line-height: 1.35; font-weight: 900; }
.guide p { margin: 0 0 var(--space-4); }
.guide ul, .guide ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.guide li { margin-bottom: var(--space-2); }
.example { margin: 0 0 var(--space-5); padding: var(--space-5) var(--space-6); background: var(--mint-pale); border-radius: var(--r-md); }
.example p:last-child { margin-bottom: 0; }
.example ol { margin-bottom: 0; }
.limits { padding: var(--space-5) var(--space-6); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); }
.limits ul { margin-bottom: 0; }
.faq h3 { margin-top: var(--space-5); }
.faq p { margin-bottom: 0; }
.cta-block { margin-top: var(--space-7); padding: var(--space-6) var(--space-6) var(--space-6); border-radius: var(--r-md); background: var(--white); border: 1px solid var(--line); }
.cta-block h2 { margin-top: 0; }
.cta-block .button { margin-top: var(--space-2); }
.cta-note { margin: var(--space-3) 0 0; font-size: var(--fs-sm); color: var(--ink-soft); font-weight: 700; }
.cta-note a { display: inline-flex; align-items: center; min-height: 44px; }
.related { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.related h2 { margin: 0 0 var(--space-3); font-size: var(--fs-h3); }
.related ul { list-style: none; padding: 0; margin: 0; }
.related li { margin-bottom: var(--space-3); }
.related li a { display: flex; align-items: center; min-height: 44px; }
.site-foot { padding: var(--space-6) var(--gutter); background: var(--ink); color: var(--on-dark); font-size: var(--fs-sm); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: center; }
.site-foot a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--on-dark); text-decoration: none; font-weight: 700; }
.site-foot span { margin-left: auto; opacity: .8; }
@media (max-width: 640px) {
  .site-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--space-2) var(--space-3); padding-top: var(--space-2); padding-bottom: var(--space-2); }
  .site-head .brand { grid-column: 1; grid-row: 1; }
  .site-head .button { grid-column: 2; grid-row: 1; margin-left: 0; white-space: nowrap; }
  .site-head nav { grid-column: 1 / -1; grid-row: 2; gap: var(--space-4); margin-left: 0; width: auto; }
  .guide h1 { font-size: var(--fs-h1-m); }
  .guide h2 { font-size: var(--fs-h2-m); }
  .example, .limits, .cta-block { padding-left: var(--space-5); padding-right: var(--space-5); }
  .site-foot span { margin-left: 0; width: 100%; }
}
/* design-dna · mode: landing · mobile measure is viewport-bound at readable 17px; desktop target 45–75ch. See rendered probe results. */