@font-face {
  font-family: 'Berkeley Mono';
  src: url('../fonts/BerkeleyMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Commit Mono';
  src: url('../fonts/CommitMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block; /* Changed from swap to block to prevent FOUT */
}

@font-face {
  font-family: 'Maple Mono';
  src: url('../fonts/MapleMono-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: block; /* Changed from swap to block to prevent FOUT */
}

:root {
  /* ========================================
     Golden Ratio Design System (φ ≈ 1.618)
     ======================================== */

  /* Base unit: 1rem = 16px */
  --base-unit: 1rem;

  /* Spacing scale using golden ratio */
  /* Each level ≈ previous × φ */
  --space-xs: calc(var(--base-unit) * 0.382);   /* ~6px */
  --space-sm: calc(var(--base-unit) * 0.618);   /* ~10px */
  --space-md: calc(var(--base-unit) * 1);       /* ~16px */
  --space-lg: calc(var(--base-unit) * 1.618);   /* ~26px */
  --space-xl: calc(var(--base-unit) * 2.618);   /* ~42px */
  --space-xxl: calc(var(--base-unit) * 4.236);  /* ~68px */

  /* Derived spacing values for consistent layout */
  --content-spacing: var(--space-lg);      /* Space between nav and content */
  --section-gap: var(--space-xl);          /* Space between major sections */
  --heading-margin-top: var(--space-xl);   /* Space above headings */
  --heading-margin-bottom: var(--space-lg);/* Space below headings */
  
  /* Component spacing */
  --button-padding-vertical: 5px;
  --button-padding-horizontal: 10px;
  --video-aspect-ratio: 56.25%; /* 16:9 */
  --border-width-thin: 4px;
  --border-width-thick: 5px;

  /* Typography */
  --font-primary: 'Berkeley Mono', monospace;
  --font-code: 'Berkeley Mono', monospace;
  --font-italic: 'Maple Mono', monospace;

  /* Responsive Typography (default: desktop) */
  --body-font-size: 1em;
  --h1-size: 1.8em;
  --h2-size: 1.5em;
  --h3-size: 1.3em;
  --h4-size: 1.2em;
  --h5-size: 1.1em;
  --h6-size: 1.05em;

  /* Responsive Layout (default: desktop) */
  --body-padding: var(--space-lg);
  --nav-padding: var(--space-sm);
  --footer-padding: var(--space-md);
  --profile-header-direction: row;
  --profile-header-align: center;
  --profile-header-text-align: left;
  --profile-header-gap: var(--space-xl);
  --profile-photo-size: calc(var(--space-xxl) * 1.765);
  --about-gap: var(--space-xl);

  /* ========================================
     Zenbones Color Palette
     https://github.com/zenbones-theme/zenbones.nvim
     ======================================== */

  /* Light Theme Colors (Zenbones Light) */
  --light-bg: #F0EDEC;      /* sand */
  --light-fg: #2C363C;      /* stone */
  --light-fg-dim: #6F777B;  /* stone (dimmed) */
  --light-fg-muted: #859289;/* stone (muted) */
  
  /* Palette */
  --light-wood: #A86638;
  --light-rose: #A8334C;
  --light-leaf: #4F894C;
  --light-water: #286486;
  --light-blossom: #88507D;
  --light-sky: #2679A8;

  /* UI Elements */
  --light-link: var(--light-water);
  --light-link-visited: #5F879E;
  --light-meta-bg: #EAE6E4;
  --light-button-bg: #DCD8D6;
  --light-button-hover-bg: #CFCBC9;
  --light-border: #C0BCBA;
  
  /* Callouts & Semantics */
  --light-note-border: var(--light-water);
  --light-note-bg: #DFEBF1;
  --light-warn-border: var(--light-wood);
  --light-warn-bg: #F2E7E2;
  --light-tip-border: var(--light-leaf);
  --light-tip-bg: #E4EFE3;
  --light-imp-border: var(--light-rose);
  --light-imp-bg: #F0E0E3;
  --light-example-border: var(--light-blossom);
  --light-example-bg: #E9E9E9;

  /* Syntax Highlighting (Monochrome/Modest) */
  --light-syntax-k: var(--light-fg);
  --light-syntax-c: var(--light-fg-muted);
  --light-syntax-s: var(--light-fg-dim);
  --light-syntax-n: var(--light-fg);
  --light-syntax-const: var(--light-fg);
  --light-syntax-fn: var(--light-fg);
  --light-syntax-bg: var(--light-bg);
  --light-font-weight: 350;
  --light-menu-link-bg: rgba(0, 0, 0, 0.05);

  /* Dark Theme Colors (Zenbones Dark) */
  --dark-bg: #1C1917;       /* sand */
  --dark-fg: #B4BDC3;       /* stone */
  --dark-fg-dim: #8E969B;   /* stone (dimmed) */
  --dark-fg-muted: #6C7377; /* stone (muted) */

  /* Palette */
  --dark-wood: #B77E64;
  --dark-rose: #DE6E7C;
  --dark-leaf: #819B69;
  --dark-water: #6099C0;
  --dark-blossom: #C791C3;
  --dark-sky: #709CB8;

  /* UI Elements */
  --dark-link: var(--dark-water);
  --dark-link-visited: #4A7691;
  --dark-meta-bg: #252220;
  --dark-button-bg: #2F2C2A;
  --dark-button-hover-bg: #3A3735;
  --dark-border: #353230;

  /* Callouts & Semantics */
  --dark-note-border: var(--dark-water);
  --dark-note-bg: #1E2529;
  --dark-warn-border: var(--dark-wood);
  --dark-warn-bg: #29221E;
  --dark-tip-border: var(--dark-leaf);
  --dark-tip-bg: #21251E;
  --dark-imp-border: var(--dark-rose);
  --dark-imp-bg: #291E1F;
  --dark-example-border: var(--dark-blossom);
  --dark-example-bg: #22201F;

  /* Syntax Highlighting (Monochrome/Modest) */
  --dark-syntax-k: var(--dark-fg);
  --dark-syntax-c: var(--dark-fg-muted);
  --dark-syntax-s: var(--dark-fg-dim);
  --dark-syntax-n: var(--dark-fg);
  --dark-syntax-const: var(--dark-fg);
  --dark-syntax-fn: var(--dark-fg);
  --dark-syntax-bg: var(--dark-bg);
  --dark-font-weight: 200;
  --dark-menu-link-bg: rgba(255, 255, 255, 0.05);

  /* Active Theme (Default: Light) */
  --bg: var(--light-bg);
  --fg: var(--light-fg);
  --fg-dim: var(--light-fg-dim);
  --fg-muted: var(--light-fg-muted);
  --link: var(--light-link);
  --link-visited: var(--light-link-visited);
  --meta-bg: var(--light-meta-bg);
  --button-bg: var(--light-button-bg);
  --button-hover-bg: var(--light-button-hover-bg);
  --border: var(--light-border);
  --callout-bg: var(--light-meta-bg);
  --note-border: var(--light-note-border);
  --note-bg: var(--light-note-bg);
  --warn-border: var(--light-warn-border);
  --warn-bg: var(--light-warn-bg);
  --tip-border: var(--light-tip-border);
  --tip-bg: var(--light-tip-bg);
  --imp-border: var(--light-imp-border);
  --imp-bg: var(--light-imp-bg);
  --example-border: var(--light-example-border);
  --example-bg: var(--light-example-bg);
  --info-border: var(--note-border);
  --info-bg: var(--note-bg);
  --quote-border: var(--fg-dim);
  --quote-bg: var(--meta-bg);
  --syntax-k: var(--light-syntax-k);
  --syntax-c: var(--light-syntax-c);
  --syntax-s: var(--light-syntax-s);
  --syntax-n: var(--light-syntax-n);
  --syntax-const: var(--light-syntax-const);
  --syntax-fn: var(--light-syntax-fn);
  --syntax-bg: var(--light-bg);
  --font-weight-body: var(--light-font-weight);
  --menu-link-bg: var(--light-menu-link-bg);

  /* Pagefind Theme */
  --pagefind-ui-primary: var(--link);
  --pagefind-ui-text: var(--fg);
  --pagefind-ui-background: var(--bg);
  --pagefind-ui-border: var(--border);
  --pagefind-ui-tag: var(--meta-bg);
  --pagefind-ui-font: var(--font-primary);

  /* Responsive Breakpoints - Tablet (max-width: 768px) */
  @media screen and (max-width: 768px) {
    --body-font-size: 0.95em;
    --body-padding: var(--space-sm) var(--space-lg);
    --nav-padding: var(--space-sm);
    --footer-padding: var(--space-sm);
    --h1-size: 1.7em;
    --h2-size: 1.4em;
    --h3-size: 1.2em;
    --h4-size: 1.05em;
    --h5-size: 1em;
    --h6-size: 0.95em;
    --profile-header-direction: column;
    --profile-header-text-align: center;
    --profile-header-gap: var(--space-lg);
    --profile-photo-size: calc(var(--space-xxl) * 1.2);
    --about-gap: var(--space-lg);
  }

  /* Responsive Breakpoints - Medium Phone (max-width: 600px) */
  @media screen and (max-width: 600px) {
    --body-font-size: 0.90em;
    --body-padding: var(--space-xs) var(--space-md);
    --footer-padding: var(--space-xs);
    --h1-size: 1.6em;
    --h2-size: 1.3em;
    --h3-size: 1.1em;
    --h4-size: 1em;
    --h5-size: 0.95em;
    --h6-size: 0.9em;
    --profile-header-gap: var(--space-md);
  }

  /* Responsive Breakpoints - Small Phone (max-width: 480px) */
  @media screen and (max-width: 480px) {
    --body-font-size: 0.85em;
    --body-padding: var(--space-xs) var(--space-md);
    --footer-padding: var(--space-sm) var(--space-xs);
    --h1-size: 1.5em;
    --h2-size: 1.2em;
    --h3-size: 1em;
    --h4-size: 0.95em;
    --h5-size: 0.9em;
    --h6-size: 0.85em;
    --profile-header-gap: var(--space-sm);
  }

  /* Responsive Breakpoints - Landscape Phone */
  @media screen and (max-height: 430px) and (orientation: landscape) {
    --body-font-size: 0.90em;
    --body-padding: var(--space-xs) var(--space-md);
    --nav-padding: var(--space-xs);
    --footer-padding: var(--space-xs);
    --h1-size: 1.6em;
    --h2-size: 1.3em;
    --h3-size: 1.1em;
    --h4-size: 1em;
    --h5-size: 0.95em;
    --h6-size: 0.9em;
  }
}

/* Dark Mode (System Preference) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--dark-bg);
    --fg: var(--dark-fg);
    --fg-dim: var(--dark-fg-dim);
    --fg-muted: var(--dark-fg-muted);
    --link: var(--dark-link);
    --link-visited: var(--dark-link-visited);
    --meta-bg: var(--dark-meta-bg);
    --button-bg: var(--dark-button-bg);
    --button-hover-bg: var(--dark-button-hover-bg);
    --border: var(--dark-border);
    --callout-bg: var(--dark-meta-bg);
    --note-border: var(--dark-note-border);
    --note-bg: var(--dark-note-bg);
    --warn-border: var(--dark-warn-border);
    --warn-bg: var(--dark-warn-bg);
    --tip-border: var(--dark-tip-border);
    --tip-bg: var(--dark-tip-bg);
    --imp-border: var(--dark-imp-border);
    --imp-bg: var(--dark-imp-bg);
    --example-border: var(--dark-example-border);
    --example-bg: var(--dark-example-bg);
    --syntax-k: var(--dark-syntax-k);
    --syntax-c: var(--dark-syntax-c);
    --syntax-s: var(--dark-syntax-s);
    --syntax-n: var(--dark-syntax-n);
    --syntax-const: var(--dark-syntax-const);
    --syntax-fn: var(--dark-syntax-fn);
    --syntax-bg: var(--dark-bg);
    --font-weight-body: var(--dark-font-weight);
    --menu-link-bg: var(--dark-menu-link-bg);
  }
}

/* Manual Dark Mode Toggle */
body.dark {
  --bg: var(--dark-bg);
  --fg: var(--dark-fg);
  --fg-dim: var(--dark-fg-dim);
  --fg-muted: var(--dark-fg-muted);
  --link: var(--dark-link);
  --link-visited: var(--dark-link-visited);
  --meta-bg: var(--dark-meta-bg);
  --button-bg: var(--dark-button-bg);
  --button-hover-bg: var(--dark-button-hover-bg);
  --border: var(--dark-border);
  --callout-bg: var(--dark-meta-bg);
  --note-border: var(--dark-note-border);
  --note-bg: var(--dark-note-bg);
  --warn-border: var(--dark-warn-border);
  --warn-bg: var(--dark-warn-bg);
  --tip-border: var(--dark-tip-border);
  --tip-bg: var(--dark-tip-bg);
  --imp-border: var(--dark-imp-border);
  --imp-bg: var(--dark-imp-bg);
  --example-border: var(--dark-example-border);
  --example-bg: var(--dark-example-bg);
  --syntax-k: var(--dark-syntax-k);
  --syntax-c: var(--dark-syntax-c);
  --syntax-s: var(--dark-syntax-s);
  --syntax-n: var(--dark-syntax-n);
  --syntax-const: var(--dark-syntax-const);
  --syntax-fn: var(--dark-syntax-fn);
  --syntax-bg: var(--dark-bg);
  --font-weight-body: var(--dark-font-weight);
  --menu-link-bg: var(--dark-menu-link-bg);
}

/* Manual Light Mode Toggle */
body.light {
  --bg: var(--light-bg);
  --fg: var(--light-fg);
  --fg-dim: var(--light-fg-dim);
  --fg-muted: var(--light-fg-muted);
  --link: var(--light-link);
  --link-visited: var(--light-link-visited);
  --meta-bg: var(--light-meta-bg);
  --button-bg: var(--light-button-bg);
  --button-hover-bg: var(--light-button-hover-bg);
  --border: var(--light-border);
  --callout-bg: var(--light-meta-bg);
  --note-border: var(--light-note-border);
  --note-bg: var(--light-note-bg);
  --warn-border: var(--light-warn-border);
  --warn-bg: var(--light-warn-bg);
  --tip-border: var(--light-tip-border);
  --tip-bg: var(--light-tip-bg);
  --imp-border: var(--light-imp-border);
  --imp-bg: var(--light-imp-bg);
  --example-border: var(--light-example-border);
  --example-bg: var(--light-example-bg);
  --syntax-k: var(--light-syntax-k);
  --syntax-c: var(--light-syntax-c);
  --syntax-s: var(--light-syntax-s);
  --syntax-n: var(--light-syntax-n);
  --syntax-const: var(--light-syntax-const);
  --syntax-fn: var(--light-syntax-fn);
  --syntax-bg: var(--light-bg);
  --font-weight-body: var(--light-font-weight);
  --menu-link-bg: var(--light-menu-link-bg);
}

/* Prevent FOUC transitions */
body.preload,
body.preload * {
  transition: none !important;
  animation: none !important;
}

/* ========================================
   Base Elements
   ======================================== */

body {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-body);
  font-variation-settings: 'wght' var(--font-weight-body);
  font-size: var(--body-font-size);
  max-width: 800px;
  margin: auto;
  padding: var(--body-padding);
  line-height: 1.5;
  background-color: var(--bg);
  color: var(--fg);
  transition: background-color 0.3s ease, color 0.3s ease;
  /* Force stable layout during font loading */
  text-rendering: optimizeSpeed;
}

a {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 0.2em;

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

  &:hover {
    text-decoration: underline;
    filter: brightness(1.2);
  }
}

/* Exclude icons and UI elements from visited styling */
.menu a:visited,
.project-card:visited,
.taxonomy-cloud li a:visited,
.load-comments-btn:visited {
  color: inherit;
}

.footer-icons a:visited,
.pagefind-ui .pagefind-ui__result-link:visited {
  color: var(--link);
}

code, pre {
  font-family: var(--font-code);
  font-weight: var(--font-weight-body);
  font-variation-settings: 'wght' var(--font-weight-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 700;
  font-variation-settings: 'wght' 700;
  color: var(--fg);
  margin-top: var(--heading-margin-top);
  margin-bottom: var(--heading-margin-bottom);
}

h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }
h5 { font-size: var(--h5-size); }
h6 { font-size: var(--h6-size); }

strong, b {
  font-weight: 700;
  font-variation-settings: 'wght' 700;
}

/* ========================================
   Navigation
   ======================================== */

nav {
  background-color: var(--meta-bg);
  padding: var(--nav-padding);
  margin-bottom: var(--content-spacing);
  /* Prevent layout shifts during font loading (Firefox fix) */
  contain: layout;
  will-change: auto;
  /* Ensure search dropdown appears above main content */
  position: relative;
  z-index: 100;
}

.menu {
  padding: 0;
  display: flex;
  gap: 0.8em;
  align-items: center;
  text-align: center;

  & li {
    display: inline-block;
    margin: 0;
  }

  & a {
    text-decoration: none;
    background: var(--button-bg);
    color: var(--fg);
    padding: var(--button-padding-vertical) var(--button-padding-horizontal);
    border-radius: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
    -webkit-appearance: none;
    -webkit-user-select: none;
    font-weight: var(--font-weight-body);
    font-variation-settings: 'wght' var(--font-weight-body);
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;

    &.active, &:hover {
      background-color: var(--link);
      color: var(--bg);
      filter: none;
    }
  }
}

#theme-toggle {
  color: var(--fg) !important;
  transition: color 0.3s ease;
  -webkit-appearance: none;
  -webkit-user-select: none;
  font-weight: var(--font-weight-body);
  font-variation-settings: 'wght' var(--font-weight-body);
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
}

/* ========================================
   Article Meta
   ======================================== */

.article-meta {
  text-decoration: none;
  background: transparent;
  color: var(--fg);
  padding: 0;
  border-radius: 0;
  margin-bottom: var(--content-spacing);
  text-align: center;

  & h1 {
    margin: 0.2em 0 0.2em 0;
  }
}

.article-meta-info {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 1em;
  font-family: var(--font-primary);
  font-size: 0.9em;
  color: var(--fg-dim);
  flex-wrap: wrap;
}

.article-tags {
  margin-top: 0;
  font-size: 1em;
  font-family: var(--font-primary);

  & a {
    margin-right: 0.5em;
  }
}

/* ========================================
   Footer
   ======================================== */

footer {
  margin-top: var(--section-gap);
  background-color: var(--meta-bg);
  padding: var(--footer-padding);
  text-align: center;
  font-size: 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.footer-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5em;
  flex-wrap: wrap;
  margin-top: 0;
}

.footer-icons {
  display: flex;
  align-items: center;

  & a {
    margin: 0 0.5em;
    text-decoration: none !important;
    border-bottom: none !important;
    display: flex;
    align-items: center;
  }
}

.footer-text {
  color: var(--fg);
}

.title { font-size: 1.1em; }

/* ========================================
   Homepage & Sections
   ======================================== */

section {
  margin-bottom: var(--section-gap);
}

/* Post List */
.post-list {
  list-style: none;
  padding: 0;
  margin: 0;

  & li {
    margin-bottom: 0.5em;
    display: flex;
    gap: 1em;
    align-items: baseline;
  }

  & .date {
    font-family: var(--font-primary);
    color: var(--fg);
    font-size: 0.9em;
    flex-shrink: 0;
  }
}

/* Project Grid */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1em;
}

