/* Lane K6: /Privacy and /Terms. Reading pages on the site's own materials (ages.css, places.css): a column a sentence can be read in, the draft's notice first, and nothing that moves. */
.legal { max-width: 42em; }
.legal-draft { margin: 0 0 30px; padding: 16px 20px; border: 1px solid rgba(255, 211, 77, .45); border-left-width: 4px; background: rgba(255, 211, 77, .07); color: var(--bone); font-size: 1.1rem; line-height: 1.5; }
.legal-draft strong { color: var(--gold); font-weight: 500; }
.legal-when { margin: -18px 0 30px; color: var(--ash); font-size: 1rem; }
.legal h2 { margin: 38px 0 10px; font-size: clamp(1.5rem, 2.4vw, 1.95rem); line-height: 1.15; }
.legal h3 { margin: 22px 0 6px; font: 400 1.25rem/1.25 var(--display); color: var(--bone); }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 16px; padding-left: 1.25em; list-style: disc; }
.legal li { margin: 0 0 8px; }
.legal li::marker { color: var(--gold); }
.legal strong { font-weight: 500; color: var(--bone); }
.legal a { color: var(--bone); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal a:hover { color: var(--gold); }
.legal-short { margin: 0 0 6px; padding: 18px 20px 6px; border: 1px solid var(--rule); background: rgba(236, 229, 213, .03); }
.legal-short ul { margin-bottom: 10px; }
.legal-short h2 { margin-top: 0; }

/* 44 px to press, on a phone; a link inside a sentence takes the height back out of its line */
@media (max-width: 760px), (pointer: coarse) {
    .legal a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
}

@media (max-width: 760px) {
    .legal-draft { padding: 14px 16px; font-size: 1.05rem; }
    .legal h2 { margin-top: 32px; }
}