:root {
  --bg:      #f2e9ec;
  --fg:      #2a0e20;
  --muted:   #8a6d7d;
  --accent:  #a13aa8;
  --hoverbg: #ecd9ee;
  --border:  #ddc9d1;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #22081b;
    --fg:      #ecdee6;
    --muted:   #a98a9c;
    --accent:  #d86bdb;
    --hoverbg: #3a1c38;
    --border:  #3a2436;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg); color: var(--fg);
  font-family: sans-serif; line-height: 1.55;
  text-align: center;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
:not(p) { max-width: 42em; margin: 0 auto; }
.wrap { padding: 3rem 1.25rem; width: 100%; }

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { background: var(--hoverbg); border-radius: 0.2em; }

h1, h2 { font-weight: normal; color: var(--accent); }
h1 { font-size: 1.6em; margin: 0 0 0.5em; }
h2 { font-size: 1.15em; margin: 2em 0 0.6em; }



#intro p { max-width: 32em; margin-left: auto; margin-right: auto; text-wrap: balance; }
#intro blockquote { border-left: 2px solid var(--accent); margin: 1em auto; padding: 0.4em 1em; text-align: left; max-width: 32em; color: var(--muted); font-style: italic; }

/* ── badges ───────────────────────────────────────────────────────────────── */
.badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, 88px);
  justify-content: center;
  gap: 0;
  margin: 1.5em auto 0;
  max-width: 36em;
}
.badges a { display: block; border-bottom: none; line-height: 0; }
.badges img { width: 88px; height: 31px; image-rendering: pixelated; display: block; }

/* ── blog preview list ───────────────────────────────────────────────────── */
.post-preview { margin: 1.6em auto; max-width: 32em; text-align: left; }
.post-preview h2 { margin: 0 0 0.2em; text-align: left; }
.post-preview .post-date { color: var(--muted); font-size: 0.8em; margin: 0 0 0.4em; }
.post-preview p { max-width: none; margin-left: 0; margin-right: 0; }