@import url(_reset.css);
@import url(_spacing.css);

/* #region Fonts */

@font-face {
  font-family: 'Sohne';
  src: url('/assets/fonts/soehne-buch.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Sohne';
  src: url('/assets/fonts/soehne-leicht.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Sohne';
  src: url('/assets/fonts/soehne-leicht-kursiv.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Sohne';
  src: url('/assets/fonts/soehne-buch-kursiv.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Sohne';
  src: url('/assets/fonts/soehne-halbfett.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Sohne';
  src: url('/assets/fonts/soehne-halbfett-kursiv.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Sohne Breit';
  src: url('/assets/fonts/soehne-breit-buch.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Sohne Mono';
  src: url('/assets/fonts/soehne-mono-buch.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

/* #endregion */

/* #region Config */

:root {
  --body-font: 'Sohne', system-ui, sans-serif;
  --body-font-regular: normal;
  --body-font-bold: bold;
  --heading-font: 'Sohne Breit', system-ui, sans-serif;
  --heading-font-regular: normal;
  --mono-font: 'Sohne Mono', monospace;
  --mono-font-regular: normal;

  --font-xs: 14px;
  --font-meta: max(13px, 0.75em);
  --font-sm: max(14px, 0.85em);
  --font-base: 1rem;
  --font-md: 1.125rem;
  --font-lg: 1.5rem;
  --font-xl: 2rem;

  --text-col-max-width: 35rem;
  --main-content-top-margin: min(10vw, 10rem);

  --logo-orange: #eec113;
  --logo-pink: #d93976;
}

/* ANCHOR Light theme */
:root[data-theme='light'] {
  color-scheme: light;

  --bg: #f9f8f5;
  --gray-bg: #d8d8df;

  --text-h: 220;
  --text-s: 11%;
  --text-l: 32%;
  --text: 220 11% 32%;
  --text-lighten: #4b5362;
  --link-h: 173;
  --link-s: 56%;
  --link-l: 30%;
  --link-text: var(--link-h) var(--link-s) var(--link-l);
  --link-text-hover: var(--link-h) calc(var(--link-s) * 1.2)
    calc(var(--link-l) * 1.3);
  --meta-text: #c33000;
  --red-text: #c9266a;
  --blue-text: #0570c9;

  --border: #b9b7b3;
  --scrollbar-color: #4a978e;

  --button-bg: var(--gray-bg);
  --button-bg-hover: hsl(240, 10%, 90%);
  --button-border: var(--border);
  --button-text: var(--text);

  --like-button-bg: #d73669;
  --like-button-border: #973654;
  --like-button-text: white;

  --card-bg: white;
  --card-border: hsl(var(--text) / 13%);
  --card-shadow: hsl(var(--text) / 20%);

  --link-glow: unset;
}

/* ANCHOR Dark theme */
@media screen {
  :root[data-theme='dark'] {
    color-scheme: dark;

    --body-font-regular: 300;

    --bg: #252931;
    --gray-bg: #383d48;

    --text-h: 262;
    --text-s: 14%;
    --text-l: 85%;
    --text: 262 11% 85%;
    --text-lighten: #dad6e2;
    --link-h: 175;
    --link-s: 56%;
    --link-l: 49%;
    --link-text: var(--link-h) var(--link-s) var(--link-l);
    --link-text-hover: var(--link-h) calc(var(--link-s) * 1.2)
      calc(var(--link-l) * 1.8);
    --meta-text: #d6af78;
    --red-text: #ff4680;
    --blue-text: #5f9fd4;

    --border: #454c58;
    --scrollbar-color: #379991;

    --card-bg: #1d2127;
    --card-border: hsl(var(--text) / 10%);
    --card-shadow: hsl(var(--text) / 20%);

    --button-bg: var(--gray-bg);
    --button-bg-hover: hsl(221, 13%, 30%);
    --button-border: var(--border);
    --button-text: white;

    --like-button-bg: #d73669;
    --like-button-border: #ff74a0;
    --like-button-text: white;

    --link-glow: 0 0 0.6em hsl(var(--link-text-hover) / 30%);
  }
}

/* #endregion Config */

html {
  font-size: 1rem;
}

@media (min-width: 600px) {
  html {
    font-size: 1.1rem;
  }
}

@media (min-width: 700px) {
  html {
    font-size: 1.2rem;
  }
}

@media (min-width: 1000px) {
  html {
    font-size: 1.25rem;
  }
}

/* !SECTION Config */

/* ANCHOR Accessibility
------------------------------------------------------------- */

.sr-only,
.assistive-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

/* Better focus style */
:focus-visible:not([tabindex='-1']) {
  outline: 3px solid var(--blue-text);
  outline-offset: 2px;
}

/* Hide elements with the `hidden` attribute */
[hidden],
[x-cloak] {
  display: none !important;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  opacity: 0;
  pointer-events: none;
}

.skip-link:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ANCHOR Base styles
------------------------------------------------------------- */

html {
  font-family: var(--body-font);
  font-weight: var(--body-font-regular);
  line-height: 1.45;
  /* letter-spacing: 0.01em; */
  font-feature-settings: 'ss02';
  color: hsl(var(--text));
  color-scheme: light dark;
  scrollbar-color: var(--scrollbar-color) var(--bg);
  tab-size: 4;
}

html strong {
  font-weight: var(--body-font-bold);
}

@supports selector(::-webkit-scrollbar) {
  html {
    scrollbar-color: unset;
  }

  ::-webkit-scrollbar {
    width: 1.25rem;
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color);
    border-radius: 1rem;
  }
}

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

main {
  margin-inline: 1rem;
}

h1,
.h1 {
  font-family: var(--heading-font);
  line-height: 1.2;
  font-weight: var(--heading-font-regular);
  font-size: var(--font-xl);
  letter-spacing: 0;
  font-feature-settings: 'ss02';
  text-wrap: balance;
  color: hsl(var(--text));
}

h2,
.h2 {
  font-family: var(--body-font);
  font-weight: var(--body-font-regular);
  line-height: 1.2;
  font-size: var(--font-md);
  color: var(--red-text);
}

h3,
.h3 {
  font-family: var(--body-font);
  font-weight: var(--body-font-bold);
  font-size: var(--font-sm);
  line-height: 1.2;
  color: var(--text-lighten);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

h4,
.h4 {
  font-family: var(--body-font);
  font-weight: var(--body-font-regular);
  font-size: var(--font-base);
}

a {
  text-decoration-thickness: 1px;
  text-decoration-color: hsl(var(--link-text) / 30%);
  text-underline-offset: 0.25em;
  color: hsl(var(--link-text));
  transition:
    color 0.12s ease-in-out,
    text-decoration-color 0.12s ease-in-out;

  &:hover,
  &:focus-visible {
    color: hsl(var(--link-text-hover));
    text-decoration-color: hsl(var(--link-text) / 70%);
  }
}

p {
  margin-block: 1rem;
}

/* figures are used for breakout images */
figure {
  margin-inline: 0;
}

figcaption {
  font-family: var(--body-font);
  font-weight: var(--body-font-regular);
  font-size: max(14px, 0.8em);
}

hr {
  margin-block: 1.5rem;
  border: 0;
  border-top: 1px solid var(--border);
  box-shadow: none;
}

table {
  border-collapse: collapse;
  width: max-content;
}

th {
  padding-block-end: 0.25rem;
  border-block-end: 2px solid var(--border);
  font-size: var(--font-xs);
  font-weight: var(--body-font-bold);
  letter-spacing: 0.075em;
  text-transform: uppercase;
  text-align: left;
  opacity: 0.8;
}

th + th,
td + td {
  padding-inline-start: 1.5rem;
}

td {
  padding-block: 0.25em;
  border-block-end: 1px solid var(--border);
  font-size: 0.9em;
}

/* markdown-it toc is spitting out empty p tags so this kills it */
p:empty {
  display: none;
}

/* SECTION Global layout
------------------------------------------------------------- */

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh; /* Fallback for older browsers */
  min-height: 100dvh; /* Dynamic viewport height for mobile */
}

.the-grid {
  width: 100%;
}

.site-header {
  grid-column: full;
}

.main-content > * + * {
  margin-block-start: 1rem;
  margin-block-end: 0;
}

.main-content > * {
  margin-inline: auto;
  max-width: var(--text-col-max-width);
}

/* ANCHOR Break 1000px */
@media (min-width: 1000px) {
  .the-grid {
    display: grid;
    align-items: start;
    column-gap: 2rem;
    /* prettier-ignore */
    grid-template-columns:
      [full-start breakout-start wide-content-start]
      minmax(0, 1fr)
      [content-start]
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(0, 1fr)
      [content-end]
      minmax(0, 1fr)
      [breakout-end wide-content-end]
      minmax(0, 1fr)
      minmax(0, 1fr)
      [full-end];
  }

  main {
    margin-inline: 2rem;
  }

  .site-header {
    grid-column: -3 / -1;
  }

  .main-content {
    grid-column: breakout;
    grid-row: 1;
    display: grid;
    grid-template-columns: subgrid;
    row-gap: 1rem;
    margin-block-start: var(--main-content-top-margin);
    margin-inline: 1rem;
  }

  .main-content > * {
    grid-column: content;
    margin-inline: 0;
    max-width: unset;
  }

  .main-content > * + * {
    margin-block: 0;
  }

  .breakout {
    grid-column: breakout;
  }

  .content {
    grid-column: content;
  }

  .full {
    grid-column: full;
  }

  .wide-content {
    grid-column: wide-content;
  }

  .site-footer {
    grid-column: full;
  }
}

/* ANCHOR Break 1300px */
@media (min-width: 1300px) {
  .the-grid {
    /* prettier-ignore */
    grid-template-columns:
      [full-start sidebar-start]
      minmax(0, 1fr)
      [breakout-start wide-content-start]
      minmax(0, 1fr)
      [content-start]
      minmax(0, 1fr)
      minmax(0, 1fr)
      [sidebar-end maincol-start]
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(0, 1fr)
      [content-end]
      minmax(0, 1fr)
      [breakout-end]
      minmax(0, 1fr)
      [maincol-end wide-content-end]
      repeat(2, minmax(0, 1fr))
      [full-end];
  }

  .main-content {
    margin-inline: 0;
  }
}

/* ANCHOR Break 1420px */
@media (min-width: 1420px) {
  .the-grid {
    margin-inline: auto;
    max-width: 1600px;
    /* prettier-ignore */
    grid-template-columns:
      [full-start]
      minmax(0, 1fr)
      [sidebar-start wide-content-start]
      [breakout-start]
      minmax(0, 1fr)
      [content-start]
      minmax(0, 1fr)
      minmax(0, 1fr)
      [sidebar-end maincol-start]
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(0, 1fr)
      [content-end]
      minmax(0, 1fr)
      [breakout-end]
      minmax(0, 1fr)
      [maincol-end wide-content-end]
      repeat(2, minmax(0, 1fr))
      [full-end];
  }
}

.theme-transition * {
  transition: all 0.125s ease;
}

/* !SECTION Global layout */

/* SECTION Components
------------------------------------------------------------- */

/* ANCHOR Button */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.35em 0.75em;
  padding-block-end: 0.5rem;
  border: 1px solid var(--button-border);
  border-radius: 0.15rem;
  line-height: 1.2;
  text-decoration: none;
  background-color: var(--button-bg);
  color: var(--button-text);
}

.button:hover {
  background-color: var(--button-bg-hover);
  color: var(--button-text);
}

/* ANCHOR Card */
.card {
  padding: 1rem;
  border-radius: 0.25rem;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  box-shadow: 0 0.2rem 0 var(--card-shadow);
  overflow: clip;
}

.card-image {
  margin-block-start: -1rem;
  margin-inline: -1rem;
}

/* ANCHOR Like button */
like-button:not(:defined) {
  display: none;
}

.like {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.like-button {
  width: 130px;
  transition: background-color 0.1s ease;
  cursor: pointer;
}

.like-button.liked {
  background: var(--like-button-bg);
  border-color: var(--like-button-border);
  color: var(--like-button-text);
}

.like-count {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.5rem;
  border-radius: 0.15rem;
  background-color: var(--like-button-bg);
  color: var(--like-button-text);
}

/* ANCHOR Mastodon  */
.mastodon {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1rem;
}

.mastodon-default-link {
  display: none;
}

.mastodon blockquote {
  margin: 0;
}

.mastodon dl {
  display: flex;
  grid-column: span 2;
  margin-block-end: 0;
  font-size: var(--font-meta);
  color: var(--text-lighten);
}

.mastodon dt {
  padding: 0.15rem 0.6rem;
  border-start-start-radius: 0.15rem;
  border-start-end-radius: 0.15rem;
  background: var(--card-border);
}

.mastodon dd {
  margin: 0;
  padding: 0.15rem 0.6rem;
  border-start-end-radius: 0.15rem;
  border-end-end-radius: 0.15rem;
  background: var(--like-button-bg);
  color: white;
}

.mastodon dd.is-empty {
  background: var(--bg);
  color: hsl(var(--text));
}

.mastodon dd + dt {
  margin-inline-start: 1rem;
}

/* ANCHOR Pagination Nav */
.pagination-nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination-nav .pagination {
  margin-block: 0;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding-inline: 0;
  list-style: none;
}

/* ANCHOR Stat block */
.stat-title {
  margin-block: 1rem 0.5rem;
  border-block-end: 1px solid var(--border);
  font-family: var(--heading-font);
  font-weight: var(--heading-font-regular);
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.175em;
}

.stat-item {
  margin-inline: 0;
  margin-block: 0 0.75rem;
  font-family: var(--body-font);
  font-size: var(--font-sm);
  line-height: 1.2;
  color: var(--text-lighten);
}

@container (width < 14rem) {
  .stat-title {
    font-size: 0.55rem;
    letter-spacing: 0.15em;
  }

  .stat-item {
    font-size: var(--font-xs);
  }
}

/* ANCHOR Table of contents */

.table-of-contents ul {
  margin-block: 0;
}

/* !SECTION Components */

/* ANCHOR Utilities
------------------------------------------------------------- */

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.align-center {
  align-items: center;
}

.align-end {
  align-items: flex-end;
}

.gap-1 {
  gap: 1rem;
}

.gap-2 {
  gap: 2rem;
}

.gap-3 {
  gap: 3rem;
}

.big-top-margin {
  margin-block-start: var(--main-content-top-margin);
}

.stack > * {
  margin-block: 0;
}

.stack > * + * {
  margin-block-start: 1em;
}

.stack-bordered > * + * {
  margin-block-start: 1.75em;
  padding-block-start: 1.25em;
  border-block-start: 1px solid var(--border);
}

.stack-bordered.top-border {
  margin-block-start: 1.75em;
  padding-block-start: 1.25em;
  border-block-start: 1px solid var(--border);
}

.fancy-bar {
  border-top: 2px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(
    to right,
    var(--logo-orange),
    var(--logo-pink)
  );
}

.blue-bar {
  border-top: 2px solid var(--blue-text);
}

.links-bar {
  border-top: 2px solid hsl(var(--link-text-hover));

  [data-theme='light'] & {
    border-top-color: hsl(var(--link-text));
  }
}

.orange-bar {
  border-top: 2px solid var(--meta-text);
}

.red-bar {
  border-top: 2px solid var(--red-text);
}

/* slightly reduces opacity of images in dark mode */
@media screen {
  [data-theme='dark'] .dim {
    opacity: 0.8;
    transition: opacity 0.2s ease;

    &:hover {
      opacity: 1;
    }
  }
}

/* ANCHOR Typography
------------------------------------------------------------- */

p {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

code,
pre {
  font-family: var(--mono-font);
  font-variant-numeric: slashed-zero;
  letter-spacing: 0;
}

.big-title {
  margin-block-end: 2rem;
}

.collection-title {
  margin-block: 0 0.5rem;
  padding-block-start: 0.5rem;
  border-block-start: 2px solid var(--red-text);
  font-size: var(--font-lg);
  font-weight: var(--heading-font-regular);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--red-text);

  .links & {
    border-block-start-color: hsl(var(--link-text-hover));
    color: hsl(var(--link-text-hover));

    [data-theme='light'] & {
      border-block-start-color: hsl(var(--link-text));
      color: hsl(var(--link-text));
    }
  }
}

.tiny-meta {
  font-family: var(--heading-font);
  font-weight: var(--heading-font-regular);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--meta-text);
}

.meta {
  font-family: var(--heading-font);
  font-size: var(--font-meta);
  font-weight: var(--heading-font-regular);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--meta-text);
}

.small-text {
  font-size: var(--font-sm);
}

.medium-text {
  font-size: var(--font-md);
}

.small-title {
  /* margin-block: 1rem;
  font-family: var(--heading-font);
  font-weight: var(--heading-font-regular);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em; */
  color: hsl(var(--text));

  &.fancy-bar,
  &.blue-bar,
  &.links-bar,
  &.orange-bar,
  &.red-bar {
    margin-block-end: 1.5rem;
    padding-block-start: 0.25em;
  }
}

.text-lighten {
  color: var(--text-lighten);
}

.text-muted {
  opacity: 0.9;
}

.subtle-link {
  color: hsl(var(--text));
  text-decoration: none;
  text-decoration-color: var(--text-lighten);
  transition: unset;
}

.subtle-link:hover {
  text-decoration: underline;
}

.hover-link-only {
  text-decoration: none;
  color: inherit;
  transition: unset;

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

/* unicode U+202F */
.footnote-ref::before {
  content: '\202F';
}

.footnotes-list {
  margin-block-start: 0;
  font-size: var(--font-sm);
}

.footnotes-sep {
  margin-block: 1.5rem;
}

@media (min-width: 1000px) {
  .footnotes-sep {
    margin-block: 0.5rem;
  }
}

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

.site-header {
  display: grid;
  grid-template-columns: 50px 1fr;
  align-items: center;
  column-gap: 1rem;
  margin-inline: 1rem;
  margin-block: 1rem 2rem;
}

.site-title {
  margin-block: 0;
}

.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: 0.5rem;
}

.site-nav a {
  text-decoration: none;
}

.theme-toggle {
  position: relative;
  justify-self: center;
  width: 1rem;
  height: 1rem;
  color: var(--text-lighten);
  cursor: pointer;
  transform-origin: center center;
  transition: transform 0.2s ease-in-out;
}

.theme-toggle:hover {
  transform: scale(1.2);
}

.theme-toggle input {
  position: absolute;
  top: 0;
  left: 0;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  width: 1rem;
  height: 1rem;
  background: transparent;
  cursor: pointer;
}

.theme-toggle svg {
  object-fit: contain;
}

@media (min-width: 850px) {
  .site-header {
    grid-template-columns: 60px 1fr;
    margin-block-start: 0;
    padding-block-start: 3vw;
  }

  .site-nav {
    justify-content: flex-end;
  }
}

@media (min-width: 1000px) {
  .site-header {
    position: fixed;
    top: 0;
    right: 0;
    grid-template-columns: 1fr;
    justify-items: end;
  }

  .site-title {
    margin-block-end: 2rem;
    max-width: 75px;
  }

  .site-nav {
    flex-direction: column;
    align-items: flex-end;
    row-gap: 1rem;
    padding-inline-end: 10px;
    text-align: right;
    font-family: var(--heading-font);
    font-weight: var(--heading-font-regular);
    font-size: var(--font-meta);
    text-transform: uppercase;
    letter-spacing: 0.15em;
  }

  .site-nav a:hover,
  .site-nav a:focus {
    text-shadow: var(--link-glow);
  }
}

@media (min-width: 1300px) {
  .site-header {
    position: fixed;
    top: 0;
    right: 0;
  }
}

/* Unsticky-ify the nav if the window is too short */
@media (min-width: 1000px) and (max-height: 585px) {
  .site-header {
    position: absolute;
  }
}

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

.site-footer {
  margin: 5rem auto 2rem 1rem;
  max-width: var(--text-col-max-width);
}

.site-footer .small-text {
  margin-top: 0;
}

.copyright {
  margin-block-end: 0.25rem;
  font-family: var(--heading-font);
  font-weight: var(--heading-font-regular);
  font-size: var(--font-sm);
  letter-spacing: 0.015em;
}

.footer-links {
  display: flex;
  gap: 1rem;
}

@media (min-width: 1000px) {
  .site-footer {
    margin-inline: 2rem;
    max-width: unset;
  }
}

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

/**
 * I'd like .prose to be somewhat layout agnostic. If grid isn't supported, the
 * margins here will provide space between elements. Once the grid kicks in,
 * I'll be using .main-content to reset some of the spacing and put elements on
 * the grid.
 */

.prose {
  text-wrap: pretty;

  & h2 a,
  & h3 a {
    text-decoration: none;
    color: unset;
  }
}

.prose h2 {
  text-wrap: balance;
  margin-block-start: 2rem;
}

.prose h3 {
  margin-block-start: 1.5rem;
}

.prose ul {
  display: grid;
  gap: 0.5em;
  list-style: none;
  padding-inline-start: 1.2em;
}

.prose li {
  position: relative;
}

.prose li p {
  margin-block: 0;
}

.prose li p + p {
  margin-block-start: 1rem;
}

.prose ul > li:before {
  content: '\203A';
  position: absolute;
  right: calc(100% + 0.5em);
  top: -0.1em;
  font-weight: var(--body-font-bold);
  color: var(--red-text);
}

.prose ol {
  display: grid;
  gap: 0.5em;
  padding-inline-start: 1.2em;
  counter-reset: numbered-list;
}

.prose ol > li {
  counter-increment: numbered-list;
}

.prose ol > li::marker {
  content: counter(numbered-list) '  ';
  position: relative;
  right: 0.5rem;
  font-family: var(--heading-font);
  font-weight: var(--heading-font-regular);
  font-size: 0.75em;
  color: var(--red-text);
}

.prose ul ul,
.prose ol ol,
.prose ul ol,
.prose ol ul {
  margin-block-start: 0.5rem;
}

.prose blockquote {
  margin-inline: auto;
  padding-inline-start: 1em;
  padding-inline-end: 0;
  border-left: 2px solid var(--red-text);
  width: 100%;
  font-size: 0.9em;
  color: var(--text-lighten);
}

.prose blockquote + .caption {
  font-family: var(--heading-font);
  font-weight: var(--heading-font-regular);
  font-size: 0.75em;
  letter-spacing: 0.025em;
}

.prose > blockquote > * {
  margin-block: 0;
}

.prose > blockquote > * + * {
  margin-block-start: 1em;
  margin-block-end: 0;
}

.prose img {
  border-radius: 0.15rem;
  max-width: 100%;
}

.prose > figure {
  margin-block: 1.5rem;
}

.prose > figure > *:not(figcaption) {
  margin-inline: auto;
}

.prose figcaption {
  margin-block-start: 0.5rem;
}

.prose h3:has(+ figure) {
  margin-block-start: 1.5rem;
}

.prose hr {
  margin-block-start: 1.5rem;

  &.thematic-break {
    border: 0;
    text-align: center;

    &::before {
      content: '❈ ❈ ❈';
      font-size: 1rem;
      letter-spacing: 0.5rem;
      color: var(--meta-text);
    }
  }
}

.prose hr + * {
  margin-block-start: 1.5rem;
}

.prose sup {
  line-height: 0;
}

.prose code:not(pre code) {
  display: inline-block;
  padding-inline: 0.25em;
  border: 1px solid hsl(var(--text) / 20%);
  border-radius: 0.25em;
  font-family: var(--mono-font);
  font-size: 0.9em;
  background-color: var(--card-bg);
  color: var(--blue-text);
}

.prose pre {
  margin-block: 1rem;
  padding-inline: 1em;
  padding-block: 0.5em;
  border-radius: 0.25em;
  overflow-x: auto;
  font-family: var(--mono-font);
  font-size: 0.8em;
  line-height: 1.75;
  background-color: var(--card-bg);
}

.prose pre code {
  display: block;
  padding: 0;
  border-radius: 0;
  font-size: 1em;
  background: none;
}

.prose table {
  margin-block: 1.25rem 1.6rem;
}

@media (min-width: 700px) {
  .prose > figure {
    margin-block-start: 1rem;
    max-width: unset;
  }

  .prose > figure figcaption {
    margin-inline: auto;
    max-width: var(--text-col-max-width);
  }
}

@media (min-width: 1000px) {
  .prose h2 {
    margin-block-start: 1rem;
  }

  .prose h3 {
    margin-block-start: 0.5rem;
  }

  .prose > figure {
    grid-column: breakout;
    display: grid;
    grid-template-columns: inherit;
  }

  .prose > figure > * {
    grid-column: breakout;
  }

  .prose > figure figcaption {
    grid-column: content;
    margin-inline: unset;
  }

  .prose hr {
    margin-block-start: 0.5rem;
  }

  .prose hr + * {
    margin-block-start: 0.5rem;
  }

  .prose pre {
    grid-column: breakout;
    padding-block: 1rem;
    padding-inline: 2rem;
  }

  .prose table {
    margin-block: 0.25rem 0.6rem;
  }
}

/* ANCHOR Article
------------------------------------------------------------- */

.article-title {
  text-wrap: balance;
}

.article-title:has(+ .article-date) {
  margin-block-end: 1rem;
}

.article-date {
  margin-block-start: 0;
  margin-block-end: 2rem;
  font-family: var(--heading-font);
  font-size: var(--font-meta);
  font-weight: var(--heading-font-regular);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--meta-text);
}

.engagement {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-block-start: 1.5rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--border);
}

@media (min-width: 1000px) {
  .article-title {
    margin-block-start: 0;
  }

  .article-title:has(+ .article-date) {
    margin-block-end: 0;
  }

  .article-date {
    margin-block-end: 1rem;
  }

  .article .block-embed:has(iframe[src*='youtube']),
  .article iframe[src*='youtube'] {
    grid-column: breakout;
  }

  .article iframe[src*='youtube'] {
    margin-block: 0.5rem;
  }
}

/* ANCHOR Journal
------------------------------------------------------------- */

.post-year {
  margin-block: 0 0.5rem;
  border-color: var(--blue-text);
  text-align: right;
  color: var(--blue-text);
}

.post + .post-year {
  margin-block-start: 4rem;
}

.post-list .post {
  margin-block: 0;
}

.post-list > .post + .post {
  margin-block-start: 2rem;
}

.post-mini {
  max-width: 32rem;
}

.post-mini > * {
  margin-block: 0;
}

.post-mini > * + * {
  margin-block-start: 0.5rem;
}

.post-mini .post-title {
  font-family: var(--body-font);
  font-weight: var(--body-font-regular);
  font-size: var(--font-base);

  & a {
    text-decoration-thickness: 1.5px;
  }
}

.post-title + .post-date {
  margin-block-start: 0.25rem;
}

.post-mini .post-excerpt {
  font-size: var(--font-sm);
}

@media (min-width: 1000px) {
  .journal-content {
    grid-column: wide-content;
    margin-block-start: var(--main-content-top-margin);
    margin-inline-start: 1rem;
    margin-inline-end: 0;
  }
}

@media (min-width: 1300px) {
  .journal-content {
    grid-column: wide-content;
    margin-inline: 0;
  }
}

@media (min-width: 1420px) {
  .journal-content {
    grid-column: breakout;
  }
}

/* ANCHOR Page with sidebar
------------------------------------------------------------- */

.page-with-sidebar-main > * {
  margin-inline: auto;
  max-width: var(--text-col-max-width);
}

.sidebar {
  container-type: inline-size;
  margin-block-start: 2rem;
}

.sidebar > * {
  margin-inline: auto;
  max-width: var(--text-col-max-width);
}

@media (min-width: 1000px) {
  .page-with-sidebar-main {
    grid-column: 4 / 9;
    grid-row: 1;
    display: grid;
    grid-template-columns: subgrid;
    gap: 1rem;
    margin-block-start: var(--main-content-top-margin);
    margin-inline: 0;
  }

  .page-with-sidebar-main > *,
  .sidebar > * {
    margin-inline: 0;
    max-width: unset;
  }

  .page-with-sidebar-main > * {
    grid-column: 1 / -1;
  }

  .page-with-sidebar-main > * + * {
    margin-block: 0;
  }

  .sidebar {
    grid-column: span 3;
    grid-row: 1;
    margin-block-start: var(--main-content-top-margin);
    margin-inline: 1.5rem 0;
  }
}

@media (min-width: 1300px) {
  .page-with-sidebar-main {
    grid-column: maincol;
    margin-inline: 0;
  }

  .sidebar {
    grid-column: sidebar;
    /* margin-inline: 2rem; */
  }
}

@media (min-width: 1420px) {
  .sidebar {
    /* margin-inline: 0 2.5rem; */
  }
}

/* ANCHOR Microblog
------------------------------------------------------------- */

.post-list-micro {
  margin-inline: auto;
  width: 100%;
}

.post-list-micro > * + * {
  margin-block-start: 2rem;
  padding-block-start: 2rem;
  border-block-start: 1px solid var(--border);
}

.post-micro {
  word-break: break-word;
}

.post-micro .post-date {
  margin-block: 0 0.5rem;
}

.microblog .pagination-nav {
  margin-block-start: 1rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--border);
}

.statuslog-emoji {
  float: left;
  margin-inline-end: 0.75rem;
  font-size: var(--font-lg);
  line-height: 1;
}

.microblog-source {
  margin-top: 1.25rem;
  text-align: right;
  font-size: 14px;
}

@media (min-width: 800px) {
  .post-micro .post-content {
    position: relative;
  }

  .statuslog-emoji {
    position: absolute;
    top: 0;
    right: calc(100% + 1rem);
    transform: translateY(-25%);
    float: none;
    margin-inline-end: 0;
    font-size: var(--font-xl);
  }
}

@media (min-width: 1000px) {
  .post-list-micro {
    max-width: unset;
  }
}

/* ANCHOR Links */

.post-list-links {
  margin-inline: auto;
  width: 100%;

  .post-title {
    font-size: var(--font-md);
  }
}

.post-list-links > * + * {
  margin-block-start: 2rem;
  padding-block-start: 2rem;
  border-block-start: 1px solid var(--border);
}

@media (min-width: 1000px) {
  .post-list-links {
    max-width: unset;
  }
}

/* SECTION Homepage
------------------------------------------------------------- */

/* ANCHOR Home card */

.fancy-card {
  position: relative;
  border-top-left-radius: 0;
  border-top-right-radius: 0;

  &::before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-image: linear-gradient(
      to right,
      var(--logo-orange),
      var(--logo-pink)
    );
  }
}

.home-card {
  margin-block-end: 2rem;
  margin-inline: auto;
  max-width: var(--text-col-max-width);
}

.home-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.home-card-avatar {
  position: relative;
  top: 0.1em;
  order: 1;
  flex-grow: 0;
  flex-shrink: 0;
  width: 75px;
}

.home-card-title {
  order: 2;
  flex-grow: 1;
  margin-block: 0;
  font-family: var(--body-font);
  font-size: 1rem;
  font-weight: var(--body-font-regular);
  color: hsl(var(--text));
}

.home-card-title span {
  display: block;
}

.big-name {
  font-family: var(--heading-font);
  font-size: 1.2rem;
  font-weight: var(--heading-font-regular);
  letter-spacing: 0.015em;
}

.circa {
  font-style: italic;
}

.home-card-icons {
  position: relative;
  left: -1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block-start: 1rem;
  padding: 1rem 1rem 0 1rem;
  border-block-start: 1px solid var(--card-border);
  width: calc(100% + 2rem);
}

.home-card-icons svg {
  width: 1.25rem;
  height: 1.25rem;
}

.home-card-icons a {
  transition: transform 0.2s ease-in-out;
}

.home-card-icons a:not(.icon-pill-link):hover {
  transform: scale(1.2);
}

.icon-pill-link {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.1rem 0.3rem;
  border-radius: 9999px;
  border: 1px solid currentColor;
  /* font-family: var(--heading-font); */
  font-weight: bold;
  font-size: 11px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;

  svg {
    width: 0.95rem;
    height: 0.95rem;
    fill: currentColor;
  }
}

/* ANCHOR Journal column */

.journal-latest {
  margin-block-end: 2rem;
  margin-inline: auto;
  max-width: var(--text-col-max-width);
}

.journal-latest .post-mini {
  max-width: unset;
}

.journal-latest .post-mini + .post-mini {
  margin-block-start: 1.25rem;
  padding-block-start: 1rem;
  /* border-block-start: 1px solid var(--border); */
}

.more-link {
  display: inline-block;
  padding: 0.15rem 0.75rem;
  border: 1px solid hsl(var(--link-text));
  border-radius: 9999px;
  font-size: var(--font-sm);
  text-decoration: none;
  transition: all 0.2s ease-in-out;

  &:hover {
    border-color: hsl(var(--link-text-hover));
  }
}

/* ANCHOR Links column */

.links-latest {
  margin-block-start: 3rem;
  margin-block-end: 2rem;
  margin-inline: auto;
  max-width: var(--text-col-max-width);

  .link-post {
    margin-bottom: 2rem;
  }

  .post-content > * {
    margin: 0;
  }

  .post-content > * + * {
    margin-block-start: 0.5rem;
  }
}

/* ANCHOR Microblog column */

.microblog-latest {
  margin-inline: auto;
  max-width: var(--text-col-max-width);
}

.microblog-latest .post-micro + .post-micro {
  margin-block-start: 1rem;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--border);
}

.microblog-latest .microblog-source {
  display: none;
}

/* ANCHOR Breakpoint 700px */

@media (min-width: 700px) {
  .links-latest {
    .post-content {
      font-size: var(--font-sm);
    }
  }
}

/* ANCHOR Breakpoint 1000px */

@media (min-width: 1000px) {
  .home-main {
    display: grid;
    grid-column: full;
    grid-row: 1;
    grid-template-columns: subgrid;
    grid-template-rows: max-content 1fr;
  }

  .home-card {
    grid-column: content;
    margin-block-start: var(--main-content-top-margin);
  }

  .main-column {
    grid-column: content;
  }

  .microblog-latest {
    grid-column: content;
  }
}

/* ANCHOR Breakpoint 1300px */
@media (min-width: 1300px) {
  .home-card {
    grid-row: 1;
    grid-column: sidebar;
    max-width: unset;
  }

  .microblog-latest {
    grid-column: sidebar;
    grid-row: 2;
    max-width: unset;
  }

  .microblog-latest .post-micro .post-content {
    font-size: var(--font-sm);
  }

  .microblog-latest .statuslog-emoji {
    position: relative;
    top: auto;
    right: auto;
    transform: unset;
    float: left;
    margin-inline-end: 0.75rem;
    font-size: var(--font-md);
    line-height: 1;
  }

  .main-column {
    grid-column: maincol;
    grid-row: span 2;
  }

  .journal-latest {
    margin-block-start: var(--main-content-top-margin);
    max-width: unset;
  }

  .journal-latest .small-title {
    margin-block-start: 0;
  }

  .links-latest {
    max-width: unset;
  }
}

@media (min-width: 1420px) {
  .home-card {
    margin-inline: 0;
  }

  .microblog-latest {
    margin-inline: 0;
  }
}

/* !SECTION Homepage */

/* ANCHOR Work
------------------------------------------------------------- */

.work-list .collection-title {
  margin-block-end: 2rem;
}

.work-list .work-item {
  display: flex;
  flex-direction: column;
  margin-block-end: 1.5rem;
}

.work-list .work-image {
  order: 1;
}

.work-list .work-title {
  order: 2;
  margin-block-end: 0.5rem;
}

.work-list .work-meta {
  order: 3;
}

.main-content .work-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-block-end: 2rem;
}

