/* =====================================================================
   Baghban Greens - public blog styles
   Loaded after the site stylesheets so it layers on top of journal.css.
   Uses the site's own design tokens, so the blog matches the rest of the
   site. Two knobs at the top let you re-skin it without touching anything
   else (see the commented lines).
   ===================================================================== */

:root {
  /* Accent used for chips, links, rules. Defaults to the site gold.
     Want the orange from the brief instead? Uncomment the next line:   */
  /* --blog-accent: #FF5701; */
  --blog-accent: var(--primary, #f0c447);

  /* Font for meta labels (category, date, read time).
     Defaults to the site's Raleway. For a mono/techy feel:              */
  /* --blog-label-font: "JetBrains Mono", ui-monospace, monospace; */
  --blog-label-font: var(--font-text, "Raleway", Arial, sans-serif);

  --blog-ink: var(--foreground, #1a1a1a);
  --blog-ink-soft: var(--text-muted, #5b6167);
  --blog-surface: var(--card, #fdfdfc);
  --blog-surface-soft: var(--surface-soft, #f4f4f2);
  --blog-line: var(--line, #dcdfe3);
  --blog-radius: 8px;
}

/* ------------------------------------------------------------ Page frame */
.blog-page { background: var(--surface, #fff); color: var(--blog-ink); }

.blog-section {
  padding: clamp(56px, 7vw, 96px) var(--page-gutter, clamp(20px, 5vw, 80px));
  border-top: 1px solid var(--blog-line);
}
.blog-section--featured { border-top: 0; }
.blog-section__head { display: grid; gap: 16px; max-width: 1280px; margin: 0 auto 40px; }
.blog-section__head h2 {
  margin: 0;
  font: 500 clamp(30px, 3.6vw, 52px)/1.15 var(--font-subheading, Georgia, serif);
}
.blog-section__head h2 em { font-style: italic; color: var(--blog-accent); }

.blog-section__head--split {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: end;
  max-width: 1280px;
}

/* ------------------------------------------------------------ Hero */
.blog-hero .journal-hero__topics a { color: var(--card, #fff); }
.blog-hero .journal-hero__topics a[aria-current="true"] {
  background: var(--blog-accent);
  border-color: var(--blog-accent);
  color: var(--blog-ink);
}

/* ------------------------------------------------------------ Feed grids */
.blog-featured-grid,
.blog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 32px);
  max-width: 1280px;
  margin: 0 auto;
}
.blog-grid { margin-top: 32px; }
.blog-grid--three { grid-template-columns: minmax(0, 1fr); }

/* ------------------------------------------------------------ Card */
.blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--blog-surface);
  border: 1px solid var(--blog-line);
  border-radius: var(--blog-radius);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.blog-card:hover,
.blog-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--blog-accent);
  box-shadow: 0 18px 38px rgba(16, 20, 24, .1);
}
.blog-card__media { display: block; overflow: hidden; background: var(--blog-surface-soft); }
.blog-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .5s ease;
}
.blog-card:hover .blog-card__media img { transform: scale(1.03); }

.blog-card__body { display: flex; flex-direction: column; gap: 12px; padding: 24px; flex: 1; }

.blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0;
  color: var(--blog-ink-soft);
  font: 700 10px/1 var(--blog-label-font);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.blog-card__meta time { color: var(--blog-ink-soft); }
.blog-card__cat {
  color: var(--blog-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--blog-accent);
  padding-bottom: 2px;
}
.blog-card__cat:hover { color: var(--blog-ink); background: var(--blog-accent); }

.blog-card__title {
  margin: 0;
  font: 500 clamp(21px, 2.2vw, 27px)/1.15 var(--font-subheading, Georgia, serif);
}
.blog-card__title a { color: inherit; text-decoration: none; }
.blog-card__title a:hover { text-decoration: underline; text-decoration-color: var(--blog-accent); text-underline-offset: 4px; }

.blog-card__excerpt { margin: 0; color: var(--blog-ink-soft); font-size: 14px; line-height: 1.7; }

.blog-card__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: auto 0 0;
  color: var(--blog-ink);
  font: 700 11px/1 var(--blog-label-font);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.blog-card__more span:last-child { color: var(--blog-accent); transition: transform .25s ease; }
.blog-card:hover .blog-card__more span:last-child { transform: translateX(5px); }

.blog-card--featured .blog-card__media img { aspect-ratio: 4 / 3; }
.blog-card--featured .blog-card__title { font-size: clamp(24px, 2.6vw, 34px); }
.blog-card--featured .blog-card__body { padding: 28px; }

/* ------------------------------------------------------------ Filters + search */
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 1280px;
  margin: 0 auto;
}
.blog-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--blog-line);
  border-radius: 999px;
  background: var(--blog-surface);
  color: var(--blog-ink-soft);
  font: 700 11px/1 var(--blog-label-font);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.blog-chip span { color: var(--blog-ink-soft); font-weight: 600; }
.blog-chip:hover { border-color: var(--blog-accent); color: var(--blog-ink); }
.blog-chip.is-active { background: var(--blog-ink); border-color: var(--blog-ink); color: #fff; }
.blog-chip.is-active span { color: var(--blog-accent); }

.blog-search { display: grid; gap: 8px; max-width: 460px; }
.blog-search__label {
  color: var(--blog-ink-soft);
  font: 700 10px/1 var(--blog-label-font);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.blog-search__row { display: flex; gap: 8px; flex-wrap: wrap; }
.blog-search__input {
  flex: 1 1 220px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--blog-line);
  border-radius: var(--blog-radius);
  background: var(--blog-surface);
  color: var(--blog-ink);
  font: 500 15px/1 var(--font-text, "Raleway", sans-serif);
}
.blog-search__input::placeholder { color: var(--blog-ink-soft); }

/* ------------------------------------------------------------ Empty + 404 */
.blog-empty {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px);
  text-align: center;
  background: var(--blog-surface-soft);
  border: 1px dashed var(--blog-line);
  border-radius: var(--blog-radius);
}
.blog-empty h1,
.blog-empty h3 { margin: 0 0 12px; font: 500 clamp(26px, 3vw, 40px)/1.15 var(--font-subheading, Georgia, serif); }
.blog-empty p { margin: 0 0 8px; color: var(--blog-ink-soft); }
.blog-empty__code {
  margin: 0 0 8px;
  color: var(--blog-accent);
  font: 700 13px/1 var(--blog-label-font);
  letter-spacing: .3em;
}
.blog-empty__cta { margin-top: 20px !important; }
.blog-empty a { color: var(--blog-ink); }

/* Shown when page 1's grid is empty because the featured row already holds
   every published post (a young blog with one to three stories). */
.blog-index-note {
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 40px);
  text-align: center;
  color: var(--blog-ink-soft);
  background: var(--blog-surface-soft);
  border: 1px dashed var(--blog-line);
  border-radius: var(--blog-radius);
}
.blog-index-note a { color: var(--blog-ink); }

/* ------------------------------------------------------------ Pagination */
.blog-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1280px;
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--blog-line);
}
.blog-page-link {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--blog-line);
  border-radius: var(--blog-radius);
  background: var(--blog-surface);
  color: var(--blog-ink);
  font: 700 11px/1 var(--blog-label-font);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.blog-page-link:hover { background: var(--blog-surface-soft); border-color: var(--blog-accent); transform: translateY(-2px); }
