/* =========================================================
   BLOG, uses tokens from country/style.css
   ========================================================= */
.blog-body {
  background: var(--paper-2);
  color: var(--ink);
  min-height: 100vh;
  overflow: auto;
  position: static;
}
.blog-body, .blog-body * { font-family: 'Outfit', system-ui, -apple-system, sans-serif; }

/* Brand logo flip — show only the right variant per theme so the about/blog
   pages don't render BOTH the black and white logo stacked on top of each
   other (was happening because these pages don't load country/style.css). */
.rail-brand-img { display: block; }
.rail-brand-img.dark { display: none; }
:root[data-theme="dark"] .rail-brand-img.light { display: none; }
:root[data-theme="dark"] .rail-brand-img.dark  { display: block; }

/* Vertical content rail, used on Blog and About pages so the navigation is
   consistent with the dashboard. Three buttons: Dashboard / Blogs / About. */
.content-rail {
  position: fixed;
  top: 14px; bottom: 14px; left: 14px;
  width: 58px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 50;
}
.content-rail-section {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  padding: 10px 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-2);
}
.cr-link {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-sub);
  background: transparent;
  position: relative;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.cr-link:hover { background: var(--paper-3); color: var(--ink); }
.cr-link.active {
  background: var(--orange);
  color: white;
  box-shadow: 0 4px 14px rgba(255,83,0,0.34);
}
.cr-link svg { width: 18px; height: 18px; }
.cr-tip {
  position: absolute; left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: var(--ink); color: white;
  font-size: 11px; font-weight: 500;
  padding: 5px 9px; border-radius: 6px;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 140ms, transform 140ms;
  letter-spacing: 0.02em;
}
.cr-link:hover .cr-tip { opacity: 1; transform: translateY(-50%) translateX(0); }

@media (max-width: 700px) {
  /* Mobile bottom bar — same look + size as the dashboard's .country-rail:
     centered horizontally, intrinsic width, single rounded pill of 44x44
     circular buttons. */
  .content-rail {
    flex-direction: row;
    top: auto; bottom: 12px;
    left: 50%; right: auto;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 24px);
    height: auto;
    gap: 4px;
    padding: 6px 8px;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(14px);
    border-radius: 999px;
    box-shadow: 0 12px 36px rgba(19,6,0,0.22);
  }
  :root[data-theme="dark"] .content-rail {
    background: rgba(31,15,10,0.92);
    box-shadow: 0 12px 36px rgba(0,0,0,0.55);
  }
  .content-rail-section {
    flex-direction: row;
    padding: 0;
    gap: 4px;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    border-radius: 999px;
  }
  .content-rail .cr-link {
    width: 44px; height: 44px;
    background: var(--paper-3);
    border-radius: 50%;
  }
  :root[data-theme="dark"] .content-rail .cr-link {
    background: rgba(255,255,255,0.08);
  }
  .content-rail .cr-link.active { background: var(--orange); }
  .cr-tip { display: none; }
  /* Brand-logo slot: matches the 44x44 circle pattern of the other rail
     buttons so the about + blog bottom bar stops rendering the full-size
     car silhouette and looks like every other navigation pill. */
  .content-rail-brand {
    width: 44px; height: 44px;
    padding: 0;
    flex: 0 0 auto;
  }
  .content-rail-brand .rail-brand {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: var(--paper-3);
    border-radius: 50%;
    overflow: hidden;
  }
  :root[data-theme="dark"] .content-rail-brand .rail-brand {
    background: rgba(255,255,255,0.08);
  }
  .content-rail-brand .rail-brand-img {
    max-width: 30px; max-height: 30px;
    width: auto; height: auto;
  }
}

/* Legacy horizontal topbar, kept for back-compat but unused now */
.blog-topbar {
  display: none;
}
.blog-back-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper-3);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.blog-back-icon:hover { background: var(--orange); color: white; transform: translateX(-1px); }
.blog-brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink);
}
.blog-flag { font-size: 16px; line-height: 1; }
.blog-nav a { display: inline-flex; align-items: center; gap: 6px; }
.blog-nav-sep {
  width: 1px; height: 18px; background: var(--line);
  margin: 0 4px;
}
.blog-nav { display: flex; gap: 4px; margin-left: auto; }
.blog-nav a {
  padding: 7px 14px; font-size: 12.5px; font-weight: 500;
  color: var(--text-sub); border-radius: var(--r-pill);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.blog-nav a:hover { background: var(--paper-3); color: var(--ink); }
.blog-nav a.active { background: var(--orange); color: white; }

.blog-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 28px 64px 96px;       /* clear the left rail */
}
@media (max-width: 700px) {
  .blog-page { padding: 32px 16px calc(120px + env(safe-area-inset-bottom)); }
}

