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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  background-image:
    radial-gradient(circle at 100% 0%, var(--gold-wash), transparent 40%),
    radial-gradient(circle at 0% 100%, var(--green-wash), transparent 45%);
  background-attachment: fixed;
  min-height: 100vh;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0 0 var(--space-3); }
h1 { font-size: var(--step-3); letter-spacing: -0.015em; }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); font-weight: 600; }
p { margin: 0 0 var(--space-3); }
a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 2px; }

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

.shell { max-width: var(--shell); margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-7); }
.stack > * + * { margin-top: var(--space-4); }
.row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.row-between { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; justify-content: space-between; }
.grow { flex: 1 1 auto; }
.muted { color: var(--ink-soft); }
.small { font-size: var(--step--1); }
.mono { font-family: var(--font-mono); font-size: var(--step--1); }
.serif { font-family: var(--font-serif); }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4); top: -60px; background: var(--ink); color: var(--paper-card);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius); z-index: 20; transition: top 0.15s;
}
.skip-link:focus { top: var(--space-3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}