/* posts.rhys.wtf, in rhys.wtf's design language. The fonts, palette,
   tokens, dark scheme, header, apps mark and menu, section headings,
   footer and form controls are copied from notes' static/main.css (from
   links', dailies', profiles', itself from rhyswtf-rs/style/main.css):
   keep them in step. Posts' own parts, after rhys.wtf's post list and
   reading column, are at the end. Recoleta is licensed for rhys.wtf
   sites only. */

@font-face {
    font-family: "Monaspace Neon";
    src: url('/static/MonaspaceNeon-Regular.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: Recoleta;
    src: url('/static/Recoleta.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: RecoletaBold;
    src: url('/static/RecoletaBold.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: Figtree;
    src: url('/static/Figtree-Regular.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: Lora-Italic;
    src: url('/static/Lora-Italic-VariableFont_wght.woff2') format('woff2');
    font-display: swap;
}

:root {
    /* The rhys.wtf type system: Recoleta Bold for headings, Recoleta for
       reading, Figtree for the interface, Lora Italic for the logo only. */
    --font-body: Recoleta, system-ui, -apple-system, sans-serif, var(--font-emoji);
    --font-display: RecoletaBold, Recoleta, system-ui, sans-serif, var(--font-emoji);
    --font-ui: Figtree, system-ui, -apple-system, sans-serif, var(--font-emoji);
    --font-italic: Lora-Italic, Georgia, serif;
    /* The device's own colour emoji, last, for what the fonts above
       don't have (a task's 📅, ✅): not a box. The rendered page, the
       textarea being written in and its twin all use these same stacks,
       so an emoji is as wide in each. */
    --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";

    /* Gruvbox light palette — https://github.com/morhetz/gruvbox */
    --gruvbox-bg0-hard: #f9f5d7;
    --gruvbox-bg0: #fbf1c7;
    --gruvbox-bg0-soft: #f2e5bc;
    --gruvbox-bg1: #ebdbb2;
    --gruvbox-bg2: #d5c4a1;
    --gruvbox-bg3: #bdae93;
    --gruvbox-bg4: #a89984;

    --gruvbox-fg0: #282828;
    --gruvbox-fg1: #3c3836;
    --gruvbox-fg2: #504945;
    --gruvbox-fg3: #665c54;
    --gruvbox-fg4: #7c6f64;

    --gruvbox-gray: #928374;

    --gruvbox-red: #cc241d;
    --gruvbox-green: #98971a;
    --gruvbox-yellow: #d79921;
    --gruvbox-blue: #458588;
    --gruvbox-purple: #b16286;
    --gruvbox-aqua: #689d6a;
    --gruvbox-orange: #d65d0e;

    --gruvbox-red-faded: #9d0006;
    --gruvbox-green-faded: #79740e;
    --gruvbox-yellow-faded: #b57614;
    --gruvbox-blue-faded: #076678;
    --gruvbox-purple-faded: #8f3f71;
    --gruvbox-aqua-faded: #427b58;
    --gruvbox-orange-faded: #af3a03;

    /* Semantic tokens — change these to retheme without touching components.
       They reference only the --gruvbox-* slots, which palettes.css (loaded
       after this file) redefines for each palette but Gruvbox: keep it so. */
    --color-bg: var(--gruvbox-bg0);
    --color-surface: var(--gruvbox-bg0-hard);
    --color-border: var(--gruvbox-fg0);
    --color-text: var(--gruvbox-fg1);
    --color-text-strong: var(--gruvbox-fg3);
    --color-muted: var(--gruvbox-fg3);
    --color-link: var(--gruvbox-fg1);
    --color-link-hover: var(--gruvbox-blue-faded);
    --color-error: var(--gruvbox-red-faded);
    /* Empty part of progress bars. */
    --color-track: var(--gruvbox-bg1);
    /* Glyphs on an accent fill (app icons), the same in both schemes.
       palettes.css sets it for each palette. */
    --color-on-accent: #fbf1c7;

    --spacing: 1rem;
    --radius: 1rem;

    /* Form controls and scrollbars follow the palette in each scheme. */
    color-scheme: light;

    /* Gruvbox dark palette, held here and applied by the two blocks below
       (once for the OS preference, once for the explicit choice) so the
       values exist in exactly one place. The plain accents are the same in
       both schemes, as in Gruvbox itself; the "faded" slots, which this
       stylesheet uses for emphasis, take the dark scheme's bright variants. */
    --gruvbox-dark-bg0-hard: #1d2021;
    --gruvbox-dark-bg0: #282828;
    --gruvbox-dark-bg0-soft: #32302f;
    --gruvbox-dark-bg1: #3c3836;
    --gruvbox-dark-bg2: #504945;
    --gruvbox-dark-bg3: #665c54;
    --gruvbox-dark-bg4: #7c6f64;
    --gruvbox-dark-fg0: #fbf1c7;
    --gruvbox-dark-fg1: #ebdbb2;
    --gruvbox-dark-fg2: #d5c4a1;
    --gruvbox-dark-fg3: #bdae93;
    --gruvbox-dark-fg4: #a89984;
    --gruvbox-dark-red-bright: #fb4934;
    --gruvbox-dark-green-bright: #b8bb26;
    --gruvbox-dark-yellow-bright: #fabd2f;
    --gruvbox-dark-blue-bright: #83a598;
    --gruvbox-dark-purple-bright: #d3869b;
    --gruvbox-dark-aqua-bright: #8ec07c;
    --gruvbox-dark-orange-bright: #fe8019;
}

/* Dark scheme. The visitor's choice (`data-theme` on <html>, set from the
   `theme` cookie by the server and by the header toggle in the browser)
   beats the OS preference in both directions: the first block applies
   the OS's dark preference unless light was chosen, the second applies a
   dark choice regardless of the OS. The two must stay identical. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --gruvbox-bg0-hard: var(--gruvbox-dark-bg0-hard);
        --gruvbox-bg0: var(--gruvbox-dark-bg0);
        --gruvbox-bg0-soft: var(--gruvbox-dark-bg0-soft);
        --gruvbox-bg1: var(--gruvbox-dark-bg1);
        --gruvbox-bg2: var(--gruvbox-dark-bg2);
        --gruvbox-bg3: var(--gruvbox-dark-bg3);
        --gruvbox-bg4: var(--gruvbox-dark-bg4);
        --gruvbox-fg0: var(--gruvbox-dark-fg0);
        --gruvbox-fg1: var(--gruvbox-dark-fg1);
        --gruvbox-fg2: var(--gruvbox-dark-fg2);
        --gruvbox-fg3: var(--gruvbox-dark-fg3);
        --gruvbox-fg4: var(--gruvbox-dark-fg4);
        --gruvbox-red-faded: var(--gruvbox-dark-red-bright);
        --gruvbox-green-faded: var(--gruvbox-dark-green-bright);
        --gruvbox-yellow-faded: var(--gruvbox-dark-yellow-bright);
        --gruvbox-blue-faded: var(--gruvbox-dark-blue-bright);
        --gruvbox-purple-faded: var(--gruvbox-dark-purple-bright);
        --gruvbox-aqua-faded: var(--gruvbox-dark-aqua-bright);
        --gruvbox-orange-faded: var(--gruvbox-dark-orange-bright);
        /* The page sits on bg1 rather than bg0, so controls on the darker
           surface stand out, and all text and borders take the brightest
           foreground. */
        --color-bg: var(--gruvbox-bg1);
        --color-text: var(--gruvbox-fg0);
        --color-text-strong: var(--gruvbox-fg0);
        --color-muted: var(--gruvbox-fg0);
        --color-link: var(--gruvbox-fg0);
        --color-border: var(--gruvbox-fg0);
        --color-track: var(--gruvbox-bg2);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --gruvbox-bg0-hard: var(--gruvbox-dark-bg0-hard);
    --gruvbox-bg0: var(--gruvbox-dark-bg0);
    --gruvbox-bg0-soft: var(--gruvbox-dark-bg0-soft);
    --gruvbox-bg1: var(--gruvbox-dark-bg1);
    --gruvbox-bg2: var(--gruvbox-dark-bg2);
    --gruvbox-bg3: var(--gruvbox-dark-bg3);
    --gruvbox-bg4: var(--gruvbox-dark-bg4);
    --gruvbox-fg0: var(--gruvbox-dark-fg0);
    --gruvbox-fg1: var(--gruvbox-dark-fg1);
    --gruvbox-fg2: var(--gruvbox-dark-fg2);
    --gruvbox-fg3: var(--gruvbox-dark-fg3);
    --gruvbox-fg4: var(--gruvbox-dark-fg4);
    --gruvbox-red-faded: var(--gruvbox-dark-red-bright);
    --gruvbox-green-faded: var(--gruvbox-dark-green-bright);
    --gruvbox-yellow-faded: var(--gruvbox-dark-yellow-bright);
    --gruvbox-blue-faded: var(--gruvbox-dark-blue-bright);
    --gruvbox-purple-faded: var(--gruvbox-dark-purple-bright);
    --gruvbox-aqua-faded: var(--gruvbox-dark-aqua-bright);
    --gruvbox-orange-faded: var(--gruvbox-dark-orange-bright);
    /* The page sits on bg1 rather than bg0, so controls on the darker
       surface stand out, and all text and borders take the brightest
       foreground. */
    --color-bg: var(--gruvbox-bg1);
    --color-text: var(--gruvbox-fg0);
    --color-text-strong: var(--gruvbox-fg0);
    --color-muted: var(--gruvbox-fg0);
    --color-link: var(--gruvbox-fg0);
    --color-border: var(--gruvbox-fg0);
    --color-track: var(--gruvbox-bg2);
}

html {
    /* 100%, not smaller: anything else shrinks text on iOS in landscape. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

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

/* Interface text is Figtree; prose (paragraphs, leads, descriptions) stays
   in the body's Recoleta. */
label,
input,
select,
textarea,
button,
.button,
.help,
.notice,
.error,
.badge,
.hint,
.facts,
.list,
.skip-link,
.card__meta,
.card__empty,
.day__date,
.archive__date,
.edition__meta,
.edition__nav,
.token {
    font-family: var(--font-ui);
}

/* Selected text, in the editor too, in the palette's own colours rather
   than the browser's blue: text (fg1 or dark-fg0) on bg2 passes AA in
   every palette and scheme. */
::selection {
    background: var(--gruvbox-bg2);
    color: var(--color-text);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.5;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--color-link);
}

a:hover {
    color: var(--color-link-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--color-link-hover);
    outline-offset: 2px;
}

strong {
    font-family: var(--font-display);
    font-weight: normal;
}

.page {
    flex: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing);
}

/* Site header, as on rhys.wtf, with this app's name beside the title. */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.site-header__brand {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 0.6rem;
    min-width: 0;
}

.site-header__title {
    font-family: var(--font-italic);
    font-size: 3rem;
    color: var(--color-text-strong);
    text-decoration: none;
}

.site-header__title:hover,
.site-header__app:hover {
    color: var(--color-text-strong);
    text-decoration: underline;
}

.site-header__app {
    font-family: var(--font-ui);
    font-size: 1.6rem;
    color: var(--color-muted);
    text-decoration: none;
}

/* Top right, the same in every rhys.wtf app: the apps mark, opening the
   apps menu with the light/dark switch at its foot. */
.site-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* The apps mark: a rounded square per app in its Gruvbox colour, faded in
   light and bright in dark (the tokens flip). Profiles is red, feeds
   purple, dailies orange; later apps add squares. */
.apps-mark { width: 2rem; height: 2rem; display: block; }
.apps-mark__red { fill: var(--gruvbox-red-faded); }
.apps-mark__orange { fill: var(--gruvbox-orange-faded); }
.apps-mark__yellow { fill: var(--gruvbox-yellow-faded); }
.apps-mark__green { fill: var(--gruvbox-green-faded); }
.apps-mark__aqua { fill: var(--gruvbox-aqua-faded); }
.apps-mark__gray { fill: var(--gruvbox-gray); }
.apps-mark__blue { fill: var(--gruvbox-blue-faded); }
.apps-mark__purple { fill: var(--gruvbox-purple-faded); }

/* An app's icon: its favicon glyph on a square in its colour. */
.app-icon { width: 2rem; height: 2rem; flex: none; }
.app-icon__back { fill: var(--gruvbox-blue-faded); }
.app-icon--red .app-icon__back { fill: var(--gruvbox-red-faded); }
.app-icon--purple .app-icon__back { fill: var(--gruvbox-purple-faded); }
.app-icon--blue .app-icon__back { fill: var(--gruvbox-blue-faded); }
.app-icon--green .app-icon__back { fill: var(--gruvbox-green-faded); }
.app-icon--orange .app-icon__back { fill: var(--gruvbox-orange-faded); }
.app-icon--yellow .app-icon__back { fill: var(--gruvbox-yellow-faded); }
.app-icon--aqua .app-icon__back { fill: var(--gruvbox-aqua-faded); }
.app-icon--gray .app-icon__back { fill: var(--gruvbox-gray); }
/* The glyphs carry fill="#fbf1c7" for copies without this stylesheet;
   here they follow the palette. */
.app-icon g,
.app-icon text { fill: var(--color-on-accent); }
.app-icon [stroke]:not([stroke="none"]) { stroke: var(--color-on-accent); }

/* The app switcher: click the mark for a list of every app. A <details>,
   so it works without JavaScript; app.js closes it on an outside click. */
.apps-menu { position: relative; }

.apps-menu__button {
    list-style: none;
    cursor: pointer;
    padding: 0.3rem;
    border-radius: 0.6rem;
    line-height: 0;
}

.apps-menu__button::-webkit-details-marker { display: none; }
.apps-menu__button:hover,
.apps-menu[open] .apps-menu__button { background: var(--color-surface); }
.apps-menu__button:focus-visible { outline: 2px solid var(--color-link-hover); }

.apps-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    z-index: 20;
    min-width: 17rem;
    padding: 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
}

.apps-menu__list { list-style: none; margin: 0; padding: 0; }

.apps-menu__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.6rem;
    border-radius: 0.6rem;
    text-decoration: none;
    color: var(--color-text);
}

