:root {
  --font-family: "IBM Plex Sans", -apple-system, system-ui, sans-serif;
  --font-family-monospace: "IBM Plex Mono", Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono,
    Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono,
    Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New,
    Courier, monospace;
  --syntax-tab-size: 2;

  --brand-orange: #f08a42;
  --social-mastodon: #8373e7;
  --tag: var(--brand-orange);

  --bg: #f8f6f2;
  --text: #301e0e;
  --accent: #c54a20;
  --border-subtle: #a7a29b;
  --border-strong: #a6593f;

  --link-visited: #5c3770;
  --link: #275d27;
  --link-active: #662512;

  --blockquote-bg: #f2efe8;
  --blockquote-text: #5d3d32;
  --table-header-bg: #f1ece2;
  --table-row-stripe-bg: #f4f1eb;

  --text-heading: #bd4d28;
  --text-muted: #5c5137;
  --text-emphasis: #3fa63f;

  --snow-fall-color: rebeccapurple;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10141b;
    --text: #e9e2d7;
    --accent: #e88f63;
    --border-subtle: #4b566e;
    --border-strong: #d18661;

    --link-visited: #b990d6;
    --link: #7dcd8a;
    --link-active: #ff9b4f;

    --blockquote-bg: #191f2b;
    --blockquote-text: #dfd3c3;
    --table-header-bg: #1e2430;
    --table-row-stripe-bg: #131720;

    --text-heading: #f0a07e;
    --text-muted: #bca98f;
    --text-emphasis: #8cd899;

    --snow-fall-color: unset;
  }
}
/***
* CSS Reset
* Based on the modern CSS reset by Andy Bell
* https://piccalil.li/blog/a-modern-css-reset/
***/

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}
/* @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
  --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);
}

h1 {
  font-size: var(--step-4);
}
h2 {
  font-size: var(--step-3);
}
h3 {
  font-size: var(--step-2);
}
h4 {
  font-size: var(--step-1);
}
h5 {
  font-size: var(--step-0);
}
h6 {
  font-size: var(--step--1);
}
body {
  font-size: var(--step-0);
}
pre {
  /* eslint-disable-next-line css/no-important */
  font-size: var(--step--1) !important;
}
pre,
code {
  /* eslint-disable-next-line css/no-important */
  font-family: var(--font-family-monospace) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-heading);
}

blockquote {
  margin-inline: 0;
  padding: 0.5em 1em;
  border-inline-start: 4px solid var(--accent);
  background-color: var(--blockquote-bg);
  color: var(--blockquote-text);
  font-style: italic;
}

/* ibm-plex-sans-latin-400-normal */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ibm-plex-sans-latin-400-italic */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/ibm-plex-sans-latin-400-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ibm-plex-sans-latin-700-normal */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ibm-plex-mono-latin-400-normal */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: var(--font-family);
  color: var(--text);
  background-color: var(--bg);
  width: 100%;
  min-height: 100vh;
}

html {
  overflow-y: scroll;
  overflow-x: hidden;
}

table {
  width: 100%;
  margin: 2rem 0;
  border-collapse: collapse;
  text-align: left;
}

table th,
table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

table th {
  background-color: var(--table-header-bg);
  font-weight: bold;
}

table tbody tr:nth-child(even) {
  background-color: var(--table-row-stripe-bg);
}

pre:not([class*="language-"]) {
  margin: 0.5em 0;
  line-height: 1.375;
  -moz-tab-size: var(--syntax-tab-size);
  -o-tab-size: var(--syntax-tab-size);
  tab-size: var(--syntax-tab-size);
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  overflow-x: auto;
}

code {
  word-break: break-all;
}
@media (max-width: 550px) {
  pre {
    width: 100vw;
    transform: translateX(-1rem);
  }
  .callout pre {
    width: calc(100vw - 2rem);
    transform: translateX(0);
  }
  main img {
    max-width: 100vw;
    transform: translateX(-1rem);
  }
  .projectlist-description,
  .projectlist-metadata {
    font-size: var(--step--1);
  }
  footer svg:has(use) {
    width: 1.25em;
    height: 1.25em;
  }
  .desktop-only {
    display: none;
  }
  .nav {
    gap: 0.5rem;
  }
  .social-links a {
    padding: 0.25rem;
  }
  .social-links-cta {
    display: flex;
    flex-direction: column;
  }

  .links-nextprev {
    flex-direction: column;
    gap: 1em;
  }

  .links-nextprev-next {
    text-align: left;
  }

  .post-navigation {
    flex-direction: column;
    gap: 1em;
  }

  .post-navigation-next {
    text-align: left;
  }

  /* Make tables scrollable on small screens */
  table {
    display: block;
    width: 100vw;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-1rem);
    font-size: var(--step--1);
  }
  table th,
  table td {
    padding: 0.5rem;
  }
}
/* Layout Utilities */

