/* public/css/about.css — /about, the story behind Friendrot (views/public/about.hbs). Only this page's LAYOUT: its
   type, cards, questions and sign-up cards are the landing's own classes (public/css/landingRooms.css, linked before
   this file: .lr-h2, .lr-lede, .lr-facts, .lr-qa, .lr-ways, .lr-nav), so the two pages are one hand. A reading page:
   one column, and it scrolls. Colours are global.css's tokens, so the dark theme needs nothing here. */

.ab { max-width: 760px; margin: 0 auto; padding: clamp(20px, 5vw, 48px) 16px 56px; }
.ab-head { text-align: center; }
.ab-head__mark { display: block; width: clamp(120px, 26vw, 190px); height: auto; margin: 0 auto 10px; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .14)); }
.ab-head__title { font-size: clamp(30px, 6vw, 52px); }
.ab-sec { margin-top: clamp(40px, 7vw, 68px); }

/* The story: his words, set to be read. */
.ab-story p { margin: 16px 0 0; font-size: clamp(17px, 2.2vw, 19.5px); line-height: 1.6; color: var(--app-fg); }
.ab-story strong { font-weight: 800; }

/* The promise: the landing's fact list, two a row where there is room. */
.ab-promise { gap: 14px; }
.ab-promise li { font-size: 16px; }
@media (min-width: 700px) { .ab-promise { grid-template-columns: 1fr 1fr; gap: 18px 28px; } }

/* Every game by name: a pill each, in the game's own colour (--gcol, from its registry entry). */
.ab-pills { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ab-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; font-size: 14px; font-weight: 700; line-height: 1.2;
  color: var(--app-fg); background: color-mix(in srgb, var(--gcol) 14%, var(--card-bg)); border: 1px solid color-mix(in srgb, var(--gcol) 45%, var(--border)); }
.ab-pill i { font-size: 12px; color: var(--gcol); }
.ab-pills__t { margin: 22px 0 0; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--app-muted); }

/* Questions: the landing's own (.lr-qa), without icons. */
.ab .lr-qa__it p { margin-left: 0; }

/* Both ways in, then the way back to the landing. */
.ab-ways { text-align: center; }
.ab-ways .lr-ways { margin: 20px auto 0; }
.ab-ways > .lr-start__fine { margin: 14px auto 0; }
.ab-back { margin: 26px 0 0; }