/* ──────────────────────────────────────────────────────────────
   Personal page · typography only, no external requests, no JS
   ────────────────────────────────────────────────────────────── */

:root {
  --bg:    #fbfbfa;
  --ink:   #1d1f22;
  --muted: #6f747a;
  --line:  #c9ccd0;
  --focus: #2b4c7e;

  --serif: "Iowan Old Style", "Charter", "Sitka Text", Cambria, Georgia, serif;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:    #16181b;
    --ink:   #e9eaec;
    --muted: #9a9fa6;
    --line:  #4a4f56;
    --focus: #8fb0e0;

    color-scheme: dark;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.75rem/1.4 var(--serif);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--ink);
  color: var(--bg);
}

/* ── Text column ───────────────────────────────────────────── */

main {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding-inline: 2rem;
  padding-block: 28vh 4rem;
}

h1 {
  margin: 0;
  font: inherit;
}

p {
  max-width: 20em;
  margin: 0;
  color: var(--muted);
  overflow-wrap: break-word;
}

p + p {
  margin-top: 1.4em;  /* one line: keeps a vertical rhythm */
}

/* ── Links ─────────────────────────────────────────────────── */

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color 0.15s ease;
}

a:hover {
  text-decoration-color: currentColor;
}

a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Small screens, motion ─────────────────────────────────── */

@media (max-width: 600px) {
  body {
    font-size: 1.375rem;
  }

  main {
    padding-inline: 1.5rem;
    padding-block-start: 20vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  a {
    transition: none;
  }
}