:root {
  /* Fonts */
  --font-serif: "TeX Gyre Schola", "Century Schoolbook", "New Century Schoolbook", "Century Schoolbook L", Georgia, serif;
  --font-mono: "Courier Prime", "Courier New", monospace;

  /* Colors & Rules (Light Mode Default) */
  --text-color: #111111;
  --bg-color: #ffffff;
  --rule-color: #111111;
  --rule-thin: 1px solid var(--rule-color);
  --rule-thick: 2px solid var(--rule-color);
  --container-max-width: 1080px;
  --link-color: #111111;
  --muted-color: #555555;
  --code-bg: #fafafa;
  --code-border: #000000;
  --inline-code-bg: #f5f5f5;
  --inline-code-border: #000000;
  --blockquote-color: #222222;

  /* Heading & Typography Size Controls (Desktop) */
  --page-title-size: 2.25rem;       /* Site title and article header title */
  --subtitle-size: 1.3rem;          /* Subtitle / role below site title */
  --section-heading-size: 1.45rem;  /* "Recent Posts", "Posts" listing */
  --toc-title-size: 1.25rem;        /* "Contents" title above TOC */
  --h1-size: 1.55rem;               /* Markdown # Heading 1 (Blog articles) */
  --h2-size: 1.35rem;               /* Markdown ## Heading 2 (Blog articles) */
  --h3-size: 1.2rem;                /* Markdown ### Heading 3 (Blog articles) */
  --h4-size: 1.1rem;                /* Markdown #### Heading 4 (Blog articles) */
  --h5-size: 1.05rem;               /* Markdown ##### Heading 5 (Blog articles) */
  --h6-size: 1.0rem;                /* Markdown ###### Heading 6 (Blog articles) */
  --body-font-size: 1.15rem;        /* Paragraph and article body text */

  /* Home Page Article Heading Sizes (Desktop) */
  --home-h1-size: 1.45rem;          /* Home article # Heading 1 (e.g. "About Me") */
  --home-h2-size: 1.30rem;          /* Home article ## Heading 2 */
  --home-h3-size: 1.18rem;          /* Home article ### Heading 3 */
  --home-h4-size: 1.10rem;          /* Home article #### Heading 4 */
  --home-h5-size: 1.05rem;          /* Home article ##### Heading 5 */
  --home-h6-size: 1.00rem;          /* Home article ###### Heading 6 */

  /* Metadata Font Sizes: Date, Author, Read Time (Desktop) */
  --article-subtitle-size: 1.35rem; /* Article header subtitle */
  --article-date-size: 1.15rem;     /* Article header date */
  --article-author-size: 1.15rem;   /* Article header author */
  --article-readtime-size: 1.15rem; /* Article header read time */
  --list-date-size: 1.05rem;        /* Posts listing date */
  --list-readtime-size: 1.05rem;    /* Posts listing read time */

  /* Heading & Typography Size Controls (Mobile <= 640px) */
  --page-title-size-mobile: 1.95rem;
  --subtitle-size-mobile: 1.05rem;
  --section-heading-size-mobile: 1.35rem;
  --h1-size-mobile: 1.4rem;
  --h2-size-mobile: 1.25rem;
  --h3-size-mobile: 1.15rem;
  --body-font-size-mobile: 1.1rem;

  /* Home Page Article Heading Sizes (Mobile <= 640px) */
  --home-h1-size-mobile: 1.35rem;
  --home-h2-size-mobile: 1.20rem;
  --home-h3-size-mobile: 1.10rem;

  /* Metadata Font Sizes: Date, Author, Read Time (Mobile <= 640px) */
  --article-subtitle-size-mobile: 1.1rem;
  --article-date-size-mobile: 1.05rem;
  --article-author-size-mobile: 1.05rem;
  --article-readtime-size-mobile: 1.05rem;
  --list-date-size-mobile: 0.95rem;
}