/* Stack utilities */
.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

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

.stack > * + * {
  margin-block-start: var(--space, 1.5rem);
}

/* Cluster utilities */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space, 1rem);
  justify-content: flex-start;
  align-items: center;
}
/* Spacing Utilities */

/* Padding utilities */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.p-8 { padding: 2rem; }

.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }

.pb-4 { padding-bottom: 1rem; }

/* Margin utilities */
.m-0 { margin: 0; }
.m-auto { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

.m-2 { margin: 0.5em; }
.m-4 { margin: 1rem; }
.m-8 { margin: 2rem; }

.my-2 { margin-top: 0.5em; margin-bottom: 0.5em; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
/* Typography Utilities */

/* Font size utilities */
.text-xs { font-size: var(--step--1); }
.text-sm { font-size: var(--step-0); }
.text-base { font-size: var(--step-0); }
.text-lg { font-size: var(--step-1); }
.text-xl { font-size: var(--step-2); }

/* Font weight utilities */
.font-normal { font-weight: normal; }
.font-bold { font-weight: bold; }

/* Font style utilities */
.italic { font-style: italic; }
.not-italic { font-style: normal; }

/* Text alignment utilities */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Text decoration utilities */
.underline { text-decoration: underline; }
.no-underline { text-decoration: none; }

/* Line height utilities */
.leading-normal { line-height: 1.5; }
.leading-tight { line-height: 1.375; }

/* Font family utilities */
.font-sans { font-family: var(--font-family); }
.font-mono { font-family: var(--font-family-monospace); }

/* Word break utilities */
.break-all { word-break: break-all; }
.break-normal { word-break: normal; }

/* White space utilities */
.whitespace-normal { white-space: normal; }
.whitespace-pre { white-space: pre; }
.whitespace-nowrap { white-space: nowrap; }

/* Base element typography */
p {
  line-height: 1.5;
}

li {
  line-height: 1.5;
}
/* Color Utilities */

/* Text color utilities */
.text-primary { color: var(--text); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent); }
.text-brand { color: var(--brand-orange); }
.text-link { color: var(--link); }
.text-link-visited { color: var(--link-visited); }
.text-link-active { color: var(--link-active); }

/* Background color utilities */
.bg-primary { background-color: var(--bg); }
.bg-accent { background-color: var(--accent); }
.bg-brand { background-color: var(--brand-orange); }
.bg-blockquote { background-color: var(--blockquote-bg); }
.bg-table-header { background-color: var(--table-header-bg); }
.bg-table-stripe { background-color: var(--table-row-stripe-bg); }

/* Border color utilities */
.border-subtle { border-color: var(--border-subtle); }
.border-strong { border-color: var(--border-strong); }
.border-brand { border-color: var(--brand-orange); }

/* SVG color utilities */
.svg-primary { color: var(--text); }
.svg-brand { color: var(--brand-orange); }
.svg-social-mastodon { color: var(--social-mastodon); }

/* Base link styles */
a[href] {
  color: var(--link);
}

a[href]:visited {
  color: var(--link-visited);
}

a[href]:hover,
a[href]:active {
  color: var(--link-active);
}
/* Size Utilities */

/* Width utilities */
.w-full { width: 100%; }
.w-auto { width: auto; }

/* Height utilities */
.h-auto { height: auto; }

/* Max width utilities */
.max-w-none { max-width: none; }
.max-w-full { max-width: 100%; }

/* Aspect ratio utilities */
.aspect-16-9 { aspect-ratio: 16/9; }
/* Media Utilities */

/* Fluid images via https://www.zachleat.com/web/fluid-images/ */
.fluid-img {
  max-width: 100%;
}

.fluid-img[width][height] {
  height: auto;
}

.fluid-img[src$=".svg"] {
  width: 100%;
  height: auto;
  max-width: none;
}

/* Responsive media */
.responsive-media {
  width: 100%;
  height: auto;
}

.responsive-iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

/* Base media elements (for when utilities aren't applied) */
img {
  max-width: 100%;
}

img[width][height] {
  height: auto;
}

img[src$=".svg"] {
  width: 100%;
  height: auto;
  max-width: none;
}

video,
iframe {
  width: 100%;
  height: auto;
}

iframe {
  aspect-ratio: 16/9;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 1rem;
}

.home-link {
  flex-grow: 1;
  font-size: var(--step-1);
  font-weight: bold;
  text-decoration: none;
  color: var(--text);
}

.home-link:hover {
  color: var(--link-active);
}

.atom {
  width: 1.5em;
  height: auto;
  margin-inline-end: 0.25rem;
}

.the-dot {
  color: var(--brand-orange);
}

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

.social-links a,
.social-links-cta a {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: bold;
  color: var(--text);
}

.social-links a:hover,
.social-links-cta a:hover {
  color: var(--link-active);
}

.social-links a[href="/rss.xml"] svg,
.social-links-cta a[href="/rss.xml"] svg {
  color: var(--brand-orange);
}

.social-links a[href="https://github.com/semanticdata"] svg,
.social-links-cta a[href="https://github.com/semanticdata"] svg {
  color: var(--text);
}

.social-links a[href="https://social.lol/@database"] svg,
.social-links-cta a[href="https://social.lol/@database"] svg {
  color: var(--social-mastodon);
}

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

.desktop-only,
.desktop-only-cta {
  color: var(--text);
}

.desktop-only:hover,
.desktop-only-cta:hover {
  color: var(--link-active);
}
/* Navigation Block */
.main-nav {
  width: 100%;
  border-bottom: 1px dashed var(--border-subtle);
  padding-block-end: 1rem;
}

.main-nav .nav {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  flex: 1;
}

.nav-item {
  font-size: var(--step--1);
  border: dashed 1px var(--border-strong);
  border-radius: 5px;
  padding: 0.5rem 1rem;
  flex: 1 1 0%;
  text-align: center;
  text-decoration: none;
}

.nav-item:hover {
  transform: translateY(-2px) translateX(-2px);
  box-shadow: 6px 10px rgba(0, 0, 0, 0.15);
  border-style: solid;
  transition: all 0.2s ease-out;
  text-decoration: none;
  border-color: var(--border-strong);
}

.nav-item[href][aria-current="page"] {
  transform: translateY(-2px) translateX(-2px);
  box-shadow: 6px 10px rgba(0, 0, 0, 0.15);
  border-style: solid;
  border-color: var(--brand-orange);
  color: var(--accent);
}

.nav a:visited:not(:hover) {
  color: var(--link);
}.footer {
  border-top: 1px dashed var(--border-subtle);
  padding-block: 1em;
  margin-block-start: 2rem;
}

.footer p {
  margin-block-start: 0;
}

.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.footer-links li {
  color: var(--text-muted);
}

.footer-links a {
  text-decoration: none;
  color: var(--link);
}

.footer-links a:hover {
  color: var(--link-active);
}

.footer-gifs {
  display: flex;
  justify-content: center;
  gap: 0.2em;
  flex-wrap: wrap;
}

.footer-gifs img {
  max-width: unset;
}

.footer-gifs a {
  text-decoration: none;
}
/* Posts list */
.post-metadata {
  display: flex;
  flex-direction: column;
  border: 1px dashed var(--border-subtle);
  border-radius: 5px;
  padding: 0.5rem;
  align-items: center;
  justify-content: center;
  margin-block-start: 1rem;
}
.post-metadata time {
  color: var(--text-muted);
}
.post-metadata > p {
  margin-block: 0.5rem;
}
/* .post-tags {
  margin-block-end: 0.5rem;
} */
.postlist {
  counter-reset: start-from var(--postlist-index);
  list-style: none;
  padding: 0;
  padding-left: 1.5rem;
}
.postlist-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  counter-increment: start-from -1;
  margin-block-end: 1em;
}
.postlist-item:before {
  display: inline-block;
  pointer-events: none;
  content: "" counter(start-from, decimal-leading-zero) ". ";
  line-height: 100%;
  text-align: right;
  margin-left: -1.5rem;
}
.postlist-date,
.postlist-item:before {
  font-size: var(--step--1);
  color: var(--text-muted);
}
.postlist-date {
  word-spacing: -0.5px;
}
.postlist-link {
  font-weight: bold;
  flex-basis: calc(100% - 1.5rem);
  padding-left: 0.25em;
  padding-right: 0.5em;
  text-underline-position: from-font;
  text-underline-offset: 0;
  text-decoration-thickness: 1px;
}
.postlist-item-active .postlist-link {
  font-weight: bold;
}