.apps-menu__item:hover,
.apps-menu__item:focus-visible { background: var(--color-bg); }

.apps-menu__text { display: flex; flex-direction: column; min-width: 0; }
.apps-menu__name { font-family: var(--font-ui); font-size: 1.1rem; }
.apps-menu__desc { font-family: var(--font-ui); font-size: 0.9rem; color: var(--color-muted); }

/* The menu's last row, under a rule: the light/dark switch, laid out like
   an app (glyph in a 2rem box, then its name). The moon and "Dark mode"
   show in the light scheme, the sun and "Light mode" in the dark. */
.apps-menu__rule {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 0.5rem 0.25rem;
}

.theme-toggle {
    margin: 0;
}

.theme-toggle__button {
    width: 100%;
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.theme-toggle__glyph {
    width: 2rem;
    height: 2rem;
    flex: none;
    display: grid;
    place-items: center;
    color: var(--color-text-strong);
}

.theme-toggle__icon,
.menu-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: none;
}

.menu-icon,
.theme-toggle__icon--moon,
.theme-toggle__label--to-dark {
    display: block;
}

.theme-toggle__label--to-light {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle__icon--moon,
    :root:not([data-theme="light"]) .theme-toggle__label--to-dark {
        display: none;
    }

    :root:not([data-theme="light"]) .theme-toggle__icon--sun,
    :root:not([data-theme="light"]) .theme-toggle__label--to-light {
        display: block;
    }
}

