/**
 * blog.css — Pixel-perfect Nature.com replica
 * Matched to: https://www.nature.com/articles/d41586-026-01866-1
 * 
 * Fonts: self-hosted local typography system:
 *   — --f-ui      'Inter'            → navigation, buttons, forms, metadata, sidebar, tables, UI elements
 *   — --f-body    'Source Serif 4'   → article body, paragraphs, lists, blockquotes, reading content
 *   — --f-display 'Marcellus'        → site logo, hero title, article H1, premium display titles
 *
 * Exact Nature palette extracted from live page:
 *   Header bg:    #000000
 *   Nav bg:       #f5f5f5 / border #d5d5d5
 *   Red accent:   #c0392b (Nature logo red) → we use #cc0000
 *   Link blue:    #053A59
 *   Body text:    #333333
 *   Heading:      #1a1a1a
 *   Border:       #d5d5d5
 *   Footer bg:    #252525
 */

/* ── 0. FONTS ── */
/* Fonts for the UI Components */
/* @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/Font/inter/Inter-Regular.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/Font/inter/Inter-SemiBold.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/Font/inter/Inter-Bold.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:italic;font-weight:400;font-display:swap;src:url('/Font/inter/Inter-Italic.woff2') format('woff2');} */

/* Fonts for the Text/Body Components */
/* @font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url('/Font/source-serif-4/SourceSerif4-Regular.woff2') format('woff2');}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url('/Font/source-serif-4/SourceSerif4-Italic.woff2') format('woff2');}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:700;font-display:swap;src:url('/Font/source-serif-4/SourceSerif4-Bold.woff2') format('woff2');} */

/* Fonts for the Hero/ Logo/ Premium Titles */
/* @font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url('/Font/marcellus/Marcellus-Regular.woff2') format('woff2');} */


/* :root{--f-ui:'Inter',sans-serif;--f-body:'Inter',serif;--f-display:'Marcellus',serif;} */

:root {
  /* Nature exact colours */
  --n-black:        #000000;
  --n-header:       #000000;
  --n-blue:         #053A59;
  --n-blue-dk:      #004d73;
  --n-blue-lt:      #e8f4f9;
  --n-white:        #ffffff;
  --n-bg:           #ffffff;
  --n-bg-lt:        #f8f8f8;
  --n-bg-md:        #f0f0f0;
  --n-text:         #000000;
  --n-text-mid:     #555555;
  --n-text-lt:      #777777;
  --n-text-xlt:     #999999;
  --n-border:       #d5d5d5;
  --n-border-lt:    #e8e8e8;
  --n-footer:       #00324B;
  --n-footer-mid:   #00324B;
  --n-footer-text:  #ffffff;
  --n-footer-head:  #eeeeee;
  --n-footer-bdr:   rgba(255,255,255,0.1);
  --n-oa:           #b07d00;
  --n-oa-bg:        #fdf8ed;

  /* Type scale — taken from Nature's actual computed styles */
  --t-11: 0.6875rem;
  --t-12: 0.75rem;
  --t-13: 0.8125rem;
  --t-14: 0.875rem;
  --t-15: 0.9375rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-20: 1.25rem;
  --t-22: 1.375rem;
  --t-26: 1.625rem;
  --t-30: 1.875rem;
  --t-36: 2.25rem;

  /* Layout */
  --max-w:        1240px;
  --art-w:        90%;
  --side-w:       270px;
  --gap:          30px;
  --gutter:       20px;

  /* Spacing */
  --sp1: 0.5rem;
  --sp2: 1rem;
  --sp3: 1.5rem;
  --sp4: 2rem;
  --sp5: 3rem;
  --sp6: 4rem;

  /* Header heights */
  --h-bar:    64px;
  --h-nav:    44px;
  --h-total:  calc(var(--h-bar) + var(--h-nav));

  /* Transitions */
  --ease: cubic-bezier(0.2, 0, 0.38, 0.9);
  --fast: 130ms;
  --base: 220ms;
}

/* ── 2. RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

img,
table {
    max-width: 100%;
}

/* CODE BLOCK — Xcode-style, IBM Plex Mono, white */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  --cb-font:    'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;
  --cb-size:    0.8125rem;
  --cb-lh:      1.75;
  --cb-gutter:  3rem;
  --cb-ln-w:    2.6rem;
  --cb-surface: #ffffff;
  --cb-gutter-bg: #f5f6f8;
  --cb-gutter-border: #e4e7ec;
  --cb-ln-color: #adb5bd;
  --cb-text:    #1c1c1e;
  --cb-border:  #e4e7ec;
  --cb-radius:  10px;
}

/* Outer wrapper */
.cb-wrap {
  position: relative;
  margin: 1.5rem 0;
  border: 1px solid var(--cb-border);
  border-radius: 0px;
  background: var(--cb-surface);
  overflow: hidden;
  max-width: 100%;
}

/* Header: language label left, copy button right */
.cb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 1rem 0.45rem var(--cb-gutter);
  background: var(--cb-gutter-bg);
  border-bottom: 1px solid var(--cb-gutter-border);
}

.cb-lang {
  font-family: var(--f-ui, sans-serif);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6b7280;
}

.cb-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid var(--cb-border);
  border-radius: 4px;
  background: #fff;
  color: #053A59;
  font-family: var(--f-ui, sans-serif);
  font-size: 0.68rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 120ms, border-color 120ms;
  white-space: nowrap;
}
.cb-copy:hover, .cb-copy:focus-visible {
  color: var(--n-blue, #053A59);
  border-color: var(--n-blue, #053A59);
  outline: none;
}
.cb-copy:focus-visible { box-shadow: 0 0 0 2px rgba(0,102,153,0.18); }
.cb-copy.is-copied     { color: #16a34a; border-color: #16a34a; }

/* Horizontal scroll */
.cb-body {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
  padding-left: 5%;
}
.cb-body::-webkit-scrollbar       { height: 4px; }
.cb-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; }

/* <pre> reset — padding handled per-line */
.cb-wrap pre {
  position: relative;
  margin: 0 !important;
  padding: 0.75rem 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  font-family: var(--cb-font) !important;
  font-size: var(--cb-size) !important;
  line-height: var(--cb-lh) !important;
  color: var(--cb-text) !important;
  white-space: pre;
  word-break: normal;
  max-width: none;
  counter-reset: cb-line;
}

/* Gutter background strip */
.cb-wrap pre::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--cb-gutter);
  pointer-events: none;
  z-index: 0;
}

/* Each wrapped line */
.cb-wrap pre .cb-line {
  display: block;
  padding: 0 1.25rem 0 var(--cb-gutter);
  position: relative;
  z-index: 1;
}
.cb-wrap pre .cb-line::before {
  content: counter(cb-line);
  counter-increment: cb-line;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cb-ln-w);
  text-align: right;
  color: var(--cb-ln-color);
  font-size: var(--cb-size);
  line-height: var(--cb-lh);
  user-select: none;
  pointer-events: none;
}

/* Highlighted line accent */
.cb-wrap pre .cb-line.cb-line--hl {
  background: rgba(0,102,153,0.055);
}
.cb-wrap pre .cb-line.cb-line--hl::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--n-blue, #053A59);
  border-radius: 0 2px 2px 0;
}