/* Automatic Dark Mode (switches based on system/browser theme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="sepia"]) {
    color-scheme: dark;
    --text-color: #d6d9e0;
    --bg-color: #24262b;
    --rule-color: #454852;
    --rule-thin: 1px solid var(--rule-color);
    --rule-thick: 2px solid var(--rule-color);
    --link-color: #f0f2f6;
    --muted-color: #9fa2ab;
    --code-bg: #2b2e35;
    --code-border: #454852;
    --inline-code-bg: #30333b;
    --inline-code-border: #454852;
    --blockquote-color: #c8cbd3;
  }
}

/* Explicit data-theme dark override */
html[data-theme="dark"] {
  color-scheme: dark;
  --text-color: #d6d9e0;
  --bg-color: #24262b;
  --rule-color: #454852;
  --rule-thin: 1px solid var(--rule-color);
  --rule-thick: 2px solid var(--rule-color);
  --link-color: #f0f2f6;
  --muted-color: #9fa2ab;
  --code-bg: #2b2e35;
  --code-border: #454852;
  --inline-code-bg: #30333b;
  --inline-code-border: #454852;
  --blockquote-color: #c8cbd3;
}

/* Explicit data-theme sepia override (Solarized / Sepia book theme) */
html[data-theme="sepia"] {
  color-scheme: light;
  --text-color: #3d3226;
  --bg-color: #f8f2e4;
  --rule-color: #ccbea8;
  --rule-thin: 1px solid var(--rule-color);
  --rule-thick: 2px solid var(--rule-color);
  --link-color: #2c231a;
  --muted-color: #7f7261;
  --code-bg: #eee5d3;
  --code-border: #ccbea8;
  --inline-code-bg: #ebe1cd;
  --inline-code-border: #ccbea8;
  --blockquote-color: #544534;
}

/* Explicit data-theme light override */
html[data-theme="light"] {
  color-scheme: light;
  --text-color: #111111;
  --bg-color: #ffffff;
  --rule-color: #111111;
  --rule-thin: 1px solid var(--rule-color);
  --rule-thick: 2px solid var(--rule-color);
  --link-color: #111111;
  --muted-color: #555555;
  --code-bg: #fafafa;
  --code-border: #000000;
  --inline-code-bg: #f5f5f5;
  --inline-code-border: #000000;
  --blockquote-color: #222222;
}

/* Apply Mobile Size Variables on Small Devices */
@media (max-width: 640px) {
  :root {
    --page-title-size: var(--page-title-size-mobile);
    --subtitle-size: var(--subtitle-size-mobile);
    --section-heading-size: var(--section-heading-size-mobile);
    --h1-size: var(--h1-size-mobile);
    --h2-size: var(--h2-size-mobile);
    --h3-size: var(--h3-size-mobile);
    --home-h1-size: var(--home-h1-size-mobile);
    --home-h2-size: var(--home-h2-size-mobile);
    --home-h3-size: var(--home-h3-size-mobile);
    --body-font-size: var(--body-font-size-mobile);
    --article-subtitle-size: var(--article-subtitle-size-mobile);
    --article-date-size: var(--article-date-size-mobile);
    --article-author-size: var(--article-author-size-mobile);
    --article-readtime-size: var(--article-readtime-size-mobile);
    --list-date-size: var(--list-date-size-mobile);
    --list-readtime-size: var(--list-readtime-size-mobile);
  }
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Links */
a {
  color: var(--link-color);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

a:hover {
  text-decoration: underline;
}

/* LaTeX-styled Theme Toggle (Light / Sepia / Dark) */
.theme-toggle {
  position: fixed;
  top: 1.5rem;
  right: 1.75rem;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background-color: var(--bg-color);
  color: var(--text-color);
  border: 1px solid var(--rule-color);
  border-radius: 0;
  cursor: pointer;
  padding: 0;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.theme-toggle:hover {
  background-color: var(--code-bg);
}

.theme-toggle svg {
  width: 17px;
  height: 17px;
  display: none;
}

/* Default (Light Mode): show sun icon */
.theme-toggle .sun-icon {
  display: block;
}

/* System Dark Mode (when no explicit theme set): show moon icon */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="sepia"]) .theme-toggle .sun-icon {
    display: none;
  }
  :root:not([data-theme="light"]):not([data-theme="sepia"]) .theme-toggle .book-icon {
    display: none;
  }
  :root:not([data-theme="light"]):not([data-theme="sepia"]) .theme-toggle .moon-icon {
    display: block;
  }
}

