plates-render 0.7.3

/* The default stylesheet.
 *
 * The eleven colour variables and the four typography variables below are the
 * *contract*: `appearance::ColorPalette` and `appearance::TypographySettings`
 * write exactly these names, and `html::css` appends what they write after this
 * file. Every rule here therefore reads a variable rather than a literal, and
 * the dark values live in a bare `@media (prefers-color-scheme: dark) { :root }`
 * so a caller's override — which has the same shape and comes later — wins.
 *
 * Names that begin `--_` are this file's own, derived from the contract with
 * `color-mix` so that a caller who supplies only an accent still gets tints,
 * rules and focus rings in their own colour.
 */

:root {
    /* ── Contract: colour ── */
    --bg: #fafaf9;
    --text: #14181f;
    --text-muted: #5b6674;
    /* blue-600 rather than blue-500: 5.2:1 on the page background, so link text
       clears WCAG AA where the lighter blue did not. */
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --border: #e3e5e9;
    --code-bg: #f2f3f5;
    --surface-bg: rgba(255, 255, 255, 0.95);
    --surface-border: rgba(15, 23, 42, 0.08);
    --surface-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.06);
    --divider-color: rgba(15, 23, 42, 0.1);

    /* ── Contract: typography ── */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-size: 16px;
    --line-height: 1.7;
    /* ~72 characters in the default stack: the top of the comfortable range for
       running prose, and wide enough that a fenced code line rarely scrolls. */
    --content-max-width: 44rem;

    /* ── Local ── */
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Consolas, monospace;
    --line-height-tight: 1.25;
    --sidebar-width: 16rem;
    /* How far down anything under the fixed mobile bar has to start. The bar
       is a little under 3.5rem tall, so this clears it with room to spare. The
       drawer and the page both read it, because the bar sits over both and a
       change to its size must move both. Only consulted below the nav
       breakpoint, where the bar is shown. */
    --nav-toggle-clear: 4.5rem;
    --page-pad-x: 1.5rem;
    --radius: 0.5rem;
    --radius-sm: 0.3rem;
    --_accent-tint: color-mix(in oklab, var(--accent) 10%, transparent);
    --_accent-tint-strong: color-mix(in oklab, var(--accent) 22%, transparent);
    --_accent-rule: color-mix(in oklab, var(--accent) 45%, transparent);
    /* An underline that reads as one without competing with the text over it. */
    --_faint-underline: color-mix(in oklab, currentColor 35%, transparent);

    /* Syntax highlighting. Literals rather than mixes of `--accent`: a palette
       derived from one hue is a palette whose colours are hard to tell apart,
       which is the one thing highlighting exists to do. Chosen against
       `--code-bg` rather than `--bg`, since that is what they are read on, and
       kept above 4.5:1 on it so a comment is still text and not decoration.
       File-local like every other `--_` name, and overridable by a caller's
       sheet on the same terms. */
    --_syn-comment: #6a7580;
    --_syn-string: #0a7040;
    --_syn-keyword: #9526a0;
    --_syn-entity: #2b62d9;
    --_syn-constant: #98590a;
    --_syn-support: #016a99;
    --_syn-invalid: #c02617;

    /* Let the user agent paint scrollbars, checkboxes and text fields to match
       the mode. Without it a dark page keeps light scrollbars and a light
       task-list checkbox, which is what the two palettes here are for.
       It follows the *preference*, not the palette — so a caller who overrides
       `--bg` and friends for one mode only, pinning a light page in a browser
       set to dark, should pin `color-scheme` alongside it. */
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Not pure black against near-white: the softened pair cuts the halation
           that makes long reading on an OLED display tiring. */
        --bg: #0e1015;
        --text: #e6eaf0;
        --text-muted: #9aa5b4;
        --accent: #7cb0fb;
        --accent-hover: #a9cbfd;
        --border: #2b3341;
        --code-bg: #171b23;
        --surface-bg: rgba(23, 27, 35, 0.95);
        --surface-border: rgba(255, 255, 255, 0.1);
        --surface-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.4);
        --divider-color: rgba(255, 255, 255, 0.1);

        --_syn-comment: #7f8b99;
        --_syn-string: #9ece6a;
        --_syn-keyword: #c678dd;
        --_syn-entity: #7aa2f7;
        --_syn-constant: #e0af68;
        --_syn-support: #56b6c2;
        --_syn-invalid: #f7768e;
    }
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size);
    line-height: var(--line-height);
    color: var(--text);
    background: var(--bg);
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 2.5rem var(--page-pad-x) 5rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* A long URL, a long identifier or a wide inline code span must not push
       the page sideways; only the elements that scroll on purpose do. */
    overflow-wrap: break-word;
}