/* ---------- Index ---------- */
.blog-hero { margin-bottom: 36px; }
.blog-eyebrow {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--orange); font-weight: 600;
}
.blog-h1 {
  font-size: clamp(34px, 5vw, 56px);    /* match .info-title on About */
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.05;
  margin: 10px 0 14px;
}
.blog-lede {
  font-size: 17px; line-height: 1.6;
  color: rgba(19,6,0,0.7);
  max-width: 680px;
}

.blog-filter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.bf-btn {
  padding: 7px 14px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-sub);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.bf-btn:hover { color: var(--ink); border-color: var(--cat, var(--orange)); }
.bf-btn.active {
  background: var(--cat, var(--orange));
  color: white;
  border-color: var(--cat, var(--orange));
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.blog-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 22px 20px;
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast);
  box-shadow: 0 2px 10px rgba(19,6,0,0.04);
  min-height: 220px;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }

.bc-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--text-mute); }
.bc-cat {
  display: inline-block; padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--cat, var(--orange));
  color: white;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bc-date, .bc-time { font-weight: 500; }
.bc-title {
  font-size: 18px; font-weight: 700; letter-spacing: -0.015em;
  line-height: 1.25; color: var(--ink);
}
.bc-excerpt {
  font-size: 13.5px; line-height: 1.55; color: rgba(19,6,0,0.66);
  flex: 1;
}
.bc-read {
  font-size: 12px; font-weight: 600; color: var(--orange);
  letter-spacing: 0.02em;
  margin-top: 4px;
}

/* ---------- Post ---------- */
.blog-back {
  display: inline-flex; gap: 6px; align-items: center;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--orange); font-weight: 600;
  margin-bottom: 22px;
}
.blog-back:hover { text-decoration: underline; }
.bp-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 11.5px; color: var(--text-mute); margin-bottom: 14px; }
.bp-title {
  font-size: clamp(28px, 4.4vw, 48px);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.1;
  max-width: 820px;
  margin-bottom: 14px;
}
.bp-excerpt {
  font-size: 17px; line-height: 1.55;
  color: rgba(19,6,0,0.7);
  max-width: 760px;
  font-weight: 500;
  margin-bottom: 28px;
  border-left: 3px solid var(--orange);
  padding-left: 14px;
}
.bp-hero {
  margin: 6px 0 18px;
  border-radius: var(--r-md);
  overflow: hidden;
  max-width: 820px;
}
.bp-hero img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16/8;
  object-fit: cover;
}
/* Single-icon share placed inline next to the date in the post meta row. */
.bp-meta { position: relative; }
.bp-share-icon {
  margin-left: auto;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--text-sub);
  background: var(--paper);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.bp-share-icon:hover, .bp-share-icon.on {
  background: var(--orange); color: white; border-color: var(--orange);
}
.bp-share-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 160px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-2);
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  z-index: 20;
  opacity: 0; pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 160ms, transform 160ms;
}
.bp-share-menu.on { opacity: 1; pointer-events: auto; transform: translateY(0); }
.bp-share-menu button,
.bp-share-menu a {
  text-align: left;
  font-family: inherit;
  padding: 7px 10px;
  font-size: 12.5px; font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.bp-share-menu button:hover,
.bp-share-menu a:hover { background: var(--orange); color: white; }
.bp-share-menu .copied { background: #1DA366; color: white; }

.bp-content {
  max-width: 720px;
  font-size: 16px; line-height: 1.7;
  color: var(--ink);
}
.bp-content p { margin-bottom: 18px; color: rgba(19,6,0,0.86); }
.bp-content h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 36px 0 12px; }
.bp-content h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; margin: 28px 0 10px; color: var(--orange); }
.bp-content h4 { font-size: 16px; font-weight: 700; margin: 20px 0 8px; }
.bp-content ul, .bp-content ol { margin: 0 0 18px 22px; }
.bp-content li { margin-bottom: 6px; line-height: 1.6; }
.bp-content strong { font-weight: 700; color: var(--ink); }
.bp-content a { color: var(--orange); text-decoration: underline; text-underline-offset: 2px; }
.bp-content figure {
  margin: 28px 0;
}
.bp-content figure img {
  width: 100%; height: auto;
  border-radius: var(--r-md);
  display: block;
}
.bp-content figcaption {
  font-size: 12px; color: var(--text-mute);
  margin-top: 8px;
  font-style: italic;
}
.bp-content blockquote {
  border-left: 3px solid var(--orange);
  padding: 4px 0 4px 16px;
  margin: 18px 0;
  font-size: 17px; font-weight: 500;
  color: rgba(19,6,0,0.78);
  font-style: italic;
}
.bp-content table {
  width: 100%; border-collapse: collapse;
  margin: 18px 0;
  font-size: 14px;
}
.bp-content th, .bp-content td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.bp-content th { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; }

.bp-pager {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 56px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.bp-pager a {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.bp-pager a:hover { border-color: var(--orange); transform: translateY(-2px); }
.bp-pager a span { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; }
.bp-pager a strong { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.bp-pager-next { text-align: right; align-items: flex-end; }

.blog-foot {
  text-align: center;
  padding: 32px 28px 48px;
  font-size: 11.5px; color: var(--text-mute);
}
.blog-foot a { color: var(--orange); font-weight: 500; }
.blog-foot .sep { opacity: 0.4; margin: 0 6px; }

@media (max-width: 720px) {
  .blog-topbar { padding: 12px 18px; gap: 12px; }
  .blog-page { padding: 36px 18px 48px; }
  .bp-pager { grid-template-columns: 1fr; }
  .bp-pager-next { text-align: left; align-items: flex-start; }
}

/* =========================================================
   Floating theme toggle, shared by blog + about pages.
   ========================================================= */
.theme-fab {
  position: fixed;
  right: 18px; bottom: 18px;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  cursor: pointer;
  z-index: 80;
  transition: transform 180ms, background 180ms, color 180ms;
}
.theme-fab:hover { transform: translateY(-2px); }
.theme-fab svg { width: 18px; height: 18px; }

/* =========================================================
   Dark mode for blog + about pages.
   Triggered by [data-theme="dark"] on the document root.
   ========================================================= */
:root[data-theme="dark"] .blog-body,
:root[data-theme="dark"] body {
  background: #14070A;
  color: #F2ECE5;
}
:root[data-theme="dark"] {
  --paper: #1F0F0A;
  --paper-2: #14070A;
  --paper-3: #2A1611;
  --ink: #F2ECE5;
  --text: #F2ECE5;
  --text-sub: rgba(242, 236, 229, 0.72);
  --text-mute: rgba(242, 236, 229, 0.48);
  --line: rgba(242, 236, 229, 0.14);
}
:root[data-theme="dark"] .content-rail-section { background: #1F0F0A; }
:root[data-theme="dark"] .blog-card,
:root[data-theme="dark"] .bp-share-icon,
:root[data-theme="dark"] .theme-fab { background: #1F0F0A; color: #F2ECE5; }
:root[data-theme="dark"] .blog-card { border-color: rgba(242,236,229,0.10); }
:root[data-theme="dark"] .bf-btn { background: #1F0F0A; color: #F2ECE5; border-color: rgba(242,236,229,0.10); }
:root[data-theme="dark"] .bp-pager a { background: #1F0F0A; border-color: rgba(242,236,229,0.10); }
:root[data-theme="dark"] .blog-inline-img figcaption,
:root[data-theme="dark"] .bp-meta { color: rgba(242,236,229,0.62); }
:root[data-theme="dark"] .bp-content blockquote { color: #F2ECE5; }
:root[data-theme="dark"] .blog-foot { color: rgba(242,236,229,0.5); }
:root[data-theme="dark"] .about-page { color: #F2ECE5; }
:root[data-theme="dark"] .about-toc a,
:root[data-theme="dark"] .about-section { color: #F2ECE5; }

/* ---------- Industry Pulse: tabs + list ---------- */
.blog-tabs {
  display: flex; gap: 4px;
  margin: 22px 0 18px;
  border-bottom: 1px solid var(--line);
}
.blog-tab {
  background: transparent;
  border: 0;
  padding: 11px 18px 13px;
  font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-sub);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.blog-tab:hover { color: var(--ink); }
.blog-tab.active {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

.blog-tab-panel[hidden] { display: none; }

.pulse-meta {
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: 0.01em;
  margin: 0 0 14px;
}
.pulse-foot {
  font-size: 11.5px;
  color: var(--text-mute);
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  line-height: 1.5;
}
.pulse-empty { color: var(--text-mute); font-size: 14px; padding: 30px 0; }

/* Mirror the editorial .blog-grid / .blog-card shape so the two tabs feel
   like one product. The visual differences live in the meta row only:
   pulse cards show source + time-ago + outbound arrow instead of a
   category pill + read-time. */
.pulse-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 24px;
}
.pulse-item {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 22px 20px;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast);
  box-shadow: 0 2px 10px rgba(19,6,0,0.04);
  min-height: 220px;
}
.pulse-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
:root[data-theme="dark"] .pulse-item { background: #1F0F0A; border-color: rgba(242,236,229,0.10); }

.pulse-row {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 11px; color: var(--text-mute);
}
.pulse-source {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--cat, var(--orange));
  color: white;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pulse-time { font-weight: 500; }
.pulse-title {
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.015em; line-height: 1.25;
  color: var(--ink);
  margin: 0;
}
.pulse-item:hover .pulse-title { color: var(--orange); }
.pulse-excerpt {
  font-size: 13.5px; line-height: 1.55;
  color: rgba(19,6,0,0.66);
  margin: 0;
  flex: 1;
}
:root[data-theme="dark"] .pulse-excerpt { color: rgba(242,236,229,0.66); }
.pulse-out {
  font-size: 12px; font-weight: 600;
  color: var(--orange);
  letter-spacing: 0.02em;
  margin-top: 4px;
}

/* Cards are <button> elements now — strip default UA styling. */
button.pulse-item {
  text-align: left;
  font: inherit;
  cursor: pointer;
  width: 100%;
  position: relative;
}

/* Magazine-style card: full-bleed cover with title + meta layered on a
   dark gradient at the bottom. Top-3 hot cards only — non-hot cards
   keep the simpler text layout above. */
.pulse-item.has-cover {
  padding: 0;
  overflow: hidden;
}
.pulse-item.has-cover .pulse-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background-image: var(--cover-img);
  background-size: var(--cover-size, cover);
  background-position-x: var(--cover-pos-x, 50%);
  background-position-y: var(--cover-pos-y, 50%);
  background-repeat: no-repeat;
  background-color: #0d0608;
  position: relative;
}

/* Bottom gradient + meta + title overlay. The gradient is
   purposefully tall + soft — it darkens behind the text without making
   a hard band that fights the image. */
.pulse-item.has-cover .pulse-cover-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 60px 18px 18px;
  display: flex; flex-direction: column; gap: 10px;
  color: white;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,0.10) 30%,
    rgba(0,0,0,0.55) 70%,
    rgba(0,0,0,0.78) 100%);
  pointer-events: none;
}
.pulse-item.has-cover .pulse-row--on-cover {
  font-size: 11px;
  color: rgba(255,255,255,0.86);
  letter-spacing: 0.01em;
}
.pulse-item.has-cover .pulse-source--on-cover {
  background: rgba(255,255,255,0.18);
  color: white;
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(4px);
}
.pulse-item.has-cover .pulse-time--on-cover { color: rgba(255,255,255,0.78); }
.pulse-item.has-cover .pulse-title--on-cover {
  color: white;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.22;
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
  margin: 0;
}

.pulse-item.has-cover .pulse-hot {
  top: 14px; right: 14px;
  background: rgba(0,0,0,0.55);
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  filter: none;
  z-index: 2;
  font-size: 14px;
}

.pulse-item.has-cover .pulse-gist {
  /* The gist sits below the image inside the original padding box. */
  margin: 18px 22px 22px;
  padding: 4px 0 4px 14px;
}

/* Hot badge: 🔥 emoji top-right with a soft pulse. */
.pulse-hot {
  position: absolute;
  top: 14px; right: 14px;
  font-size: 16px;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(255, 83, 0, 0.45));
  animation: pulseHot 1.8s ease-in-out infinite;
}
@keyframes pulseHot {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(255,83,0,0.35)); }
  50%      { transform: scale(1.15); filter: drop-shadow(0 0 10px rgba(255,83,0,0.7)); }
}
.pulse-item.is-hot {
  border-color: rgba(255, 83, 0, 0.55);
  box-shadow: 0 2px 16px rgba(255, 83, 0, 0.10), 0 0 0 1px rgba(255, 83, 0, 0.18) inset;
}

/* The gist on the card — editorial pull-quote treatment instead of the
   loud "TL;DR" sticker. A 2px orange accent bar on the left, the brief
   in italic 450-weight prose. Reads as a reflective companion line to
   the headline rather than a label-and-blob. */
.pulse-gist {
  position: relative;
  margin: 4px 0 0;
  padding: 4px 0 4px 18px;
  flex: 1;
  font: inherit;
}
.pulse-gist::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--orange);
  border-radius: 2px;
  opacity: 0.78;
}
.pulse-gist p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(19, 6, 0, 0.74);
  font-style: italic;
  font-weight: 450;
}
:root[data-theme="dark"] .pulse-gist p { color: rgba(242, 236, 229, 0.74); }
.pulse-item.is-hot .pulse-gist::before { opacity: 1; }