.project-card {
  background: var(--button-bg);
  padding: 1em;
  text-decoration: none !important;
  color: var(--fg);
  display: block;

  &:hover {
    background: var(--link);
    color: var(--bg);
    filter: none;

    & .project-header strong,
    & .project-desc {
      color: var(--bg);
    }
  }
}

.project-header strong {
  font-family: var(--font-primary);
  font-size: 1.1em;
  color: var(--link);
  display: block;
  margin-bottom: 0.5em;
}

.project-desc {
  margin: 0;
  font-size: 0.9em;
  color: var(--fg-dim);
  line-height: 1.4;
}

/* About Section */
.about-flex {
  display: flex;
  gap: var(--about-gap);
  align-items: flex-start;
  flex-wrap: wrap;
}

.about-photo {
  width: calc(var(--space-xxl) * 1.176);
  height: calc(var(--space-xxl) * 1.176);
  border-radius: 50%;
  flex-shrink: 0;
}

.about-content {
  flex: 1;
  min-width: 250px;

  & p {
    margin-top: 0;
    hyphens: none;
  }
}

/* ========================================
   Profile Header
   ======================================== */

.profile-header {
  display: flex;
  flex-direction: var(--profile-header-direction);
  gap: var(--profile-header-gap);
  align-items: var(--profile-header-align);
  text-align: var(--profile-header-text-align);
  margin-top: var(--content-spacing);
  margin-bottom: var(--section-gap);
  padding: var(--space-lg);
  background: var(--meta-bg);
  border-left: var(--border-width-thick) solid var(--warn-border);
}

