/* Tokens and type scale from docs/DESIGN.md (see "Policy site"). Text sits directly on the canvas. */
@font-face { font-family: "Inter"; font-weight: 300; font-display: swap; src: url("/fonts/Inter_300Light.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/fonts/Inter_500Medium.ttf") format("truetype"); }
@font-face { font-family: "Figtree"; font-weight: 500; font-display: swap; src: url("/fonts/Figtree_500Medium.ttf") format("truetype"); }

:root {
  color-scheme: dark;
  --color-abyss: #0e111b;
  --color-inkline: #151e32;
  --color-quartz: #ffffff;
  --color-mist: #c7c9d1;
  --color-ash: #abaebb;
  --color-periwinkle: #98a4f7;
  --glow-aurora-purple: rgba(98, 95, 255, 0.38);
  --font-ui: "Inter", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --font-display: "Figtree", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--color-abyss); }

body {
  margin: 0;
  color: var(--color-mist);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
}

/* The canvas stays put while the text scrolls. A fixed layer instead of
   background-attachment: fixed, which iOS Safari ignores. The purple glow and
   the pink smoothstep falloff match src/components/AuroraBackground.tsx; on the
   site the pink sits at the lower right of the screen. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(79% 49% at 39% -21%, var(--glow-aurora-purple), transparent),
    radial-gradient(
      70% 34% at 92% 96%,
      rgba(255, 125, 218, 0.35) 0%,
      rgba(255, 125, 218, 0.315) 20%,
      rgba(255, 125, 218, 0.2275) 40%,
      rgba(255, 125, 218, 0.1225) 60%,
      rgba(255, 125, 218, 0.035) 80%,
      rgba(255, 125, 218, 0) 100%
    ),
    var(--color-abyss);
}

main { max-width: 640px; margin: 0 auto; padding: 48px 20px 64px; }

p, ul { margin: 0 0 14px; }
ul { padding-left: 1.4em; }
li + li { margin-top: 8px; }

.eyebrow {
  margin: 0 0 4px;
  color: var(--color-ash);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 8px;
  color: var(--color-quartz);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

h2 {
  margin: 32px 0 10px;
  padding-top: 24px;
  border-top: 1px solid var(--color-inkline);
  color: var(--color-quartz);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

h3 { margin: 20px 0 4px; color: var(--color-quartz); font-size: 14px; font-weight: 500; line-height: 1.4; }

a { color: var(--color-periwinkle); overflow-wrap: anywhere; }
strong { color: var(--color-quartz); font-weight: 500; }
.meta { margin-bottom: 24px; color: var(--color-ash); font-size: 12px; }

.links { margin: 24px 0 0; padding: 0; list-style: none; }
.links li { margin: 0; border-top: 1px solid var(--color-inkline); }
.links li:last-child { border-bottom: 1px solid var(--color-inkline); }
.links a { display: block; padding: 14px 0; font-size: 14px; text-decoration: none; }

footer { margin-top: 40px; color: var(--color-ash); font-size: 12px; }