*, *::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); }

/* Visually hidden, but read by screen readers and shown by text browsers
   that ignore CSS. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 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; }

/* Painted in --text on --surface rather than on --accent: themes recolour the
   accent freely, and a fixed ink colour on top of it went unreadable on three
   of the four. The accent stays as the border, which needs only 3:1. */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--surface);
    color: var(--text);
    border: 2px solid var(--accent);
    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; }

/* The reset above zeroes every margin, so each block the post body can
   contain has to ask for its own spacing back. Post HTML comes from the
   fediverse and can hold anything, so this covers the whole set rather than
   the tags a given post happens to use. */
.post-body h2, .post-body h3, .post-body h4 { margin: 1.75rem 0 .6rem; line-height: 1.3; }
.post-body > :first-child { margin-top: 0; }
.post-body ul, .post-body ol { margin: 0 0 1.1rem; padding-left: 1.5rem; }
.post-body li { margin-bottom: .3rem; }
.post-body hr { margin: 1.75rem 0; border: 0; border-top: 1px solid var(--line); }
.post-body pre {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: .4rem;
    padding: .9rem;
    margin: 0 0 1.1rem;
}
.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;
    /* auto-fit, not auto-fill: empty tracks collapse, so a post with one
       attachment gets one full-measure figure instead of a 14rem thumbnail
       stranded at the left edge. */
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 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; }

.fediverse-thread-link { margin-top: 1.5rem; font-size: .9375rem; }

.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 currentColor; }

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; }

    /* The thread link, the replies and the pager are siblings of <article>,
       so the grid above does not reach them and they would sit alone in the
       margin column. Indent them onto the text column by hand. */
    .post-replies, .fediverse-thread-link, .post-pager, .back-link {
        margin-left: calc(var(--margin-column) + var(--gutter));
        max-width: var(--max-width);
    }

    .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; }
    .post-replies, .fediverse-thread-link, .post-pager, .back-link { margin-left: 0; }
    .archive-entry { padding-left: 0; }
    .archive-entry time { position: static; width: auto; text-align: left; }
}