.profile-photo {
  width: var(--profile-photo-size);
  height: var(--profile-photo-size);
  border-radius: 50%;
  object-fit: cover;
}

.profile-info {
  & h1 {
    margin-top: 0;
    margin-bottom: 0.2em;
    font-size: 1.5em;
  }

  & .role {
    font-size: 1.1em;
    color: var(--fg);
    margin: 0;
  }

  & .location {
    color: var(--fg);
    margin: 0.2em 0 0 0;
    font-family: var(--font-primary);
    font-size: 0.9em;
  }

  & .email {
    margin: 0.2em 0 0 0;
    font-family: var(--font-primary);
    font-size: 0.9em;
  }
}

.profile-bio {
  font-size: 1.1em;
  line-height: 1.6;
  margin-bottom: 3em;
}

/* ========================================
   Main Content
   ======================================== */

main {
  hyphens: auto;
  margin-bottom: var(--section-gap);

  & em, & i {
    font-family: var(--font-italic);
    font-style: italic;
  }
}

img, iframe, video { max-width: 100%; }

hr {
  border: none;
  background: none;
  text-align: center;
  margin: var(--section-gap) 0 var(--space-lg) 0;
  padding: 0;
  height: auto;
  color: var(--warn-border);
  font-size: 1em;
  line-height: 1;

  &::after {
    content: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━";
    display: block;
    letter-spacing: 0;
    word-break: break-all;
  }
}