.blog-pagination__status { color: var(--blog-ink-soft); font-size: 12px; }
.blog-pagination__count { color: var(--blog-ink-soft); }

/* ------------------------------------------------------------ Single post frame */
.blog-preview-note {
  margin: 0;
  padding: 12px var(--page-gutter, 24px);
  background: var(--blog-accent);
  color: var(--blog-ink);
  font: 700 12px/1.5 var(--blog-label-font);
  text-align: center;
}
.blog-preview-note a { color: inherit; }

.blog-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 32px;
  color: var(--blog-ink-soft);
  font: 700 10px/1 var(--blog-label-font);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.blog-crumb a { color: var(--blog-ink-soft); text-decoration: none; }
.blog-crumb a:hover { color: var(--blog-ink); }
.blog-crumb__sep { color: var(--blog-ink-soft); }
.blog-crumb__current { color: var(--blog-ink); }

.blog-article {
  /* The site navigation is fixed over the page. Keep every post template's
     breadcrumb below it, with a deliberate breathing gap. */
  padding: calc(clamp(48px, 7vw, 96px) + clamp(32px, 3vw, 48px)) var(--page-gutter, clamp(20px, 5vw, 80px)) 0;
  background: var(--blog-surface);
}
.blog-article__wrap { max-width: 760px; margin: 0 auto; }
.blog-article__wrap--wide { max-width: 1280px; }
.blog-article__wrap--feature { max-width: 760px; margin: 0 auto; padding-top: clamp(40px, 5vw, 72px); }

.blog-article__header { display: grid; gap: 16px; margin-bottom: 32px; }
.blog-article__kicker {
  margin: 0;
  color: var(--blog-ink-soft);
  font: 700 10px/1 var(--blog-label-font);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.blog-article__title {
  margin: 0;
  font: 500 clamp(34px, 4.4vw, 60px)/1.04 var(--font-subheading, Georgia, serif);
}
.blog-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0;
  color: var(--blog-ink-soft);
  font: 700 10px/1 var(--blog-label-font);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.blog-article__cat { color: var(--blog-ink); text-decoration: none; border-bottom: 2px solid var(--blog-accent); }
.blog-article__cat:hover { background: var(--blog-accent); }
.blog-article__author { color: var(--blog-ink-soft); }

.blog-article__lead {
  margin: 0;
  color: var(--blog-ink-soft);
  font: 500 clamp(17px, 1.7vw, 21px)/1.6 var(--font-subheading, Georgia, serif);
}

.blog-article__figure { margin: 0 0 40px; }
.blog-article__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--blog-radius);
}

/* ------------------------------------------------------------ Prose (article body) */
.blog-prose { color: var(--blog-ink); font-size: 17px; line-height: 1.8; }
.blog-prose > * + * { margin-top: 22px; }
.blog-prose h2 { margin: 44px 0 0; font: 500 clamp(26px, 3vw, 36px)/1.15 var(--font-subheading, Georgia, serif); scroll-margin-top: 96px; }
.blog-prose h3 { margin: 34px 0 0; font: 500 clamp(21px, 2.3vw, 26px)/1.2 var(--font-subheading, Georgia, serif); scroll-margin-top: 96px; }
.blog-prose h4 { margin: 28px 0 0; font: 700 17px/1.3 var(--blog-label-font); letter-spacing: .02em; }
.blog-prose p { margin: 0; }
.blog-prose ul, .blog-prose ol { padding-left: 24px; }
.blog-prose li + li { margin-top: 8px; }
.blog-prose a { color: var(--blog-ink); text-decoration: underline; text-decoration-color: var(--blog-accent); text-underline-offset: 3px; }
.blog-prose a:hover { background: var(--blog-accent); }
.blog-prose strong { font-weight: 700; }
.blog-prose blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--blog-accent);
  color: var(--blog-ink-soft);
  font: 500 clamp(20px, 2.2vw, 26px)/1.45 var(--font-subheading, Georgia, serif);
}
.blog-prose img { display: block; max-width: 100%; height: auto; border-radius: var(--blog-radius); }
.blog-prose figure { margin: 32px 0; }
.blog-prose figcaption { margin-top: 10px; color: var(--blog-ink-soft); font-size: 13px; }
.blog-prose hr { margin: 40px 0; border: 0; border-top: 1px solid var(--blog-line); }
.blog-prose code {
  padding: 2px 6px;
  background: var(--blog-surface-soft);
  border: 1px solid var(--blog-line);
  border-radius: 4px;
  font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.blog-prose pre {
  margin: 28px 0;
  padding: 18px 20px;
  overflow-x: auto;
  background: #16181a;
  color: #f4f4f2;
  border-radius: var(--blog-radius);
}
.blog-prose pre code { padding: 0; background: none; border: 0; color: inherit; }
.blog-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.blog-prose th, .blog-prose td { padding: 12px 14px; border-bottom: 1px solid var(--blog-line); text-align: left; }
.blog-prose th { font: 700 11px/1.4 var(--blog-label-font); letter-spacing: .08em; text-transform: uppercase; color: var(--blog-ink-soft); }

/* Wider measure + larger quotes for the magazine template */
.blog-prose--feature { font-size: 18px; }
.blog-prose--feature blockquote {
  margin: 40px 0;
  padding: 8px 0 8px 28px;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.25;
  color: var(--blog-ink);
}

/* Numbered how-to steps (no manual numbering needed) */
.blog-prose--steps { counter-reset: blog-step; }
.blog-prose--steps h2 { counter-increment: blog-step; display: grid; gap: 8px; }
.blog-prose--steps h2::before {
  content: "Step " counter(blog-step);
  color: var(--blog-ink-soft);
  font: 700 10px/1 var(--blog-label-font);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.blog-prose--steps h3::before { content: "\002014 "; color: var(--blog-accent); }

/* ------------------------------------------------------------ Listicle extras */
.blog-listicle { display: grid; gap: 40px; }
.blog-toc {
  padding: 24px 28px;
  background: var(--blog-surface-soft);
  border: 1px solid var(--blog-line);
  border-left: 4px solid var(--blog-accent);
  border-radius: var(--blog-radius);
}
.blog-toc__title { margin: 0 0 16px; font: 700 11px/1 var(--blog-label-font); letter-spacing: .16em; text-transform: uppercase; color: var(--blog-ink-soft); }
.blog-toc__list { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.blog-toc__item + .blog-toc__item { border-top: 1px solid var(--blog-line); }
.blog-toc__item a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  color: var(--blog-ink);
  font: 500 17px/1.4 var(--font-subheading, Georgia, serif);
  text-decoration: none;
}
.blog-toc__item a:hover { color: var(--blog-ink); text-decoration: underline; text-decoration-color: var(--blog-accent); text-underline-offset: 4px; }
.blog-toc__num { color: var(--blog-accent); font: 700 12px/1 var(--blog-label-font); }

.blog-takeaway {
  margin-top: 40px;
  padding: 28px;
  border: 1px solid var(--blog-line);
  border-radius: var(--blog-radius);
  background: var(--blog-surface-soft);
}
.blog-takeaway__title { margin: 0 0 10px; font: 700 11px/1 var(--blog-label-font); letter-spacing: .16em; text-transform: uppercase; color: var(--blog-ink-soft); }
.blog-takeaway p { margin: 0; font: 500 clamp(18px, 2vw, 22px)/1.5 var(--font-subheading, Georgia, serif); }

/* ------------------------------------------------------------ Tags + share + author */
.blog-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 44px; }
.blog-tags__label { color: var(--blog-ink-soft); font: 700 10px/1 var(--blog-label-font); letter-spacing: .14em; text-transform: uppercase; }
.blog-tag {
  padding: 8px 12px;
  border: 1px solid var(--blog-line);
  border-radius: 999px;
  color: var(--blog-ink-soft);
  font: 600 12px/1 var(--blog-label-font);
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.blog-tag:hover { background: var(--blog-ink); border-color: var(--blog-ink); color: var(--blog-accent); }

.blog-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--blog-line); }
.blog-share__label { color: var(--blog-ink-soft); font: 700 10px/1 var(--blog-label-font); letter-spacing: .14em; text-transform: uppercase; margin-right: 4px; }
.blog-share__link {
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--blog-line);
  border-radius: 999px;
  background: var(--blog-surface);
  color: var(--blog-ink);
  font: 700 11px/1 var(--blog-label-font);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.blog-share__link:hover { border-color: var(--blog-accent); transform: translateY(-2px); }