/* Explicit Light Theme */
[data-theme="light"] .theme-toggle .sun-icon {
  display: block;
}
[data-theme="light"] .theme-toggle .book-icon {
  display: none;
}
[data-theme="light"] .theme-toggle .moon-icon {
  display: none;
}

/* Explicit Sepia Theme */
[data-theme="sepia"] .theme-toggle .sun-icon {
  display: none;
}
[data-theme="sepia"] .theme-toggle .book-icon {
  display: block;
}
[data-theme="sepia"] .theme-toggle .moon-icon {
  display: none;
}

/* Explicit Dark Theme */
[data-theme="dark"] .theme-toggle .sun-icon {
  display: none;
}
[data-theme="dark"] .theme-toggle .book-icon {
  display: none;
}
[data-theme="dark"] .theme-toggle .moon-icon {
  display: block;
}

/* Common Header */
.site-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.site-title {
  font-family: var(--font-serif);
  font-size: var(--page-title-size);
  font-weight: 700;
  margin: 0 0 0.25rem 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

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

.site-title a:hover {
  text-decoration: none;
}

.site-subtitle {
  font-family: var(--font-serif);
  font-size: var(--subtitle-size);
  color: var(--text-color);
  margin: 0;
}

/* Common Navigation */
.site-nav {
  border-top: var(--rule-thin);
  border-bottom: var(--rule-thin);
  padding: 0.85rem 0;
  margin: 1.75rem 0 2.5rem 0;
}

.nav-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3.5rem;
  flex-wrap: wrap;
}

.nav-item {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--text-color);
  text-decoration: none;
  white-space: nowrap;
}

.nav-item:hover {
  text-decoration: underline;
}

.nav-item.active {
  font-weight: 600;
}

/* Common Footer */
.site-footer {
  border-top: var(--rule-thin);
  padding-top: 1.75rem;
  margin-top: 3.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.footer-tagline {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  margin: 0 0 0.85rem 0;
  color: var(--text-color);
  line-height: 1.5;
}

.footer-copyright {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--text-color);
  margin: 0;
}

/* Home Page Layout */
.home-container {
  width: 100%;
}

.home-about-section {
  width: 100%;
}

.home-divider {
  border: none;
  border-top: var(--rule-thin);
  margin: 3rem 0 2.5rem 0;
  display: block;
}

.home-recent-posts {
  width: 100%;
}

/* Home Page Article Headings (Customizable via --home-h1-size .. --home-h6-size) */
.home-about-content h1,
.home-about-content h2,
.home-about-content h3,
.home-about-content h4,
.home-about-content h5,
.home-about-content h6 {
  font-family: var(--font-serif);
  color: var(--text-color);
  font-weight: 700;
  margin-top: 1.75rem;
  margin-bottom: 0.65rem;
  line-height: 1.3;
  text-align: left;
}

.home-about-content h1:first-child,
.home-about-content h2:first-child,
.home-about-content h3:first-child {
  margin-top: 0;
  margin-bottom: 1rem;
}

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

/* Section Headings (e.g. "Recent Posts", "Posts" listing) */
.section-heading {
  font-family: var(--font-serif);
  font-size: var(--section-heading-size);
  font-weight: 700;
  margin: 0 0 1rem 0;
  color: var(--text-color);
  line-height: 1.3;
}