/* ========================================
   Table of Contents
   ======================================== */

.table-of-contents {
  background: var(--meta-bg);
  padding: var(--space-lg);
  margin-bottom: var(--section-gap);
  border-left: var(--border-width-thin) solid var(--info-border);
  position: relative;
  z-index: 1;

  & .toc-title {
    font-family: var(--font-primary);
    font-weight: 700;
    font-variation-settings: 'wght' 700;
    font-size: 1.1em;
    margin-bottom: 0.5em;
    display: flex;
    align-items: center;
    gap: 0.5em;
    color: var(--fg);
  }

  & nav ul {
    list-style: none;
    padding-left: 1em;
    margin: 0;

    & ul {
      margin-top: 0.4em;
    }

    & li {
      margin-bottom: 0.4em;
    }
  }
}

/* ========================================
   Code Blocks
   ======================================== */

.code-block-wrapper {
  position: relative;
  margin-bottom: var(--space-lg);
  isolation: isolate;
}

.copy-code-button {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  z-index: 2;
  padding: 0.3em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-dim);
  background-color: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  opacity: 1;
  transition: all 0.2s ease;

  & svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
  }

  &:hover {
    background-color: var(--link);
    color: var(--bg);
    opacity: 1;
    filter: none;
  }
}

pre {
  position: relative;
  box-shadow: none;
  padding: 1em;
  overflow-x: auto;
  background-color: var(--meta-bg) !important;
  margin: 0;
  z-index: 1;
  font-size: 1em;
}