:root[data-theme="dark"] .theme-toggle__icon--moon,
:root[data-theme="dark"] .theme-toggle__label--to-dark {
    display: none;
}

:root[data-theme="dark"] .theme-toggle__icon--sun,
:root[data-theme="dark"] .theme-toggle__label--to-light {
    display: block;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    padding: 0.5rem 1rem;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    z-index: 10;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
}

/* Home hero, as rhys.wtf's greeting. */
.greeting {
    text-align: center;
    margin: 2rem 0 3rem;
}

.greeting__hello {
    font-family: var(--font-display);
    font-size: clamp(3rem, 12vw, 6rem);
    font-weight: normal;
    color: var(--color-text-strong);
    margin: 0;
    line-height: 1;
}

.greeting__welcome {
    font-family: var(--font-body);
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    color: var(--color-text-strong);
    margin: 0.5rem 0 0;
}

.lead {
    font-size: 1.2rem;
}

/* Section heading: title and rule. */
.section-header {
    margin-bottom: 1rem;
}

.section-header__title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: normal;
    color: var(--color-text-strong);
    margin: 0 0 -0.25rem 0;
}

.section-header__rule {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 0;
}

/* Sign-in-sized pages: rhys.wtf's login column. */
.narrow {
    max-width: 24rem;
    margin: 2rem auto;
}

