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

/* 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: kiosk */
/* Kiosk - short posts, notes and link blogs.
 *
 * Posts that came from the fediverse are usually a couple of sentences, so the
 * title carries the page and the excerpt follows it quietly. A full-bleed
 * colour band replaces the ruled header, and tags become pills, because on a
 * feed of short items the tag is how a reader picks.
 *
 * The band is painted with a background colour, not an image: with images
 * blocked the page loses nothing. */

:root {
    --bg: #faf7f5;
    --surface: #ffffff;
    --text: #1a1418;
    --text-soft: #40343b;
    --muted: #665760;
    --line: #e7dfe2;
    --accent: #0f7a4e;
    --accent-strong: #0b5f3c;
    --band: #5b1e4e;
    --band-text: #fbf1f7;
    --band-muted: #e2bed6;
    --max-width: 38rem;
    --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #161016;
        --surface: #1e161e;
        --text: #f0e7ec;
        --text-soft: #d2c4cc;
        --muted: #a3939c;
        --line: #2c222c;
        --accent: #5fd6a0;
        --accent-strong: #86e5ba;
        --band: #3d1234;
        --band-text: #f6e6f0;
        --band-muted: #d0a6c2;
    }
}

body { font-family: var(--font-ui); }

/* The band runs edge to edge; its contents stay on the same centred measure
   as the rest of the page, computed rather than wrapped in a container the
   generator does not emit. */
.site-header {
    max-width: none;
    background: var(--band);
    color: var(--band-text);
    border-bottom: none;
    padding: 1.75rem max(1.25rem, calc((100% - var(--max-width)) / 2)) 1.5rem;
}
.site-brand a { color: var(--band-text); font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.site-nav a { color: var(--band-muted); font-weight: 600; font-size: .875rem; }
.site-nav a:hover, .site-nav a:focus { color: var(--band-text); text-decoration: underline; }
.site-header :focus-visible { outline-color: var(--band-text); }

.skip-link { background: var(--band); color: var(--band-text); border-radius: 0; }

.site-description { font-size: 1.0625rem; color: var(--text-soft); }

.post-summary { padding: 1.4rem 0; }
.post-summary h2 { font-size: 1.5rem; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }
.post-excerpt { color: var(--text-soft); }

/* Tags read as pills; the timestamp beside them stays plain text so the two
   never look like the same control. The separators the generator prints
   between them ("," and "·") are punctuation for a sentence, not for a row of
   pills, so the flex row zeroes the loose text nodes and the gap does that
   job instead. Screen readers still announce them. */
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: 0; }
.post-meta time, .post-meta a { font-size: .8125rem; }
.post-meta a {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .1rem .55rem;
    text-decoration: none;
    color: var(--accent-strong);
    background: var(--surface);
}
.post-meta a:hover, .post-meta a:focus { border-color: var(--accent-strong); }

article h1 { font-size: 2rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }

.post-body a { text-decoration-thickness: 2px; }
.post-body blockquote { border-left-color: var(--accent); }

.archive-year { font-weight: 800; font-size: 1.25rem; border-bottom: 2px solid var(--text); }
.archive-entry a { font-weight: 600; }

.tag-list li { border-bottom: none; padding: .25rem 0; }
.tag-list a {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .25rem .75rem;
    font-weight: 600;
    background: var(--surface);
}
.tag-list a:hover, .tag-list a:focus { border-color: var(--accent-strong); }
.tag-count { font-weight: 600; }

.post-pager { font-weight: 600; }
.post-pager a:hover, .post-pager a:focus { text-decoration: underline; }
.back-link a { font-weight: 600; }

.site-footer { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1.25rem; }

@media print {
    .site-header { background: none; color: #000; padding: 0 0 1rem; }
    .site-brand a { color: #000; }
}