/* ==========================================================================
   alecshea.net - Bespoke Editorial Stylesheet
   Hybrid of Concept 2 (Editorial Literary Review) and Concept 3 (Modern Dispatch)
   Text-heavy, highly readable, distraction-free
   ========================================================================== */

:root {
  --fg: #121820;
  --muted: #4e5762;
  --faint: #8d97a5;
  --bg: #fcfbf9;
  --rule: #e5e2d9;
  --rule-double: #d6d2c4;
  --link-underline: rgba(30, 70, 32, 0.35);
  --code-bg: #f2efe7;
  --accent: #1e4620; /* Refined Forest Juniper */
  --accent-soft: rgba(30, 70, 32, 0.08);
  --max: 40rem;
  --max-wide: 48rem;
  --font-serif: Charter, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}

/* Dark Mode - System Preference */
@media (prefers-color-scheme: dark) {
  :root {
    --fg: #e5e8e5;
    --muted: #959e96;
    --faint: #636d65;
    --bg: #111412;
    --rule: #232a24;
    --rule-double: #2e3830;
    --link-underline: rgba(82, 164, 86, 0.4);
    --code-bg: #1a201c;
    --accent: #52a456;
    --accent-soft: rgba(82, 164, 86, 0.15);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.wrap-wide {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- Typography & Links ---------- */

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.12s ease;
}
a:hover {
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--fg);
  line-height: 1.25;
}

/* ---------- Masthead Header (Hybrid: Editorial Double Rule + Modern Nav) ---------- */

.site-header {
  padding: 2.75rem 0 1.5rem;
  margin-bottom: 2.5rem;
  text-align: center;
}

.site-header-inner {
  border-top: 2px solid var(--rule-double);
  border-bottom: 2px solid var(--rule-double);
  padding: 1rem 0;
  position: relative;
}

.site-title {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
  font-family: var(--font-serif);
}
.site-title a {
  color: var(--fg);
  text-decoration: none;
}
.site-title a:hover {
  text-decoration: none;
  color: var(--accent);
}

.site-nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.site-nav-bar a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  padding: 0.2rem 0.4rem;
  transition: color 0.15s ease;
}
.site-nav-bar a:hover,
.site-nav-bar a.active {
  color: var(--accent);
}

/* Practice note / tagline */
.practice-note {
  margin: -0.75rem auto 2.25rem;
  font-size: 0.95rem;
  color: var(--muted);
  font-style: italic;
  text-align: center;
  max-width: 34rem;
}

/* ---------- Post Component (Editorial + Modern Dispatch) ---------- */

article.post {
  margin-bottom: 3.5rem;
}

article.post .post-header {
  margin: 0 0 2rem;
  text-align: left;
}

article.post .post-header-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-weight: 700;
}

article.post .post-title {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 0.75rem;
}

article.post .post-title a {
  text-decoration: none;
  color: var(--fg);
}
article.post .post-title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

article.post .post-meta {
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

article.post .post-meta time {
  font-weight: 500;
}

/* Low-Profile Footer Tags */
.post-footer-tags {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--rule);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.post-footer-tags .tag-label {
  color: var(--faint);
  font-style: normal;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.post-footer-tags a {
  color: var(--muted);
  text-decoration: none;
  font-style: normal;
}
.post-footer-tags a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ---------- Footnotes ---------- */

sup.footnote-ref {
  font-size: 0.72em;
  position: relative;
  vertical-align: baseline;
  top: -0.55em;
  line-height: 0;
  margin-left: 0.12em;
  white-space: nowrap;
  display: inline;
}
sup.footnote-ref a {
  color: var(--accent);
  text-decoration: none;
  font-family: var(--font-mono);
  font-weight: 600;
  padding: 0 0.05em;
  white-space: nowrap;
}
sup.footnote-ref a:hover {
  text-decoration: underline;
}

.footnotes {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.6;
}
.footnotes-sep {
  display: none;
}
.footnotes-list {
  margin: 0 0 0 1.25rem;
  padding: 0;
}
.footnote-item {
  margin-bottom: 0.65rem;
  padding-left: 0.25rem;
}
.footnote-item:target {
  background: var(--accent-soft);
  border-radius: 3px;
}
.footnote-text {
  color: var(--muted);
}
.footnote-backref {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.9em;
  margin-left: 0.35rem;
  display: inline-block;
  transition: transform 0.12s ease;
}
.footnote-backref:hover {
  text-decoration: none;
  transform: translateX(-2px);
}

/* ---------- Previous Dispatches (Pure Single-Column Headline + Date) ---------- */

.section-label {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--muted);
  margin: 3.5rem 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}

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

.post-summary {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
}
.post-summary:last-child {
  border-bottom: none;
}

.post-summary .post-title {
  font-size: 1.12rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.35;
}
.post-summary .post-title a {
  color: var(--fg);
  text-decoration: none;
}
.post-summary .post-title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

.post-summary .post-date {
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  white-space: nowrap;
  font-feature-settings: "tnum";
}

/* ---------- Pagination & Navigation Links ---------- */

.site-nav-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.5rem 0 3.5rem;
  margin-top: 1rem;
  font-size: 0.95rem;
  font-family: var(--font-sans);
}

