:root {
  --bg-0: oklch(14% 0.028 264);
  --bg-1: oklch(19% 0.032 264);
  --line: oklch(45% 0.03 264 / 28%);
  --text-0: oklch(96% 0.012 95);
  --text-1: oklch(78% 0.02 264);
  --text-2: oklch(58% 0.02 264);
  --accent: oklch(78% 0.1 280);
  --gold: oklch(80% 0.11 75);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text-0);
  font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  line-height: 1.65;
}
a { color: var(--gold); text-decoration: none; border-bottom: 1px solid oklch(80% 0.11 75 / 35%); }
a:hover { color: var(--accent); border-color: oklch(78% 0.1 280 / 45%); }

.stars {
  position: fixed; inset: 0; pointer-events: none; opacity: .5; z-index: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 8% 12%, oklch(100% 0 0/70%), transparent 60%),
    radial-gradient(1px 1px at 22% 30%, oklch(100% 0 0/50%), transparent 60%),
    radial-gradient(1.4px 1.4px at 65% 8%, oklch(100% 0 0/60%), transparent 60%),
    radial-gradient(1px 1px at 80% 22%, oklch(100% 0 0/45%), transparent 60%),
    radial-gradient(1.2px 1.2px at 92% 55%, oklch(100% 0 0/55%), transparent 60%),
    radial-gradient(1px 1px at 12% 70%, oklch(100% 0 0/40%), transparent 60%),
    radial-gradient(1.3px 1.3px at 40% 88%, oklch(100% 0 0/50%), transparent 60%);
  background-repeat: no-repeat;
}
.glow {
  position: fixed; top: -220px; left: 50%; transform: translateX(-50%);
  width: 640px; height: 640px; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, oklch(35% 0.06 280 / 30%), transparent 70%);
}

main {
  position: relative; z-index: 1;
  max-width: 680px; margin: 0 auto; padding: 72px 24px 96px;
}
header { text-align: center; margin-bottom: 40px; }
.mark { font-size: 26px; color: var(--gold); }
.brand {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  font-size: 22px; margin-top: 8px; color: var(--text-0);
}
.kicker {
  margin-top: 20px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-2); font-weight: 700;
}

nav.toc {
  display: flex; gap: 10px; justify-content: center; margin: 28px 0 8px;
  flex-wrap: wrap;
}
nav.toc a {
  border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 600;
  color: var(--text-1);
}
nav.toc a:hover { color: var(--text-0); border-color: oklch(78% 0.1 280 / 45%); }
nav.toc a.current { color: var(--text-0); border-color: var(--accent); }

section { margin-top: 56px; scroll-margin-top: 32px; }
h1 {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: 34px; text-wrap: balance; margin: 0 0 8px;
}
.updated { color: var(--text-2); font-size: 13px; margin-bottom: 32px; }
h2 {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-style: italic;
  font-size: 22px; color: var(--text-0); margin: 40px 0 12px;
}
p { color: var(--text-1); font-size: 15.5px; max-width: 62ch; }
ul { margin: 0; padding-left: 1.2em; color: var(--text-1); font-size: 15.5px; }
li { margin-bottom: 8px; }
li::marker { color: var(--gold); }

.card {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px 22px; margin-top: 20px;
}
.card p { margin: 0; color: var(--text-1); }
.card strong { color: var(--text-0); }

.divider { border: none; border-top: 1px solid var(--line); margin: 56px 0 0; }

.contact { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
.contact a {
  border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px;
  font-size: 14px; font-weight: 600; color: var(--text-0);
}
.contact a:hover { border-color: oklch(78% 0.1 280 / 45%); }

footer { margin-top: 64px; text-align: center; color: var(--text-2); font-size: 12.5px; }

@media (max-width: 480px) {
  main { padding: 56px 18px 72px; }
  h1 { font-size: 28px; }
}