/* ── Token colours — Xcode Light palette ── */
.cb-wrap .token.comment,
.cb-wrap .token.prolog,
.cb-wrap .token.cdata         { color: #6c7986; font-style: italic; }
.cb-wrap .token.keyword,
.cb-wrap .token.atrule        { color: #9b2393; }
.cb-wrap .token.string,
.cb-wrap .token.attr-value,
.cb-wrap .token.char          { color: #c41a16; }
.cb-wrap .token.number,
.cb-wrap .token.boolean,
.cb-wrap .token.constant      { color: #1c00cf; }
.cb-wrap .token.function,
.cb-wrap .token.class-name    { color: #326d74; }
.cb-wrap .token.builtin,
.cb-wrap .token.selector      { color: #5c2699; }
.cb-wrap .token.variable,
.cb-wrap .token.attr-name     { color: #0f68a0; }
.cb-wrap .token.property      { color: #1c1c1e; }
.cb-wrap .token.operator,
.cb-wrap .token.punctuation   { color: #1c1c1e; }
.cb-wrap .token.tag           { color: #9b2393; }
.cb-wrap .token.important,
.cb-wrap .token.bold          { font-weight: 600; }
.cb-wrap .token.italic        { font-style: italic; }

/* ── Inline code ── */
:not(pre) > code {
  font-family: var(--cb-font);
  font-size: 0.83em;
  padding: 0.13em 0.4em;
  border-radius: 4px;
  background: #f0f2f5;
  color: #9b2393;
  border: 1px solid #e4e7ec;
  word-break: break-word;
}

/* ── Hide Prism toolbar (we use our own header) ── */
.cb-wrap div.code-toolbar > .toolbar { display: none !important; }
img {
    height: auto;
}
body.blog-page {
  font-family: var(--f-ui);
  font-size: var(--t-16);
  line-height: 1.6;
  color: var(--n-text);
  background: var(--n-bg);
  min-height: 100vh;
}

/* ── 3. PROGRESS BAR ── */
.blog-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0%;
  background: var(--n-blue);
  z-index: 9999;
  transition: width 80ms linear;
  border-radius: 0 2px 2px 0;
  pointer-events: none;
}
.blog-resource__type{
  font-size: var(--t-15);
  font-weight: 700;
}
/* ── 4. ACCESSIBILITY ── */
.blog-skip {
  position: absolute; top: -50px; left: var(--gutter);
  background: var(--n-blue); color: #fff;
  font-family: var(--f-ui); font-size: var(--t-12); font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 8px 14px; text-decoration: none; z-index: 9999;
  transition: top var(--fast);
}
.blog-skip:focus { top: 0; }

.blog-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── 5. STICKY MINI-HEADER ── */
/* Sits below header.php's two sticky bars (64px topbar + 46px subnav = 110px).
   z-index 750 keeps it above page content but below the main nav (800/700). */
.blog-sticky {
  position: fixed; top: 0;  left: 0;  right: 0; z-index: 750;

  /* Premium glass — same recipe as the sidebar wrapper */
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(52px) saturate(180%);
  -webkit-backdrop-filter: blur(52px) saturate(180%);

  /* Border: top edge inherits the white "shine", bottom edge is the accent stripe */
  border-top: 1px solid rgba(255, 255, 255, 0.95);
  border-bottom: none;

  box-shadow:
    0 1px 0 rgba(10, 35, 67, 0.05),
    0 8px 28px -8px rgba(10, 35, 67, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);

  transform: translateY(-150%);
  opacity: 0;
  transition: transform var(--base) var(--ease),
              opacity  var(--base) var(--ease);
  pointer-events: none;
}

/* Bottom accent ribbon — navy → blue, same as sidebar top stripe */
.blog-sticky::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  opacity: 0.9;
  pointer-events: none;
}

/* Soft shadow veil dissolves into page content */
.blog-sticky::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -14px;
  height: 14px;
  background: linear-gradient(to bottom, rgba(10,35,67,0.04) 0%, rgba(10,35,67,0.00) 100%);
  pointer-events: none;
}

.blog-sticky.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }

.blog-sticky__inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 10px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp3);
}
.blog-sticky__title {
  font-family: var(--f-ui); font-size: var(--t-20); font-weight: 700;
  color: var(--n-text); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-width: 0;
}
.blog-sticky__cta { flex-shrink: 0; }

/* ── 6. BLACK TOP BAR ── */
.blog-utility {
  background: var(--n-header);
  border-bottom: none;
  position: sticky; top: 0; z-index: 600;
}
.blog-utility__inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--h-bar);
  display: flex; align-items: center; gap: var(--sp2);
}

/* Nature wordmark area */
.blog-utility__brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; margin-right: auto; flex-shrink: 0;
}
.blog-utility__mark {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--n-blue); color: #fff;
  font-family: var(--f-ui); font-size: var(--t-11); font-weight: 900;
  flex-shrink: 0;
}
.blog-utility__name {
  font-family: var(--f-display); font-size: var(--t-18); font-weight: 800;
  color: #ffffff; letter-spacing: 0.01em; white-space: nowrap;
}
.blog-utility__sep { color: rgba(255,255,255,0.25); margin: 0 4px; font-size: var(--t-20); font-weight: 200; }
.blog-utility__sub { font-size: var(--t-11); font-weight: 400; color: rgba(255,255,255,0.5); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }

.blog-utility__actions { display: flex; align-items: center; gap: 0; }

.blog-utility__link {
  font-family: var(--f-ui); font-size: var(--t-13); font-weight: 500;
  color: rgba(255,255,255,0.8); text-decoration: none;
  padding: 0 12px; height: var(--h-bar);
  display: flex; align-items: center; white-space: nowrap;
  border-left: 1px solid rgba(255,255,255,0.1);
  transition: color var(--fast), background var(--fast);
}
.blog-utility__link:hover { color: #fff; background: rgba(255,255,255,0.07); }
.blog-utility__link:first-child { border-left: none; }

.blog-utility__icon-btn {
  display: flex; align-items: center; gap: 5px;
  background: none; border: none; border-left: 1px solid rgba(255,255,255,0.1);
  font-family: var(--f-ui); font-size: var(--t-13); font-weight: 500;
  color: rgba(255,255,255,0.8); cursor: pointer;
  padding: 0 12px; height: var(--h-bar); white-space: nowrap;
  transition: color var(--fast), background var(--fast);
}
.blog-utility__icon-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.blog-utility__icon-btn:hover { color: #fff; background: rgba(255,255,255,0.07); }
.blog-utility__icon-btn span:not(.blog-sr-only) { display: none; }
.blog-utility__icon-btn--account span:not(.blog-sr-only) { display: inline; }
.blog-caret { font-size: 0.6em; color: rgba(255,255,255,0.4); margin-left: 2px; }

/* Mobile toggle */
.blog-utility__menu-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.3);
  background: transparent; cursor: pointer; padding: 0; margin-left: auto;
}
.blog-utility__menu-toggle span {
  display: block; height: 1.5px; width: 16px; margin: 0 auto;
  background: rgba(255,255,255,0.85);
  transition: transform var(--fast), opacity var(--fast);
}
.blog-utility__menu-toggle.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.blog-utility__menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.blog-utility__menu-toggle.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ── 7. SECTION NAV (grey bar below black bar) ── */
.blog-subnav {
  background: var(--n-bg-lt);
  border-bottom: 1px solid var(--n-border);
}
.blog-subnav__inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: var(--h-nav);
  display: flex; align-items: stretch; justify-content: space-between;
}
.blog-subnav__left, .blog-subnav__right {
  display: flex; align-items: stretch; list-style: none;
}
.blog-subnav__left a, .blog-subnav__right a {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--f-ui); font-size: var(--t-13); font-weight: 500;
  color: var(--n-text-mid); text-decoration: none;
  padding: 0 14px; white-space: nowrap;
  border-right: 1px solid var(--n-border-lt);
  transition: color var(--fast), background var(--fast);
}
.blog-subnav__left li:first-child a { border-left: 1px solid var(--n-border-lt); }
.blog-subnav__right li:last-child a { border-right: none; }
.blog-subnav__left a:hover, .blog-subnav__right a:hover {
  background: var(--n-white); color: var(--n-blue);
}
.blog-subnav__icon { width: 13px; height: 13px; flex-shrink: 0; }

/* ── 8. BREADCRUMB ── */
.blog-breadcrumb {
  background: var(--n-white);
  border-bottom: 1px solid var(--n-border-lt);
}
.blog-breadcrumb__inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 8px var(--gutter);
  font-family: var(--f-ui); font-size: var(--t-12);
  color: var(--n-text-xlt);
  display: flex; align-items: center; gap: 4px;
  overflow-x: auto; white-space: nowrap;
}
.blog-breadcrumb__inner a { color: var(--n-blue); text-decoration: none; }
.blog-breadcrumb__inner a:hover { text-decoration: underline; color: var(--n-blue-dk); }
.blog-breadcrumb__sep { color: var(--n-border); }
.blog-breadcrumb__current { color: var(--n-text-mid); font-weight: 500; }

