/* Shared foundation for all five options. Reads only tokens (option-<x>/tokens.css); has no look of its own. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-size);
  line-height: var(--text-leading);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  font-variant-numeric: lining-nums;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
strong, b { font-weight: var(--strong-weight); }

h1, h2, h3, .display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  text-transform: var(--display-case);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); line-height: 1.15; }
p { max-width: var(--measure); text-wrap: pretty; }

a { color: inherit; text-decoration-thickness: 0.1em; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.16em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: var(--space-s); top: -10rem; z-index: 100;
  background: var(--ink); color: var(--bg); padding: var(--space-xs) var(--space-s); font-weight: var(--strong-weight);
}
.skip:focus { top: var(--space-s); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: max(var(--space-s), env(safe-area-inset-left, 0px)) max(var(--space-s), env(safe-area-inset-right, 0px)); }
@media (min-width: 48rem) { .wrap { padding-inline: var(--space-l); } }
.tnum { font-variant-numeric: tabular-nums lining-nums; }
.muted { color: var(--muted); }
.small { font-size: var(--step-n1); }

/* Motion: an element marked .rise enters once; with reduced motion it is simply there. */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise var(--dur-slow) var(--ease) both; }
  .rise-2 { animation-delay: 80ms; } .rise-3 { animation-delay: 160ms; } .rise-4 { animation-delay: 240ms; }
}
@keyframes rise { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}