/* Right-Aligned Heading Metadata (Dates, Tech Stacks) */
h1:has(.heading-meta, .meta-right, .meta),
h2:has(.heading-meta, .meta-right, .meta),
h3:has(.heading-meta, .meta-right, .meta),
h4:has(.heading-meta, .meta-right, .meta),
h5:has(.heading-meta, .meta-right, .meta),
h6:has(.heading-meta, .meta-right, .meta) {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

.heading-meta,
.meta-right,
h1 .meta,
h2 .meta,
h3 .meta,
h4 .meta,
h5 .meta,
h6 .meta {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 400;
  font-style: italic;
  color: var(--muted-color);
  margin-left: auto;
  text-align: right;
  white-space: normal;
  display: inline-block;
}

.home-about-content {
  font-size: var(--body-font-size);
  line-height: 1.75;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.home-about-content p {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.recent-posts-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

.recent-post-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.recent-post-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 0.2rem 0;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.recent-post-title a {
  color: var(--text-color);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-post-summary {
  font-size: 1.05rem;
  color: var(--muted-color);
  margin: 0;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Posts Listing Page */
.posts-page-header {
  margin-bottom: 1.5rem;
}

.posts-list-container {
  display: flex;
  flex-direction: column;
}

.post-item-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.15rem 0;
}

.post-thumbnail-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.post-thumbnail {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 1px solid var(--rule-color);
  display: block;
}

.post-thumbnail-placeholder {
  width: 56px;
  height: 56px;
  border: 1px solid var(--rule-color);
  background-color: transparent;
  display: block;
}

.post-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.post-info-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 0.2rem 0;
  line-height: 1.35;
}

.post-info-title a {
  color: var(--text-color);
}

.post-info-summary {
  font-size: 1.05rem;
  color: var(--muted-color);
  margin: 0;
  line-height: 1.45;
}

.post-meta-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: center;
  white-space: nowrap;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--text-color);
  flex-shrink: 0;
}

.post-meta-date {
  font-family: var(--font-serif);
  font-size: var(--list-date-size);
}

.post-meta-readtime {
  font-family: var(--font-serif);
  font-size: var(--list-readtime-size);
  color: var(--muted-color);
}

/* Blog Article / Single Post Page */
.article-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.article-title {
  font-family: var(--font-serif);
  font-size: var(--page-title-size);
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
}

.article-subtitle {
  font-family: var(--font-serif);
  font-size: var(--article-subtitle-size);
  color: var(--muted-color);
  margin: 0 0 0.65rem 0;
  line-height: 1.4;
  font-style: italic;
}

.article-meta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  color: var(--text-color);
}

.article-date {
  font-family: var(--font-serif);
  font-size: var(--article-date-size);
}

.article-author {
  font-family: var(--font-serif);
  font-size: var(--article-author-size);
}

.article-readtime {
  font-family: var(--font-serif);
  font-size: var(--article-readtime-size);
}

/* Table of Contents */
.toc-section {
  margin: 2rem 0 1.5rem 0;
}

.toc-title {
  font-family: var(--font-serif);
  font-size: var(--toc-title-size);
  font-weight: 700;
  margin: 0 0 0.65rem 0;
}

.toc-section nav#TableOfContents ol,
.toc-section nav#TableOfContents ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-section nav#TableOfContents li {
  margin-bottom: 0.35rem;
  font-size: 1.1rem;
}

/* Reset counter on root ol */
.toc-section nav#TableOfContents > ol {
  counter-reset: toc-1;
}

/* If root li has an <a> link (H1 heading) */
.toc-section nav#TableOfContents > ol > li:has(> a) {
  counter-increment: toc-1;
}
.toc-section nav#TableOfContents > ol > li:has(> a)::before {
  content: counter(toc-1) " ";
  font-weight: 600;
  margin-right: 0.5rem;
}

/* Sub-items when H1 exists */
.toc-section nav#TableOfContents > ol > li:has(> a) > ol {
  counter-reset: toc-2;
  padding-left: 1.5rem;
  margin-top: 0.25rem;
}
.toc-section nav#TableOfContents > ol > li:has(> a) > ol > li {
  counter-increment: toc-2;
}
.toc-section nav#TableOfContents > ol > li:has(> a) > ol > li::before {
  content: counter(toc-1) "." counter(toc-2) " ";
  font-weight: normal;
  margin-right: 0.5rem;
}

/* Level 3 items when H1 exists (H3 headings) */
.toc-section nav#TableOfContents > ol > li:has(> a) > ol > li > ol {
  counter-reset: toc-3;
  padding-left: 1.5rem;
  margin-top: 0.25rem;
}
.toc-section nav#TableOfContents > ol > li:has(> a) > ol > li > ol > li {
  counter-increment: toc-3;
}
.toc-section nav#TableOfContents > ol > li:has(> a) > ol > li > ol > li::before {
  content: counter(toc-1) "." counter(toc-2) "." counter(toc-3) " ";
  font-weight: normal;
  margin-right: 0.5rem;
}

