/* Datasheet: the blogo design system.
   Source: andrea.bio. One monospace face, ink on paper, one rust accent,
   uppercase section labels over full-width rules. Space is counted in
   lines (rlh) and columns (ch). Spec: .design-system/system.md */

@layer reset, tokens, base, components, utilities;

/* fonts:begin - generated by scripts/subset_fonts.py */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-400.woff2") format("woff2");
  unicode-range: U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC,
    U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2001, U+200B, U+2010, U+2013-2014,
    U+2016, U+2018-2022, U+2024, U+2026, U+2030, U+2032-2034, U+2039-203A,
    U+203C-203F, U+2044-2046, U+20AC, U+2122, U+2191, U+2193, U+2206, U+2212,
    U+2215, U+22A2-22A3, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-600.woff2") format("woff2");
  unicode-range: U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC,
    U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2001, U+200B, U+2010, U+2013-2014,
    U+2016, U+2018-2022, U+2024, U+2026, U+2030, U+2032-2034, U+2039-203A,
    U+203C-203F, U+2044-2046, U+20AC, U+2122, U+2191, U+2193, U+2206, U+2212,
    U+2215, U+22A2-22A3, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-0130, U+0134-0151, U+0154-017F, U+018F-0190, U+0192,
    U+019B, U+01A0-01A1, U+01AF-01B0, U+01CD-01CE, U+01D0, U+01D2, U+01D4,
    U+01D6, U+01D8, U+01DA, U+01DC, U+01E6-01E7, U+01EA-01EB, U+01F4-01F5,
    U+01FC-01FF, U+0218-021B, U+0232-0233, U+0237, U+0259, U+1E80-1E85, U+1E9E,
    U+1EA0-1EF9, U+20AB, U+20AE, U+20B4, U+20BD, U+20BF, U+2113;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-ext-600.woff2") format("woff2");
  unicode-range: U+0100-0130, U+0134-0151, U+0154-017F, U+018F-0190, U+0192,
    U+019B, U+01A0-01A1, U+01AF-01B0, U+01CD-01CE, U+01D0, U+01D2, U+01D4,
    U+01D6, U+01D8, U+01DA, U+01DC, U+01E6-01E7, U+01EA-01EB, U+01F4-01F5,
    U+01FC-01FF, U+0218-021B, U+0232-0233, U+0237, U+0259, U+1E80-1E85, U+1E9E,
    U+1EA0-1EF9, U+20AB, U+20AE, U+20B4, U+20BD, U+20BF, U+2113;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-arrows-400.woff2") format("woff2");
  unicode-range: U+2190, U+2192, U+2194-2199, U+219D-219E, U+21A0, U+21A2-21A3,
    U+21A5-21A7, U+21A9-21AA, U+21AD, U+21BE, U+21C9, U+21D0-21D4, U+21DB,
    U+21DE-21DF, U+21E5, U+21E7-21E8, U+21EA;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-math-400.woff2") format("woff2");
  unicode-range: U+2200-2205, U+2207-220C, U+220E-2211, U+2213, U+2218-221A,
    U+221E, U+2223-2225, U+2227-222B, U+2234-2239, U+223C, U+223E, U+2243,
    U+2245, U+2247-2249, U+224B, U+224D, U+2254, U+2257, U+225F-2265,
    U+226A-2273, U+227A-227C, U+2282-2289, U+228E-2299, U+229B-22A1,
    U+22A4-22A5, U+22B4, U+22B8, U+22BB-22BD, U+22C2-22C4, U+22C6, U+22C8-22CA,
    U+22CE, U+22D0, U+22E2, U+22EE-22F1, U+27DC;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-technical-400.woff2") format("woff2");
  unicode-range: U+2302-2305, U+2308-230B, U+2318, U+231C-231F, U+2324-2326,
    U+2328, U+232B, U+2336-237A, U+2389-238B, U+2395, U+239B-23AD, U+23CE,
    U+23FB-23FE;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-drawing-400.woff2") format("woff2");
  unicode-range: U+2500-25A1, U+25AA-25AB, U+25B2-25CC, U+25CE-25CF,
    U+25D4-25D5, U+25E6-25EB, U+25EF, U+25F6;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-symbols-400.woff2") format("woff2");
  unicode-range: U+266D, U+266F, U+2687, U+26A0-26A1, U+2713, U+2715, U+2717,
    U+2736, U+276E-2771, U+2794, U+279C-279E;
}
/* fonts:end */

/* ------------------------------------------------------------ tokens */
@layer tokens {
  :root {
    color-scheme: light;

    /* Color. Sourced: paper, ink, rust, link-line. Derived: the rest. */
    --paper: #ffffff;
    --paper-shade: #f2f2f0;
    --ink: #1a1a1a;
    --ink-muted: #5e5e5e;
    --rust: #b13b1e;
    --rule: #1a1a1a;
    --rule-faint: #dcdcd8;
    --link-line: rgb(26 26 26 / 0.25);
    --backdrop: rgb(26 26 26 / 0.4);

    /* Type. One face, three sizes. Bold is the one added weight. */
    --mono:
      "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --size-small: 0.8125em;
    --size-body: 1em;
    --size-title: 1.5em;
    --weight-bold: 600;

    /* Grid. Vertical space in lines, horizontal space in columns. */
    --line: 1rlh;
    --half-line: 0.5rlh;
    --quarter-line: 0.25rlh;
    --col: 1ch;
    --indent: 4ch;
    --sheet: 80ch;
    --date-col: 12ch;
    --gutter: 16px;

    /* Depth. One device: the hard offset shadow of a boxed part. */
    --box-shadow: 1ch 0.5rlh 0 0 var(--ink);

    /* Motion. */
    --fade: 0.12s ease-out;

    /* Aliases kept for inline styles in About.tsx and PostView.tsx. */
    --space-xl: 2rlh;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --paper: #141413;
      --paper-shade: #232321;
      --ink: #e6e4df;
      --ink-muted: #a3a19b;
      --rust: #e57a5a;
      --rule: #e6e4df;
      --rule-faint: #34342f;
      --link-line: rgb(230 228 223 / 0.3);
      --backdrop: rgb(0 0 0 / 0.6);
    }
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --paper: #141413;
    --paper-shade: #232321;
    --ink: #e6e4df;
    --ink-muted: #a3a19b;
    --rust: #e57a5a;
    --rule: #e6e4df;
    --rule-faint: #34342f;
    --link-line: rgb(230 228 223 / 0.3);
    --backdrop: rgb(0 0 0 / 0.6);
  }
}

/* ------------------------------------------------------------- reset */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }
  img,
  svg,
  video {
    max-inline-size: 100%;
    block-size: auto;
  }
  input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
}

/* -------------------------------------------------------------- base */
@layer base {
  html {
    font-family: var(--mono);
    font-size: clamp(0.875rem, 0.82rem + 0.25vw, 0.9375rem);
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    scrollbar-gutter: stable;
  }

  body {
    background: var(--paper);
    color: var(--ink);
    font-variant-ligatures: none;
    overflow-wrap: break-word;
  }

  ::selection {
    background: var(--ink);
    color: var(--paper);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: var(--size-body);
    font-weight: var(--weight-bold);
    line-height: inherit;
    text-wrap: balance;
  }

  a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration-color: var(--link-line);
    transition: color var(--fade), text-decoration-color var(--fade);
  }
  a:hover,
  a:focus-visible {
    color: var(--rust);
    text-decoration-color: var(--rust);
  }

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

  ul,
  ol {
    list-style: none;
  }

  button {
    cursor: pointer;
    background: none;
    border: 0;
    transition: color var(--fade);
  }
  button:hover {
    color: var(--rust);
  }

  small {
    font-size: var(--size-small);
  }
}

