/* ==========================================================================
   Braindump — custom layer
   Loaded last, after normalize.css, tufte.css, htmlize.css and org.css.
   Everything here is either a token definition or a deliberate override of
   one of those files. Upstream files are kept pristine so they can be
   re-vendored without losing this work.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Ground and ink */
    --bg:            #fffff8;   /* Tufte ivory */
    --bg-sunk:       #faf9ee;   /* cards, backlink wells */
    --ink:           #111111;
    --ink-muted:     #6b6862;
    --ink-faint:     #93908a;

    /* Ornament */
    --rule:          #d8d5c8;
    --rule-strong:   #b3afa0;
    --accent:        #9a3b1b;   /* muted brick; hover, markers, focus */
    --accent-soft:   #c98f6a;
    --selection:     #f3e2c7;

    /* Link underlines sit lighter than the text they belong to */
    --link-underline: #c3bfae;

    /* Maturity marks */
    --seedling:      #7d9a5b;
    --budding:       #c08a3e;
    --evergreen:     #3b6e8f;

    --measure:       55%;       /* Tufte's text column */

    /* Code face.  No webfont: a monospace is read a few words at a time, so
       matching the reader's own screen beats shipping 100 kB for a face they
       may render worse.  Ordered best-first per platform, ending at Menlo /
       Consolas / DejaVu, which are always there.  Courier is deliberately
       absent — thin, small on the x-height, and the reason the old stack was
       hard to read in the dark. */
    --mono: ui-monospace, "SF Mono", "SFMono-Regular", "Cascadia Mono",
            "JetBrains Mono", "IBM Plex Mono", "Source Code Pro",
            Menlo, Consolas, "DejaVu Sans Mono", "Roboto Mono", monospace;
    /* Body line height as a length, so the dropcap can be sized against an
       exact number of lines.  1.4rem copy (tufte.css) x 1.62. */
    --body-line:     2.268rem;
    /* Measured for ET Book at 1.4rem: cap height, and the distance from a
       line box's top down to the cap top.  The dropcap uses these to sit on
       the text rather than on the line boxes. */
    --body-cap:      0.9422rem;
    --body-cap-top:  0.6253rem;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:            #171613;   /* warm near-black, suits ET Book */
        --bg-sunk:       #1e1d19;
        --ink:           #e6e2d7;
        --ink-muted:     #a09b8e;
        --ink-faint:     #7c776c;

        --rule:          #33312b;
        --rule-strong:   #4b483f;
        --accent:        #e08a62;
        --accent-soft:   #8a5f47;
        --selection:     #453a26;

        --link-underline: #565146;

        --seedling:      #9dbd7a;
        --budding:       #d9ab63;
        --evergreen:     #7fb0d0;
    }
}

:root[data-theme="dark"] {
    --bg:            #171613;
    --bg-sunk:       #1e1d19;
    --ink:           #e6e2d7;
    --ink-muted:     #a09b8e;
    --ink-faint:     #7c776c;

    --rule:          #33312b;
    --rule-strong:   #4b483f;
    --accent:        #e08a62;
    --accent-soft:   #8a5f47;
    --selection:     #453a26;

    --link-underline: #565146;

    --seedling:      #9dbd7a;
    --budding:       #d9ab63;
    --evergreen:     #7fb0d0;
}

/* --------------------------------------------------------------------------
   2. Ground
   -------------------------------------------------------------------------- */

/* A fallback face scaled to ET Book's width, so text set before the
   webfont arrives occupies the same lines and nothing shifts on swap.
   91.4% measured against Palatino on macOS; Georgia is within 0.1%. */
@font-face {
    font-family: "et-book-fallback";
    src: local("Palatino"), local("Palatino Linotype"), local("Book Antiqua"), local("Georgia");
    size-adjust: 91.4%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
}

html {
    color-scheme: light dark;
}

body {
    background-color: var(--bg);
    color: var(--ink);
    font-family: et-book, "et-book-fallback", Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
    text-wrap: pretty;
    hyphens: manual;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* tufte.css hard-codes the old #151515 dark ground; neutralise it so the
   tokens above are the single source of truth. */
@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--bg);
        color: var(--ink);
    }
}

::selection { background: var(--selection); }

/* Anything we give a display value to must still honour the hidden
   attribute, which the UA sheet applies at lower specificity. */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   3. Links

   tufte.css fakes descender-clearing underlines with stacked background
   gradients plus a twelve-stop text-shadow, all hard-coded to #fffff8. That
   breaks the moment the ground colour changes, and it is no longer needed:
   text-decoration-skip-ink does the same job natively. Rip it out.
   -------------------------------------------------------------------------- */

a:link,
a:visited,
.tufte-underline,
.hover-tufte-underline:hover {
    background: none;
    text-shadow: none;
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 0.055em;
    text-decoration-color: var(--link-underline);
    text-underline-offset: 0.18em;
    text-decoration-skip-ink: auto;
    transition: color 0.12s ease, text-decoration-color 0.12s ease;
}

@media (prefers-color-scheme: dark) {
    a:link,
    .tufte-underline,
    .hover-tufte-underline:hover {
        text-shadow: none;
    }
}

a:hover,
a:focus-visible {
    color: var(--accent);
    text-decoration-color: var(--accent);
}

a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 1px;
}

a:link::selection,
a:link::-moz-selection {
    text-shadow: none;
    background: var(--selection);
}

/* Index lists — the sitemap, "Related", "Other Topics", any bare list of
   note links. Underlining every item turns these into a wall of rules;
   the list itself already signals that they are links. */
section > ul a:link,
section > ul a:visited,
section > ol a:link,
section > ol a:visited,
.note-index a:link,
.note-index a:visited {
    text-decoration: none;
}

section > ul a:hover,
section > ol a:hover,
.note-index a:hover {
    text-decoration: underline;
    text-decoration-thickness: 0.055em;
    text-underline-offset: 0.18em;
    text-decoration-color: var(--accent);
}

/* Where a link goes, marked by a small glyph after it.  The exporter
   classifies every link in the body; the chrome carries its own classes
   and is never touched.

   The two site favicons are real images, vendored locally so no page makes
   a third-party request.  The moth and the arrow are masks instead, so they
   take their colour from the text and follow the theme. */
a.blog-link::after,
a.med-link::after,
a.external-link::after,
a.internal-link::after {
    content: "";
    display: inline-block;
    margin-left: 0.28em;
    vertical-align: -0.05em;
}