.taglist {
  padding-left: 1.5rem;
}

/* Tags */
.post-tag {
  font-style: italic;
  font-size: var(--step--1);
}
.project-metadata {
  display: flex;
  flex-direction: column;
  border: 1px dashed var(--border-subtle);
  border-radius: 5px;
  padding: 1rem;
  align-items: center;
  justify-content: center;
}
.project-tags {
  margin-block: 0.5rem;
}
.projectlist {
  list-style: none;
  padding: 0;
}

.projectlist .projectlist-item:not(:last-child) {
  margin-bottom: 1em;
  padding-block-end: 1rem;
  border-bottom: 1px dashed var(--border-subtle);
}
.projectlist-link {
  display: flex;
  align-items: center;
  gap: 1em;

  border: 1px dashed var(--border-subtle);
  border-radius: 5px;
  width: 100%;
  padding: 1em;
  text-decoration: none;
}
.projectlist-link:hover {
  transform: translateY(-2px) translateX(-2px);
  box-shadow: 6px 10px rgba(0, 0, 0, 0.15);
  border-style: solid;
  transition: all 0.2s ease-out;
}

.projectlist-title {
  color: var(--text);
}

.projectlist-description {
  color: var(--text);
}

.projectlist-icon-container {
  flex-shrink: 0;
  line-height: 1;
}
.projectlist-icon-container > svg {
  color: var(--text);
}