.work-meta > * {
  margin-block: 0;
}

@media (min-width: 750px) {
  .work-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  .work-list .work-item {
    margin-block-end: 0;
  }

  .work-list .work-title {
    font-size: var(--font-md);
  }

  .work-list .work-meta {
    font-size: var(--font-meta);
  }
}

@media (min-width: 1000px) {
  .work-list {
    grid-column: wide-content;
    margin-block-start: var(--main-content-top-margin);
    margin-inline-start: 1rem;
    margin-inline-end: 0;
  }
}

@media (min-width: 1300px) {
  .work-list {
    gap: 2rem;
    margin-inline: 0;
  }
}

/* ANCHOR Search
------------------------------------------------------------- */

.search-form {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block-end: 1rem;
  width: 100%;
}

.search-form label {
  flex-grow: 1;
}

.search-filters {
  margin-block-end: 2rem;
}

.results > * {
  margin-block: 1.5rem 0;
  padding-block: 1.5rem 0;
  border-block-start: 1px solid var(--border);
}

.results .post-mini {
  max-width: unset;
}

/* ANCHOR Forms
------------------------------------------------------------- */

input[type='text'],
input[type='search'],
input[type='password'],
input[type='email'],
input[type='url'],
input[type='tel'],
input[type='number'] {
  appearance: none;
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.15rem;
  box-shadow: 0 0 5px #00000055;
  line-height: 1.2;
  background-color: var(--card-bg);

  &:focus {
    outline: none;
    border-color: hsl(var(--text));
  }

  [data-theme='dark'] &:focus {
    border-color: hsl(var(--link-text));
  }

  [data-theme='light'] & {
    box-shadow: 0 0 5px #00000022;
  }
}

