/* ============================================================================
   Base — modern reset, typography, layout primitives
   ========================================================================= */

/* --- Reset (modern, opinionated) ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem; /* offset for sticky nav */
}
body {
  line-height: var(--leading-relaxed);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
  background-color: var(--color-bg);
  text-rendering: optimizeLegibility;
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
::selection { background: var(--selection-bg); color: var(--selection-fg); }

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

/* --- Typography classes --------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-ink-subtle);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

.display {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-display);
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
  max-width: 60ch;
}

/* --- Layout primitives ---------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-lg);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
section {
  padding-block: clamp(4rem, 3rem + 6vw, 8rem);
  position: relative;
}
section.tight { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }

.stack > * + * { margin-top: var(--space-stack, var(--space-4)); }

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: var(--z-toast);
  background: var(--color-ink);
  color: var(--color-bg);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: var(--weight-medium);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { top: var(--space-4); }

/* Section divider rule (subtle hairline) */
.rule {
  height: 1px;
  background: var(--color-border);
  width: 100%;
}

/* Reveal-on-scroll base */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slower) var(--ease-out), transform var(--dur-slower) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Visually-hidden text: removed from view but kept in the accessible name and
   in the rendered text content (so it adds context for assistive tech and for
   crawlers that judge link text). Uses the clip technique rather than
   display:none so the text still contributes to the element's inner text. */
.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;
}