/* ── 9. PAGE SHELL ── */
.blog-shell {
  max-width: var(--max-w); margin: 0 auto;
  padding: var(--sp4) var(--gutter) var(--sp6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 25%;
  gap: var(--gap);
  align-items: start;
}
.blog-main { min-width: 0; max-width: var(--art-w); }
@media (max-width: 768px) {
  .blog-shell { padding: 0.65rem var(--gutter) var(--sp3); }
}

/* ── 10. ARTICLE MASTHEAD ── */
.blog-masthead {
  padding-bottom: var(--sp3);
  margin-bottom: var(--sp3);
  border-bottom: 1px solid var(--n-border);
}
@media (max-width: 768px) {
  .blog-masthead { padding-bottom: 0.6rem; margin-bottom: 0.6rem; }
}

/* Article type label — exactly as Nature renders "NEWS Q&A" */
.blog-article-badge {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-bottom: var(--sp2);
  font-family: var(--f-ui); font-size: var(--t-12); color: var(--n-text-lt);
}
@media (max-width: 768px) {
  .blog-article-badge { gap: 5px; margin-bottom: 0.4rem; font-size: 0.6rem; }
  .blog-article-badge__type { font-size: 0.6rem; letter-spacing: 0.08em; border-bottom-width: 1.5px; }
  .blog-article-badge__date { font-size: 0.6rem; color: var(--n-text-xlt); }
  .blog-article-badge__oa { font-size: 0.6rem; }
}
.blog-article-badge__type {
  font-family: var(--f-ui); font-size: var(--t-11); font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--n-blue);
  padding-bottom: 1px;
  border-bottom: 2px solid var(--n-blue);
}
.blog-article-badge__sep { color: var(--n-border); }
.blog-article-badge__date { color: var(--n-text-lt); font-weight: 400; }
.blog-article-badge__oa {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--n-oa); font-weight: 600; font-size: var(--t-11);
}
.blog-article-badge__dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--n-oa);
}

/* Title — Marcellus display serif for premium article headline */
.blog-title {
  font-family: var(--f-display);
  font-size: clamp(var(--t-22), 3.2vw, var(--t-36));
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--n-black);
  margin-bottom: var(--sp2);
}
@media (max-width: 768px) {
  .blog-title {
    font-size: clamp(1.2rem, 4.8vw, 1.5rem);
    font-weight: 550;
    line-height: 1.08;
    letter-spacing: -0.012em;
    margin-bottom: 0.5rem;
  }
}
@media (max-width: 480px) {
  .blog-title { font-size: 1.2rem; font-weight: 550; margin-bottom: 0.4rem; }
}

/* Subtitle / deck — italic serif, Nature's deck style */
.blog-subtitle {
  font-family: var(--f-body);
  font-size: var(--t-18);
  font-weight: 400;
  color: var(--n-text-mid);
  line-height: 1.5;
  margin-bottom: var(--sp3);
}
@media (max-width: 768px) {
  .blog-subtitle { font-size: var(--t-15); line-height: 1.45; margin-bottom: var(--sp2); }
}

/* Author block */
.blog-authors {
  font-family: var(--f-ui); font-size: var(--t-14);
  color: var(--n-text-mid); margin-bottom: var(--sp1); line-height: 1.8;
}
@media (max-width: 768px) {
  .blog-authors { font-size: 0.775rem; line-height: 1.5; margin-bottom: 0.3rem; color: var(--n-text-lt); }
}
.blog-authors a { color: var(--n-blue); text-decoration: none; font-weight: 600; }
.blog-authors a:hover { text-decoration: underline; color: var(--n-blue-dk); }

.blog-pill {
  display: inline-flex; align-items: center;
  font-family: var(--f-ui); font-size: var(--t-11); font-weight: 600;
  color: var(--n-blue); background: none;
  border: 1px solid var(--n-blue);
  padding: 2px 8px; margin-left: var(--sp1); cursor: pointer;
  transition: background var(--fast), color var(--fast); vertical-align: middle;
}
.blog-pill:hover { background: var(--n-blue); color: #fff; }

/* Share row — Nature's icon row */
.blog-share {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: var(--sp2) 0;
  border-top: 1px solid var(--n-border-lt);
  border-bottom: 1px solid var(--n-border-lt);
  margin-bottom: var(--sp3);
}
@media (max-width: 768px) {
  .blog-share { padding: 0.45rem 0; margin-bottom: 0.6rem; gap: 4px; border-top-color: var(--n-border-lt); border-bottom-color: var(--n-border-lt); }
  .blog-share__label { font-size: 0.6rem; letter-spacing: 0.06em; }
  .blog-share__btn { font-size: 0.675rem; padding: 3px 7px; border-color: var(--n-border-lt); color: var(--n-text-xlt); }
  .blog-share__btn svg { width: 11px; height: 11px; }
}
.blog-share__label {
  font-family: var(--f-ui); font-size: var(--t-11); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--n-text-lt);
  margin-right: 4px;
}
.blog-share__btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--f-ui); font-size: var(--t-12); font-weight: 500;
  color: var(--n-text-mid); background: none;
  border: 1px solid var(--n-border); padding: 5px 10px; cursor: pointer;
  text-decoration: none;
  transition: background var(--fast), border-color var(--fast), color var(--fast);
}
.blog-share__btn:hover { background: var(--n-bg-lt); border-color: var(--n-text-lt); color: var(--n-text); }
.blog-share__btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Citation line */
.blog-cite-line {
  font-family: var(--f-ui); font-size: var(--t-12); color: var(--n-text-xlt);
  margin-bottom: var(--sp1); letter-spacing: 0.01em;
}
.blog-cite-line a { color: var(--n-blue); text-decoration: underline; text-underline-offset: 2px; }

/* Meta accesses row */
.blog-meta-stats {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px var(--sp2);
  font-family: var(--f-ui); font-size: var(--t-12); color: var(--n-text-xlt);
  padding-top: var(--sp1); letter-spacing: 0.01em;
}
.blog-meta-stats strong { color: var(--n-text); font-weight: 700; }
.blog-meta-stats__item { display: inline-flex; align-items: center; gap: 3px; }
.blog-meta-stats__sep { color: var(--n-border); }
.blog-meta-stats a { color: var(--n-blue); text-decoration: none; font-weight: 500; }
.blog-meta-stats a:hover { text-decoration: underline; }

/* ── 11. HERO IMAGE (full-width article image) ── */
.blog-hero {
  margin: var(--sp4) 0;
}
.blog-hero img {
  width: 100%; display: block; max-height: 480px; object-fit: cover;
}
@media (max-width: 768px) {
  .blog-hero { margin: 0.5rem 0 0.75rem; }
  .blog-hero img { max-height: 230px; border-radius: 2px; }
}
@media (max-width: 480px) {
  .blog-hero img { max-height: 195px; border-radius: 0; }
}
.blog-hero figcaption {
  font-family: var(--f-ui); font-size: var(--t-12);
  color: var(--n-text-lt); line-height: 1.5;
  padding: 8px 0;
  border-bottom: 1px solid var(--n-border-lt);
}
.blog-hero figcaption strong { color: var(--n-text); }

/* ── 12. ABSTRACT / STANDFIRST ── */
.blog-abstract {
  font-family: var(--f-body);
  font-size: var(--t-16); font-weight: 400;
  color: var(--n-text);
  line-height: 1.75;
  margin-bottom: var(--sp3);
  padding-bottom: var(--sp2);
}
.blog-abstract__label {
  font-family: var(--f-ui); font-size: var(--t-11); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--n-blue); display: block; margin-bottom: var(--sp1);
}
@media (max-width: 768px) {
  .blog-abstract { font-size: 0.8375rem; line-height: 1.6; margin-bottom: 0.6rem; padding-bottom: 0.4rem; }
  .blog-abstract__label { font-size: 0.585rem; margin-bottom: 0.3rem; letter-spacing: 0.09em; }
}

