/* Токены и рамка сайта: шапка, подвал, переключатель темы, ссылка «К содержимому».
   Всё, кроме токенов, ограничено классами .bar / .foot / .skip.
   Цвета заданы в sRGB, чтобы работали и в браузерах без oklch. */
:root {
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  /* Шкала для аудитории 45+: текст статьи 20–21px, подписи и кнопки не мельче 18px, мельче 16px нет ничего */
  --text-xs: 1rem; --text-sm: 1.125rem; --text-md: clamp(1.25rem, 0.15vw + 1.2rem, 1.3125rem); --text-lg: 1.375rem; --text-xl: 1.625rem; --text-2xl: 2rem; --text-3xl: 2.5rem;
  --text-display-s: clamp(2rem, 2.6vw + 1.25rem, 3.5rem); --text-display: clamp(2.375rem, 5.6vw + 1rem, 6rem); --text-display-m: clamp(2.25rem, 3.6vw + 1.1rem, 4.5rem);
  --text-figure: clamp(4.5rem, 8vw + 1.5rem, 10rem);
  --text-section: clamp(1.875rem, 2vw + 1.25rem, 3rem); --text-title: clamp(1.375rem, 0.6vw + 1.2rem, 1.75rem); --text-lead: clamp(1.375rem, 0.4vw + 1.25rem, 1.5rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: #be2323; --color-success: #21763c;
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  /* Бумага тёплая, чернила с садовым зелёным отливом, один зелёный бренда */
  --color-paper: #f8f5ee; --color-paper-2: #efebe2; --color-paper-3: #e6e1d6;
  --color-ink: #0e130f; --color-ink-2: #222823; --color-muted: #4b4741;
  --color-rule: #d1cdc7; --color-rule-2: #7e7a73;
  --color-accent: #067553; --color-accent-ink: #faf8f4; --color-focus: #007a4e;
  --color-accent-text: #0c6547;
  --font-display: "Golos Text", ui-sans-serif, system-ui, sans-serif; --font-body: "PT Serif", Georgia, ui-serif, serif;
  --radius-card: 0; --radius-pill: 0; --rule-hair: 1px; --rule-heavy: 4px; --shadow-card: none;
  --tracking-display: -0.02em; --tracking-tight: -0.035em; --display-weight: 700; --label-weight: 500;
  --control-h: 52px; --control-h-l: 64px;
}
[data-theme="dark"] {
  --color-paper: #110f0a; --color-paper-2: #191712; --color-paper-3: #221f19;
  --color-ink: #e7ede8; --color-ink-2: #d0d6d1; --color-muted: #b8b3ac;
  --color-rule: #383530; --color-rule-2: #848078;
  --color-accent: #5aba92; --color-accent-ink: #110f0a; --color-focus: #43cd99;
  --color-accent-text: #7dd2ad;
  --color-error: #ef6b6b; --color-success: #5fbf7f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-paper: #110f0a; --color-paper-2: #191712; --color-paper-3: #221f19;
    --color-ink: #e7ede8; --color-ink-2: #d0d6d1; --color-muted: #b8b3ac;
    --color-rule: #383530; --color-rule-2: #848078;
    --color-accent: #5aba92; --color-accent-ink: #110f0a; --color-focus: #43cd99;
    --color-accent-text: #7dd2ad;
    --color-error: #ef6b6b; --color-success: #5fbf7f;
  }
}
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }

/* Ссылка мимо шапки */
a.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-sm) var(--space-md); background: var(--color-ink); color: var(--color-paper); font-family: var(--font-display); font-weight: var(--label-weight); }
a.skip:focus-visible, a.skip:focus { top: var(--space-md); left: var(--space-md); }