.narrow__title,
.page-title {
    font-family: var(--font-display);
    font-weight: normal;
    margin: 0 0 1rem 0;
}

.page-title {
    font-size: 2.5rem;
    color: var(--color-text-strong);
}

.narrow-form {
    max-width: 24rem;
}

.form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="time"],
select,
textarea {
    width: 100%;
    min-width: 0;
    padding: 0.5rem;
    font-size: 1rem;
    font-family: var(--font-ui);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
}

.prefixed {
    display: flex;
    align-items: stretch;
}

/* The prefix keeps its width and stays on one line ("/d/" would
   otherwise break at each slash); the input takes the rest of the row. */
.prefixed__prefix {
    flex: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    padding: 0 0.6rem;
    border: 1px solid var(--color-border);
    border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
    background: var(--gruvbox-bg0-soft);
    color: var(--color-muted);
}

.prefixed input {
    flex: 1;
    width: auto;
    border-radius: 0 var(--radius) var(--radius) 0;
}

.help {
    font-size: 0.95rem;
    color: var(--color-muted);
    margin: 0;
}

.help:empty {
    display: none;
}

/* Buttons: rhys.wtf's outlined pills. */
.button {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.5rem 1rem;
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1.5;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
    cursor: pointer;
}

.button:hover {
    background: var(--gruvbox-bg0-soft);
    color: var(--color-text);
}

