/* Reset and element defaults. Logical properties only, so RTL needs no extra rules. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}

h1, h2, h3, h4 { margin: 0; font-family: var(--font-headline); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
:root[dir="rtl"] :is(h1, h2, h3, h4) { line-height: 1.5; letter-spacing: 0; font-weight: 700; }
p { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }

:focus-visible { outline: 2px solid var(--atlas-green); outline-offset: 2px; border-radius: var(--radius-s); }

.num, time, td, th { font-variant-numeric: tabular-nums; }

.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; inset-inline-start: var(--space-4); inset-block-start: -100px; padding: var(--space-2) var(--space-4); background: var(--ink); color: var(--bg); border-radius: var(--radius-m); z-index: 100; }
.skip-link:focus { inset-block-start: var(--space-2); }

.icon { inline-size: 20px; block-size: 20px; flex: none; }

@keyframes live-pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }