/* ============================================================
   SITE.CSS — dangr.ai unified styles
   
   Three visual modes:
   1. Landing page  — dark, full particles, centered content
   2. Index pages   — dark, blurred particles, opaque cards
   3. Blog articles — light background, editorial layout
   
   Shared: navbar, footer, fonts, accent colors
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400&display=swap');


/* ── 1. VARIABLES ── */

:root {
  /* Shared accent palette (blog blues) */
  --accent-primary: #1155cc;
  --accent-secondary: #6d9eeb;
  --accent-dark: #073763;
  --accent-light: #A4C2F4;
  --accent-muted: #C9DAF8;

  /* Dark theme (landing + index pages) */
  --dark-bg: #0a0a0c;
  --dark-text: #e0e1e6;
  --dark-text-secondary: #8b8d98;
  --dark-text-tertiary: #55576a;

  /* Light theme (articles) */
  --bg-content: #f6f6f6;
  --bg-site: #f6f6f6;
  --body-color: #333333;

  /* Typography */
  --font-heading: 'Crimson Text', Georgia, serif;
  --font-body: 'Roboto', Helvetica, Arial, sans-serif;

  /* Global line spacing */
  --line-height-body: 1.2;

  /* Article-specific heading sizes */
  --h1-size: 30pt;
  --h2-size: 19pt;
  --h2-weight: 600;
  --h3-size: 11pt;
  --h3-weight: 700;
  --h2-spacing-before: 30pt;
  --h2-spacing-after: 8pt;
  --h3-spacing-before: 16pt;
  --h3-spacing-after: 8pt;

  /* Article body text */
  --body-weight: 300;
  --body-size: 11pt;
  --body-bold-weight: 700;
  --body-bold-color: #073763;
  --body-spacing-before: 0pt;
  --body-spacing-after: 8pt;
  --link-color: #1155cc;

  /* Paragraph table */
  --bar-width: 8px;
  --bar-color: #d9d9d9;
  --bar-spacer-width: 16px;

  /* Pull quote */
  --pullquote-bg: #f3f3f3;
  --pullquote-quote-font: 'Crimson Text', Georgia, serif;
  --pullquote-quote-size: 16pt;
  --pullquote-quote-color: #666666;
  --pullquote-attr-font: 'Roboto', Helvetica, Arial, sans-serif;
  --pullquote-attr-weight: 300;
  --pullquote-attr-size: 12pt;
  --pullquote-attr-color: #999999;
  --pullquote-attr-right-indent: 10px;
  --pullquote-width: 90%;
  --pullquote-padding-h: 16pt;
  --pullquote-padding-v: 16pt;

  /* Boxes */
  --box-margin: 30pt;

  /* Technical abstract */
  --abstract-bg: #eceef5;
  --abstract-padding: 12pt;
  --abstract-label-color: #073763;
  --abstract-text-color: #073763;

  /* LaTeX blocks */
  --latex-bg: #eceef5;
  --latex-padding: 12pt;
  --latex-display-size: 12pt;
  --latex-display-color: #666666;
  --latex-inline-color: #073763;
  --latex-text-color: #073763;
  --latex-display-spacing: 12pt;

  /* Captions */
  --caption-font: 'Nunito', sans-serif;
  --caption-weight: 300;
  --caption-size: 10pt;
  --caption-color: #777777;

  /* Images */
  --image-spacing-before: 14pt;
  --image-spacing-after: 14pt;
  --image-shadow-blur: 6px;

  /* Lists */
  --list-item-spacing: 2pt;

  /* Embeds */
  --embed-spacing: 14pt;

  /* Layout */
  --navbar-height: 56px;
  --content-max-width: 720px;
  --sidenav-width: 180px;
  --sidenav-active-color: #1155cc;
  --sidenav-inactive-color: #bbbbbb;
  --sidenav-dot-color: #6d9eeb;

  /* Blog index card spec */
  --card-radius: 12px;
  --pill-radius: 100px;
}


/* ── 2. RESET ── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
ol, ul { list-style: none; }
a { text-decoration: none; transition: all 0.3s ease; }


/* ── 3. NAVBAR (shared across all pages) ── */

.navbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--navbar-height); z-index: 2000;
  display: flex; align-items: center; padding: 0 32px;
  transition: background 0.35s ease, box-shadow 0.35s ease;
  background: transparent;
}
.navbar--solid { background: rgba(57, 75, 92, 0.6); border-bottom: 1px solid #444; box-shadow: 0 1px 8px rgba(0,0,0,0.4); }
.navbar--always-solid { background: rgba(57, 75, 92, 0.6); border-bottom: 1px solid #444; }
.navbar__brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-heading); font-size: 30px;
  color: #fff; text-decoration: none; letter-spacing: 0.02em;
}
.navbar__logo { height: 1em; width: auto; display: block; }
.navbar__links { margin-left: auto; display: flex; gap: 28px; list-style: none; }
.navbar__links a {
  color: #fff; text-decoration: none;
  font-family: var(--font-heading); font-weight: 600;
  font-size: 19.5px; letter-spacing: 0.03em; transition: color 0.2s;
}
.navbar__links a:hover { color: #fff; text-decoration: none; }


/* ── 4. PARTICLES (shared) ── */

#particles-js {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
}
/* Blurred particles for index pages (not landing) */
.particles-blur #particles-js {
  filter: blur(3px);
  -webkit-filter: blur(3px);
}


/* ══════════════════════════════════════════════════════════════
   DARK PAGES: Landing + Index
   ══════════════════════════════════════════════════════════════ */

/* ── 5. LANDING PAGE ── */

body.page-landing {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 300;
  overflow-x: hidden;
  background: var(--dark-bg);
  color: #fff;
}

.landing-container {
  position: relative; z-index: 1001;
  height: 100vh;
  display: flex; align-items: center;
}

.landing-content {
  margin-left: 63pt;
  padding-left: 16px;
  border-left: 6px solid #252525;
}

.landing-header {
  display: flex; align-items: center;
  gap: 16px; margin-bottom: 12pt;
}

.landing-header h1 {
  font-family: var(--font-heading);
  font-size: 4rem;
  color: #fff;
  font-weight: 400;
}

.landing-header .header-logo {
  max-width: 48pt; max-height: 48pt;
  opacity: 0.9; margin-top: 4pt;
}

.landing-content p {
  color: #fff;
  font-weight: 300;
}

.bullet-div {
  display: flex; align-items: center;
  gap: 16px; margin-left: 24px;
  margin-top: 8px; margin-bottom: 8px;
}
.bullet-div-first { margin-top: 15px; }
.bullet-div-last { margin-bottom: 15px; }
.bullet-icon { max-width: 35px; max-height: 25px; opacity: 0.5; }
.bullet-text {
  font-size: 80%;
  color: #9a9a9a;
}

