/* ==========================================================================
   Section system — the shell every homepage section is built on.

   Each section declares its own ground with two custom properties rather than
   hard-coding colours. That keeps the dark/light rhythm of the page in one
   place and means a section can be moved without rewriting its styles.
   ========================================================================== */

.section {
  --section-bg: var(--color-paper-050);
  --section-fg: var(--color-fg);
  --section-fg-muted: var(--color-fg-muted);
  --section-rule: rgb(88 72 72 / 0.14);

  position: relative;
  padding-block: clamp(5rem, 12vh, 10rem);
  padding-inline: var(--gutter);
  color: var(--section-fg);
  background-color: var(--section-bg);
  /* The header is fixed, so an anchor jump would otherwise land the section's
     first line underneath it. Every nav link depends on this. */
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.section--dark {
  --section-bg: var(--color-ink-950);
  --section-fg: var(--color-fg-inverse);
  --section-fg-muted: var(--color-fg-inverse-muted);
  --section-rule: rgb(246 246 244 / 0.14);
}

.section--paper {
  --section-bg: var(--color-paper-100);
}

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

/* --- Heads --------------------------------------------------------------- */

.section__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--section-fg-muted);
}

/* Short rule before the label — a quiet index marker rather than decoration. */
.section__eyebrow::before {
  content: "";
  width: var(--space-8);
  height: 1px;
  background-color: currentColor;
  opacity: 0.5;
}

.section__title {
  max-width: 20ch;
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.section__lead {
  max-width: 54ch;
  margin-top: var(--space-8);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  color: var(--section-fg-muted);
  text-wrap: pretty;
}

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

/* Two-column head: title left, supporting copy right. Collapses to one column
   before the measure gets uncomfortably narrow. */
.section__split {
  display: grid;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
  .section__split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .section__split .section__lead {
    margin-top: 0;
  }
}

/* ==========================================================================
   Statistics row
   ========================================================================== */

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
  margin-top: clamp(var(--space-12), 8vh, var(--space-24));
  padding-top: var(--space-8);
  border-top: 1px solid var(--section-rule);
  list-style: none;
}

@media (min-width: 48rem) {
  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.stat__value {
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);
  font-weight: var(--weight-regular);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  /* Lining figures of even width — numerals that jitter between values look
     careless at this size. */
  font-variant-numeric: tabular-nums lining-nums;
}

.stat__label {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--section-fg-muted);
  text-wrap: balance;
}

/* ==========================================================================
   Scroll reveal

   Progressive enhancement: the hiding rule is scoped to .js-reveal, which is
   set on <html> by an inline script before first paint. If the script never
   runs — JS disabled, module error — the content is simply visible, never
   stranded at opacity 0.
   ========================================================================== */

.js-reveal .reveal {
  opacity: 0;
  transform: translate3d(0, 1.75rem, 0);
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
  /* Children stagger by their own index; see reveal.js. */
  transition-delay: calc(var(--i, 0) * 80ms);
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal,
  .js-reveal .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}