:root {
  --alert-background: #fff;
  --aside-background: #f9f0e3;
  --blockquote-foreground: #464a4d;
  --body-width: 820px;
  --border-color-hover: #9db8bf;
  --border-color: #464a4d;
  --code-background: #e7daca;
  --code-border: #c6c2c2;
  --collection-body-background: #f4e7d6;
  --font-mono:
    "San Francisco Mono", Monaco, "Consolas", "Lucida Console",
    "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
  --font-sans:
    Inter, -apple-system, BlinkMacSystemFont, "avenir next", avenir,
    helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui", arial,
    sans-serif;
  --font-serif: "Source Serif", serif;
  --gallery-spacing: clamp(2px, 4px, 1rem);
  --gallery-transition: 0.3s ease-in-out;
  --heading-foreground: #615252;
  --link-border-color: #e5e5e5;
  --link-foreground-hover: #ffb098;
  --link-foreground-visited: #86280e;
  --link-foreground: #d02d00;
  --nav-link-foreground: #000;
  --site-background: #fef0df; /* #FFFCF0 */
  --site-foreground: #000;
  --text-selection: #d9d3ce;
  --time-foreground: #b7b5b2;
  --warning-background: #d27272;
  --icon-external-link: url("/library/images/icons/Link-External-Icon-Black.svg");
  --icon-pdf: url("/library/images/icons/PDF-Icon.png");
  --image-radius: 0.2rem;
  --highlight-font-size: 0.9em;
  --highlight-border-radius: 6px;
  --highlight-padding: 1rem;
  --highlight-line-number-color: #6e7681;
}

@media (prefers-color-scheme: dark) {
  :root {
    --alert-background: #000;
    --aside-background: #413831;
    --blockquote-foreground: #b7b5b2;
    --border-color-hover: #5c6d73;
    --border-color: #253237;
    --code-background: #262727;
    --code-foreground: #e8e8e8;
    --collection-body-background: #353535;
    --heading-foreground: #b7b2b2;
    --link-foreground-visited: #b69086;
    --link-foreground: #ffb098;
    --nav-link-foreground: #ffb098;
    --site-background: #181a1b;
    --site-foreground: #e1e1e1;
    --text-selection: #403a36;
    --warning-background: #651010;
    --icon-external-link: url("/library/images/icons/Link-External-Icon-Offwhite.svg");
  }
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/library/misc/fonts/Inter/Regular.woff2) format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  src: url(/library/misc/fonts/Inter/Bold.woff2) format("woff2");
}

@font-face {
  font-family: "Source Serif";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(/library/misc/fonts/Source_Serif/Regular.woff2) format("woff2");
}

@font-face {
  font-family: "Source Serif";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url(/library/misc/fonts/Source_Serif/Italic.woff2) format("woff2");
}

html {
  font-size: 16px;
  color: var(--site-foreground);
  background-color: var(--site-background);
}

body {
  margin: 0; /* Reset margin to 0 instead of auto for more predictable behavior */
  max-width: var(--body-width);
  padding-inline: 0.4rem;
  font-size: 1.3rem;
  line-height: 1.6; /* Use unitless value for better scaling */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow-x: hidden; /* Prevent horizontal overflow */
  width: 100%; /* Ensure full width */
  margin-inline: auto; /* Center the body if max-width is hit */
  position: relative; /* Create new stacking context */
  --pagefind-ui-scale: 0.8;
  --pagefind-ui-primary: var(--site-foreground);
  --pagefind-ui-text: var(--site-foreground);
  --pagefind-ui-background: var(--site-background);
  --pagefind-ui-border: var(--code-border);
  --pagefind-ui-tag: #eeeeee;
  --pagefind-ui-border-width: 2px;
  --pagefind-ui-border-radius: 0;
  --pagefind-ui-image-border-radius: 8px;
  --pagefind-ui-image-box-ratio: 3 / 2;
  --pagefind-ui-font: var(--font-serif);
}

::selection {
  background: var(--text-selection);
}

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

* {
  padding: 0;
  margin: 0;
}

b,
strong {
  font-weight: bolder;
}

pre,
code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

/* ensures all direct children stay within the grid */
body > * {
  min-width: 0; /* Allow children to shrink below their minimum content size */
  width: 100%; /* Ensure children take full width */
  overflow-wrap: break-word; /* Prevent text from causing overflow */
}

main {
  font-family: var(--font-serif);
}

main > :first-child {
  margin-top: 0.75em;
}

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

a:visited {
  color: var(--link-foreground-visited);
}

a:hover {
  color: var(--link-foreground-hover);
}

a[href^="#fnref"] {
  text-decoration: none;
  padding-left: 5px;
}

a[href*="//"]:not([href*="silasjelley.com"]),
a[href$=".pdf"] {
  padding-right: 0.9em;
  background-color: rgba(0, 0, 0, 0);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 0.7em;
}

a[href*="//"]:not([href*="silasjelley.com"]) {
  background-image: var(--icon-external-link);
}

a[href$=".pdf"],
a[href*=".pdf#"],
a[href*=".pdf?"],
a[href*="/pdf/"],
a[href*="pdf.php"],
a[href*="viewdoc.php"],
a[href*="file=pdf"],
a[href*="format=pdf"],
a[href*="type=pdf"] {
  background-image: var(--icon-pdf);
}