::selection {
    background: var(--_accent-tint-strong);
    color: var(--text);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Anchor jumps land clear of the top of the window rather than flush against
   it, and clear of the fixed nav button on a narrow screen. */
:target,
.content :is(h1, h2, h3, h4, h5, h6) {
    scroll-margin-top: 2rem;
}

/* ── Content typography ── */

a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: from-font;
}

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

/* A link whose target isn't published for this audience — a page the gate
   refused, or a file whose sidecar says it is for someone else, in the place
   its picture or player would have been: kept as text so the page reads
   naturally, but visibly inert (muted, dotted underline). */
.unpublished-link {
    color: var(--text-muted);
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    cursor: not-allowed;
}

.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
    margin-top: 2.5rem;
    margin-bottom: 0.5rem;
    line-height: var(--line-height-tight);
    letter-spacing: -0.011em;
    font-weight: 650;
    text-wrap: balance;
}

/* A whole scale, so that h4–h6 stay headings. Left to the user agent, h5 and h6
   come out *smaller* than the body text they introduce. */
.content h1 { font-size: 2.1rem; letter-spacing: -0.02em; }
.content h2 { font-size: 1.55rem; }
.content h3 { font-size: 1.25rem; }
.content h4 { font-size: 1.08rem; }
.content h5 { font-size: 1rem; }
.content h6 {
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Whatever opens the body opens it: no leading gap above the first element,
   whichever element that turns out to be. */
.content > :first-child {
    margin-top: 0;
}

/* The link every heading carries to itself (`plates_render::headings`).
   Invisible until the heading is hovered or the link itself focused, so a
   page reads as prose and a reader who wants the anchor can still find it
   with a mouse or by tabbing. */
.heading-anchor {
    margin-left: 0.35em;
    font-weight: 400;
    text-decoration: none;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.15s;
}

.content :is(h1, h2, h3, h4, h5, h6):hover > .heading-anchor,
.heading-anchor:focus-visible {
    opacity: 1;
}

.heading-anchor:hover {
    color: var(--accent);
}

.content p {
    margin: 1rem 0;
    text-wrap: pretty;
}

.content ul, .content ol {
    margin: 1rem 0;
    padding-left: 1.6rem;
}

.content li {
    margin: 0.3rem 0;
}

.content li > ul, .content li > ol {
    margin: 0.3rem 0;
}

.content dl {
    margin: 1rem 0;
}

.content dt {
    font-weight: 650;
    margin-top: 1rem;
}

.content dd {
    margin: 0.25rem 0 0 1.6rem;
    color: var(--text-muted);
}

.content pre {
    background: var(--code-bg);
    border: 1px solid var(--border);
    padding: 0.9rem 1rem;
    border-radius: var(--radius);
    overflow-x: auto;
    line-height: 1.55;
    font-size: 0.875em;
    tab-size: 4;
}

.content code {
    background: var(--code-bg);
    /* Tight horizontally: a wider inset reads as a space before the comma or
       colon that so often follows an inline `code` span. */
    padding: 0.15em 0.3em;
    border-radius: var(--radius-sm);
    font-size: 0.875em;
    font-family: var(--font-mono);
}

.content pre code {
    background: none;
    padding: 0;
    font-size: inherit;
}

/* ── Syntax highlighting ──
 *
 * `plates_render::syntax` emits a class per atom of the Sublime scope it
 * matched, each prefixed `plates-`: `keyword.control.rust` arrives as
 * `plates-keyword plates-control plates-rust`. So these select the *first*
 * atom, which is the one that names what a token is.
 *
 * Two things decide the order of the rules below, and both are load-bearing:
 *
 * 1. Every selector here is one class, so they all have the same specificity
 *    and the last matching rule wins. A scope's atoms overlap — the `"` opening
 *    a string is `punctuation.definition.string.begin`, carrying *both*
 *    `plates-punctuation` and `plates-string` — so the rule that should win
 *    goes later. Punctuation is therefore first: a quote inside a string reads
 *    as string, a `//` inside a comment reads as comment, and neither is left
 *    a different colour from the token it belongs to.
 *
 * 2. `plates-meta` is deliberately absent. `meta.function` wraps a whole
 *    function, signature and body together, so colouring it would flood
 *    everything nested inside with one colour and undo the rest of this block.
 *
 * Scoped to `.plates-highlighted` — the class the pass adds only to blocks it
 * actually coloured — so a fence in a language no grammar covers keeps the
 * plain `<pre>` treatment above rather than half of this one.
 */
.content pre code.plates-highlighted .plates-punctuation { color: var(--_syn-comment); }
.content pre code.plates-highlighted .plates-keyword,
.content pre code.plates-highlighted .plates-storage { color: var(--_syn-keyword); }
.content pre code.plates-highlighted .plates-entity,
.content pre code.plates-highlighted .plates-variable { color: var(--_syn-entity); }
.content pre code.plates-highlighted .plates-support { color: var(--_syn-support); }
.content pre code.plates-highlighted .plates-constant { color: var(--_syn-constant); }
.content pre code.plates-highlighted .plates-string { color: var(--_syn-string); }
.content pre code.plates-highlighted .plates-comment { color: var(--_syn-comment); font-style: italic; }
.content pre code.plates-highlighted .plates-invalid { color: var(--_syn-invalid); }

.content kbd {
    font-family: var(--font-mono);
    font-size: 0.8em;
    padding: 0.15em 0.4em;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
    background: var(--code-bg);
}

/* Not italic: a pull quote is often several sentences, and a run of italic that
   long is harder to read than the text around it. The rule and the tint mark it
   instead. */
.content blockquote {
    border-left: 3px solid var(--_accent-rule);
    margin: 1.5rem 0;
    padding: 0.25rem 0 0.25rem 1.25rem;
    color: var(--text-muted);
}

.content blockquote > :first-child { margin-top: 0; }
.content blockquote > :last-child { margin-bottom: 0; }

/* `width: max-content` with `max-width: 100%` is what makes a table that does
   not fit scroll *inside itself* rather than widening the page. It costs the
   full-bleed look for a table that would have fitted, which is the cheaper of
   the two — a clipped table is unreadable, a narrow one is not. */
.content table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.94em;
    line-height: 1.5;
}