a.blog-link::after,
a.med-link::after {
    width: 0.76em;
    height: 0.76em;
    vertical-align: -0.07em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
a.blog-link::after { background-image: url("img/blog-favicon.png"); }
/* The medical notes' icon is a filled tile rather than a transparent glyph,
   so it is rounded and held back a little to sit at the weight of the star. */
a.med-link::after  {
    background-image: url("img/med-favicon.png");
    border-radius: 2px;
    opacity: 0.88;
}
a.med-link:hover::after { opacity: 1; }

/* Masked marks: alpha from the file, colour from the link. */
a.external-link::after,
a.internal-link::after {
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    opacity: 0.55;
}
a.external-link:hover::after,
a.internal-link:hover::after { opacity: 1; }

a.external-link::after {
    width: 0.6em;
    height: 0.6em;
    vertical-align: 0.06em;
    -webkit-mask-image: url("img/arrow-ne.svg");
    mask-image: url("img/arrow-ne.svg");
}

/* The moth is the commonest mark on the site, so it is set small and
   faint: at a glance it should read as texture, not as punctuation. */
a.internal-link::after {
    width: 0.66em;
    height: 0.54em;
    -webkit-mask-image: url("img/moth-mark.svg");
    mask-image: url("img/moth-mark.svg");
    opacity: 0.4;
}

/* The site's own furniture — the index, the home page's lists, the
   bibliography — is already nothing but internal links, so a mark on each
   row would stack into a column of noise saying nothing. Prose keeps it. */
.note-index a::after,
ul.recent a::after,
dl.start a::after,
.references a::after,
.site-header a::after,
.footer a::after,
.popover a::after { content: none; }

/* Links whose target is not published. Emitted by the exporter in place of
   an <a> so the reader never lands on a 404. */
.private-link {
    color: var(--ink-muted);
    border-bottom: 1px dotted var(--rule-strong);
    cursor: help;
}

/* --------------------------------------------------------------------------
   4. Site header
   -------------------------------------------------------------------------- */

.site-header {
    width: var(--measure);
    max-width: 100%;
    margin: 2.5rem 0 0;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--rule);
    display: flex;
    align-items: baseline;
    gap: 1.4rem;
    font-size: 1.05rem;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.site-header a:link,
.site-header a:visited {
    text-decoration: none;
    color: var(--ink-muted);
}

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

.site-header .site-title {
    font-variant: small-caps;
    text-transform: none;
    letter-spacing: 0.04em;
    font-size: 1.3rem;
    color: var(--ink);
    margin-right: auto;
}

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

.theme-toggle {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--ink-muted);
    cursor: pointer;
    letter-spacing: inherit;
    text-transform: inherit;
}

.theme-toggle:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   5. Title block
   -------------------------------------------------------------------------- */

h1.title {
    margin-top: 2.6rem;
    margin-bottom: 0.6rem;
    font-size: 2.9rem;
    line-height: 1.08;
    letter-spacing: -0.005em;
    max-width: var(--measure);
}

/* The date/author line. Was a raw org timestamp in body-copy size. */
.info {
    width: var(--measure);
    margin: 0 0 2.6rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--rule);
    font-size: 1.0rem;
    line-height: 1.5;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.info i,
.info em { font-style: normal; }

.info .sep { margin: 0 0.5em; color: var(--rule-strong); }

/* Maturity mark in the meta line.  The dot carries the colour, the word
   carries the meaning; the key on the home page explains both. */
.info .maturity { white-space: nowrap; }
.info .maturity .m-dot { margin-right: 0.45em; vertical-align: 0.04em; }

/* --------------------------------------------------------------------------
   5b. The home page

   The front door should not read like note number twenty-seven, so the
   title becomes a masthead and the page carries a few things no note has:
   the garden's own numbers, a key to the maturity marks, and the newest
   notes.  Everything here is generated at publish time except the wording,
   which lives in index.org.
   -------------------------------------------------------------------------- */

.masthead {
    width: var(--measure);
    max-width: 100%;
    margin: 2.6rem 0 0;
}

.masthead h1.title {
    font-size: 3.4rem;
    line-height: 1.02;
    margin: 0 0 0.3rem;
    letter-spacing: -0.012em;
    max-width: 100%;
}

.masthead .standfirst {
    width: 100%;
    font-size: 1.55rem;
    line-height: 1.45;
    color: var(--ink-muted);
    margin: 0.4rem 0 1.1rem;
}

.masthead-rule {
    height: 1px;
    background: var(--rule-strong);
    margin: 0 0 0.2rem;
}

/* Maturity marks, shared by the key, the stats line and the recent list. */
.m-dot {
    display: inline-block;
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    margin-right: 0.42em;
    vertical-align: 0.02em;
    background: var(--rule-strong);
}
.m-seedling  { background: var(--seedling); }
.m-budding   { background: var(--budding); }
.m-evergreen { background: var(--evergreen); }

.garden-stats {
    font-size: 0.85rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0.7rem 0 0;
    display: flex;
    gap: 1.1rem;
    flex-wrap: wrap;
    align-items: baseline;
}

/* Maturity key: a plain org list, given its colour by position, so the
   list in index.org stays readable prose. */
ul.maturity-key {
    width: var(--measure);
    max-width: 100%;
    list-style: none;
    padding-left: 0;
    -webkit-padding-start: 0;
    margin: 1.4rem 0;
}
ul.maturity-key > li {
    padding-left: 1.3em;
    position: relative;
    font-size: 1.15rem;
}
ul.maturity-key > li::before {
    content: "";
    position: absolute;
    left: 0.1em;
    top: 0.62em;
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background: var(--rule-strong);
}
ul.maturity-key > li:nth-child(1)::before { background: var(--seedling); }
ul.maturity-key > li:nth-child(2)::before { background: var(--budding); }
ul.maturity-key > li:nth-child(3)::before { background: var(--evergreen); }

/* Where to start: a description list, term as the link, definition as the
   one line that says why you would click it. */
dl.start {
    width: var(--measure);
    max-width: 100%;
    margin: 1.2rem 0 0;
    /* tufte.css indents description lists by 5%; these are rows, not an
       indented definition block. */
    padding-left: 0;
    -webkit-padding-start: 0;
}
dl.start > dt {
    padding-top: 0.85rem;
    border-top: 1px solid var(--rule);
    font-size: 1.35rem;
}
dl.start > dt:first-child { border-top: 0; padding-top: 0; }
dl.start > dd {
    margin: 0.15rem 0 0.85rem;
    font-size: 1.1rem;
    line-height: 1.45;
    color: var(--ink-muted);
}

/* Recently planted */
ul.recent {
    width: var(--measure);
    max-width: 100%;
    list-style: none;
    padding-left: 0;
    -webkit-padding-start: 0;
    margin: 0.8rem 0 0;
}
ul.recent > li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.7rem;
    align-items: baseline;
    padding: 0.45rem 0;
    margin-top: 0;
    border-bottom: 1px solid var(--rule);
}
ul.recent > li::before { content: none; }
ul.recent > li:last-child { border-bottom: 0; }
ul.recent time {
    font-size: 0.85rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-faint);
    white-space: nowrap;
}

/* Section labels on the home page.  index.org marks these headings with
   :HTML_CONTAINER_CLASS: home-section, so they read as quiet labels rather
   than as the italic headings a note uses. */
.home-section > h2,
article.note h2.section,
.section-label {
    font-size: 0.8rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    font-style: normal;
    color: var(--ink-faint);
    margin: 2.6rem 0 0.2rem;
}

/* --------------------------------------------------------------------------
   6. Headings and outline rhythm

   Org wraps every heading in .outline-N containers, so vertical rhythm has
   to be set on the containers, not just the h2/h3 elements.
   -------------------------------------------------------------------------- */

h2, h3, h4, h5, h6 {
    max-width: var(--measure);
    letter-spacing: -0.003em;
    text-wrap: balance;
    position: relative;
}

h1.title { text-wrap: balance; }

/* Section anchors, added by site.js */
h2 .anchor, h3 .anchor {
    position: absolute;
    left: -1.1em;
    top: 0;
    font-style: normal;
    font-size: 0.7em;
    line-height: inherit;
    color: var(--rule-strong);
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.12s ease;
}
h2:hover .anchor, h3:hover .anchor, .anchor:focus-visible { opacity: 1; }
.anchor:hover { color: var(--accent); }

h2 { font-size: 2.0rem; margin-top: 3.2rem; margin-bottom: 1.1rem; line-height: 1.15; }
h3 { font-size: 1.55rem; margin-top: 2.4rem; margin-bottom: 0.9rem; line-height: 1.2; }

h4 {
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 400;
    margin-top: 1.9rem;
    margin-bottom: 0.7rem;
    line-height: 1.25;
}

/* Section numbers, hung in the left margin.

   Headings are set the same at every level -- only size separates them, and
   at h3 that is barely two pixels over body copy.  The number says the depth
   instead, so the type does not have to.  Set at the heading's own size so
   the digits stand at its height, and right-aligned against the text edge so
   1 and 1.1 both finish in the same place.

   The gutter has to be built before anything can hang in it: org.css puts
   `overflow-y: auto' on div#body, which makes overflow-x compute to `auto'
   as well, and at no width is there any room inside that box to the left of
   the column.  So reserve a strip and pull the box left by the same amount,
   which leaves the text column exactly where it was.

   Two kinds of section are skipped, by the counter as well as the label:
   `.references' (the backlinks block, machinery rather than part of the
   note) and `.home-section' (the front page, which is a doorway rather than
   an argument -- numbering "Where to start" says nothing). */
:root { --marker-gutter: 2.9rem; }

div#body {
    padding-left: var(--marker-gutter);
    margin-left: calc(-1 * var(--marker-gutter));
}

article.note { counter-reset: h2sec; }
article.note .outline-2:not(.references):not(.home-section) { counter-increment: h2sec; counter-reset: h3sec; }
article.note .outline-2:not(.references):not(.home-section) .outline-3 { counter-increment: h3sec; }

article.note .outline-2:not(.references):not(.home-section) > h2,
article.note .outline-2:not(.references):not(.home-section) .outline-3 > h3 { position: relative; }

article.note .outline-2:not(.references):not(.home-section) > h2::before,
article.note .outline-2:not(.references):not(.home-section) .outline-3 > h3::before {
    position: absolute;
    right: 100%;              /* right edge meets the text edge... */
    margin-right: 0.35em;     /* ...less a hair of air */
    top: 0;
    /* `.outline-2 > h2' carries padding-top, and an absolutely positioned
       child is placed against the padding box -- so `top: 0' put the digits
       that far above the heading's own first line.  Taking the same padding
       drops them back onto its baseline, whatever that padding becomes. */
    padding-top: inherit;
    /* Inheriting both means the digits share the heading's baseline. */
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    font-style: normal;       /* lining figures upright against italic text */
    font-variant-numeric: lining-nums;
    white-space: nowrap;
    color: var(--ink-faint);
}
article.note .outline-2:not(.references):not(.home-section) > h2::before {
    content: counter(h2sec);
}
article.note .outline-2:not(.references):not(.home-section) .outline-3 > h3::before {
    content: counter(h2sec) "." counter(h3sec);
}

/* A phone has no margin to hang anything in -- the text column already runs
   to both edges, and stealing 30px for a gutter would cost about three
   characters a line.  So the number keeps its size and simply leads the
   heading instead of standing beside it. */
@media (max-width: 699px) {
    :root { --marker-gutter: 0rem; }

    article.note .outline-2:not(.references):not(.home-section) > h2::before,
    article.note .outline-2:not(.references):not(.home-section) .outline-3 > h3::before {
        position: static;
        padding-top: 0;
        margin-right: 0.4em;
    }
}

.outline-2 > h2 {
    padding-top: 0.5rem;
}

.home-section > h2 { padding-top: 0; }
.home-section > section > p:first-child { margin-top: 0.6rem; }

/* Headings that are themselves links (backlink sources, MoC lists) */
h2 a:link, h3 a:link, h4 a:link,
h2 a:visited, h3 a:visited, h4 a:visited {
    text-decoration: none;
}

h2 a:hover, h3 a:hover, h4 a:hover {
    color: var(--accent);
}

/* --------------------------------------------------------------------------
   7. Body copy
   -------------------------------------------------------------------------- */

section > p { line-height: var(--body-line); }

section > ul,
section > ol {
    line-height: 1.55;
}

li:not(:first-child) { margin-top: 0.4rem; }

section > ul { list-style: none; -webkit-padding-start: 0; padding-left: 0; }

section > ul > li {
    padding-left: 1.15em;
    position: relative;
}

section > ul > li::before {
    content: "";
    position: absolute;
    left: 0.15em;
    top: 0.72em;
    width: 0.32em;
    height: 0.32em;
    border-radius: 50%;
    background: var(--accent-soft);
}

/* Nested lists keep normal markers */
section > ul ul { list-style: disc; padding-left: 1.2em; }
section > ul ul > li { padding-left: 0; }
section > ul ul > li::before { content: none; }

hr {
    border-top: 1px solid var(--rule);
    width: var(--measure);
    margin: 2.5rem 0;
}

blockquote {
    border-left: 2px solid var(--rule-strong);
    padding-left: 1.2rem;
    margin-left: 0;
    color: var(--ink-muted);
}

div.epigraph { margin: 3rem 0; }
div.epigraph > blockquote { margin-top: 1.5rem; margin-bottom: 1.5rem; }

/* --------------------------------------------------------------------------
   7b. Typographic details (exporter marks these up; see +org-publish.el)
   -------------------------------------------------------------------------- */

/* Acronyms: letters stay upper case in the markup, so copied text is
   unchanged; the browser sets them as small caps. */
abbr.small-caps {
    font-variant-caps: all-small-caps;
    font-feature-settings: "c2sc", "smcp";
    letter-spacing: 0.035em;
    text-decoration: none;
    border: 0;
}

/* Slanted fractions built from sup/sub around a fraction slash */
.fraction { white-space: nowrap; }
.fraction sup, .fraction sub {
    font-size: 0.68em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
.fraction sup { top: -0.45em; }
.fraction sub { top: 0.12em; }

/* Illuminated dropcap on the opening paragraph of a note.

   Two layers from two fonts, after turntrout.com: the ornament (EB Garamond
   Initials, the "F1" cut) is drawn by ::before from data-letter, and the
   plain letter (the "F2" cut) by the span itself.  Both fonts are OFL; the
   letter-only subsets are the ones turntrout.com serves. */
@font-face {
    font-family: "EBGaramondInitialsF1";
    src: url("fonts/EBGaramondInitialsF1.woff2") format("woff2");
    font-display: swap;
    unicode-range: U+20, U+41-5A;
}
@font-face {
    font-family: "EBGaramondInitialsF2";
    src: url("fonts/EBGaramondInitialsF2.woff2") format("woff2");
    font-display: swap;
    unicode-range: U+20, U+41-5A;
}

article.note {
    /* How many lines of copy the dropcap stands beside.  Its ink is fitted
       to those lines exactly: the top of the ornament meets the cap height
       of the first line, and its foot sits on the baseline of the last.
       Sizing it to whole line *boxes* instead leaves the ornament
       overshooting the text at both ends, which reads as an extra line. */
    --dropcap-lines: 3;
    --dropcap-ornament: var(--rule-strong);   /* site.js colours it on a 7% roll */
}

/* The exporter wraps the opening letter:
   <span class="dropcap" data-letter="M">M</span>
   The span is the plain letter (F2); its ::before draws the ornament (F1)
   from data-letter in the same box.  Both cuts come from one font, so their
   vertical metrics match and the two glyphs register exactly. */
.dropcap {
    position: relative;
    float: left;
    display: block;
    width: 1em;
    margin: calc(var(--body-cap-top) - 0.005em) 0.14em 0 0;
    font-family: "EBGaramondInitialsF2", et-book, serif;
    /* Ink spans (lines - 1) baselines plus one cap height; the ornament's
       own ink is 99% of its em box, hence the divisor. */
    font-size: calc((((var(--dropcap-lines) - 1) * var(--body-line)) + var(--body-cap)) / 0.99);
    height: 1em;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    color: var(--ink);
}
/* A first paragraph shorter than the dropcap leaves the float sticking out
   below it, and the next list or paragraph wraps around it -- indented for
   a line or two with nothing beside it.  Everything after the dropcap's own
   paragraph starts below the ornament instead. */
p.dropcap-para ~ * { clear: left; }

/* The first few words alongside the dropcap, set in small caps.  The
   letters stay lower case in the markup, so copied text is unchanged. */
.opening {
    font-variant-caps: small-caps;
    font-feature-settings: "smcp";
    letter-spacing: 0.045em;
}

.dropcap::before {
    content: attr(data-letter);
    position: absolute;
    inset: 0;
    font-family: "EBGaramondInitialsF1", et-book, serif;
    color: var(--dropcap-ornament);
    pointer-events: none;
}

/* Tailpiece.  The ornament and its rules are one SVG emitted by the
   exporter, so all this does is size and colour it. */
.tailpiece {
    width: var(--measure);
    max-width: 100%;
    margin: 3.2rem 0 0.5rem;
    text-align: center;
    color: var(--rule-strong);
}

/* Fixed height, width from the aspect ratio.  `width: 100%' stretched the
   old 64x14 ornament across the whole column -- a twelvefold blow up --
   whenever the stylesheet was newer than the published pages.  Sizing on
   height instead means any ornament, of any age or proportion, renders at
   a sane size. */
.tailpiece svg {
    display: inline-block;
    height: 2.6rem;
    width: auto;
    max-width: 100%;
}

/* Cite-this block */
.cite-this {
    width: var(--measure);
    max-width: 100%;
    box-sizing: border-box;
    margin: 2.2rem 0 0;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--rule);
}
.cite-this summary {
    padding: 0.8rem 0 0;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    cursor: pointer;
    list-style: none;
}
.cite-this summary::-webkit-details-marker { display: none; }
.cite-this summary:hover { color: var(--accent); }
.cite-this pre {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    margin: 0.6rem 0 0;
    padding: 0.8rem 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;    /* long note URLs */
    background: var(--bg-sunk);
    border: 1px solid var(--rule);
    border-radius: 3px;
}

/* --------------------------------------------------------------------------
   7c. Flashcards (:ANKI-CARD: drawers)
   -------------------------------------------------------------------------- */

.anki-card {
    position: relative;
    width: var(--measure);
    max-width: 100%;
    box-sizing: border-box;
    margin: 1.8rem 0;
    padding: 1.1rem 1.3rem 1rem;
    background: var(--bg-sunk);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--accent-soft);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.anki-card:hover, .anki-card:focus-visible { border-left-color: var(--accent); outline: none; }
.anki-card:focus-visible { box-shadow: 0 0 0 2px var(--accent-soft); }

.anki-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.anki-card p { width: 100%; margin: 0.3rem 0; line-height: 1.5; }
.anki-front p { font-size: 1.3rem; }
.anki-back { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px dashed var(--rule-strong); }
.anki-extra { margin-top: 0.5rem; color: var(--ink-muted); }
.anki-extra p { font-size: 1.15rem; }

.anki-reveal {
    display: inline-block;
    margin-top: 0.8rem;
    padding: 0.25rem 0.8rem;
    font: inherit;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    background: transparent;
    border: 1px solid var(--accent-soft);
    border-radius: 2px;
    cursor: pointer;
}
.anki-reveal:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* Cloze blanks: a ruled gap until revealed */
.cloze {
    display: inline-block;
    min-width: 4ch;
    padding: 0 0.3em;
    border-bottom: 1.5px solid var(--accent);
    color: transparent;
    position: relative;
}
.cloze::after {
    content: attr(data-hint);
    position: absolute;
    left: 0; right: 0;
    text-align: center;
    color: var(--ink-faint);
    font-size: 0.8em;
    font-style: italic;
}
.is-revealed .cloze { color: var(--accent); border-bottom-color: transparent; }
.is-revealed .cloze::after { content: none; }

/* --------------------------------------------------------------------------
   7d. Elements org emits that the upstream sheets never styled
   -------------------------------------------------------------------------- */

/* Display maths.  KaTeX lays out its own box; hold it to the text column
   and let a wide equation scroll rather than widening the page. */
.katex-display {
    /* Full width of its paragraph, which already carries the measure --
       var(--measure) here would take 55% of 55%. */
    width: 100%;
    max-width: 100%;
    /* equation/align environments are emitted as a bare span in the
       section rather than inside a <p>, so they would otherwise inherit
       the 15px root size and render visibly smaller than \[ \] blocks.
       Pin every display block to body copy size. */
    font-size: 1.4rem;
    margin: 1.6rem 0;
    padding: 0.2rem 0;
    /* Wide equations scroll rather than widening the page.  The tagged
       environments otherwise paint an always-visible scrollbar track even
       when there is nothing to scroll, so hide the bar and keep the
       scrolling -- the treatment org.css already gives code blocks. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

/* KaTeX puts overflow-x:auto on .katex-html too, and a tagged equation
   overshoots it by a pixel or two, so the browser paints a scrollbar
   track across the block.  Keep the scrolling, drop the bar. */
.katex-display,
.katex-display .katex-html { scrollbar-width: none; }
.katex-display::-webkit-scrollbar,
.katex-display .katex-html::-webkit-scrollbar { display: none; }

/* KaTeX ships a 1.21em default, tuned for Computer Modern's small
   x-height.  Against ET Book that reads oversized inline, so match the
   surrounding copy and let only display maths sit slightly larger. */
.katex { font-size: 1em; }
.katex-display > .katex { font-size: 1.1em; }
.katex-error { color: var(--accent); font-family: Consolas, Menlo, monospace; font-size: 0.85em; }

/* #+begin_center */
.org-center {
    width: var(--measure);
    max-width: 100%;
    text-align: center;
}
.org-center > p { width: 100%; }

/* Description lists (term :: definition).  Left at the browser default --
   term in body type on its own line, definition indented under it. */
section > dl { width: var(--measure); max-width: 100%; }

/* Checkbox items.  org emits a literal <code>[ ]</code> / <code>[X]</code>;
   hide it and draw a real box, so a task list reads as one. */
section > ul > li.on > code:first-child,
section > ul > li.off > code:first-child { display: none; }

section > ul > li.on,
section > ul > li.off {
    position: relative;
    padding-left: 1.6em;
    list-style: none;
}

section > ul > li.on::before,
section > ul > li.off::before {
    content: "";
    position: absolute;
    left: 0.1em;
    top: 0.62em;
    width: 0.7em;
    height: 0.7em;
    box-sizing: border-box;
    border: 1px solid var(--rule-strong);
    border-radius: 2px;
    background: none;
}

section > ul > li.on::before {
    background: var(--accent);
    border-color: var(--accent);
}

/* The tick, drawn as two borders rotated into a check. */
section > ul > li.on::after {
    content: "";
    position: absolute;
    left: 0.26em;
    top: 0.78em;
    width: 0.3em;
    height: 0.15em;
    border-left: 1.5px solid var(--bg);
    border-bottom: 1.5px solid var(--bg);
    transform: rotate(-45deg);
}

section > ul > li.on { color: var(--ink-faint); }

/* Ordered lists: tufte zeroes the padding, which leaves the numbers
   outside the box and invisible. */
section > ol {
    padding-left: 1.6em;
    -webkit-padding-start: 1.6em;
}
section > ol > li { padding-left: 0.2em; }
section > ol > li::marker { color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   8. Sidenotes
   -------------------------------------------------------------------------- */

.sidenote,
.marginnote {
    color: var(--ink-muted);
    line-height: 1.45;
}

.sidenote-number:after,
.sidenote:before {
    color: var(--accent);
}

label.sidenote-number { color: var(--accent); }

/* --------------------------------------------------------------------------
   9. Backlinks

   The exporter appends these under a "Backlinks" heading with
   HTML_CONTAINER_CLASS: references. Untouched, they render as h2/h3/h4
   identical to real content and read as part of the note. Demote the whole
   block and set it apart.
   -------------------------------------------------------------------------- */

.references {
    width: var(--measure);
    max-width: 100%;
    margin-top: 4.5rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--rule-strong);
}

.references > h2 {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-style: normal;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0 0 1.6rem;
}

/* Each backlink source becomes a card */
.references .outline-3 {
    background: var(--bg-sunk);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 1rem 1.2rem 0.85rem;
    margin-bottom: 0.9rem;
}

.references h2,
.references h3,
.references h4 { max-width: 100%; }

.references .outline-3 > h3 {
    font-family: et-book, Palatino, Georgia, serif;
    font-style: normal;
    font-size: 1.25rem;
    margin: 0 0 0.35rem;
    line-height: 1.3;
}

.references .outline-3 > h3 a:link,
.references .outline-3 > h3 a:visited {
    text-decoration: none;
}

.references .outline-3 > h3 a:hover { color: var(--accent); }

/* The "outline" breadcrumb org inserts as an italic h4 */
.references .outline-4 > h4 {
    font-size: 0.9rem;
    font-style: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0 0 0.4rem;
}

.references .outline-4 > h4 i,
.references .outline-4 > h4 em { font-style: normal; }

/* Context snippet */
.references section > p,
.references section > ul,
.references section > ol {
    width: 100%;
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--ink-muted);
    margin: 0.4rem 0;
}

.references section > ul > li::before { background: var(--rule-strong); }

.references .outline-4 { margin-top: 0.6rem; }

/* Bibliography emitted by #+print_bibliography. org.css lets it run to 80%
   of the page, past the sidenote gutter. */
section > .csl-bib-body,
.csl-bib-body {
    width: var(--measure);
    max-width: 100%;
    margin: 1.4rem 0;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--ink-muted);
}

.csl-entry + .csl-entry { margin-top: 0.5rem; }

/* --------------------------------------------------------------------------
   9b. Trail

   Where a note sits, from org-roam-trail: a breadcrumb above the title, a
   Trail block above the backlinks, and trail.html, the whole tree.  The
   breadcrumb borrows the meta line's voice; the block borrows the
   backlinks' label and rule, since both are machinery around the note.
   -------------------------------------------------------------------------- */

.trail-crumbs {
    width: var(--measure);
    max-width: 100%;
    margin: 2.4rem 0 0;
    font-size: 0.95rem;
    line-height: 1.5;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.trail-crumbs + h1.title { margin-top: 0.5rem; }

/* A note filed in several places gets a line per path, stacked beside the
   one Trail link so they line up with each other. */
.trail-crumbs { display: flex; align-items: baseline; }
.trail-crumbs .trail-paths { display: flex; flex-direction: column; }

/* ET Book has no glyph of its own at U+203A and shows a ligature there. */
.trail-crumbs .sep,
.trail-nav .sep {
    margin: 0 0.45em;
    color: var(--rule-strong);
    font-family: Palatino, "Palatino Linotype", Georgia, serif;
}

.trail-crumbs a:link,
.trail-crumbs a:visited {
    color: var(--ink-muted);
    text-decoration: none;
}

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

/* An unpublished step on the path is context, not a broken link. */
.trail-crumbs .private-link { border-bottom: 0; cursor: default; }

/* Two blocks of machinery in a row should not each open a new chapter. */
.references.trail + .references { margin-top: 2.4rem; }

.trail-nav p,
.trail-nav ul {
    width: 100%;
    font-size: 1.15rem;
    line-height: 1.5;
    margin: 0.4rem 0;
}

.trail-nav .trail-step {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
}

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

.trail-nav .trail-label {
    margin-top: 1.3rem;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.trail-nav ul { list-style: none; padding-left: 0; -webkit-padding-start: 0; }
.trail-nav li { margin: 0.2rem 0; }

.trail-nav a:link,
.trail-nav a:visited,
ul.trail-tree a:link,
ul.trail-tree a:visited { text-decoration: none; }

.trail-nav a:hover,
ul.trail-tree a:hover {
    text-decoration: underline;
    text-decoration-thickness: 0.055em;
    text-underline-offset: 0.18em;
    text-decoration-color: var(--accent);
}

/* trail.html */

.trail-intro { color: var(--ink-muted); }

ul.trail-tree,
ul.trail-tree ul {
    list-style: none;
    padding-left: 0;
    -webkit-padding-start: 0;
    margin: 0;
}

ul.trail-tree {
    width: var(--measure);
    max-width: 100%;
    margin-top: 1.6rem;
}

/* The indent guide: a hairline running down from the parent's marker. */
ul.trail-tree ul {
    margin-left: -0.75rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--rule);
}

ul.trail-tree li {
    position: relative;
    padding-left: 1.1rem;
    margin: 0.3rem 0;
    font-size: 1.3rem;
    line-height: 1.45;
}

ul.trail-tree li::before { content: none; }

/* Branches are <details> only for folding; undo the code-folding card
   that org.css and section 11 give every <details>. */
ul.trail-tree details {
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}

ul.trail-tree summary {
    list-style: none;
    color: inherit;
    font-size: inherit;     /* org.css enlarges summaries */
    cursor: pointer;
}

ul.trail-tree summary::-webkit-details-marker { display: none; }

ul.trail-tree summary::before {
    content: "▸";
    position: absolute;
    left: 0;
    top: 0.2em;
    font-size: 0.8em;
    color: var(--ink-faint);
    transition: transform 0.15s;
}

ul.trail-tree details[open] > summary::before { transform: rotate(90deg); }
ul.trail-tree summary:hover::before { color: var(--accent); }

/* The note a breadcrumb sent the reader to. */
ul.trail-tree .trail-here > a,
ul.trail-tree .trail-here > details > summary > a { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
    ul.trail-tree summary::before { transition: none; }
}

/* --------------------------------------------------------------------------
   10. Tables

   org.css centres everything and draws a vertical rule between every cell.
   Quieten it, and let wide tables scroll instead of blowing out the page.
   -------------------------------------------------------------------------- */

section > table {
    /* Always spans the text column, so the row rules run the full measure
       and columns take their share of it.  Sizing to max-content instead
       makes short tables shrink into a cramped box. */
    width: var(--measure);
    max-width: var(--measure);
    table-layout: auto;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 1.05rem;
    text-align: left;
    border-collapse: collapse;
}

/* A long unbroken string (a URL, say) would otherwise widen the table past
   the column.  `break-word' breaks only when a word genuinely cannot fit;
   `anywhere' also shrinks the column's min-content width, which crushed
   narrow columns -- "link" wrapping to "lin/k". */
section > table td,
section > table th { overflow-wrap: break-word; }
/* Marker columns hold one short word; let them size to it. */
section > table td:first-child,
section > table th:first-child { white-space: nowrap; width: 1%; }

section > table thead { border-bottom: 1px solid var(--rule-strong); }
section > table tr { border-top: 1px solid var(--rule); }
section > table tr:first-child { border-top: 0; }
section > table td + td,
section > table th + th { border-left: 0; }

section > table th {
    font-weight: 400;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    text-align: left;
}

section > table td,
section > table th { padding: 0.45em 1.1em 0.45em 0; }

section > table td.org-left,
section > table th.org-left { text-align: left; }

/* --------------------------------------------------------------------------
   11. Code

   org.css gives inline code a yellow rounded border, which fights with
   everything else on the page.
   -------------------------------------------------------------------------- */

code, kbd, samp, pre, pre > code, .verbatim {
    font-family: var(--mono);
    font-variant-ligatures: none;   /* -> and != should read as typed */
}

code,
:not(pre) > code {          /* org.css gives inline code a #DDD border and #333 text */
    border: 0;
    border-radius: 2px;
    margin: 0;
    background: var(--bg-sunk);
    color: var(--ink);
    padding: 0.08em 0.35em;
    /* These faces carry a taller x-height than the old stack, so they read
       level with the body copy a touch smaller than before. */
    font-size: 0.78em;
}

pre > code,
pre.example {
    background: var(--bg-sunk);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 0.9rem 1.1rem;
    margin-left: 0;
    width: var(--measure);
    box-sizing: border-box;
}

pre > code { display: block; }

pre.code {
    position: relative;
    width: var(--measure);
    max-width: 100%;
    box-sizing: border-box;
    margin: 1.6rem 0;
    padding: 0;
}
pre.code > code {
    width: 100%;
    margin: 0;
    padding: 1.1rem 1.1rem 0.9rem;
    font-size: 0.88rem;
    line-height: 1.5;
    tab-size: 4;
}
/* org.css draws its own label with pre>code:before; replace it */
pre > code::before { content: none !important; }
pre.code[data-lang]::before {
    content: attr(data-lang);
    position: absolute;
    top: 0.45rem;
    right: 0.7rem;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    pointer-events: none;
    z-index: 1;                 /* above the <code> background */
}
pre.code .code-copy, .cite-this .code-copy {
    position: absolute;
    z-index: 2;
    top: 0.3rem;
    right: 0.5rem;
    padding: 0.15rem 0.5rem;
    font: inherit;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    background: var(--bg-sunk);
    border: 1px solid var(--rule);
    border-radius: 2px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease;
}
pre.code:hover .code-copy, pre.code .code-copy:focus-visible { opacity: 1; }
pre.code .code-copy:hover, .cite-this .code-copy:hover { color: var(--accent); border-color: var(--accent-soft); }
.cite-this .code-copy { opacity: 1; }   /* the copy is the point here: always visible */
pre.code:hover[data-lang]::before { opacity: 0; }

/* Syntax palette — htmlize emits face classes (org-html-htmlize-output-type
   'css).  Warm, low-saturation tones that sit on both grounds. */
:root {
    --syn-keyword:  #7a3e9d;
    --syn-builtin:  #5b4a9a;
    --syn-string:   #8a5a1a;
    --syn-comment:  #8f8a7c;
    --syn-function: #1f5f8b;
    --syn-variable: #7d4a2a;
    --syn-constant: #1d7a6e;
    --syn-type:     #3b7a3b;
    --syn-doc:      #8a5a1a;
    --syn-warning:  #b33a2b;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --syn-keyword:  #c9a2e6;
        --syn-builtin:  #b3a6ec;
        --syn-string:   #d9b072;
        --syn-comment:  #8c8778;
        --syn-function: #8fc4e8;
        --syn-variable: #e0a884;
        --syn-constant: #8fd3c4;
        --syn-type:     #a6d49a;
        --syn-doc:      #d9b072;
        --syn-warning:  #ef8a78;
    }
}
:root[data-theme="dark"] {
    --syn-keyword:  #c9a2e6;
    --syn-builtin:  #b3a6ec;
    --syn-string:   #d9b072;
    --syn-comment:  #8c8778;
    --syn-function: #8fc4e8;
    --syn-variable: #e0a884;
    --syn-constant: #8fd3c4;
    --syn-type:     #a6d49a;
    --syn-doc:      #d9b072;
    --syn-warning:  #ef8a78;
}
pre.code .org-keyword               { color: var(--syn-keyword); }
pre.code .org-builtin               { color: var(--syn-builtin); }
pre.code .org-string                { color: var(--syn-string); }
pre.code .org-doc                   { color: var(--syn-doc); font-style: italic; }
pre.code .org-comment,
pre.code .org-comment-delimiter     { color: var(--syn-comment); font-style: italic; }
pre.code .org-function-name         { color: var(--syn-function); }
pre.code .org-variable-name         { color: var(--syn-variable); }
pre.code .org-constant              { color: var(--syn-constant); }
pre.code .org-type                  { color: var(--syn-type); }
pre.code .org-warning               { color: var(--syn-warning); }
pre.code .org-preprocessor          { color: var(--syn-builtin); }
pre.code .org-negation-char         { color: var(--syn-warning); }
pre.code [class^="org-"]            { background: transparent; }