/* Read state — faded card, restore on hover */
.pulse-item.is-read { opacity: 0.55; }
.pulse-item.is-read:hover { opacity: 1; }

/* ─────────────────────────── Reader overlay ─────────────────────────── */
body.pulse-reader-open { overflow: hidden; }

.pulse-reader[hidden] { display: none; }
.pulse-reader {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.pulse-reader-backdrop {
  position: absolute; inset: 0;
  background: rgba(19, 6, 0, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: backdropIn 220ms ease-out;
}
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }

.pulse-reader-card {
  position: relative;
  width: min(820px, calc(100% - 40px));
  height: min(92vh, 920px);
  max-height: 92vh;
  border-radius: var(--r-lg);
  background: var(--paper);
  color: var(--ink);
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(19, 6, 0, 0.35);
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 280ms ease-out;
}

/* Single scrollable region holds hero + body so the cover scrolls UP
   with the text instead of being stuck at the top. The head bar above
   stays fixed (close, counter, prev/next). */
.pulse-reader-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Non-hot cards: stable centered open with a soft fade only — no slide,
   no movement. The user explicitly asked for this. */
.pulse-reader[data-mode="fade"] .pulse-reader-card {
  animation: fadeIn 240ms ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Morph (hot cards only). JS sets the from-transform inline, CSS animates
   to identity. Same final geometry as fade so the card always lives in
   the same spot — only the entrance differs. */

/* Step transitions when navigating between items inside the reader */
.pulse-reader-card.is-step-next { animation: stepNext 260ms ease-out; }
.pulse-reader-card.is-step-prev { animation: stepPrev 260ms ease-out; }
@keyframes stepNext {
  0%   { transform: translateX(40px); opacity: 0.2; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes stepPrev {
  0%   { transform: translateX(-40px); opacity: 0.2; }
  100% { transform: translateX(0); opacity: 1; }
}

/* Reader hero: a compact cover (about half the previous height) with
   the meta + title overlaid at the TOP on a dark gradient that fades
   downward — the title is read first, then the eye drops to the
   image's main subject (cars sit center-vertically). The whole hero
   scrolls together with the body inside .pulse-reader-scroll. */
.pulse-reader-hero {
  position: relative;
  background: var(--paper);
}
/* Reader hero is now a real <img> so the source image renders at its
   full intrinsic resolution and never shrinks below a sensible floor.
   We force a 16/9 aspect ratio so the image never collapses to a thin
   strip when the source is unusually wide; object-fit: cover preserves
   the photograph's framing inside that ratio. The min-height + max-height
   bounds keep the hero readable on all viewports without dominating
   the modal on tall portrait sources. */
img.pulse-reader-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 240px;
  max-height: min(60vh, 540px);
  object-fit: cover;
  object-position: center;
  background-color: #0d0608;
}
img.pulse-reader-cover[hidden] { display: none; }

/* Editorial layout: image is the hero (full bleed, full scale), then
   the meta + title sit BELOW it on the page surface — never on top of
   or inside the image. This guarantees the image is always seen at
   full intrinsic dimensions, never masked. */
.pulse-reader-hero .pulse-reader-hero-overlay {
  position: static;
  padding: 22px 36px 18px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--paper);
  color: var(--ink);
}
.pulse-reader-hero .pulse-reader-title {
  margin: 0;
  color: var(--ink);
}
@media (max-width: 640px) {
  img.pulse-reader-cover { min-height: 220px; max-height: 50vh; }
  .pulse-reader-hero.has-cover .pulse-reader-hero-overlay { padding: 18px 22px 60px; }
  .pulse-reader-hero:not(.has-cover) .pulse-reader-hero-overlay { padding: 22px 22px 16px; }
}

.pulse-reader-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.pulse-reader-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.pulse-reader-close:hover { border-color: var(--orange); color: var(--orange); }

.pulse-reader-nav { display: flex; align-items: center; gap: 8px; }
.pulse-reader-prev, .pulse-reader-next {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.pulse-reader-prev svg, .pulse-reader-next svg { width: 14px; height: 14px; }
.pulse-reader-prev:hover, .pulse-reader-next:hover { border-color: var(--orange); color: var(--orange); }
.pulse-reader-counter {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-mute);
  padding: 0 6px;
}

.pulse-reader-body {
  padding: 26px 36px 36px;
  /* No longer the scroll container — .pulse-reader-scroll above wraps
     the hero AND the body so they scroll together. */
}
@media (max-width: 640px) {
  /* Full-bleed reader on phones — small centered cards leave too much grid
     visible behind the backdrop and feel half-committed to "reading mode".
     The flex centering needs to switch to stretch so the card actually
     fills the viewport rather than collapsing to its content height. */
  .pulse-reader { align-items: stretch; justify-content: stretch; }
  .pulse-reader-card {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    box-shadow: none;
  }
  .pulse-reader-body { padding: 22px 20px 28px; }
  .pulse-reader-head { padding: 14px 18px; }
  .pulse-reader-cover { aspect-ratio: 16 / 9; }
}

.pulse-reader-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-mute);
  margin-bottom: 14px;
}
.pulse-reader-meta .pulse-source { font-size: 10.5px; }
.pulse-reader-meta .pulse-hot {
  position: static;
  filter: none;
  font-size: 14px;
}