/* ── 13. HEADINGS ── */
.blog-main h2 {
  font-family: var(--f-display);
  font-size: var(--t-30); font-weight: 700;
  color: var(--n-black);
  margin-top: var(--sp1); margin-bottom: var(--sp2);
  line-height: 1.28; letter-spacing: -0.01em;
  scroll-margin-top: calc(var(--h-total) + 20px);
}
.blog-main h3 {
  font-family: var(--f-ui);
  font-size: var(--t-16); font-weight: 700;
  color: var(--n-black);
  margin-top: var(--sp3); margin-bottom: var(--sp1);
  line-height: 1.3; scroll-margin-top: calc(var(--h-total) + 20px);
}
.blog-main h4 {
  font-family: var(--f-ui); font-size: var(--t-12); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--n-text-lt);
  margin-top: var(--sp2); margin-bottom: 4px;
}
.blog-section-rule { border: none; border-top: 1px solid var(--n-border-lt); margin: var(--sp4) 0; }
@media (max-width: 768px) {
  .blog-main h2 { margin-top: 1.4rem; margin-bottom: 0.35rem; line-height: 1.18; letter-spacing: -0.01em; }
  .blog-main h3 { margin-top: 1.1rem; margin-bottom: 0.25rem; line-height: 1.22; }
  .blog-main h4 { margin-top: 0.9rem; margin-bottom: 2px; font-size: 0.6rem; letter-spacing: 0.09em; }
  .blog-section-rule { margin: 1.1rem 0; }
}

/* ── 14. BODY TEXT ── */
.blog-main p {
  font-family: var(--f-body);
  font-size: var(--t-18); line-height: 2rem;
  color: var(--n-text); margin-bottom: var(--sp2);
}
@media (max-width: 768px) {
  .blog-main p { font-size: 0.9rem; line-height: 1.68; margin-bottom: 0.65rem; }
}
@media (max-width: 480px) {
  .blog-main p { font-size: 0.875rem; line-height: 1.64; margin-bottom: 0.55rem; }
}

.article-abstract p{
  line-height: 1.70 !important;
  padding: 10px;
  /* border: 1px solid #e0e0e0; */
  /* border-bottom: 3px solid #EDBD54; */
  border-radius: 0px;
  background: #fff;
  position: relative;
  color: #333;
}


@media (max-width: 640px) {
  .article-abstract p {
    font-size: 0.8125rem !important;
    line-height: 1.58 !important;
    padding: 8px 10px;
  }
}

.blog-main a {
  color: var(--n-blue); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
  transition: color var(--fast);
}
.blog-main a:hover { color: var(--n-blue-dk); }
.blog-main strong { font-weight: 700; color: var(--n-text); }

/* In-article image */
.blog-inline-img {
  margin: var(--sp3) 0;
  border-top: 1px solid var(--n-border-lt);
  padding-top: var(--sp2);
}
.blog-inline-img img { width: 100%; display: block; max-height: auto; object-fit: cover; }
.blog-inline-img figcaption {
  font-family: var(--f-ui); font-size: var(--t-12); color: var(--n-text-lt);
  padding-top: 8px; line-height: 1.5;
}

/* Related article link box — Nature's inline link boxes */
.blog-related-inline {
  border: 1px solid var(--n-border);
  margin: var(--sp3) 0;
  padding: var(--sp2) var(--sp2);
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--n-bg-lt);
  text-decoration: none;
  transition: background var(--fast);
}
.blog-related-inline:hover { background: var(--n-blue-lt); }
.blog-related-inline__label {
  font-family: var(--f-ui); font-size: var(--t-10); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--n-blue);
  display: block; margin-bottom: 4px;
}
.blog-related-inline__title {
  font-family: var(--f-ui); font-size: var(--t-14); font-weight: 600;
  color: var(--n-blue); line-height: 1.35;
}

/* ── 15. LISTS ── */
.blog-main ul, .blog-main ol {margin-bottom: var(--sp2); }
.blog-main li {
  font-family: var(--f-body); font-size: var(--t-16);
  line-height: 1.75; color: var(--n-text); margin-bottom: 4px;
}
@media (max-width: 768px) {
  .blog-main ul, .blog-main ol { margin-bottom: 0.55rem; }
  .blog-main li { font-size: 0.875rem; line-height: 1.62; margin-bottom: 2px; }
}
.blog-main ul { list-style-type: none; }
.blog-main ul li::marker { display: none; }

/* ── 16. REFERENCES SECTION ── */
.blog-references { margin-top: var(--sp4); }
.blog-references h2 {
  font-family: var(--f-ui); font-size: var(--t-18); font-weight: 700;
  margin-bottom: var(--sp2); padding-bottom: var(--sp1);
  border-bottom: 2px solid var(--n-border);
  color: var(--n-black);
}
.blog-ref {
  font-family: var(--f-ui); font-size: var(--t-13);
  color: var(--n-text-mid); padding: var(--sp1) 0;
  border-bottom: 1px solid var(--n-border-lt);
  line-height: 1.6; display: flex; gap: var(--sp1);
}
.blog-ref:last-child { border-bottom: none; }
.blog-ref__num { flex-shrink: 0; color: var(--n-text-xlt); font-weight: 600; min-width: 24px; }
.blog-ref a { color: var(--n-blue); text-decoration: underline; text-underline-offset: 2px; }

/* ── 17. RELATED ARTICLES GRID ── */
.blog-related { margin-top: var(--sp4); }
.blog-related h2 {
  font-family: var(--f-ui); font-size: var(--t-16); font-weight: 700;
  margin-bottom: var(--sp2); padding-bottom: var(--sp1);
  border-bottom: 2px solid var(--n-border);
  color: var(--n-black);
}
.blog-related-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 0; border: 1px solid var(--n-border-lt);
}
.blog-related-item {
  display: flex; gap: var(--sp2); padding: var(--sp2);
  border-bottom: 1px solid var(--n-border-lt); text-decoration: none;
  transition: background var(--fast);
}
.blog-related-item:last-child { border-bottom: none; }
.blog-related-item:hover { background: var(--n-bg-lt); }
.blog-related-item__thumb {
  width: 72px; height: 54px; flex-shrink: 0; overflow: hidden;
}
.blog-related-item__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.blog-related-item__title {
  font-family: var(--f-ui); font-size: var(--t-13); font-weight: 600;
  color: var(--n-blue); line-height: 1.4;
}
.blog-related-item__title:hover { text-decoration: underline; }

