/* ==========================================================================
   Layout — containers, section rhythm, editorial grid
   ========================================================================== */

.wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 46rem; }

.section { padding-block: var(--section); }
/* Two sections meeting with no seam between them -- one subject continued, not
   a new one. Was `style="padding-top: 0"` on nine sections across eight pages
   and four generators, which is a component wearing a disguise: nothing named
   it, nothing could find it, and it could not be changed in one place. */
.section--flush { padding-top: 0; }
.section--tint { background: var(--paper-deep); }
/* The brand block. Named for what it is rather than "dark" — #78C898 is a
   light surface, so everything on it is ink or deep green, never paper. */
/* The brand block was a large sheet of #78C898 with dark text on it. Under the
   Formation recipe mint is 5% -- an accent, never a surface -- so the block is
   forest and everything on it resolves light. Charcoal on forest is 1.04:1, so
   nothing inherits the page ink here. */
.section--brand { background: var(--forest); color: var(--cream); --l99-ring: var(--mint); }
.section--brand h2, .section--brand h3 { color: var(--mint); }

/* Section heading sitting on a thick rule — poster signage, not an editorial
   hairline. The rule runs the full width and the heading sits above it. */
.section-head {
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-5, 1.25rem);
  border-bottom: var(--rule-thick) solid var(--green-display);
}
.section-head > * { margin: 0; }
.section--brand .section-head { border-bottom-color: var(--mint); }
.section--tint .section-head { border-bottom-color: var(--green-display); }

.lede {
  font-size: var(--text-md);
  color: var(--ink-soft);
  max-width: 54ch;
}
.section--brand .lede { color: var(--cream); }
/* The eyebrow's default ink-faint is only 2.73:1 on the brand surface. */
.section--brand .eyebrow { color: var(--mint); }
/* --green is 5.49:1 on paper but only 2.96:1 on the brand surface, so links
   inside a brand block resolve to the deep green instead. */
.section--brand a { color: var(--mint); }
.section--brand a:hover { color: var(--white); }

/* ---- Reveals ------------------------------------------------------------ */
[data-reveal-armed] {
  opacity: 0;
  transform: translateY(18px);
}
[data-reveal] {
  transition: opacity var(--l99-dur-entrance) var(--l99-ease-standard),
              transform var(--l99-dur-entrance) var(--l99-ease-standard);
}
[data-reveal][style*='--i'] { transition-delay: calc(var(--i) * var(--stagger)); }