/* Reading pages (2026-09-28): About, Privacy, Personvern, Terms, Credits, Data og kreditering and
   Support, on the homepage's own paper (--bg #f6eeea) under its top bar and over its footer.
   One reading column of about 68 characters, the site's type scale (base.css) and its colours
   (chrome.css). System font stack only, from base.css. */
.doc { padding-block: clamp(48px, 7vw, 96px) clamp(72px, 9vw, 128px); }
.doc .read { width: min(68ch, 100% - 2 * var(--gutter)); margin-inline: auto; overflow-wrap: break-word; }

/* the page cascades in (2026-09-29, web motion law): heading, lead and paragraphs rise in one after
   the other, --stagger apart, starting --page-in-start after the page opens, so the old page is half
   gone when the first line arrives. The ninth block and everything after it come with the eighth.
   CSS animations with a backwards fill: if the CSS or the browser fails, the text is just there. */
.doc .read > * { animation: rise-in var(--dur-enter) var(--ease-out) backwards; animation-delay: calc(var(--page-in-start) + var(--i, 8) * var(--stagger)); }
.doc .read > :nth-child(1) { --i: 0; } .doc .read > :nth-child(2) { --i: 1; } .doc .read > :nth-child(3) { --i: 2; }
.doc .read > :nth-child(4) { --i: 3; } .doc .read > :nth-child(5) { --i: 4; } .doc .read > :nth-child(6) { --i: 5; }
.doc .read > :nth-child(7) { --i: 6; } .doc .read > :nth-child(8) { --i: 7; }

/* headings: h1 on the t-h2 step, h2 on the t-h3 step, h3 one step under */
.doc h1 { font-size: clamp(34px, 4.4vw, 48px); line-height: 1.08; font-weight: 600; letter-spacing: -0.003em; margin: 0 0 16px; text-wrap: balance; }
.doc h2 { font-size: clamp(22px, 2vw, 28px); line-height: 1.14; font-weight: 600; letter-spacing: 0.007em; margin: 2.1em 0 12px; text-wrap: balance; }
.doc h3 { font-size: 19px; line-height: 1.26; font-weight: 600; letter-spacing: 0; margin: 1.6em 0 8px; }
.doc h1 + p, .doc h2 + p, .doc h3 + p { margin-top: 0; }

/* text: ink for the body, --soft for the dated line under the title */
.doc p, .doc li { font-size: 17px; line-height: 1.53; color: var(--ink); text-wrap: pretty; }
.doc p { margin: 0 0 1em; }
.doc p.intro { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.33; letter-spacing: 0.009em; color: var(--soft); margin-bottom: 1.1em; }
.doc p.muted { font-size: 14px; line-height: 1.43; color: var(--soft); margin: 0 0 clamp(28px, 4vw, 40px); }
.doc b, .doc strong { font-weight: 600; }

/* lists: the site's soft marker, a little air between items */
.doc ul { margin: 0 0 1.2em; padding-left: 1.3em; }
.doc li { margin: 0 0 0.45em; padding-left: 0.2em; }
.doc li::marker { color: var(--soft); }

/* links in running text: ink with an underline in the rose accent, so they read as links on paper */
.doc .read a { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.doc .read a { transition: text-decoration-color var(--dur-fast) var(--ease-in-out), text-decoration-thickness var(--dur-fast) var(--ease-in-out), outline-color var(--dur-fast) var(--ease-in-out); }
.doc .read a:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

/* the skip link, only on keyboard focus */
.skip-link { position: fixed; top: 10px; left: var(--gutter); z-index: 30; padding: 10px 14px; border-radius: 980px; background: var(--ink); color: var(--bg); font-size: 14px; transform: translateY(-200%); transition: transform var(--dur-fast) var(--ease-in-out); }
.skip-link:focus { transform: none; text-decoration: none; }
main:focus { outline: none; }