:root { --bg: #fafafa; --fg: #111111; --muted: #5c5c5c; --accent: #2f6f4f; --rule: #dddddd; --font: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; --content-w: 38rem; --gutter: clamp(1.25rem, 4vw, 1.75rem); }
    @media (prefers-color-scheme: dark) { :root { --bg: #0a0a0a; --fg: #eeeeee; --muted: #9a9a9a; --accent: #4fae82; --rule: #262626; } }
    h1 { font-family: var(--font); font-weight: 700; margin: 0; }
    p { margin: 0 0 1em 0; }
    p:last-child { margin-bottom: 0; }
    .wrap { max-width: var(--content-w); margin: 0 auto; padding: 0 var(--gutter); }
    main { padding: 2rem 0 5rem; }
    h1.page-title { font-size: 1.3rem; margin: 0 0 2rem; }
    .post-list { list-style: none; padding: 0; margin: 0; }
    .post { padding: 1.25rem 0; }
    .post:first-child { padding-top: 0; }
    .post + .post { border-top: 1px solid var(--rule); }
    .post-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
    .post-title { font-weight: 700; font-size: 1rem; text-decoration: none; }
    .post-title:hover, .post-title:focus-visible { color: var(--accent); }
    .post-date { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
    .post-excerpt { margin: 0.4rem 0 0; font-size: 0.92rem; color: var(--muted); }
    .empty { color: var(--muted); }
    /* Motion. Opacity and transform only, so no reflow, and no extra
       request — this rides along in a stylesheet the page already has.
       Opt-in via prefers-reduced-motion, and cleared again for print. */

    @keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: no-preference) { body { transition: background-color 200ms ease, color 200ms ease; } }
    @media (prefers-reduced-motion: no-preference) { .post { animation: rise 350ms ease-out; } }
    @media (prefers-reduced-motion: no-preference) { .post:nth-of-type(2) { animation-delay: 55ms; } }
    @media (prefers-reduced-motion: no-preference) { .post:nth-of-type(3) { animation-delay: 110ms; } }
    @media (prefers-reduced-motion: no-preference) { .post:nth-of-type(4) { animation-delay: 165ms; } }
    @media (prefers-reduced-motion: no-preference) { .post:nth-of-type(5) { animation-delay: 220ms; } }