/* Level 4 items when H1 exists (H4 headings) */
.toc-section nav#TableOfContents > ol > li:has(> a) > ol > li > ol > li > ol {
  counter-reset: toc-4;
  padding-left: 1.5rem;
  margin-top: 0.25rem;
}
.toc-section nav#TableOfContents > ol > li:has(> a) > ol > li > ol > li > ol > li {
  counter-increment: toc-4;
}
.toc-section nav#TableOfContents > ol > li:has(> a) > ol > li > ol > li > ol > li::before {
  content: counter(toc-1) "." counter(toc-2) "." counter(toc-3) "." counter(toc-4) " ";
  font-weight: normal;
  margin-right: 0.5rem;
}

/* If root li has NO <a> link (H2 headings become top level) */
.toc-section nav#TableOfContents > ol > li:not(:has(> a)) {
  padding-left: 0;
  margin: 0;
}
.toc-section nav#TableOfContents > ol > li:not(:has(> a)) > ol {
  counter-reset: toc-1;
  padding-left: 0;
}
.toc-section nav#TableOfContents > ol > li:not(:has(> a)) > ol > li {
  counter-increment: toc-1;
}
.toc-section nav#TableOfContents > ol > li:not(:has(> a)) > ol > li::before {
  content: counter(toc-1) " ";
  font-weight: 600;
  margin-right: 0.5rem;
}

/* Sub-items when H2 is top level */
.toc-section nav#TableOfContents > ol > li:not(:has(> a)) > ol > li > ol {
  counter-reset: toc-2;
  padding-left: 1.5rem;
  margin-top: 0.25rem;
}
.toc-section nav#TableOfContents > ol > li:not(:has(> a)) > ol > li > ol > li {
  counter-increment: toc-2;
}
.toc-section nav#TableOfContents > ol > li:not(:has(> a)) > ol > li > ol > li::before {
  content: counter(toc-1) "." counter(toc-2) " ";
  font-weight: normal;
  margin-right: 0.5rem;
}

/* Level 3 items when H2 is top level (H4 headings) */
.toc-section nav#TableOfContents > ol > li:not(:has(> a)) > ol > li > ol > li > ol {
  counter-reset: toc-3;
  padding-left: 1.5rem;
  margin-top: 0.25rem;
}
.toc-section nav#TableOfContents > ol > li:not(:has(> a)) > ol > li > ol > li > ol > li {
  counter-increment: toc-3;
}
.toc-section nav#TableOfContents > ol > li:not(:has(> a)) > ol > li > ol > li > ol > li::before {
  content: counter(toc-1) "." counter(toc-2) "." counter(toc-3) " ";
  font-weight: normal;
  margin-right: 0.5rem;
}

/* Unordered TOC indentation fallback */
.toc-section nav#TableOfContents ul > li > ul {
  padding-left: 1.5rem;
  margin-top: 0.25rem;
}

.toc-divider {
  border: none;
  border-top: var(--rule-thin);
  margin: 1.75rem 0 2.5rem 0;
}

/* Featured / Banner Image */
.article-featured-image {
  text-align: center;
  margin: 2rem 0 2.5rem 0;
}

.article-featured-image img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--rule-color);
}

