/*
 * The look of Beffroi, on top of Material for MkDocs: the brand guidelines v1.0, at reading size.
 *
 * Everything the eye reads is a token of the blocks below: the brand colours, then the roles they play on
 * paper and on ink. Change a value there and the whole site follows; no colour is written anywhere else.
 *
 * What the guidelines ask of this file:
 *   - one accent, ultramarine: the active state, the primary button, the note, the 8 px square of a label.
 *     Accent text on paper is accent ink; on ink it is cold light;
 *   - flat colour and 2 px rules; corners cut at 45 degrees on the north-east and south-west, never rounded;
 *     no shadow, no glow, no gradient;
 *   - Chakra Petch for headings and buttons, Archivo for every sentence (16 px on 1.65), Martian Mono for
 *     labels, figures and code (87.5 % wide);
 *   - light by default. The ink scheme follows the rules of the dark grounds of the guidelines.
 */

@font-face {
  font-display: swap;
  font-family: "Archivo";
  font-stretch: 62% 125%;
  font-style: normal;
  font-weight: 100 900;
  src: url("../fonts/archivo.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Archivo";
  font-stretch: 62% 125%;
  font-style: italic;
  font-weight: 100 900;
  src: url("../fonts/archivo-italic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Martian Mono";
  font-stretch: 75% 112.5%;
  font-style: normal;
  font-weight: 100 800;
  src: url("../fonts/martian-mono.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/chakra-petch-semibold.woff2") format("woff2");
}

/* The brand colours, as the guidelines give them. */
:root {
  --beffroi-ink: #0c1016;
  --beffroi-paper: #f2f4f6;
  --beffroi-surface: #e6e9ee;
  --beffroi-field: #ffffff;
  --beffroi-ultramarine: #2f45ff;
  --beffroi-accent-100: #e7eaff;
  --beffroi-accent-600: #2336e0;
  --beffroi-accent-ink: #1b2bb8;
  --beffroi-cold-light: #a9b3ff;
  --beffroi-error: #b3261e;

  --bf-font-heading: "Chakra Petch", Arial, sans-serif;
  --bf-font-body: "Archivo", Arial, sans-serif;
  --bf-font-mono: "Martian Mono", Consolas, ui-monospace, monospace;

  --bf-rule: 2px;
  --bf-cut-tag: 9px;
  --bf-cut-button: 12px;
  --bf-cut-card: 16px;
  --bf-cut-hero: 18px;
  --bf-sidebar-width: 15.5rem;
  --bf-content-width: 46rem;
}

/* The roles, on paper. */
:root,
[data-md-color-scheme="default"] {
  --bf-bg: var(--beffroi-paper);
  --bf-surface: var(--beffroi-surface);
  --bf-field: var(--beffroi-field);
  --bf-text: var(--beffroi-ink);
  --bf-muted: rgba(12, 16, 22, 0.72);
  --bf-divider: rgba(12, 16, 22, 0.36);
  --bf-hairline: rgba(12, 16, 22, 0.12);
  --bf-accent: var(--beffroi-ultramarine);
  --bf-accent-hover: var(--beffroi-accent-600);
  --bf-accent-text: var(--beffroi-accent-ink);
  --bf-accent-soft: var(--beffroi-accent-100);
  --bf-on-accent: var(--beffroi-paper);
  --bf-on-error: var(--beffroi-paper);
  --bf-grid: rgba(47, 69, 255, 0.09);
}

/* The roles, on ink: paper text, cold light for accent text, errors never as red text. */
[data-md-color-scheme="slate"] {
  --bf-bg: var(--beffroi-ink);
  --bf-surface: rgba(242, 244, 246, 0.07);
  --bf-field: var(--beffroi-ink);
  --bf-text: var(--beffroi-paper);
  --bf-muted: rgba(242, 244, 246, 0.72);
  --bf-divider: rgba(242, 244, 246, 0.36);
  --bf-hairline: rgba(242, 244, 246, 0.12);
  --bf-accent: var(--beffroi-ultramarine);
  --bf-accent-hover: var(--beffroi-accent-600);
  --bf-accent-text: var(--beffroi-cold-light);
  --bf-accent-soft: rgba(47, 69, 255, 0.18);
  --bf-on-accent: var(--beffroi-paper);
  --bf-on-error: var(--beffroi-paper);
  --bf-grid: rgba(242, 244, 246, 0.07);
}

[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-default-fg-color: var(--bf-text);
  --md-default-fg-color--light: var(--bf-muted);
  --md-default-fg-color--lighter: var(--bf-divider);
  --md-default-fg-color--lightest: var(--bf-hairline);
  --md-default-bg-color: var(--bf-bg);
  --md-default-bg-color--light: var(--bf-bg);
  --md-primary-fg-color: var(--bf-accent-text);
  --md-primary-fg-color--dark: var(--bf-accent-text);
  --md-primary-bg-color: var(--bf-on-accent);
  --md-accent-fg-color: var(--bf-accent-text);
  --md-accent-fg-color--transparent: var(--bf-accent-soft);
  --md-typeset-a-color: var(--bf-accent-text);
  --md-typeset-mark-color: var(--bf-accent-soft);
  --md-typeset-table-color: var(--bf-divider);
  --md-code-bg-color: var(--bf-surface);
  --md-code-fg-color: var(--bf-text);
  --md-footer-bg-color: var(--bf-bg);
  --md-footer-fg-color: var(--bf-text);
  --md-footer-fg-color--light: var(--bf-muted);
  --md-footer-fg-color--lighter: var(--bf-muted);
  --md-text-font-family: var(--bf-font-body);
  --md-code-font-family: var(--bf-font-mono);

  /* Code in the colours of the text, with the one accent for what the language reserves. */
  --md-code-hl-color: var(--bf-accent-soft);
  --md-code-hl-keyword-color: var(--bf-accent-text);
  --md-code-hl-constant-color: var(--bf-accent-text);
  --md-code-hl-number-color: var(--bf-accent-text);
  --md-code-hl-special-color: var(--bf-accent-text);
  --md-code-hl-function-color: var(--bf-text);
  --md-code-hl-string-color: var(--bf-text);
  --md-code-hl-name-color: var(--bf-text);
  --md-code-hl-operator-color: var(--bf-muted);
  --md-code-hl-punctuation-color: var(--bf-muted);
  --md-code-hl-comment-color: var(--bf-muted);
  --md-code-hl-generic-color: var(--bf-muted);
  --md-code-hl-variable-color: var(--bf-text);
}

body {
  background-color: var(--bf-bg);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background-color: var(--bf-accent-soft);
}

/* Focus is always visible: 2 px of ultramarine, 2 px away. */
html :focus-visible {
  outline: var(--bf-rule) solid var(--bf-accent);
  outline-offset: 2px;
}

/* The icons of the brand are drawn with a 2 px stroke; the theme would fill them. */
.md-icon svg[stroke],
.twemoji svg[stroke] {
  fill: none;
}

/* ---------------------------------------------------------------- Header */

.md-header,
.md-header--shadow {
  background-color: var(--bf-bg);
  border-bottom: var(--bf-rule) solid var(--bf-text);
  box-shadow: none;
  color: var(--bf-text);
}

/* The lockup is the name: the site name next to it would spell it a second time. */
.md-header__title .md-header__topic:first-child {
  visibility: hidden;
}

.md-header__topic {
  font-family: var(--bf-font-heading);
  font-size: 0.85rem;
  font-weight: 600;
}

.md-header__button,
.md-header__option,
.md-header__source {
  color: var(--bf-text);
}

.md-header__button.md-logo {
  margin: 0.2rem 0.2rem 0.2rem 0.4rem;
  padding: 0.3rem;
}

/* The theme hides the logo on a narrow screen and shows the site name instead, which is hidden here. The
   button of the drawer stays first. */
@media screen and (max-width: 76.234375em) {
  .md-header__button.md-logo {
    display: block;
  }
  .md-header__inner > label.md-header__button[for="__drawer"] {
    order: -1;
  }
}

.md-header__button.md-logo img,
.md-nav__button.md-logo img {
  height: 1.4rem;
  width: auto;
}

/* One lockup per ground. The theme shows every image of the logo, hence the weight of these selectors. */
:is(.md-header__button, .md-nav__button).md-logo img.bf-logo--ink,
[data-md-color-scheme="slate"] :is(.md-header__button, .md-nav__button).md-logo img.bf-logo--paper {
  display: none;
}

[data-md-color-scheme="slate"] :is(.md-header__button, .md-nav__button).md-logo img.bf-logo--ink {
  display: block;
}

.md-header__source {
  font-family: var(--bf-font-mono);
  font-size: 0.6rem;
}

.md-search__form {
  background-color: var(--bf-field);
  border: var(--bf-rule) solid var(--bf-text);
  border-radius: 0;
  box-shadow: none;
  height: 2rem;
}

.md-search__form:hover {
  background-color: var(--bf-field);
}

.md-search__input {
  font-size: 0.75rem;
}

.md-search__input,
.md-search__icon,
.md-search__options .md-icon,
.md-search__input::placeholder {
  color: var(--bf-text);
}

.md-search__input::placeholder {
  color: var(--bf-muted);
}

/* The theme paints the magnifier in the colour of a primary band, which is the field's own here. */
.md-search__input + .md-search__icon {
  color: var(--bf-text);
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background-color: var(--bf-field);
  border-radius: 0;
}

.md-search__output {
  border-radius: 0;
  box-shadow: none;
}

.md-search__scrollwrap {
  background-color: var(--bf-field);
  border: var(--bf-rule) solid var(--bf-text);
  border-top: 0;
}

.md-search-result__meta {
  background-color: var(--bf-surface);
  color: var(--bf-muted);
  font-family: var(--bf-font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.md-search-result mark {
  color: var(--bf-accent-text);
}

/* The version: a tag, cut at 9 px. */
.md-version__current {
  background-color: var(--bf-surface);
  clip-path: polygon(0 0, calc(100% - var(--bf-cut-tag)) 0, 100% var(--bf-cut-tag), 100% 100%, var(--bf-cut-tag) 100%, 0 calc(100% - var(--bf-cut-tag)));
  color: var(--bf-text);
  font-family: var(--bf-font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  margin: 0 0 0 0.6rem;
  padding: 0.2rem 0.9rem 0.2rem 0.6rem;
}

.md-version__current::after {
  margin-left: 0.3rem;
}

.md-version__list {
  background-color: var(--bf-field);
  border: var(--bf-rule) solid var(--bf-text);
  border-radius: 0;
  box-shadow: none;
}

.md-version__link {
  font-family: var(--bf-font-mono);
  font-size: 0.6rem;
}

/* The drawer of a narrow screen carries the same band. */
.md-nav--primary > .md-nav__title,
.md-nav--primary > .md-nav__title .md-nav__button {
  background-color: var(--bf-bg);
  color: var(--bf-text);
}

/* ---------------------------------------------------------------- Sidebars */

.md-nav {
  font-size: 0.7rem;
  line-height: 1.5;
}

@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    width: var(--bf-sidebar-width);
  }
  .md-sidebar--secondary {
    width: 12rem;
  }
}

/* A section title is a label: an 8 px ultramarine square, its number, its name, in Martian Mono capitals. */
.md-nav--primary > .md-nav__list {
  counter-reset: bf-section;
}

.md-nav--primary .md-nav__item--section {
  counter-increment: bf-section;
}

.md-nav--primary .md-nav__item--section > .md-nav__link {
  color: var(--bf-muted);
  cursor: default;
  font-family: var(--bf-font-mono);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-bottom: 0.3rem;
  margin-top: 1.4rem;
  text-transform: uppercase;
}

.md-nav--primary .md-nav__item--section > .md-nav__link .md-ellipsis::before {
  background: linear-gradient(var(--bf-accent), var(--bf-accent)) no-repeat left center / 8px 8px;
  content: "[" counter(bf-section, decimal-leading-zero) "] ";
  padding-left: 14px;
}

.md-nav--primary .md-nav__item--section > .md-nav__link--active,
.md-nav--primary .md-nav__item--section > .md-nav__container > .md-nav__link--active {
  background-color: transparent;
  box-shadow: none;
  color: var(--bf-accent-text);
}

.md-nav__item .md-nav__link {
  border-radius: 0;
  color: var(--bf-muted);
  margin: 0;
  padding: 0.28rem 0.5rem;
}

.md-nav__item .md-nav__link:hover {
  background-color: var(--bf-surface);
  color: var(--bf-text);
}

/* The active page: accent text, and the light of the tower as a 2 px rule on its left. */
.md-nav__link--active,
.md-nav__item .md-nav__link--active:hover {
  background-color: var(--bf-accent-soft);
  box-shadow: inset var(--bf-rule) 0 0 var(--bf-accent);
  color: var(--bf-accent-text);
  font-weight: 600;
}

.md-nav--primary .md-nav__title {
  box-shadow: none;
  font-size: 0.75rem;
  font-weight: 600;
}

@media screen and (min-width: 76.25em) {
  .md-nav--primary > .md-nav__title {
    display: none;
  }
  .md-nav--primary > .md-nav__list {
    padding-top: 0.6rem;
  }
}

/* "On this page", on the right. */
.md-nav--secondary .md-nav__title {
  background: transparent;
  box-shadow: none;
  color: var(--bf-muted);
  font-family: var(--bf-font-mono);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.md-nav--secondary .md-nav__list {
  border-left: var(--bf-rule) solid var(--bf-hairline);
  margin-left: 0.6rem;
}

.md-nav--secondary .md-nav__link--active,
.md-nav--secondary .md-nav__item .md-nav__link--active:hover {
  background-color: transparent;
  box-shadow: none;
}

/* A section that is a page and a parent at once holds three elements that are all .md-nav__link: the
   container, the link and the label carrying the chevron. Only the link is painted and padded, so the
   section lines up with the pages beside it. */
.md-nav__item .md-nav__link.md-nav__container,
.md-nav__item .md-nav__link.md-nav__container:hover,
.md-nav__item .md-nav__container > label.md-nav__link,
.md-nav__item .md-nav__container > label.md-nav__link:hover {
  background-color: transparent;
  box-shadow: none;
  padding: 0;
}

.md-nav__container > a.md-nav__link {
  flex: 1;
}

/* The pencil a stub carries, from the "status" metadata, drawn from the brand's edit icon: the theme has no
   icon for a status of our own and falls back to an information circle, which says the opposite. */
:root {
  --md-status--draft: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter"><path d="M4 20V16L16 4L20 8L8 20Z"/><path d="M13 7L17 11"/></svg>');
}

.md-status--draft::after {
  -webkit-mask-image: var(--md-status--draft);
  mask-image: var(--md-status--draft);
}

.md-status::after {
  opacity: 0.72;
}

/* ---------------------------------------------------------------- Content */

.md-content {
  padding-bottom: 2rem;
}

/* The column is centred, and keeps a gutter of 0.8rem when the screen is narrower than the column. */
@media screen and (min-width: 60em) {
  .md-content__inner {
    margin-left: max(0.8rem, calc((100% - var(--bf-content-width)) / 2));
    margin-right: max(0.8rem, calc((100% - var(--bf-content-width)) / 2));
    max-width: var(--bf-content-width);
  }
}

.md-typeset {
  color: var(--bf-text);
  font-size: 0.8rem;
  line-height: 1.65;
}

.md-typeset strong {
  font-weight: 600;
}

/* Headings: Chakra Petch 600, sentence case, flush left, on the type scale of the guidelines. */
.md-typeset :is(h1, h2, h3, h4) {
  color: var(--bf-text);
  font-family: var(--bf-font-heading);
  font-weight: 600;
}

.md-typeset h1 {
  font-size: 2.3rem;
  letter-spacing: -0.01em;
  line-height: 1.04;
  margin-bottom: 1rem;
}

.md-typeset h2 {
  border-top: var(--bf-rule) solid var(--bf-text);
  font-size: 1.3rem;
  line-height: 1.1;
  margin-top: 2.6rem;
  padding-top: 1.4rem;
}

.md-typeset h3 {
  font-size: 1.1rem;
  line-height: 1.15;
  margin-top: 1.8rem;
}

.md-typeset h4 {
  font-size: 0.95rem;
  line-height: 1.15;
  margin-top: 1.4rem;
}

.md-typeset .headerlink {
  font-family: var(--bf-font-mono);
}

.md-typeset a {
  text-decoration: underline;
  text-decoration-color: var(--bf-divider);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.md-typeset a:hover {
  color: var(--bf-accent-text);
  text-decoration-color: currentcolor;
}

.md-typeset :is(.headerlink, .md-button),
.md-typeset .grid.cards a,
.md-typeset .footnote-backref {
  text-decoration: none;
}

.md-typeset hr {
  border-bottom: var(--bf-rule) solid var(--bf-hairline);
}

.md-typeset blockquote {
  border-left: var(--bf-rule) solid var(--bf-accent);
  color: var(--bf-muted);
}

.md-source-file,
.md-typeset .md-source-file__fact {
  color: var(--bf-muted);
  font-family: var(--bf-font-mono);
  font-size: 0.55rem;
}

.md-typeset kbd {
  border-radius: 0;
  box-shadow: 0 var(--bf-rule) 0 var(--bf-divider);
  font-family: var(--bf-font-mono);
}

/* ---------------------------------------------------------------- Code */

/* Martian Mono for every command, option and path, 87.5 % wide. */
.md-typeset :is(code, kbd, pre) {
  font-stretch: 87.5%;
}

.md-typeset code {
  background-color: var(--bf-surface);
  border-radius: 0;
  font-size: 0.85em;
  padding: 0.05em 0.35em;
}

.md-typeset pre > code {
  padding: 0.8rem 1rem;
}

.md-typeset a code {
  background-color: var(--bf-accent-soft);
  color: var(--bf-accent-text);
}

/* A block is a panel of surface, cut at 9 px. */
.md-typeset .highlight,
.md-typeset .highlighttable {
  clip-path: polygon(0 0, calc(100% - var(--bf-cut-tag)) 0, 100% var(--bf-cut-tag), 100% 100%, var(--bf-cut-tag) 100%, 0 calc(100% - var(--bf-cut-tag)));
}

.md-typeset pre {
  margin: 0;
}

.md-typeset .highlight > pre > code,
.md-typeset .highlighttable code {
  font-size: 0.7rem;
  line-height: 1.7;
}

/* The filename of a block, as a label above the code. */
.md-typeset .highlight span.filename {
  background-color: var(--bf-surface);
  border-bottom: var(--bf-rule) solid var(--bf-hairline);
  border-radius: 0;
  color: var(--bf-muted);
  font-family: var(--bf-font-mono);
  font-size: 0.55rem;
  font-stretch: 87.5%;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.45rem 1rem;
}

/* Every command can be copied, so the button shows before the pointer reaches it, with the brand's icon. */
:root {
  --md-code-copy-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter"><rect x="8" y="8" width="13" height="13"/><path d="M16 8V3H3V16H8"/></svg>');
}

.md-code__nav,
:hover > .md-code__nav {
  background-color: transparent;
  border-radius: 0;
}

.md-code__button,
:hover > * > .md-code__button {
  color: var(--bf-muted);
}

.md-code__button.focus-visible,
.md-code__button:hover {
  color: var(--bf-accent-text);
}

/* Tabs: the label of the one chosen in accent text, over a 2 px ultramarine rule. */
.md-typeset .tabbed-labels {
  box-shadow: 0 -2px var(--bf-hairline) inset;
}

.md-typeset .tabbed-labels > label {
  font-size: 0.7rem;
  font-weight: 600;
}

.md-typeset .tabbed-set > input:checked + label,
.md-typeset .tabbed-labels > label:hover {
  color: var(--bf-accent-text);
}

.md-typeset .tabbed-labels::before {
  background: var(--bf-accent);
  height: var(--bf-rule);
}

/* ---------------------------------------------------------------- Notes */

/*
 * Three notes, each with its word: Note in ultramarine, Warning in ink, Danger in error red. The word is a
 * tag cut at 9 px above the title, so a colour never carries the meaning alone.
 */
.md-typeset .admonition,
.md-typeset details {
  --bf-note: var(--bf-accent);
  --bf-note-on: var(--bf-on-accent);
  --bf-note-fill: var(--bf-accent-soft);
  --bf-note-word: "Note";

  background-color: var(--bf-note-fill);
  border: 0;
  border-left: var(--bf-rule) solid var(--bf-note);
  border-radius: 0;
  box-shadow: none;
  font-size: 0.775rem;
  padding: 0.75rem 1rem 0.1rem;
}

.md-typeset :is(.admonition, details):is(.warning, .caution, .attention) {
  --bf-note: var(--bf-text);
  --bf-note-on: var(--bf-bg);
  --bf-note-fill: var(--bf-surface);
  --bf-note-word: "Warning";
}

.md-typeset :is(.admonition, details):is(.danger, .error, .failure, .fail, .missing, .bug) {
  --bf-note: var(--beffroi-error);
  --bf-note-on: var(--bf-on-error);
  --bf-note-fill: var(--bf-surface);
  --bf-note-word: "Danger";
}

/* The theme paints each type in a colour of its own, and lights it on focus; every type takes the colour of
   its word instead, and nothing glows. */
.md-typeset :is(.admonition, details):is(.note, .abstract, .summary, .tldr, .info, .todo, .tip, .hint, .important, .success, .check, .done, .question, .help, .faq, .warning, .caution, .attention, .failure, .fail, .missing, .danger, .error, .bug, .example, .quote, .cite),
.md-typeset :is(.admonition, details):is(.note, .abstract, .summary, .tldr, .info, .todo, .tip, .hint, .important, .success, .check, .done, .question, .help, .faq, .warning, .caution, .attention, .failure, .fail, .missing, .danger, .error, .bug, .example, .quote, .cite):focus-within {
  border-color: var(--bf-note);
  box-shadow: none;
}

.md-typeset .admonition::before,
.md-typeset details::before {
  background-color: var(--bf-note);
  clip-path: polygon(0 0, calc(100% - var(--bf-cut-tag)) 0, 100% var(--bf-cut-tag), 100% 100%, var(--bf-cut-tag) 100%, 0 calc(100% - var(--bf-cut-tag)));
  color: var(--bf-note-on);
  content: var(--bf-note-word);
  display: inline-block;
  font-family: var(--bf-font-mono);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 0.3rem 0.8rem 0.3rem 0.5rem;
  text-transform: uppercase;
}

.md-typeset .admonition-title,
.md-typeset summary {
  background-color: transparent !important;
  border: 0;
  border-radius: 0;
  font-weight: 600;
  margin: 0.45rem 0 0.1rem;
}

[dir] .md-typeset :is(.admonition-title, summary) {
  padding: 0;
}

/* The word says what the icon of the theme would have said. */
.md-typeset .admonition-title::before,
.md-typeset :is(.admonition, details) > summary::before {
  display: none;
}

[dir] .md-typeset details > summary {
  padding-right: 1.6rem;
}

.md-typeset .admonition > :last-child,
.md-typeset details > :last-child {
  margin-bottom: 0.75rem;
}

/* ---------------------------------------------------------------- Tables */

.md-typeset table:not([class]) {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: table;
  font-size: 0.75rem;
  width: 100%;
}

.md-typeset table:not([class]) th {
  background-color: transparent;
  border-bottom: var(--bf-rule) solid var(--bf-text);
  color: var(--bf-muted);
  font-family: var(--bf-font-mono);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* A column is as wide as the token it holds: the theme breaks a code span anywhere it fits, which cuts
   "Domain" in two when the column is narrow. */
.md-typeset table:not([class]) code {
  word-break: normal;
}

.md-typeset table:not([class]) :is(th, td) {
  border-top: 0;
  border-bottom: 1px solid var(--bf-divider);
  padding: 0.55rem 0.8rem 0.55rem 0;
}

.md-typeset table:not([class]) tr:last-child td {
  border-bottom: 0;
}

.md-typeset table:not([class]) tbody tr:hover {
  background-color: transparent;
  box-shadow: none;
}

/* ---------------------------------------------------------------- Buttons */

/*
 * Buttons in Chakra Petch, cut at 12 px. The primary one is ultramarine. A bordered one is two layers, so
 * the border keeps its weight along the diagonal: the button cut in the colour of the border, and its
 * ground 2 px in, cut 1 px less.
 */
.md-typeset .md-button {
  --bf-button-border: var(--bf-text);
  --bf-button-ground: var(--bf-bg);

  background-color: var(--bf-button-border);
  border: 0;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - var(--bf-cut-button)) 0, 100% var(--bf-cut-button), 100% 100%, var(--bf-cut-button) 100%, 0 calc(100% - var(--bf-cut-button)));
  color: var(--bf-text);
  font-family: var(--bf-font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  isolation: isolate;
  padding: 0.55rem 1.3rem;
  position: relative;
  transition: none;
}

.md-typeset .md-button::before {
  background-color: var(--bf-button-ground);
  clip-path: polygon(0 0, calc(100% - var(--bf-cut-button) + 1px) 0, 100% calc(var(--bf-cut-button) - 1px), 100% 100%, calc(var(--bf-cut-button) - 1px) 100%, 0 calc(100% - var(--bf-cut-button) + 1px));
  content: "";
  inset: var(--bf-rule);
  position: absolute;
  z-index: -1;
}

.md-typeset .md-button:is(:hover, :focus) {
  --bf-button-ground: var(--bf-surface);

  background-color: var(--bf-button-border);
  border-color: transparent;
  color: var(--bf-text);
}

.md-typeset .md-button--primary,
.md-typeset .md-button--primary:is(:hover, :focus) {
  --bf-button-border: var(--bf-accent);
  --bf-button-ground: var(--bf-accent);

  color: var(--bf-on-accent);
}

.md-typeset .md-button--primary:is(:hover, :focus) {
  --bf-button-border: var(--bf-accent-hover);
  --bf-button-ground: var(--bf-accent-hover);
}

.md-typeset .md-button--primary:active {
  --bf-button-border: var(--beffroi-accent-ink);
  --bf-button-ground: var(--beffroi-accent-ink);
}

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

.md-footer {
  border-top: var(--bf-rule) solid var(--bf-text);
}

.md-footer__inner {
  display: flex;
  gap: 0.6rem;
  margin: 1rem auto;
  max-width: var(--bf-content-width);
  padding: 0;
}

.md-footer__link {
  flex: 1;
  margin: 0;
  opacity: 1;
  padding: 0.6rem 0;
}

.md-footer__link:hover .md-footer__title {
  color: var(--bf-accent-text);
}

.md-footer__direction {
  color: var(--bf-muted);
  font-family: var(--bf-font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.md-footer__title {
  font-family: var(--bf-font-heading);
  font-size: 0.95rem;
  font-weight: 600;
}

/* The meta band is ink in both schemes: paper text, cold light for what is accented. */
.md-footer-meta {
  --md-footer-fg-color: var(--beffroi-paper);
  --md-footer-fg-color--light: rgba(242, 244, 246, 0.72);
  --md-footer-fg-color--lighter: rgba(242, 244, 246, 0.72);

  background-color: var(--beffroi-ink);
  border-top: var(--bf-rule) solid var(--bf-divider);
}

.md-footer-meta .md-footer-meta__inner {
  max-width: none;
}

.md-copyright,
.md-copyright__highlight,
.md-footer-meta a,
.md-social__link {
  color: rgba(242, 244, 246, 0.72);
  font-family: var(--bf-font-mono);
  font-size: 0.55rem;
}

.md-footer-meta a:hover,
.md-social__link:hover {
  color: var(--beffroi-cold-light);
}

/* ---------------------------------------------------------------- The landing page */

/* The hero: the one place the blueprint grid shows, in a panel cut at 18 px. */
.bf-hero {
  background-color: var(--bf-bg);
  background-image:
    linear-gradient(var(--bf-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bf-grid) 1px, transparent 1px);
  background-size: 24px 24px;
  border-bottom: var(--bf-rule) solid var(--bf-text);
  clip-path: polygon(0 0, calc(100% - var(--bf-cut-hero)) 0, 100% var(--bf-cut-hero), 100% 100%, 0 100%);
  margin-bottom: 2rem;
  padding: 1.6rem 0 2rem;
}

.md-typeset .bf-label {
  color: var(--bf-muted);
  font-family: var(--bf-font-mono);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin: 0 0 0.9rem;
  text-transform: uppercase;
}

.md-typeset .bf-label::before {
  background-color: var(--bf-accent);
  content: "";
  display: inline-block;
  height: 8px;
  margin-right: 6px;
  width: 8px;
}

.md-typeset .bf-hero h1 {
  font-size: 2.7rem;
  margin-bottom: 0.9rem;
  max-width: 32rem;
}

.md-typeset .bf-hero__lead {
  color: var(--bf-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  max-width: 34rem;
}

.md-typeset .bf-hero .md-button + .md-button {
  margin-left: 0.4rem;
}

/* Cards: field on a 2 px border, cut at 16 px, two layers like a bordered button. */
.md-typeset .grid.cards > :is(ul, ol) > li,
.md-typeset .grid > .card {
  --bf-card-border: var(--bf-text);

  background-color: var(--bf-card-border);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(0 0, calc(100% - var(--bf-cut-card)) 0, 100% var(--bf-cut-card), 100% 100%, var(--bf-cut-card) 100%, 0 calc(100% - var(--bf-cut-card)));
  isolation: isolate;
  padding: 1rem 1.1rem;
  position: relative;
  transition: none;
}

.md-typeset .grid.cards > :is(ul, ol) > li::before,
.md-typeset .grid > .card::before {
  background-color: var(--bf-field);
  clip-path: polygon(0 0, calc(100% - var(--bf-cut-card) + 1px) 0, 100% calc(var(--bf-cut-card) - 1px), 100% 100%, calc(var(--bf-cut-card) - 1px) 100%, 0 calc(100% - var(--bf-cut-card) + 1px));
  content: "";
  inset: var(--bf-rule);
  position: absolute;
  z-index: -1;
}

.md-typeset .grid.cards > :is(ul, ol) > li:hover,
.md-typeset .grid > .card:hover {
  --bf-card-border: var(--bf-accent);

  border-color: transparent;
  box-shadow: none;
}

.md-typeset .grid.cards > :is(ul, ol) > li > hr {
  border-bottom: 1px solid var(--bf-divider);
  margin: 0.6rem 0;
}

.md-typeset .grid.cards > :is(ul, ol) > li > :is(p, hr):first-child {
  margin-top: 0;
}

.md-typeset .grid.cards .twemoji {
  --beffroi-icon-accent: var(--bf-accent);

  color: var(--bf-text);
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards .twemoji {
  --beffroi-icon-accent: var(--beffroi-cold-light);
}

.md-typeset .grid.cards > :is(ul, ol) > li > p > strong {
  font-family: var(--bf-font-heading);
  font-size: 1.1rem;
  font-weight: 600;
}

.md-typeset .grid.cards > :is(ul, ol) > li a {
  font-weight: 600;
}