/*
 * Twinkle Lights: long-form pages (support, privacy, impressum). Loaded after base.css.
 */

.prose { max-width: 44rem; padding-bottom: 3rem; }
.prose h1 { font-size: clamp(2.2rem, 5.5vw, 3.2rem); }
.prose h2 { margin-top: 2.5rem; font-size: clamp(1.4rem, 3vw, 1.8rem); }
.prose h3 { margin-top: 1.75rem; }
.prose p, .prose li { max-width: var(--measure); }
.prose li { margin-bottom: 0.35em; }
.prose address { font-style: normal; margin-bottom: 1em; }
.prose code { overflow-wrap: anywhere; }

/* The page title ends in a short row of five still bulbs, one per classic color. */
.page-title { position: relative; padding-bottom: 1.5rem; margin-bottom: 1.75rem; }
.page-title::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 9.5rem; height: 0.7rem;
    background:
        radial-gradient(circle at 0.35rem 50%, var(--bulb-red) 0.3rem, transparent 0.32rem),
        radial-gradient(circle at 2.35rem 50%, var(--bulb-green) 0.3rem, transparent 0.32rem),
        radial-gradient(circle at 4.35rem 50%, var(--bulb-blue) 0.3rem, transparent 0.32rem),
        radial-gradient(circle at 6.35rem 50%, var(--bulb-yellow) 0.3rem, transparent 0.32rem),
        radial-gradient(circle at 8.35rem 50%, var(--bulb-orange) 0.3rem, transparent 0.32rem),
        linear-gradient(var(--rule), var(--rule)) 0 50% / 100% 1px no-repeat;
}
.page-title p { margin-bottom: 0; }

.updated { color: var(--frost); font-size: 0.92rem; }

.faq details { border-bottom: 1px solid var(--rule); padding: 0.9rem 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; }
.faq summary:hover { color: var(--gold); }
.faq details[open] summary { margin-bottom: 0.6rem; }
.faq details > :not(summary) { margin-left: 1.1rem; }