.blog-share__copy[data-copied="true"] { background: var(--blog-accent); border-color: var(--blog-accent); }

.blog-author { display: flex; align-items: center; gap: 16px; margin: 40px 0 0; padding: 24px; background: var(--blog-surface-soft); border-radius: var(--blog-radius); }
.blog-author__mark { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--blog-ink); color: var(--blog-accent); font: 700 13px/1 var(--blog-label-font); }
.blog-author__name { margin: 0 0 4px; font: 600 17px/1.2 var(--font-subheading, Georgia, serif); }
.blog-author__bio { margin: 0; color: var(--blog-ink-soft); font-size: 13px; }
.blog-article__footer { display: grid; gap: 8px; margin-top: 8px; }

/* ------------------------------------------------------------ Feature template */
.blog-feature-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(420px, 62vh, 620px);
  margin-top: 24px;
  padding: clamp(40px, 6vw, 88px) var(--page-gutter, clamp(20px, 5vw, 80px));
  background: var(--blog-ink);
  color: var(--card, #fff);
  overflow: hidden;
}
.blog-feature-hero--image { background-image: var(--blog-hero-image); background-size: cover; background-position: center; }
.blog-feature-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.15) 0%, rgba(10,10,10,.55) 55%, rgba(10,10,10,.85) 100%);
  z-index: 0;
}
.blog-feature-hero__inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; width: 100%; }
.blog-feature-hero__kicker {
  margin: 0 0 16px;
  color: var(--blog-accent);
  font: 700 11px/1 var(--blog-label-font);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.blog-feature-hero__title { margin: 0 0 18px; font: 500 clamp(36px, 5.4vw, 74px)/1.03 var(--font-subheading, Georgia, serif); }
.blog-feature-hero__lead { max-width: 640px; margin: 0 0 18px; color: rgba(255,255,255,.86); font: 500 clamp(16px, 1.8vw, 20px)/1.6 var(--font-subheading, Georgia, serif); }
.blog-feature-hero__meta { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; color: rgba(255,255,255,.75); font: 700 10px/1 var(--blog-label-font); letter-spacing: .12em; text-transform: uppercase; }

.blog-feature-caption { max-width: 760px; margin: 16px auto 0; padding-left: var(--page-gutter, 24px); padding-right: var(--page-gutter, 24px); color: var(--blog-ink-soft); font-size: 13px; }
.blog-feature-byline { margin: 24px 0 0; color: var(--blog-ink-soft); font: 700 10px/1.6 var(--blog-label-font); letter-spacing: .1em; text-transform: uppercase; }
.blog-article--feature .blog-share, .blog-article--feature .blog-tags { margin-top: 24px; }

/* ------------------------------------------------------------ Responsive */
@media (min-width: 700px) {
  .blog-grid, .blog-grid--three, .blog-featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-section__head--split { grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); }
}
@media (min-width: 1000px) {
  .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .blog-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .blog-featured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* First featured card takes the lead in a two-column slot */
  .blog-featured-grid .blog-card--featured:first-child { grid-column: span 2; }
  .blog-featured-grid .blog-card--featured:first-child .blog-card__media img { aspect-ratio: 16 / 9; }
}
@media (max-width: 620px) {
  .blog-section { padding-left: var(--page-gutter, 20px); padding-right: var(--page-gutter, 20px); }
  .blog-card__body { padding: 20px; }
  .blog-pagination { justify-content: center; }
  .blog-pagination__status { order: -1; width: 100%; text-align: center; }
  .blog-article__title { font-size: 32px; }
}

/* The site's global .reveal animation must never hide blog content: the
   blog is server-rendered and has to read fine with JavaScript disabled. */
.blog-page .reveal,
.blog-page section.reveal,
.blog-page article.reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ------------------------------------------------------------ Focus + motion */
.blog-page a:focus-visible,
.blog-page button:focus-visible,
.blog-page input:focus-visible {
  outline: 3px solid var(--blog-accent);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .blog-card, .blog-card__media img, .blog-page-link, .blog-share__link { transition: none !important; }
  .blog-card:hover { transform: none; }
}

/* =====================================================================
 *  READING EXPERIENCE (added in the UX pass)
 *  1. progress bar      5. zoom affordance
 *  2. table of contents 6. prev/next
 *  3. lightbox          7. back to top
 *  4. sticky filters    8. reveal-on-scroll
 * ================================================================== */
:root {
  /* Height of the pinned site header + breathing room, used so anchor jumps
     and the sticky filter bar never hide behind it. */
  --blog-sticky-top: 88px;
  --blog-anchor-offset: 112px;
}

/* -------------------------------------------------- 1. Reading progress */
.blog-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  height: 3px;
  background: color-mix(in srgb, var(--blog-line) 60%, transparent);
  pointer-events: none;
}
.blog-progress i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--blog-accent);
}

/* -------------------------------------------------- 2. Table of contents */
.blog-toc { position: relative; }
.blog-toc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.blog-toc__head .blog-toc__title { margin: 0; }
.blog-toc__toggle {
  padding: 6px 12px;
  border: 1px solid var(--blog-line);
  border-radius: 999px;
  background: var(--blog-surface);
  color: var(--blog-ink-soft);
  font: 600 11px/1 var(--blog-label-font);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.blog-toc__toggle:hover { border-color: var(--blog-accent); color: var(--blog-ink); }

/* Thin "how far into the story am I" line across the top of the panel. */
.blog-toc__progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  overflow: hidden;
}
.blog-toc__progress i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--blog-accent);
}

.blog-toc.is-collapsed .blog-toc__list { display: none; }
.blog-toc__text { flex: 1; }
.blog-toc__item a::after {
  content: "\002193";
  margin-left: auto;
  color: var(--blog-ink-soft);
  font-size: 12px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s ease, transform .2s ease;
}
.blog-toc__item a:hover::after { opacity: 1; transform: none; }

/* The section the reader is currently inside. */
.blog-toc__item a.is-current { color: var(--blog-ink); }
.blog-toc__item a.is-current::before {
  content: "";
  position: absolute;
  left: -28px;
  width: 3px;
  height: 22px;
  background: var(--blog-accent);
  border-radius: 2px;
}
.blog-toc__item { position: relative; }
.blog-toc__item a.is-current .blog-toc__num { color: var(--blog-ink); }

/* --------------------------------------------- 3. Lightbox / image viewer */
.blog-zoom { position: relative; display: block; overflow: hidden; border-radius: var(--blog-radius); }
.blog-zoom img { display: block; width: 100%; height: auto; transition: transform .5s ease; }
.blog-zoom:hover img { transform: scale(1.02); }
.blog-zoom__hint {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(20, 20, 20, .72);
  color: #fff;
  font: 600 10px/1 var(--blog-label-font);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .25s ease;
}
.blog-zoom:hover .blog-zoom__hint,
.blog-zoom:focus-visible .blog-zoom__hint { opacity: 1; }
.blog-zoom:focus-visible { outline: 3px solid var(--blog-accent); outline-offset: 3px; }

.blog-prose img.is-zoomable { cursor: zoom-in; }

.blog-lightbox {
  width: min(1100px, 94vw);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: var(--blog-radius);
  background: #111;
  color: #fff;
  overflow: hidden;
}
.blog-lightbox::backdrop { background: rgba(12, 12, 12, .86); }
.blog-lightbox__frame { margin: 0; display: flex; flex-direction: column; }
.blog-lightbox__frame img {
  display: block;
  width: 100%;
  max-height: 76vh;
  object-fit: contain;
  background: #111;
}
.blog-lightbox__caption {
  padding: 14px 20px 0;
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
  line-height: 1.6;
}
.blog-lightbox__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px 18px;
}
.blog-lightbox__btn {
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: 600 11px/1 var(--blog-label-font);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.blog-lightbox__btn:hover { background: var(--card); border-color: var(--card); color: var(--ink); }
.blog-lightbox__btn--close { margin-left: auto; }
.blog-lightbox__count { color: rgba(255, 255, 255, .7); font: 600 11px/1 var(--blog-label-font); letter-spacing: .14em; }
html.is-lightbox-open { overflow: hidden; }

/* -------------------------------------------------- 4. Sticky filters */
.blog-filters__sentinel { display: block; height: 1px; }
.blog-filters {
  position: sticky;
  top: var(--blog-sticky-top);
  z-index: 20;
  padding: 12px 0;
  background: var(--blog-page-bg, inherit);
  transition: box-shadow .25s ease, background .25s ease;
}
.blog-filters.is-stuck {
  background: var(--blog-surface);
  box-shadow: 0 10px 30px rgba(20, 20, 20, .08);
}
.blog-chip--clear { border-style: dashed; color: var(--blog-ink-soft); }
.blog-chip--clear:hover { border-color: var(--blog-ink); color: var(--blog-ink); }

/* -------------------------------------------------- Listing count line */
.blog-count {
  margin: 12px 0 0;
  color: var(--blog-ink-soft);
  font: 600 12px/1.5 var(--blog-label-font);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.blog-count__clear { color: var(--blog-ink); text-decoration: underline; text-decoration-color: var(--blog-accent); text-underline-offset: 3px; }

/* -------------------------------------------------- 5. Prev / next story */
.blog-postnav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--blog-line);
}
.blog-postnav__link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
  border: 1px solid var(--blog-line);
  border-radius: var(--blog-radius);
  background: var(--blog-surface);
  color: var(--blog-ink);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.blog-postnav__link:hover { transform: translateY(-4px); border-color: var(--blog-accent); box-shadow: 0 18px 40px rgba(20, 20, 20, .08); }
