/* Общий фундамент для ста вариантов: сброс и плумбинг, НИКАКИХ решений о виде.
   Всё, что касается композиции, цвета, ритма и плотности, — в самом варианте.
   DESIGN_DIRECTIONS.md §7: тело страницы обязано отличаться. */

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

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

body {
  margin: 0;
  min-height: 100svh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* Ни одна страница не должна ехать вбок. Широкое содержимое —
   в собственном контейнере со своим скроллом. Чек-лист §5. */
html, body { overflow-x: clip; }

/* Кольцо фокуса двухтоновое, а не currentColor.
   currentColor подводит там, где текст элемента подобран под его же заливку:
   у золотой кнопки это тёмные чернила, и кольцо со смещением 2px выносилось
   на ночной фон при 1.06:1; у выбранной вкладки — белым по белой секции при
   1.00:1. Замерено. Белая линия с тёмной обводкой читается на любом фоне,
   потому что одна из двух всегда контрастна. */
/* Шапка обязана быть выше содержимого первого экрана.
   У многих вариантов шапка и подпись героя имеют одинаковый z-index, и при
   равном слое выигрывает тот, кто позже в разметке, — подпись. На высоком
   экране она прижата к низу и до шапки не достаёт, а на 320×480 заполняет
   кадр целиком: шапка видна, но НАЖАТИЯ достаются подписи. Не работают
   логотип, навигация и призыв — при том что с клавиатуры всё доступно.
   z-index на статичном элементе не действует, поэтому правило безопасно:
   оно поднимает только те шапки, которые и так позиционированы.
   !important здесь оправдан: варианты объявляют шапку селектором вида
   `.shot > header` весомостью 0,1,1, и голый тег ей проигрывает. Шапка,
   намеренно спрятанная ЗА содержимым, — это и есть чинимая ошибка,
   так что перекрывать нечего. */
header { z-index: 5 !important; }

:where(:focus-visible) {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgb(0 0 0 / 0.85);
}
/* На светлом фоне пара меняется местами тем же приёмом. */
@media (prefers-color-scheme: no-preference) { /* заглушка для порядка правил */ }
:where(section[data-tone="light"], section[data-tone="cream"]) :where(:focus-visible),
:where(.light) :where(:focus-visible) {
  outline-color: #12151a;
  box-shadow: 0 0 0 4px rgb(255 255 255 / 0.95);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* WCAG 2.5.8: цель указателя не меньше 24x24 CSS px.
   Ссылки шапки и второй призыв набираются кеглем 11-16 px, и на 390 px
   их высота падала до 13-18 px. Растёт площадь попадания, а не кегль. */
nav a,
a#alt {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
nav a { min-width: 24px; justify-content: center; }

/* На 390 px шапка сжимается, и «Get an API key» ломался на «Get / an / API / key»
   столбиком в 24 px шириной. Пункт переносится целиком, а не по словам. */
nav a, a#cta { white-space: nowrap; }

/* Служебная плашка предпросмотра — на всех вариантах, в прод не едет. */
.pv {
  position: fixed; inset: auto 12px 12px auto; z-index: 99;
  display: flex; gap: 8px; align-items: center;
  padding: 6px 10px; border-radius: 8px;
  background: rgb(0 0 0 / 0.72); color: #fff;
  font: 500 11px/1 ui-monospace, monospace; letter-spacing: 0.04em;
  backdrop-filter: blur(6px);
}
.pv a { color: #fff; text-decoration: none; opacity: 0.65; }
.pv a:hover { opacity: 1; }
/* Служебная плашка галереи, не часть макета. На экране 320 она занимала
   189 px — почти шестьдесят процентов ширины — и закрывала сам вариант
   ровно там, где его надо рассматривать. Сжимаем и приглушаем;
   при наведении и с клавиатуры возвращается в полную силу. */
@media (max-width: 520px) {
  .pv {
    inset: auto 8px 8px auto;
    padding: 4px 8px;
    gap: 6px;
    font-size: 10px;
    opacity: 0.42;
  }
  .pv:hover, .pv:focus-within { opacity: 1; }
}