button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  appearance: none;
  padding: 0.35rem 0.75rem;
  padding-block-end: 0.5rem;
  border: 1px solid var(--button-border);
  border-radius: 0.15rem;
  line-height: 1.2;
  background-color: var(--button-bg);
  color: var(--button-text);
}

.button-icon {
  position: relative;
  top: 0.05em;
  width: 1em;
  height: 1em;
}

button:hover {
  background-color: var(--button-bg-hover);
}

/* ANCHOR Torchlight
------------------------------------------------------------- */

pre.torchlight {
  --border: #454c58;
  position: relative;
  padding-inline: 0;
  border: 1px solid var(--border);
  scrollbar-color: hsl(175, 56%, 49%) transparent;
  filter: grayscale(0.5);
}

[data-theme='dark'] pre.torchlight {
  border-color: var(--border);
}

.torchlight .line {
  padding-inline: 1rem;
}

.torchlight .line-number {
  margin-inline-end: 1rem;
}

/*
  Blur and dim the lines that don't have the `.line-focus` class,
  but are within a code block that contains any focus lines.
*/
.torchlight.has-focus-lines .line:not(.line-focus) {
  transition:
    filter 0.35s,
    opacity 0.35s;
  filter: blur(0.095rem);
  opacity: 0.65;
}