.blog-postnav__link--next { text-align: right; align-items: flex-end; }
.blog-postnav__label {
  color: var(--blog-ink-soft);
  font: 600 10px/1 var(--blog-label-font);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.blog-postnav__title { font: 500 19px/1.3 var(--font-subheading, Georgia, serif); }

/* Small print when an article was genuinely revised. */
.blog-article__updated { color: var(--blog-ink-soft); }
.blog-share__native { border-style: dashed; }

/* -------------------------------------------------- 7. Back to top */
.blog-top {
  position: fixed;
  right: clamp(14px, 3vw, 34px);
  bottom: clamp(14px, 3vw, 34px);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 1px solid var(--blog-line);
  border-radius: 999px;
  background: var(--blog-surface);
  color: var(--blog-ink);
  font: 600 11px/1 var(--blog-label-font);
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 12px 34px rgba(20, 20, 20, .14);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease;
}
.blog-top:hover { transform: translateY(-3px); border-color: var(--blog-accent); }

/* -------------------------------------------------- 8. Reveal on scroll */
.will-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}
.will-reveal.is-visible { opacity: 1; transform: none; }

/* Anchors clear the pinned header. */
.blog-prose h2, .blog-prose h3, .blog-prose h4 { scroll-margin-top: var(--blog-anchor-offset); }

/* -------------------------------------------------- 9. Listicle steps */
.blog-prose--steps { counter-reset: step; }
.blog-prose--steps h2 {
  position: relative;
  padding-left: 58px;
  counter-increment: step;
}
.blog-prose--steps h2::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -6px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blog-accent);
  color: #1a1a1a;
  font: 700 13px/1 var(--blog-label-font);
}
.blog-prose--steps h2::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 44px;
  bottom: -44px;
  width: 1px;
  background: var(--blog-line);
}
.blog-prose--steps h2:last-of-type::after { display: none; }

/* -------------------------------------------------- 10. Small screens */
@media (max-width: 900px) {
  :root { --blog-sticky-top: 0px; }
  .blog-filters { position: static; box-shadow: none !important; }
  .blog-prose--steps h2 { padding-left: 0; padding-top: 54px; }
  .blog-prose--steps h2::after { display: none; }
  .blog-lightbox__bar { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .will-reveal { opacity: 1; transform: none; transition: none; }
  .blog-toc__item a::after, .blog-zoom img, .blog-postnav__link, .blog-top { transition: none !important; }
  .blog-zoom:hover img, .blog-postnav__link:hover, .blog-top:hover { transform: none; }
}

/* =================================================================
   11. The related-stories rail

   Every template wraps its content in .blog-article__wrap--rail, which
   widens the document to two columns: the reading measure on the left
   and a sticky rail on the right. Below 1000px the rail drops under the
   article, because a 300px column beside a 360px screen leaves neither
   one readable.
   ================================================================= */
.blog-article__wrap--rail {
  max-width: 1140px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(30px, 4vw, 60px);
  align-items: start;
}
/* Reset the narrower variants when the rail is in play. */
.blog-article__wrap--rail.blog-article__wrap--feature { max-width: 1140px; }
.blog-article__main { min-width: 0; }

/* The rail column MUST be as tall as the grid row. The grid sets
   `align-items: start`, which sizes every item to its own content - and a
   sticky element cannot travel inside a parent that is only as tall as
   itself, so position: sticky below silently did nothing until this item
   opted back in to stretching. */
.blog-rail { min-width: 0; align-self: stretch; }
.blog-rail__inner {
  position: sticky;
  top: clamp(84px, 10vh, 116px);
  display: grid;
  gap: 18px;
  padding: 26px 24px;
  border: 1px solid var(--blog-line);
  border-radius: var(--blog-radius);
  background: var(--blog-surface-soft);
}
.blog-rail__title {
  margin: 0;
  color: var(--blog-ink-soft);
  font: 700 11px/1 var(--blog-label-font);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.blog-rail__list { margin: 0; padding: 0; list-style: none; display: grid; }
.blog-rail__item + .blog-rail__item { border-top: 1px solid var(--blog-line); }
.blog-rail__link {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  color: var(--blog-ink);
  text-decoration: none;
}
/* Stories with no featured image: no empty photograph column. */
.blog-rail__link--text { grid-template-columns: minmax(0, 1fr); }
.blog-rail__link:hover .blog-rail__headline,
.blog-rail__link:focus-visible .blog-rail__headline {
  text-decoration: underline;
  text-decoration-color: var(--blog-accent);
  text-underline-offset: 3px;
}
.blog-rail__thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: var(--blog-line); }
.blog-rail__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-rail__body { display: grid; gap: 5px; min-width: 0; }
.blog-rail__meta {
  color: var(--blog-accent);
  font: 700 9px/1 var(--blog-label-font);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.blog-rail__headline { font: 500 16px/1.35 var(--font-subheading, Georgia, serif); }
.blog-rail__date { color: var(--blog-ink-soft); font-size: 11px; }
.blog-rail__empty { margin: 0; color: var(--blog-ink-soft); font-size: 13px; }
.blog-rail__more { display: grid; gap: 4px; margin: 0; padding-top: 6px; border-top: 1px solid var(--blog-line); }
.blog-rail__more a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  color: var(--blog-ink);
  font: 600 12px/1 var(--blog-label-font);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
.blog-rail__more a:hover, .blog-rail__more a:focus-visible { color: var(--blog-accent); }

@media (max-width: 1000px) {
  .blog-article__wrap--rail { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .blog-rail__inner { position: static; }
  /* Two-up reads better than a single long list under a finished article. */
  .blog-rail__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
  .blog-rail__item + .blog-rail__item { border-top: 0; }
  .blog-rail__item:nth-child(n + 3) { border-top: 1px solid var(--blog-line); }
  .blog-rail__item:nth-child(odd) { border-right: 1px solid var(--blog-line); padding-right: 22px; }
}
@media (max-width: 620px) {
  .blog-rail__list { grid-template-columns: minmax(0, 1fr); }
  .blog-rail__item:nth-child(odd) { border-right: 0; padding-right: 0; }
  .blog-rail__item + .blog-rail__item { border-top: 1px solid var(--blog-line); }
  .blog-rail__link { grid-template-columns: 64px minmax(0, 1fr); }
}

/* ------------------------------------------------------------ Image-led post spacing + responsive hero */
.blog-article--feature {
  /* Keep the feature template on the shared header offset too. */
  padding-top: calc(clamp(48px, 7vw, 96px) + clamp(32px, 3vw, 48px));
}
.blog-article--feature > .blog-article__wrap--wide {
  width: min(100%, 1280px);
  margin-inline: auto;
}
.blog-article--feature .blog-crumb {
  line-height: 1.5;
  row-gap: 6px;
}
.blog-article--feature .blog-crumb__current {
  min-width: 0;
  overflow-wrap: anywhere;
}
.blog-feature-hero {
  min-height: clamp(440px, 65svh, 620px);
}
.blog-feature-hero__title {
  max-width: 18ch;
  font-size: clamp(36px, 5.4vw, 74px);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .blog-article { padding-top: calc(clamp(48px, 7vw, 72px) + 24px); }
  .blog-article--feature { padding-top: calc(clamp(48px, 7vw, 72px) + 24px); }
  .blog-article--feature > .blog-article__wrap--wide { padding-inline: var(--page-gutter, 24px); }
  .blog-feature-hero {
    min-height: max(420px, 62svh);
    padding-block: clamp(40px, 8vw, 72px);
  }
  .blog-feature-hero__inner { max-width: 760px; }
  .blog-feature-hero__title { max-width: 16ch; font-size: clamp(38px, 7vw, 60px); }
}

@media (max-width: 620px) {
  .blog-article { padding-top: 92px; }
  .blog-article--feature { padding-top: 92px; }
  .blog-article--feature > .blog-article__wrap--wide { padding-inline: 18px; }
  .blog-article--feature .blog-crumb {
    gap: 5px 8px;
    margin-bottom: 22px;
    font-size: 9px;
    letter-spacing: .07em;
  }
  .blog-feature-hero {
    min-height: max(400px, 58svh);
    margin-top: 0;
    padding: 36px 20px;
    background-position: 58% center;
  }
  .blog-feature-hero__title {
    max-width: 15ch;
    margin-bottom: 14px;
    font-size: clamp(34px, 10vw, 48px);
    line-height: 1.04;
  }
  .blog-feature-hero__lead { font-size: 16px; line-height: 1.5; }
  .blog-feature-hero__meta { gap: 10px 14px; line-height: 1.5; }
  .blog-feature-caption { padding-inline: 18px; }
}

/* =================================================================
   12. The five layout-only templates

   Each of these changes how the SAME author-written body HTML is set -
   no template needs structured input beyond headings, paragraphs, lists,
   figures and tables.
   ================================================================= */

/* -------------------------------------------------- Shared chip */
/* "5 steps, in order" / "3 milestones" / "4 photographs". */
.blog-essay__count,
.blog-listicle__count,
.blog-timeline__count {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 30px;
  padding: 9px 14px;
  border: 1px solid var(--blog-line);
  border-radius: 999px;
  color: var(--blog-ink-soft);
  font: 700 10px/1 var(--blog-label-font);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.blog-essay__count span,
.blog-listicle__count span,
.blog-timeline__count span { color: var(--blog-accent); }

/* -------------------------------------------------- Photo essay */
.blog-essay__cover { margin: 0 0 24px; }
.blog-essay__cover img { width: 100%; border-radius: var(--blog-radius); }
.blog-prose--essay { font-size: 18px; }
.blog-prose--essay figure { margin: clamp(32px, 5vw, 56px) 0; }
.blog-prose--essay figure img { width: 100%; border-radius: var(--blog-radius); }
.blog-prose--essay figcaption { margin-top: 12px; color: var(--blog-ink-soft); font-size: 13px; }

/* -------------------------------------------------- Interview / Q&A */
.blog-interview__who {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 34px;
  padding: 20px 24px;
  border-left: 4px solid var(--blog-accent);
  background: var(--blog-surface-soft);
}
.blog-interview__mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--blog-ink);
  color: var(--blog-surface);
  font: 700 11px/1 var(--blog-label-font);
  letter-spacing: .06em;
}
.blog-interview__who-line { margin: 0; display: grid; gap: 4px; }
.blog-interview__who-line span {
  color: var(--blog-ink-soft);
  font: 700 9px/1 var(--blog-label-font);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.blog-interview__who-line strong { font: 500 clamp(18px, 2vw, 22px)/1.2 var(--font-subheading, Georgia, serif); }

/* The Q/A script. Every answer paragraph is indented into the same gutter;
   only the first one after a question carries the "A" marker, so a long
   answer reads as prose rather than a wall of labels. */
.blog-prose--qa h2 {
  position: relative;
  margin-top: clamp(34px, 4vw, 52px);
  padding-left: 62px;
  font-size: clamp(21px, 2.4vw, 27px);
}
.blog-prose--qa h2::before {
  content: "Q";
  position: absolute;
  left: 0;
  top: -4px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blog-accent);
  color: var(--blog-ink);
  font: 700 15px/1 var(--blog-label-font);
}
.blog-prose--qa h2 + p { position: relative; }
.blog-prose--qa h2 + p::before {
  content: "A";
  position: absolute;
  left: -62px;
  top: 6px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 26px;
  border: 1px solid var(--blog-line);
  border-radius: 999px;
  color: var(--blog-ink-soft);
  font: 700 11px/1 var(--blog-label-font);
}
.blog-prose--qa p { padding-left: 62px; }
@media (max-width: 620px) {
  .blog-prose--qa h2 { padding-left: 44px; }
  .blog-prose--qa h2::before { width: 32px; height: 32px; font-size: 12px; }
  .blog-prose--qa p { padding-left: 44px; }
  .blog-prose--qa h2 + p::before { left: -44px; width: 32px; height: 24px; font-size: 10px; }
}

/* -------------------------------------------------- Comparison guide */
.blog-compare__hint {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 32px;
  padding: 18px 22px;
  border: 1px dashed var(--blog-line);
  border-radius: var(--blog-radius);
  color: var(--blog-ink-soft);
  font-size: 14px;
}
.blog-compare__hint span { color: var(--blog-accent); font-size: 20px; line-height: 1; }
.blog-prose--compare h2 { padding-bottom: 12px; border-bottom: 2px solid var(--blog-ink); }
.blog-prose--compare table {
  width: 100%;
  border-collapse: collapse;
  margin: clamp(26px, 4vw, 40px) 0;
  font-size: 14px;
}
.blog-prose--compare th,
.blog-prose--compare td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--blog-line);
}
.blog-prose--compare thead th {
  background: var(--blog-surface-soft);
  color: var(--blog-ink);
  font: 700 11px/1.3 var(--blog-label-font);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.blog-prose--compare tbody tr:hover { background: var(--blog-surface-soft); }
.blog-takeaway--verdict { border-left: 4px solid var(--blog-accent); }
/* A wide comparison table scrolls rather than wrapping into mush. */
@media (max-width: 720px) {
  .blog-prose--compare { overflow-x: auto; }
  .blog-prose--compare table { min-width: 520px; }
}

/* -------------------------------------------------- Timeline */
.blog-prose--timeline { position: relative; padding-left: clamp(38px, 6vw, 58px); }
.blog-prose--timeline::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: clamp(11px, 1.6vw, 16px);
  width: 2px;
  background: linear-gradient(to bottom, var(--blog-accent), var(--blog-line));
}
.blog-prose--timeline h2 {
  position: relative;
  margin-top: clamp(38px, 5vw, 56px);
  font-size: clamp(21px, 2.4vw, 27px);
}
.blog-prose--timeline h2:first-child { margin-top: 0; }
.blog-prose--timeline h2::before {
  content: "";
  position: absolute;
  top: .38em;
  left: calc(-1 * clamp(38px, 6vw, 58px) + clamp(7px, 1.1vw, 11px));
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--blog-accent);
  box-shadow: 0 0 0 4px var(--blog-surface);
}

