/*
 * Shared by index.html, support.html and privacy-policy.html — 062.
 *
 * A linked file rather than three inlined copies, on purpose: 060 duplicated the palette
 * by hand into one self-contained page because there was only one page. With three, the
 * same reasoning points the other way — three copies of the same tokens is exactly the
 * kind of drift 060 was written to stop, just applied to CSS instead of policy text.
 * Linking a plain stylesheet is still zero build step; there's nothing here to compile.
 *
 * The palette itself is still lifted from src/theme/tokens.css by hand rather than
 * imported — this site is deployed on its own, with no access to the app's source tree.
 */

:root {
  --paper-raised: #fdfbf7;
  --paper: #f8f4ec;
  --paper-line: #e4dcce;
  --ink: #1c1917;
  --ink-muted: #5f584e;
  --ink-faint: #857d70;
  --clay: #a85d42;
  --clay-tint: #f3e3da;
  --fern: #4f7355;
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', sans-serif;
  --font-serif: ui-serif, 'New York', 'Iowan Old Style', Georgia, serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper-raised: #232019;
    --paper: #1a1714;
    --paper-line: #332e27;
    --ink: #f2ede3;
    --ink-muted: #aba294;
    --ink-faint: #7d7568;
    --clay: #d89272;
    --clay-tint: #2e241e;
    --fern: #8fb595;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 32px 20px 64px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: 34rem;
  margin: 0 auto;
}

main.wide {
  max-width: 44rem;
}

a {
  color: var(--clay);
  text-decoration-color: var(--clay-tint);
  text-underline-offset: 2px;
}

p,
ul {
  margin: 0 0 12px;
}

ul {
  padding-left: 1.15em;
}

li {
  margin-bottom: 6px;
}

.lede {
  color: var(--ink-muted);
}

.rule {
  border: 0;
  border-top: 1px solid var(--paper-line);
  margin: 48px 0 0;
}

/* ─── Site header — the mark, on every page ────────────────────────────── */

.site-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 40px;
  text-decoration: none;
}

.site-header svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.site-header span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ─── Typography shared by the content pages ───────────────────────────── */

.eyebrow {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 4px;
}

h1 {
  font-family: var(--font-serif);
  font-size: 34px;
  line-height: 1.15;
  font-weight: 600;
  margin: 0 0 8px;
}

h2 {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  margin: 48px 0 8px;
}

h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 28px 0 4px;
}

.card {
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-radius: 14px;
  padding: 16px 20px;
  margin: 16px 0 24px;
}

.card p:last-child {
  margin-bottom: 0;
}

.mail {
  font-size: 24px;
  font-family: var(--font-serif);
  word-break: break-word;
}

.stamp {
  font-size: 13px;
  color: var(--ink-faint);
  margin: 0 0 24px;
}

.site-footer {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--paper-line);
  font-size: 13px;
  color: var(--ink-faint);
}

.site-footer a {
  color: var(--ink-muted);
}

.site-footer nav {
  margin-top: 6px;
}

.site-footer nav a {
  margin-right: 16px;
}