.site-nav-footer a {
  color: var(--fg);
  text-decoration: none;
  font-weight: 600;
}
.site-nav-footer a:hover {
  text-decoration: underline;
  color: var(--accent);
}

/* ---------- Site Footer ---------- */

.site-footer {
  margin-top: 4rem;
  padding: 2.5rem 0;
  border-top: 2px solid var(--rule-double);
  font-size: 0.85rem;
  color: var(--muted);
}
.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-nav {
  display: flex;
  gap: 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
}

/* ---------- Search and Filter Bar ---------- */

.search-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-serif);
  font-size: 1rem;
  background: var(--code-bg);
  border: 1px solid var(--rule);
  color: var(--fg);
  border-radius: 4px;
  margin-bottom: 1.5rem;
  outline: none;
  transition: border-color 0.15s ease;
}
.search-input:focus {
  border-color: var(--accent);
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.tag-pill {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.25rem 0.65rem;
  border-radius: 4px;
  background: var(--code-bg);
  color: var(--fg);
  text-decoration: none;
  border: 1px solid var(--rule);
}
.tag-pill:hover,
.tag-pill.active {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  text-decoration: none;
}

/* ---------- Responsive Adjustments ---------- */

@media (max-width: 640px) {
  html, body {
    font-size: 17.5px;
  }
  .site-header {
    padding: 2rem 0 1.25rem;
    margin-bottom: 1.75rem;
  }
  .site-title {
    font-size: 1.9rem;
  }
  .site-nav-bar {
    gap: 0.85rem;
    font-size: 0.78rem;
  }
  article.post .post-title {
    font-size: 1.75rem;
  }
  .post-summary-card .card-header {
    flex-direction: column;
    gap: 0.2rem;
  }
}

/* ==========================================================================
   Typora-Grade Extended Formatting Styles
   ========================================================================== */

/* ---------- Figures & Images with Captions ---------- */
.post-figure {
  margin: 2.5rem 0;
  text-align: center;
}
.post-figure img,
.post-body img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
  margin: 0 auto;
  border: 1px solid var(--rule);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}
.post-figure figcaption {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
  font-family: var(--font-serif);
  text-align: center;
  line-height: 1.4;
}

/* ---------- GFM Tables ---------- */
.post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 2.25rem 0;
  font-size: 0.9rem;
  line-height: 1.5;
}
.post-body th,
.post-body td {
  padding: 0.65rem 0.95rem;
  border: 1px solid var(--rule);
  text-align: left;
}
.post-body th {
  background: var(--code-bg);
  font-weight: 700;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg);
}
.post-body tr:nth-child(even) td {
  background: var(--accent-soft);
}

/* ---------- Task Lists / Checklists ---------- */
.post-body ul:has(input[type="checkbox"]) {
  list-style: none;
  padding-left: 0.25rem;
}
.post-body input[type="checkbox"] {
  margin-right: 0.55rem;
  accent-color: var(--accent);
  transform: scale(1.15);
  vertical-align: middle;
  cursor: default;
}

/* ---------- Typora Highlights (<mark>) ---------- */
mark.highlight,
.post-body mark {
  background: #fcf190;
  color: #1a1a1a;
  padding: 0.1em 0.35em;
  border-radius: 3px;
}
@media (prefers-color-scheme: dark) {
  mark.highlight,
  .post-body mark {
    background: #254d28;
    color: #e8f5e9;
  }
}

