.mf-blog {
  --blog-ink: #25241f;
  --blog-muted: #605d53;
  --blog-line: #e6dfd0;
  --blog-paper: #faf8f2;
  --blog-accent: #795017;
  --blog-deep: #29443b;
  color: var(--blog-ink);
  background: #fffdf9;
}
.mf-blog > .top-navbar { background: inherit; }
.mf-blog [hidden] { display: none !important; }
.blog-shell {
  width: min(100% - 3rem, 1100px);
  margin-inline: auto;
  padding: clamp(5.25rem, 9vw, 8rem) 0 clamp(4rem, 8vw, 7rem);
}
.blog-article-head, .blog-index-head { max-width: 870px; }
.blog-crumbs, .blog-meta, .blog-byline, .blog-shares, .blog-filters, .blog-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.blog-crumbs { gap: .65rem; font-size: .9rem; }
.blog-crumbs a, .blog-prose a { color: var(--blog-accent); text-underline-offset: .2em; }
.blog-shell h1 {
  margin: .85rem 0 1rem;
  color: var(--blog-ink);
  font-size: clamp(2.55rem, 6.2vw, 4.75rem);
  font-weight: 740;
  letter-spacing: -.055em;
  line-height: 1.04;
  text-wrap: balance;
}
.blog-deck {
  max-width: 720px;
  margin: 0;
  color: var(--blog-muted);
  font-size: clamp(1.05rem, 2.1vw, 1.3rem);
  line-height: 1.55;
}
.blog-meta { justify-content: space-between; gap: .85rem 1.5rem; margin-top: 1.5rem; }
.blog-byline { gap: .35rem .85rem; margin: 0; font-size: .89rem; color: var(--blog-muted); }
.blog-byline span { color: var(--blog-ink); font-weight: 650; }
.blog-shares { position: relative; gap: .4rem; }
.blog-shares :is(a,button), .blog-filters button {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: .4rem .75rem;
  border: 1px solid var(--blog-line);
  border-radius: 999px;
  background: #fff;
  color: var(--blog-ink);
  font: inherit;
  font-size: .83rem;
  text-decoration: none;
  cursor: pointer;
}
.blog-shares :is(a,button):hover, .blog-filters button:hover { border-color: var(--blog-accent); }
.blog-copy-status { position: absolute; top: 100%; left: 0; font-size: .8rem; color: var(--blog-deep); }
.blog-shell :is(a,button,summary,[tabindex]):focus-visible { outline: 2px solid var(--blog-accent); outline-offset: 3px; }
.blog-cover { margin: clamp(1.5rem, 4vw, 2.8rem) 0 0; }
.blog-cover img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 490px;
  object-fit: cover;
  border-radius: 20px;
  background: var(--blog-paper);
  border: 1px solid var(--blog-line);
}
.blog-cover figcaption { margin: .6rem 0 0; color: var(--blog-muted); font-size: .82rem; }
.blog-reading-layout {
  display: grid;
  grid-template-columns: minmax(145px, 205px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.75rem);
  margin-top: clamp(2rem, 5vw, 3.8rem);
}
.blog-toc {
  position: sticky;
  top: 6rem;
  border-left: 1px solid var(--blog-line);
  padding-left: 1.05rem;
  color: var(--blog-muted);
}
.blog-toc summary { color: var(--blog-ink); font-weight: 700; cursor: pointer; }
.blog-toc nav { display: grid; gap: .75rem; margin-top: .85rem; }
.blog-toc a { width: fit-content; color: inherit; font-size: .9rem; text-decoration: none; line-height: 1.4; }
.blog-toc a:hover { color: var(--blog-accent); text-decoration: underline; }
.blog-prose { max-width: 790px; color: var(--blog-ink); font-size: 1.04rem; line-height: 1.75; }
.blog-prose :is(section,h3) { scroll-margin-top: 6rem; }
.blog-prose section + section { margin-top: 3.1rem; }
.blog-prose h2 { margin: 0 0 .7rem; font-size: clamp(1.75rem, 3.5vw, 2.35rem); letter-spacing: -.035em; line-height: 1.17; }
.blog-prose h3 { margin: 1.9rem 0 .42rem; font-size: 1.23rem; letter-spacing: -.016em; line-height: 1.35; }
.blog-prose p { margin: 0 0 .85rem; }
.blog-answer { background: var(--blog-paper); border-left: 3px solid #b9872c; border-radius: 0 12px 12px 0; padding: .85rem 1rem; margin: 1rem 0; }
.blog-answer p { margin: 0; }
.blog-table-scroll { overflow-x: auto; border: 1px solid var(--blog-line); border-radius: 12px; margin-top: 1.25rem; }
.blog-table-scroll table { min-width: 570px; width: 100%; border-collapse: collapse; text-align: left; font-size: .92rem; line-height: 1.55; }
.blog-table-scroll :is(th,td) { padding: .82rem .9rem; vertical-align: top; }
.blog-table-scroll thead { background: var(--blog-paper); }
.blog-table-scroll tbody tr { border-top: 1px solid var(--blog-line); }
.blog-table-scroll th[scope="row"] { white-space: nowrap; }
.blog-studio-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  padding: clamp(1rem, 3vw, 1.5rem);
  margin: 1.35rem 0;
  border: 1px solid #dce3d8;
  border-radius: 16px;
  background: #edf1e9;
}
.blog-studio-cta :is(h3,h4) { margin: 0 0 .25rem; color: var(--blog-deep); font-size: 1.15rem; line-height: 1.3; }
.blog-studio-cta p { margin: 0; max-width: 390px; color: #47554c; font-size: .92rem; }
.blog-studio-cta a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 42px;
  padding: .45rem .85rem;
  border-radius: 8px;
  background: var(--blog-deep);
  color: #fff;
  font-weight: 650;
  font-size: .87rem;
  text-decoration: none;
}
.blog-studio-cta a:hover { background: #1d352d; }
.blog-figure-editor { display: block; width: 100%; height: clamp(460px, 62vw, 610px); border: 1px solid var(--blog-line); border-radius: 14px; background: #fff; }
.blog-checklist { margin: .9rem 0 1.25rem; padding-left: 1.35rem; }
.blog-checklist li + li { margin-top: .6rem; }
.blog-index-head h1 { margin-top: 0; }
.blog-filters { gap: .45rem; margin: 2.1rem 0 1.3rem; }
.blog-filters button[aria-pressed="true"] { border-color: var(--blog-deep); background: var(--blog-deep); color: #fff; }
.blog-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.blog-index-card { overflow: hidden; border: 1px solid var(--blog-line); border-radius: 16px; background: #fff; }
.blog-card-cover { display: block; }
.blog-card-cover img, .blog-card-equation { display: block; width: 100%; aspect-ratio: 1200 / 550; object-fit: cover; height: auto; }
.blog-card-equation { display: grid; place-items: center; background: #edf1e9; color: var(--blog-deep); }
.blog-card-equation span { font: 400 clamp(3.5rem, 9vw, 7.5rem)/1 Georgia, serif; }
.blog-card-body { padding: clamp(1rem, 3vw, 1.4rem); }
.blog-card-meta { gap: .35rem .8rem; margin: 0 0 .55rem; color: var(--blog-muted); font-size: .84rem; }
.blog-card-meta span { color: var(--blog-accent); font-weight: 650; }
.blog-card-body h2 { margin: 0 0 .4rem; font-size: clamp(1.25rem, 3vw, 1.58rem); letter-spacing: -.025em; line-height: 1.25; }
.blog-card-body h2 a { color: var(--blog-ink); text-decoration: none; }
.blog-card-body h2 a:hover { text-decoration: underline; text-underline-offset: .18em; }
.blog-card-body p:last-child, .blog-empty { margin-bottom: 0; color: var(--blog-muted); }
@media (max-width: 700px) {
  .blog-shell { width: calc(100% - 2rem); }
  .blog-reading-layout, .blog-card-grid { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .blog-toc { position: static; padding: .75rem .9rem; border: 1px solid var(--blog-line); border-radius: 10px; }
  .blog-cover img { border-radius: 12px; }
}