@charset "UTF-8";
:root {
  --bg: white;
  --fg: black;
  --accent: hsl(280, 80%, 42%);
  --light: white;
  --dark: hsl(0, 0%, 12%);
}
@media print {
  :root {
    --bg: white;
    --fg: #121212;
    --accent: indigo;
    --light: white;
    --dark: #121212;
  }
}

.dark-mode {
  --bg: hsl(0, 0%, 12%);
  --fg: white;
  --accent: hsl(280, 80%, 69%);
  --light: white;
  --dark: hsl(0, 0%, 12%);
}
@media print {
  .dark-mode {
    --bg: white;
    --fg: #121212;
    --accent: indigo;
    --light: white;
    --dark: #121212;
  }
}

:root {
  --font-sans-serif: "Inter", sans-serif;
  --font-serif: "Inter", ui-serif, serif;
  --font-mono: "JBMono", monospace;
  --font-size-100: 0.625rem;
  --font-size-200: 0.75rem;
  --font-size-250: 0.825rem;
  --font-size-300: 0.875rem;
  --font-size-400: 1rem;
  --font-size-500: 1.125rem;
  --font-size-600: 1.25rem;
  --font-size-700: 1.5rem;
  --font-size-800: 2rem;
  --size-50: 0.1rem;
  --size-100: 0.2rem;
  --size-200: 0.5rem;
  --size-250: 0.625rem;
  --size-300: 0.75rem;
  --size-400: 1rem;
  --size-500: 1.25rem;
  --size-600: 1.5rem;
  --size-700: 2rem;
  --size-800: 3rem;
  --size-900: 4rem;
  --border-hairline: 1px;
  --border-thin: 0.075rem;
  --border-medium: 0.1rem;
  --border-thick: 0.125rem;
  --border-extrathick: 0.2rem;
  --border-radius-tiny: 0.25rem;
  --border-radius-small: 0.375rem;
  --border-radius-medium: 0.5rem;
  --border-radius-large: 0.75rem;
  --border-radius-xl: 1rem;
  --border-radius-circle: 100%;
  --header-width: 84ch;
  --wide-width: calc(var(--header-width) - 2rem);
  --content-width: 69ch;
}

/* Display fonts */
/* Text fonts */
@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: "Regular";
  src: url("/fonts/Inter/Inter-Roman.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
  font-named-instance: "Italic";
  src: url("/fonts/Inter/Inter-Italic.woff2") format("woff2");
}
/* Monospace fonts */
@font-face {
  font-family: "JBMono";
  src: url("/fonts/JBMono/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JBMono";
  src: url("/fonts/JBMono/JetBrainsMono-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body,
div,
span,
object,
iframe,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
code,
em,
img,
small,
strike,
strong,
sub,
sup,
tt,
b,
u,
i,
ol,
ul,
li,
fieldset,
form,
label,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
main,
canvas,
embed,
footer,
header,
nav,
section,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: none;
}

footer,
header,
nav,
section,
main {
  display: block;
}

body {
  line-height: 1.5;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input {
  border-radius: 0;
}

html {
  font-size: 115%;
  font-family: var(--font-sans-serif);
  font-weight: 400;
  scroll-padding-top: var(--size-300);
  text-underline-offset: 0.14em;
  scrollbar-color: var(--accent) var(--bg);
}
@media (min-width: 640px) {
  html {
    font-size: 125%;
  }
}
@media print {
  html {
    font-size: 80%;
  }
}

body {
  background-color: var(--bg);
  color: var(--fg);
}

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

body {
  line-height: 1.5;
  font-feature-settings: "ss01", "ss02", "ss07", "ss08", "cv01", "cv10";
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.25;
  margin-block-start: 2em;
  margin-block-end: 0.35em;
}

h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p {
  --flow-space: 0;
}

h1 {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  line-height: 1.2;
  font-weight: 500;
  font-variation-settings: "wght" 500;
  text-wrap: balance;
}

h1 {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  line-height: 1.1;
  font-weight: 600;
  font-variation-settings: "wght" 600;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

h2 {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 500;
  font-variation-settings: "wght" 500;
  text-wrap: balance;
}

h2 {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 650;
  font-variation-settings: "wght" 650;
  text-wrap: balance;
}

h3 {
  font-family: var(--font-sans-serif);
  letter-spacing: -0.02em;
  font-size: 1.5rem;
  font-weight: 600;
  text-wrap: balance;
}

h4 {
  font-family: var(--font-sans-serif);
  font-size: 1.2rem;
  font-weight: 500;
  text-wrap: balance;
}

h5 {
  font-family: var(--font-sans-serif);
  font-size: 1.125rem;
  font-weight: 600;
  text-wrap: balance;
}

h6 {
  font-family: var(--font-sans-serif);
  font-size: 1rem;
  font-weight: 600;
  text-wrap: balance;
}

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

hr {
  --flow-space: 2rem;
  color: var(--fg);
  border: var(--border-hairline) solid var(--fg);
}

sup {
  font-size: var(--font-size-200);
  vertical-align: super;
}

sub {
  font-size: var(--font-size-200);
  vertical-align: sub;
}

pre {
  font-family: var(--font-mono);
}

q {
  quotes: "“" "”" "‘" "’";
}

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

a {
  text-decoration: underline;
}
a, a:visited {
  color: var(--fg);
  outline: none;
  transition: outline 0.1s ease-out;
}
a:hover {
  text-decoration: none;
  color: var(--accent);
}
a:focus {
  outline: 0.15em solid var(--accent);
  outline-offset: 0.125em;
  border-radius: 0.1em;
  text-decoration: none;
}

button {
  all: unset;
  padding: 0.1rem;
  outline: none;
  transition: outline 0.1s ease-out;
  border-radius: 0.15rem;
  cursor: pointer;
}
button:hover {
  text-decoration: underline;
  color: var(--accent);
}
button:focus {
  outline: 0.15em solid var(--accent);
  outline-offset: 0.2em;
}

@media print {
  .dark-mode-toggle {
    display: none;
  }
}

input,
textarea {
  margin-inline: 0.5rem;
  margin-block: 0.5rem;
  padding: 0.25rem;
  font-size: 0.8rem;
  border: var(--border-medium) solid var(--fg);
  border-radius: 0.3rem;
  background-color: var(--bg);
  color: var(--fg);
}

ol,
ul {
  --flow-space: var(--font-size-100);
  padding-inline-start: var(--size-400);
  list-style-position: outside;
}
@media (min-width: 640px) {
  ol,
  ul {
    padding-inline-start: var(--size-700);
  }
}

li {
  margin-block-start: var(--size-200);
}

li p + p {
  margin-block-start: var(--size-300);
}

li figure {
  margin-block: var(--size-400);
}

li p:last-child {
  margin-block-end: var(--size-400);
}

p:first-child {
  margin-block-start: var(--size-300);
}

p:last-child {
  margin-block-end: var(--size-300);
}

code {
  font-family: var(--font-mono);
}

blockquote {
  font-size: var(--font-size-400);
  margin-block: var(--size-700);
  border-inline-start: var(--border-thick) solid var(--accent);
  margin-inline-start: var(--size-300);
  padding-inline-start: var(--size-300);
}
@media (min-width: 640px) {
  blockquote {
    border: var(--border-thick) solid var(--accent);
    border-radius: var(--border-radius-large);
    border-end-start-radius: var(--border-radius-tiny);
    padding-block: var(--size-100);
    padding-inline: var(--size-300);
    quotes: "“" "”" "‘" "’";
    width: 100%;
    width: max-content;
    max-width: 90%;
  }
}

blockquote > p {
  margin-block: var(--size-300);
  text-indent: var(--size-300);
}
@media (min-width: 640px) {
  blockquote > p {
    text-indent: var(--size-400);
  }
}

blockquote cite {
  display: block;
  text-align: right;
}

dt {
  margin-block-start: 1rem;
  font-weight: 500;
}

.border-thin {
  border: var(--border-thin) solid var(--fg);
}

.border-medium {
  border: var(--border-medium) solid var(--fg);
}

.border-thick {
  border: var(--border-thick) solid var(--fg);
}

.border-radius-tiny {
  border-radius: var(--border-radius-tiny);
}

.border-radius-small {
  border-radius: var(--border-radius-small);
}

.border-radius-medium {
  border-radius: var(--border-radius-medium);
}

.border-radius-large {
  border-radius: var(--border-radius-large);
}

.float-right {
  float: right;
}

.flow > * + * {
  margin-block-start: var(--flow-space, 1.2em);
}

.wrapper {
  margin-inline: auto;
  padding-inline: var(--size-300);
  padding-block: var(--size-500);
}
@media print {
  .wrapper {
    max-width: inherit;
  }
}

.full-bleed {
  --width: 100vw;
  --half-width: calc(var(--width) / 2);
  width: var(--width);
  margin-inline-start: calc(50% - var(--half-width));
}

.wide-bleed {
  --width: 100%;
  --half-width: calc(var(--width) / 2);
  width: var(--width);
  margin-inline-start: calc(50% - var(--half-width));
}
@media (min-width: 640px) {
  .wide-bleed {
    --width: clamp(100%, 90vw, 1350px);
  }
}

.header-width {
  margin-inline: auto;
}
@media screen {
  .header-width {
    max-width: var(--header-width);
  }
}

.wide-width {
  margin-inline: auto;
}
@media screen {
  .wide-width {
    max-width: var(--wide-width);
  }
}

.content-width {
  margin-inline: auto;
}
@media screen {
  .content-width {
    max-width: var(--content-width);
  }
}

a.plain-link,
.plain-link a {
  text-decoration: none;
}
a.plain-link:hover,
.plain-link a:hover {
  text-decoration: underline;
}
a.plain-link:focus,
.plain-link a:focus {
  text-decoration: none;
}

.site__header {
  max-width: var(--header-width);
  margin-inline: auto;
  margin-block-end: var(--size-700);
  line-height: 1;
  border-block-end: var(--border-medium) solid var(--fg);
  padding-block-end: var(--size-400);
}
@media (min-width: 640px) {
  .site__header {
    display: flex;
    justify-content: space-between;
  }
}

.header__logo {
  margin: 0;
  margin-block-end: var(--size-400);
  font-family: var(--font-serif);
  text-align: center;
  font-size: var(--font-size-600);
  font-weight: 600;
  font-variation-settings: "wght" 700;
}
@media (min-width: 640px) {
  .header__logo {
    margin-block-end: 0;
    text-align: left;
  }
}

.header__sections {
  margin-inline-start: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.skip__nav {
  position: absolute;
  transform: translateY(-200%);
  background-color: var(--bg);
  padding: 0.1rem 0.2rem;
}
.skip__nav:focus {
  transform: translateY(300%);
}
@media (min-width: 640px) {
  .skip__nav:focus {
    transform: translateY(180%);
  }
}

.site__footer {
  max-width: var(--header-width);
  margin-inline: auto;
  margin-block-start: var(--size-700);
  padding-block-start: var(--size-600);
  border-block-start: var(--border-medium) solid var(--fg);
  line-height: 1;
}
@media (min-width: 640px) {
  .site__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-block-start: var(--size-400);
  }
}

.footer__copyright {
  display: block;
  text-align: center;
  margin: 0;
  margin-block-end: var(--size-400);
}
@media (min-width: 640px) {
  .footer__copyright {
    margin: 0;
    text-align: left;
  }
}

.footer__links {
  margin-inline-start: auto;
  align-items: center;
  justify-content: center;
  display: flex;
  gap: 1rem;
}

a.footnote-ref {
  color: var(--accent);
  text-decoration: none;
}
a.footnote-ref:hover {
  text-decoration: underline;
}

.footnote-ref::before {
  content: "[";
}

.footnote-ref::after {
  content: "]";
}

.footnotes {
  font-size: var(--font-size-300);
}
.footnotes .footnote-backref {
  font-size: var(--font-size-300);
  color: var(--accent);
  text-decoration: none;
}
.footnotes .footnote-backref:hover {
  text-decoration: underline;
}

pre {
  border-radius: 0.5rem;
  padding: 0.75rem;
  overflow-x: auto;
  font-variant-ligatures: none;
  line-height: 1.25;
}

p code,
li code,
h4 code,
kbd,
samp {
  font-family: var(--font-mono);
  padding: 0.05rem 0.2rem;
  border: var(--border-medium) solid var(--fg);
  border-radius: 0.2rem;
  font-size: 0.9rem;
}

h4 code {
  font-size: 1.2rem;
}

:root {
  --chroma-bg: #f4f0ed;
  --chroma-fg: #4f453b;
  --chroma-black: #e9e1db;
  --chroma-red: #d7898c;
  --chroma-green: #83b887;
  --chroma-yellow: #c29830;
  --chroma-blue: #485f84;
  --chroma-magenta: #be79bb;
  --chroma-cyan: #729893;
  --chroma-white: #a38d78;
  --chroma-brblack: #ded2c8;
  --chroma-brred: #c65333;
  --chroma-brgreen: #659e69;
  --chroma-bryellow: #c29830;
  --chroma-brblue: #485f84;
  --chroma-brmagenta: #854882;
  --chroma-brcyan: #436460;
  --chroma-brwhite: #867462;
}

.dark-mode {
  --chroma-fg: #ece1d7;
  --chroma-black: #352f2a;
  --chroma-red: #b65c60;
  --chroma-green: #78997a;
  --chroma-yellow: #ebc06d;
  --chroma-blue: #9aacce;
  --chroma-magenta: #b380b0;
  --chroma-cyan: #86a3a3;
  --chroma-white: #a38d78;
  --chroma-brblack: #4d453e;
  --chroma-brred: #f17c64;
  --chroma-brgreen: #99d59d;
  --chroma-bryellow: #ebc06d;
  --chroma-brblue: #9aacce;
  --chroma-brmagenta: #ce9bcb;
  --chroma-brcyan: #88b3b2;
  --chroma-brwhite: #c1a78e;
  --chroma-bg: #2a2520;
}

.highlight {
  border: var(--border-medium) solid var(--chroma-fg);
  border-radius: var(--border-radius-medium);
}

/* Background */
.bg {
  background-color: var(--chroma-bg);
  color: var(--chroma-fg);
}

/* PreWrapper */
.chroma {
  background-color: var(--chroma-bg);
  border-radius: var(--border-radius-medium);
  color: var(--chroma-fg);
  /* Other */
  /* Error */
  /* CodeLine */
  /* LineTableTD */
  /* LineTable */
  /* LineHighlight */
  /* LineNumbersTable */
  /* LineNumbers */
  /* Line */
  /* Keyword */
  /* KeywordConstant */
  /* KeywordDeclaration */
  /* KeywordNamespace */
  /* KeywordPseudo */
  /* KeywordReserved */
  /* KeywordType */
  /* Name */
  /* NameAttribute */
  /* NameBuiltin */
  /* NameBuiltinPseudo */
  /* NameClass */
  /* NameConstant */
  /* NameDecorator */
  /* NameEntity */
  /* NameException */
  /* NameFunction */
  /* NameFunctionMagic */
  /* NameLabel */
  /* NameNamespace */
  /* NameOther */
  /* NameProperty */
  /* NameTag */
  /* NameVariable */
  /* NameVariableClass */
  /* NameVariableGlobal */
  /* NameVariableInstance */
  /* NameVariableMagic */
  /* Literal */
  /* LiteralDate */
  /* LiteralString */
  /* LiteralStringAffix */
  /* LiteralStringBacktick */
  /* LiteralStringChar */
  /* LiteralStringDelimiter */
  /* LiteralStringDoc */
  /* LiteralStringDouble */
  /* LiteralStringEscape */
  /* LiteralStringHeredoc */
  /* LiteralStringInterpol */
  /* LiteralStringOther */
  /* LiteralStringRegex */
  /* LiteralStringSingle */
  /* LiteralStringSymbol */
  /* LiteralNumber */
  /* LiteralNumberBin */
  /* LiteralNumberFloat */
  /* LiteralNumberHex */
  /* LiteralNumberInteger */
  /* LiteralNumberIntegerLong */
  /* LiteralNumberOct */
  /* Operator */
  /* OperatorWord */
  /* Punctuation */
  /* Comment */
  /* CommentHashbang */
  /* CommentMultiline */
  /* CommentSingle */
  /* CommentSpecial */
  /* CommentPreproc */
  /* CommentPreprocFile */
  /* Generic */
  /* GenericDeleted */
  /* GenericEmph */
  /* GenericError */
  /* GenericHeading */
  /* GenericInserted */
  /* GenericOutput */
  /* GenericPrompt */
  /* GenericStrong */
  /* GenericSubheading */
  /* GenericTraceback */
  /* GenericUnderline */
  /* TextWhitespace */
}
.chroma code {
  font-size: var(--font-size-250);
}
.chroma .x {
  color: var(--chroma-blue);
}
.chroma .err {
  color: var(--chroma-red);
}
.chroma .lntd {
  vertical-align: top;
  padding: 0;
  margin: 0;
  border: 0;
}
.chroma .lntable {
  border-spacing: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
.chroma .hl {
  background-color: #ffffcc;
}
.chroma .lnt {
  white-space: pre;
  user-select: none;
  margin-right: 0.4em;
  padding: 0 0.4em 0 0.4em;
  color: #7f7f7f;
}
.chroma .ln {
  white-space: pre;
  user-select: none;
  margin-right: 0.4em;
  padding: 0 0.4em 0 0.4em;
  color: #7f7f7f;
}
.chroma .line {
  display: flex;
}
.chroma .k {
  color: var(--chroma-brred);
  font-weight: bold;
}
.chroma .kc {
  color: var(--chroma-brcyan);
  font-weight: bold;
}
.chroma .kd {
  color: var(--chroma-brcyan);
  font-weight: bold;
}
.chroma .kn {
  color: var(--chroma-brcyan);
  font-weight: bold;
}
.chroma .kp {
  color: var(--chroma-brcyan);
  font-weight: bold;
}
.chroma .kr {
  color: var(--chroma-brcyan);
  font-weight: bold;
}
.chroma .kt {
  color: var(--chroma-brcyan);
  font-weight: bold;
}
.chroma .n {
  color: var(--chroma-variable);
}
.chroma .na {
  color: #658b00;
}
.chroma .nb {
  color: var(--chroma-brcyan);
  font-weight: bold;
}
.chroma .bp {
  color: var(--chroma-blue);
  font-weight: bold;
}
.chroma .nc {
  color: var(--chroma-brcyan);
  font-weight: bold;
}
.chroma .no {
  color: var(--chroma-brcyan);
}
.chroma .nd {
  color: #707a7c;
}
.chroma .ne {
  color: var(--chroma-blue);
  font-weight: bold;
}
.chroma .nf {
  color: var(--chroma-blue);
}
.chroma .nn {
  color: #008b45;
  text-decoration: underline;
}
.chroma .nx {
  color: var(--chroma-blue);
}
.chroma .nt {
  color: var(--chroma-red);
  font-weight: bold;
}
.chroma .nv {
  color: #00688b;
}
.chroma .s {
  color: var(--chroma-brmagenta);
}
.chroma .sa {
  color: var(--chroma-brmagenta);
}
.chroma .sb {
  color: var(--chroma-brmagenta);
}
.chroma .sc {
  color: var(--chroma-brmagenta);
}
.chroma .dl {
  color: var(--chroma-brmagenta);
}
.chroma .sd {
  color: var(--chroma-brmagenta);
}
.chroma .s2 {
  color: var(--chroma-brmagenta);
}
.chroma .se {
  color: var(--chroma-brmagenta);
}
.chroma .sh {
  color: var(--chroma-brmagenta);
  font-style: italic;
}
.chroma .si {
  color: var(--chroma-red);
}
.chroma .sx {
  color: #cb6c20;
}
.chroma .sr {
  color: #1c7e71;
}
.chroma .s1 {
  color: var(--chroma-string);
}
.chroma .ss {
  color: var(--chroma-string);
}
.chroma .m {
  color: var(--chroma-brmagenta);
}
.chroma .mb {
  color: var(--chroma-brmagenta);
}
.chroma .mf {
  color: var(--chroma-brmagenta);
}
.chroma .mh {
  color: var(--chroma-brmagenta);
}
.chroma .mi {
  color: var(--chroma-brmagenta);
}
.chroma .il {
  color: var(--chroma-brmagenta);
}
.chroma .mo {
  color: var(--chroma-brmagenta);
}
.chroma .o {
  color: var(--chroma-brred);
}
.chroma .ow {
  color: var(--chroma-keyword);
}
.chroma .p {
  color: var(--chroma-yellow);
}
.chroma .c {
  color: var(--chroma-white);
}
.chroma .ch {
  color: var(--chroma-white);
}
.chroma .cm {
  color: var(--chroma-white);
}
.chroma .c1 {
  color: var(--chroma-white);
}
.chroma .cs {
  color: var(--chroma-keyword);
  font-weight: bold;
}
.chroma .cp {
  color: var(--chroma-yellow);
}
.chroma .cpf {
  color: #1e889b;
}
.chroma .gd {
  color: #aa0000;
}
.chroma .ge {
  font-style: italic;
}
.chroma .gr {
  color: #aa0000;
}
.chroma .gh {
  color: #000080;
  font-weight: bold;
}
.chroma .gi {
  color: #00aa00;
}
.chroma .go {
  color: #888888;
}
.chroma .gp {
  color: #555555;
}
.chroma .gs {
  font-weight: bold;
}
.chroma .gu {
  color: #800080;
  font-weight: bold;
}
.chroma .gt {
  color: #aa0000;
}
.chroma .gl {
  text-decoration: underline;
}
.chroma .w {
  color: #bbbbbb;
}

.items__list {
  list-style: none;
  padding-left: 0;
  --flow-space: var(--size-800);
}

.books__list {
  list-style: none;
  padding-left: 0;
  --flow-space: 2rem;
}

.list__key {
  font-family: var(--font-sans-serif);
  font-variation-settings: unset;
  font-weight: 500;
  line-height: 1;
  margin-block: var(--size-400);
  font-size: var(--font-size-700);
  border-block-end: var(--border-medium) solid var(--fg);
  padding-block: var(--size-300) var(--size-200);
  background-color: var(--bg);
  z-index: 100;
}
@media (min-height: 320px) {
  .list__key {
    position: sticky;
    inset-block-start: 0px;
  }
}

.list-books__item {
  margin-block-end: var(--size-700);
  flex-direction: row-reverse;
}
.list-books__item .item__date {
  font-size: var(--font-size-300);
}
.list-books__item .item__title {
  font-weight: 600;
  font-size: var(--font-size-600);
  line-height: 1.35;
}
@media (min-width: 640px) {
  .list-books__item {
    margin-block-end: var(--size-400);
    display: flex;
    gap: var(--size-200);
    justify-content: space-between;
  }
}

.list-mini__item {
  padding-block-start: var(--size-400);
  padding-block-end: var(--size-200);
  padding-inline: var(--size-300);
  border: var(--border-medium) solid var(--fg);
  border-radius: var(--border-radius-large);
}
.list-mini__item .item__metadata {
  font-size: var(--font-size-250);
  margin-block-end: var(--size-100);
  width: max-content;
}
.list-mini__item .item__content {
  margin-block: var(--size-200);
}
.list-mini__item .item__read-more {
  margin-block-start: var(--size-300);
  font-size: var(--font-size-250);
}
.list-mini__item .item__content {
  font-size: var(--font-size-500);
}
.list-mini__item .item__content p {
  margin-block: var(--size-300);
}
.list-mini__item .item__content p:first-child {
  margin-block-start: 0;
}
.list-mini__item .item__content figure {
  margin-block: var(--size-200);
}

.items__heading {
  border-block-end: var(--border-medium) solid var(--fg);
  padding: var(--size-400) 0 var(--size-300);
}

.list-minimal__item {
  margin-block-start: var(--size-700);
}
.list-minimal__item .item__title {
  font-weight: 600;
  font-size: var(--font-size-700);
  line-height: 1.35;
  text-wrap: balance;
}
.list-minimal__item .item__summary {
  margin-block-start: var(--size-200);
  font-size: var(--font-size-400);
}
.list-minimal__item .item__metadata {
  margin-block-start: var(--size-200);
  font-size: var(--font-size-200);
}

@media (min-width: 640px) {
  .list-home__item {
    margin-block: var(--size-300);
    display: grid;
    grid-template-columns: auto 10ch;
    align-items: baseline;
    column-gap: var(--size-200);
  }
}
.list-home__item .item__details {
  font-weight: 500;
  text-wrap: balance;
}
.list-home__item .item__date {
  font-size: var(--font-size-250);
  text-align: right;
}

.archive-year {
  margin-block-start: calc(-1 * var(--size-400));
}
.archive-year:first-of-type {
  margin-block-start: var(--size-700);
}
.archive-year .items__list {
  padding-block-end: var(--size-700);
}
@media (min-width: 640px) {
  .archive-year .items__list {
    padding-inline: var(--size-300);
  }
}

.list-archive__item {
  margin-block: var(--size-500);
}
@media (min-width: 640px) {
  .list-archive__item {
    margin-block: var(--size-300);
    display: grid;
    grid-template-columns: auto 6ch;
    align-items: baseline;
    column-gap: var(--size-300);
  }
}
.list-archive__item .item__details {
  font-size: var(--font-size-500);
  font-weight: 500;
  text-wrap: balance;
}
.list-archive__item .item__date {
  font-size: var(--font-size-300);
  text-align: right;
}

.news__list {
  list-style: none;
  padding-left: 0;
}
.news__list .news__item {
  margin-block-end: var(--size-700);
}
.news__list .newsdate {
  font-size: var(--font-size-250);
}

.home__recent .news__item {
  margin-block-end: var(--size-600);
}

.admonition {
  border: var(--border-medium) solid var(--fg);
  border-radius: var(--border-radius-medium);
}
.admonition__title, .admonition__content {
  padding-inline: var(--size-300);
}
.admonition__title {
  font-weight: 700;
  line-height: 1.25;
  padding-block: var(--size-200);
  border-block-end: var(--border-medium) solid var(--fg);
}
.admonition img {
  text-align: center;
  display: block;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
}

.toc {
  --flow-space: var(--size-700);
  font-family: var(--font-sans-serif);
  max-width: max-content;
  padding-inline: var(--size-300);
  padding-block-start: var(--size-300);
  padding-block-end: var(--size-200);
}
.toc__heading {
  font-family: var(--font-sans-serif);
  font-size: 1.5rem;
  font-size: var(--font-size-600);
  font-variation-settings: "wght" 600;
}
.toc li {
  margin-block: 0.25rem;
}

.tagcloud {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1rem;
}
.tagcloud__heading {
  font-size: var(--font-size-700);
  margin-block-start: var(--size-800);
  margin-block-end: var(--size-200);
}

table {
  border-collapse: separate;
  border: var(--border-thin) solid var(--fg);
  margin-inline: auto;
  border-radius: var(--border-radius-large);
}

td,
th {
  border-inline-start: var(--border-thin) solid var(--fg);
  border-block-start: var(--border-thin) solid var(--fg);
  padding: var(--size-200);
  line-height: 1;
}

th {
  border-block-start: none;
}

td:first-child,
th:first-child {
  border-inline-start: none;
}

thead {
  font-weight: 700;
}

.maplibre-container {
  --flow-space: var(--size-500);
  margin-block-end: var(--size-800);
}

.maplibre-map {
  width: 100%;
  height: clamp(16rem, 80vh, 32rem);
  border-start-start-radius: var(--border-radius-medium);
  border-start-end-radius: var(--border-radius-medium);
  border: var(--border-thick) solid var(--fg);
}

.maplibregl-ctrl-top-left,
.maplibregl-ctrl-top-right,
.maplibregl-ctrl-bottom-left,
.maplibregl-ctrl-bottom-right {
  font-family: var(--font-sans-serif);
}

.maplibregl-ctrl-scale,
.maplibregl-ctrl-attrib {
  font-size: var(--font-size-100) !important;
}

.route__metadata {
  margin-block-start: calc(-1 * var(--size-200));
  border: var(--border-thick) solid var(--fg);
  border-block-start: none;
  border-end-start-radius: var(--border-radius-medium);
  border-end-end-radius: var(--border-radius-medium);
  padding-inline: var(--size-300);
  padding-block-start: var(--size-300);
}

.route__name {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-block: var(--size-200);
  gap: 1.5rem;
  row-gap: 0;
}

.route__name p {
  margin-block: 0;
}

.route__stats {
  font-size: var(--font-size-300);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-block: var(--size-200);
  padding-block-start: var(--size-200);
  border-top: var(--border-medium) solid var(--fg);
  gap: 1.5rem;
  row-gap: 0;
}

.route__stats p {
  margin-block: var(--size-100);
}

.gallery__figure {
  --flow-space: var(--size-800);
  margin-inline: auto;
  border: var(--border-medium) solid var(--fg);
  overflow: hidden;
  max-width: max-content;
  border-radius: var(--border-radius-medium);
}
.gallery__figure:first-of-type {
  --flow-space: var(--size-500);
}
.gallery__figure img {
  border-radius: 0;
  border: none;
  vertical-align: middle;
}
.gallery__figure figcaption {
  text-align: left;
  font-size: var(--font-size-400);
  flex-grow: 1;
  width: 0;
  margin-block: 0;
}
.gallery__caption {
  display: flex;
  border-block-start: var(--border-medium) solid var(--fg);
  padding-inline: var(--size-300);
  padding-block: 0;
}
.gallery__caption p,
.gallery__caption p:first-child,
.gallery__caption p:last-child {
  margin-block: var(--size-300);
}
.gallery__metadata {
  display: flex;
  justify-content: space-between;
  line-height: 1.25;
  border-block-end: var(--border-medium) solid var(--fg);
  padding: var(--size-200);
  gap: 1rem;
  font-size: var(--font-size-300);
}

.hero__figure {
  margin-inline: auto;
  width: clamp(150px, 80%, 320px);
}
.hero__figure img {
  border-radius: 1rem;
}
@media (min-width: 640px) {
  .hero {
    margin-inline: calc(-0.1 * (90vw - 640px));
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: clamp(1rem, 4%, 2rem);
  }
  .hero.img__right {
    flex-direction: row-reverse;
  }
  .hero__figure {
    margin-inline: 0;
    width: 100%;
  }
  .hero__text {
    max-width: 55%;
  }
}

.inline-svg {
  display: block;
  margin-inline: auto;
  max-width: 100%;
}
@media (min-width: 640px) {
  .inline-svg {
    max-width: 70%;
  }
}
.inline-svg .fg-fill {
  fill: var(--fg);
}
.inline-svg .fg-stroke path {
  stroke: var(--fg);
}

details summary {
  cursor: pointer;
}
details summary:focus-visible {
  border-radius: var(--border-radius-medium);
  outline: 0.15em solid var(--accent);
}

details {
  --flow-space: var(--size-700);
}

details .admonition__content {
  --flow-space: var(--size-400);
}

details summary > * {
  display: inline;
}

details .admonition__title {
  border: none;
}

details[open] .admonition__title {
  border-block-end: var(--border-medium) solid var(--fg);
}

figure {
  text-align: center;
  --flow-space: var(--size-500);
}
figure img {
  text-align: center;
  max-height: 640px;
  max-width: 100%;
  height: auto;
  width: auto;
  margin: 0 auto;
  border-radius: var(--border-radius-medium);
  border: var(--border-medium) solid var(--fg);
}
figure.no-border img {
  border: none;
  border-radius: 0;
}
figure.gnome-screenshot img {
  border: none;
  border-radius: 0;
  margin-block-start: -10px;
  margin-block-end: -25px;
}
figure.small img {
  max-height: 240px;
}
figure.small figcaption {
  max-width: 30ch;
}
figure.medium img {
  max-height: 360px;
}
figure.medium figcaption {
  max-width: 45ch;
}
figure.large img {
  max-height: 420px;
}
figure.large figcaption {
  max-width: 60ch;
}
figure.no-rounded-corner img {
  border-radius: 0;
}
figure figcaption {
  font-weight: 400;
  font-size: var(--font-size-200);
  margin: var(--size-50) auto var(--size-400);
  max-width: 69ch;
}

.dark-mode figure img {
  filter: brightness(0.9);
}

@media print {
  figure img {
    max-width: 75%;
  }
}
.home {
  display: grid;
  margin-block-start: var(--size-700);
  margin-inline: auto;
  column-gap: var(--size-800);
  row-gap: var(--size-400);
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .home {
    grid-template-columns: 2fr 7fr;
  }
}
.home__profile {
  margin-block-start: var(--size-400);
}
.home__profile__picture {
  max-width: 160px;
  margin-inline: auto;
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-xl);
  border: var(--border-medium) solid var(--fg);
}
.home__profile__text {
  text-align: center;
}
.home__profile__text .profile__primary {
  font-size: var(--font-size-600);
  font-weight: 500;
  letter-spacing: -0.025em;
  margin-block-start: var(--size-600);
}
.home__profile__text .profile__secondary {
  margin-block-start: var(--size-200);
  font-size: var(--font-size-300);
}
.home__content .page__header {
  margin-block-start: 0;
  margin-block-end: var(--size-600);
}
.home__recent {
  border-block-start: var(--border-medium) solid var(--fg);
  padding-block-start: var(--size-200);
  margin-block: var(--size-700);
}
@media (min-width: 480px) {
  .home__recent {
    margin-block: var(--size-400);
  }
}
.home__recent__heading {
  font-family: var(--font-sans-serif);
  font-size: var(--font-size-700);
  letter-spacing: -0.01em;
  margin-block: var(--size-500);
}
.home__recent__seeall {
  margin-block-start: var(--size-600);
  text-align: right;
}

.recent__home__grid {
  margin-inline: clamp(-5rem, 2rem + (100% - 100vw) / 2, 0rem);
}
@media (min-width: 480px) {
  .recent__home__grid {
    display: grid;
    column-gap: var(--size-800);
    row-gap: 0;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    margin-block-start: var(--size-200);
  }
}

.recent {
  --item-padding: var(--size-250);
  margin-inline: clamp(-5rem, 2rem + (100% - 100vw) / 2, 0rem);
}
@media (min-width: 480px) {
  .recent {
    display: grid;
    column-gap: var(--size-500);
    row-gap: var(--size-300);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}
.recent__section {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-block: var(--size-500) 0;
  border: var(--border-medium) solid var(--fg);
  border-radius: var(--border-radius-medium);
}
.recent__section__title {
  margin-block: 0;
  padding-inline: var(--item-padding);
  padding-block-start: var(--item-padding);
  font-size: var(--font-size-700);
  font-weight: 600;
  text-wrap: balance;
}
.recent__section__description {
  padding-inline: var(--item-padding);
  padding-block-end: var(--item-padding);
  margin-block-start: calc(var(--item-padding) / 2);
  border-block-end: var(--border-medium) solid var(--fg);
  font-size: var(--font-size-300);
}
.recent__section__seeall {
  text-align: right;
  margin-block-start: auto;
  padding: var(--item-padding);
  font-size: var(--font-size-300);
}
.recent__item {
  padding-inline: var(--item-padding);
  padding-block: calc(var(--item-padding) / 2);
}
.recent__item__title {
  font-size: var(--font-size-400);
  font-weight: 600;
  text-wrap: balance;
}
.recent__item__summary {
  margin-block-start: calc(var(--item-padding) / 2);
  font-size: var(--font-size-300);
}
.recent__item__date {
  margin-block-start: var(--size-200);
  font-size: var(--font-size-200);
}

.home__recent__photos,
.photowall__wrapper {
  container-type: inline-size;
}

.photowall,
.home__recent__photowall {
  display: grid;
  margin-inline: auto;
  align-items: center;
  justify-items: center;
  justify-content: center;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  grid-template-columns: 1fr;
  column-gap: var(--size-400);
  row-gap: var(--size-700);
  line-height: 0;
}
@container (width > 300px) {
  .photowall,
  .home__recent__photowall {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--size-300);
    row-gap: var(--size-300);
  }
}
@container (width > 450px) {
  .photowall,
  .home__recent__photowall {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.photowall .photowall__container,
.home__recent__photowall .photowall__container {
  aspect-ratio: 1;
}
.photowall .photowall__container a,
.home__recent__photowall .photowall__container a {
  display: block;
  height: 100%;
  width: 100%;
}
.photowall .photowall__container a:focus,
.home__recent__photowall .photowall__container a:focus {
  border-radius: 0.5em;
}
.photowall .photowall__container .photowall__image,
.home__recent__photowall .photowall__container .photowall__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: var(--border-radius-medium);
  border: var(--border-medium) solid var(--fg);
}
.photowall .photowall__container .photowall__image:hover,
.home__recent__photowall .photowall__container .photowall__image:hover {
  border-color: var(--accent);
  border-width: var(--border-extrathick);
  filter: opacity(0.85);
}

@media (min-width: 800px) {
  .photowall {
    column-gap: var(--size-600);
    row-gap: var(--size-600);
  }
}

.page__header {
  margin-block-start: var(--size-800);
  margin-block-end: var(--size-700);
}
.page__header .page__date {
  margin-block-start: 0;
}
.page__header .page__id {
  margin-block-start: 0;
  font-size: var(--font-size-600);
}
.page__header .page__title {
  margin-block-start: var(--size-400);
  margin-block-end: 0;
}
.page__header .page__subtitle {
  margin-block-start: var(--size-300);
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  text-wrap: balance;
  line-height: 1.35;
}
.page__header .page__location {
  --flow-space: 0;
  margin-block-start: var(--size-400);
}
.page__featuredimage {
  margin-block: var(--size-400);
}
.page__content {
  margin-block-start: var(--size-500);
  margin-block-end: var(--size-600);
}
.page__navtags {
  margin-block-start: var(--size-800);
  margin-block-end: var(--size-700);
}
.page__tags {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.5rem;
  column-gap: 0.75rem;
}
.page__tags > li {
  margin-block: 0;
}
.page__tags__heading {
  font-size: var(--font-size-600);
  font-family: var(--font-sans-serif);
  font-weight: 500;
}
.page__related {
  margin-inline: auto;
  margin-block-end: var(--size-700);
}
@media screen {
  .page__related {
    max-width: var(--content-width);
  }
}
.page__related__heading {
  font-family: var(--font-sans-serif);
  font-size: var(--font-size-600);
}
.page__nav__heading {
  font-family: var(--font-sans-serif);
  font-size: var(--font-size-600);
  margin-block-start: var(--size-400);
  margin-block-end: calc(-1 * var(--size-200));
  border-block-start: var(--border-medium) solid var(--fg);
  padding-block-start: var(--size-700);
}
.page__nav__prev__title, .page__nav__next__title {
  font-size: var(--font-size-300);
  margin-block-start: var(--size-700);
}
.page__seeall {
  margin-inline: auto;
  margin-block-start: var(--size-700);
}
@media screen {
  .page__seeall {
    max-width: var(--content-width);
  }
}
.page__seeall__link {
  font-size: var(--font-size-400);
}

.poems {
  max-width: var(--header-width);
}
.poems .items__list {
  margin-inline: auto;
}
@media screen {
  .poems .items__list {
    max-width: var(--content-width);
  }
}
@media (min-width: 960px) {
  .poems .page__featuredimage {
    margin-block: var(--size-400);
  }
}
.poems .page__header,
.poems .page__navtags,
.poems .page__nav {
  margin-inline: auto;
}
@media screen {
  .poems .page__header,
  .poems .page__navtags,
  .poems .page__nav {
    max-width: var(--content-width);
  }
}
.poems .page__content {
  font-size: var(--font-size-500);
  max-width: max-content;
  margin-inline: auto;
  margin-block-start: var(--size-400);
  margin-block-end: 7.5rem;
}
@media (min-width: 960px) {
  .poems .page__content {
    margin: 0;
    justify-self: center;
  }
}

@media (min-width: 960px) {
  .poem__grid {
    margin-block-start: 0;
    display: grid;
    grid-template-columns: 7fr 4fr;
    align-items: center;
    justify-content: space-evenly;
    gap: 2rem;
  }
}

.minis .page__date {
  margin-block-start: var(--size-800);
}
.minis .page__time {
  margin-block-end: var(--size-300);
  font-size: var(--font-size-500);
}
.minis .page__number {
  font-size: var(--font-size-500);
  font-weight: 400;
  margin-block-start: var(--size-700);
  margin-block-end: 0;
}
.minis .page__content {
  font-size: var(--font-size-600);
  margin-block-start: var(--size-100);
  margin-block-end: var(--size-900);
}

/*# sourceMappingURL=main.css.map */