/* legal pages: same tokens as site.css. Dark by default (like the site), light and Nagai when the visitor chose them. No motion. */
html, body { background: var(--black); }
body { transition: none; color: var(--ink); }
.legal.white, .legal.light { background: transparent; color: var(--ink); }
.legal .eyebrow { color: var(--dim); }
.legal .block p, .legal .block li { color: rgba(245,245,247,.86); }
.legal { padding-block: 96px 120px; }
.legal .wrap { max-width: 760px; }
.legal h1 { margin-top: 12px; }
.legal .meta { margin-top: 16px; }
.legal .block { margin-top: 48px; }
.legal .block h2 { font-family: var(--mono); font-size: 13px; line-height: 20px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); font-weight: 500; margin-bottom: 12px; }
.legal .block p, .legal .block li { font-size: 17px; line-height: 25px; }
.legal .block p + p, .legal .block ul { margin-top: 12px; }
.legal .block ul { padding-left: 20px; }
.legal .block li + li { margin-top: 8px; }
.legal a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }   /* links are never colour alone (WCAG 1.4.1) */
.legal strong { font-weight: 600; }
@media (max-width: 900px) { .legal { padding-block: 56px 72px; } }

/* light theme: the reading page on white */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="light"] html, :root[data-theme="light"] body { background: var(--surface-light); }
:root[data-theme="light"] body, :root[data-theme="light"] .legal.white { color: var(--ink-light); }
:root[data-theme="light"] .legal .eyebrow, :root[data-theme="light"] .legal .block h2 { color: var(--muted-light); }
:root[data-theme="light"] .legal .block p, :root[data-theme="light"] .legal .block li { color: var(--ink-light); }
:root[data-theme="light"] .legal a { color: var(--accent-light); }
:root[data-theme="light"] .gn { background: rgba(255,255,255,.72); border-bottom-color: var(--hair-light); color: var(--ink-light); }

/* Nagai: on the sky */
:root[data-theme="nagai"] .legal, :root[data-theme="nagai"] .legal .block p, :root[data-theme="nagai"] .legal .block li { color: #1b2a4a; }
:root[data-theme="nagai"] .legal .eyebrow, :root[data-theme="nagai"] .legal .block h2 { color: #4f6a8a; }
:root[data-theme="nagai"] .legal a { color: #1b2a4a; text-decoration: underline; }
:root[data-theme="nagai"] body { min-height: 100svh; }