/* -------------------------------------------------------- components */
@layer components {
  /* Inline icon sized to the text */
  .icon {
    inline-size: 1em;
    block-size: 1em;
    vertical-align: -0.125em;
  }

  /* Skip link */
  .skip-link {
    position: absolute;
    inset-inline-start: -999px;
    inset-block-start: var(--half-line);
    z-index: 10;
    padding: var(--quarter-line) var(--col);
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
  }
  .skip-link:focus-visible {
    inset-inline-start: var(--gutter);
    color: var(--paper);
  }

  /* Page frame: one centered sheet, 80 columns wide. */
  #app-layout {
    display: flex;
    flex-direction: column;
    min-block-size: 100dvh;
  }
  .site-header,
  .main-content,
  .site-footer {
    inline-size: 100%;
    max-inline-size: calc(var(--sheet) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .main-content {
    flex: 1;
    padding-block: var(--line) calc(var(--line) * 3);
  }
  .main-content > * + * {
    margin-block-start: var(--line);
  }

  /* Masthead: name left, description right, one rule beneath. */
  .site-header {
    padding-block-start: calc(var(--line) * 1.5);
  }
  .site-branding {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0 var(--indent);
    padding-block-end: var(--quarter-line);
    border-block-end: 1px solid var(--rule);
    text-transform: uppercase;
  }
  .site-title {
    font-weight: var(--weight-bold);
  }
  .site-title a {
    text-decoration: none;
  }
  .site-description {
    color: var(--ink-muted);
  }

  /* Navigation: text links, current page in rust, icon buttons at the end. */
  .site-nav {
    padding-block: var(--quarter-line);
  }
  .site-nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 calc(var(--col) * 2);
  }
  .site-nav li:has(> .theme-toggle) {
    margin-inline-start: auto;
  }
  .site-nav a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    text-transform: uppercase;
  }
  .site-nav a[aria-current="page"] {
    color: var(--rust);
    text-decoration-color: var(--rust);
    text-decoration-thickness: 2px;
  }
  .site-nav button {
    display: inline-grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
  }
  .site-nav svg {
    inline-size: 18px;
    block-size: 18px;
  }
  /* site.js sets the same state inline; this rule is correct before it runs. */
  :root:not([data-theme="dark"]) .sun-icon,
  :root[data-theme="dark"] .moon-icon {
    display: none;
  }

  /* Section label: the datasheet heading. Uppercase over a full rule. */
  .post-list-header h1,
  .main-content > h1,
  .topic-section h2,
  .rss-content h2,
  .about-content h2,
  .content h2,
  dialog h2 {
    padding-block-end: var(--quarter-line);
    border-block-end: 1px solid var(--rule);
    text-transform: uppercase;
  }
  /* TopicsIndex.tsx centers this heading with an inline style. */
  .topic-section h2 {
    text-align: start !important;
  }

  /* Post list: datasheet rows. */
  .post-list-header {
    display: grid;
    gap: var(--half-line);
    margin-block-end: var(--line);
  }
  .post-list {
    container-type: inline-size;
  }
  .post-list > li {
    padding-block: var(--line);
  }
  .post-list > li:first-child {
    padding-block-start: 0;
  }
  .post-list > li + li {
    border-block-start: 1px solid var(--rule-faint);
  }
  .post-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--quarter-line) calc(var(--col) * 2);
  }
  .post-card h2 a {
    text-decoration-color: transparent;
  }
  .post-card h2 a:hover,
  .post-card h2 a:focus-visible {
    text-decoration-color: var(--rust);
  }
  .post-card-meta,
  .post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 calc(var(--col) * 2);
    color: var(--ink-muted);
    font-size: var(--size-small);
  }
  .post-card p {
    color: var(--ink-muted);
  }
  @container (min-width: 60ch) {
    .post-card {
      grid-template-columns: var(--date-col) minmax(0, 1fr);
    }
    .post-card > * {
      grid-column: 2;
    }
    .post-card > .post-card-meta {
      grid-column: 1;
      grid-row: 1 / span 3;
      flex-direction: column;
      font-size: var(--size-body);
    }
  }

  /* View count */
  .post-views {
    display: inline-flex;
    align-items: center;
    gap: var(--col);
  }
  .post-views svg {
    inline-size: 1em;
    block-size: 1em;
  }

  /* Tags: an inline list separated by bullets, as on the source. */
  .tags ul,
  .tag-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0;
  }
  /* The bullet trails its tag, so a wrapped line never starts with one. */
  .tags li:not(:last-child)::after,
  .tag-grid li:not(:last-child)::after {
    content: "\2022";
    padding-inline: var(--col);
    color: var(--ink-muted);
  }
  .tag {
    display: inline-block;
    padding-block: var(--quarter-line);
    color: var(--ink-muted);
    font-size: var(--size-small);
  }
  .tag:hover,
  .tag:focus-visible {
    color: var(--rust);
  }
  .tag-grid .tag {
    font-size: var(--size-body);
  }

  /* Single post */
  .post-content {
    display: grid;
    gap: var(--line);
  }
  /* A grid item is as wide as its longest line unless its minimum is 0. */
  .post-content > *,
  .about-content > *,
  .rss-content > * {
    min-inline-size: 0;
  }
  .post-header {
    display: grid;
    gap: var(--quarter-line);
  }
  .post-header h1 {
    overflow-wrap: anywhere;
    font-size: var(--size-title);
    line-height: 1.25;
  }
  .topics {
    color: var(--ink-muted);
  }

  /* Prose */
  .content > * + * {
    margin-block-start: var(--line);
  }
  .content h2 {
    margin-block-start: calc(var(--line) * 2);
  }
  .content h3,
  .content h4 {
    margin-block-start: calc(var(--line) * 1.5);
  }
  .content h2 + *,
  .content h3 + *,
  .content h4 + * {
    margin-block-start: var(--half-line);
  }
  .content > :first-child {
    margin-block-start: 0;
  }
  .content h4 {
    color: var(--ink-muted);
  }
  .content ul,
  .content ol {
    padding-inline-start: var(--indent);
  }
  .content ul {
    list-style: "- ";
  }
  .content ol {
    list-style: decimal;
  }
  .content li + li,
  .content li > ul,
  .content li > ol {
    margin-block-start: var(--quarter-line);
  }
  .content strong {
    font-weight: var(--weight-bold);
  }
  .content em {
    color: var(--rust);
  }
  .content hr {
    border: 0;
    border-block-start: 1px solid var(--rule);
  }
  .content img {
    display: block;
    margin-inline: auto;
    border: 1px solid var(--rule-faint);
  }
  .content audio {
    display: block;
    inline-size: 100%;
  }

  /* Blockquote: the dashed box of the source. */
  .content blockquote {
    padding: var(--half-line) calc(var(--col) * 2);
    border: 1px dashed var(--ink-muted);
    color: var(--ink-muted);
  }
  .content blockquote > * + * {
    margin-block-start: var(--half-line);
  }

  /* Tables: datasheet rows with a ruled header. */
  .content table {
    display: block;
    max-inline-size: 100%;
    overflow-x: auto;
    border-collapse: collapse;
  }
  .content th,
  .content td {
    padding: var(--quarter-line) calc(var(--col) * 2) var(--quarter-line) 0;
    vertical-align: top;
  }
  .content th {
    border-block-end: 1px solid var(--rule);
    text-transform: uppercase;
    text-align: start;
    font-weight: var(--weight-bold);
  }
  .content tr + tr td {
    border-block-start: 1px solid var(--rule-faint);
  }

  /* Code */
  .content code {
    padding-inline: 0.4ch;
    background: var(--paper-shade);
  }
  .content pre {
    overflow-x: auto;
    padding: var(--half-line) calc(var(--col) * 2);
    border: 1px solid var(--rule);
    background: var(--paper);
    line-height: 1.5;
    tab-size: 2;
  }
  .content pre code,
  .content pre code.hljs {
    padding: 0;
    background: none;
    font-size: var(--size-small);
  }

  /* Syntax, as in a printed listing: bold keywords, rust values, muted
     comments. Names stay ink. No second hue. */
  .hljs {
    color: var(--ink);
    background: none;
  }
  .hljs-keyword,
  .hljs-selector-tag,
  .hljs-name,
  .hljs-section,
  .hljs-strong {
    font-weight: var(--weight-bold);
  }
  .hljs-string,
  .hljs-regexp,
  .hljs-symbol,
  .hljs-number,
  .hljs-literal {
    color: var(--rust);
  }
  .hljs-subst {
    color: var(--ink);
  }
  .hljs-comment,
  .hljs-quote,
  .hljs-meta,
  .hljs-doctag {
    color: var(--ink-muted);
  }
  .hljs-addition {
    background: var(--paper-shade);
  }
  .hljs-deletion {
    color: var(--ink-muted);
    text-decoration: line-through;
  }
  .hljs-link {
    text-decoration: underline;
  }

  /* Mermaid: rendered server-side in the light theme; inverted in dark. */
  /* Edges use currentColor, so the color is fixed to the light ink. */
  .mermaid-diagram {
    display: block;
    margin-inline: auto;
    color: #1a1a1a;
  }
  .mermaid-error {
    padding: var(--half-line) calc(var(--col) * 2);
    border: 1px dashed var(--rust);
    color: var(--ink);
  }
  :root[data-theme="dark"] .mermaid-diagram {
    filter: invert(0.9) hue-rotate(180deg);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mermaid-diagram {
      filter: invert(0.9) hue-rotate(180deg);
    }
  }

  /* Audio caption */
  .audio-caption {
    color: var(--ink-muted);
    font-size: var(--size-small);
  }

  /* Tags index */
  .topic-section + .topic-section {
    margin-block-start: calc(var(--line) * 1.5);
  }
  .topic-section h2 {
    margin-block-end: var(--half-line);
  }

  /* About and RSS pages share the prose rhythm. */
  .about-content,
  .rss-content {
    display: grid;
    gap: var(--line);
  }
  .about-content h1,
  .rss-content h1 {
    font-size: var(--size-title);
    line-height: 1.25;
  }
  .about-content h2,
  .rss-content h2 {
    margin-block-start: var(--line);
  }
  .rss-content ul {
    padding-inline-start: var(--indent);
    list-style: "- ";
  }
  .social-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--half-line) calc(var(--col) * 3);
  }
  .social-links a {
    display: inline-flex;
    align-items: center;
    gap: var(--col);
    min-block-size: 44px;
  }
  .social-links svg {
    inline-size: 1.1em;
    block-size: 1.1em;
  }
  .rss-content section,
  .topic-feed {
    display: grid;
    gap: var(--half-line);
  }
  .topic-feed + .topic-feed {
    margin-block-start: var(--line);
  }
  .topic-count {
    color: var(--ink-muted);
    font-size: var(--size-small);
  }
  .feed-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--half-line) calc(var(--col) * 2);
  }
  .feed-link {
    overflow-wrap: anywhere;
  }

  /* Button: the boxed part with the hard offset shadow. */
  button.copy,
  dialog form button[type="submit"] {
    min-block-size: 44px;
    padding: 0 calc(var(--col) * 2);
    margin-inline-end: var(--col);
    border: 1px solid var(--ink);
    background: var(--paper);
    text-transform: uppercase;
    font-size: var(--size-small);
    box-shadow: var(--box-shadow);
    transition:
      color var(--fade),
      transform var(--fade),
      box-shadow var(--fade);
  }
  button.copy:active,
  dialog form button[type="submit"]:active {
    transform: translate(1ch, 0.5rlh);
    box-shadow: none;
  }

  /* Search dialog: a boxed part on a dimmed sheet. */
  dialog {
    inline-size: min(60ch, calc(100vw - var(--gutter) * 2));
    max-block-size: min(80dvh, 40rlh);
    margin: 15dvh auto auto;
    padding: var(--line) calc(var(--col) * 2);
    border: 1px solid var(--ink);
    background: var(--paper);
    color: var(--ink);
    box-shadow: var(--box-shadow);
  }
  dialog::backdrop {
    background: var(--backdrop);
  }
  dialog > section {
    display: grid;
    gap: var(--line);
  }
  dialog header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: calc(var(--col) * 2);
  }
  dialog h2 {
    flex: 1;
  }
  dialog header button {
    inline-size: 44px;
    block-size: 44px;
    margin-block-start: calc((44px - 1lh) / -2);
    color: var(--ink-muted);
  }
  dialog header button:hover {
    color: var(--rust);
  }
  dialog form {
    display: flex;
    gap: calc(var(--col) * 2);
  }
  dialog input {
    flex: 1;
    min-inline-size: 0;
    min-block-size: 44px;
    padding-inline: var(--col);
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--paper);
    font-size: max(16px, 1rem);
  }
  dialog input::placeholder {
    color: var(--ink-muted);
  }
  dialog input:focus-visible {
    outline: 1px solid var(--rust);
    outline-offset: 0;
    border-color: var(--rust);
  }
  dialog form button[type="submit"]:empty::before {
    content: "Go";
  }
  #search-results:empty {
    display: none;
  }
  .search-result-link {
    display: block;
    padding-block: var(--quarter-line);
  }

  /* Footer: a rule, then one muted line. */
  .site-footer {
    padding-block: var(--quarter-line) calc(var(--line) * 1.5);
  }
  .footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--quarter-line) calc(var(--col) * 2);
    padding-block-start: var(--quarter-line);
    border-block-start: 1px solid var(--rule);
    color: var(--ink-muted);
    font-size: var(--size-small);
  }
  .footer-separator {
    display: none;
  }
  .site-footer a {
    color: var(--ink-muted);
  }
  .site-footer a:hover,
  .site-footer a:focus-visible {
    color: var(--rust);
  }
  .github-link svg {
    inline-size: 1em;
    block-size: 1em;
    vertical-align: -0.125em;
  }
}

/* --------------------------------------------------------- utilities */
@layer utilities {
  .u-text-center {
    text-align: center;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }

  @media print {
    .site-nav,
    dialog,
    button,
    .skip-link {
      display: none !important;
    }
    :root {
      --paper: #ffffff;
      --paper-shade: #f2f2f0;
      --ink: #000000;
      --ink-muted: #5e5e5e;
      --rust: #b13b1e;
      --rule: #000000;
      --rule-faint: #dcdcd8;
      --link-line: rgb(26 26 26 / 0.25);
    }
    .mermaid-diagram {
      filter: none;
    }
    .content a::after {
      content: " <" attr(href) ">";
      color: var(--ink-muted);
      font-size: var(--size-small);
    }
  }
}