.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 24px; }
@media (min-width: 900px) { .container { padding-inline: 48px; } }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bgr-ink);
}
.eyebrow--light { color: var(--bgr-cream); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 900; line-height: 0.92; letter-spacing: -0.02em; text-transform: uppercase; }
h1 { font-size: clamp(48px, 9vw, 140px); }
h2 { font-size: clamp(36px, 6vw, 88px); }
h3 { font-size: clamp(24px, 3vw, 40px); }

p.lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.35; max-width: 60ch; }

.outline-numeral {
  font-family: var(--font-display);
  font-size: clamp(120px, 22vw, 320px);
  -webkit-text-stroke: 2px var(--bgr-ink);
  color: transparent;
  line-height: 0.8;
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
}
.outline-numeral--light { -webkit-text-stroke-color: var(--bgr-cream); }

.section { padding-block: clamp(60px, 8vw, 140px); position: relative; }
.section--teal { background: var(--bgr-teal-deep); color: var(--bgr-cream); }
.section--ink { background: var(--bgr-ink); color: var(--bgr-cream); }
.section--cream { background: var(--bgr-cream); }

.grid { display: grid; gap: 24px; }
.grid-12 { grid-template-columns: repeat(12, 1fr); gap: 16px; }

.divider { height: 2px; background: var(--bgr-ink); width: 100%; }

.reveal { opacity: 0; transform: translateY(24px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); }

.clip-wipe { display: inline-block; overflow: hidden; }
.clip-wipe > span { display: inline-block; transform: translateY(110%); }
.clip-wipe.in > span { transform: translateY(0); transition: transform 1s var(--ease); }

.vertical-rail {
  position: fixed;
  right: -2px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: right center;
  z-index: 50;
  display: none;
}
@media (min-width: 1200px) { .vertical-rail { display: block; } }

.vertical-rail a {
  display: inline-block;
  padding: 12px 24px;
  background: var(--bgr-orange);
  color: var(--bgr-ink);
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: var(--border);
  font-size: 12px;
}
.vertical-rail a:hover { background: var(--bgr-orange-hot); }