.projectlist-text-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

.projectlist-tag {
  color: var(--tag);
  font-size: var(--step--1);
}
.projectlist-tag::before {
  content: "#";
}

.projectlist-item {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.projectlist-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.projectlist-title svg {
  font-size: var(--step-2);
  flex-shrink: 0;
}
.projectlist-title a {
  text-decoration: none;
}
.projectlist-description {
  margin-bottom: 0.75rem;
}
.projectlist-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.projectlist-links a {
  margin-right: 1rem;
}
.toc {
  margin: 2rem 0;
  padding: 1rem;
  background: var(--blockquote-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
}

.toc-title {
  margin: 0;
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--text-heading);
}

.toc-details {
  border: none;
  padding: 0;
  background: none;
}

.toc-summary {
  list-style: none;
  cursor: pointer;
  padding: 0;
  margin: 0 0 1rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toc-summary::-webkit-details-marker {
  display: none;
}

.toc-summary::after {
  content: '▼';
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.toc-details[open] .toc-summary::after {
  transform: rotate(-90deg);
}

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

.toc-item.toc-level-3 {
  margin-left: 1rem;
}

.toc-link {
  display: block;
  padding: 0.25rem 0.5rem;
  color: var(--text);
  text-decoration: none;
  font-size: var(--step--1);
  transition: color 0.2s ease;
}

.toc-link:hover,
.toc-link:focus {
  color: var(--accent);
}

.toc-link:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Exception Layer - Overrides and Specific Fixes */

/* Accessibility helpers */
.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Skip link specific positioning */
#skip-link {
  text-decoration: none;
  background: var(--bg);
  color: var(--text);
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
}

#skip-link.visually-hidden:focus {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 999;
}

/* Selection styles */
::selection {
  background-color: var(--link-visited);
  color: var(--bg);
}

/* View transition support */
@view-transition {
  navigation: auto;
}

/* Specific element overrides */
hr {
  border: none;
  border-top: 1px dashed var(--border-subtle);
  margin: 2rem 0;
}

/* Prose specific styling */
.prose img {
  margin-inline: auto;
}

/* Font Awesome specific styling */
svg:has(use) {
  height: 1rem;
  width: 1rem;
}

/* Subtitle specific styling */
.subtitle {
  font-style: italic;
  color: var(--text-muted);
  font-family: var(--font-family-monospace);
}
/* Composition Layer - Layout Compositions */

/* Default page layout */
.page-layout {
  max-width: min(80ch, 100% - 2rem);
  margin: 0 auto;
}

/* Main content layout */
.content-wrapper {
  max-width: min(80ch, 100% - 4rem);
  margin: 0 auto;
}

.main-content {
  max-inline-size: 65ch;
  margin-inline: auto;
}

/* Navigation layout */
.nav-layout {
  width: 100%;
  border-bottom: 1px dashed var(--border-subtle);
  padding-block-end: 1rem;
}

/* Post navigation layout */
.post-navigation {
  display: flex;
  justify-content: space-between;
  gap: 0.5em 1em;
  list-style: none;
  padding: 0;
  font-size: var(--step--1);
}

.post-navigation > * {
  flex-grow: 1;
}

.post-navigation-next {
  text-align: right;
}

/* Links next/prev navigation */
.links-nextprev {
  display: flex;
  justify-content: space-between;
  gap: 0.5em 1em;
  list-style: none;
  padding: 0;
  font-size: var(--step--1);
}

.links-nextprev > * {
  flex-grow: 1;
}

.links-nextprev-next {
  text-align: right;
}

/* Call to action layout */
.cta-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.post-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Table layout */
.table-layout {
  width: 100%;
  margin: 2rem 0;
  border-collapse: collapse;
  text-align: left;
}

/* Code block layout */
.code-layout {
  margin: 0.5em 0;
  line-height: 1.375;
  -moz-tab-size: var(--syntax-tab-size);
  -o-tab-size: var(--syntax-tab-size);
  tab-size: var(--syntax-tab-size);
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  overflow-x: auto;
}