/* ---------- Strikethrough, Subscript & Superscript ---------- */
.post-body del,
.post-body s {
  color: var(--muted);
  text-decoration-line: line-through;
}

.post-body sub,
.post-body sup:not(.footnote-ref) {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
.post-body sup:not(.footnote-ref) {
  top: -0.5em;
}
.post-body sub {
  bottom: -0.25em;
}

/* ---------- Code Blocks with Header & Copy Button ---------- */
.code-block-wrapper {
  margin: 2.25rem 0;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--code-bg);
  overflow: hidden;
}
.code-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.85rem;
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.copy-code-btn {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.15rem 0.5rem;
  font-size: 0.7rem;
  font-family: var(--font-sans);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.copy-code-btn:hover {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}
.code-block-wrapper pre {
  margin: 0;
  padding: 1rem 1.15rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  line-height: 1.6;
}
.code-block-wrapper code {
  background: transparent;
  padding: 0;
  font-size: inherit;
}

/* Inline Code */
.post-body :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 0.15em 0.35em;
  background: var(--code-bg);
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--fg);
}

/* ---------- Math / LaTeX Formatting ---------- */
.math-display,
.katex-display {
  margin: 1.75rem 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.5rem 0;
}

/* ---------- Blockquotes & Pullquotes ---------- */
.post-body blockquote {
  margin: 2.25rem 0;
  padding: 0.5rem 0 0.5rem 1.5rem;
  border-left: 3px solid var(--accent);
  font-style: italic;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.65;
}
.post-body blockquote > :first-child {
  margin-top: 0;
}
.post-body blockquote > :last-child {
  margin-bottom: 0;
}

/* ---------- Opening Drop Cap ---------- */
.post-body > p:first-of-type::first-letter {
  font-size: 3.3em;
  float: left;
  line-height: 0.82;
  padding-right: 0.12em;
  padding-top: 0.05em;
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--fg);
}

/* ---------- Admin Reader Canvas ---------- */
.reader-canvas {
  background: var(--bg);
  color: var(--fg);
  border-radius: 8px;
  border: 1px solid var(--rule);
  padding: 2.5rem 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.75;
}

/* ---------- Comprehensive Editorial Prose Typography ---------- */
/* Applies to public essays and live admin reader canvas, overriding resets */

.post-body,
.reader-canvas,
.reader-canvas .post-body {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.75;
  color: var(--fg);
}

/* Paragraphs & Paragraph Spacing */
.post-body p,
.reader-canvas p,
.reader-canvas .post-body p {
  margin-top: 0 !important;
  margin-bottom: 1.6rem !important;
  line-height: 1.75 !important;
  color: var(--fg) !important;
}

.post-body p:last-child,
.reader-canvas p:last-child,
.reader-canvas .post-body p:last-child {
  margin-bottom: 0 !important;
}

/* Intentional Blank Line Spacers (when author presses enter 3+ times) */
.post-body p.empty-line,
.reader-canvas p.empty-line,
.reader-canvas .post-body p.empty-line {
  margin: 0 !important;
  height: 1.6rem !important;
  line-height: 1.6rem !important;
  display: block !important;
}

/* Headings (H1 - H6) with clear visual hierarchy and generous margins */
.post-body h1,
.reader-canvas h1,
.reader-canvas .post-body h1 {
  font-family: var(--font-serif) !important;
  font-size: 2.1rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.015em !important;
  color: var(--fg) !important;
  margin-top: 2.8rem !important;
  margin-bottom: 1.15rem !important;
  padding-bottom: 0.4rem !important;
  border-bottom: 1px solid var(--rule) !important;
}

.post-body h2,
.reader-canvas h2,
.reader-canvas .post-body h2 {
  font-family: var(--font-serif) !important;
  font-size: 1.65rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  color: var(--fg) !important;
  margin-top: 2.4rem !important;
  margin-bottom: 0.95rem !important;
}

.post-body h3,
.reader-canvas h3,
.reader-canvas .post-body h3 {
  font-family: var(--font-serif) !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--fg) !important;
  margin-top: 2rem !important;
  margin-bottom: 0.75rem !important;
}

.post-body h4,
.reader-canvas h4,
.reader-canvas .post-body h4 {
  font-family: var(--font-sans) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--muted) !important;
  margin-top: 1.75rem !important;
  margin-bottom: 0.6rem !important;
}

