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

html {
  min-width: 20rem;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.has-overlay { overflow: hidden; }
button, input, textarea, select { color: inherit; font: inherit; }
button, [role="button"], summary { touch-action: manipulation; }
button { border: 0; }
a { color: var(--color-brand); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--color-brand-hover); }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin-block-start: 0; }
h1, h2, h3, h4 { color: var(--color-ink-strong); line-height: var(--leading-tight); letter-spacing: -.025em; }
h1 { font-size: clamp(var(--text-3xl), 7vw, var(--text-5xl)); }
h2 { font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); }
h3 { font-size: var(--text-xl); }
p { max-width: 70ch; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

::selection { background: var(--color-selection-bg); color: var(--color-selection-fg); }

.skip-link {
  position: fixed;
  inset: var(--space-3) auto auto var(--space-3);
  z-index: var(--z-tooltip);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-inverse-surface);
  color: var(--color-inverse-text);
  transform: translateY(-160%);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.skip-link:focus { transform: translateY(0); }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
.icon--sm { width: 1rem; height: 1rem; }
.icon--lg { width: 1.5rem; height: 1.5rem; }

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