/* Article Body Typography (LaTeX Headings Scale) */
.article-content {
  font-size: var(--body-font-size);
  line-height: 1.75;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.article-content p {
  margin-top: 0;
  margin-bottom: 1.35rem;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
  font-family: var(--font-serif);
  color: var(--text-color);
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 0.65rem;
  line-height: 1.3;
  text-align: left;
}

/* Headings controlled via CSS variables */
.article-content h1 { font-size: var(--h1-size); }
.article-content h2 { font-size: var(--h2-size); }
.article-content h3 { font-size: var(--h3-size); }
.article-content h4 { font-size: var(--h4-size); }
.article-content h5 { font-size: var(--h5-size); }
.article-content h6 { font-size: var(--h6-size); }

/* LaTeX Heading Numbering */
.article-content.numbered-headings:has(h1) {
  counter-reset: sec-1;
}

.article-content.numbered-headings:has(h1) h1 {
  counter-increment: sec-1;
  counter-reset: sec-2;
}

.article-content.numbered-headings:has(h1) h1::before {
  content: counter(sec-1) " ";
  font-weight: 700;
  margin-right: 0.5rem;
}

.article-content.numbered-headings:has(h1) h2 {
  counter-increment: sec-2;
  counter-reset: sec-3;
}

.article-content.numbered-headings:has(h1) h2::before {
  content: counter(sec-1) "." counter(sec-2) " ";
  font-weight: 700;
  margin-right: 0.5rem;
}

.article-content.numbered-headings:has(h1) h3 {
  counter-increment: sec-3;
  counter-reset: sec-4;
}

.article-content.numbered-headings:has(h1) h3::before {
  content: counter(sec-1) "." counter(sec-2) "." counter(sec-3) " ";
  font-weight: 700;
  margin-right: 0.5rem;
}

.article-content.numbered-headings:has(h1) h4 {
  counter-increment: sec-4;
  counter-reset: sec-5;
}

.article-content.numbered-headings:has(h1) h4::before {
  content: counter(sec-1) "." counter(sec-2) "." counter(sec-3) "." counter(sec-4) " ";
  font-weight: 700;
  margin-right: 0.5rem;
}

.article-content.numbered-headings:not(:has(h1)) {
  counter-reset: sec-1;
}

.article-content.numbered-headings:not(:has(h1)) h2 {
  counter-increment: sec-1;
  counter-reset: sec-2;
}

.article-content.numbered-headings:not(:has(h1)) h2::before {
  content: counter(sec-1) " ";
  font-weight: 700;
  margin-right: 0.5rem;
}

.article-content.numbered-headings:not(:has(h1)) h3 {
  counter-increment: sec-2;
  counter-reset: sec-3;
}

.article-content.numbered-headings:not(:has(h1)) h3::before {
  content: counter(sec-1) "." counter(sec-2) " ";
  font-weight: 700;
  margin-right: 0.5rem;
}

.article-content.numbered-headings:not(:has(h1)) h4 {
  counter-increment: sec-3;
  counter-reset: sec-4;
}

.article-content.numbered-headings:not(:has(h1)) h4::before {
  content: counter(sec-1) "." counter(sec-2) "." counter(sec-3) " ";
  font-weight: 700;
  margin-right: 0.5rem;
}

/* LaTeX styled Blockquote */
.article-content blockquote {
  margin: 1.75rem 2rem;
  padding: 0.6rem 1.25rem;
  border-left: 2px solid var(--rule-color);
  font-style: italic;
  background-color: transparent;
  color: var(--blockquote-color);
}

.article-content blockquote p {
  margin-bottom: 0.5rem;
}

.article-content blockquote p:last-child {
  margin-bottom: 0;
}

/* Code Blocks with black outline & padding */
.article-content pre,
.article-content .highlight pre,
.highlight .chroma,
pre {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  border: 1px solid var(--code-border);
  padding: 1.1rem 1.3rem;
  background-color: var(--code-bg) !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0;
  line-height: 1.55;
  margin: 1.65rem 0;
  max-width: 100%;
}

.highlight .chroma pre {
  border: none;
  padding: 0;
  margin: 0;
  background: transparent !important;
}

.article-content code,
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.article-content :not(pre) > code,
:not(pre) > code {
  background-color: var(--inline-code-bg);
  padding: 0.15em 0.35em;
  border: 1px solid var(--inline-code-border);
  border-radius: 0;
  word-break: break-word;
}

.article-content pre code,
pre code {
  border: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
}

/* LaTeX Booktabs Tables */
.article-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: var(--rule-thick);
  border-bottom: var(--rule-thick);
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 1.1rem;
}

.article-content th {
  border-bottom: var(--rule-thin);
  padding: 0.6rem 0.8rem;
  font-weight: 700;
  text-align: left;
}

.article-content td {
  padding: 0.6rem 0.8rem;
  border-bottom: none;
}

/* Lists */
.article-content ul,
.article-content ol {
  padding-left: 1.75rem;
  margin: 1.25rem 0;
}

.article-content li {
  margin-bottom: 0.4rem;
}

/* Horizontal Rules */
hr {
  border: none;
  border-top: var(--rule-thin);
  margin: 2rem 0;
}

/* Figures & Images */
figure {
  margin: 2rem 0;
  text-align: center;
  max-width: 100%;
}

figure img,
.article-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

video {
  max-width: 100%;
  height: auto;
}

/* KaTeX Responsive Display */
.katex-display {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 0;
}

