/* ---------------------------------------------------------------
   Design tokens. Change a value here and it applies site-wide.
   --------------------------------------------------------------- */
:root {
  --bg:      #fbfbf9;   /* page background            */
  --fg:      #1a1a1a;   /* main text                  */
  --muted:   #5c5c5c;   /* secondary text             */
  --accent:  #6b4de6;   /* links                      */
  --rule:    #e3e3de;   /* hairlines                  */

  --measure: 34rem;     /* max line length            */
  --gap:     1.25rem;   /* vertical rhythm            */
  --pad:     1.5rem;    /* side gutter                */

  --font: ui-serif, Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:     #141414;
    --fg:     #ececec;
    --muted:  #a0a0a0;
    --accent: #a892ff;
    --rule:   #2c2c2c;
  }
}

/* --------------------------------------------------------------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: clamp(3rem, 12vh, 7rem) var(--pad);
  background: var(--bg);
  color: var(--fg);
  font: 1.05rem/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
}

main, footer { max-width: var(--measure); margin-inline: auto; }

h1 {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 var(--gap);
}

h2 {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: calc(var(--gap) * 2.2) 0 var(--gap);
}

p { margin: 0 0 var(--gap); }

.lede { font-size: 1.15rem; color: var(--muted); }

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  transition: border-color 0.15s ease;
}
a:hover { border-bottom-color: var(--accent); }

.links { list-style: none; margin: 0; padding: 0; }
.links li { margin-bottom: 0.4rem; }

footer {
  margin-top: calc(var(--gap) * 3);
  padding-top: var(--gap);
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}