/* ==========================================================================
   KOPYTKO — _base.css
   Reset, типографика, доступность. Всё — 1:1 с эталоном mockups/home-v1.html
   (строки 28–39, 201) плюс фиксы доступности A3 §6.5, §6.7, §6.8,
   не меняющие ни цвета, ни кегля, ни композиции (D28/D29).
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.01em;
  margin: 0;
}

figure { margin: 0; }

img { max-width: 100%; }

/* Изображения несут явные width/height в разметке (A3 §4.4, D28 п.4);
   height:auto не даёт им растянуться при уменьшении контейнера. */
img[width][height] { height: auto; }

/* --------------------------------------------------------------------------
   Эйбрау и кикеры. Латунь на бумаге = 2,75 : 1 — принято владельцем (D30).
   -------------------------------------------------------------------------- */
.eyebrow {
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brass);
}

.eyebrow.on-green { color: var(--brass-soft); }

/* --------------------------------------------------------------------------
   Фокус (A3 §6.5). Цвет — токен эталона; заметность повышаем ТОЛЬКО
   толщиной и отступом, это D29 разрешает.
   ⛔ outline: none без визуальной замены.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 3px;
  border-radius: 2px;
}

/* На тёмных секциях — светлая латунь. */
.hero :focus-visible,
.system :focus-visible,
.quote :focus-visible,
.final :focus-visible,
.site-footer :focus-visible,
.mobile-nav :focus-visible { outline-color: var(--brass-soft); }

/* Страховка для браузеров без :focus-visible — фокус виден всегда. */
:focus { outline: 3px solid var(--brass); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

/* --------------------------------------------------------------------------
   Тач-таргеты 44×44 (A3 §6.8). Правится площадью нажатия,
   ⛔ не кеглем и ⛔ не цветом.
   -------------------------------------------------------------------------- */
a, button, summary, [role="button"] { min-height: 44px; }

/* Ссылка внутри абзаца — не блок и не растягивается: правило выше
   касается самостоятельных интерактивных элементов. */
p a, li a, .creds a, blockquote a { min-height: 0; }

/* --------------------------------------------------------------------------
   Служебные классы доступности
   -------------------------------------------------------------------------- */
.screen-reader-text,
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-link (navigation-linking-map.md §6.1). Виден только при фокусе. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--green-deep);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 2px;
}

.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* Цель skip-link. tabindex="-1" нужен, иначе фокус не перейдёт (A3 §6.7). */
main:focus { outline: none; }
main:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }