/* kibernetikanto.fyi — one design, two surfaces.

   Structure, templates and type are the same by day and by night; only the
   tokens in the two [data-surface] blocks differ (light paper 07:00-18:59,
   teletext black otherwise; see partials/r3/head.html).

   Chosen from a prototype of ten themes and a four-critic review (branch
   prototype/themes, prototype/critiques/SYNTHESIS.md). It combines:
   - h2-paper-index: the home order, the linked swatch strip, the Fastext row
     repeated at the foot, the 16px phone gutter, the contents-box rule
     (style a post's own "Contents:" list instead of adding a second one).
   - h3-fastext: page numbers, header row, Fastext keys, crumb and page
     turns, Bedstead in small doses, contents lines with dotted leaders, the
     2px link underline and thick focus ring, the 404's page list.
   - h1-ridge-reader: 18px / 1.65 with a 0.7-line paragraph gap, the
     full-height swatch column, the ffr colour logic.
   - h4-accent-poster: colour names printed in swatches, the phone bot row
     order, PAGE NOT IN SERVICE as a poster. */

@font-face {
    font-family: "r3-bedstead";
    src: url("fonts/bedstead.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ---------------------------------------------------------------------
   Surface tokens. Everything coloured below reads one of these.
   --------------------------------------------------------------------- */

:root,
[data-surface="light"] {
    color-scheme: light;
    --outside: #f0efe9;                         /* under the noise, outside the column */
    --wash: rgba(240, 239, 233, 0.5);           /* knocks the noise back to ~#e4e3dd */
    --surface: #f0efe9;                         /* the reading column: flat, no texture */
    --edge: transparent;                        /* the column's own edge */
    --ink: #1a1a1a;                             /* 15.1:1 */
    --ink-2: #33322e;                           /* descriptions, 11.1:1 */
    --muted: #595750;                           /* metadata, 6.3:1 */
    --line: #cfccc2;                            /* hairlines and quiet boxes */
    --line-strong: #8e8b81;                     /* dotted leaders, faint-swatch outlines */
    --rule: #2b2a27;                            /* ff-2016's 1px table rules */
    --lift: #e6e4dc;                            /* contents box, table heads */
    --code-bg: #e6e4dc;
    --focus: #1a1a1a;
    --on-ink: #f0efe9;                          /* text on an ink fill */

    /* Fastext keys. Each carries #1a1a1a text at >= 4.5:1 when filled and
       still reads as a colour (~3:1) against the paper. */
    --k-work: #e0603f;
    --k-about: #62963a;
    --k-writing: #c47f1a;
    --k-archive: #2f9a86;
    --key-ink: #1a1a1a;

    /* code: every token >= 4.5:1 on --code-bg */
    --c-kw: #9b1f55;
    --c-str: #1f6a2f;
    --c-com: #5c5850;
    --c-num: #8a4500;
    --c-fn: #3d3aa0;
    --c-var: #0b5b73;
}

[data-surface="dark"] {
    color-scheme: dark;
    --outside: #000;
    --wash: rgba(0, 0, 0, 0.82);
    --surface: #0b0b0b;
    --edge: #1d1d1b;
    --ink: #e8e8e0;                             /* 16:1 */
    --ink-2: #c9c9c0;                           /* 11.8:1 */
    --muted: #a09f96;                           /* 7.5:1 */
    --line: #33332f;
    --line-strong: #6b6b64;
    --rule: #55554e;
    --lift: #171716;
    --code-bg: #151514;
    --focus: #ffdc5a;
    --on-ink: #0b0b0b;

    --k-work: #e27058;
    --k-about: #aabb62;
    --k-writing: #e3a95e;
    --k-archive: #74bfaa;
    --key-ink: #000;

    --c-kw: #ff8fb4;
    --c-str: #9fd48a;
    --c-com: #a3a095;
    --c-num: #f0b060;
    --c-fn: #aab4ff;
    --c-var: #7fd0e6;
}

:root {
    --sans: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, system-ui, sans-serif;
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", monospace;
    --tt: "r3-bedstead", ui-monospace, monospace;

    --measure: 66ch;
    --gutter: 44px;
    --rail: 250px;
    --gap: 1.155em;                             /* 0.7 of a 1.65 line */

    /* page defaults; a piece or post overrides these inline */
    --acc: var(--ink);
    --acc-ink: var(--on-ink);
    --deco: var(--muted);
}

/* A piece or post sets --deco-l/--deco-d inline (its accent measured on
   each surface); the live surface picks one, so r3-auto can switch. */
[data-surface="light"] [style*="--deco-l"] { --deco: var(--deco-l); }
[data-surface="dark"] [style*="--deco-d"] { --deco: var(--deco-d); }

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background-color: var(--outside);
    /* noise only outside the reading column */
    background-image: linear-gradient(var(--wash), var(--wash)), url("noise.png");
}

body {
    margin: 0;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 18px;
    line-height: 1.65;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}

.r3-sheet {
    max-width: 1140px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 18px var(--gutter) 0;
    background: var(--surface);
    border-inline: 1px solid var(--edge);
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.22; margin: 0; }
p { margin: 0 0 var(--gap); }
img, svg, video { max-width: 100%; height: auto; }
strong, b { font-weight: 700; }
abbr[title] { text-decoration: none; }

a {
    color: var(--ink);
    text-decoration-line: underline;
    text-decoration-color: var(--deco);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
a:hover { text-decoration-color: var(--ink); text-decoration-thickness: 3px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.r3-main:focus { outline: none; }

.r3-vh {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.r3-skip {
    position: absolute; left: 8px; top: -100px; z-index: 10;
    padding: 6px 10px;
    background: var(--ink); color: var(--on-ink);
}
.r3-skip:focus { top: 8px; }

/* Bedstead: the wordmark, page numbers, the header row, the Fastext labels.
   Nothing else. It is a 6x10 pixel face on a 1000 em, so 20px and 40px
   land on whole pixels. */
.r3-tt {
    font-family: var(--tt);
    font-weight: normal;
    font-style: normal;
    font-synthesis: none;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   Header: header row, wordmark, Fastext
   --------------------------------------------------------------------- */

.r3-headrow {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 24px;
    padding-bottom: 8px;
    margin-bottom: 18px;
    border-bottom: 2px solid var(--line);
    font-size: 20px;
    line-height: 1.3;
    text-transform: uppercase;
}
.r3-headrow > .r3-tt { font-family: var(--tt); }
.r3-headrow-sec { flex: 1 1 auto; }
.r3-headrow-tick {
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    margin-right: 0.5em;
    background: var(--key);
}
.r3-headrow-now {
    /* a button that looks like the rest of the header row */
    margin-left: auto;               /* stays right-aligned when it wraps */
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-family: var(--tt);
    letter-spacing: inherit;
    white-space: nowrap;
    cursor: pointer;
}
.r3-headrow-now[aria-pressed="true"] { color: var(--ink); }
.r3-headrow-now.is-colon-off .r3-colon { visibility: hidden; }

/* The wordmark is teletext double height: a 1em box stretched to 2em. The
   mast reserves the stretched 2em, so the hover fill and the focus ring
   cover exactly the letters and never reach the Fastext keys below. */
.r3-mast {
    font-size: clamp(24px, calc((100vw - 32px) / 12), 40px);
    height: 2em;
    margin: 0 0 18px;
    line-height: 0;
}
.r3-wordmark-h { margin: 0; font-size: inherit; line-height: 0; }
a.r3-wordmark {
    display: inline-block;
    /* one word, never wraps, so double height is safe here */
    font-size: 1em;
    line-height: 1;
    height: 1em;
    padding: 0 3px;
    margin-left: -3px;
    letter-spacing: 0.06em;
    white-space: nowrap;
    transform: scaleY(2);
    transform-origin: top left;
    color: var(--ink);
    text-decoration: none;
}
a.r3-wordmark:hover { background: var(--ink); color: var(--surface); }

.r3-fastext ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.r3-key {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 8px 12px;
    border: 2px solid var(--line);
    color: var(--ink);
    font-family: var(--tt);
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}
.r3-key-tick { flex: none; width: 14px; height: 14px; background: var(--key); }
.r3-key-no { margin-left: auto; color: var(--muted); }
.r3-key:hover { border-color: var(--key); }
.r3-key[aria-current] { background: var(--key); border-color: var(--key); color: var(--key-ink); }
.r3-key[aria-current] .r3-key-tick { background: var(--key-ink); }
.r3-key[aria-current] .r3-key-no { color: var(--key-ink); }

.r3-main { padding-top: 36px; }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */

.r3-foot {
    margin-top: 64px;
    padding: 24px 0 64px;
    border-top: 2px solid var(--line);
}
.r3-foot-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    margin: 18px 0 0;
    font-family: var(--mono);
    font-size: 15px;
    line-height: 1.5;
}
.r3-foot-row a { text-decoration-color: var(--line-strong); }
.r3-foot-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 14px;
    margin: 20px 0 10px;
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted);
}
.r3-foot-name > b { color: var(--ink); font-family: var(--sans); font-size: 16px; }
.r3-foot-ipa b { color: var(--ink); font-weight: 700; }
.r3-foot-gloss i { white-space: nowrap; }  /* keep "-anto" whole */
.r3-foot-row .r3-tt { font-size: 16px; }

/* ---------------------------------------------------------------------
   Shared bits: crumb, meta, chips, lede, buttons
   --------------------------------------------------------------------- */

.r3-crumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    margin: 0 0 16px;
    padding: 0;
    font-size: 16px;
    line-height: 1.5;
}
.r3-crumb li + li::before { content: "/"; margin-right: 10px; color: var(--line-strong); }
.r3-crumb a { color: var(--muted); text-decoration: none; }
.r3-crumb a:hover { color: var(--ink); text-decoration: underline; }
.r3-crumb .r3-tt { color: var(--ink); font-size: 16px; }

.r3-listhead { margin: 0 0 36px; }
.r3-title {
    font-size: clamp(30px, 1.7vw + 20px, 44px);
    line-height: 1.1;
    letter-spacing: -0.012em;
    max-width: 28ch;
    margin: 0 0 16px;
    text-wrap: pretty;
}
.r3-title--page { display: flex; align-items: flex-start; gap: 0.36em; }
.r3-title-text { min-width: 0; }

.r3-lede {
    font-size: clamp(19px, 0.4vw + 17px, 21px);
    line-height: 1.5;
    color: var(--ink-2);
    max-width: 60ch;
    margin: 0 0 18px;
}
.r3-lede p { margin: 0 0 0.6em; }
.r3-lede p:last-child { margin-bottom: 0; }

.r3-byline { font-size: 17px; margin: 0 0 2px; }
.r3-byline a { font-weight: 700; }

.r3-meta,
.r3-entry-meta {
    margin: 0;
    font-family: var(--mono);
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted);
}
/* Inline, so long values wrap like text. The separator trails its item
   behind a no-break space, so a wrapped line never starts with one. */
.r3-meta > :not(:last-child)::after,
.r3-entry-meta > :not(:last-child)::after {
    content: "\00a0\00b7\0020";
    color: var(--line-strong);
    white-space: pre;
}

.r3-chip {
    display: inline-block;
    padding: 0 0.45em;
    border: 1px solid currentColor;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: 0.1em;
}
.r3-chip::after { content: none !important; }
.r3-chip--on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.r3-chip--off { color: var(--muted); border-color: var(--line-strong); }
.r3-chip--wip { border-style: dashed; }
.r3-chip--draft { border-style: dashed; color: var(--muted); }

.r3-btn {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 8px 18px;
    border: 2px solid var(--ink);
    background: var(--ink);
    color: var(--on-ink);
    font-weight: 700;
    text-decoration: none;
    line-height: 1.2;
}
.r3-btn:hover { background: var(--surface); color: var(--ink); }
.r3-btn--quiet { background: transparent; color: var(--ink); }
.r3-btn--quiet:hover { background: var(--ink); color: var(--on-ink); }

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

/* ---------------------------------------------------------------------
   Contents lines: title, dotted leader, page number (h3's P100)
   --------------------------------------------------------------------- */

a.r3-line {
    display: flex;
    align-items: last baseline;
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
}
.r3-line-title { flex: 0 1 auto; min-width: 0; }
.r3-leader {
    flex: 1 1 2em;
    min-width: 2em;
    align-self: flex-end;
    margin-bottom: 0.42em;
    border-bottom: 2px dotted var(--line-strong);
}
.r3-line-no { flex: none; font-size: 20px; line-height: 1; color: var(--muted); }
a.r3-line:hover .r3-line-title {
    text-decoration: underline;
    text-decoration-color: var(--deco);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
a.r3-line:hover .r3-line-no { color: var(--ink); }
a.r3-line:hover .r3-leader { border-color: var(--ink); }

.r3-lines { list-style: none; margin: 0; padding: 0; max-width: 34rem; }
.r3-lines li { font-size: 19px; }
.r3-lines a.r3-line { padding: 6px 0; }
.r3-lines--after { margin-top: 36px; }

/* entries: a contents line with its swatch, then facts and one line of description */
.r3-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.r3-entry { --hang: calc(0.6em + 12px); }
.r3-entry-h { font-size: 21px; line-height: 1.3; margin: 0 0 4px; }
.r3-entry-h a.r3-line { gap: 12px; }
.r3-sw {
    flex: none;
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    background: var(--acc);
    align-self: flex-start;
    margin-top: 0.36em;
}
[data-surface="light"] .r3-sw--faint-l, [data-surface="dark"] .r3-sw--faint-d { box-shadow: inset 0 0 0 1px var(--line-strong); }
.r3-sw--none { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.r3-entry-meta,
.r3-entry-desc { margin-left: calc(0.6 * 21px + 12px); }
.r3-entry-desc {
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 62ch;
    margin-top: 4px;
    margin-bottom: 0;
}
.r3-entries--page { max-width: 50rem; }

.r3-more { font-size: 16px; margin: 22px 0 0; }
.r3-more a { color: var(--ink-2); }

/* ---------------------------------------------------------------------
   Home
   --------------------------------------------------------------------- */

.r3-pitch { margin: 4px 0 64px; }
.r3-kicker {
    font-family: var(--mono);
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 14px;
}
.r3-statement {
    font-size: clamp(28px, 2.3vw + 17px, 44px);
    line-height: 1.16;
    font-weight: 700;
    letter-spacing: -0.018em;
    max-width: 23em;
    margin: 0 0 22px;
    text-wrap: balance;
}
.r3-pitch-more { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 58ch; margin: 0 0 26px; }
.r3-pitch-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

.r3-home-sec { padding-top: 14px; border-top: 2px solid var(--rule); }
.r3-sechead { font-size: 24px; line-height: 1.3; margin: 0 0 22px; }
.r3-sechead .r3-line-no { font-size: 20px; }
.r3-sechead--plain { margin-bottom: 10px; }
.r3-sec-lede { font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 60ch; margin: -8px 0 24px; }

.r3-home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
    margin-bottom: 56px;
}
@media (min-width: 60rem) {
    .r3-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
}

/* the archive as a strip of its own colours: one link per piece */
.r3-home-archive { margin-bottom: 56px; }
.r3-strip {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    border: 1px solid var(--rule);
}
.r3-strip li { min-width: 0; }
.r3-strip a { display: block; height: 64px; text-decoration: none; }
.r3-strip a:hover { box-shadow: inset 0 -8px 0 var(--ink); }
.r3-strip a:focus-visible { position: relative; z-index: 1; outline-offset: 0; }
[data-surface="light"] .r3-strip a.r3-strip-faint-l, [data-surface="dark"] .r3-strip a.r3-strip-faint-d { box-shadow: inset 0 0 0 1px var(--line-strong); }
[data-surface="light"] .r3-strip a.r3-strip-faint-l:hover, [data-surface="dark"] .r3-strip a.r3-strip-faint-d:hover { box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 -8px 0 var(--ink); }
.r3-strip-ends {
    display: flex;
    justify-content: space-between;
    margin: 6px 0 22px;
    font-size: 16px;
    color: var(--muted);
}

.r3-home-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px 56px;
    align-items: start;
}
@media (min-width: 60rem) {
    .r3-home-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.r3-home-foot .r3-lines { max-width: none; }
.r3-home-contact { padding-top: 6px; }
.r3-contact { font-size: 19px; margin: 0; }


/* ---------------------------------------------------------------------
   Writing index: two groups
   --------------------------------------------------------------------- */

.r3-jumps {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.r3-jumps a,
.r3-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 4px 12px;
    border: 2px solid var(--line);
    background: transparent;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 15px;
    line-height: 1.2;
    text-decoration: none;
}
.r3-jumps a:hover,
.r3-toggle:hover { border-color: var(--ink); }
.r3-jumps-n { color: var(--muted); }
.r3-listhead .r3-jumps { margin-top: 22px; }

.r3-group { padding-top: 14px; border-top: 2px solid var(--rule); margin-bottom: 56px; scroll-margin-top: 16px; }
.r3-grouphead { font-size: 26px; margin: 0 0 8px; }
.r3-group-lede { font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 60ch; margin: 0 0 26px; }

/* ---------------------------------------------------------------------
   Single pages: band, title swatch, prose + rail
   --------------------------------------------------------------------- */

.r3-page { min-width: 0; }
.r3-pagehead { margin: 0 0 32px; }

.r3-band { height: 10px; margin: 0 0 22px; background: var(--acc); }
[data-surface="light"] .r3-band--faint-l, [data-surface="dark"] .r3-band--faint-d { box-shadow: inset 0 0 0 1px var(--line-strong); }

.r3-sw--title { width: 0.56em; height: 0.56em; margin-top: 0.2em; }

.r3-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 48px;
}
.r3-rail { min-width: 0; }
.r3-col { min-width: 0; }
.r3-page--work .r3-rail,
.r3-page--about .r3-rail { margin-top: 24px; }
@media (min-width: 1100px) {
    .r3-body {
        grid-template-columns: minmax(0, var(--measure)) var(--rail);
        justify-content: space-between;
        align-items: start;
    }
    .r3-body > :not(.r3-rail) { grid-column: 1; grid-row: 1; }
    .r3-body > .r3-rail { grid-column: 2; grid-row: 1; margin-top: 0; }
    /* a post's contents box stays in reach while reading; it only moves
       when the reader scrolls */
    .r3-page--post .r3-rail { position: sticky; top: 24px; }
}

.r3-figure { margin: 0 0 36px; }
.r3-figure img { display: block; width: 100%; max-height: 520px; object-fit: cover; border: 1px solid var(--line); }

.r3-note {
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-2);
    padding: 10px 0 12px;
    margin: 0 0 24px;
    border-top: 2px solid var(--line);
    border-bottom: 2px solid var(--line);
}

.r3-commission { font-size: 16px; color: var(--ink-2); margin: 24px 0 0; }

/* facts: label/value, mono labels */
.r3-facts { margin: 0; }
.r3-facts dt {
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.r3-facts dd { margin: 0; }
.r3-facts ul { list-style: none; margin: 4px 0 0; padding: 0; }
.r3-facts li { font-size: 16px; line-height: 1.45; padding: 3px 0; }
.r3-facts--stack > div { padding: 12px 0 14px; border-top: 2px solid var(--line); }
.r3-facts--stack > div:first-child { padding-top: 10px; border-top-color: var(--rule); }
.r3-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px !important; }
.r3-tags span {
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.5;
    padding: 0 6px;
    border: 1px solid var(--line-strong);
    color: var(--ink-2);
}
.r3-subfacts { margin: 4px 0 0; }
.r3-subfacts dt { margin-top: 8px; font-size: 12px; }
.r3-subfacts dd { font-size: 16px; line-height: 1.45; }

/* an archive piece's facts: date / medium / kind / from / colour, in mono */

/* the see_also cross-link */
.r3-seealso {
    max-width: var(--measure);
    margin: 0 0 32px;
    padding: 10px 0 14px;
    border-top: 2px solid var(--rule);
    border-bottom: 2px solid var(--rule);
}
.r3-seealso-k {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 6px;
}
a.r3-seealso-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 14px;
    align-items: baseline;
    text-decoration: none;
}
.r3-seealso-no { grid-row: 1 / span 2; font-size: 20px; line-height: 1; }
.r3-seealso-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: underline;
    text-decoration-color: var(--deco);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.r3-seealso-sum { font-size: 16px; line-height: 1.5; color: var(--ink-2); margin-top: 2px; }
a.r3-seealso-link:hover .r3-seealso-title { text-decoration-color: var(--ink); text-decoration-thickness: 3px; }

/* an archive piece's external home */
a.r3-external {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 18px;
    max-width: var(--measure);
    margin: 0 0 32px;
    padding: 14px 18px;
    border: 2px solid var(--ink);
    text-decoration: none;
}
.r3-external-k { font-weight: 700; font-size: 19px; }
.r3-external-url { font-family: var(--mono); font-size: 15px; color: var(--muted); overflow-wrap: anywhere; }
a.r3-external:hover { background: var(--ink); color: var(--on-ink); }
a.r3-external:hover .r3-external-url { color: var(--on-ink); }

/* page turn */
.r3-turn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin: 48px 0 0;
}
.r3-turn a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px 14px;
    border: 2px solid var(--line);
    text-decoration: none;
    min-width: 0;
}
.r3-turn-next { grid-column: 2; align-items: flex-end; text-align: right; }
.r3-turn-no { font-size: 17px; color: var(--muted); }
.r3-turn-no .r3-tt { font-size: 20px; color: var(--ink); }
.r3-turn-title {
    font-size: 17px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.r3-turn a:hover { border-color: var(--ink); }
.r3-turn a:hover .r3-turn-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }


/* ---------------------------------------------------------------------
   Prose
   --------------------------------------------------------------------- */

.r3-prose { max-width: var(--measure); min-width: 0; }
.r3-prose > :first-child { margin-top: 0; }
.r3-prose > :last-child { margin-bottom: 0; }
.r3-prose p,
.r3-prose ul,
.r3-prose ol,
.r3-prose blockquote,
.r3-prose pre,
.r3-prose figure,
.r3-prose table,
.r3-prose details,
.r3-prose .highlight { margin: 0 0 var(--gap); }
.r3-prose h1 { font-size: 28px; margin: 1.6em 0 0.5em; }
.r3-prose h2 { font-size: 25px; margin: 1.8em 0 0.5em; }
.r3-prose h3 { font-size: 20px; margin: 1.6em 0 0.4em; }
.r3-prose h4, .r3-prose h5, .r3-prose h6 { font-size: 18px; margin: 1.4em 0 0.3em; }
.r3-prose :is(ul, ol) { padding-left: 1.3em; }
.r3-prose ul { list-style: square; }
.r3-prose li::marker { color: var(--muted); }
.r3-prose li + li { margin-top: 0.3em; }
.r3-prose li > :is(ul, ol) { margin: 0.3em 0 0; }
.r3-prose blockquote {
    margin-left: 0;
    padding: 2px 0 2px 20px;
    border-left: 4px solid var(--line-strong);
    color: var(--ink-2);
}
.r3-prose hr { height: 0; border: 0; border-top: 2px solid var(--line); margin: 2.2em 0; }
.r3-prose img, .r3-prose video { display: block; margin: 1.2em 0; border: 1px solid var(--line); }
.r3-prose p img { display: inline-block; margin: 4px 4px 4px 0; vertical-align: top; max-width: min(100%, 480px); }
.r3-prose iframe { display: block; max-width: 100%; border: 0; }
.r3-prose iframe[src*="youtube"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.r3-prose .wrap { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.r3-prose .box { aspect-ratio: 16 / 9; }
.r3-prose .box iframe { width: 100%; height: 100%; }
.r3-prose table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-family: var(--mono);
    font-size: 15px;
}
.r3-prose th, .r3-prose td { border: 1px solid var(--rule); padding: 0.35em 0.6em; text-align: left; vertical-align: top; }
.r3-prose details summary { cursor: pointer; font-family: var(--mono); font-size: 15px; }
.r3-prose details[open] summary { margin-bottom: 0.6em; }
.r3-prose strong { color: var(--ink); }

.r3-prose code {
    font-family: var(--mono);
    font-size: 0.86em;
    background: var(--code-bg);
    padding: 0.08em 0.3em;
}
.r3-prose pre {
    font-family: var(--mono);
    font-size: 15px;
    line-height: 1.55;
    background: var(--code-bg);
    color: var(--ink);
    border: 1px solid var(--line);
    padding: 14px 16px;
    overflow-x: auto;
    tab-size: 4;
}
.r3-prose pre code { background: none; padding: 0; font-size: inherit; }
.r3-prose .highlight pre { margin: 0; }

/* The contents box: the post's own "Contents:" list or a generated one.
   The accent is its top rule. */
.r3-contents {
    background: var(--lift);
    border: 1px solid var(--rule);
    border-top: 6px solid var(--acc);
    padding: 12px 18px 14px;
    margin: 0 0 32px;
    font-size: 16px;
    line-height: 1.45;
}
.r3-contents-h,
.r3-prose h2#contents {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 8px;
}
.r3-contents ul { list-style: none; margin: 0; padding: 0; }
.r3-contents li { margin: 0; padding: 4px 0; }
.r3-contents li + li { border-top: 1px solid var(--line); }
.r3-contents ul ul { padding-left: 14px; }
.r3-contents ul ul li { border-top: 0; padding: 2px 0; }
.r3-contents a { text-decoration-thickness: 1.5px; }

.r3-prose h2#contents {
    margin: 0;
    padding: 12px 18px 4px;
    background: var(--lift);
    border: 1px solid var(--rule);
    border-top: 6px solid var(--acc);
    border-bottom: 0;
}
.r3-prose h2#contents + ul {
    margin-top: 0;
    padding: 0 18px 14px 38px;
    background: var(--lift);
    border: 1px solid var(--rule);
    border-top: 0;
    font-size: 16px;
    line-height: 1.45;
}
.r3-prose h2#contents + ul li + li { margin-top: 0.25em; }

/* the render hooks from the root layouts */
.md-deadlink { color: var(--muted); }
.md-missing {
    display: inline-block;
    padding: 8px 12px;
    border: 1px dashed var(--line-strong);
    font-family: var(--mono);
    font-size: 15px;
    color: var(--muted);
}

/* Chroma: markup.highlight.noClasses = false. Every token colour is at
   least 4.5:1 on --code-bg on its own surface. */
.chroma { color: var(--ink); background: var(--code-bg); }
.chroma .err { color: var(--ink); text-decoration: underline wavy var(--c-kw); }
.chroma :is(.k, .kc, .kd, .kn, .kp, .kr, .kt, .nt, .ow) { color: var(--c-kw); }
.chroma :is(.s, .sa, .sb, .sc, .dl, .sd, .s2, .se, .sh, .si, .sx, .sr, .s1, .ss) { color: var(--c-str); }
.chroma :is(.c, .ch, .cm, .c1, .cs, .cp, .cpf) { color: var(--c-com); font-style: italic; }
.chroma :is(.m, .mb, .mf, .mh, .mi, .il, .mo, .no, .kc) { color: var(--c-num); }
.chroma :is(.nf, .fm, .nb, .bp, .nc, .nd, .ne, .nl, .nn) { color: var(--c-fn); }
.chroma :is(.nv, .vc, .vg, .vi, .vm, .na) { color: var(--c-var); }
.chroma :is(.o, .p, .nx, .n, .w, .ge, .go) { color: var(--ink); }
.chroma .gd { color: var(--c-kw); }
.chroma .gi { color: var(--c-str); }
.chroma .gh, .chroma .gu { color: var(--ink); font-weight: 700; }
.chroma .gl { text-decoration: underline; }
.chroma .hl { background: var(--lift); display: block; }
.chroma :is(.ln, .lnt) { color: var(--muted); margin-right: 0.6em; user-select: none; }

/* ---------------------------------------------------------------------
   Tables: archive index, readings, bots
   --------------------------------------------------------------------- */

.r3-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.r3-scroll:focus-visible { outline-offset: -3px; }

.r3-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--rule);
    font-size: 17px;
    line-height: 1.4;
}
.r3-table :is(th, td) {
    text-align: left;
    vertical-align: baseline;
    padding: 9px 12px;
    border-bottom: 1px solid var(--rule);
}
.r3-table thead th {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--lift);
    white-space: nowrap;
    padding-top: 7px;
    padding-bottom: 7px;
}
.r3-table a { text-decoration: none; }
.r3-table a:hover { text-decoration: underline; text-decoration-color: var(--ink); }

.r3-c-pno { width: 1%; white-space: nowrap; }
td.r3-c-pno { font-size: 20px; line-height: 1; }
td:is(.r3-c-date, .r3-c-cs, .r3-c-medium, .r3-c-from) {
    font-family: var(--mono);
    font-size: 15px;
    color: var(--ink-2);
}
.r3-c-date, .r3-c-cs { width: 1%; white-space: nowrap; }
.r3-c-cs { text-align: center !important; }
.r3-c-from { white-space: nowrap; }
.r3-c-title a { font-weight: 700; }
.r3-c-inline { display: none; }

/* the full-height swatch column; the colour names itself on wide screens */
.r3-table .r3-c-sw {
    width: 9.5rem;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: 0.02em;
}

[data-surface="light"] .r3-table td.r3-c-sw--faint-l, [data-surface="dark"] .r3-table td.r3-c-sw--faint-d { box-shadow: inset 0 0 0 1px var(--line-strong); }
.r3-tablenote { font-family: var(--mono); font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 72ch; margin: 12px 0 0; }

.r3-readings { max-width: 56rem; }
.r3-readings .r3-c-author { color: var(--ink-2); }
.r3-readings .r3-c-title a { font-weight: 700; }

/* bots */
.r3-bots { margin-top: 48px; }
.r3-bots-h { font-size: 28px; margin: 0 0 4px; }
.r3-bots-count { font-family: var(--mono); font-size: 15px; color: var(--muted); margin: 0 0 12px; }
.r3-bots-bar {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 10px 0;
    background: var(--surface);
    border-bottom: 2px solid var(--rule);
}
.r3-toggle { cursor: pointer; }
.r3-toggle-box { flex: none; width: 14px; height: 14px; border: 2px solid currentColor; }
.r3-toggle[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.r3-toggle[aria-pressed="true"] .r3-toggle-box { background: currentColor; box-shadow: inset 0 0 0 2px var(--ink); }

.r3-year { scroll-margin-top: 80px; }
.r3-year-h {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 14px;
    font-size: 26px;
    margin: 32px 0 12px;
}
.r3-year-n { font-family: var(--mono); font-size: 15px; font-weight: 400; color: var(--muted); }

.is-active-only tbody:not([data-active]),
.is-active-only .r3-year:not([data-has-active]),
.is-active-only .r3-jumps li:not([data-has-active]) { display: none; }

.r3-botlist tbody { border-top: 1px solid var(--rule); }
.r3-botlist tbody tr:first-child > * { border-bottom: 0; padding-bottom: 3px; }
.r3-botlist .r3-b-no { width: 1%; }
.r3-botlist td.r3-b-no { font-size: 20px; line-height: 1; color: var(--muted); }
.r3-botlist .r3-b-date { width: 1%; white-space: nowrap; }
.r3-botlist td.r3-b-date { font-family: var(--mono); font-size: 15px; color: var(--ink-2); }
.r3-botlist th.r3-b-name {
    font-size: 18px;
    overflow-wrap: break-word;       /* only if a <wbr> segment still won't fit */
    hyphens: none;
}
.r3-botlist thead th.r3-b-name { font-size: 13px; }
.r3-botlist td.r3-b-src { font-family: var(--mono); font-size: 15px; white-space: nowrap; }
.r3-botlist .r3-b-st { width: 1%; white-space: nowrap; text-align: right; }
.r3-b-desc td { padding-top: 0; padding-bottom: 12px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.r3-b-desc td { overflow-wrap: anywhere; }
.r3-b-desc p { margin: 0 0 0.4em; max-width: 64ch; }
.r3-b-desc p:last-child { margin-bottom: 0; }
.r3-b-desc ul { margin: 0 0 0.4em; padding-left: 1.2em; }

/* ---------------------------------------------------------------------
   404
   --------------------------------------------------------------------- */

.r3-404 {
    font-size: clamp(46px, 9.4vw, 124px);
    line-height: 0.9;
    font-weight: 900;
    letter-spacing: -0.035em;
    max-width: 9em;
    margin: 8px 0 28px;
}
.r3-404-key { font-size: 17px; color: var(--muted); margin: 28px 0 8px; }
.r3-lines--404 .r3-line-no { color: var(--ink); }

.r3-blink { animation: r3-blink 1s steps(1, end) 3; }
@keyframes r3-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .r3-blink { animation: none; }
}

/* ---------------------------------------------------------------------
   Small screens
   --------------------------------------------------------------------- */

@media (max-width: 40rem) {
    :root { --gutter: 16px; }
    body { font-size: 17px; }

    .r3-sheet { padding-top: 10px; border-inline: 0; }
    .r3-headrow { font-size: 14px; gap: 0 14px; margin-bottom: 14px; padding-bottom: 6px; }
    .r3-mast { margin-bottom: 14px; }

    /* Fastext on one line: four keys, a colour bar on top, label only */
    .r3-fastext ul { gap: 4px; }
    .r3-key {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 9px;
        min-height: 44px;
        padding: 0 0 9px;
        font-size: 14px;
        text-align: center;
    }
    .r3-key-tick { width: auto; height: 6px; }
    .r3-key-no { display: none; }

    .r3-main { padding-top: 26px; }
    .r3-foot { margin-top: 48px; }

    .r3-title { font-size: clamp(28px, 7.4vw, 34px); }
    .r3-lede { font-size: 18px; }
    .r3-listhead { margin-bottom: 28px; }
    .r3-pagehead { margin-bottom: 26px; }
    .r3-band { margin-bottom: 18px; height: 8px; }

    .r3-statement { font-size: clamp(26px, 7.2vw, 32px); }
    .r3-pitch { margin-bottom: 48px; }
    .r3-pitch-more { font-size: 17px; }
    .r3-sechead { font-size: 22px; }
    .r3-entry-h { font-size: 19px; }
    .r3-entry-meta, .r3-entry-desc { margin-left: calc(0.6 * 19px + 12px); }
    .r3-entry-desc { font-size: 16px; }
    .r3-line-no { font-size: 17px; }

    /* the strip folds into two rows so each key stays at least 36px wide */
    .r3-strip { grid-template-columns: repeat(var(--half), minmax(0, 1fr)); }
    .r3-strip a { height: 44px; }


    /* contents lists run inline on a phone, so the first paragraph of an
       essay still starts on the first screen */
    .r3-contents { padding: 10px 14px 12px; margin-bottom: 28px; font-size: 15px; line-height: 1.5; }
    .r3-contents > ul { display: block; }
    .r3-contents li,
    .r3-contents ul ul li { display: inline; padding: 0; border: 0; }
    .r3-contents ul ul { display: inline; padding: 0; }
    .r3-contents li + li::before,
    .r3-contents li > ul > li::before { content: " · "; color: var(--line-strong); }
    .r3-prose h2#contents { padding: 10px 14px 2px; }
    .r3-prose h2#contents + ul { padding: 0 14px 12px; list-style: none; font-size: 15px; line-height: 1.5; }
    .r3-prose h2#contents + ul li { display: inline; margin: 0; }
    .r3-prose h2#contents + ul li + li::before { content: " · "; color: var(--line-strong); }

    /* posts: contents box before the prose, the "note" after it */
    .r3-page--post .r3-rail { display: contents; }
    .r3-page--post .r3-contents { order: 0; }
    .r3-page--post .r3-prose { order: 1; }
    .r3-page--post .r3-note { order: 2; margin: 32px 0 0; }

    /* archive index: page, title (with its facts folded under), swatch */
    .r3-index .r3-c-date,
    .r3-index .r3-c-cs,
    .r3-index .r3-c-medium,
    .r3-index .r3-c-from { display: none; }
    .r3-index .r3-c-inline {
        display: block;
        margin-top: 2px;
        font-family: var(--mono);
        font-size: 14px;
        line-height: 1.45;
        color: var(--muted);
    }
    .r3-table :is(th, td) { padding: 9px 10px; }
    .r3-index td.r3-c-pno { font-size: 17px; padding-right: 4px; }
    .r3-table .r3-c-sw { width: 14px; min-width: 14px; padding: 0; }
    .r3-table thead .r3-c-sw { font-size: 0; }
    .r3-c-swname { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }
    .r3-readings .r3-c-author { font-size: 14px; }

    /* bots: one block per bot, h4's order: name, then a line of facts, then the description */
    .r3-botlist { border: 0; }
    .r3-botlist,
    .r3-botlist tbody,
    .r3-botlist tr,
    .r3-botlist td,
    .r3-botlist th { display: block; }
    .r3-botlist thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .r3-botlist tbody { padding: 12px 0 14px; }
    .r3-botlist tbody:last-child { border-bottom: 1px solid var(--rule); }
    .r3-botlist tbody tr:first-child {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        grid-template-areas:
            "name name name name"
            "no   date src  st";
        align-items: baseline;
        gap: 2px 10px;
    }
    .r3-botlist tbody tr:first-child > * { padding: 0; border: 0; width: auto; }
    .r3-botlist th.r3-b-name { grid-area: name; font-size: 18px; line-height: 1.3; }
    .r3-botlist .r3-b-no { grid-area: no; font-size: 14px; }
    .r3-botlist .r3-b-date { grid-area: date; font-size: 14px; }
    .r3-botlist .r3-b-src { grid-area: src; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
    .r3-botlist .r3-b-st { grid-area: st; }
    .r3-botlist .r3-b-gap { display: none; }
    .r3-botlist .r3-b-desc td { padding: 6px 0 0; border: 0; }
    /* on a phone the bar would eat the screen: it stays put, and each
       year's heading sticks instead */
    .r3-bots-bar { position: static; gap: 8px; }
    .r3-jumps-n { display: none; }
    .r3-jumps a, .r3-toggle { padding: 4px 10px; font-size: 14px; }
    .r3-year { scroll-margin-top: 0; }
    .r3-year-h {
        position: sticky;
        top: 0;
        z-index: 2;
        margin: 24px 0 0;
        padding: 8px 0;
        background: var(--surface);
        border-bottom: 2px solid var(--rule);
        font-size: 22px;
    }

    .r3-turn a { padding: 10px 12px 12px; }
    .r3-turn-title { font-size: 16px; }
}

@media (max-width: 22rem) {
    .r3-key { font-size: 12px; }
}