/*
  Four rules and a colour scheme. Kept in its own file rather than in a
  <style> block so that sites/apex.caddy's CSP can stay `default-src
  'self'` with no 'unsafe-inline' anywhere.
*/

:root {
  color-scheme: light dark;
  --ink: #1a1a1a;
  --paper: #fdfdfc;
  --muted: #5c5c57;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8e8e4;
    --paper: #161614;
    --muted: #9a9a93;
  }
}

body {
  margin: 0;
  padding: 16px;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}

main {
  max-width: 34rem;
  margin: 12vh auto;
}

h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 2rem;
}

.sites {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sites li {
  margin-bottom: 1.25rem;
}

.sites a {
  color: inherit;
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.sites span {
  display: block;
  color: var(--muted);
}