/* Global typography & body defaults */

html {
  scroll-padding-top: calc(var(--nav-h) + env(safe-area-inset-top));
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  font-weight: 400;
}

/* Headings — display family, tight tracking */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--ink);
}

h1 {
  font-size: var(--size-hero);
  font-weight: 300;
}

h2 {
  font-size: var(--size-h2);
  line-height: var(--leading-snug);
}

h3 {
  font-size: var(--size-h3);
  letter-spacing: 0;
  font-weight: 500;
}

p {
  color: var(--ink);
}

p + p {
  margin-top: var(--stack-sm);
}

.lede {
  font-size: var(--size-lede);
  line-height: 1.4;
  color: inherit;
  max-width: var(--max-prose);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--size-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}

small,
.small {
  font-size: var(--size-small);
  color: var(--ink-soft);
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease);
}

a:hover {
  opacity: 0.65;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Section bands (background tinting) */
.section {
  background: var(--bg);
  padding-block: var(--section-y);
}

/* Hero opts out of default section padding and runs full viewport. */
.section--hero {
  position: relative;
  padding-block: 0;
  overflow: hidden;
  min-height: calc(100vh - var(--nav-h) - env(safe-area-inset-top));
  min-height: calc(100dvh - var(--nav-h) - env(safe-area-inset-top));
}

.section--sand {
  background: var(--sand);
}

.section--sage {
  background: var(--sage);
}

.section--dusty {
  background: var(--dusty);
}

.section--bone {
  background: var(--bone);
}

.section--dark {
  background: var(--dark);
  color: var(--dark-ink);
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
  color: var(--dark-ink);
}

.section--dark .eyebrow,
.section--dark .small {
  color: var(--dark-soft);
}

/* Selection */
::selection {
  background: var(--ink);
  color: var(--bg);
}

/* Utility: tabular numerals — apply to any dynamically updating numeric text */
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Utility: subtle image outline — apply to bare <img> inside content sections */
.img-outlined {
  outline: 1px solid oklch(0 0 0 / 0.1);
  outline-offset: -1px;
}

/* Reduced motion guard already in reset */