.content th, .content td {
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 0.55rem 0.9rem;
    text-align: left;
    vertical-align: top;
}

.content th {
    background: none;
    font-weight: 650;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.content tbody tr:last-child td {
    border-bottom: none;
}

.content th:first-child, .content td:first-child { padding-left: 0; }
.content th:last-child, .content td:last-child { padding-right: 0; }

.content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.content figure {
    margin: 1.5rem 0;
}

.content figcaption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    text-align: center;
}

.content details {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.content summary {
    cursor: pointer;
    font-weight: 600;
}

.content details[open] > summary {
    margin-bottom: 0.5rem;
}

/* ── The outline ──
 *
 * Two things wear `nav.toc`: the single-file render's table of contents, with
 * an `<h2>` and a flat list, and a site page's "On this page" block, a
 * `<details>` over a nested list of the page's own headings. Below the rail
 * breakpoint the page's outline is a box above the content, closed by the
 * built-in script so a long outline does not push the prose down; at width it
 * moves out to the right-hand margin and stays put while the page scrolls.
 */

nav.toc {
    border: 1px solid var(--border);
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 2.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

nav.toc h2,
nav.toc summary {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

nav.toc summary {
    cursor: pointer;
    list-style: none;
}

nav.toc summary::-webkit-details-marker {
    display: none;
}

nav.toc details:not([open]) > summary {
    margin-bottom: 0;
}

nav.toc ul {
    margin: 0;
    padding-left: 1.1rem;
}

nav.toc li {
    margin: 0.3rem 0;
}

nav.toc a {
    color: var(--text-muted);
    text-decoration: none;
}

nav.toc a:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* At width the outline is a rail in the right-hand margin, fixed so it stays
   beside the reader as the page scrolls. 88rem is where a 12rem rail fits
   beside a 44rem measure and a 16rem sidebar with the margins the layout
   already leaves; a narrower window keeps the box above the content. */
@media (min-width: 88rem) {
    .site-content nav.toc {
        position: fixed;
        top: 2.5rem;
        right: 1.25rem;
        width: 12rem;
        max-height: calc(100dvh - 5rem);
        overflow-y: auto;
        margin: 0;
        padding: 0;
        border: none;
        border-left: 1px solid var(--divider-color);
        border-radius: 0;
        padding-left: 1rem;
    }

    .site-content nav.toc summary {
        pointer-events: none;
    }

    .site-content nav.toc ul {
        padding-left: 0;
        list-style: none;
    }

    .site-content nav.toc ul ul {
        padding-left: 0.75rem;
    }
}

/* ── Layout misc ── */

hr,
.content hr {
    border: none;
    border-top: 1px solid var(--divider-color);
    margin: 3rem 0;
}

section {
    margin-bottom: 2rem;
}

footer {
    margin-top: 4rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--divider-color);
    color: var(--text-muted);
    font-size: 0.875rem;
}

footer p {
    margin: 0.5rem 0;
}

/* The site's own header and footer documents, and the attribution line. An
   empty element is one the site declared nothing for, and it costs no space. */
.site-header:empty,
.site-footer:empty {
    display: none;
}

.site-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--divider-color);
    color: var(--text-muted);
    font-size: 0.9rem;
}