/* -------------------------------------------------- Checklist */
.blog-quickref {
  margin: 0 0 34px;
  padding: 26px 28px;
  border: 1px solid var(--blog-line);
  border-left: 4px solid var(--blog-accent);
  border-radius: var(--blog-radius);
  background: var(--blog-surface-soft);
}
.blog-quickref__title {
  margin: 0 0 12px;
  color: var(--blog-ink-soft);
  font: 700 11px/1 var(--blog-label-font);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.blog-quickref p { margin: 0; font: 500 clamp(17px, 2vw, 21px)/1.5 var(--font-subheading, Georgia, serif); }
.blog-quickref__count {
  margin-top: 14px;
  color: var(--blog-ink-soft);
  font: 700 10px/1 var(--blog-label-font);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.blog-prose--checklist { max-width: 680px; font-size: 17px; }
.blog-prose--checklist h2 { margin-top: clamp(30px, 4vw, 44px); font-size: clamp(20px, 2.2vw, 25px); }
.blog-prose--checklist ul { margin: 18px 0 26px; padding: 0; list-style: none; display: grid; gap: 10px; }
.blog-prose--checklist ul li {
  position: relative;
  padding: 13px 18px 13px 46px;
  border: 1px solid var(--blog-line);
  border-radius: 6px;
  background: var(--blog-surface);
  margin: 0;
}
.blog-prose--checklist ul li::before {
  content: "\\2713";
  position: absolute;
  left: 17px;
  top: 13px;
  color: var(--blog-accent);
  font-weight: 700;
}