.button:disabled {
    opacity: 0.55;
    cursor: progress;
}

.button--small {
    display: inline-block;
    width: auto;
    padding: 0.35rem 0.75rem;
}

.button--danger {
    border-color: var(--color-error);
    color: var(--color-error);
}

.button--danger:hover {
    background: var(--color-error);
    color: var(--color-bg);
}

.actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rule {
    margin: 1.5rem 0;
    border: none;
    border-top: 1px solid var(--color-border);
}

.hint {
    margin-top: 1.25rem;
}

details summary {
    cursor: pointer;
    text-decoration: underline;
    margin: 0.5rem 0;
}

details[open] summary {
    margin-bottom: 0.75rem;
}

/* Messages: rhys.wtf's .error box, and a neutral twin. */
.error,
.notice {
    padding: 0.5rem var(--spacing);
    border: 1px solid var(--color-error);
    border-radius: var(--radius);
    margin: 0 0 1rem;
}

/* On the surface, not the page: in the dark schemes the bright reds
   only pass AA on the darker surface (Gruvbox's #fb4934 is 3.4:1 on its
   dark page, 4.8:1 on the surface). */
.error {
    color: var(--color-error);
    background: var(--color-surface);
}

.notice {
    border-color: var(--color-border);
    background: var(--color-surface);
}

.error p,
.notice p {
    margin: 0.25rem 0;
}

/* Above an admin's view of someone's notes (admin_view.rs): whose they
   are, that it's read-only, and that it's recorded. */
.admin-banner {
    font-weight: 700;
    padding: 0.6rem 1rem;
    border: 2px solid var(--color-error);
    border-radius: 1rem;
    background: var(--color-surface);
    color: var(--color-text);
    margin: 0 0 1rem;
}

.list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-border);
}

.list__item form {
    margin: 0;
}

/* Site footer, as on rhys.wtf: the one place outside the type system's
   rules, in Recoleta like the rest of rhys.wtf's footer, links and
   sign-out button included. */
.site-footer {
    font-family: var(--font-body);
    text-align: center;
    font-size: 1.2rem;
    padding: 0 var(--spacing) 1rem;
    width: 100%;
}

.site-footer__rule {
    border: 0;
    border-top: 1px solid var(--color-border);
    width: 30%;
}

.site-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 0.5rem;
}

.site-footer__links li + li::before {
    content: "⁕";
    margin-right: 0.5rem;
}

.site-footer__link {
    font-size: 1.3rem;
    text-decoration: underline;
}

.site-footer__form {
    display: inline;
    margin: 0;
}