summary { color: var(--accent); }

details {
    width: var(--measure);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 0.7rem 1rem;
}

/* --------------------------------------------------------------------------
   11b. Images
   -------------------------------------------------------------------------- */

img { height: auto; }   /* width/height attrs reserve space; keep ratio */

/* Diagrams and line art drawn for a light ground: add
   #+ATTR_HTML: :class invert  to the image in org and it flips in dark mode. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) img.invert { filter: invert(0.92) hue-rotate(180deg); }
}
:root[data-theme="dark"] img.invert { filter: invert(0.92) hue-rotate(180deg); }

/* --------------------------------------------------------------------------
   11c. Link previews (site.js)
   -------------------------------------------------------------------------- */

.popover {
    position: absolute;
    z-index: 50;
    width: 22rem;
    max-width: calc(100vw - 2rem);
    box-sizing: border-box;
    padding: 0.9rem 1.1rem 1rem;
    background: var(--bg);
    border: 1px solid var(--rule-strong);
    border-radius: 4px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
    font-size: 1.05rem;
    line-height: 1.45;
    pointer-events: auto;
}
.popover-title { font-size: 1.2rem; line-height: 1.3; margin-bottom: 0.2rem; }
.popover-meta {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 0.4rem;
}
.popover p { margin: 0; color: var(--ink-muted); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   12. Footer / go-to-top
   -------------------------------------------------------------------------- */

.footer {
    width: var(--measure);
    max-width: 100%;
    margin-top: 5rem !important;
    padding: 1.2rem 0 3rem;
    border-top: 1px solid var(--rule);
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.footer a:link,
.footer a:visited { text-decoration: none; color: var(--ink-faint); }
.footer a:hover { color: var(--accent); }

.goto-top {
    margin-left: auto;
    text-transform: none;
    letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   13. Note index / search (sitemap page)
   -------------------------------------------------------------------------- */

.note-search {
    width: var(--measure);
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 0 2rem;
    padding: 0.6rem 0.2rem;
    font-family: inherit;
    font-size: 1.25rem;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rule-strong);
}

.note-search::placeholder { color: var(--ink-faint); }
.note-search:focus {
    outline: none;
    border-bottom-color: var(--accent);
}

.note-index {
    width: var(--measure);
    max-width: 100%;
    list-style: none;
    margin: 0;
    padding-left: 0;
    -webkit-padding-start: 0;
}

.note-index > li {
    /* Two columns rather than a wrapping flex row: the date keeps its own
       column at the right whatever the title's length.  With flex-wrap a
       long title pushed the date onto the next line, so some rows had the
       date to the right and others underneath. */
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 1rem;
    align-items: baseline;
    padding: 0.6rem 0;
    margin-top: 0;
    border-bottom: 1px solid var(--rule);
}

.note-index > li > a { grid-column: 1; }
.note-index > li > time { grid-column: 2; }
.note-index > li > .note-summary { grid-column: 1 / -1; }

.note-index > li::before { content: none; }
.note-index > li:last-child { border-bottom: 0; }



.note-index time {
    flex: 0 0 auto;
    font-size: 0.9rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ink-faint);
}

.note-summary {
    flex-basis: 100%;
    width: 100%;
    margin: 0.2rem 0 0;
    font-size: 1.05rem;
    line-height: 1.45;
    color: var(--ink-muted);
}

.note-index-empty {
    color: var(--ink-faint);
    font-style: italic;
}

.note-count {
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   14. Narrow screens
   -------------------------------------------------------------------------- */

/* Wide screens.  tufte.css and org.css each add a one-sided left gutter
   (body padding-left 12.5%, #container padding-left 12.5%) and let the
   sidenotes hang into whatever is left, which overflows the viewport
   anywhere below about 1300px.  Instead, centre one shell wide enough for
   the text column and the sidenote gutter together, and let that shell own
   the horizontal space. */
@media (min-width: 1100px) {
    body {
        /* The shell must leave at least the marker gutter outside itself at
           each edge, or pulling div#body left to make room for the section
           numbers takes it off the side of the viewport.  Between 1100 and
           ~1220 that costs the column about 27px; nothing above 1280 notices. */
        --shell-inset: calc(2 * var(--marker-gutter) + 1rem);
        width: min(100% - var(--shell-inset), 1120px);
        max-width: none;
        padding-left: 0;
        padding-right: 0;
        margin-inline: auto;
    }
    div#container {
        width: 100%;
        max-width: none;
        padding-left: 0;
        -webkit-padding-start: 0;
    }
}

/* Tablet / small laptop.  tufte.css only collapses its margin-note layout
   below 760px, but the 55% text column plus a sidenote hanging into
   margin-right:-60% needs roughly 1100px before it fits.  Between the two
   the page overflows sideways and the column sits well right of centre.
   Give that range the same single-column treatment as narrow screens. */
@media (min-width: 761px) and (max-width: 1099px) {
    body { width: 86%; padding-left: 7%; padding-right: 7%; }
    /* padding-left is the marker gutter (see "Section numbers" above), not
       one of org.css's; zeroing it here would clip every section number. */
    div#body { width: 100%; padding-left: var(--marker-gutter); padding-right: 0; }
    div#container { width: 100%; padding-left: 0; -webkit-padding-start: 0; }

    :root { --measure: 100%; }

    hr,
    section > p,
    section > p + span,
    section > footer,
    section > table,
    blockquote p,
    blockquote footer,
    .org-center,
    section > dl { width: 100%; }

    /* Width only -- zeroing the padding here would take the numbers off
       the ordered lists. */
    section > dl,
    section > ol,
    section > ul { width: 100%; }

    figure { max-width: 100%; }
    figcaption,
    figure.fullwidth figcaption { margin-right: 0; max-width: none; }
    blockquote { margin-left: 0; margin-right: 0; }
    pre > code, pre.example { width: 100%; }

    /* Sidenotes become inline notes behind their number, as below 760px. */
    label.margin-toggle:not(.sidenote-number) { display: inline; }
    label { cursor: pointer; }
    .sidenote, .marginnote { display: none; }
    .margin-toggle:checked + .sidenote,
    .margin-toggle:checked + .marginnote {
        display: block;
        float: left;
        left: 1rem;
        clear: both;
        width: 95%;
        margin: 1rem 2.5%;
        position: relative;
    }

    h2 .anchor, h3 .anchor { position: static; margin-left: 0.4em; }
}

@media (max-width: 760px) {
    body { padding-left: 7%; padding-right: 7%; width: 86%; }

    /* One column here, so the measure is the whole column.  Everything
       sized against it -- tables, cards, the index, the rules -- follows. */
    :root { --measure: 100%; }

    /* org.css gives the wrapper divs their own one-sided gutters
       (#container padding-left 12.5%, #body padding-right 8%), which it
       never balances on narrow screens -- the text ends up pushed right.
       Let `body' be the only thing that insets the column. */
    div#body {
        width: 100%;
        padding-left: var(--marker-gutter);   /* see "Section numbers" above */
        padding-right: 0;
    }
    div#container {
        width: 100%;
        padding-left: 0;
        -webkit-padding-start: 0;
    }

    h1.title { font-size: 2.2rem; max-width: 100%; }
    h2 { font-size: 1.7rem; }
    h3 { font-size: 1.4rem; }
    h2, h3, h4, h5, h6 { max-width: 100%; }

    .site-header,
    .info,
    .references,
    .footer,
    .note-index,
    .note-search,
    .note-count,
    hr,
    details,
    pre > code,
    pre.example { width: 100%; }

    section > table { max-width: 100%; }
    section > .csl-bib-body,
    .csl-bib-body { width: 100%; }
    .anki-card, .cite-this, pre.code, .tailpiece,
    .org-center, section > dl,
    .masthead, ul.maturity-key, dl.start, ul.recent { width: 100%; }
    .masthead h1.title { font-size: 2.4rem; }
    .masthead .standfirst { font-size: 1.3rem; }
    h2 .anchor, h3 .anchor { position: static; margin-left: 0.4em; }
    /* Three lines here too; two looked undersized against the title. */

    .site-header { gap: 1rem; font-size: 0.95rem; }
    .site-header .site-title { font-size: 1.2rem; }

    /* Date stays in its own column here too, so every row reads the same
       way at every width. */
    .note-index > li { column-gap: 0.7rem; }
}

/* --------------------------------------------------------------------------
   15. Print
   -------------------------------------------------------------------------- */

@media print {
    .site-header,
    .theme-toggle,
    .goto-top,
    .note-search,
    .code-copy,
    .anchor,
    .popover,
    .cite-this { display: none; }
    .anki-back, .anki-extra { display: block !important; }
    .cloze { color: inherit; }

    body { background: #fff; color: #000; padding-left: 0; width: 100%; }
    a:link, a:visited { text-decoration: none; }
    .references { break-inside: avoid; }
}