/* Compounding contrast for code blocks inside callouts */
blockquote pre, .callout pre, .markdown-alert pre {
  background-color: var(--button-bg) !important;
  font-size: 0.8em;
}

code {
  background-color: var(--meta-bg);
  padding: 0 0.2em;
  font-family: var(--font-code);
  font-weight: 600;
  font-variation-settings: 'wght' 600;
}

/* Compounding contrast for inline code inside callouts */
.callout code, .markdown-alert code {
  background-color: var(--button-bg);
}

/* Compounding contrast for inline code inside search results */
#search .pagefind-ui__result code {
  background-color: var(--button-hover-bg);
}

pre code {
  background-color: transparent;
  padding: 0;
  border: none;
  font-weight: var(--font-weight-body);
  font-variation-settings: 'wght' var(--font-weight-body);
}

/* ========================================
   Featured Image
   ======================================== */

.featured-image {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
  text-align: center;

  & img {
    max-width: 100%;
    height: auto;
  }
}

/* ========================================
   Comments
   ======================================== */

.load-comments-wrapper {
  background-color: var(--meta-bg);
  padding: var(--space-sm);
  text-align: center;
  margin-top: var(--section-gap);
  margin-bottom: var(--section-gap);
}

.load-comments-btn {
  display: inline-block;
  padding: var(--button-padding-vertical) var(--button-padding-horizontal);
  font-family: var(--font-primary);
  font-size: 1em;
  font-weight: var(--font-weight-body);
  background-color: var(--button-bg);
  color: var(--fg);
  border: none;
  cursor: pointer;
  border-radius: 0;
  transition: all 0.2s ease;
  text-decoration: none;

  &:hover {
    background-color: var(--link);
    color: var(--bg);
    filter: none;
  }
}