.site-header > :first-child,
.site-footer > :first-child {
    margin-top: 0;
}

.site-header > :last-child,
.site-footer > :last-child {
    margin-bottom: 0;
}

/* A list in the header is a row of links, which is what a header's list is. */
.site-header ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
}

.site-footer ul {
    padding-left: 1.25rem;
}

.site-footer .generator {
    margin-top: 1rem;
    font-size: 0.8rem;
}

footer a {
    color: var(--text-muted);
    text-decoration-color: var(--_faint-underline);
}

footer a:hover {
    color: var(--accent);
    text-decoration-color: currentColor;
}

/* ── Skip link ──
 *
 * The first thing in the body: off-screen until focused, so a keyboard reader
 * can step past the sidebar to `#content` in one tab.
 */

.skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1020;
    padding: 0.5rem 0.75rem;
    background: var(--bg);
    color: var(--accent);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

/* ── Site navigation sidebar ── */

/* The mobile bar: the menu button and the masthead, shown only below the nav
   breakpoint, where it is the spelling of the sidebar's own masthead. */
.site-bar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1010;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem var(--page-pad-x);
    background: var(--surface-bg);
    border-bottom: 1px solid var(--surface-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* The drawer's state is a checkbox ahead of the bar and the nav, so opening
   is `:checked ~` and needs no script — a page inside a frame that runs none
   still has a menu. Hidden by clipping rather than `display: none`, which
   would take it out of the tab order and the label's reach. */
.nav-toggle-state {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.nav-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.7rem;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--text);
    line-height: 1.2;
    user-select: none;
    -webkit-user-select: none;
}

.nav-toggle-state:checked ~ .site-bar .nav-toggle {
    background: var(--_accent-tint);
    border-color: var(--_accent-rule);
    color: var(--accent);
}

