/* ==========================================================================
   Base — element defaults, typography, layout primitives
   ========================================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--c-paper);
  color: var(--c-graphite);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

main:focus { outline: none; }

img, svg { max-width: 100%; height: auto; }
img { display: block; }

h1, h2, h3, .display {
  font-family: var(--ff-display);
  font-weight: var(--fw-regular);
  color: var(--c-ink);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-heading);
  margin: 0;
  text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: var(--lh-tight); font-variation-settings: "opsz" 72; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-variation-settings: "opsz" 72; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; }

p { margin: 0; }
p, li, dd { text-wrap: pretty; }
dd { margin: 0; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--c-graphite);
  font-weight: var(--fw-regular);
  max-width: 38rem;
}

.label {
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-muted);
  line-height: 1.4;
}

a {
  color: var(--c-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--c-accent); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-1);
}

::selection { background: var(--c-accent); color: var(--c-paper); }

.rule { border: 0; border-top: var(--border); opacity: 1; margin: 0; }

/* Container: fluid gutters, capped width */
.container-x {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter-x);
}

/* Sections */
.section { padding-block: var(--section-y); }
.section--flush-top { padding-top: 0; }
.section--deep { background: var(--c-paper-deep); }
.section--rule { border-top: var(--border); }

.section-head {
  display: grid;
  gap: var(--s-4);
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.section-head__body h2 { max-width: 22ch; }
@media (min-width: 992px) {
  .section-head { grid-template-columns: 4fr 8fr; gap: var(--s-6); }
  .section-head__label { padding-top: .6rem; }
}
.section-foot { margin-top: var(--s-8); }

/* Running text */
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.25em; }
.prose p:first-child { font-size: var(--fs-lead); line-height: 1.55; color: var(--c-ink); }

/* Accessibility */
.skip-link {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 2000;
  padding: .75rem 1.25rem;
  background: var(--c-ink);
  color: var(--c-paper);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: none; color: var(--c-paper); }

[hidden] { display: none !important; }