/* ==========================================================================
   Base — reset, typography, links, focus, utilities, the one motion.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--space-4)); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select { font: inherit; color: inherit; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
a { color: inherit; text-decoration-thickness: var(--hairline); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
[hidden] { display: none !important; }

:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: 2px; }
.surface-dark :focus-visible, .panel-dark :focus-visible, .site-header :focus-visible, .mobile-menu :focus-visible, .action-bar :focus-visible {
  outline-color: var(--focus-on-dark);
}

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: var(--icon); height: var(--icon); flex: none; }
.icon--small { width: var(--icon-small); height: var(--icon-small); }
.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;
}
.no-js .js-only { display: none !important; }
.skip-link {
  position: absolute; left: var(--space-4); top: calc(-1 * var(--space-16)); z-index: var(--z-skip);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius);
  background: var(--accent); color: var(--on-accent); font-weight: var(--weight-bold);
}
.skip-link:focus { top: var(--space-4); }

/* Text styles */
.kicker {
  margin-bottom: var(--space-3);
  font-size: var(--fs-kicker); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--text-muted);
}
.surface-dark .kicker, .panel-dark .kicker { color: var(--muted-on-dark); }
.page-title { font-size: var(--fs-h1); }
.section-title { font-size: var(--fs-h2); font-weight: var(--weight-semibold); }
.lead { max-width: var(--measure); font-size: var(--fs-lead); color: var(--text-muted); }
.prose { max-width: var(--measure); }
.prose + .prose { margin-top: var(--space-4); }
.muted { color: var(--text-muted); }
.price { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--fs-price); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-display); }
.price-note { margin-top: var(--space-1); font-size: var(--fs-label); color: var(--text-muted); }

/* Surfaces with grain */
.surface-dark {
  color: var(--text-on-dark);
  background-color: var(--ink-950);
  background-image: var(--grain), var(--dark-lift);
}

/* The one motion: sections fade in and rise once (see site.js). Only under html.js, which the page drops again
   when a script did not run, so content is never hidden by code that is not there. */
.js .reveal-ready { opacity: 0; translate: 0 var(--reveal-shift); }
.js .reveal-ready.is-revealed {
  opacity: 1; translate: 0 0;
  transition: opacity var(--duration-reveal) var(--ease), translate var(--duration-reveal) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .js .reveal-ready { opacity: 1; translate: none; }
}