/* ========================================
   Taxonomy Cloud
   ======================================== */

.taxonomy-cloud {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em;

  & li a {
    background-color: var(--meta-bg);
    border-radius: 0;
    text-decoration: none;
    color: var(--fg);
    font-family: var(--font-primary);
    font-size: 0.9em;
    display: inline-flex;
    overflow: hidden;

    &:hover, &.active {
      background-color: var(--link);
      color: var(--bg);
      filter: none;

      & .term-count {
        background-color: var(--fg);
        color: var(--bg);
        border-left: 1px solid var(--link);
        filter: none;
      }
    }
  }
}

.term-name {
  padding: 0.3em 0.6em;
}

.term-count {
  background-color: var(--border);
  padding: 0.3em 0.6em;
  color: var(--fg);
  border-left: 1px solid var(--meta-bg);
}

/* ========================================
   Tables & Blockquotes
   ======================================== */

blockquote {
  background: var(--meta-bg);
  border-left: var(--border-width-thick) solid var(--border);
  padding: 3px 1em 3px;
}

table {
  margin: auto;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);

  & thead th { border-bottom: 1px solid var(--border); }
  & th, & td { padding: 5px; }
}

thead, tfoot, tr:nth-child(even) { background: var(--meta-bg); }

/* ========================================
   Callouts & Alerts (Shared Styles)
   ======================================== */

.callout,
.markdown-alert {
  border-left: var(--border-width-thin) solid var(--fg-dim);
  padding: var(--space-lg);
  margin: var(--space-lg) 0;
  background: var(--meta-bg);
}

