/*
  Base: reset, document, type defaults, focus, the i18n pending state, reduced motion and the
  paused-tab rule. Layout rules use logical properties throughout, so the page mirrors in RTL.
*/

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* `hidden` first for old engines; `clip` cannot be scrolled sideways by code or an anchor,
     and unlike `hidden` it does not turn the page into a scroll container (sticky keeps working). */
  overflow-x: hidden;
  overflow-x: clip;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
  background: var(--canvas);
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* No background on body: <html> paints the canvas. */
body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: var(--track-heading);
  text-wrap: balance;
}

p,
ul,
ol,
figure {
  margin: 0;
}

p {
  text-wrap: pretty;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
  padding: 0;
}

strong,
b {
  font-weight: 600;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

[hidden] {
  display: none !important;
}

/* ---------- Focus: always visible, in gold ----------
   The outline follows each element's own radius, so a pill's ring is a pill. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
[tabindex='-1']:focus {
  outline: none;
}

/* ---------- Screen-reader-only text ---------- */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Skip link ---------- */
.skip {
  position: fixed;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: var(--z-skip);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-1);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-4)));
  transition: transform var(--dur-1) var(--ease-out);
}
.skip:focus-visible,
.skip:focus {
  transform: none;
}

/* ---------- i18n: no flash of English ----------
   boot.js marks the page pending while a Russian or Arabic catalog loads; translatable text
   stays hidden, its box keeping its room, until i18n.js has applied the catalog and the fonts
   it needs have arrived. If the catalog fails or is late, boot.js turns the page English and
   shows it, 2.5 s at the latest. */
[data-i18n-pending] [data-i18n] {
  visibility: hidden;
}

/* ---------- Hidden tab: pause every loop ----------
   animation-play-state does not inherit, so this names every element and pseudo-element.
   page.js sets data-paused on <html> while the tab is hidden. */
[data-paused] *,
[data-paused] *::before,
[data-paused] *::after {
  animation-play-state: paused !important;
}

/* ---------- Reduced motion, completely ----------
   Animations jump to their finished frame (they fill both ways), transitions and their delays
   vanish, and nothing scrolls smoothly. The scenes follow the same query in JS (no easing, the
   morph and the expansion binary). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}