/* Base elements */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text);
  background: var(--color-white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-ink);
}

h1 { font-size: var(--fs-section); line-height: var(--lh-section); }
h2 { font-size: var(--fs-section); line-height: var(--lh-section); }
h3 { font-size: var(--fs-card); line-height: var(--lh-card); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
h5, h6 { font-size: var(--fs-body); line-height: var(--lh-body); }

p { margin-block: 0 var(--space-sm); }
p:last-child { margin-block-end: 0; }

a { text-decoration: none; }
a:hover { color: var(--color-primary); }

/* The original renders long descriptive paragraphs in Merriweather 16/19.2 —
   keep that role as a reusable class instead of abusing h6. */
.prose-serif {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-serif);
  line-height: var(--lh-serif);
  color: var(--color-text);
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-pad-x);
}

.container--wide { max-width: var(--container-wide); }

.section { padding-block: var(--section-pad-y); }

.bg-cream { background: var(--color-cream); }
.bg-cream-2 { background: var(--color-cream-2); }
.bg-dark { background: var(--color-dark); color: var(--color-white); }
.bg-teal { background: var(--color-teal); color: var(--color-white); }

/* Keyboard focus — added over the original (see NOTES.md) */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-dark);
  color: var(--color-white);
  padding: var(--space-2xs) var(--space-sm);
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* Scroll reveal (matches the original's fadeInUp entrance animation) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}