.callout-title,
.markdown-alert-title {
  font-weight: 700;
  font-variation-settings: 'wght' 700;
  font-size: 1.1em;
  margin-bottom: 0.5em;
  font-family: var(--font-primary);
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.callout-icon {
  flex-shrink: 0;
}

.callout-content {
  font-family: var(--font-primary);
  font-style: normal;

  & em, & i {
    font-family: var(--font-italic);
    font-style: italic;
  }

  & code, & pre {
    font-style: normal;
  }
}

/* Compounding contrast for nested callouts */
.callout .callout,
.markdown-alert .markdown-alert,
.callout .markdown-alert,
.markdown-alert .callout {
  background-color: var(--button-bg) !important;
  font-size: 0.9em;
}

/* Compounding contrast for code blocks inside nested callouts */
.callout .callout pre,
.markdown-alert .markdown-alert pre,
.callout .markdown-alert pre,
.markdown-alert .callout pre {
  background-color: var(--button-hover-bg) !important;
}

/* Callout type colors */
.callout-note,
.markdown-alert-note {
  border-left-color: var(--note-border);
}

.callout-warning,
.markdown-alert-warning {
  border-left-color: var(--warn-border);
}

.callout-tip,
.markdown-alert-tip {
  border-left-color: var(--tip-border);
}

.callout-important,
.markdown-alert-important,
.callout-caution,
.markdown-alert-caution {
  border-left-color: var(--imp-border);
}

.callout-example {
  border-left-color: var(--example-border);
}

.callout-hint {
  border-left-color: var(--tip-border);
}

.callout-info {
  border-left-color: var(--info-border);
}

.callout-quote {
  border-left-color: var(--quote-border);

  /* & .callout-title {
    float: left !important;
    display: inline-block !important;
    margin-right: 0.5em;
    margin-bottom: 0;
    vertical-align: middle;
  } */

  & .callout-content > p:first-child {
    margin-top: 0;
  }
}

/* Fallback for blockquotes that Hugo might not parse */
blockquote.callout-note,
blockquote[class*="note"] {
  border-left-color: var(--note-border) !important;
  background: var(--meta-bg) !important;
}

blockquote.callout-warning,
blockquote[class*="warning"] {
  border-left-color: var(--warn-border) !important;
  background: var(--meta-bg) !important;
}

blockquote.callout-tip,
blockquote[class*="tip"] {
  border-left-color: var(--tip-border) !important;
  background: var(--meta-bg) !important;
}

blockquote.callout-important,
blockquote[class*="important"] {
  border-left-color: var(--imp-border) !important;
  background: var(--meta-bg) !important;
}

blockquote.callout-example,
blockquote[class*="example"] {
  border-left-color: var(--example-border) !important;
  background: var(--meta-bg) !important;
}

blockquote.callout-hint,
blockquote[class*="hint"] {
  border-left-color: var(--tip-border) !important;
  background: var(--meta-bg) !important;
}

blockquote.callout-info,
blockquote[class*="info"] {
  border-left-color: var(--info-border) !important;
  background: var(--meta-bg) !important;
}

blockquote.callout-quote,
blockquote[class*="quote"] {
  border-left-color: var(--quote-border) !important;
  background: var(--meta-bg) !important;
}

/* ========================================
   Collapsible Callouts (Details/Summary)
   ======================================== */

details.callout {
  /* Inherit standard callout spacing/borders from shared class */
}

details.callout summary {
  cursor: pointer;
  list-style: none; /* Hide default marker */
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  outline: none;
}

/* Hide default marker in WebKit */
details.callout summary::-webkit-details-marker {
  display: none;
}

/* Custom Chevron */
details.callout summary::after {
  content: "▼";
  display: inline-block;
  margin-left: 0.5em;
  font-size: 0.8em;
  transition: transform 0.2s ease;
  opacity: 0.6;
  color: var(--fg);
}

/* Rotate chevron when closed */
details.callout:not([open]) summary::after {
  transform: rotate(-90deg);
}

/* Tweak title layout in summary */
details.callout summary .callout-title {
  margin-bottom: 0;
  display: flex;
  align-items: center;
}

/* Remove bottom margin from title inside summary when closed */
details.callout:not([open]) .callout-title {
  margin-bottom: 0;
}

/* ========================================
   Syntax Highlighting
   ======================================== */

.chroma {
  color: var(--fg);
  background-color: transparent;

  /* Keywords & Statements */
  & .k, & .kd, & .kn, & .kp, & .kr, & .kt { font-weight: bold; font-variation-settings: 'wght' 700; color: var(--syntax-k); }
  
  /* Constants, Booleans & Pseudo (Rose) */
  & .kc, & .bp, & .ni, & .kp { font-weight: bold; font-variation-settings: 'wght' 700; color: var(--syntax-const); }
  
  /* Built-ins, Special Functions & PreProc (Water) */
  & .nb, & .fm, & .cp { font-weight: bold; font-variation-settings: 'wght' 700; color: var(--syntax-fn); }
  
  /* Types, Classes & Functions (Bold Stone) */
  & .nc, & .nf { font-weight: bold; font-variation-settings: 'wght' 700; color: var(--syntax-n); }

  /* Comments & Multiline Strings (Italics) */
  & .c, & .cm, & .c1, & .cs, & .sd, & .sh { font-style: italic; color: var(--syntax-c); font-family: var(--font-italic); }

  /* Strings (Normal) */
  & .s, & .s1, & .s2, & .sc { color: var(--syntax-s); }

  /* Names, Attributes & Numbers (Normal) */
  & .n, & .na, & .m, & .mi, & .mf, & .mh, & .mo, & .mb, & .il { color: var(--syntax-n); }
  
  /* Operators (Bold) */
  & .o, & .ow { font-weight: bold; font-variation-settings: 'wght' 700; color: var(--syntax-n); }
}

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

/* ========================================
   Search (Pagefind)
   Uses #search for higher specificity.
   !important is still needed for inline style overrides.
   ======================================== */

#search {
  position: relative;

  & .pagefind-ui {
    /* Form container */
    & .pagefind-ui__form {
      position: relative;
      margin: 0;

      &::before,
      & svg {
        display: none;
        content: none;
      }
    }

    /* Search input */
    & .pagefind-ui__search-input {
      -webkit-appearance: none;
      background-color: var(--bg);
      color: var(--fg);
      border: none;
      border-radius: 0;
      font-family: var(--font-primary);
      font-size: 1em;
      font-weight: 400;
      outline: none;
      height: 2em;
      padding: 0 var(--space-lg) 0 var(--space-sm);

      &::before {
        display: none;
        content: none;
      }

      &::placeholder {
        color: var(--fg-dim);
        opacity: 1;
      }
    }

    /* Hide icons and clear button */
    & .pagefind-ui__input-wrapper::before,
    & div[class*="search-input"]::before,
    & .pagefind-ui__search-clear {
      display: none;
      content: none;
    }

    /* Results dropdown */
    & .pagefind-ui__drawer {
      background-color: var(--meta-bg);
      border: none;
      border-radius: 0;
      box-shadow: none;
      position: absolute;
      left: 0;
      right: 0;
      width: auto;
      z-index: 1000;
      padding: var(--space-lg);
      max-height: 60vh;
      overflow-y: auto;
      margin-top: var(--space-sm);
      top: 100%;

      &::before {
        content: "";
        position: absolute;
        top: calc(var(--space-sm) * -1);
        left: calc(var(--space-lg) * -1);
        right: calc(var(--space-lg) * -1);
        height: var(--space-sm);
        background: var(--bg);
      }
    }

    /* Result items */
    & .pagefind-ui__result {
      border: none;
      padding: var(--space-lg);
      margin-bottom: var(--space-lg);
      background: var(--button-bg);
      position: relative;

      &:hover {
        background-color: var(--link);
        color: var(--bg);
        filter: none;

        & .pagefind-ui__result-link,
        & .pagefind-ui__result-excerpt,
        & .pagefind-ui__result-title {
          color: var(--bg);
        }

        & .pagefind-ui__result-link {
          text-decoration: underline;
        }

        & mark {
          background-color: var(--link);
          filter: brightness(1.3);
          color: var(--bg);
        }
      }
    }

    & .pagefind-ui__result-thumb {
      display: none;
    }

    & .pagefind-ui__result-inner {
      margin-top: 0;
    }

    & .pagefind-ui__result-title {
      font-weight: 700;
      font-family: var(--font-primary);
      text-decoration: none;
      color: var(--fg);
    }

    & .pagefind-ui__result-link {
      color: var(--link);
      text-decoration: none;
      text-underline-offset: 0.2em;
    }

    & .pagefind-ui__result-excerpt {
      color: var(--fg);
      font-family: var(--font-primary);
    }

    /* Messages and load more button */
    & .pagefind-ui__message {
      color: var(--fg);
      font-family: var(--font-primary);
      padding: var(--space-xs) 0;
    }

    & .pagefind-ui__button {
      background-color: var(--button-bg);
      border: none;
      color: var(--fg);
      font-family: var(--font-primary);
      font-weight: 400;
      padding: var(--button-padding-vertical) var(--button-padding-horizontal);
      width: auto;
      margin: var(--space-lg) auto;
      display: block;
      cursor: pointer;
      text-decoration: none;
      border-radius: 0;
      transition: all 0.2s ease;

      &:hover {
        background-color: var(--link);
        color: var(--bg);
        filter: none;
      }
    }

    & mark {
      background-color: var(--button-hover-bg);
      color: var(--fg);
      font-weight: bold;
    }
  }
}