.site-footer__button {
    font-family: var(--font-body);
    color: var(--color-link);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.site-footer__button:hover {
    color: var(--color-link-hover);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 30rem) {
    .site-header__title {
        font-size: 2.4rem;
    }

    .site-header__app {
        font-size: 1.3rem;
    }

    .facts {
        grid-template-columns: 1fr;
    }

    .facts dd {
        margin-bottom: 0.4rem;
    }
}


/* ------------------------------------------------------------------ */
/* Posts' own parts. Posts is green, as Notes: --gruvbox-green-faded.   */

:root {
    --font-mono: "Monaspace Neon", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --accent: var(--gruvbox-green-faded);
}

.muted {
    color: var(--color-muted);
}

.small {
    font-size: 0.85rem;
}

code,
pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

.plain-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.plain-list li {
    padding: 0.2rem 0;
    overflow-wrap: anywhere;
}

.section-title {
    font-family: var(--font-display);
    font-weight: normal;
    font-size: 1.35rem;
    color: var(--color-text-strong);
    margin: 1.5rem 0 0.5rem;
}

/* A section's heading with something on its right ("Feed"), and its
   rule, as rhys.wtf's section headers. */
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--color-border);
    margin: 2rem 0 0.5rem;
}

.section-head__title {
    font-family: var(--font-display);
    font-weight: normal;
    font-size: 2rem;
    color: var(--color-text-strong);
    margin: 0 0 0.1rem;
}

.section-head__aside {
    font-family: var(--font-ui);
}

/* The welcome page's newest posts sit between its introduction and the
   apps. */
.welcome__extra .recent {
    max-width: 46rem;
    margin: 0 auto 2rem;
    text-align: left;
}

/* rhys.wtf's post list: "[2025-12-31] — Title", then a summary. */
.post-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

.post-list__item {
    line-height: 1.3;
    margin: 0 0 1rem;
}

.post-list__link {
    font-size: 1.2rem;
    text-decoration: none;
}

.post-list__date {
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--color-muted);
}

.post-list__date::before { content: "["; }
.post-list__date::after { content: "] — "; }

.post-list__title {
    font-family: var(--font-body);
    color: var(--color-link);
    text-decoration: underline;
}

.post-list__link:hover .post-list__date,
.post-list__link:hover .post-list__title {
    color: var(--color-link-hover);
}

.post-list__meta {
    font-family: var(--font-ui);
    font-size: 0.9rem;
    color: var(--color-muted);
}

.post-list__summary {
    margin: 0.2rem 0 0;
    color: var(--color-muted);
}

/* Tags: small pills. */
.tag {
    display: inline-block;
    padding: 0 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    line-height: 1.6;
    text-decoration: none;
    color: var(--accent);
    white-space: nowrap;
    margin: 0 0 0.3rem;
}

.tag:hover {
    border-color: var(--accent);
}

.tag__count {
    margin-left: 0.35em;
    color: var(--color-muted);
    font-size: 0.8em;
}

/* Someone's page. */
.author__head {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin: 1rem 0 1.5rem;
}

.author__picture {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
}

.author__name {
    font-family: var(--font-display);
    font-weight: normal;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--color-text-strong);
    margin: 0;
}

.author__name a {
    text-decoration: none;
}

.author__handle {
    font-family: var(--font-ui);
    margin: 0.3rem 0 0;
}

/* A post: rhys.wtf's reading column. */
.post {
    margin-top: 2rem;
}

.post__cover {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.post__title {
    font-family: var(--font-body);
    font-weight: normal;
    font-size: 2.5rem;
    line-height: 1.1;
    color: var(--color-text-strong);
    margin: 0;
}

.post__meta {
    margin: 0.3rem 0 0.5rem;
    color: var(--color-muted);
}

.post__date {
    font-family: var(--font-italic);
    font-size: 1.4rem;
}

.post__by,
.post__set,
.post__updated {
    font-family: var(--font-ui);
    font-size: 0.95rem;
}

.post__tags {
    margin: 0 0 var(--spacing);
}

.post__body {
    font-size: 1.2rem;
    overflow-wrap: break-word;
}

.post__body p {
    margin: 0.75rem 0;
}

.post__body h1,
.post__body h2,
.post__body h3,
.post__body h4,
.post__body h5,
.post__body h6 {
    font-family: var(--font-body);
    font-weight: normal;
    color: var(--color-text-strong);
    line-height: 1.2;
    margin: 2rem 0 0.4rem;
}

.post__body h1 { font-size: 2rem; }
/* rhys.wtf's section headings carry a rule under them. */
.post__body h2 {
    font-size: 1.85rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.1rem;
}
.post__body h3 { font-size: 1.6rem; }
.post__body h4 { font-size: 1.4rem; }
.post__body h5,
.post__body h6 { font-size: 1.25rem; }

.post__body hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 1.5rem 0;
}

