:root {
  color-scheme: dark;

  --base: #252E2B;
  --chrome: #292C28;
  --panel: #303A34;
  --text: #E5E9DE;
  --text-muted: #B0C4B8;
  --pink: #D59AB1;
  --font: "Universalis ADF Std", sans-serif;
  --column: 42rem;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font: 1.05rem/1.6 var(--font);
  color: var(--text);
  background: var(--base);
}

main { flex: 1; }

header, main, footer {
  padding: 1.5rem max(1rem, (100% - var(--column)) / 2);
}

header, footer {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  background: var(--chrome);
}

header { justify-content: space-between; }
header nav { display: flex; gap: 1rem; }
.home { font-weight: bold; text-decoration: none; }

footer { font-size: 0.9rem; }

a { color: var(--pink); }

h1, h2 { line-height: 1.25; }

.hero { margin: 2rem 0 3rem; }
.hero h1 { font-size: 3rem; margin: 0; }
.handle { margin: 0.25rem 0 1rem; }
.handle a { color: var(--text-muted); text-decoration: none; }
.links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }

.toot {
  margin-bottom: 1rem;
  padding: 0.25rem 1.25rem 0.75rem;
  border-radius: 8px;
  background: var(--panel);
}
.toot img { max-width: 100%; }
.permalink { font-size: 0.85rem; }

time, .muted, footer { color: var(--text-muted); }
time, .muted { font-size: 0.9rem; }

ul.pages, ul.fedi { list-style: none; padding: 0; }
ul.pages li, ul.fedi li { margin-bottom: 0.75rem; }

pre {
  padding: 0.75rem;
  overflow-x: auto;
  border-radius: 4px;
  background: var(--panel);
}

code { font-family: ui-monospace, monospace; font-size: 0.92em; }