.nav-toggle-state:focus-visible ~ .site-bar .nav-toggle {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* The site's name, linking home. In the sidebar it heads the tree; in the
   mobile bar it sits beside the button. */
.site-masthead {
    display: block;
    font-weight: 650;
    font-size: 1rem;
    letter-spacing: -0.011em;
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-masthead:hover {
    color: var(--accent);
}

.site-nav > .site-masthead {
    margin: 0 0.55rem 1rem;
}

.site-masthead[aria-current] {
    color: var(--accent);
}

.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 2.5rem 0.75rem 3rem;
    border-right: 1px solid var(--divider-color);
    background: var(--bg);
    z-index: 1000;
    font-size: 0.9rem;
    line-height: 1.45;
}

/* The sidebar is fixed, so the page it sits beside is offset by *padding on the
   body*: that holds whatever the shell puts inside it, including a template's
   own markup, rather than depending on one wrapper element existing.
   `body.has-site-nav`, not `.has-site-nav body` — the class is on the body, and
   an element is not its own descendant. */
body.has-site-nav {
    max-width: none;
    padding-left: calc(var(--sidebar-width) + var(--page-pad-x));
}

/* …and the measure moves down to the column, which centres in what is left. */
.has-site-nav .site-content {
    max-width: var(--content-max-width);
    margin-inline: auto;
}

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

/* A guide line down each nested level: at three levels deep the indent alone
   stops being legible. */
.nav-list .nav-list {
    margin-left: 0.75rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--divider-color);
}

.nav-list li {
    margin: 0.05rem 0;
}

.nav-list a {
    display: block;
    padding: 0.3rem 0.55rem;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.nav-list a:hover {
    background: var(--code-bg);
    color: var(--text);
}

.nav-current > a,
.nav-current > details > summary > a {
    background: var(--_accent-tint);
    color: var(--accent);
    font-weight: 600;
}

.nav-ancestor > a,
.nav-ancestor > details > summary > a {
    color: var(--text);
    font-weight: 500;
}

/* A section is a disclosure: the link is the summary's content and the
   chevron beside it is the summary itself, so the title navigates and the
   chevron opens. The user-agent marker is replaced because it sits before the
   text and reads as a bullet. */
.nav-section > details > summary {
    display: flex;
    align-items: center;
    list-style: none;
    cursor: pointer;
}

.nav-section > details > summary::-webkit-details-marker {
    display: none;
}

.nav-section > details > summary > a {
    flex: 1 1 auto;
    min-width: 0;
}

.nav-section > details > summary::after {
    content: "";
    flex: 0 0 auto;
    width: 0.45em;
    height: 0.45em;
    margin: 0 0.6rem 0 0.4rem;
    border-right: 1.5px solid var(--text-muted);
    border-bottom: 1.5px solid var(--text-muted);
    transform: rotate(-45deg);
    transition: transform 0.15s;
    opacity: 0.7;
}

.nav-section > details[open] > summary::after {
    transform: rotate(45deg);
}

.nav-section > details > summary:hover::after {
    opacity: 1;
    border-color: var(--text);
}

/* ── Pager ── */

.pager {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--divider-color);
    font-size: 0.9rem;
}

.pager a {
    display: block;
    max-width: 48%;
    text-decoration: none;
    font-weight: 550;
}

.pager a:hover {
    text-decoration: underline;
}

