/* ==========================================================================
   Base — document-level typography and the shared section shell.
   ========================================================================== */

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color: var(--color-fg);
  background-color: var(--color-bg);
}

/* Prevent the hero's tall spacer from ever producing sideways scroll. */
body {
  overflow-x: clip;
}

/* Available to assistive technology, absent from the visual design. Used for
   the page's single h1, which is a keyword line rather than a caption. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-fg);
  background: var(--color-paper-000);
  border-radius: 4px;
  transform: translateY(-200%);
  transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* --- Section shell (placeholder until the real sections are built) ------- */

.section {
  padding-block: var(--space-32);
  padding-inline: var(--gutter);
}

/* Placeholder only. Without at least a viewport of content below the hero, the
   document cannot scroll far enough for the hero's foot to pass the header, so
   the header could never reach its solid state. Real sections will exceed this
   naturally and this modifier goes away with the placeholder. */
.section--tall {
  display: flex;
  align-items: center;
  min-height: 100vh;
}

@supports (height: 1svh) {
  .section--tall {
    min-height: 100svh;
  }
}

.section__inner {
  max-width: var(--container-max);
  margin-inline: auto;
}

.section__eyebrow {
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.section__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.section__body {
  max-width: var(--measure);
  margin-top: var(--space-6);
  color: var(--color-fg-muted);
}