/* The main SYW page (was version F, owner 2026-09-24: "making F my current go to"). Each lettered version overlays its own variant.css. A's layout from the top, a new hero graphic and looser type, E's round stats,
   C's two parties, the decks, then A's How It Plays, Four Steps, press pool (no board peek) and signup. */
.beat { grid-template-columns: 1fr; }
.beat img { max-width: none; }

/* Looser type in the hero. */
.hero h1 { line-height: 1.22; letter-spacing: 0.015em; margin-bottom: 0.5em; }
.hero-copy p { margin-bottom: 1.1em; }
.hero .lede, .hero .tagline { line-height: 1.7; }

/* Round stats, from E. */
.stats ul { gap: 18px; }
.stats li { background: var(--card); color: var(--ink); border-radius: 50%; aspect-ratio: 1; display: grid; place-content: center; border: 6px solid var(--red); box-shadow: 0 0 0 4px var(--navy); max-width: 170px; margin: 0 auto; width: 100%; }
.stat { color: var(--red); }

/* Both parties, from C, framed like A's art. */
.parties { padding: 32px 0; text-align: center; }
.pair { display: grid; gap: 22px; margin-bottom: 14px; }
.pair figure { margin: 0; }
.pair img { width: 100%; aspect-ratio: 1200 / 828; object-fit: cover; border: 6px solid var(--gold); outline: 2px solid var(--navy); outline-offset: -4px; }
/* Trim the donkey from the right so its face is never cut. */
.pair figure:last-child img { object-position: left center; }
.pair figcaption { font-family: var(--title); font-size: 1.2rem; margin-top: 10px; }
.pair figure:first-child figcaption { color: var(--red); }
.pair figure:last-child figcaption { color: var(--navy); }

/* The press pool runs full width: no board peek beside it. */
.faq-cols { grid-template-columns: 1fr; }

@media (min-width: 760px) { .pair { grid-template-columns: 1fr 1fr; } .beat { grid-template-columns: 1fr; } .faq-cols { grid-template-columns: 3fr 2fr; align-items: start; } .faq-art { padding-top: 32px; } }
/* FAQ picture column (owner, 2026-09-25): the candidate facing the crowd, beside the questions. */
.faq-art { margin: 0; }
.faq-art img { width: 100%; border: 3px double var(--navy); }
.faq-art figcaption { margin-top: 6px; font: italic 0.9rem var(--body); text-align: center; color: var(--navy); }