.landing-content .fa-linkedin {
  color: #5b7fc7;
  margin-top: 11pt;
}
.landing-content a:hover .fa-linkedin { color: #7d9bd6; }

.landing-content a { color: #fff; }
.landing-content a:hover { color: var(--accent-secondary); text-decoration: underline; }

/* Dynamic text wrap (landing page) */
.dynamic-wrap { white-space: pre-wrap; word-break: break-word; max-width: 100%; }
.dynamic-wrap br { display: none; }
.dynamic-wrap.force-break br { display: inline; }

@media screen and (max-width: 600px) {
  .landing-container { padding-top: 80px; align-items: flex-start; }
  .landing-content { margin-left: 24px; }
}


/* ── 6. INDEX PAGES (blog index, projects, about, contact) ── */

body.page-index {
  font-family: var(--font-body);
  font-weight: 300;
  background: var(--dark-bg);
  color: var(--dark-text);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.index-shell {
  position: relative; z-index: 1001;
  flex: 1;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
  padding: calc(var(--navbar-height) + 48px) 24px 80px;
}

.index-shell h1 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 400;
  color: #fff;
  margin-bottom: 8px;
}

.index-shell .subtitle {
  font-size: 15px;
  font-weight: 300;
  color: var(--dark-text-secondary);
  margin-bottom: 40px;
}


/* ── 7. BLOG INDEX CARDS ── */

.entries { display: flex; flex-direction: column; gap: 24px; }

.entry {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  padding: 16px;
  border-radius: var(--card-radius);
  background: rgba(10, 10, 12, 0);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.3s ease;
  cursor: pointer;
}
.entry:hover { background: rgba(30, 30, 35, 0.9); }

.entry__image-wrap {
  align-self: start;
  border-radius: var(--card-radius);
  overflow: hidden;
  flex-shrink: 0;
}
.entry__image-wrap img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.entry:hover .entry__image-wrap img { transform: scale(1.04); }

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

.entry__title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  color: var(--accent-secondary);
  margin-bottom: 8px;
  line-height: 1.3;
}

.entry__desc {
  font-size: 14px;
  font-weight: 300;
  color: #d6d6d6;
  line-height: 1.5;
  margin-bottom: 12px;
}
.entry__desc strong {
  font-weight: 700;
  color: var(--dark-text);
}

/* WIP / coming-soon card state */
.entry--wip { opacity: 0.4; }

/* Collapse title's default bottom margin; spacing is handled by the pill wrapper */
.entry--wip .entry__title { margin-bottom: 6px; }

.pill.pill--wip {
  background: rgba(109, 158, 235, 0.3);
  color: #acc2ff;
  border: 1px solid rgba(109, 158, 235, 0.18);
  font-size: 12px;
  padding: 5px 12px;
  cursor: default;
  margin-bottom: 6px;   /* equal spacing above (title margin 6px) and below (this 6px) */
}
.pill--wip .fa {
  color: #acc2ff;
  font-size: 11px;
}

/* Pills */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px;
  border: none; border-radius: var(--pill-radius);
  font-family: var(--font-body);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.pill--toggle {
  background: rgba(109, 158, 235, 0.14);
  color: var(--accent-secondary);
}
.pill--toggle:hover { background: rgba(109, 158, 235, 0.22); }
.pill--toggle.open {
  background: rgba(109, 158, 235, 0.22);
  color: var(--accent-light);
}

.pill__arrow {
  font-size: 10px;
  display: inline-block;
  transition: transform 0.3s ease;
}
.pill--toggle.open .pill__arrow { transform: rotate(90deg); }

.pill--cta {
  background: rgba(109, 158, 235, 0.32);
  color: #fff;
  text-decoration: none;
}
.pill--cta:hover { background: rgba(109, 158, 235, 0.42); color: #fff; text-decoration: none; }
.pill--cta svg { transition: transform 0.2s ease; }
.pill--cta:hover svg { transform: translateX(2px); }

/* Deep dive expand/collapse */
.deep-dive {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.deep-dive.open { grid-template-rows: 1fr; }
.deep-dive__wrap { overflow: hidden; }
.deep-dive__inner { padding-top: 16px; }

/* "This is for" badge */
.is-for {
  background: rgba(109, 158, 235, 0.08);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.is-for__label {
  display: block;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-secondary);
  margin-bottom: 4px;
}
.is-for__text {
  font-size: 13px;
  font-weight: 300;
  color: var(--dark-text-secondary);
  line-height: 1.5;
}

.deep-dive__text {
  font-size: 14px;
  font-weight: 300;
  color: var(--dark-text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
}
.deep-dive__text em {
  font-style: italic;
  color: var(--dark-text);
}

/* Responsive */
@media (max-width: 640px) {
  .entry { grid-template-columns: 1fr; gap: 16px; padding: 12px; }
  .entry__image-wrap { max-width: 280px; aspect-ratio: 1; }
  .entries { gap: 24px; }
  .index-shell { padding: 48px 16px 80px; }
}


/* ── 8. DARK PAGE FOOTER ── */

/*
 * KNOWN ISSUE: footer appears more saturated/lighter than the navbar
 * despite using the same background color. Root cause is unclear —
 * backdrop-filter on position:relative may composite differently than
 * on position:fixed (navbar), so the blurred particle canvas doesn't
 * blend the same way. Workaround: use a slightly darker/lower-alpha
 * value (rgba(40,52,63,0.45)) to visually match. May need to revisit
 * on mobile where particle behavior differs.
 */

.site-footer {
  position: relative; z-index: 1001;
  background: rgba(40, 52, 63, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid #444;
  color: #525771;
  padding: 12px 32px;
}
.site-footer__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
}
.site-footer__copy {
  font-family: var(--font-heading);
  font-size: 15px;
  color: #525771;
  text-align: right;
  padding-right: 14px;
}
.site-footer__divider {
  display: block;
  width: 1px;
  height: 0.85em;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.08);
  align-self: center;
  flex-shrink: 0;
}
.site-footer__email {
  font-family: var(--font-heading);
  font-size: 15px;
  color: #525771;
  text-align: left;
  padding-left: 14px;
}
.site-footer a { color: #525771; text-decoration: none; }
.site-footer a:hover { color: var(--dark-text); text-decoration: underline; }

/* Article pages override footer to dark bg */
body.page-article .site-footer {
  background: var(--dark-bg);
}

/* ── 8b. LIGHTBOX MODAL ── */

/*
 * Margin system (three levels, measured from card edge):
 *   Card outer          → card border
 *   Internal color margin → body padding: 35px top, 30px right, 30px left, 30px bottom
 *   Text delineation    → additional 10px left, 17px right inside body padding
 *                          = 40px from card left, 47px from card right
 *   is-for box          → margin-right: 7px so right border sits 10px left of text delineation
 *   X button            → centered between card right edge (0) and text margin right (47px)
 *                          = spans right 0..47px, × centered at ~23.5px from right
 */

.lightbox-overlay {
  display: flex;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease;
}
.lightbox-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.lightbox-card {
  background: #292935;
  border: 1px solid #111;
  border-radius: 16px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 1);
  padding: 0;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}

/* Close button: spans from card right edge to text delineation right (47px),
   × centered within that zone */
.lightbox-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 47px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none; border: none;
  color: var(--dark-text-secondary);
  font-size: 22px; line-height: 1;
  cursor: pointer; padding: 0;
}
.lightbox-close:hover { color: #fff; }

/* Title: heading font, same left/right delineation as body text */
.lightbox-title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  color: #525e82;
  padding: 0 17px 14px 10px;
}

/* Internal color margin */
.lightbox-body {
  padding: 35px 30px 30px 30px;
}

/* Text delineation: 10px left, 17px right inside body padding */
.lightbox-body .deep-dive__text {
  padding: 0 17px 18px 10px;
  text-align: justify;
  color: #d6d6d6;
  margin-bottom: 0;
}

/* is-for box: margin-right 7px so right border sits 10px left of text delineation */
.lightbox-body .is-for {
  margin: 0 7px 18px 0;
  padding: 10px 10px;
}
.lightbox-body .is-for__text {
  color: #acacac;
  text-align: justify;
}

/* CTA: left edge at internal color margin; text starts at text delineation */
.lightbox-body .pill--cta {
  display: inline-flex;
  margin: 0;
  padding: 8px 18px 8px 10px;
  background: rgba(109, 158, 235, 0.22);
}


/* ══════════════════════════════════════════════════════════════
   LIGHT PAGES: Blog Articles
   ══════════════════════════════════════════════════════════════ */

body.page-article {
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  font-size: var(--body-size);
  line-height: var(--line-height-body);
  color: var(--body-color);
  background: var(--bg-site);
}


/* ── 9. HERO (articles only) ── */

.hero {
  position: relative; background: var(--dark-bg);
  padding: calc(var(--navbar-height) + 48px) 32px 0;
  min-height: 360px; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}
.hero__bg-image {
  position: absolute; inset: 0;
  background-size: 100% auto;
  background-position: center top;
  background-attachment: fixed;
  opacity: 0.25; z-index: 0;
}
@media (max-width: 768px) { .hero__bg-image { background-attachment: scroll; } }
.hero__content { position: relative; z-index: 1; max-width: var(--content-max-width); width: 100%; text-align: left; padding-bottom: 48px; }
.hero__title { font-family: var(--font-heading); font-size: clamp(42px, 7vw, 63px); font-weight: 400; color: #fff; line-height: var(--line-height-body); margin-bottom: 8pt; }
.hero__subtitle { font-family: var(--font-heading); font-style: italic; font-size: clamp(22px, 3.5vw, 27px); color: #eceef5; line-height: var(--line-height-body); }
.hero__reading-time { font-family: var(--font-body); font-weight: 300; font-size: 18px; color: var(--accent-light); margin-top: 16px; letter-spacing: 0.03em; }
.hero__fade { width: 100%; height: 48px; background: transparent; }


/* ── 10. ARTICLE CONTENT AREA ── */

.content-shell { background: var(--bg-content); position: relative; }
.content-layout { max-width: calc(var(--content-max-width) + var(--sidenav-width) + 48px); margin: 0 auto; display: flex; gap: 32px; padding: 0 24px; }
.content-main { flex: 1; max-width: var(--content-max-width); padding: 24px 0 64px; min-width: 0; }


/* ── 11. SIDE NAVIGATION ── */

.sidenav { position: sticky; top: calc(var(--navbar-height) + 24px); width: var(--sidenav-width); max-height: calc(100vh - var(--navbar-height) - 48px); overflow-y: auto; flex-shrink: 0; padding: 8px 0; align-self: flex-start; scrollbar-width: none; -ms-overflow-style: none; }
.sidenav::-webkit-scrollbar { display: none; }
.sidenav__item { display: block; text-decoration: none; padding: 6px 0 6px 14px; border-left: 2px solid transparent; transition: opacity 0.4s ease, border-color 0.3s ease, color 0.3s ease; cursor: pointer; }
.sidenav__item--h2 { font-family: var(--font-heading); font-size: 18px; font-weight: 600; color: var(--sidenav-inactive-color); margin-top: 8px; line-height: var(--line-height-body); }
.sidenav__item--h3-dot { display: flex; align-items: center; gap: 0; padding: 4px 0 4px 16px; }
.sidenav__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sidenav-dot-color); opacity: 0.3; transition: opacity 0.4s ease, transform 0.3s ease; flex-shrink: 0; }
.sidenav__item--active.sidenav__item--h2 { color: var(--sidenav-active-color); border-left-color: var(--sidenav-active-color); }
.sidenav__item--parent-active.sidenav__item--h2 { color: var(--sidenav-active-color); border-left-color: var(--sidenav-active-color); }
.sidenav__item--active .sidenav__dot { opacity: 1; transform: scale(1.4); }
@media (max-width: 960px) { .sidenav { display: none; } .content-layout { justify-content: center; } }


/* ── 12. ARTICLE TYPOGRAPHY ── */

.post-title { font-family: var(--font-heading); font-size: var(--h1-size); font-weight: 400; color: #3864aa; line-height: var(--line-height-body); margin: 0; }
.body-text p { font-family: var(--font-body); font-weight: var(--body-weight); font-size: var(--body-size); color: var(--body-color); line-height: var(--line-height-body); text-align: justify; margin: var(--body-spacing-before) 0 var(--body-spacing-after) 0; }
.body-text strong, .body-text b { font-weight: var(--body-bold-weight); color: var(--body-bold-color); }
.body-text .last-before-h2 { margin-bottom: 0pt; }

h2 { font-family: var(--font-heading); font-weight: var(--h2-weight); font-size: var(--h2-size); color: var(--accent-primary); line-height: var(--line-height-body); margin: var(--h2-spacing-before) 0 var(--h2-spacing-after) 0; scroll-margin-top: calc(var(--navbar-height) + 16px); }
h3 { font-family: var(--font-body); font-weight: var(--h3-weight); font-size: var(--h3-size); color: var(--accent-secondary); text-transform: uppercase; line-height: var(--line-height-body); margin: var(--h3-spacing-before) 0 var(--h3-spacing-after) 0; scroll-margin-top: calc(var(--navbar-height) + 16px); }
h2 + h3 { margin-top: 0pt; }

.body-text a, .content-main a { font-family: var(--font-body); font-weight: 400; font-size: var(--body-size); color: var(--link-color); text-decoration: none; }
.body-text a:visited, .body-text a:active, .content-main a:visited, .content-main a:active { color: var(--link-color); }


/* ── 13. UTILITY CLASSES (articles) ── */

.tight-below { margin-bottom: 2pt; }
.spacing-before-12 { margin-top: 12pt; }
.spacing-after-4 { margin-bottom: 4pt; }
.first-h3 { margin-top: 2pt; }
.audience-note { font-family: var(--font-body); font-weight: 300; font-style: italic; font-size: var(--body-size); color: #777777; text-align: justify; line-height: var(--line-height-body); margin: 0pt 0 var(--body-spacing-after) 0; }
.audience-note strong { color: #777777; }


/* ── 14. PARAGRAPH TABLE ── */

.para-table { display: table; width: 100%; border-collapse: collapse; table-layout: fixed; }
.para-table__row { display: table-row; }
.para-table__bar { display: table-cell; width: var(--bar-width); background: var(--bar-color); padding: 0; vertical-align: top; }
.para-table__spacer { display: table-cell; width: var(--bar-spacer-width); padding: 0; vertical-align: top; }
.para-table__content { display: table-cell; padding: 0; vertical-align: top; }
@media (max-width: 768px) { .para-table { display: block; } .para-table__row { display: block; } .para-table__bar, .para-table__spacer { display: none; } .para-table__content { display: block; } }


/* ── 15. PULL QUOTES ── */

.pullquote { width: var(--pullquote-width); margin: var(--box-margin) auto; background: var(--pullquote-bg); padding: var(--pullquote-padding-v) var(--pullquote-padding-h); box-shadow: inset 0 0 9px rgba(0,0,0,0.03); }
.body-text .pullquote__text,
.pullquote__text { font-family: var(--pullquote-quote-font); font-style: italic; font-size: var(--pullquote-quote-size); color: var(--pullquote-quote-color); text-align: center; line-height: var(--line-height-body); margin: 0pt; padding: 0; }
.body-text .pullquote__attribution,
.pullquote__attribution { font-family: var(--pullquote-attr-font); font-weight: var(--pullquote-attr-weight); font-style: italic; font-size: var(--pullquote-attr-size); color: var(--pullquote-attr-color); text-align: right; padding-right: var(--pullquote-attr-right-indent); margin: 6pt 0 0pt 0; line-height: var(--line-height-body); }


/* ── 16. LISTS ── */

.body-text ul, .body-text ol { padding-left: 24px; margin: 0 0 var(--body-spacing-after) 0; }
.body-text ul { list-style: disc; }
.body-text ol { list-style: decimal; }
.body-text li { font-family: var(--font-body); font-weight: var(--body-weight); font-size: var(--body-size); color: var(--body-color); line-height: var(--line-height-body); text-align: justify; padding: var(--list-item-spacing) 0 var(--list-item-spacing) 4pt; }
.body-text li strong, .body-text li b { font-weight: var(--body-bold-weight); color: var(--body-bold-color); }
/* Numbered list with bold markers and sub-paragraph support */
.body-text ol.numbered-list > li::marker { font-weight: 700; font-family: var(--font-body); color: var(--body-bold-color); }
.body-text ol.numbered-list > li { padding: 0 0 0 4pt; margin-bottom: var(--body-spacing-after); }
.body-text ol.numbered-list > li:last-child { margin-bottom: 0; }
.body-text ol.numbered-list > li > p { margin: 0 0 var(--body-spacing-after) 0; }
.body-text ol.numbered-list > li > p:last-child { margin-bottom: 0; }


/* ── 17. TECHNICAL ABSTRACT ── */

.tech-abstract { width: 100%; padding: var(--abstract-padding); margin: var(--box-margin) 0; background: var(--abstract-bg); border: none; border-radius: 2px; }
.tech-abstract__label { font-family: var(--font-body); font-weight: 700; font-size: var(--body-size); color: var(--abstract-label-color); margin: 0; padding: 0; line-height: var(--line-height-body); }
.tech-abstract__toggle { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.tech-abstract__triangle { display: inline-block; font-size: 0.65em; transition: transform 0.2s ease; line-height: 1; }
.tech-abstract__toggle.open .tech-abstract__triangle { transform: rotate(90deg); }
.tech-abstract__body { margin-top: 8pt; }
.tech-abstract__body p { font-family: var(--font-body); font-weight: 300; font-size: var(--body-size); color: var(--abstract-text-color); line-height: var(--line-height-body); margin: 8pt 0 0pt 0; }


/* ── 18. LATEX BLOCKS ── */

.latex-block { width: 90%; margin: var(--latex-display-spacing) auto; background: var(--latex-bg); padding: var(--latex-padding); border-radius: 2px; }
.latex-block p { font-family: var(--font-body); font-weight: 300; font-size: var(--body-size); color: var(--latex-text-color); line-height: var(--line-height-body); margin: 8pt 0 0pt 0; }
.latex-block p:first-child { margin-top: 0; }
.latex-display { text-align: center; color: var(--latex-display-color); margin: var(--latex-display-spacing) 0; font-size: var(--latex-display-size); line-height: var(--line-height-body); }
.latex-inline { color: var(--latex-inline-color); }
.latex-display .katex { font-size: 1.05em; }
.latex-inline .katex { font-size: 0.92em; }


/* ── 19. IMAGES ── */

.post-image { text-align: center; margin-top: var(--image-spacing-before); position: relative; }
.post-image img { max-width: 90%; height: auto; cursor: pointer; box-shadow: 0 0 var(--image-shadow-blur) rgba(0,0,0,0.08); }
.post-image.no-caption { margin-bottom: var(--image-spacing-after); }
.post-image.has-caption { margin-bottom: 0pt; }
.post-image__caption { font-family: var(--caption-font); font-weight: var(--caption-weight); font-style: italic; font-size: var(--caption-size); color: var(--caption-color); text-align: center; margin: 4pt 0 14pt 0; line-height: var(--line-height-body); }


/* ── 20. DIAGRAMS ── */

.post-diagram { text-align: center; margin-top: var(--image-spacing-before); position: relative; }
.post-diagram img { max-width: 90%; height: auto; }
.post-diagram.no-caption { margin-bottom: var(--image-spacing-after); }
.post-diagram.has-caption { margin-bottom: 0pt; }
.post-diagram__caption { font-family: var(--caption-font); font-weight: var(--caption-weight); font-style: italic; font-size: var(--caption-size); color: var(--caption-color); text-align: center; margin: 4pt 0 14pt 0; line-height: var(--line-height-body); }
.post-diagram.has-lightbox img { cursor: pointer; }


/* ── 21. ANIMATED GIFS ── */

.post-gif { text-align: center; margin-top: var(--image-spacing-before); }
.post-gif img { max-width: 100%; height: auto; box-shadow: 0 0 var(--image-shadow-blur) rgba(0,0,0,0.08); }
.post-gif.size-75 img { zoom: 0.75; }
.post-gif.no-caption { margin-bottom: var(--image-spacing-after); }
.post-gif.has-caption { margin-bottom: 0pt; }


/* ── 22. INTERACTIVE EMBEDS ── */

.interactive-embed { margin: var(--embed-spacing) 0; display: flex; justify-content: center; }
.interactive-embed iframe { border: none; max-width: 100%; background: transparent; }
@media (max-width: 768px) {
  .interactive-embed iframe[src="pareto_frontier_2D.html"] { height: 500px; }
  .interactive-embed iframe[src="2D_with_error.html"] { height: 500px; }
  .interactive-embed iframe[src="pith_volume.html"] { width: 100%; }
}


/* ── 23. IMAGE LIGHTBOX ── */

.lightbox { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.85); align-items: center; justify-content: center; cursor: zoom-out; opacity: 0; transition: opacity 0.3s ease; }
.lightbox.active { display: flex; opacity: 1; }
.lightbox img { max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: 4px; }
.lightbox__close { position: absolute; top: 20px; right: 24px; color: #fff; font-size: 28px; cursor: pointer; background: none; border: none; line-height: 1; opacity: 0.7; transition: opacity 0.2s; }
.lightbox__close:hover { opacity: 1; }


/* ── 24. SCROLL-TO-TOP ── */

.scroll-top { position: fixed; bottom: 28px; right: 28px; z-index: 900; width: 40px; height: 40px; border-radius: 50%; background: var(--dark-bg); color: #fff; border: 1px solid rgba(255,255,255,0.15); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.2s ease; }
.scroll-top.visible { opacity: 0.8; pointer-events: auto; }
.scroll-top:hover { opacity: 1; transform: translateY(-2px); }

.scroll-top-pill { text-align: center; margin: 32pt 0 16pt; }
.scroll-top-pill button { font-family: var(--font-body); font-weight: 400; font-size: 10pt; color: #888; background: none; border: 1px solid #ddd; border-radius: 20px; padding: 6px 20px; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; }
.scroll-top-pill button:hover { color: var(--accent-primary); border-color: var(--accent-primary); }


/* ── 24b. HAMBURGER MENU ── */

.navbar__hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; margin-left: auto; }
.navbar__hamburger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 1px; transition: transform 0.2s ease, opacity 0.2s ease; }
.navbar__mobile-menu { display: none; position: fixed; top: var(--navbar-height); left: 0; right: 0; background: rgba(40, 52, 63, 0.97); border-top: 1px solid #444; z-index: 1999; flex-direction: column; padding: 6px 0 12px; }
.navbar__mobile-menu.open { display: flex; }
.navbar__mobile-menu a { font-family: var(--font-heading); font-weight: 600; font-size: 18px; color: #fff; padding: 13px 32px; text-decoration: none; letter-spacing: 0.02em; transition: background 0.15s ease; }
.navbar__mobile-menu a:hover { background: rgba(255,255,255,0.07); }
@media (max-width: 768px) {
  .navbar__links { display: none; }
  .navbar__hamburger { display: flex; }
}


/* ── 25. POST FOOTER ── */

.post-footer { font-family: var(--font-body); font-weight: 300; font-style: italic; font-size: var(--body-size); color: var(--body-color); text-align: left; line-height: var(--line-height-body); margin: 24pt 0 0 0; padding-top: 16pt; border-top: 1px solid #e8e8e8; }
.post-footer a { color: var(--link-color); text-decoration: none; }


/* ── 26. TABLE OF CONTENTS ── */

.body-text .toc {
  width: 90%; margin: 16pt auto;
  padding: var(--pullquote-padding-v) var(--pullquote-padding-h);
  background: #F2F6F7;
  box-shadow: inset 0 0 9px rgba(0,0,0,0.03);
  color: #45818E;
}
.body-text .toc__heading { font-family: var(--font-body); font-weight: 700; font-size: 10pt; color: #45818E; margin: 0 0 8pt 0; line-height: var(--line-height-body); }
.body-text .toc__item { display: block; font-family: var(--font-body); font-weight: 300; font-size: 10pt; color: #45818E; text-decoration: none; line-height: var(--line-height-body); }
.body-text .toc__item:visited, .body-text .toc__item:active, .body-text .toc__item:hover { color: #45818E; text-decoration: none; }
.body-text .toc__item--abstract { padding-left: 16pt; font-weight: 700; margin: 0 0 4pt 0; }
.body-text .toc__item--h2 { padding-left: 16pt; font-weight: 700; margin: 8pt 0 4pt 0; }
.body-text .toc__item--h3 { padding-left: 32pt; margin: 4pt 0; }


/* ── 27. LATEX PREVIEW (click-to-expand) ── */

.latex-preview { position: relative; width: 90%; margin: var(--latex-display-spacing) auto; cursor: pointer; overflow: hidden; transition: box-shadow 0.2s ease; }
.latex-preview:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.10); }
.latex-preview__inner { background: var(--latex-bg); padding: var(--latex-padding); border-radius: 2px; box-shadow: 0 1px 6px rgba(0,0,0,0.08); transform: scale(0.4); transform-origin: top center; }
.latex-preview__inner p { font-family: var(--font-body); font-weight: 300; font-size: var(--body-size); color: var(--latex-text-color); line-height: var(--line-height-body); margin: 8pt 0 0pt 0; }
.latex-preview__inner p:first-child { margin-top: 0; }
.latex-preview__inner .latex-display { text-align: center; color: var(--latex-display-color); margin: var(--latex-display-spacing) 0; font-size: var(--latex-display-size); line-height: var(--line-height-body); }
.latex-preview__inner .latex-display .katex { font-size: 1.05em; }
.latex-preview__inner .latex-inline .katex { font-size: 0.92em; }
.latex-preview__inner .latex-inline { color: var(--latex-inline-color); }


/* ── 28. EXPAND HINT ── */

.expand-hint { position: absolute; bottom: 8px; right: 8px; width: 28px; height: 28px; background: rgba(160,168,176,0.75); border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.65; transition: opacity 0.2s ease; z-index: 2; }
.expand-hint svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2; fill: none; }
.post-image:hover .expand-hint, .post-diagram.has-lightbox:hover .expand-hint, .latex-preview:hover .expand-hint, span:hover > .expand-hint { opacity: 0.95; }


/* ── 29. HTML LIGHTBOX (LaTeX) ── */

.lightbox-html { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.85); align-items: center; justify-content: center; cursor: zoom-out; opacity: 0; transition: opacity 0.3s ease; }
.lightbox-html.active { display: flex; opacity: 1; }
.lightbox-html__content { background: var(--latex-bg); padding: 24pt; border-radius: 6px; max-width: 92vw; max-height: 92vh; overflow: auto; cursor: default; }
.lightbox-html__content p { font-family: var(--font-body); font-weight: 300; font-size: var(--body-size); color: var(--latex-text-color); line-height: var(--line-height-body); margin: 8pt 0 0pt 0; }
.lightbox-html__content p:first-child { margin-top: 0; }
.lightbox-html__content .latex-display { text-align: center; color: var(--latex-display-color); margin: var(--latex-display-spacing) 0; font-size: var(--latex-display-size); line-height: var(--line-height-body); }
.lightbox-html__content .latex-display .katex { font-size: 1.05em; }
.lightbox-html__content .latex-inline .katex { font-size: 0.92em; }
.lightbox-html__content .latex-inline { color: var(--latex-inline-color); }
.lightbox-html__close { position: absolute; top: 20px; right: 24px; color: #fff; font-size: 28px; cursor: pointer; background: none; border: none; line-height: 1; opacity: 0.7; transition: opacity 0.2s; }
.lightbox-html__close:hover { opacity: 1; }


/* ── 30. SLIDESHOW BACKGROUND (available but not active by default) ── */

.cb-slideshow, .cb-slideshow:after { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 0; }
.cb-slideshow li { width: 100%; height: 100%; position: absolute; top: 0; left: 0; color: transparent; background-size: cover; background-position: 50% 50%; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; animation: imageAnimation 72s linear infinite 0s; }
.cb-slideshow li:nth-child(1) { background-image: url(../img/letter_bg_01.jpg); }
.cb-slideshow li:nth-child(2) { background-image: url(../img/letter_bg_02.jpg); animation-delay: 12s; }
.cb-slideshow li:nth-child(3) { background-image: url(../img/letter_bg_03.jpg); animation-delay: 24s; }
.cb-slideshow li:nth-child(4) { background-image: url(../img/letter_bg_01.jpg); animation-delay: 36s; }
.cb-slideshow li:nth-child(5) { background-image: url(../img/letter_bg_02.jpg); animation-delay: 48s; }
.cb-slideshow li:nth-child(6) { background-image: url(../img/letter_bg_03.jpg); animation-delay: 60s; }
@keyframes imageAnimation { 0% { opacity: 0; } 8% { opacity: 1; transform: scale(1.15); } 17% { opacity: 1; transform: scale(1.20); } 25% { opacity: 0; transform: scale(1.40); } 100% { opacity: 0; } }