/* Reset and base typography. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
    font: 400 16px/1.5 var(--font-body);
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--font-head); font-weight: 700; line-height: 1.08; text-transform: uppercase; letter-spacing: 0.02em; }
h3 { line-height: 1.25; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-primary); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
/* The transparent outline is invisible normally but becomes a real outline in forced-colors mode,
   where box-shadow is dropped. */
:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-2); top: -60px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-on-primary); font-weight: 700; }
.skip-link:focus, .skip-link:hover { top: var(--space-2); color: var(--color-on-primary); }
.icon { flex-shrink: 0; }
.site-main { display: block; min-height: 60vh; padding-bottom: var(--space-16); }

@media (min-width: 1024px) {
    body { padding-bottom: 0; }
}

@media (forced-colors: active) {
    .site-search:focus-within { outline: 2px solid; }
}

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