/* Duit website: the plain pages (about, terms, privacy). Loaded after site.css, which gives the tokens, the
   header and the footer: a mono reading column on cream, "## " section heads in the accent, "-" list marks. No inline styles or scripts, so the pages run under the site's strict CSP. */

.doc { width: 100%; max-width: calc(68ch + 2 * var(--gutter)); margin-inline: auto; padding: clamp(48px, 8vh, 96px) var(--gutter) clamp(64px, 10vh, 120px); }
.doc h1 { font-family: var(--mono); font-weight: 700; font-size: clamp(30px, 4.6vw, 48px); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.doc .meta { margin: 14px 0 2.4em; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.doc h2 { margin: 2.4em 0 .6em; font-family: var(--mono); font-size: 14px; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; }
.doc h2::before { content: "## "; content: "## " / ""; color: var(--accent); }
.doc p, .doc ul { margin: 0 0 1em; max-width: 68ch; }
.doc ul { padding: 0; list-style: none; }
.doc li { position: relative; margin: .45em 0; padding-left: 2.2ch; }
.doc li::before { content: "-"; content: "-" / ""; position: absolute; left: 0; font-family: var(--mono); color: var(--accent); }
.doc a { text-decoration-color: currentColor; }
.doc a:hover { color: var(--accent); }

/* About: a short founder page */
.about .eyebrow { margin-bottom: 16px; }
.about .lede { margin: 18px 0 1.6em; }
.about .story p { font-size: clamp(16px, .3vw + 15px, 18px); line-height: 1.7; }
.about .facts { margin: 2.2em 0 0; border-top: 1px solid var(--faint); }
.about .facts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--faint); }
.about .facts li::before { content: none; }
.about .facts .what { font-weight: 600; }
.about .facts .where { grid-column: 1; color: var(--soft); font-size: 15px; }
.about .facts .when { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--soft); white-space: nowrap; }
.about .links { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 2.4em; }
.about .links a { text-decoration: none; }
@media (max-width: 560px) {
  .about .facts li { grid-template-columns: minmax(0, 1fr); }
  .about .facts .when { grid-column: 1; grid-row: auto; }
}