ul,
ol {
  padding-left: 1em;
  margin: 1rem;
}

img {
  transition: transform 0.3s ease;
  max-width: 100%;
  display: block;
  border-radius: var(--image-radius);
  margin-left: auto;
  margin-right: auto;
}

video {
  width: 90%;
  display: block;
  margin: 1em auto 1em auto;
}

ul.task-list {
  list-style: none;
}

div.backlinks {
  font-size: 0.8em;
  color: var(--time-foreground);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-foreground);
  font-weight: bolder;
  line-height: 1.2;
  margin-top: 0.7em;
  margin-bottom: 0.7em;
  overflow-wrap: break-word;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5rem;
}

h3,
h4 {
  font-size: 1.3rem;
  margin-bottom: 5px;
}

p {
  margin-top: 1em;
  margin-bottom: 1em;
}

time {
  color: var(--time-foreground);
  font-weight: normal;
  font-size: 1rem;
}

time code {
  color: var(--site-foreground);
}

hr {
  margin: 2em auto;
  max-width: 100%;
  border-bottom: 1px solid var(--border-color);
}

blockquote {
  padding: 0 1em 0 2em;
  margin: 1.4em 0;
  position: relative;
  color: var(--blockquote-foreground);
}

blockquote p {
  text-align: justify;
  hyphens: auto;
  hyphenate-limit-chars: 7;
  margin: 1em 0 0 0;
}

blockquote p + p {
  text-indent: 2em;
  margin: 0;
}

blockquote:not(blockquote blockquote)::before {
  content: "\201C";
  font-size: 60px;
  position: absolute;
  left: 0;
  top: -2rem;
  color: #666;
}

figcaption {
  grid-column: 1 / -1;
  text-align: center;
}

blockquote cite,
blockquote p:has(cite) {
  text-align: left;
  text-indent: unset;
}

.article.collection blockquote cite {
  margin-top: 1em;
}

code {
  padding: 2.5px;
  font-size: 14px;
  line-height: 1em;
  color: var(--code-foreground);
  background: var(--code-background);
  border-radius: 0.25rem;
  margin-bottom: 1em;
  overflow: auto;
}

pre code {
  line-height: 125%;
  display: block;
  padding: 10px;
}

dl {
  margin: 1em;
}

dt {
  font-weight: bold;
}

dd {
  margin-left: 3em;
}

table {
  position: relative;
  width: 100%;
  overflow-y: auto;
  border-collapse: separate;
  border-spacing: 0;
  border-color: #a8a29e;
  border-style: solid;
  border-width: 1px;
}

table td:empty::after {
  content: "\00a0";
}

table tr {
  background-color: #ffffff;
}

table td,
table th {
  text-align: left;
  font-size: 13px;
  color: #292524;
  border-right: 1px solid #e7e5e4;
  border-bottom: 1px solid #e7e5e4;
  padding: 3px 4px;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

table td:last-of-type,
table th:last-of-type {
  border-right: none;
}

table tbody tr:last-of-type td {
  border-bottom: none;
}

table thead td,
table thead th {
  font-weight: 700;
}

input,
button,
textarea {
  padding: 12px 20px;
  margin: 8px;
  margin-left: 0;
  box-sizing: border-box;
  border: 1px solid var(--border-color);
}

textarea,
input[type="text"],
input[type="email"],
input[type="password"] {
  border-radius: 4px;
  background-color: var(--code-background);
}

input[type="button"],
input[type="submit"],
input[type="reset"],
button[type="submit"] {
  background-color: #333;
  border: none;
  color: #fff;
  cursor: pointer;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button[type="submit"]:hover {
  background-color: var(--link-foreground-hover);
  color: white;
}

input[type="text"]#search {
  margin-bottom: 5em;
}

form input[type="text"],
form textarea {
  width: 100%;
}

input#username,
input#password {
  width: 200px;
}

input[type="email"] {
  width: 260px;
}

summary {
  cursor: pointer;
  margin-bottom: 1em;
}

footer {
  padding-bottom: 1em;
  margin-top: 2em;
}

footer details time {
  font-family: var(--font-serif);
}

section[role="doc-endnotes"] {
  background-color: var(--code-background);
  border: 1.4px solid var(--code-border);
  color: var(--code-foreground);
  margin-top: 2em;
  margin-bottom: 1em;
}

section[role="doc-endnotes"]::before {
  content: "Footnotes";
  border-bottom: 2px solid var(--code-border);
  display: block;
  padding: 0 1em;
  font-variant-caps: all-small-caps;
}

[role="doc-endnotes"] ol {
  list-style: decimal;
}

[role="doc-endnotes"] li {
  padding-right: 2em;
}

[role="doc-endnotes"] hr {
  display: none;
}

