/* Shared look for the home and pieces pages. Articles carry their own styles. */
:root { --bg: #f7f6f2; --fg: #1c1b19; --muted: #77746c; --rule: #dedbd2; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #121211; --fg: #e9e7e1; --muted: #8d8a82; --rule: #2a2927; }
}
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}
a { color: inherit; text-underline-offset: 0.2em; }
a:hover { color: var(--muted); }

/* Home */
.home { min-height: 100%; display: grid; place-items: center; text-align: center; }
.home h1 { margin: 0; font-size: clamp(2rem, 7vw, 4.5rem); font-weight: 400; letter-spacing: 0.04em; }
.home nav { margin-top: 1.25rem; font-size: 0.95rem; }
.home nav a { color: var(--muted); text-decoration: none; }
.home nav a:hover { color: var(--fg); }

/* Pieces */
.pieces { max-width: 640px; margin: 0 auto; padding: 64px 16px; }
.pieces header a { color: var(--muted); text-decoration: none; }
.pieces h1 { font-size: 1.5rem; font-weight: 400; margin: 1.5rem 0 3rem; }
.pieces h2 { font-size: 0.8rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 2.5rem 0 0.75rem; }
.pieces ul { list-style: none; margin: 0; padding: 0; }
.pieces li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--rule); }
.pieces li:last-child { border-bottom: 1px solid var(--rule); }
.pieces .meta, .pieces .empty { color: var(--muted); }