/* The terms and privacy pages, set to the design system in design-system.html.
   The deploy serves this folder as static files and never builds
   dist/site.css, so the tokens are repeated here. Values are from
   styles/theme.css; change them there first. */
:root {
  --paper: #ffffff; --ink: #0a0a0a; --ink-2: #4a4a4a; --ink-3: #6e6e6e;
  --rule: #e4e4e4; --ink-a32: rgba(10, 10, 10, 0.32);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #0b0b0b; --ink: #fafafa; --ink-2: #b4b4b4; --ink-3: #8a8a8a;
    --rule: #262626; --ink-a32: rgba(250, 250, 250, 0.36);
  }
}
:root {
  --font-display: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', Inter, system-ui, 'Segoe UI', sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-1: 120ms;
}

/* Base, as app.css sets it: the platform face for reading, ink on paper. */
html {
  background: var(--paper); color: var(--ink);
  font-family: var(--font-ui); font-size: 16px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body {
  margin: 0;
  font-size: 0.9375rem; line-height: 1.55; letter-spacing: -0.005em; /* body · 15 */
}
h1, h2, p { margin: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 5px; }
::selection { background: var(--ink); color: var(--paper); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

main { max-width: 880px; margin: 0 auto; padding: 56px 24px; }
@media (min-width: 768px) { main { padding: 56px 40px; } }

/* Header: the page name in display-2, the way back and the date in mono. */
header { display: grid; gap: 12px; padding-bottom: 40px; }
.home {
  justify-self: start;
  font-family: var(--font-display); font-size: 0.8125rem; line-height: 1.35; /* ui · 13 */
  color: var(--ink-3); text-decoration: none;
  transition: color var(--duration-1) var(--ease-out);
}
.home:hover { color: var(--ink); }
h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.05; letter-spacing: -0.024em; /* display-2 */
}
.meta {
  font-family: var(--font-display); font-size: 0.625rem; line-height: 1.3; letter-spacing: 0.01em; /* micro · 10 */
  color: var(--ink-3);
}
.lead { color: var(--ink-2); max-width: 68ch; }

/* Sections: a hairline, then the label in its own column, as design-system.html
   lays out its own sections. */
section { display: grid; gap: 24px; padding: 40px 0; border-top: 1px solid var(--rule); }
@media (min-width: 768px) { section { grid-template-columns: 180px 1fr; } }
h2 {
  font-size: 0.6875rem; line-height: 1.3; letter-spacing: 0.085em; font-weight: 600; /* label · 11/600 */
  color: var(--ink-2);
  padding-top: 0.25em; /* sits on the first body line's x-height */
}
section > div { display: grid; gap: 16px; max-width: 68ch; }
ul { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
em { font-style: italic; } /* italic is the emphasis move */
code {
  font-family: var(--font-display); font-size: 0.8125rem; /* mono · measurement only */
  color: var(--ink-2);
}
a {
  color: inherit; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 0.18em; text-decoration-color: var(--ink-a32);
  transition: text-decoration-color var(--duration-1) var(--ease-out);
}
a:hover { text-decoration-color: currentColor; }

footer {
  display: flex; gap: 12px; padding-top: 16px; border-top: 1px solid var(--rule);
  font-family: var(--font-display); font-size: 0.625rem; line-height: 1.3; letter-spacing: 0.01em; /* micro */
  color: var(--ink-3);
}
footer a { text-decoration: none; transition: color var(--duration-1) var(--ease-out); }
footer a:hover { color: var(--ink); }