/* ========================================
   Video Embeds
   ======================================== */

.video-wrapper {
  position: relative;
  padding-bottom: var(--video-aspect-ratio);
  height: 0;
  overflow: hidden;
  margin-bottom: var(--space-lg);
  background-color: var(--meta-bg);

  & iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}

/* ========================================
   Codapi Interactive Code Snippets
   ======================================== */

/* Codapi container */
codapi-snippet {
  display: block;
  margin-top: 0;
  font-family: var(--font-primary);
}

/* Codapi toolbar - same level as code block */
codapi-toolbar {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-sm);
  background-color: var(--meta-bg);
  border-top: var(--border-width-thin) solid var(--bg);
}

/* Compounding contrast: darker toolbar inside callouts */
.callout codapi-toolbar,
.markdown-alert codapi-toolbar {
  background-color: var(--button-bg);
  border-top-color: var(--meta-bg);
}

/* Codapi buttons - one level darker than toolbar */
codapi-toolbar button,
codapi-toolbar a {
  text-decoration: none;
  background: var(--button-bg);
  color: var(--fg);
  padding: var(--button-padding-vertical) var(--button-padding-horizontal);
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  -webkit-appearance: none;
  -webkit-user-select: none;
  font-weight: var(--font-weight-body);
  font-variation-settings: 'wght' var(--font-weight-body);
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  font-family: var(--font-primary);
  font-size: 1em;
}

/* Compounding contrast: buttons one level darker in callouts */
.callout codapi-toolbar button,
.callout codapi-toolbar a,
.markdown-alert codapi-toolbar button,
.markdown-alert codapi-toolbar a {
  background: var(--button-hover-bg);
}

/* Button hover state - matches navigation */
codapi-toolbar button:hover,
codapi-toolbar a:hover {
  background-color: var(--link);
  color: var(--bg);
  filter: none;
}

/* Status indicator - hidden */
codapi-status {
  display: none;
}

/* Output container - same level as code block and toolbar */
codapi-output {
  display: block;
  background-color: var(--meta-bg);
  border-top: var(--border-width-thin) solid var(--bg);
  min-height: var(--space-lg);
  position: relative;
}

/* Show placeholder text when output is empty */
codapi-output:has(pre > code:empty)::before {
  content: "Click 'Run' to see output";
  color: var(--fg-dim);
  font-style: italic;
  padding: var(--space-sm);
  display: inline-block;
}

/* Hide the empty pre/code when showing placeholder */
codapi-output:has(pre > code:empty) pre {
  display: none;
}

/* Add padding when output has content */
codapi-output:not(:empty) {
  padding: var(--space-sm);
}

/* Compounding contrast: darker output inside callouts */
.callout codapi-output,
.markdown-alert codapi-output {
  background-color: var(--button-bg);
  border-top-color: var(--meta-bg);
}

/* Output pre/code styling */
codapi-output pre {
  margin: 0;
  padding: var(--base-unit);
  background-color: transparent !important;
  border: none;
}

codapi-output code {
  background-color: transparent;
  padding: 0;
  font-weight: 400;
}

/* Hide the close button */
codapi-output a[href="#close"] {
  display: none !important;
}

/* Table output mode */
codapi-output table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;

  & th,
  & td {
    padding: var(--space-sm);
    text-align: left;
    border: 1px solid var(--border);
  }

  & th {
    background-color: var(--button-bg);
    font-weight: 600;
  }

  & tr:nth-child(even) {
    background-color: var(--meta-bg);
  }
}

/* Editable code area styling (when clicking "Edit") */
codapi-snippet pre[contenteditable="true"],
codapi-snippet textarea,
codapi-snippet pre[contenteditable="true"] *,
codapi-snippet textarea * {
  /* Reset text rendering */
  -webkit-text-fill-color: currentColor !important;
  -webkit-text-stroke: none !important;
  text-shadow: none !important;
  text-decoration: none !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  
  /* Set proper styling */
  color: var(--fg) !important;
  caret-color: var(--fg) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-family: var(--font-primary) !important;
}