@import "normalize.css";

/* #region fonts */
@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: InterVariable;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable-Italic.woff2") format("woff2");
}

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100; font-display: swap; src: url("/fonts/Inter-Thin.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100; font-display: swap; src: url("/fonts/Inter-ThinItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 200; font-display: swap; src: url("/fonts/Inter-ExtraLight.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 200; font-display: swap; src: url("/fonts/Inter-ExtraLightItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/Inter-Light.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 300; font-display: swap; src: url("/fonts/Inter-LightItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/Inter-Italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 500; font-display: swap; src: url("/fonts/Inter-MediumItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 600; font-display: swap; src: url("/fonts/Inter-SemiBoldItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/Inter-Bold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 700; font-display: swap; src: url("/fonts/Inter-BoldItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/Inter-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 800; font-display: swap; src: url("/fonts/Inter-ExtraBoldItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 900; font-display: swap; src: url("/fonts/Inter-Black.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 900; font-display: swap; src: url("/fonts/Inter-BlackItalic.woff2") format("woff2"); }

@font-face {
  font-family: Cascadia Code;
  src: url(/fonts/CascadiaCode.woff2) format(woff2);
  src: local("Cascadia Code Regular");
  src: local("Cascadia Code Regular"), url(/fonts/CascadiaCode.woff2) format(woff2);
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Cascadia Code Italic;
  src: url(/fonts/CascadiaCodeItalic.woff2) format(woff2);
  src: local("Cascadia Code Italic");
  src: local("Cascadia Code Italic"), url(/fonts/CascadiaCodeItalic.woff2) format(woff2);
  font-style: italic;
  font-display: swap;
}

:root {
  font-family: Inter, "Noto Sans", Roboto, Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;
}

@supports (font-variation-settings: normal) {
  :root { 
    font-family: "InterVariable", "Noto Sans", Roboto, Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif; 
    font-optical-sizing: auto; 
  }
}
/* #endregion fonts */

/* #region prism */
/* PrismJS 1.29.0
https://prismjs.com/download.html#themes=prism-tomorrow&languages=sql */

@media (prefers-color-scheme: dark) {
  /**
 * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
 * Based on https://github.com/chriskempson/tomorrow-theme
 * @author Rose Pritchard
 */
  code[class*="language-"],
  pre[class*="language-"] {
    color: #ccc;
    background: none;
    /* font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; */
    font-family: Cascadia Code, Roboto Mono, Lucida Sans Typewriter, Lucida Console, monospace;
    font-weight: var(--code-font-weight);
    font-size: 0.9rem;
    text-align: left;
    /* white-space: pre; */
    white-space: break-spaces;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.3;

    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;

    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
  }

  /* Code blocks */
  pre[class*="language-"] {
    /* padding: 1em; */
    padding: var(--padding-single);
    margin: 0.5em 0;
    overflow: auto;
  }

  :not(pre) > code[class*="language-"],
  pre[class*="language-"] {
    background: #2d2d2d;
  }

  /* Inline code */
  :not(pre) > code[class*="language-"] {
    padding: 0.1em;
    border-radius: 0.3em;
    white-space: normal;
  }

  .token.comment,
  .token.block-comment {
    /* color: #509050; */
    color: #7ec699;
  }

  /* .token.comment,
  .token.block-comment, */
  .token.prolog,
  .token.doctype,
  .token.cdata {
    color: #999;
  }

  .token.punctuation {
    color: #ccc;
  }

  .token.tag,
  .token.attr-name,
  .token.namespace,
  .token.deleted {
    color: #e2777a;
  }

  .token.function-name {
    color: #6196cc;
  }

  .token.boolean,
  .token.number,
  .token.function {
    color: #f08d49;
  }

  .token.property,
  .token.class-name,
  .token.constant,
  .token.symbol {
    color: #f8c555;
  }

  .token.selector,
  .token.important,
  .token.atrule,
  .token.keyword,
  .token.builtin {
    color: #cc99cd;
  }

  .token.string,
  .token.char,
  .token.attr-value,
  .token.regex,
  .token.variable {
    /* color: #7ec699; */
    color: #f8c555;
  }

  .token.operator,
  .token.entity,
  .token.url {
    color: #67cdcc;
  }

  .token.important,
  .token.bold {
    font-weight: bold;
  }
  .token.italic {
    font-style: italic;
  }

  .token.entity {
    cursor: help;
  }

  .token.inserted {
    color: green;
  }
}

@media (prefers-color-scheme: light) {
  /**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */

  code[class*="language-"],
  pre[class*="language-"] {
    color: black;
    background: none;
    text-shadow: 0 1px white;
    /* font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; */
    font-family: Cascadia Code, Roboto Mono, Lucida Sans Typewriter, Lucida Console, monospace;
    font-weight: var(--code-font-weight);
    font-size: 0.9rem;
    text-align: left;
    /* white-space: pre; */
    white-space: break-spaces;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.3;

    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;

    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
  }

  pre[class*="language-"]::-moz-selection,
  pre[class*="language-"] ::-moz-selection,
  code[class*="language-"]::-moz-selection,
  code[class*="language-"] ::-moz-selection {
    text-shadow: none;
    background: #b3d4fc;
  }

  pre[class*="language-"]::selection,
  pre[class*="language-"] ::selection,
  code[class*="language-"]::selection,
  code[class*="language-"] ::selection {
    text-shadow: none;
    background: #b3d4fc;
  }

  @media print {
    code[class*="language-"],
    pre[class*="language-"] {
      text-shadow: none;
    }
  }

  /* Code blocks */
  pre[class*="language-"] {
    padding: 1em;
    margin: 0.5em 0;
    overflow: auto;
  }

  :not(pre) > code[class*="language-"],
  pre[class*="language-"] {
    background: var(--pre-bg-colour);
    /* background: #f5f2f0; */
  }

  /* Inline code */
  :not(pre) > code {
    background: var(--code-inline-bgcolour);
    padding: 0.1em;
    border-radius: 0.3em;
    white-space: normal;
  }

  .token.comment,
  .token.prolog,
  .token.doctype,
  .token.cdata {
    color: green;
  }

  .token.punctuation {
    color: #999;
  }

  .token.namespace {
    opacity: 0.7;
  }

  .token.property,
  .token.tag,
  .token.boolean,
  .token.number,
  .token.constant,
  .token.symbol,
  .token.deleted {
    color: maroon;
  }

  .token.selector,
  .token.attr-name,
  .token.string,
  .token.char,
  .token.builtin,
  .token.inserted {
    color: #690;
  }

  .token.operator,
  .token.entity,
  .token.url,
  .language-css .token.string,
  .style .token.string {
    color: #9a6e3a;
    /* This background color was intended by the author of this theme. */
    /* background: hsla(0, 0%, 100%, 0.5); */
  }

  .token.atrule,
  .token.attr-value,
  .token.keyword {
    color: #00f;
  }

  .token.function,
  .token.class-name {
    color: #dd4a68;
  }

  .token.regex,
  .token.important,
  .token.variable {
    color: black;
  }

  .token.important,
  .token.bold {
    font-weight: bold;
  }
  .token.italic {
    font-style: italic;
  }

  .token.entity {
    cursor: help;
  }
}
/* #endregion */

/* #region variables */
:root {
  color-scheme: light dark;

  --page-bg-colour: light-dark(#183e7c, #101028);
  --body-bg-colour: light-dark(ghostwhite, #101028);
  --nav-bg-colour: light-dark(lightgrey, #303030);
  --main-bg-colour: light-dark(whitesmoke, #101020);
  --article-bg-colour: light-dark(ghostwhite, #202020);
  --title-colour: light-dark(cornflowerblue, #80c0ff);
  --title-bg-colour: light-dark(lightblue, #102050);
  --article-date-bg-colour: light-dark(lightblue, #102050);
  --text-colour: light-dark(black, #b0b0b0);
  --text-colour-subtle: light-dark(darkslategrey, #808080);
  --heading-colour: light-dark(#102050, cornflowerblue);
  --link-colour: light-dark(navy, #20b0ff);
  --visited-colour: light-dark(purple, #c080c0);

  --pre-bg-colour: light-dark(#f0f0f0, #303030);
  --code-inline-bgcolour: light-dark(#e0e0e0, #404040);
  --code-text-colour: light-dark(darkslategrey, #808080);
  --code-font-weight: 500;

  --info-box-colour: light-dark(#BBDEFF, #203070);
  --warning-code-border-colour: light-dark(red, #C2185B);

  --link-disabled-colour: light-dark(gray, #606060);
  --link-disabled-bg-colour: light-dark(lightgrey, #202020);

  --border-colour: light-dark(silver, grey);
  --border-colour-strong: light-dark(black, silver);

  --table-box-shadow-colour: silver;
  --table-header-row-bg-colour: light-dark(var(--title-bg-colour), var(--page-bg-colour));
  --table-alternate-row-bg-colour: light-dark(#f0f0f0, #303030);
  --table-bottom-border-colour: light-dark(var(--border-colour-strong), var(--border-colour));

  --mark-bg-colour: light-dark(mark, #A0A000);

  --quote-border-colour: light-dark(var(--page-bg-colour), var(--border-colour));

  --margin-double: 2rem;
  --margin-single: 1rem;
  --margin-half: 0.5rem;
  --margin-thin: 0.25rem;

  --padding-single: 1rem;
  --padding-half: 0.5rem;
  --padding-thin: 0.25rem;

  --small-breakpoint: 30rem;

  --border-size-thin: 1px;
  --border-size-medium: 2px;
  --border-size-thick: 4px;

  --body-max-inline-size: 1280px;
  --width-min-chars: 30ch;
  --width-max-chars: 75ch;

  --line-height-heading: 2rem;
  --line-height-heading-small: 1.7rem;
  --line-height: 1.5rem;
  --line-height-small: 1.25rem;

  --article-grid-row-gap: 1rem;
  --article-grid-column-gap: 0.5rem;
  --article-thumbnail-small: 40%;
  --article-thumbnail-full: 33%;
}
/* #endregion variables */

html {
  color: var(--text-colour);
  background-color: var(--page-bg-colour);
  font-size: clamp(1rem, 0.6rem + 0.7vw, 1.25rem);
  scroll-behavior: smooth;
}

body {
  background-color: var(--body-bg-colour);
  max-inline-size: var(--body-max-inline-size);
  min-height: 100vh;
  margin: auto;
}

* {
  box-sizing: border-box;
}

/* #region small sizes */
@media (width < 30rem) or (height < 30rem) {
  /* no banner image or table of contents */
  .banner-picture, .sidebar-toc {
    display: none;
  }

  .sidebar-about,
  .sidebar-search {
    margin-block-start: var(--margin-single);
  }

  .article {
    clear: left;
    border-block-start: var(--border-size-thin) solid var(--border-colour);
  }

  .article-title {
    text-align: center;
    text-wrap: balance;
    border-block-start: var(--border-size-thin) solid var(--border-colour);
    padding-block-start: var(--padding-single);
    margin-block-start: 0px;
  }

  .article-thumbnail {
    width: var(--article-thumbnail-full);
    aspect-ratio: 1/1;
  }

  .page-index {
    text-align: center;
  }

  /* section header */
  h2, h3, h4 {
    color: var(--title-colour);
  }

  /* typography */
  main {
    line-height: var(--line-height-small);
  }

  h1, h2, h3, h4 {
    line-height: var(--line-height-heading-small);
  }

  h1 {
    font-size: 1.33rem;
  }

  h2 {
    font-size: 1.21rem;
  }

  h3 {
    font-size: 1.15rem;
  }

  h4 {
    font-size: 1.05rem;
  }

  code {
    font-size: 0.85rem;
  }
}
/* #endregion  */

/* #region large sizes */
@media not ((width < 30rem) or (height < 30rem)) {
  /* no banner text */
  .banner-text {
    display: none;
  }

  body {
    padding: var(--padding-single);
  }

  header {
    border: var(--border-size-medium) solid var(--border-colour);
  }

  main {
    background-color: var(--main-bg-colour);
    padding: var(--padding-single);
    border-inline: var(--border-size-medium) solid var(--border-colour);
    border-block-end: var(--border-size-medium) solid var(--border-colour);
    line-height: var(--line-height);
  }

  article {
    border: var(--border-size-thin) solid var(--border-colour);
  }

  .article-title {
    margin-block-start: 1rem;
    padding-inline-start: var(--padding-half);
    text-align: center;
    font-size: 200%;
  }

  .page-index {
    padding-inline-start: var(--padding-half);
    text-align: center;
  }

  .article-box-entry-title {
    text-align: center;
    text-wrap: balance;
  }

  .article-thumbnail {
    width: var(--article-thumbnail-small);
    aspect-ratio: 1/1;
  }

  /* home page article list */
  .articles {
    display: grid;
    column-gap: var(--article-grid-column-gap);
    row-gap: var(--article-grid-row-gap);

    grid-template-columns: 1fr;

    @media (min-width: 45rem) {
      grid-template-columns: repeat(2, 1fr);
    }
    @media (min-width: 66rem) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .sidebar-toc,
  .sidebar-about,
  .sidebar-search {
    width: 100%;
    border: var(--border-size-thin) solid var(--border-colour);
  }

  .sidebar-toc {
    grid-area: toc;
    position: sticky;
    top: var(--margin-single);
    z-index: 10;
  }

  .sidebar-about {
    grid-area: about;
  }

  .sidebar-search {
    grid-area: search;

    align-self: self-start;
    border-block-start: var(--border-size-medium) solid var(--border-colour);
  }

  /* typography */
  h1,
  h2,
  h3 {
    line-height: var(--line-height-heading);
  }

  h1 {
    font-size: 1.73rem;
  }

  h2 {
    font-size: 1.44rem;
  }

  h3 {
    font-size: 1.3rem;
  }

  h4 {
    font-size: 1.2rem;
  }
}
/* #endregion  */

a {
  text-decoration: none;
  &:link {
    color: var(--link-colour);
  }

  &:visited {
    color: var(--visited-colour);
  }

  &:hover {
    text-decoration: underline;
  }
}

mark {
  background-color: var(--mark-bg-colour);
}

.md-info {
  border-block: var(--border-size-thick) dotted var(--border-colour);
  background-color: var(--info-box-colour);
  margin-block: var(--margin-double);
  padding-inline: var(--padding-half);
}

.md-warning {
  border-block: var(--warning-code-border-colour) dotted var(--border-size-thick);
}

table {
  border-collapse: collapse;
  box-shadow: 0 0 var(--padding-half) var(--table-box-shadow-colour);
  margin: var(--margin-double) var(--margin-single);

  thead tr {
    background-color: var(--table-header-row-bg-colour);
    text-align: center;
  }

  th {
    font-weight: bold;
  }

  th,
  td {
    padding: var(--padding-half) var(--padding-single);
  }

  tbody > tr {
    border-block-end: var(--border-size-thin) solid var(--border-colour);
  }

  tbody > tr:nth-of-type(even) {
    background-color: var(--table-alternate-row-bg-colour);
  }

  tbody tr:last-of-type {
    border-bottom: var(--border-size-medium) solid var(--table-bottom-border-colour);
  }

  td {
    text-align: center;
  }
}

.home-page-links {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  list-style-type: none;
  padding-inline: 0px;
}

.home-page-link-item, .home-page-non-link-item {
  width: 10rem;
  height: 2rem;
  text-align: center;
  align-content: center;
  border: var(--border-size-medium) solid var(--border-colour);
}

.home-page-link-item {
  background-color: var(--body-bg-colour);
  transition: 0.4s;
}

.home-page-non-link-item {
  background-color: var(--link-disabled-bg-colour);
  color: var(--link-disabled-colour);
}

.home-page-link-item:hover {
  box-shadow: 0 0 2px;
}

.home-page-link {
  display: block;
}

header {
  position: static;
}

main.not-found {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: var(--article-grid-column-gap);
  justify-content: space-between;
}

main.not-found .message {
  flex: 1 1 0;
  min-width: 10rem;
  max-width: 75rem;
}

main.not-found .sidebar-search {
  flex: 1 1 0;
  min-width: 10rem;
  max-width: 15rem;
  margin: 0 auto;
}

@media (prefers-reduced-motion: no-preference) {
  main {
    opacity: 1;
    transition-property: opacity;
    transition-duration: 0.5s;
    transition-timing-function: ease-in;
    transition-behavior: allow-discrete;
  }
}

@starting-style {
  main {
    opacity: 0%;
  }
}

blockquote {
  position: relative;
  padding-inline-start: 1.5rem;
  border-inline-start: var(--quote-border-colour) solid 4px;
}

@media ((width < 45rem) or (height < 30rem)) {
  main.full {
    display: flex;
    flex-direction: column;
  }
}

@media ((width >= 45rem) and (height >= 30rem)) {
  main.full {
    display: grid;
    justify-content: center;

    grid-template:
      "article about" auto
      "article search" auto
      "article toc" auto
      "article ." 1fr
      / fit-content(var(--width-max-chars)) fit-content(15rem);

    column-gap: var(--margin-single);
    row-gap: var(--margin-single);
  }

  article.full {
    max-width: var(--width-max-chars);
    width: 100%;
  }
}

article {
  background-color: var(--article-bg-colour);
  padding: var(--padding-half);
}

article.full {
  grid-area: article;
  min-width: var(--width-min-chars);
}

article.full p {
  overflow-wrap: anywhere;
  word-break: normal;
}

.sidebar-about,
.sidebar-search,
.sidebar-toc {
  background-color: var(--nav-bg-colour);
  padding-inline: var(--padding-single);
  padding-block-end: var(--padding-single);
}

.sidebar-about {
  display: flex;
  flex-direction: column;
  row-gap: var(--padding-single);
  padding-block-start: var(--padding-single);
}

a.x-sqlkiwi {
  display: block;
  background-color: black;
  border-radius: 0.75rem;
  color: ghostwhite;
  text-align: center;
  align-content: center;
  height: 2rem;
}

.rss-feed {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: var(--article-grid-column-gap);
}

.rss-feed .rss-svg {
  flex: 0 0 2rem;
  overflow: hidden;
}

.rss-feed .rss-label {
  flex: 0 0 content;
}

.footer-rss-feed-wrapper {
  display: flex;
  justify-content: center;
  margin-block-end: 1rem;
}

.site-search {
  display: grid;
  align-items: center;
  justify-content: center;

  grid-template:
    "input input" auto
    "engine engine" auto
    "google duck" auto
    / 1fr 1fr;

  gap: var(--article-grid-column-gap);
}

.search-terms {
  grid-area: input;
  padding: var(--padding-thin);
}

.search-engine {
  grid-area: engine;
  align-self: center;
  justify-self: center;
}

.search-google,
.search-ddg {
  max-width: 25vw;
  border-radius: 0.5rem;
  border: var(--border-colour-strong) outset var(--border-size-medium);
  padding-block-start: var(--padding-thin);
  background-color: var(--nav-bg-colour);
  aspect-ratio: 2/1;
}

:is(.search-google, .search-ddg) > svg {
  width: 100%;
  height: 100%;
}

.search-google {
  grid-area: google;
}

.search-ddg {
  grid-area: duck;
}

.site-search > button {
  transition: 0.4s;
}

.site-search > button:hover {
  background-color: var(--title-bg-colour);
  box-shadow: 0 0 8px;
}

.sidebar-toc h3 a {
  color: var(--heading-colour);
  display: block;
  transition: all 50ms ease-in;
}

.sidebar-toc h3 a:hover {
  background-color: var(--title-bg-colour);
  text-decoration: none;
}

.sidebar-toc h3 a:focus {
  background-color: var(--title-bg-colour);
  text-decoration: none;
}

nav.toc {
  max-block-size: 85vh;
  overflow-y: auto;
}

nav.toc a {
  color: var(--text-colour-subtle);
  display: block;
  transition: all 50ms ease-in;
}

nav.toc a:hover {
  background-color: var(--title-bg-colour);
  text-decoration: none;
}
nav.toc a:focus {
  background-color: var(--title-bg-colour);
  text-decoration: none;
}

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

nav.toc ol ol {
  list-style: none;
  padding-inline-start: var(--padding-single);
}

#nav-pages-bottom {
  clear: both;
  padding-block-start: var(--padding-thin);
}

footer {
  border-block: var(--border-size-medium) solid var(--border-colour);
  margin-block-start: var(--margin-single);
  background-color: var(--nav-bg-colour);
  text-align: center;
}

img,
picture {
  display: block;
  max-inline-size: 100%;
  height: auto;
}

.display-inline {
  display: inline;
}

.float-inline-start {
  float: inline-start;
  margin-inline-end: 0.5rem;
  margin-block-end: 0.5rem;
}

.clear-left {
  clear: left;
}

@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(0.75) contrast(1.2);
  }
}

.banner-picture {
  position: static;
}

.banner-text {
  text-align: center;
  text-wrap: balance;
}

.banner-title {
  font-size: 150%;
  margin-block: 0rem;
  padding-block: var(--padding-half);
  color: var(--title-colour);
  background-color: var(--title-bg-colour);
}

.banner-subtitle {
  font-size: 110%;
  margin-block: var(--margin-half);
  color: var(--text-colour);
}

/* home page only */
.banner-caption {
  font-style: italic;
  color: var(--text-colour-subtle);
}

.article-published {
  margin: 0px;
  padding-block: var(--padding-thin);
  font-weight: bold;
  text-align: center;
  background-color: var(--article-date-bg-colour);
}

.article-box {
  padding: 0rem var(--padding-half);
}

.article-thumbnail {
  object-fit: cover;
  float: inline-start;
  padding-inline-end: var(--padding-single);
  padding-block-end: var(--padding-thin);
}

.article-extract {
  color: var(--text-colour);
}

h1 {
  text-align: center;
  text-wrap: balance;
}

h1,
h2,
h3,
h4 {
  color: var(--heading-colour);
}

pre {
  max-height: 70vh;
}

pre.language-xml {
  line-break: anywhere;
}

:not(pre) > code {
  font-family: Cascadia Code, Roboto Mono, Lucida Sans Typewriter, Lucida Console, monospace;
  background-color: var(--code-inline-bgcolour);
  padding-inline: var(--padding-thin);
  font-size: 90%;
}