.post__body blockquote {
    margin: 1rem 0;
    padding: 0.1rem 1rem;
    border-left: 3px solid var(--color-border);
    color: var(--color-text-strong);
}

.post__body :not(pre) > code {
    font-size: 1rem;
    padding: 0.05em 0.3em;
    border-radius: 0.3em;
    background: var(--color-surface);
    border: 1px solid var(--color-track);
}

.post__body pre {
    padding: 0.75rem 1rem;
    overflow-x: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-track);
    border-radius: calc(var(--radius) / 2);
    line-height: 1.45;
    font-size: 1rem;
}

.post__body pre code {
    background: transparent;
    padding: 0;
    border: 0;
}

.post__body ul,
.post__body ol {
    padding-left: 1.4rem;
}

.post__body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 1rem;
}

.post__body th,
.post__body td {
    border: 1px solid var(--color-track);
    padding: 0.3rem 0.6rem;
    text-align: left;
    vertical-align: top;
}

.post__body img {
    max-width: 100%;
    height: auto;
}

/* Pictures as rhys.wtf shows them: centred on a rounded card, a title
   in Lora Italic under them, then the caption, muted. */
.post__body picture {
    display: contents;
}

.figure {
    margin: 2rem 0;
    text-align: center;
}

.figure img {
    /* Its width and height are said (so the page keeps its place); both
       auto here, so the two limits scale it in proportion. */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 80vh;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    vertical-align: middle;
}

.figure figcaption {
    font-size: 1.1rem;
    color: var(--color-muted);
    max-width: 75%;
    margin: 0.5rem auto 0;
}

.figure figcaption > em:first-child + br {
    display: none;
}

.figure figcaption > em:first-child {
    display: block;
    font-family: var(--font-italic);
    font-size: 1.4rem;
    color: var(--color-text);
}

/* Mermaid diagrams (rhyswtf-mermaid's mermaid.css): their surfaces are
   mixed from the page's own background. */
.mermaid {
    --mermaid-page: var(--color-bg);
}

.post__body .footnote-definition {
    font-size: 1rem;
    color: var(--color-muted);
}

/* A link to a page that isn't a post: only its words. */
.post__body a.wiki:not([href]) {
    text-decoration: none;
    color: inherit;
}

.preview-banner {
    margin-top: 1rem;
}

/* The comments under a post. */
.post + .comments,
.post + section {
    margin-top: 3rem;
}

/* Your dashboard. */
.steps li {
    margin: 0.4rem 0;
}

.badge {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    padding: 0 0.45rem;
    border-radius: 0.6rem;
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    white-space: nowrap;
}

.badge--published {
    color: var(--accent);
    border-color: currentColor;
}

.badge--draft {
    border-style: dashed;
}

.posts-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-ui);
    margin: 0.5rem 0 1rem;
}

.posts-table th,
.posts-table td {
    text-align: left;
    vertical-align: top;
    padding: 0.4rem 0.5rem 0.4rem 0;
    border-bottom: 1px solid var(--color-track);
}

.posts-table__actions {
    white-space: nowrap;
}

@media (max-width: 40rem) {
    .post__title,
    .author__name {
        font-size: 2rem;
    }

    .post__body {
        font-size: 1.1rem;
    }

    .figure figcaption {
        max-width: none;
    }

    /* The table stacks: each post a block. */
    .posts-table thead {
        display: none;
    }

    .posts-table tr,
    .posts-table td {
        display: block;
        border: 0;
        padding: 0.1rem 0;
    }

    .posts-table tr {
        border-bottom: 1px solid var(--color-track);
        padding: 0.5rem 0;
    }
}