.pulse-reader-title {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 18px;
  color: var(--ink);
}

/* "The brief" — editorial gist block. A small monospaced label sits in
   its own tracked-out caps line above the quote, with a tiny pulse dot in
   AutoNergy orange. The quote itself reads as italic prose with no
   background fill, only a hairline left rule. Premium, not Reddit-y. */
/* The body of the reader. Single cohesive summary block now — the
   separate TL;DR header was redundant (it repeated the first sentence
   of this paragraph) and the user disliked the orange tick glyph next
   to it. Slightly oversized roman prose carries the editorial weight
   on its own. */
.pulse-reader-summary {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 60ch;
  margin: 0 0 28px;
  font-weight: 400;
  letter-spacing: -0.005em;
}

.pulse-reader-out {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--orange);
  color: white;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.pulse-reader-out:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255, 83, 0, 0.30); }
.pulse-reader-out strong { font-weight: 700; }

.pulse-reader-upnext {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.pulse-reader-upnext[hidden] { display: none; }
.pulse-reader-upnext-label {
  display: block;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 12px;
}
.pulse-reader-upnext-card {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 18px;
  cursor: pointer;
  color: var(--ink);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.pulse-reader-upnext-card:hover {
  border-color: var(--orange);
  background: rgba(255, 83, 0, 0.04);
}
.pulse-reader-upnext-source {
  align-self: flex-start;
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--cat, var(--orange));
  color: white;
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pulse-reader-upnext-title {
  font-size: 14px; font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

/* Dark theme: backdrop + reader card */
:root[data-theme="dark"] .pulse-reader-backdrop { background: rgba(0, 0, 0, 0.65); }
:root[data-theme="dark"] .pulse-reader-card { background: #1F0F0A; }
:root[data-theme="dark"] .pulse-reader-summary { color: rgba(242, 236, 229, 0.94); }
:root[data-theme="dark"] .pulse-reader-upnext-card:hover { background: rgba(255, 83, 0, 0.10); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .pulse-hot { animation: none; }
  .pulse-reader-card { animation: none !important; transition: none !important; }
  .pulse-reader-backdrop { animation: none; }
}