/* Site basics on top of tokens.css and components.css (both copied from brand/ by
   website/tools/build.py). Every value is a token. */
/* Light only: the site never follows the device's dark mode. */
html { color-scheme: light only; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); }
a { color: var(--link); }
a:hover { color: var(--brand-strong); }
a:focus-visible, summary:focus-visible, .ss-check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.ss-topbar__link[aria-current="page"] { color: var(--brand-strong); font-weight: 500; }

/* The top bar shows the wordmark alone (the full logo is in the footer). Without the tile
   beside it, it doesn't need the nudge that lines it up with the tile. */
.ss-logo--word .ss-logo__word { transform: none; }

/* At phone widths the top bar is the wordmark (about 157px), both buttons (about 195px)
   and the side padding. Tighten the spacing below 420px, and keep only the main action
   below 390px. */
@media (max-width: 419px) {
  .ss-topbar { gap: var(--space-3); }
  .ss-topbar__actions .ss-btn--sm { padding: 0 14px; }
}
@media (max-width: 389px) {
  .ss-topbar__actions .ss-btn--secondary { display: none; }
}

.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 10; background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 10px 16px; font-size: 14px; text-decoration: none; box-shadow: var(--shadow-nav); }
.skip-link:focus { top: var(--space-3); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}