/* ── 18. SUBJECTS TAGS ── */
.blog-subjects { margin-top: var(--sp3); }
.blog-subjects h3 {
  font-family: var(--f-ui); font-size: var(--t-12); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--n-text-lt);
  margin-bottom: var(--sp1);
}
.blog-subjects__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.blog-subjects__tag {
  font-family: var(--f-ui); font-size: var(--t-12); font-weight: 500;
  color: var(--n-blue); background: none;
  border: 1px solid var(--n-blue);
  padding: 3px 10px; text-decoration: none;
  transition: background var(--fast), color var(--fast);
}
.blog-subjects__tag:hover { background: var(--n-blue); color: #fff; }

/* ── 19. PAYWALL / LOGIN BOX ── */
.blog-paywall {
  border: 1px solid var(--n-border);
  padding: var(--sp4) var(--sp3);
  margin: var(--sp4) 0;
  background: var(--n-bg-lt);
  text-align: center;
}
.blog-paywall__heading {
  font-family: var(--f-ui); font-size: var(--t-18); font-weight: 700;
  color: var(--n-black); margin-bottom: var(--sp2);
}
.blog-paywall__list {
  list-style: none; margin-bottom: var(--sp3);
  text-align: left; display: inline-block;
}
.blog-paywall__list li {
  font-family: var(--f-ui); font-size: var(--t-14);
  color: var(--n-text-mid); margin-bottom: var(--sp1);
  padding-left: var(--sp2); position: relative;
}
.blog-paywall__list li::before {
  content: '✓'; position: absolute; left: 0;
  color: var(--n-blue); font-weight: 700;
}
.blog-paywall__divider {
  font-family: var(--f-ui); font-size: var(--t-12); color: var(--n-text-xlt);
  margin: var(--sp2) 0; text-align: center;
}

/* ── 20. BUTTONS ── */
.blog-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f-ui); font-size: var(--t-15); font-weight: 600;
  padding: 14px 24px; border: none;
  text-decoration: none; cursor: pointer;
  transition: background var(--fast), opacity var(--fast);
  white-space: nowrap; letter-spacing: 0.01em;
  border-radius: 0px;
}
.blog-btn--primary { background: #053A59; color: #ffffff; }
.blog-btn--primary:hover { background: #015883; opacity: 0.95; }
.blog-btn--outline { background: #fff; color: var(--n-text); border: 1px solid var(--n-border); }
.blog-btn--outline:hover { background: var(--n-bg-lt); border-color: var(--n-text-lt); }
.blog-btn--block { width: 100%; }
.blog-btn--sm { padding: 12px 30px; font-size: var(--t-16); }
.blog-btn__icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ── 21. SIDEBAR ── */

/* CSS variables for the glass system — single source of truth */
:root {
  --glass-bg:         rgba(255, 255, 255, 0.62);
  --glass-bg-card:    rgba(255, 255, 255, 0.72);
  --glass-border:     rgba(255, 255, 255, 0.85);
  --glass-border-mid: rgba(209, 218, 230, 0.55);
  --glass-blur:       18px;
  --glass-saturate:   160%;
  --glass-shadow-sm:  0 2px 12px rgba(10, 35, 67, 0.06), 0 1px 3px rgba(10, 35, 67, 0.04);
  --glass-shadow-md:  0 8px 32px rgba(10, 35, 67, 0.10), 0 2px 8px rgba(10, 35, 67, 0.06);
  --glass-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.90);
  --glass-accent-line: linear-gradient(90deg, var(--n-blue) 0%, rgba(0,102,153,0.4) 100%);
  --glass-radius:     14px;
  --glass-radius-sm:  10px;
}

.blog-sidebar {
  position: sticky;
  top: calc(var(--h-total) + 16px);
  display: flex;
  flex-direction: column;
  gap: 0;

  /* Outer wrapper: unified glass pane that all cards sit inside */
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow:
    var(--glass-shadow-md),
    var(--glass-shadow-inset);
  overflow: hidden;

  /* Hairline accent stripe across the very top */
  outline: none;
  position: sticky;
}

/* Top accent ribbon — matches the sticky header's navy→blue gradient */
.blog-sidebar::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #11487b 0%, #053A59 55%, #4aa3cc 100%);
  flex-shrink: 0;
  opacity: 0.9;
}

.blog-sidebar__card {
  /* Cards are now transparent "layers" inside the glass wrapper */
  border: none;
  border-bottom: 1px solid var(--glass-border-mid);
  border-radius: 0;
  padding: var(--sp2);

  /* Subtle inner surface — slightly more opaque than the wrapper */
  background: rgba(255, 255, 255, 0.30);

  /* Micro-transition so hover states feel instant but not jarring */
  transition: background var(--fast);
}
.blog-sidebar__card:last-child {
  border-bottom: none;
}

/* Card that holds the download/CTA button: a touch more prominent */
.blog-sidebar__card--download {
  background: rgba(232, 244, 249, 0.55);
}

/* Related-articles card: retain the slight tint for visual separation */
.blog-sidebar__card--related-articles {
  background: rgba(248, 250, 252, 0.40);
  position: relative;
}

/* Heading row inside each card */
.blog-sidebar__heading {
  font-family: var(--f-ui);
  font-size: var(--t-13);
  font-weight: 700;
  color: var(--n-text);
  margin-bottom: var(--sp1);
  padding-bottom: 8px;

  /* Separator: thin glass rule instead of solid border */
  border-bottom: 1px solid var(--glass-border-mid);
  letter-spacing: -0.01em;
}

.blog-sidebar__label {
  font-family: var(--f-ui); font-size: var(--t-10); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--n-text-xlt);
  display: block; margin-bottom: 4px;
}
.blog-sidebar__collection {
  font-family: var(--f-ui); font-weight: 600; font-size: var(--t-13);
  color: var(--n-blue); text-decoration: none; display: block;
}
.blog-sidebar__collection:hover { color: var(--n-blue-dk); text-decoration: underline; }

/* ── Tabs ── */
.blog-tabs {
  display: flex;
  border-bottom: 1px solid var(--glass-border-mid);
  gap: 0;
  /* Tabs bar: fractionally more opaque so it reads as a "shelf" */
  background: rgba(255, 255, 255, 0.18);
}
.blog-tabs__btn {
  flex: 1; font-family: var(--f-ui); font-size: var(--t-13); font-weight: 600;
  letter-spacing: 0.02em; color: var(--n-text-mid); background: transparent;
  border: none;
  padding: 10px 8px; cursor: pointer;
  transition: color var(--fast), background var(--fast);
  border-bottom: 2px solid transparent;
  position: relative;
}
.blog-tabs__btn:last-child { border-right: none; }
.blog-tabs__btn:hover {
  color: var(--n-text);
  background: rgba(255, 255, 255, 0.35);
}
.blog-tabs__btn.is-active {
  background: rgba(255, 255, 255, 0.45);
  color: var(--n-blue);
  font-weight: 700;
  border-bottom-color: var(--n-blue);
}

/* ── TOC / Sections list ── */
.blog-sections-list { list-style: none; }
.blog-sections-list li { font-size: 0.9375rem; font-weight: 400; line-height: 1.5; }
.blog-sections-list li:last-child { border-bottom: none; }
.blog-sections-list a {
  display: block; padding: 6px 8px;
  border-left: 3px solid transparent;
  border-radius: 0 4px 4px 0;
  font-family: var(--f-ui); font-size: var(--t-13); font-weight: 500;
  color: var(--n-blue); text-decoration: none; line-height: 1.4;
  transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.blog-sections-list a:hover {
  color: var(--n-blue-dk);
  background: rgba(0, 102, 153, 0.06);
}
.blog-sections-list a.is-active {
  background: rgba(0, 102, 153, 0.08);
  color: var(--n-blue-dk);
  font-weight: 600;
}

.blog-sections-list--note {
  padding: var(--sp1); font-family: var(--f-body); font-size: var(--t-12);
  color: var(--n-text-mid); line-height: 1.6;
}

/* ── Ad / promo slot ── */
.blog-sidebar__ad {
  padding: var(--sp3) var(--sp1);
  background: rgba(240, 244, 248, 0.50);
  text-align: center; font-family: var(--f-ui); font-size: var(--t-10);
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--n-text-xlt);
}

/* ── 22. BACK TO TOP ── */
.blog-btt {
  position: fixed;  bottom: 2rem;  right: 2rem;
  width: 50px;  height: 50px;
  background: #053A59;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  display: flex;  align-items: center;  justify-content: center;
  opacity: 0;  pointer-events: none;
  /* large soft halo — matches the image */
  box-shadow:
    0 0  0   1px  rgba(0,0,0,0.04),
    0 4px 12px    rgba(0,0,0,0.08),
    0 12px 40px   rgba(0,0,0,0.10);
  transition: opacity var(--base),
              box-shadow var(--base),
              transform  var(--base);
  z-index: 90;
}
.blog-btt.is-visible { opacity: 1; pointer-events: auto; }
.blog-btt:hover {
  box-shadow:
    0 0  0   1px  rgba(0,0,0,0.05),
    0 6px 18px    rgba(0,0,0,0.12),
    0 20px 56px   rgba(0,0,0,0.13);
  transform: translateY(-2px);
}

/* ── 23. NATURE BRIEFING SIGNUP ── */
.blog-briefing {
  background: var(--n-black); color: var(--n-white);
  padding: var(--sp4) var(--gutter); margin-top: var(--sp5);
}
.blog-briefing__inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp4);
  flex-wrap: wrap;
}
.blog-briefing__text h3 {
  font-family: var(--f-ui); font-size: var(--t-18); font-weight: 700;
  color: #fff; margin-bottom: 4px;
}
.blog-briefing__text p {
  font-family: var(--f-ui); font-size: var(--t-13); color: rgba(255,255,255,0.65);
  margin: 0;
}
.blog-briefing__form { display: flex; gap: 8px; flex-wrap: wrap; }
.blog-briefing__input {
  font-family: var(--f-ui); font-size: var(--t-13);
  padding: 10px 14px; background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25); color: #fff;
  width: 240px; outline: none;
  transition: border-color var(--fast), background var(--fast);
}
.blog-briefing__input::placeholder { color: rgba(255,255,255,0.4); }
.blog-briefing__input:focus { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.15); }