.pager a span {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.pager-next {
    margin-left: auto;
    text-align: right;
}

/* ── Breadcrumbs (single parent link, and the full trail) ── */

.breadcrumb,
.breadcrumbs {
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.breadcrumb a,
.breadcrumbs a {
    color: var(--text-muted);
    text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumbs a:hover {
    color: var(--accent);
    text-decoration: underline;
}

.breadcrumb-sep {
    margin: 0 0.4rem;
    color: var(--text-muted);
    opacity: 0.5;
}

/* ── Attachments ── */

/* A sidecar's page: the payload, shown as what it is. The frame a document
   sits in takes the column's width and a tall, bounded height; a picture is
   a figure like any the prose would carry. */
.attachment {
    margin: 0 0 1.25rem;
}

.attachment img,
.attachment video {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

.attachment audio {
    display: block;
    width: 100%;
}

.attachment iframe {
    display: block;
    width: 100%;
    height: min(80vh, 60rem);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    background: var(--surface-bg);
}

.attachment-download {
    font-size: 0.9rem;
}

/* ── Responsive ── */

@media (max-width: 60rem) {
    .site-bar {
        display: flex;
    }

    /* The drawer slides out *underneath* the bar, so its own first item
       needs the same clearance the page gets; and the bar already names the
       site, so the drawer's own masthead is redundant there. */
    .site-nav {
        padding-top: var(--nav-toggle-clear);
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: none;
    }

    .site-nav > .site-masthead {
        display: none;
    }

    .nav-toggle-state:checked ~ .site-nav {
        transform: translateX(0);
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
    }

    /* Clear the fixed bar, which would otherwise sit on top of the first
       heading. */
    body.has-site-nav {
        padding-left: var(--page-pad-x);
        padding-top: var(--nav-toggle-clear);
    }
}

/* Only the frame tightens on a phone. The body size is deliberately left alone:
   the old rule set `font-size: 15px` on the body, which threw away whatever a
   caller had put in `--font-size` — and 16px is the size at which iOS stops
   zooming a focused field anyway. */
@media (max-width: 600px) {
    :root {
        --page-pad-x: 1.1rem;
    }

    body {
        padding-top: 1.5rem;
    }

    .content h1 { font-size: 1.75rem; }
    .content h2 { font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    :root {
        --bg: #fff;
        --text: #000;
        --text-muted: #444;
    }

    .site-nav, .site-bar, .skip-link, .pager, nav.toc { display: none; }

    .heading-anchor { display: none; }

    body.has-site-nav {
        padding-left: 0;
        padding-top: 0;
    }

    body {
        max-width: none;
        font-size: 11pt;
    }

    .content pre, .content table, .content blockquote, .content img {
        break-inside: avoid;
    }

    .content :is(h1, h2, h3) {
        break-after: avoid;
    }
}

/* ── Colored highlights ── */

.highlight-mark {
    background: none;
    padding: 0.1em 0.2em;
    border-radius: 0.2em;
    /* The user agent forces `color: MarkText` — near-black — on `<mark>`, which
       is unreadable on the dark-mode swatches below. */
    color: inherit;
}

.highlight-red { background: oklch(0.92 0.12 25); }
.highlight-orange { background: oklch(0.93 0.1 60); }
.highlight-yellow { background: oklch(0.95 0.12 95); }
.highlight-green { background: oklch(0.92 0.08 145); }
.highlight-cyan { background: oklch(0.92 0.08 195); }
.highlight-blue { background: oklch(0.88 0.1 250); }
.highlight-violet { background: oklch(0.9 0.1 300); }
.highlight-pink { background: oklch(0.93 0.1 350); }
.highlight-brown { background: oklch(0.88 0.06 60); }
.highlight-grey { background: oklch(0.9 0 0); }

@media (prefers-color-scheme: dark) {
    .highlight-red { background: oklch(0.35 0.12 25); }
    .highlight-orange { background: oklch(0.38 0.1 60); }
    .highlight-yellow { background: oklch(0.42 0.12 95); }
    .highlight-green { background: oklch(0.38 0.08 145); }
    .highlight-cyan { background: oklch(0.38 0.08 195); }
    .highlight-blue { background: oklch(0.35 0.1 250); }
    .highlight-violet { background: oklch(0.38 0.1 300); }
    .highlight-pink { background: oklch(0.4 0.1 350); }
    .highlight-brown { background: oklch(0.38 0.06 60); }
    .highlight-grey { background: oklch(0.4 0 0); }
}

/* ── Spoilers ── */

.spoiler-mark {
    cursor: pointer;
    border-radius: 0.2em;
    padding: 0.1em 0.3em;
    transition: background 0.2s, color 0.2s;
}

.spoiler-hidden {
    background: var(--text);
    color: transparent;
    user-select: none;
}

.spoiler-revealed {
    background: var(--code-bg);
    color: var(--text);
}

/* ── Footnotes ──
 *
 * Two spellings, because two engines have rendered these pages. comrak used
 * `.footnotes` / `.footnote-ref`; twig, which replaced it so Djot and HTML
 * could be published at all, uses the DPUB-ARIA roles (`doc-endnotes`,
 * `doc-noteref`, `doc-backlink`). Both are styled so a site published before
 * that change and one published after look the same — the CSS is served fresh
 * on every publish, but the pages in a namespace are not all re-rendered.
 */

.footnotes,
[role="doc-endnotes"] {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--divider-color);
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* twig opens its endnotes section with its own rule; the section's border-top
   above is already the separator, so a second one reads as a double line. */
[role="doc-endnotes"] > hr {
    display: none;
}

.footnotes ol,
[role="doc-endnotes"] ol {
    padding-left: 1.5rem;
}

.footnotes li,
[role="doc-endnotes"] li {
    margin: 0.5rem 0;
}

/* Jumping to a note is a jump to a one-line target in a page of small grey
   text; without this the reader has to find it again by eye. */
.footnotes li:target,
[role="doc-endnotes"] li:target {
    background: var(--_accent-tint);
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 0.4rem var(--_accent-tint);
}

.footnote-ref a, .footnotes a,
a[role="doc-noteref"], [role="doc-endnotes"] a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}

.footnote-ref a:hover, .footnotes a:hover,
a[role="doc-noteref"]:hover, [role="doc-endnotes"] a:hover {
    text-decoration: underline;
}

sup.footnote-ref,
a[role="doc-noteref"] sup {
    font-size: 0.75em;
    line-height: 0;
    vertical-align: super;
}

/* The return arrow sits immediately after the note's last word otherwise. */
a[role="doc-backlink"],
.footnotes .footnote-backref {
    margin-left: 0.4em;
    text-decoration: none;
}

/* ── Generated index ──
 *
 * The markup `site::synthesize_index` writes for a site with no authored front
 * page: a `<ul>` of entries, optionally inside a `<section>` per group.
 */

.entry-group {
    margin-bottom: 2.5rem;
}

.entry-group h2 {
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--divider-color);
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Qualified with `.content` throughout, so that these outweigh the `.content
   ul` / `.content li` / `.content pre` rules above — which are more specific
   than a bare class and would otherwise put the list indent and the code-block
   border back. */
.content .entry-list,
.entry-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.content .entry-list li,
.entry-list li {
    margin: 0.75rem 0;
    padding-left: 0;
}

.entry-list a {
    text-decoration: none;
    font-weight: 550;
}

.entry-list a:hover {
    text-decoration: underline;
}

.entry-description {
    display: block;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ── Task lists ──
 *
 * twig marks the list rather than each item (`<ul class="task-list">`), so the
 * bullet has to be removed on the list and the indent given back by hand. The
 * selector is qualified with `.content` so that it outweighs `.content ul`,
 * which would otherwise keep the ordinary list indent it sets.
 */

.content .task-list,
.task-list {
    list-style: none;
    padding-left: 0.15rem;
}

.content .task-list li,
.task-list li {
    padding-left: 0;
}

.task-list input[type="checkbox"] {
    margin-right: 0.5rem;
    accent-color: var(--accent);
    vertical-align: baseline;
}

/* ── Embedded islands ──
 *
 * An HTML attachment embedded with `![alt](page.html)`. The `min-height` and
 * the final height both come from the tag — authored via `{height=…}`, then
 * measured by the resize bridge — so nothing here may set a height.
 */

.diaryx-island {
    display: block;
    width: 100%;
    margin: 1.5rem 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color-scheme: light dark;
}

/* ── Unrendered bodies ──
 *
 * A body the parser refused, shown as escaped source rather than dropped. It is
 * a failure the reader can see, so it is marked as one instead of passing for
 * an ordinary code block.
 */

.content .diaryx-unrendered,
.diaryx-unrendered {
    background: var(--code-bg);
    border: none;
    border-left: 3px solid var(--text-muted);
    padding: 1rem;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    white-space: pre-wrap;
    font-family: var(--font-mono);
    font-size: 0.9em;
    line-height: 1.5;
}