/* Общее для шапки и подвала */
.bar, .foot { font-family: var(--font-display); font-weight: var(--label-weight); color: var(--color-ink); }
.bar *, .foot * { box-sizing: border-box; }
.bar ul, .foot ul { margin: 0; padding: 0; list-style: none; }
.bar a, .foot a { text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--color-rule-2); transition: text-decoration-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.bar a:hover, .foot a:hover { text-decoration-color: var(--color-accent); }
.bar a:focus-visible, .foot a:focus-visible, .foot button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.bar__in, .foot__in { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.bar .icon, .foot .icon { display: block; width: 24px; height: 24px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Знак */
.bar .brand, .foot .brand, .bar .brand:visited, .foot .brand:visited { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 64px; justify-self: start; color: var(--color-ink); text-decoration: none; font: 700 var(--text-xl)/1 var(--font-display); letter-spacing: var(--tracking-display); }
.bar .brand svg, .foot .brand svg { display: block; width: 34px; height: 31px; flex-shrink: 0; color: var(--color-accent-text); }
.bar .brand .brand-leaf, .foot .brand .brand-leaf { fill: var(--color-paper); }
.bar .brand .brand-vein, .foot .brand .brand-vein { fill: none; stroke: currentColor; stroke-width: 14; stroke-linecap: round; }
.bar .brand .brand-roof, .foot .brand .brand-roof { fill: none; stroke: currentColor; stroke-width: 46; stroke-linecap: round; }
.bar .brand b, .foot .brand b { color: var(--color-accent-text); font-weight: 700; }

/* Шапка: знак, четыре раздела, поиск. На телефоне разделы — сеткой 2 на 2 под знаком, без скрытого меню */
.bar { background: var(--color-paper); border-bottom: var(--rule-heavy) solid var(--color-ink); }
.bar__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand search" "nav nav"; align-items: center; column-gap: var(--space-md); }
.bar__in > .brand { grid-area: brand; }
.bar .bar__search, .bar .bar__search:visited { grid-area: search; display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-ink); color: var(--color-ink); background: var(--color-paper); font-size: var(--text-sm); line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out); }
.bar .bar__search:hover { background: var(--color-paper-2); }
.bar .bar__search:active { background: var(--color-paper-3); }
.bar__nav { grid-area: nav; border-top: var(--rule-hair) solid var(--color-rule); }
.bar__nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bar .bar__nav a, .bar .bar__nav a:visited { display: flex; align-items: center; min-height: 52px; color: var(--color-ink); font-size: var(--text-sm); line-height: 1.2; text-decoration: none; }
.bar__nav li:nth-child(even) a { padding-left: var(--space-md); border-left: var(--rule-hair) solid var(--color-rule); }
.bar__nav li:nth-child(n+3) a { border-top: var(--rule-hair) solid var(--color-rule); }
.bar .bar__nav a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.bar .bar__nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--color-accent); }
@media (min-width: 60rem) {
  .bar__in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand nav search"; }
  .bar__nav { border-top: 0; }
  .bar__nav ul { display: flex; gap: var(--space-xl); padding-left: var(--space-2xl); }
  .bar .bar__nav li a, .bar .bar__nav li:nth-child(even) a, .bar .bar__nav li:nth-child(n+3) a { min-height: 80px; padding-left: 0; border: 0; }
}

/* Подвал-колофон: знак, ссылки разделов, строка о данных, авторы фото */
.foot { margin-top: var(--section-gap); border-top: var(--rule-heavy) solid var(--color-ink); padding-block: var(--space-xl) var(--space-2xl); background: var(--color-paper); }
.foot__in { display: grid; gap: var(--space-lg); }
.foot__links { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); column-gap: var(--space-md); }
.foot .foot__links a, .foot .foot__links a:visited { display: flex; align-items: center; min-height: 48px; color: var(--color-ink); font-size: var(--text-sm); line-height: 1.2; white-space: nowrap; }
.foot__legal, .foot__photos { max-width: 72ch; margin: 0; font-family: var(--font-display); font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-2); }
.foot__photos { font-size: var(--text-xs); color: var(--color-muted); }
.foot .foot__photos a, .foot .foot__photos a:visited { color: inherit; }
@media (min-width: 60rem) {
  .foot__in { grid-template-columns: 3fr 9fr; column-gap: var(--gap-columns); align-items: start; }
  .foot__in > .brand { grid-row: span 4; }
  .foot__links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Переключатель темы в подвале: подпись говорит, что будет после нажатия. Без скриптов его нет */
.foot .theme-toggle { position: static; justify-self: start; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); width: auto; height: auto; min-height: var(--control-h); margin: 0; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: 0; background: var(--color-paper); color: var(--color-ink); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; font: var(--label-weight) var(--text-sm)/1 var(--font-display); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.foot .theme-toggle:hover { background: var(--color-paper-2); }
.foot .theme-toggle:active { background: var(--color-paper-3); }
.foot .theme-toggle .icon { stroke: currentColor; }
.foot .theme-toggle .i-sun, .foot .theme-toggle .tt-light { display: none; }
[data-theme="dark"] .foot .theme-toggle .i-sun, [data-theme="dark"] .foot .theme-toggle .tt-light { display: inline; }
[data-theme="dark"] .foot .theme-toggle .i-moon, [data-theme="dark"] .foot .theme-toggle .tt-dark { display: none; }
html:not(.js) .foot .theme-toggle { display: none; }

@media (prefers-reduced-motion: reduce) { .bar *, .foot * { transition-duration: 0.01ms !important; } }