/* Narrative section. Eyebrow + big display pull-line + two support
   blocks + optional mono stat strip. Reads as an abstract page. */

.narrative {
  position: relative;
  padding-block: 0;
}

.narrative__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  /* No max-width override: .container already provides the site-wide
     content width (1400px cap) + the glass-strip padding baseline from
     base.css. Line-length is controlled on individual children
     (.narrative__pull, .narrative__col-body) instead. */
}

.narrative__intro {
  display: flex;
  align-items: center;
}

.narrative__pull {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: var(--font-weight-display);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-foreground);
  max-width: 34ch;
  text-transform: capitalize;
}

/* Gradient-accented word(s) in the pull-line. Matches hero + cta-band
   so all three read with one voice. */
.narrative__pull-accent {
  background: linear-gradient(90deg, var(--brand-teal) 0%, var(--brand-blue) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* --- Support columns ---------------------------------------------- */

.narrative__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}

.narrative__col {
  padding: 1rem 0 0;
  border-top: 1px solid var(--color-border);
}

.narrative__col-heading {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--font-weight-display);
  letter-spacing: -0.01em;
  color: var(--color-foreground);
}

.narrative__col-body {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-muted-foreground);
  max-width: 44ch;
}

/* --- Stat strip --------------------------------------------------- */

.narrative__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0.875rem 0 0;
  border-top: 1px solid var(--color-border);
}

.narrative__stat {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  /* Symmetric padding so text breathes away from the dividers on both
     sides. Outer stats get their inside edge zeroed so they stay flush
     with the section's content edge, not indented. */
  padding: 0.5rem 1.25rem;
  border-right: 1px solid var(--color-border);
}
.narrative__stat:first-child { padding-left: 0; }
.narrative__stat:last-child  { padding-right: 0; border-right: 0; }

.narrative__stat-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
}

.narrative__stat-value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.01em;
  color: var(--color-foreground);
}

/* --- Responsive --------------------------------------------------- */

@media (max-width: 720px) {
  .narrative__grid {
    grid-template-columns: 1fr;
  }
  .narrative__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* 2-up: reset per-row so each row mirrors the desktop outer-edge rule -
     first cell of the row stays flush-left, right cell flush-right, no
     right border on the rightmost, bottom border between rows. */
  .narrative__stat                 { padding: 0.5rem 1.25rem; border-right: 1px solid var(--color-border); }
  .narrative__stat:nth-child(2n-1) { padding-left: 0; }
  .narrative__stat:nth-child(2n)   { padding-right: 0; border-right: 0; }
  .narrative__stat:nth-child(-n+2) { border-bottom: 1px solid var(--color-border); padding-bottom: 0.75rem; }
  .narrative__stat:nth-child(n+3)  { padding-top: 0.75rem; }
}

@media (max-width: 420px) {
  .narrative__stats {
    grid-template-columns: 1fr;
  }
  .narrative__stat {
    padding: 0.625rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }
  .narrative__stat:last-child { border-bottom: 0; }
}