/* ── 24. DARK FOOTER ── */
.blog-footer {
  background: var(--n-footer); color: var(--n-footer-text);
  padding: var(--sp5) var(--gutter) var(--sp4);
  border-top: 3px solid var(--n-blue);
}
.blog-footer__inner { max-width: var(--max-w); margin: 0 auto; }
.blog-footer__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp3) var(--sp4);
}
.blog-footer__col h4 {
  font-family: var(--f-ui); font-size: var(--t-11); font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--n-footer-head); margin-bottom: var(--sp1);
  padding-bottom: 6px; border-bottom: 1px solid var(--n-footer-bdr);
}
.blog-footer__col ul { list-style: none; }
.blog-footer__col li { margin-bottom: 4px; }
.blog-footer__col a {
  font-family: var(--f-ui); font-size: var(--t-18);
  color: var(--n-footer-text); text-decoration: none; line-height: 1.65;
  transition: color var(--fast);
}
.blog-footer__col a:hover { color: #fff; text-decoration: underline; }
.blog-footer__rule { border-top: 1px solid var(--n-footer-bdr); margin: var(--sp3) 0 var(--sp2); }
.blog-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: flex-start; gap: var(--sp2);
}
.blog-footer__copy { font-family: var(--f-ui); font-size: var(--t-12); color: var(--n-footer-text); line-height: 1.65; max-width: 520px; }
.blog-footer__bottom-links { list-style: none; display: flex; flex-wrap: wrap; gap: 4px var(--sp2); }
.blog-footer__bottom-links a {
  font-family: var(--f-ui); font-size: var(--t-11); font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); text-decoration: none; transition: color var(--fast);
}
.blog-footer__bottom-links a:hover { color: #fff; }

/* ── 25. RESPONSIVE ── (moved to bottom — see § MOBILE) */

/* ════════════
   § MOBILE — single consolidated breakpoint stack
   Everything below is mobile/tablet only. Desktop rules above
   are untouched. Order: 1100 → 960 → 640 → 420, so each tier
   only overrides what actually changes at that width.
   ════════════ */

@media (max-width: 1100px) {
  :root { --side-w: 240px; --gap: 28px; }
}

@media (max-width: 960px) {
  /* -- layout shell: sidebar drops below article -- */
  .blog-shell { grid-template-columns: 1fr; }
  .blog-main { max-width: 100%; }
  .blog-sidebar { position: static; max-width: 100%; }
  .blog-sidebar__card--download { order: -1; }

  /* -- header / nav -- */
  .blog-utility__menu-toggle { display: flex; }
  .blog-utility__link { display: none; }
  .blog-subnav { display: none; }
  .blog-subnav.is-open { display: block; }
  .blog-subnav__inner { flex-direction: column; align-items: flex-start; padding: var(--sp1) var(--gutter) var(--sp2); }
  .blog-subnav__left, .blog-subnav__right { flex-direction: column; align-items: flex-start; width: 100%; }
  .blog-subnav__left a, .blog-subnav__right a { border-right: none; border-bottom: 1px solid var(--n-border-lt); width: 100%; }

  /* -- sticky condensed header: hide desktop sticky on mobile since header.php provides mobile version -- */
  .blog-sticky { display: none !important; }

  /* -- masthead / title block -- */
  .blog-title { font-size: var(--t-26); }
  .blog-subtitle { font-size: var(--t-16); }
  .blog-share { gap: 8px; }
  .blog-share__label { width: 100%; margin-bottom: 2px; }

  /* -- footer -- */
  .blog-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .blog-briefing__inner { flex-direction: column; align-items: flex-start; }
  .blog-briefing__form { width: 100%; }
  .blog-briefing__input { flex: 1; width: auto; min-width: 0; }

  /* -- data table: keep horizontal scroll but signal it's scrollable -- */
  .table-responsive,
  .blog-data-table-scroll { box-shadow: inset -12px 0 12px -12px rgba(0,0,0,0.08); }
  .table,
  .blog-data-table { min-width: 650px; }
  .table-card__title,
  .blog-data-table-title { font-size: var(--t-16); }
  .table thead th, .blog-data-table thead th,
  .table tbody td, .blog-data-table tbody td { padding: .85rem; }

  /* -- FAQ -- */
  .blog-faq__q { font-size: .95rem; padding: 1rem 0; }
  .blog-faq__a { font-size: .9rem; }

  /* -- newsletter card stacks naturally; tighten padding -- */
  .blog-newsletter__hero,
  .blog-newsletter__form { padding: var(--sp3); }

  /* -- overflow guard: stop long unbroken strings (headline acronyms,
     citations, inline equations) from blowing past the viewport edge
     and getting silently clipped by overflow-x:hidden on <body> -- */
  .blog-title, .blog-subtitle, .blog-main h2, .blog-main h3,
  .blog-cite-line, .blog-abstract, .blog-main p, .blog-main li {
    overflow-wrap: break-word; word-break: break-word; hyphens: auto;
    line-height: 1.905rem; font-size: var(--t-16);
  }

  /* -- raw content tables (plain <table style="..."> with no responsive
     wrapper) must respect the column width instead of overflowing -- */
  .blog-main table:not(.table):not(.blog-data-table) { table-layout: fixed !important; width: 100% !important; }
  .blog-main table:not(.table):not(.blog-data-table) th,
  .blog-main table:not(.table):not(.blog-data-table) td {
    overflow-wrap: break-word; word-break: break-word; white-space: normal !important;
  }

  /* -- MathJax/KaTeX: scroll the equation itself rather than the page -- */
  mjx-container, .MathJax, .katex-display {
    max-width: 100%; overflow-x: auto; overflow-y: hidden;
  }
}

@media (max-width: 640px) {
  :root { --gutter: 14px; --h-bar: 44px; }

  .blog-utility__sub { display: none; }
  .blog-utility__inner { gap: var(--sp1); }

  .blog-title { font-size: var(--t-22); }
  .blog-abstract { font-size: var(--t-15); }
  /* .blog-main p, .blog-main li { font-size: var(--t-15); } */
 

  /* -- masthead: tighten the whole block proportionally, not just the title --
     desktop ratios (badge → title → subtitle → byline → share) felt oversized
     and loose on a phone; this brings every line down a notch together. */
  .blog-masthead { padding-bottom: var(--sp2); margin-bottom: var(--sp2); }
  .blog-article-badge { gap: 6px; margin-bottom: 6px; }
  .blog-title { font-size: var(--t-20); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 10px; }
  .blog-subtitle { font-size: var(--t-14); line-height: 1.45; margin-bottom: var(--sp2); }
  .blog-authors { font-size: var(--t-13); margin-bottom: 4px; }
  .blog-share { padding: 8px 0; gap: 6px; margin-bottom: var(--sp2); }
  .blog-abstract { margin-bottom: var(--sp2); }

  /* -- meta / cite rows wrap cleanly instead of overflowing -- */
  .blog-meta-stats { gap: 4px var(--sp1); }
  .blog-cite-line { word-break: break-word; }

  /* -- related-article cards: smaller thumb so title gets room -- */
  .blog-related-item__thumb { width: 56px; height: 42px; }
  .blog-footer__grid { grid-template-columns: 1fr 1fr; }
  .blog-footer__bottom { flex-direction: column; align-items: flex-start; }
  .blog-btt { bottom: 1rem; right: 1rem; width: 52px; height: 52px; }
  .blog-newsletter__title { font-size: var(--t-18); }
}

@media (max-width: 420px) {
  .blog-footer__grid { grid-template-columns: 1fr; }
  .blog-utility__name { font-size: var(--t-16); }
  .blog-title { font-size: var(--t-18); }
}

/* ════════════
   § PREMIUM MOBILE POLISH — phones only
   Turns flat, edge-to-edge "newsprint" blocks into elevated
   card surfaces, adds safe-area awareness for notches/gesture
   bars, and enforces comfortable touch targets. Layout from the
   tiers above is untouched — purely a finish pass.
   ════════════ */
@media (max-width: 600px) {
  :root { --gutter: 16px; }

  body.blog-page { padding-bottom: env(safe-area-inset-bottom); }

  /* card-ify flat sections */
  .blog-hero img, .blog-inline-img img {
    border-radius: 2px; box-shadow: 0 1px 8px rgba(0,0,0,0.06);
  }
  .blog-inline-img { border-top: none; }

  .blog-data-table-wrap, .table-card,
  .blog-newsletter, .blog-paywall, .blog-related-grid {
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  }
  .blog-data-table-wrap, .table-card { border-top: none; border: 1px solid var(--n-border); }

  /* Sidebar on mobile: upgrade from flat stacked cards to a single glass pane */
  .blog-sidebar {
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
      0 4px 20px rgba(10,35,67,0.10),
      inset 0 1px 0 rgba(255,255,255,0.90);
  }

  /* comfortable ≥44px tap targets */
  .blog-btn, .blog-share__btn, .blog-subjects__tag,
  .blog-faq__q, .blog-utility__menu-toggle { min-height: 44px; }
  .blog-faq__q { padding: 1.1rem 4px; }

  /* safe-area aware fixed/edge elements */
  .blog-btt { bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .blog-utility__inner, .blog-breadcrumb__inner, .blog-sticky__inner {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }

  /* calmer long-form reading rhythm */
  .blog-main p, .blog-main li { line-height: 1.64; }
  .blog-main h2 { margin-top: 1.35rem; }

  /* equations: shrink slightly so they don't dominate a narrow column */
  mjx-container { font-size: 90% !important; }
}

/* ── 26. PRINT ── */
@media print {
  .blog-utility, .blog-subnav, .blog-breadcrumb, .blog-sticky,
  .blog-sidebar, .blog-btt, .blog-progress, .blog-footer, .blog-briefing { display: none !important; }
  .blog-shell { grid-template-columns: 1fr; padding: 0; }
  .blog-main { max-width: 100%; }
  body.blog-page { background: #fff; color: #000; }
}

/* ── 27. REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}



/* table */

/* ==========================================================
   § GLOBAL TABLE SYSTEM
   Single source of truth for every table on the site.
   `.table` is the generic, reusable API (use on any table,
   anywhere). `.blog-data-table` — the structured "data table"
   component already used across articles — now resolves to
   the exact same base rules via shared selectors, so existing
   markup keeps working untouched while new tables (or raw
   tables pasted into article HTML) only need `class="table"`.
   No table should need inline <style> or a per-page <style>
   block again — see blog.js → initContentTables() for how
   bare <table> elements in article content get these classes
   and a .table-responsive wrapper applied automatically.
========================== */

/* -- Responsive wrapper: scroll horizontally instead of the
      table (or the page) overflowing -- */
.table-responsive,
.blog-data-table-scroll{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

/* -- Base table -- */
.table,
.blog-data-table{
    width:100%;
    min-width:720px;

    border-collapse:collapse;
    table-layout:fixed;

    font-family:var(--f-body);
    font-size:var(--t-14);
    line-height:1.75;
    color:var(--n-text);
}

/* Header */

.table thead th,
.blog-data-table thead th{
    padding:.95rem 1rem;

    text-align:left;

    font-family:var(--f-ui);
    font-size:var(--t-12);
    font-weight:700;

    color:var(--n-black);

    background:#fff;

    border-bottom:2px solid var(--n-black);
}

/* Body */

.table tbody td,
.blog-data-table tbody td{
    padding:1rem;

    vertical-align:top;

    border-bottom:1px solid var(--n-border-lt);
}

.table tbody tr:last-child td,
.blog-data-table tbody tr:last-child td{
    border-bottom:none;
}

/* First column emphasis (Nature-style label column) */

.table tbody td:first-child,
.blog-data-table tbody td:first-child{
    width:24%;

    font-family:var(--f-ui);
    font-weight:600;

    color:var(--n-black);
}

/* -- Modifiers — opt-in, additive, combine freely --
   .blog-data-table keeps its original no-hover / always-
   striped Nature look unless an article wants otherwise. */

.table-striped tbody tr:nth-child(even),
.blog-data-table tbody tr:nth-child(even){
    background:#fafafa;
}

.table-hover tbody tr:hover{
    background:var(--n-blue-lt);
}
.blog-data-table tbody tr:hover{
    background:transparent;
}

.table-bordered,
.table-bordered th,
.table-bordered td{
    border:1px solid var(--n-border);
}

.table-sm thead th,
.table-sm tbody td{
    padding:.5rem .65rem;
    font-size:var(--t-13);
}

/* -- Card chrome (label / title / caption / footnote shell)
      around a table. `.blog-data-table-wrap` is the existing
      name; `.table-card` is the same chrome for any new
      `.table` that wants it. -- */

.blog-data-table-wrap,
.table-card{
    margin:3rem 0;
    border-top:2px solid var(--n-black);
    border-bottom:1px solid var(--n-border);
    background:#fff;
}

.blog-data-table-header,
.table-card__header{
    padding:0 0 1rem;
}

.blog-data-table-label,
.table-card__label{
    display:block;

    margin-bottom:.45rem;

    font-family:var(--f-ui);
    font-size:var(--t-11);
    font-weight:700;

    letter-spacing:.12em;
    text-transform:uppercase;

    color:var(--n-blue);
}

.blog-data-table-title,
.table-card__title{
    font-family:var(--f-ui);
    font-size:var(--t-18);
    font-weight:700;
    line-height:1.35;

    color:var(--n-black);

    margin:0 0 .4rem;
}

.blog-data-table-caption,
.table-card__caption{
    font-family:var(--f-body);
    font-size:var(--t-14);
    line-height:1.65;

    color:var(--n-text-mid);
}

.blog-data-table-footnote,
.table-card__footnote{
    margin-top:.75rem;
    padding-top:.75rem;

    border-top:1px solid var(--n-border-lt);

    font-family:var(--f-ui);
    font-size:var(--t-12);
    line-height:1.7;

    color:var(--n-text-lt);
}

.blog-data-table-footnote strong,
.table-card__footnote strong{
    color:var(--n-text);
    font-weight:700;
}

/* -- Safety net for raw tables pasted into article content
      that blog.js hasn't reached yet (no-JS, or markup added
      after DOMContentLoaded). Once initContentTables() runs,
      every such table gains the .table class and this no
      longer applies — it just stops an unwrapped wide table
      from breaking layout in the interim. -- */
.blog-main table:not(.table):not(.blog-data-table){
    width:100%;
    table-layout:fixed;
}
.blog-main table:not(.table):not(.blog-data-table) th,
.blog-main table:not(.table):not(.blog-data-table) td{
    padding:.75rem;
    overflow-wrap:break-word;
    word-break:break-word;
    white-space:normal;
    border-bottom:1px solid var(--n-border-lt);
}

/* Mobile — see § MOBILE at bottom of file */


/* Blog Steps  */
.blog-step {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--n-border-lt);
    list-style:none;
}

.blog-step:last-child {
    border-bottom: none;
}

.blog-step__header {
    display: flex;
    align-items: baseline;
    gap: 1rem;

    margin-bottom: .75rem;
}

.blog-step__num {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;

    color: var(--n-black);

    flex-shrink: 0;
}

.blog-step__title {
    margin: 0;

    font-size: var(--t-18);
    font-weight: 700;

    line-height: 1.3;
}

.blog-step__meta {
    display: block;

    margin-top: .15rem;

    font-size: var(--t-12);
    color: var(--n-text-lt);
}

.blog-step__body {
    margin-left: calc(1.75rem + 1rem);

    font-size: var(--t-15);
    line-height: 1.8;
}



/* Accordion */
/* ==========================
   MINIMAL FAQ ACCORDION
========================== */

.blog-faq{
    list-style:none;
    margin:0rem 0;
    padding:0;
}


.blog-faq__q{
    width:100%;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:0rem 0;

    background:none;
    border:none;

    cursor:pointer;

    text-align:left;

    font-size:1rem;
    font-weight:600;
    line-height:1.5;

    color:#000;
}

.blog-faq__q:hover{
    opacity:.75;
}

.blog-faq__icon{
    flex-shrink:0;

    margin-left:1rem;

    font-size:1.4rem;
    font-weight:300;

    transition:transform .25s ease;
}

.blog-faq__a{
    max-height:0;
    overflow:hidden;

    transition:
        max-height .3s ease,
        padding .3s ease;

    font-size:.95rem;
    line-height:1.9;

    color:#333;
}

.blog-faq__item.is-open .blog-faq__a{
    max-height:500px;
    padding:0 0 1.25rem 0;
}

.blog-faq__item.is-open .blog-faq__icon{
    transform:rotate(45deg);
}

/* Mobile — see § MOBILE at bottom of file */


.outlinks{
    color:#053A59 !important;
    text-decoration:none !important;
    font-weight: 500 !important;
}

.outlinks:hover{
    text-decoration:underline !important;
}

/* ==========================
   NEWSLETTER SIGNUP CARD
========================== */

.blog-newsletter{
    margin:0 0;
    /* border:1px solid var(--n-border); */
    background:var(--n-white);
    overflow:hidden;
}

.blog-newsletter__hero{
    padding:var(--sp4);
    background:var(--n-blue-lt);
    border-bottom:1px solid var(--n-border);
}

.blog-newsletter__title{
    margin:0 0 var(--sp2);
    font-family:var(--f-ui);
    font-size:var(--t-20);
    font-weight:700;
    line-height:1.2;
    color:var(--n-black);
}

.blog-newsletter__desc{
    margin:0;
    font-size:0.85rem;
    line-height:1.3;
    color:var(--n-text);
}

.blog-newsletter__form{
    padding:var(--sp4);
}

.blog-newsletter__label{
    display:block;
    margin-bottom:.5rem;
    font-family:var(--f-ui);
    font-size:var(--t-16);
    font-weight:700;
}

.blog-newsletter__input{
    width:100%;
    box-sizing:border-box;

    padding:1rem;
    margin-bottom:var(--sp1);

    font-family:var(--f-ui);
    font-size:var(--t-16);

    border:2px solid var(--n-text-mid);
    background:#fff;

    transition:border-color var(--fast);
}

.blog-newsletter__input:focus{
    outline:none;
    border-color:var(--n-blue);
}

.blog-newsletter__check{
    display:flex;
    align-items:flex-start;
    gap:.75rem;
    margin-bottom:var(--sp3);
    font-size:0.75rem;
    line-height:1.2;
    cursor:pointer;
    color:#555555;
}

.blog-newsletter__check input{
    width:20px;
    height:20px;
    flex-shrink:0;
    margin-top:2px;
}

/* ── MOBILE OPTIMIZATIONS ─────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  :root {
    --max-w: 100%;
    --art-w: 95%;
    --side-w: 240px;
    --gap: 20px;
    --gutter: 16px;
  }
  .blog-sticky__inner { padding: 8px var(--gutter); }
  .blog-sticky__title { font-size: var(--t-18); }
}

@media (max-width: 768px) {
  :root {
    --max-w: 100%;
    --art-w: 100%;
    --side-w: 100%;
    --gap: 12px;
    --gutter: 16px;
    --t-36: 1.55rem;
    --t-30: 1.325rem;
    --t-26: 1.2rem;
    --sp2: 0.75rem;
    --sp3: 1.1rem;
    --sp4: 1.5rem;
    --sp5: 2.25rem;
  }

  .blog-shell { display: block !important; }
  .blog-article { width: 100% !important; margin-right: 0 !important; margin-bottom: 1.5rem; }
  .blog-sidebar { width: 100% !important; margin-left: 0 !important; margin-top: 0; }
  .blog-sticky { display: none !important; }

  .blog-footer__grid { grid-template-columns: 1fr !important; gap: 1.25rem; }
  .blog-footer__inner > div:first-child { margin-bottom: 1.25rem; }

  .blog-utility__name { display: none; }
  .blog-utility__sub { display: none; }
  .blog-utility__actions { gap: 0; }
  .blog-utility__link { padding: 0 8px; font-size: var(--t-12); }
  .blog-utility__icon-btn { padding: 0 8px; }

  .blog-subnav__left a, .blog-subnav__right a { padding: 0 10px; font-size: var(--t-12); gap: 2px; }

  .blog-breadcrumb__inner { padding: 5px var(--gutter); }
  .blog-breadcrumb a, .blog-breadcrumb li { font-size: var(--t-11) !important; }

  /* Article title: journal-weight, elegant scale */
  h1 { font-size: clamp(1.2rem, 4.8vw, 1.5rem) !important; line-height: 1.08; font-weight: 550 !important; letter-spacing: -0.012em !important; }
  h2 { font-size: 1.1rem !important; line-height: 1.2 !important; font-weight: 650 !important; }
  h3 { font-size: 0.975rem !important; line-height: 1.25 !important; font-weight: 700 !important; }
  body.blog-page { font-size: 0.9rem; line-height: 1.62; }

  .blog-tabs__list { flex-wrap: wrap; }
  .blog-tabs__btn { flex: 1 1 48%; font-size: var(--t-12); padding: 8px 12px; }

  :not(pre) > code { font-size: 0.79rem; }
  .cb-wrap { margin: 1.25rem 0; --cb-gutter: 2.5rem; --cb-size: 0.76rem; }

  .blog-faq__q { padding: 12px 0; font-size: 0.9rem; }
  .blog-faq__a { font-size: 0.85rem; padding: 0 0 12px; }

  .table, .blog-data-table { min-width: 100%; font-size: var(--t-13); }
  .table thead th, .blog-data-table thead th { padding: 0.75rem 0.75rem; }
  .table tbody td, .blog-data-table tbody td { padding: 0.75rem; }

  .blog-newsletter__title { font-size: var(--t-18); }
  .blog-newsletter__hero { padding: 1.25rem; }
  .blog-newsletter__form { padding: 1.25rem; }

  .blog-related { grid-template-columns: 1fr !important; }

  .blog-btt { right: 16px; bottom: 16px; }
}

@media (max-width: 480px) {
  :root {
    --gutter: 14px;
    --t-36: 1.3rem;
    --t-30: 1.15rem;
    --t-26: 1.05rem;
    --t-20: 0.925rem;
    --sp2: 0.65rem;
    --sp3: 1rem;
    --sp4: 1.35rem;
  }

  h1 { font-size: 1.2rem !important; font-weight: 550 !important; line-height: 1.08 !important; }
  h2 { font-size: 1.0rem !important; }
  body.blog-page { font-size: 0.875rem; line-height: 1.6; }

  .blog-utility__mark { width: 28px; height: 28px; font-size: var(--t-10); }
  .blog-utility__link { padding: 0 6px; }
  .blog-utility__icon-btn { padding: 0 6px; font-size: var(--t-11); }

  .blog-footer__grid { gap: 1rem; }
  .blog-footer__col h4 { font-size: 0.9rem; margin-bottom: 0.75rem; }
  .blog-footer__col a { font-size: 0.8rem; }

  .blog-newsletter { margin: 1.5rem 0; }
  .blog-faq { margin: 1.5rem 0; }

  .blog-tabs__btn { flex: 1 1 calc(50% - 4px); font-size: var(--t-11); padding: 6px 8px; }

  .blog-progress { height: 2px; }
}


/* ════════════
   § GLASS OVERRIDES — header.php's #blogSticky desktop upgrade
   header.php defines #blogSticky with its own <style> block; the
   rules below layer on top of those without touching the PHP file,
   giving the mobile bar the same premium glass finish as the sidebar.
   ════════════ */

/* Re-declare the glass surface so it wins over the header.php inline <style>.
   Using higher specificity (html body #blogSticky) keeps us safe. */
html body #blogSticky {
  background: rgba(255, 255, 255, 0.80) !important;
  backdrop-filter: blur(52px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
  border-bottom: none !important;
  box-shadow:
    0 1px 0 rgba(10, 35, 67, 0.05),
    0 10px 32px -10px rgba(10, 35, 67, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

/* Override the header.php ::before (accent ribbon) with the nav → gold gradient */
html body #blogSticky::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important;
  /* Move the accent line to the BOTTOM, matching the sidebar's top stripe */
  top: auto !important;
  bottom: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #11487b 0%, #053A59 55%, #4aa3cc 100%) !important;
  opacity: 0.90 !important;
  pointer-events: none !important;
}

/* Restore / unify the soft shadow veil below the bar */
html body #blogSticky::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important;
  bottom: -16px !important;
  height: 16px !important;
  background: linear-gradient(to bottom, rgba(10,35,67,0.05) 0%, rgba(10,35,67,0.00) 100%) !important;
  pointer-events: none !important;
}

/* The .bs__bookmark glass circle: deeper gloss on the premium tier */
@media (max-width: 960px) {
  .bs__bookmark {
    background: rgba(242, 245, 250, 0.80) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-color: rgba(17, 72, 123, 0.10) !important;
    box-shadow: 0 1px 4px rgba(10,35,67,0.08), inset 0 1px 0 rgba(255,255,255,0.75) !important;
  }
  .bs__bookmark:hover {
    background: rgba(232, 237, 246, 0.90) !important;
  }
}

/* ── Sidebar: reset static positioning on mobile so the glass pane
   doesn't cause layout weirdness when the grid collapses ── */
@media (max-width: 960px) {
  .blog-sidebar {
    position: static !important;
    /* Keep the glass finish, just drop the sticky offset */
    max-width: 100%;
  }
}