*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg: #f7f8fa;
    --surface: #ffffff;
    --text: #1b1f27;
    --text-soft: #454c59;
    --muted: #6b7280;
    --line: #e3e6ec;
    --accent: #0e9488;
    --accent-strong: #0b7e73;
    --max-width: 42rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0e1116;
        --surface: #151a22;
        --text: #e8edf5;
        --text-soft: #c4ccda;
        --muted: #8b96a8;
        --line: #262e3a;
        --accent: #2dd4bf;
        --accent-strong: #5eead4;
    }
}

html { -webkit-text-size-adjust: 100%; }

body {
    background: var(--bg);
    color: var(--text);
    font: 1.0625rem/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    text-rendering: optimizeLegibility;
}

a { color: var(--accent-strong); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover, a:focus { color: var(--accent); }

/* Keyboard users get the same visible ring on every theme: themes recolour
   --accent, they never have to restate this rule. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--accent);
    color: #04211d;
    padding: .6rem 1rem;
    border-radius: 0 0 .4rem 0;
    z-index: 10;
}
.skip-link:focus { left: 0; }

.site-header {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 2rem 1.25rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    border-bottom: 1px solid var(--line);
}
.site-brand a { color: var(--text); text-decoration: none; font-size: 1.375rem; font-weight: 700; }
.site-nav a { color: var(--muted); text-decoration: none; margin-left: 1rem; }
.site-nav a:first-child { margin-left: 0; }
.site-nav a:hover, .site-nav a:focus { color: var(--accent-strong); }

main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 2rem 1.25rem 3rem;
}

.site-description { color: var(--text-soft); margin-bottom: 2rem; }

.post-list { list-style: none; }
.post-summary {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--line);
}
.post-summary:first-child { padding-top: 0; }
.post-summary h2 { font-size: 1.25rem; line-height: 1.4; margin-bottom: .35rem; }
.post-summary h2 a { text-decoration: none; color: var(--text); }
.post-summary h2 a:hover, .post-summary h2 a:focus { color: var(--accent-strong); }

.post-meta { color: var(--muted); font-size: .875rem; margin-bottom: .5rem; }
.post-meta a { color: var(--muted); }
.post-meta a:hover, .post-meta a:focus { color: var(--accent-strong); }

.post-excerpt { color: var(--text-soft); }
.empty { color: var(--muted); }

article h1 { font-size: 1.75rem; line-height: 1.3; margin-bottom: .5rem; }

.post-body { margin-top: 1.5rem; }
.post-body p { margin: 0 0 1.1rem; }
.post-body a { word-break: break-word; }
.post-body img { max-width: 100%; height: auto; border-radius: .4rem; }
.post-body pre {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: .4rem;
    padding: .9rem;
}
.post-body blockquote {
    margin: 0 0 1.1rem;
    padding-left: 1rem;
    border-left: 3px solid var(--line);
    color: var(--text-soft);
}

.post-media {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.post-media-item { border-radius: .4rem; overflow: hidden; background: var(--surface); }
.post-media-item img,
.post-media-item video { display: block; width: 100%; height: auto; border-radius: .4rem; }
.post-media-item audio { width: 100%; }
.post-media-item figcaption {
    padding: .5rem .1rem 0;
    color: var(--muted);
    font-size: .8125rem;
}
.post-media-cw {
    margin-top: 1.5rem;
    border: 1px solid var(--line);
    border-radius: .4rem;
    padding: .75rem 1rem;
}
.post-media-cw summary { cursor: pointer; font-weight: 600; color: var(--text-soft); }
.post-media-cw .post-media { margin-top: 1rem; }

.post-replies { margin-top: 2.5rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.reply-list { padding-left: 1.5rem; }
.blog-reply { margin: 1rem 0; }
.blog-reply header { color: var(--muted); font-size: .9rem; }

.post-pager {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    font-size: .9375rem;
}
.post-pager a { text-decoration: none; }

.back-link { margin-top: 2rem; font-size: .9375rem; }

.site-footer {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1.5rem 1.25rem 2.5rem;
    color: var(--muted);
    font-size: .8125rem;
}

.archive-year {
    font-size: 1.1rem;
    margin: 2rem 0 .5rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--line);
}
.archive-year:first-of-type { margin-top: 0; }
.archive-entry {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .6rem;
    padding: .6rem 0;
    border-bottom: none;
}
.archive-entry time { color: var(--muted); font-size: .8125rem; flex: 0 0 auto; }
.archive-entry a { text-decoration: none; color: var(--text); }
.archive-entry a:hover, .archive-entry a:focus { color: var(--accent-strong); }

.tag-list { list-style: none; }
.tag-list li {
    display: flex;
    justify-content: space-between;
    padding: .6rem 0;
    border-bottom: 1px solid var(--line);
}
.tag-list a { text-decoration: none; color: var(--text); }
.tag-list a:hover, .tag-list a:focus { color: var(--accent-strong); }
.tag-count { color: var(--muted); font-size: .875rem; }

@media (max-width: 30rem) {
    .site-header { padding-top: 1.5rem; }
    article h1 { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* On paper the navigation leads nowhere, so it goes; link targets inside the
   post do not survive the trip either, so they are spelled out. */
@media print {
    body { background: #fff; color: #000; font-size: 11pt; }
    .skip-link, .site-nav, .post-pager, .back-link, .fediverse-thread-link { display: none; }
    a { color: #000; }
    .post-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; }
    .post-body pre, .post-media-item { break-inside: avoid; }
}


/* theme: marginalia */
/* Marginalia - long-form reading.
 *
 * The generator already prints a date and a tag list beside every post. This
 * theme moves that pair into a margin column on wide screens, where a reader
 * can ignore it while reading and find it when scanning, and drops it back
 * under the title when the screen is too narrow to spare the space.
 *
 * Type is a system serif at a 34rem measure; no web font is loaded, so the
 * page renders identically offline and with a blocked network. */

:root {
    --bg: #eff1ec;
    --surface: #f7f8f4;
    --text: #1e2321;
    --text-soft: #414a45;
    --muted: #5a635d;
    --line: #d6dcd3;
    --accent: #7a2e32;
    --accent-strong: #6a2529;
    --max-width: 34rem;
    --shell-width: 50rem;
    --margin-column: 10rem;
    --gutter: 2.5rem;
    --font-body: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #15181a;
        --surface: #1c2022;
        --text: #e3e7e0;
        --text-soft: #c2c8bf;
        --muted: #98a098;
        --line: #2a2f2c;
        --accent: #e4a0a5;
        --accent-strong: #efb9bd;
    }
}

body {
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.7;
}

/* Everything that is not the text of a post is set in the UI face, small and
   letterspaced, so the serif reads as the one voice on the page. */
.site-nav, .post-meta, .site-footer, .tag-count, .post-pager, .back-link,
.archive-entry time, .blog-reply header, .post-media-item figcaption {
    font-family: var(--font-ui);
    font-size: .8125rem;
    letter-spacing: .04em;
}

.site-brand a { font-family: var(--font-body); font-weight: 600; letter-spacing: -.01em; }
.site-nav a { text-transform: lowercase; }

.site-header, main, .site-footer { max-width: var(--shell-width); }
.site-header { border-bottom: 1px solid var(--line); padding-bottom: 1.25rem; }
.site-description { max-width: var(--max-width); font-style: italic; }

.post-list { max-width: var(--max-width); }
.post-summary h2 { font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; }
.post-summary { border-bottom: none; padding: 1.75rem 0; }
.post-summary + .post-summary { border-top: 1px solid var(--line); }
.post-meta a { text-decoration: none; border-bottom: 1px solid var(--line); }

article h1 { font-size: 2rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.post-body, .post-media, .post-replies, .post-pager, .back-link,
.fediverse-thread-link, .post-media-cw { max-width: var(--max-width); }
.post-body p { margin-bottom: 1.25rem; }
.post-body blockquote { border-left: 2px solid var(--accent); font-style: italic; }

.archive-year { font-family: var(--font-ui); font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; }
.tag-list { max-width: var(--max-width); }

/* The margin column. It only exists once there is room for it beside the
   34rem measure; below that the page stays in document order. */
@media (min-width: 52rem) {
    .post-list, .tag-list { max-width: none; }

    .post-summary:not(.archive-entry) {
        display: grid;
        grid-template-columns: var(--margin-column) minmax(0, var(--max-width));
        column-gap: var(--gutter);
    }
    .post-summary:not(.archive-entry) > h2 { grid-column: 2; grid-row: 1; }
    .post-summary:not(.archive-entry) > .post-meta {
        grid-column: 1;
        grid-row: 1 / span 2;
        text-align: right;
        margin-top: .45rem;
    }

    /* Stacked in the margin, the date and each tag are their own line, so the
       "," and "·" the generator prints between them would start lines rather
       than join them. Zeroing the loose text nodes drops them from the page
       while leaving them in the accessibility tree. */
    .post-summary:not(.archive-entry) > .post-meta,
    article > .post-meta { font-size: 0; }
    .post-summary:not(.archive-entry) > .post-meta > time,
    .post-summary:not(.archive-entry) > .post-meta > a,
    article > .post-meta > time,
    article > .post-meta > a {
        display: block;
        font-size: .8125rem;
        line-height: 1.6;
    }
    /* Right-aligned in a column, a block-level link would drag its underline
       across the whole margin, so each one is only as wide as its own text. */
    .post-summary:not(.archive-entry) > .post-meta > a,
    article > .post-meta > a { width: fit-content; margin-left: auto; }
    .post-summary:not(.archive-entry) > .post-excerpt { grid-column: 2; grid-row: 2; }

    article {
        display: grid;
        grid-template-columns: var(--margin-column) minmax(0, var(--max-width));
        column-gap: var(--gutter);
    }
    article > * { grid-column: 2; max-width: none; }
    article > h1 { grid-column: 1 / -1; grid-row: 1; }
    article > .post-meta {
        grid-column: 1;
        grid-row: 2;
        text-align: right;
        margin-top: 1.9rem;
    }
    article > .post-body { grid-row: 2; }

    .archive-entry { padding-left: calc(var(--margin-column) + var(--gutter)); position: relative; }
    .archive-entry time { position: absolute; left: 0; width: var(--margin-column); text-align: right; }
}

@media print {
    .post-summary:not(.archive-entry), article { display: block; }
}