/* Embedded PDFs */
object[type="application/pdf"] {
  max-width: 100%;
  height: auto;
  min-height: 400px; /* Ensures reasonable height on mobile */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Adjust height based on screen size */
@media screen and (min-width: 768px) {
  object[type="application/pdf"] {
    min-height: 600px;
  }
}

.float-left.always {
  float: left;
  width: 40%;
  margin-right: 15px;
}

.float-right.always {
  display: block;
  float: right;
  width: 40%;
  margin-left: 15px;
}

.smallcaps {
  font-variant-caps: all-small-caps;
}

@media screen and (min-width: 900px) {
  .float-left {
    float: left;
    width: 40%;
    margin-right: 15px;
  }

  .float-right {
    display: block;
    float: right;
    width: 40%;
    margin-left: 15px;
  }

  .message-left {
    margin-right: 12em;
  }

  .message-right {
    margin-left: 12em;
  }
}

nav ul {
  font-family: var(--font-sans);
  padding-left: 0;
}

nav a {
  border: none;
  color: var(--heading-foreground);
  text-decoration: none;
}

nav a:visited {
  color: var(--heading-foreground);
}

nav a:hover {
  border: none;
  color: var(--link-foreground-hover);
  transform: unset;
}

ul.navmain {
  margin: 20px 0 0 0;
}

ul.navmain li {
  color: var(--heading-foreground);
  margin-right: 10px;
  display: inline-block;
}

ul.navmisc {
  margin: 0;
}

ul.navmisc.top li:not(:first-child):before {
  content: "/ ";
}

ul.navmisc li {
  color: var(--heading-foreground);
  display: inline-block;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1.5px;
}

.navmisc.ring .previous {
  float: left;
  padding: 1.5em 0;
}

.navmisc.ring .next {
  float: right;
  padding: 1.5em 0;
}

.navmisc.ring li > a {
  padding: 1.5em 0;
}

@media screen and (min-width: 1250px) {
  html {
    padding-left: 0;
    padding-right: 0;
  }

  body {
    width: var(--body-width);
  }
}

.alert p {
  padding: 20px;
  background-color: var(--alert-background);
  line-height: 1em;
  border: 2px solid;
  display: block;
  margin: 10px;
}

/* Admonitions*/
.aside {
  position: relative;
  padding: 0.03rem 0.8rem;
  margin-bottom: 1em;
  border: 2px solid var(--code-border);
  color: var(--code-foreground);
  background-color: var(--aside-background);
}

.aside time a {
  color: var(--time-foreground, currentColor);
  text-decoration: none;
}

.warn {
  background-color: var(--warning-background);
}

.date-range {
  border: 2px solid var(--code-border);
  padding: 0 0.5em;
  width: fit-content;
  line-height: 0;
}

.error {
  background-color: rgba(255, 23, 68, 0.15);
}

.message p {
  margin: 0.5em;
}

.message-left {
  margin-right: 6em;
}

.message-right {
  margin-left: 6em;
  background-color: #f4f4f4;
}

@media (prefers-color-scheme: dark) {
  .message-right {
    background-color: #978a8a;
  }
}

@media screen and (min-width: 900px) {
  .message-left {
    margin-right: 12em;
  }

  .message-right {
    margin-left: 12em;
  }
}

/* Aside Shortcode Styles */
.aside-title {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.1em;
  font-weight: bold;
}

/* Specific Aside Types */
.aside.note {
  /* Default aside style is already generic, but we can adhere to specific colors if needed */
  border-color: var(--code-border);
  background-color: var(--aside-background);
}

.aside.tip {
  border-color: var(--success-color, #4caf50);
  background-color: var(--success-background, rgba(76, 175, 80, 0.1));
}

.aside.important {
  border-color: var(--calm-color, #2196f3);
  background-color: var(--calm-background, rgba(33, 150, 243, 0.1));
}

.aside.caution {
  border-color: var(--warning-color, #ff9800);
  background-color: var(--warning-background, rgba(255, 152, 0, 0.1));
}

.aside.warning {
  border-color: var(--error-color, #f44336);
  background-color: var(--error-background, rgba(244, 67, 54, 0.1));
}

section.collection-section {
  margin: 1em 0;
}

.collection {
  --spacing-block: 1rem;
  --title-font-size: 1.1rem;
  margin-block-end: var(--spacing-block);
  margin-block-start: var(--spacing-block);
}

article.collection p {
  margin-top: 0px;
}

article.collection h2 {
  margin-top: 0px;
  margin-bottom: 5px;
}

.collection time a {
  color: var(--time-foreground, currentColor);
  text-decoration: none;
}

.collection.title {
  margin-block-end: 0.5rem;
  margin-block-start: 0;
}

.collection.title header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-block);
}

.collection.title h2 {
  flex: 1;
  font-size: var(--title-font-size);
  font-weight: 400;
  margin: 0;
  min-width: 0; /* Prevents flex item from overflowing */
}

.collection.body {
  background: var(--collection-body-background);
  border: 2px solid var(--code-border);
  padding: var(--spacing-block);
}

.collection.body time a {
  color: var(--time-foreground);
  text-decoration: none;
}

.collection.body time a:hover {
  text-decoration: underline;
}

.collection.summary h2 {
  display: inline;
  font-size: var(--title-font-size);
  margin: 0;
}

.collection.title time,
.collection.summary time {
  font-family: var(--font-sans);
  float: right;
}

.collection .backlinks a {
  text-decoration: none;
  font-size: 0.9rem;
}

.gallery {
  display: grid;
  gap: var(--gallery-spacing);
  width: 100%;
  margin: 2rem 0;
}

.gallery > img,
.gallery > picture {
  width: 100%;
  height: 100%;
}

.gallery > img,
.gallery > picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--image-radius);
  transition: transform var(--gallery-transition);
}

.gallery > img:hover,
.gallery > picture:hover img {
  transform: scale(1.01);
  cursor: zoom-in;
}

.gallery > figcaption {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: calc(var(--gallery-spacing) / 2);
  font-style: italic;
  color: #999;
}

/* Dynamic columns based on number of children */
.gallery:has(> :nth-child(1):nth-last-child(1)) {
  grid-template-columns: 1fr;
}

.gallery:has(> figcaption):has(> :nth-child(1):nth-last-child(2)) {
  grid-template-columns: 1fr;
}

.gallery:has(> :nth-child(1):nth-last-child(2)),
.gallery:has(> :nth-child(2):nth-last-child(1)) {
  grid-template-columns: repeat(2, 1fr);
}

.gallery:has(> figcaption):has(> :nth-child(1):nth-last-child(3)),
.gallery:has(> figcaption):has(> :nth-child(2):nth-last-child(2)),
.gallery:has(> figcaption):has(> :nth-child(3):nth-last-child(1)) {
  grid-template-columns: repeat(2, 1fr);
}

.gallery:has(> :nth-child(1):nth-last-child(3)),
.gallery:has(> :nth-child(2):nth-last-child(2)),
.gallery:has(> :nth-child(3):nth-last-child(1)) {
  grid-template-columns: repeat(3, 1fr);
}

.gallery:has(> figcaption):has(> :nth-child(1):nth-last-child(4)),
.gallery:has(> figcaption):has(> :nth-child(2):nth-last-child(3)),
.gallery:has(> figcaption):has(> :nth-child(3):nth-last-child(2)),
.gallery:has(> figcaption):has(> :nth-child(4):nth-last-child(1)) {
  grid-template-columns: repeat(3, 1fr);
}

.gallery:has(> :nth-child(n + 5)),
.gallery:has(> figcaption):has(> :nth-child(n + 4)) {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Fallback, in case there are 4 items and no figcaption */
.gallery:not(:has(> figcaption)):has(> :nth-child(n + 4)) {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Layout variants */

.gallery.narrow-image picture,
.gallery.narrow-image picture img {
  max-width: 500px;
  margin: auto;
}

figure.gallery.one-wide.one-wide {
  grid-template-columns: 1fr;
}

figure.gallery.two-wide.two-wide {
  grid-template-columns: repeat(2, 1fr);
}

.gallery.four-wide {
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
}

.gallery.wide-first > :first-child:not(figcaption),
.gallery.wide-last > :last-child:not(figcaption) {
  grid-column: 1 / -1;
}

.gallery.full-viewport {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

figure.gallery.full-viewportmg,
figure.gallery.full-viewport.full-viewport picture {
  transform: none;
  border-radius: 0;
}

.gallery.square-items > img,
.gallery.square-items > picture img {
  aspect-ratio: 1;
}

@media (max-width: 768px) {
  .gallery:has(> :nth-child(1):nth-last-child(3)),
  .gallery:has(> :nth-child(2):nth-last-child(2)),
  .gallery:has(> :nth-child(3):nth-last-child(1)),
  .gallery:has(> figcaption):has(> :nth-child(1):nth-last-child(4)),
  .gallery:has(> figcaption):has(> :nth-child(2):nth-last-child(3)),
  .gallery:has(> figcaption):has(> :nth-child(3):nth-last-child(2)),
  .gallery:has(> figcaption):has(> :nth-child(4):nth-last-child(1)) {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery.four-wide,
  .gallery:has(> :nth-child(n + 4)) {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery:has(> :nth-child(3):nth-last-child(1))
    > :last-child:not(figcaption) {
    grid-column: span 2;
  }

  /* ADDED: New rule for 3 items + figcaption case */
  .gallery:has(> figcaption):has(> :nth-child(4):nth-last-child(1))
  > :nth-child(3) {
    grid-column: span 2;
  }
}

@media (max-width: 480px) {
  .gallery {
    grid-template-columns: 1fr;
  }

  .gallery.four-wide,
  .gallery:has(> :nth-child(n + 4)) {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Disable hover effects on touch devices */
  .gallery > img:hover,
  .gallery > picture:hover img {
    transform: none;
  }
}

.lightbox-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(8px);
}

.lightbox-overlay.active {
  opacity: 1;
}

.lightbox-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 1rem 1rem 1rem;
  box-sizing: border-box;
}

.lightbox-image {
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  transform: scale(0.95);
  opacity: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-overlay.active .lightbox-image {
  transform: scale(1);
  opacity: 1;
}

.lightbox-caption {
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 90%;
  padding: 0.75rem 1.25rem;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  margin-top: 1.5rem;
  backdrop-filter: blur(10px);
}

.lightbox-counter {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  backdrop-filter: blur(10px);
  letter-spacing: 0.5px;
}

.lightbox-button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-family: var(--font-sans);
  font-weight: 400;
  user-select: none;
  position: absolute;
  backdrop-filter: blur(10px);
}

.lightbox-button:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.lightbox-button:active {
  transform: scale(1.05);
}

.lightbox-close {
  top: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  font-size: 20px;
}

.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  font-size: 20px;
  opacity: 0.6;
}

.lightbox-nav:hover {
  opacity: 1;
}

.lightbox-prev {
  left: 1.5rem;
}

.lightbox-next {
  right: 1.5rem;
}

.lightbox-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-family: var(--font-sans);
}

.lightbox-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.lightbox-nav.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Tablet adjustments */
@media (max-width: 1024px) {
  .lightbox-image {
    max-width: 85%;
    max-height: 75%;
  }

  .lightbox-prev {
    left: 1rem;
  }

  .lightbox-next {
    right: 1rem;
  }
}

@media (max-width: 768px) {
  .lightbox-container {
    padding: 3.5rem 1rem 5rem 1rem;
  }

  .lightbox-image {
    max-width: 95%;
    max-height: 90%;
  }

  .lightbox-close {
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .lightbox-counter {
    top: 1rem;
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
  }

  .lightbox-nav {
    width: 48px;
    height: 48px;
    font-size: 18px;
    bottom: 1.5rem;
    top: auto;
    transform: none;
  }

  .lightbox-prev {
    left: 1.5rem;
  }

  .lightbox-next {
    right: 1.5rem;
  }

  .lightbox-caption {
    font-size: 0.875rem;
    max-width: 95%;
    padding: 0.6rem 1rem;
    margin-top: 1rem;
  }
}

@media (max-width: 480px) {
  .lightbox-container {
    padding: 3rem 0.5rem 4.5rem 0.5rem;
  }

  .lightbox-image {
    max-width: 95%;
    max-height: 90%;
  }

  .lightbox-nav {
    width: 44px;
    height: 44px;
    font-size: 16px;
    bottom: 1rem;
  }

  .lightbox-prev {
    left: 1rem;
  }

  .lightbox-next {
    right: 1rem;
  }

  .lightbox-close {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .lightbox-counter {
    font-size: 0.75rem;
    padding: 0.35rem 0.7rem;
  }

  .lightbox-caption {
    font-size: 0.8rem;
    margin-top: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox-overlay,
  .lightbox-image,
  .lightbox-button {
    transition: none;
  }

  .lightbox-spinner {
    animation: none;
  }
}

/* --- Base Media Player Styles --- */

.audio-figure {
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.audio-figure figcaption {
  font-size: 0.9rem;
  color: var(--blockquote-foreground);
  text-align: center;
}

/* --- Custom Audio Player --- */

audio {
  width: 100%;
  max-width: 500px;
}
/* --- Firefox Specific Styles --- */

@supports (-moz-appearance: none) {
  audio {
    color: var(--link-foreground);
    width: 100%;
    max-width: 500px;
    background-color: var(--code-background);
    border-radius: var(--highlight-border-radius);
    padding: 0.5rem;
  }
}

.poem {
  text-align: center;
  color: var(--blockquote-foreground);
}

.poem ul {
  list-style: none;
}

/* === Typst output: bare pre > code (no wrapper divs) === */
/* Plain code block */
pre:not(.highlight) {
  margin-top: 1em;
  margin-bottom: 1em;
  font-size: var(--highlight-font-size, 0.9em);
  border: 2px solid var(--code-border);
  border-radius: 4px;
  overflow-x: auto;
}

pre:not(.highlight) code {
  display: block;
  padding: var(--highlight-padding, 1rem);
  border-radius: 0;
  background: transparent;
  line-height: 125%;
}

/* Code block with language label — shown via ::before on the code element */
pre:not(.highlight) code[data-lang] {
  border-top: 1px solid var(--code-border);
}

pre:not(.highlight) code[data-lang]::before {
  content: attr(data-lang);
  display: block;
  /* Pull label outside the code padding area, flush to top-right */
  margin: calc(-1 * var(--highlight-padding, 1rem));
  margin-bottom: var(--highlight-padding, 1rem);
  padding: 0.25rem 1rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.8em;
  font-weight: bold;
  opacity: 0.7;
  text-transform: uppercase;
  text-align: right;
  user-select: none;
  border-bottom: 1px solid var(--code-border);
  background-color: var(--code-background);
}

/* === Djot output: .highlight / .code-block wrapper divs === */
/* Helper wrapper for code blocks with headers */
.code-block {
  margin-top: 1em;
  margin-bottom: 1em;
  border: 2px solid var(--code-border);
  border-radius: 4px;
  overflow: hidden;
}

.code-header {
  background-color: var(--code-background);
  border-bottom: 1px solid var(--code-border);
  padding: 0.25rem 1rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.8em;
  font-weight: bold;
  opacity: 0.7;
  text-transform: uppercase;
  text-align: right;
  user-select: none;
}

/* When inside a code-block, remove the highlight container's border/margin */
.code-block .highlight {
  margin: 0 !important;
  border: none !important;
  border-radius: 0;
}

div.highlight {
  margin-top: 1em;
  margin-bottom: 1em;
}

.highlight {
  font-size: var(--highlight-font-size, 0.9em);
  padding: var(--highlight-padding, 1rem);
  border: 2px solid var(--code-border);
}

.highlight pre {
  margin: 0;
  overflow-x: auto;
}

.highlight table {
  border-spacing: 0;
  border: none;
  margin: 0;
}

.highlight table td {
  padding: 0;
  border: none;
}

.highlight .linenos {
  user-select: none;
  padding-right: 1rem;
  color: var(--highlight-line-number-color);
  text-align: right;
  width: 1%;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  pre:not(.highlight) {
    background: var(--code-background, #262220);
  }

  .highlight {
    background: var(--code-background, #262220) !important;
  }

  td.linenos .normal {
    color: #4e4e4e;
    background-color: transparent;
    padding-left: 5px;
    padding-right: 5px;
  }

  span.linenos {
    color: #4e4e4e;
    background-color: transparent;
    padding-left: 5px;
    padding-right: 5px;
  }

  td.linenos .special {
    color: #8f9494;
    background-color: #ffffc0;
    padding-left: 5px;
    padding-right: 5px;
  }

  span.linenos.special {
    color: #8f9494;
    background-color: #ffffc0;
    padding-left: 5px;
    padding-right: 5px;
  }

  .highlight .hll {
    background-color: #ddd0c0;
  }

  .highlight {
    background: #262220;
    color: #ddd0c0;
  }

  .highlight .c {
    color: #70757a;
  }

  /* Comment */
  .highlight .err {
    color: #af5f5f;
  }

  /* Error */
  .highlight .esc {
    color: #ddd0c0;
  }

  /* Escape */
  .highlight .g {
    color: #ddd0c0;
  }

  /* Generic */
  .highlight .k {
    color: #919191;
  }

  /* Keyword */
  .highlight .l {
    color: #af875f;
  }

  /* Literal */
  .highlight .n {
    color: #ddd0c0;
  }

  /* Name */
  .highlight .o {
    color: #878787;
  }

  /* Operator */
  .highlight .x {
    color: #ddd0c0;
  }

  /* Other */
  .highlight .p {
    color: #ddd0c0;
  }

  /* Punctuation */
  .highlight .ch {
    color: #8f9f9f;
  }

  /* Comment.Hashbang */
  .highlight .cm {
    color: #70757a;
  }

  /* Comment.Multiline */
  .highlight .cp {
    color: #fdd0c0;
  }

  /* Comment.Preproc */
  .highlight .cpf {
    color: #c9b98f;
  }

  /* Comment.PreprocFile */
  .highlight .c1 {
    color: #70757a;
  }

  /* Comment.Single */
  .highlight .cs {
    color: #af5f5f;
  }

  /* Comment.Special */
  .highlight .gd {
    color: #bb6868;
  }

  /* Generic.Deleted */
  .highlight .ge {
    color: #ddd0c0;
    font-style: italic;
  }

  /* Generic.Emph */
  .highlight .ges {
    color: #ddd0c0;
  }

  /* Generic.EmphStrong */
  .highlight .gr {
    color: #af5f5f;
  }

  /* Generic.Error */
  .highlight .gh {
    color: #ddd0c0;
  }

  /* Generic.Heading */
  .highlight .gi {
    color: #849155;
  }

  /* Generic.Inserted */
  .highlight .go {
    color: #ddd0c0;
  }

  /* Generic.Output */
  .highlight .gp {
    color: #ddd0c0;
  }

  /* Generic.Prompt */
  .highlight .gs {
    color: #ddd0c0;
    font-weight: bold;
  }

  /* Generic.Strong */
  .highlight .gu {
    color: #ddd0c0;
  }

  /* Generic.Subheading */
  .highlight .gt {
    color: #af5f5f;
  }

  /* Generic.Traceback */
  .highlight .kc {
    color: #875f5f;
  }

  /* Keyword.Constant */
  .highlight .kd {
    color: #875f5f;
  }

  /* Keyword.Declaration */
  .highlight .kn {
    color: #875f5f;
  }

  /* Keyword.Namespace */
  .highlight .kp {
    color: #919191;
  }

  /* Keyword.Pseudo */
  .highlight .kr {
    color: #b46276;
  }

  /* Keyword.Reserved */
  .highlight .kt {
    color: #af875f;
  }

  /* Keyword.Type */
  .highlight .ld {
    color: #af875f;
  }

  /* Literal.Date */
  .highlight .m {
    color: #87afaf;
  }

  /* Literal.Number */
  .highlight .s {
    color: #c9b98f;
  }

  /* Literal.String */
  .highlight .na {
    color: #ddd0c0;
  }

  /* Name.Attribute */
  .highlight .nb {
    color: #ddd0c0;
  }

  /* Name.Builtin */
  .highlight .nc {
    color: #875f5f;
  }

  /* Name.Class */
  .highlight .no {
    color: #af8787;
  }

  /* Name.Constant */
  .highlight .nd {
    color: #fdd0c0;
  }

  /* Name.Decorator */
  .highlight .ni {
    color: #ddd0c0;
  }

  /* Name.Entity */
  .highlight .ne {
    color: #877575;
  }

  /* Name.Exception */
  .highlight .nf {
    color: #fdd0c0;
  }

  /* Name.Function */
  .highlight .nl {
    color: #ddd0c0;
  }

  /* Name.Label */
  .highlight .nn {
    color: #ddd0c0;
  }

  /* Name.Namespace */
  .highlight .nx {
    color: #ddd0c0;
  }

  /* Name.Other */
  .highlight .py {
    color: #dfaf87;
  }

  /* Name.Property */
  .highlight .nt {
    color: #87afaf;
  }

  /* Name.Tag */
  .highlight .nv {
    color: #ddd0c0;
  }

  /* Name.Variable */
  .highlight .ow {
    color: #878787;
  }

  /* Operator.Word */
  .highlight .pm {
    color: #ddd0c0;
  }

  /* Punctuation.Marker */
  .highlight .w {
    color: #ddd0c0;
  }

  /* Text.Whitespace */
  .highlight .mb {
    color: #87afaf;
  }

  /* Literal.Number.Bin */
  .highlight .mf {
    color: #87afaf;
  }

  /* Literal.Number.Float */
  .highlight .mh {
    color: #87afaf;
  }

  /* Literal.Number.Hex */
  .highlight .mi {
    color: #87afaf;
  }

  /* Literal.Number.Integer */
  .highlight .mo {
    color: #87afaf;
  }

  /* Literal.Number.Oct */
  .highlight .sa {
    color: #dfaf87;
  }

  /* Literal.String.Affix */
  .highlight .sb {
    color: #c9b98f;
  }

  /* Literal.String.Backtick */
  .highlight .sc {
    color: #c9b98f;
  }

  /* Literal.String.Char */
  .highlight .dl {
    color: #c9b98f;
  }

  /* Literal.String.Delimiter */
  .highlight .sd {
    color: #878787;
  }

  /* Literal.String.Doc */
  .highlight .s2 {
    color: #c9b98f;
  }

  /* Literal.String.Double */
  .highlight .se {
    color: #af5f5f;
  }

  /* Literal.String.Escape */
  .highlight .sh {
    color: #c9b98f;
  }

  /* Literal.String.Heredoc */
  .highlight .si {
    color: #af5f5f;
  }

  /* Literal.String.Interpol */
  .highlight .sx {
    color: #fdd0c0;
  }

  /* Literal.String.Other */
  .highlight .sr {
    color: #af5f5f;
  }

  /* Literal.String.Regex */
  .highlight .s1 {
    color: #c9b98f;
  }

  /* Literal.String.Single */
  .highlight .ss {
    color: #af5f5f;
  }

  /* Literal.String.Symbol */
  .highlight .bp {
    color: #87afaf;
  }

  /* Name.Builtin.Pseudo */
  .highlight .fm {
    color: #fdd0c0;
  }

  /* Name.Function.Magic */
  .highlight .vc {
    color: #ddd0c0;
  }

  /* Name.Variable.Class */
  .highlight .vg {
    color: #ddd0c0;
  }

  /* Name.Variable.Global */
  .highlight .vi {
    color: #ddd0c0;
  }

  /* Name.Variable.Instance */
  .highlight .vm {
    color: #ddd0c0;
  }

  /* Name.Variable.Magic */
  .highlight .il {
    color: #87afaf;
  }

  /* Literal.Number.Integer.Long */
}

@media (prefers-color-scheme: light) {
  pre:not(.highlight) {
    background: var(--code-background, #e7daca);
  }

  .highlight {
    background: var(--code-background, #e7daca) !important;
  }

  td.linenos .normal {
    color: inherit;
    background-color: transparent;
    padding-left: 5px;
    padding-right: 5px;
  }

  span.linenos {
    color: inherit;
    background-color: transparent;
    padding-left: 5px;
    padding-right: 5px;
  }

  td.linenos .special {
    color: #000000;
    background-color: #ffffc0;
    padding-left: 5px;
    padding-right: 5px;
  }

  span.linenos.special {
    color: #000000;
    background-color: #ffffc0;
    padding-left: 5px;
    padding-right: 5px;
  }

  .highlight .hll {
    background-color: #ffffcc;
  }

  .highlight {
    background: #ffffff;
  }

  .highlight .c {
    color: #999988;
    font-style: italic;
  }

  /* Comment */
  .highlight .err {
    color: #a61717;
    background-color: #e3d2d2;
  }

  /* Error */
  .highlight .k {
    font-weight: bold;
  }

  /* Keyword */
  .highlight .o {
    font-weight: bold;
  }

  /* Operator */
  .highlight .ch {
    color: #999988;
    font-style: italic;
  }

  /* Comment.Hashbang */
  .highlight .cm {
    color: #999988;
    font-style: italic;
  }

  /* Comment.Multiline */
  .highlight .cp {
    color: #999999;
    font-weight: bold;
  }

  /* Comment.Preproc */
  .highlight .cpf {
    color: #999988;
    font-style: italic;
  }

  /* Comment.PreprocFile */
  .highlight .c1 {
    color: #999988;
    font-style: italic;
  }

  /* Comment.Single */
  .highlight .cs {
    color: #999999;
    font-weight: bold;
    font-style: italic;
  }

  /* Comment.Special */
  .highlight .gd {
    color: #000000;
    background-color: #ffdddd;
  }

  /* Generic.Deleted */
  .highlight .ge {
    font-style: italic;
  }

  /* Generic.Emph */
  .highlight .ges {
    font-weight: bold;
    font-style: italic;
  }

  /* Generic.EmphStrong */
  .highlight .gr {
    color: #aa0000;
  }

  /* Generic.Error */
  .highlight .gh {
    color: #999999;
  }

  /* Generic.Heading */
  .highlight .gi {
    color: #000000;
    background-color: #ddffdd;
  }

  /* Generic.Inserted */
  .highlight .go {
    color: #888888;
  }

  /* Generic.Output */
  .highlight .gp {
    color: #555555;
  }

  /* Generic.Prompt */
  .highlight .gs {
    font-weight: bold;
  }

  /* Generic.Strong */
  .highlight .gu {
    color: #aaaaaa;
  }

  /* Generic.Subheading */
  .highlight .gt {
    color: #aa0000;
  }

  /* Generic.Traceback */
  .highlight .kc {
    font-weight: bold;
  }

  /* Keyword.Constant */
  .highlight .kd {
    font-weight: bold;
  }

  /* Keyword.Declaration */
  .highlight .kn {
    font-weight: bold;
  }

  /* Keyword.Namespace */
  .highlight .kp {
    font-weight: bold;
  }

  /* Keyword.Pseudo */
  .highlight .kr {
    font-weight: bold;
  }

  /* Keyword.Reserved */
  .highlight .kt {
    color: #445588;
    font-weight: bold;
  }

  /* Keyword.Type */
  .highlight .m {
    color: #009999;
  }

  /* Literal.Number */
  .highlight .s {
    color: #bb8844;
  }

  /* Literal.String */
  .highlight .na {
    color: #008080;
  }

  /* Name.Attribute */
  .highlight .nb {
    color: #999999;
  }

  /* Name.Builtin */
  .highlight .nc {
    color: #445588;
    font-weight: bold;
  }

  /* Name.Class */
  .highlight .no {
    color: #008080;
  }

  /* Name.Constant */
  .highlight .ni {
    color: #800080;
  }

  /* Name.Entity */
  .highlight .ne {
    color: #990000;
    font-weight: bold;
  }

  /* Name.Exception */
  .highlight .nf {
    color: #990000;
    font-weight: bold;
  }

  /* Name.Function */
  .highlight .nn {
    color: #555555;
  }

  /* Name.Namespace */
  .highlight .nt {
    color: #000080;
  }

  /* Name.Tag */
  .highlight .nv {
    color: #008080;
  }

  /* Name.Variable */
  .highlight .ow {
    font-weight: bold;
  }

  /* Operator.Word */
  .highlight .w {
    color: #bbbbbb;
  }

  /* Text.Whitespace */
  .highlight .mb {
    color: #009999;
  }

  /* Literal.Number.Bin */
  .highlight .mf {
    color: #009999;
  }

  /* Literal.Number.Float */
  .highlight .mh {
    color: #009999;
  }

  /* Literal.Number.Hex */
  .highlight .mi {
    color: #009999;
  }

  /* Literal.Number.Integer */
  .highlight .mo {
    color: #009999;
  }

  /* Literal.Number.Oct */
  .highlight .sa {
    color: #bb8844;
  }

  /* Literal.String.Affix */
  .highlight .sb {
    color: #bb8844;
  }

  /* Literal.String.Backtick */
  .highlight .sc {
    color: #bb8844;
  }

  /* Literal.String.Char */
  .highlight .dl {
    color: #bb8844;
  }

  /* Literal.String.Delimiter */
  .highlight .sd {
    color: #bb8844;
  }

  /* Literal.String.Doc */
  .highlight .s2 {
    color: #bb8844;
  }

  /* Literal.String.Double */
  .highlight .se {
    color: #bb8844;
  }

  /* Literal.String.Escape */
  .highlight .sh {
    color: #bb8844;
  }

  /* Literal.String.Heredoc */
  .highlight .si {
    color: #bb8844;
  }

  /* Literal.String.Interpol */
  .highlight .sx {
    color: #bb8844;
  }

  /* Literal.String.Other */
  .highlight .sr {
    color: #808000;
  }

  /* Literal.String.Regex */
  .highlight .s1 {
    color: #bb8844;
  }

  /* Literal.String.Single */
  .highlight .ss {
    color: #bb8844;
  }

  /* Literal.String.Symbol */
  .highlight .bp {
    color: #999999;
  }

  /* Name.Builtin.Pseudo */
  .highlight .fm {
    color: #990000;
    font-weight: bold;
  }

  /* Name.Function.Magic */
  .highlight .vc {
    color: #008080;
  }

  /* Name.Variable.Class */
  .highlight .vg {
    color: #008080;
  }

  /* Name.Variable.Global */
  .highlight .vi {
    color: #008080;
  }

  /* Name.Variable.Instance */
  .highlight .vm {
    color: #008080;
  }

  /* Name.Variable.Magic */
  .highlight .il {
    color: #009999;
  }
}

@media (prefers-color-scheme: dark) {
  .gallery.invert-dark,
  img.invert-dark,
  picture.invert-dark,
  picture.invert-dark img,
  figure.invert-dark,
  figure.invert-dark img,
  figure.invert-dark picture {
    filter: invert(1) hue-rotate(180deg);
  }
}

figure.figureChart {
  margin: 1em auto;
  text-align: center;
}
@media screen and (min-width: 600px) {
  figure.figureChart {
    width: 60%;
  }
  figure.figureChart figcaption {
    font-size: 0.9rem;
    /* Adjust font size for the caption */
  }
}

.book-viewer {
  width: 90%;
  border: 2px solid #ccc;
  margin: 20px auto;
  position: relative;
}

.book-viewer-navigation {
  text-align: center;
}

.book-viewer-button {
  padding: 0.2em;
  margin: 0 5px;
}

@media print {
  .collection.body {
    background: none;
    padding: 0;
  }

  .collection time a {
    text-decoration: none;
  }

  .gallery {
    page-break-inside: avoid;
  }

  img {
    margin: 0;
    padding: 0;
    page-break-inside: avoid;
  }
}