/*
  When the code block is hovered, bring all the lines into focus.
*/
.torchlight.has-focus-lines:hover .line:not(.line-focus) {
  filter: blur(0px);
  opacity: 1;
}

/* code block header */

.code-header {
  grid-column: breakout;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 0;
  padding: 0.25em 0.5em;
  border-start-start-radius: 0.25rem;
  border-start-end-radius: 0.25rem;
  border: 1px solid var(--border);
  border-block-end: none;
  background-color: var(--gray-bg);
  color: var(--text);
}

.code-header + pre.torchlight {
  margin-block-start: 0;
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}

@media (min-width: 1000px) {
  .code-header {
    margin-block-end: -1rem;
  }
}

/* Remove highlighting button */
.torchlight-remove-button {
  appearance: none;
  border: 0;
  border-radius: 2px;
  padding: 0.1em 0.5em;
  font-family: var(--body-font);
  font-weight: var(--body-font-regular);
  font-size: var(--font-xs);
  background-color: #4d545c;
  color: #eee;
  cursor: pointer;
}

.torchlight-remove-button:hover {
  background-color: #5b646e;
}

.torchlight.remove-highlighting {
  background: var(--card-bg) !important;
}

.torchlight.remove-highlighting *:not(button) {
  color: var(--text) !important;
}