/* ---------- HOW TO PLAY PAGE ---------- */
.page-hero { padding-block: clamp(56px, 8vw, 112px) clamp(48px, 6vw, 80px); text-align: center; }
.page-hero h1 { max-width: 12ch; margin-inline: auto; }
.page-hero p { margin: var(--s-4) auto 0; font-size: var(--t-lg); color: var(--stout-70); max-width: 40ch; }
.rules { max-width: 760px; margin-inline: auto; counter-reset: rule; }
.rules li { counter-increment: rule; display: grid; grid-template-columns: 72px 1fr; align-items: baseline; gap: var(--s-2); padding-block: var(--s-4); border-top: 1px solid var(--stout-12); }
.rules li:first-child { border-top: 2px solid var(--stout); }
.rules li::before { content: "0" counter(rule); font-family: var(--display); font-style: italic; font-size: var(--t-xl); color: var(--copper); }
.rules h3 { font-size: var(--t-xl); }
.rules p { margin-top: var(--s-1); color: var(--stout-70); }
.one-rule { text-align: center; }
.one-rule h2 { font-size: var(--t-3xl); line-height: 1.02; letter-spacing: -0.032em; max-width: 13ch; margin-inline: auto; }
.one-rule p { margin: var(--s-4) auto 0; font-size: var(--t-lg); color: var(--foam-70); max-width: 44ch; }
.textlink { color: var(--copper); font-weight: 700; text-underline-offset: 4px; }
.textlink:hover { color: var(--stout); }
@media (max-width: 520px) { .rules li { grid-template-columns: 48px 1fr; } }