/* About-only styles, loaded after shared.css. */
/* The existing br chooses the two lines; scale the text to fit on phones. */
.about-intro h1 { font-size: clamp(26px, 5.5vw, 100px); letter-spacing: -.05em; }
.about-intro h1 span { white-space: nowrap; }
.about-intro .intro { max-width: 680px; }
.about-intro + .about-section, .about-section + .about-section { margin-top: 52px; }
.rules-cards { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 650px) {
    .rules-cards { grid-template-columns: 1fr; }
}
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq summary:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 5px; }
.faq details[open] summary { margin-bottom: 12px; }
.faq p { margin: 0; }
.build-link-setup { color: darkred; font-weight: 600; }
.build-link-setup strong { font-weight: 700; }
.build-link-setup .build-link-fine { font-weight: 900; font-size: 1.25em; }
/* clamp() scales the oversized link between phone and desktop sizes. */
.unmissable-build-link {
    display: block;
    margin-top: 24px;
    padding: clamp(16px, 3vw, 40px);
    background: var(--brand-accent);
    color: var(--on-brand);
    border: 4px solid var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
    font-size: clamp(30px, 6vw, 88px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.04em;
    text-decoration: underline;
    text-underline-offset: .12em;
    overflow-wrap: anywhere;
}
.unmissable-build-link:hover { background: var(--ink); color: var(--on-brand); }
.project-links { display: flex; flex-wrap: wrap; gap: 16px 32px; }
.social-status { margin-top: 28px; }
.social-status > div { padding: 16px 0; border-top: 1px solid var(--line); }
/* Social descriptions use regular body text rather than spending statistics. */
.social-status dd { margin: 6px 0 0; font-size: 14px; font-weight: 400; letter-spacing: normal; color: var(--muted); }