/* Hallmark · genre: editorial · macrostructure: Marquee Hero · design-system: design.md · designed-as-app
 * enrichment: Tier B hand-built SVG (Walsh functions in sequency order) · motion: one staggered fade on load
 */
@import url("brand.css");

body {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(14rem, 1fr) auto auto;
}

/* Sixteen Walsh functions, one per row, ordered by sequency. Row 5 is the mark. */
.walsh {
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  gap: var(--space-xs);
  padding-block: var(--space-md) var(--space-lg);
  margin: 0;
  min-height: 0;
}
.walsh__row {
  display: grid;
  grid-template-columns: 2ch minmax(0, 1fr);
  gap: var(--space-md);
  align-items: stretch;
  color: var(--color-rule);
  animation: settle var(--dur-long) var(--ease-out) backwards;
  animation-delay: calc(var(--i) * 28ms);
}
.walsh__n { font-size: var(--text-xs); line-height: 1; align-self: center; color: var(--color-muted); }
.walsh__wave { position: relative; min-height: 0.5rem; }
.walsh__row svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.walsh__row path { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.walsh__row.is-mark { color: var(--color-accent); }
.walsh__row.is-mark .walsh__n { color: var(--color-ink); font-weight: var(--weight-strong); }
.walsh__row.is-mark path { stroke-width: 2.5; }
@keyframes settle { from { opacity: 0; } }

.statement { padding-block: var(--space-md) var(--space-xl); }
.statement h1 {
  font-size: var(--text-display);
  line-height: 1;
  letter-spacing: -0.045em;
  white-space: nowrap;
  margin-inline-start: -0.04em;
}
.statement p {
  margin-block-start: var(--space-lg);
  font-size: var(--text-md);
  line-height: 1.4;
  max-width: 32ch;
}