figcaption {
  font-size: 1rem;
  font-style: italic;
  color: var(--muted-color);
  margin-top: 0.5rem;
}

/* Footnotes */
.footnotes {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: var(--rule-thin);
  font-size: 1.05rem;
}

.footnotes hr {
  display: none;
}

/* Comments Section (Disqus) */
.comments-section {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: var(--rule-thin);
  width: 100%;
}

#disqus_thread {
  width: 100%;
  min-height: 220px;
  background-color: var(--bg-color);
  color: var(--text-color);
}

#disqus_thread iframe {
  background-color: var(--bg-color) !important;
}

html[data-theme="dark"] #disqus_thread,
html[data-theme="dark"] #disqus_thread iframe {
  color-scheme: dark !important;
}

html[data-theme="light"] #disqus_thread,
html[data-theme="light"] #disqus_thread iframe,
html[data-theme="sepia"] #disqus_thread,
html[data-theme="sepia"] #disqus_thread iframe {
  color-scheme: light !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="sepia"]) #disqus_thread,
  :root:not([data-theme="light"]):not([data-theme="sepia"]) #disqus_thread iframe {
    color-scheme: dark !important;
  }
}

/* -------------------------------------------------------------
   Responsive Breakpoints
   ------------------------------------------------------------- */

/* Medium Devices (Tablets, <= 768px) */
@media (max-width: 768px) {
  .nav-container {
    gap: 1.5rem 2.5rem;
  }

  .home-divider {
    margin: 2.25rem 0 1.75rem 0;
  }

  .article-content blockquote {
    margin: 1.5rem 1rem;
  }
}

/* Small Devices (Phones, <= 640px) */
@media (max-width: 640px) {
  .container {
    padding: 1.75rem 1.15rem;
  }

  .nav-container {
    gap: 0.85rem 1.5rem;
  }

  .nav-item {
    font-size: 1.15rem;
  }

  .site-nav {
    padding: 0.75rem 0;
    margin: 1.25rem 0 2rem 0;
  }

  .post-item-row {
    grid-template-columns: 50px 1fr;
    gap: 1rem;
    align-items: start;
    padding: 1rem 0;
  }

  .post-thumbnail-wrapper,
  .post-thumbnail,
  .post-thumbnail-placeholder {
    width: 50px;
    height: 50px;
  }

  .post-meta-right {
    grid-column: 2;
    text-align: left;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    margin-top: 0.35rem;
    color: var(--muted-color);
  }

  .post-meta-date::after {
    content: "·";
    margin-left: 0.5rem;
  }

  .article-content {
    line-height: 1.65;
  }

  .article-content pre,
  .article-content .highlight pre,
  .highlight .chroma,
  pre {
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
    margin: 1.25rem 0;
  }

  .article-content blockquote {
    margin: 1.25rem 0.25rem;
    padding: 0.5rem 0.85rem;
  }

  .toc-section nav#TableOfContents ol > li > ol,
  .toc-section nav#TableOfContents ul > li > ul {
    padding-left: 1rem;
  }

  .toc-section nav#TableOfContents > ol > li:not(:has(> a)) > ol {
    padding-left: 0;
  }

  .footer-tagline {
    font-size: 1.05rem;
  }

  .footer-copyright {
    font-size: 1rem;
  }

  .theme-toggle {
    top: 0.85rem;
    right: 0.85rem;
    width: 30px;
    height: 30px;
  }

  .theme-toggle svg {
    width: 15px;
    height: 15px;
  }

  /* Heading metadata stacks cleanly on mobile screens */
  h1:has(.heading-meta, .meta-right, .meta),
  h2:has(.heading-meta, .meta-right, .meta),
  h3:has(.heading-meta, .meta-right, .meta),
  h4:has(.heading-meta, .meta-right, .meta),
  h5:has(.heading-meta, .meta-right, .meta),
  h6:has(.heading-meta, .meta-right, .meta) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .heading-meta,
  .meta-right,
  h1 .meta,
  h2 .meta,
  h3 .meta,
  h4 .meta,
  h5 .meta,
  h6 .meta {
    float: none;
    margin-left: 0;
    text-align: left;
    font-size: 0.95rem;
    display: block;
    width: 100%;
  }
}