.post-body h5,
.reader-canvas h5,
.reader-canvas .post-body h5 {
  font-family: var(--font-sans) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--muted) !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.5rem !important;
}

.post-body h6,
.reader-canvas h6,
.reader-canvas .post-body h6 {
  font-family: var(--font-sans) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.04em !important;
  color: var(--faint) !important;
  margin-top: 1.35rem !important;
  margin-bottom: 0.45rem !important;
}

/* Heading Subtitles (Heading directly following another heading) */
.post-body h1 + h2, .reader-canvas .post-body h1 + h2,
.post-body h2 + h3, .reader-canvas .post-body h2 + h3,
.post-body h3 + h4, .reader-canvas .post-body h3 + h4 {
  margin-top: -0.35rem !important;
  color: var(--muted) !important;
}

/* Bulleted and Numbered Lists */
.post-body ul:not(.post-list):not(.footnotes-list),
.reader-canvas ul:not(.post-list):not(.footnotes-list),
.reader-canvas .post-body ul:not(.post-list):not(.footnotes-list) {
  list-style-type: disc !important;
  margin: 1.25rem 0 1.6rem 1.75rem !important;
  padding: 0 !important;
}

.post-body ol:not(.footnotes-list),
.reader-canvas ol:not(.footnotes-list),
.reader-canvas .post-body ol:not(.footnotes-list) {
  list-style-type: decimal !important;
  margin: 1.25rem 0 1.6rem 1.75rem !important;
  padding: 0 !important;
}

.post-body li,
.reader-canvas li,
.reader-canvas .post-body li {
  margin-bottom: 0.45rem !important;
  line-height: 1.7 !important;
  color: var(--fg) !important;
  display: list-item !important;
}

.post-body ul ul, .reader-canvas .post-body ul ul,
.post-body ol ul, .reader-canvas .post-body ol ul {
  list-style-type: circle !important;
  margin: 0.4rem 0 0.4rem 1.5rem !important;
}

.post-body ol ol, .reader-canvas .post-body ol ol,
.post-body ul ol, .reader-canvas .post-body ul ol {
  list-style-type: lower-alpha !important;
  margin: 0.4rem 0 0.4rem 1.5rem !important;
}

/* Horizontal Rule Dividers */
.post-body hr,
.reader-canvas hr,
.reader-canvas .post-body hr {
  border: 0 !important;
  border-top: 1px solid var(--rule) !important;
  margin: 2.75rem auto !important;
  width: 50% !important;
}

/* Archive Year Groupings */
.archive-year-group {
  margin-top: 3.25rem;
  margin-bottom: 1.5rem;
}
.archive-year-group:first-of-type {
  margin-top: 2rem;
}
.archive-year-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.25rem;
}
.archive-year-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
}
.archive-year-badge {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--faint);
}

/* Authenticated Draft Mode Banner */
.draft-banner {
  background-color: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  padding: 0.65rem 1.25rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-family: var(--font-sans);
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (prefers-color-scheme: dark) {
  .draft-banner {
    background-color: #451a03;
    color: #fde68a;
    border-color: #78350f;
  }
}
.draft-banner a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

/* Zoomable Images & Lightbox */
.zoomable-img {
  cursor: zoom-in;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.zoomable-img:hover {
  opacity: 0.95;
}
.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 15, 12, 0.9);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  cursor: zoom-out;
  padding: 2rem;
  box-sizing: border-box;
}
.lightbox-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.lightbox-img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  transform: scale(0.95);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.lightbox-overlay.active .lightbox-img {
  transform: scale(1);
}
.lightbox-caption {
  color: #d4d8d4;
  font-size: 0.85rem;
  margin-top: 1rem;
  text-align: center;
  font-style: italic;
  max-width: 40rem;
  font-family: var(--font-serif);
}

/* Print Stylesheet */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt !important;
    line-height: 1.6 !important;
  }
  .site-header,
  .site-nav-bar,
  .site-footer,
  .post-nav,
  .copy-code-btn,
  .tag-pill,
  .draft-banner,
  .search-input {
    display: none !important;
  }
  .wrap {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .post-title {
    font-size: 22pt !important;
    color: #000 !important;
    margin-bottom: 0.5rem !important;
  }
  .post-meta {
    color: #555 !important;
    margin-bottom: 2rem !important;
  }
  a {
    color: #000 !important;
    text-decoration: underline !important;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
  h1, h2, h3, h4 {
    page-break-after: avoid;
  }
  .footnotes {
    border-top: 1pt solid #ccc !important;
    margin-top: 3rem !important;
    padding-top: 1rem !important;
    page-break-inside: avoid;
  }
}

/* ==========================================================================
   Typora Callouts, Table of Contents, Tables & Fast Search Palette
   ========================================================================== */

/* ---------- Callouts / Admonitions (Typora & GitHub Flavored) ---------- */
.callout {
  margin: 2rem 0;
  padding: 1.1rem 1.35rem;
  border-left: 4px solid var(--accent);
  background: rgba(30, 81, 40, 0.05);
  border-radius: 0 8px 8px 0;
  font-size: 0.95em;
  line-height: 1.65;
}
.callout-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}
.callout-icon {
  font-size: 1rem;
  line-height: 1;
}
.callout-body p {
  margin-bottom: 0.75rem !important;
}
.callout-body p:last-child {
  margin-bottom: 0 !important;
}

/* Callout Variant Themes */
.callout-note {
  border-left-color: #2563eb;
  background: rgba(37, 99, 235, 0.06);
}
.callout-note .callout-title { color: #2563eb; }

.callout-tip {
  border-left-color: #10b981;
  background: rgba(16, 185, 129, 0.06);
}
.callout-tip .callout-title { color: #059669; }

.callout-important {
  border-left-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.06);
}
.callout-important .callout-title { color: #7c3aed; }

.callout-warning {
  border-left-color: #f59e0b;
  background: rgba(245, 158, 11, 0.07);
}
.callout-warning .callout-title { color: #d97706; }

.callout-caution {
  border-left-color: #ef4444;
  background: rgba(239, 68, 68, 0.07);
}
.callout-caution .callout-title { color: #dc2626; }

/* Dark mode callouts */
@media (prefers-color-scheme: dark) {
  .callout-note { background: rgba(37, 99, 235, 0.12); }
  .callout-note .callout-title { color: #60a5fa; }

  .callout-tip { background: rgba(16, 185, 129, 0.12); }
  .callout-tip .callout-title { color: #34d399; }

  .callout-important { background: rgba(139, 92, 246, 0.12); }
  .callout-important .callout-title { color: #a78bfa; }

  .callout-warning { background: rgba(245, 158, 11, 0.12); }
  .callout-warning .callout-title { color: #fbbf24; }

  .callout-caution { background: rgba(239, 68, 68, 0.12); }
  .callout-caution .callout-title { color: #f87171; }
}

/* ---------- Table of Contents (TOC) - Quiet Bookish Serif ---------- */
.table-of-contents {
  margin: 1.5rem 0 2rem 0;
  padding: 0.35rem 0 0.35rem 1.25rem;
  background: transparent !important;
  border: none !important;
  border-left: 2px solid var(--rule) !important;
  border-radius: 0 !important;
  font-family: var(--font-serif) !important;
  font-size: 0.95rem;
  line-height: 1.6;
}
.toc-title {
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  font-style: italic !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.92rem !important;
  color: var(--muted) !important;
  margin-bottom: 0.45rem !important;
  padding: 0 !important;
  border: none !important;
}
.toc-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.toc-item {
  margin: 0 !important;
  line-height: 1.55;
  font-family: var(--font-serif) !important;
  font-size: 0.95rem;
}
.toc-item a {
  color: var(--fg);
  opacity: 0.88;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.toc-item a:hover {
  color: var(--accent);
  opacity: 1;
  border-bottom: 1px dotted var(--accent);
  text-decoration: none;
}
.toc-depth-2 {
  font-weight: 500;
}
.toc-depth-3 {
  padding-left: 1.15rem;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--muted);
  font-style: italic;
}
.toc-depth-4 {
  padding-left: 2rem;
  font-size: 0.84rem;
  color: var(--muted);
}

/* ---------- Responsive Table Wrapper ---------- */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin: 2rem 0;
  border-radius: 6px;
  border: 1px solid var(--rule);
  -webkit-overflow-scrolling: touch;
}
.table-wrapper table {
  margin: 0 !important;
  width: 100%;
  border-collapse: collapse;
}

.hidden {
  display: none !important;
}