/* Sapiom editorial system ---------------------------------------------------
   One visual grammar for the blog index and every article route. The shared
   site files still own tokens, chrome, controls, and theme; this file owns only
   publication layout, reading typography, and editorial media. */

.blog-site .brand-image {
  display: block;
  width: auto;
  height: 19px;
}

[data-theme="dark"] .blog-site .brand-image { filter: invert(1) }

.blog-index-hero {
  padding-block: clamp(40px, 5vw, 64px) clamp(16px, 2.2vw, 28px);
}

.blog-index-hero-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp5) var(--sp6);
}

.blog-index-hero-copy {
  display: flex;
  width: min(44rem, 100%);
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.blog-index-hero-copy > * { margin-inline: 0 }
.blog-index-hero .display {
  max-width: none;
  font-size: clamp(2.7rem, 5vw, 4.2rem);
  text-transform: lowercase;
}
.blog-index-hero .lead { max-width: 54ch; margin-top: var(--sp3) }

.blog-media-btn {
  flex: 0 0 auto;
  align-self: flex-end;
  gap: 8px;
}

.blog-media-btn svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

/* Collapse the double band between hero copy and the featured card. */
.blog-site .section.tight:has(.blog-featured) {
  padding-top: clamp(8px, 1.4vw, 16px);
  padding-bottom: calc(var(--band) * .5);
}

/* No hairline under the featured card before the latest grid. */
.blog-featured-section + .section { border-top: 0 }

@media (min-width: 800px) {
  .blog-index-hero .display { white-space: nowrap }
}

@media (max-width: 820px) {
  .blog-index-hero-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .blog-media-btn { align-self: flex-start }
}

.blog-featured {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  min-height: 32rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--s1);
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), transform .35s var(--ease);
}

.blog-featured:hover,
.blog-featured:has(.blog-card-link:focus-visible) {
  background: color-mix(in srgb, var(--s1) 94%, var(--ink));
  border-color: var(--line-2);
  transform: translateY(-2px);
}

.blog-featured-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(30px, 5vw, 64px);
}

.blog-featured-copy h2 {
  margin: var(--sp5) 0 var(--sp4);
  max-width: 14ch;
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.05;
  text-wrap: balance;
}

.blog-featured-copy > p {
  margin: 0;
  max-width: 45ch;
  color: var(--ink-muted);
  font-size: var(--t-title);
  line-height: 1.5;
}

.blog-featured-copy .blog-read { margin-top: auto; padding-top: var(--sp6) }

.blog-featured-media {
  min-width: 0;
  padding: 12px;
}

.blog-featured-media .editorial-cover { height: 100% }

.blog-media {
  padding: 10px 10px 0;
}

/* Card media has one visual layer. The card itself supplies the only inset;
   portraits retain one clean nested crop without decorative labels or frames. */
.editorial-cover {
  --cover-radius: calc(var(--r-xl) - 4px);
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--cover-radius);
  background: #f4f3ef;
  color: #141417;
}

.editorial-cover--card { aspect-ratio: 16 / 10 }
.editorial-cover--featured { width: 100%; height: 100%; min-height: 28rem }
.editorial-cover--article { --cover-radius: var(--r-xl); width: 100%; height: 100% }
.editorial-cover--thumbnail { width: 100%; aspect-ratio: 4 / 3 }
.editorial-cover--announcement {
  background: #f4f2ef;
}
.editorial-cover--article.editorial-cover--announcement,
.editorial-cover--article.editorial-cover--plain {
  height: auto;
  aspect-ratio: auto;
}
.editorial-cover--article.editorial-cover--announcement .editorial-cover-plain-image,
.editorial-cover--article.editorial-cover--plain .editorial-cover-plain-image {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.editorial-cover-texture,
.editorial-cover-plain-image {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}

.editorial-cover--person {
  --person-pad: clamp(12px, 4cqw, 36px);
  --person-gap: clamp(14px, 4.5cqw, 48px);
}

.person-cover-layout {
  position: absolute;
  z-index: 2;
  inset: var(--person-pad);
  display: grid;
  grid-template-columns: minmax(0, 50%) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--person-gap);
}

.editorial-cover--person .editorial-cover-portrait {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--cover-radius);
}

.editorial-cover-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.editorial-cover-portrait--ilan img { object-position: center center }
.editorial-cover-portrait--david img {
  object-position: center center;
}

.person-cover-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  align-self: center;
  padding-bottom: clamp(20px, 5cqw, 52px);
  text-align: left;
}

.person-cover-name {
  display: flex;
  min-width: 0;
  flex-direction: column;
  margin: 0;
  color: #141417;
  font-family: var(--sans);
  font-size: clamp(1.45rem, 6.8cqw, 5.25rem);
  font-weight: 650;
  letter-spacing: -.055em;
  line-height: .9;
}

.person-cover-name span { display: block }

.person-cover-title {
  margin-top: clamp(8px, 1.8cqw, 18px);
  color: rgba(20, 20, 23, .62);
  font-family: var(--mono);
  font-size: clamp(.6875rem, 1.5cqw, .75rem);
  font-weight: 500;
  line-height: 1.2;
  text-transform: lowercase;
}

.person-cover-wordmark {
  position: absolute;
  z-index: 3;
  right: var(--person-pad);
  bottom: var(--person-pad);
  display: block;
  width: clamp(54px, 11cqw, 112px);
  height: auto;
}

/* Funding announcement cover.
   Typography-led press card: ink field, one clear hierarchy, investor strip.
   No decorative fanout, no overlapping meta, no pill chrome. Refs: Clerk /
   Linear raise posts, Midday announcement restraint. */
.editorial-cover--funding {
  --funding-ink: #0b0d0c;
  --funding-line: rgba(255, 255, 255, .14);
  --funding-mute: rgba(255, 255, 255, .52);
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(16px, 3.2cqw, 28px);
  padding: clamp(20px, 4cqw, 36px);
  overflow: hidden;
  background: var(--funding-ink);
  color: #fff;
}

.editorial-cover--funding::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 42%),
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .02) 100%);
}

.editorial-cover--funding::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: inherit;
}

.funding-cover-brand,
.funding-cover-main,
.funding-cover-investors {
  position: relative;
  z-index: 2;
}

.funding-cover-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp3);
}

.funding-cover-brand img {
  display: block;
  width: clamp(68px, 8.5cqw, 92px);
  height: auto;
  filter: invert(1);
}

.funding-cover-total {
  color: var(--funding-mute);
  font-family: var(--mono);
  font-size: clamp(.58rem, 1.1cqw, .7rem);
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
}

.funding-cover-main {
  display: flex;
  min-height: 0;
  align-items: flex-end;
}

.funding-cover-copy {
  display: flex;
  width: min(28rem, 100%);
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 1.2cqw, 14px);
}

.funding-cover-headline {
  margin: 0;
  line-height: 1;
}

.funding-cover-headline > strong {
  display: block;
  font-size: clamp(3.8rem, 18cqw, 7.6rem);
  font-weight: 650;
  letter-spacing: -.07em;
  line-height: .82;
  white-space: nowrap;
}

.funding-cover-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35em .55em;
  margin: 0;
  color: var(--funding-mute);
  font-family: var(--mono);
  font-size: clamp(.68rem, 1.35cqw, .82rem);
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.funding-cover-round {
  color: rgba(255, 255, 255, .78);
}

.funding-cover-date::before {
  content: "·";
  margin-right: .55em;
  color: rgba(255, 255, 255, .35);
}

.funding-cover-subline {
  max-width: 16ch;
  margin: 2px 0 0;
  color: rgba(255, 255, 255, .92);
  font-family: var(--sans, inherit);
  font-size: clamp(1.05rem, 2.3cqw, 1.45rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.2;
  text-wrap: balance;
}

.funding-cover-lead {
  display: flex;
  align-items: baseline;
  gap: .4em;
  margin: clamp(2px, .6cqw, 8px) 0 0;
  color: var(--funding-mute);
  font-family: var(--sans, inherit);
  font-size: clamp(.78rem, 1.4cqw, .95rem);
  font-weight: 450;
  letter-spacing: -.01em;
  line-height: 1.2;
  white-space: nowrap;
}

.funding-cover-lead strong {
  color: #fff;
  font-weight: 600;
  letter-spacing: -.015em;
}

.funding-cover-investors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2.4cqw, 28px) clamp(18px, 3.2cqw, 36px);
  padding-top: clamp(14px, 2.2cqw, 20px);
  border-top: 1px solid var(--funding-line);
}

.funding-cover-investor {
  display: flex;
  flex: 0 0 auto;
  height: clamp(12px, 1.8cqw, 18px);
  align-items: center;
  justify-content: flex-start;
}

.funding-cover-investor img {
  display: block;
  width: var(--logo-width, clamp(52px, 8cqw, 84px));
  height: auto;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: .72;
}

.funding-cover-investor--accel { --logo-width: clamp(46px, 7.5cqw, 76px) }
.funding-cover-investor--gradient { --logo-width: clamp(60px, 9.5cqw, 100px) }
.funding-cover-investor--coinbase { --logo-width: clamp(58px, 9cqw, 96px) }
.funding-cover-investor--operator { --logo-width: clamp(56px, 8.8cqw, 94px) }
.funding-cover-investor--formus { --logo-width: clamp(50px, 8cqw, 80px) }
.funding-cover-investor--vaneck { --logo-width: clamp(40px, 6.5cqw, 66px) }
.funding-cover-investor--operator img { transform: scale(1.05); transform-origin: left center }
.funding-cover-investor--vaneck img { max-height: none }

.editorial-cover--card.editorial-cover--funding {
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(10px, 2.4cqw, 16px);
  padding: clamp(16px, 4.4cqw, 24px);
}

.editorial-cover--card .funding-cover-investors,
.editorial-cover--card .funding-cover-total { display: none }
.editorial-cover--card .funding-cover-copy { width: 100%; gap: clamp(6px, 1.4cqw, 10px) }
.editorial-cover--card .funding-cover-headline > strong { font-size: clamp(3rem, 20cqw, 5.2rem) }
.editorial-cover--card .funding-cover-meta { font-size: clamp(.58rem, 2cqw, .72rem) }
.editorial-cover--card .funding-cover-subline { max-width: 15ch; font-size: clamp(.88rem, 2.6cqw, 1.1rem) }
.editorial-cover--card .funding-cover-lead { font-size: clamp(.7rem, 2cqw, .82rem) }

.editorial-cover--thumbnail .person-cover-layout { inset: 0; display: block }
.editorial-cover--thumbnail .person-cover-copy,
.editorial-cover--thumbnail .person-cover-wordmark,
.editorial-cover--thumbnail .editorial-cover-texture { display: none }
.editorial-cover--thumbnail .editorial-cover-portrait { width: 100%; height: 100%; border-radius: inherit }

.blog-featured:hover .editorial-cover-texture,
.blog-card:hover .editorial-cover-texture { transform: scale(1.012) }

[data-theme="dark"] .editorial-cover { color: #141417 }

.blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px var(--sp3);
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: var(--t-meta);
  line-height: 1.4;
}

.blog-meta span + span::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 10px 2px 0;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}

.blog-read {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--t-small);
  font-weight: 500;
  text-transform: lowercase;
  transition: gap var(--fast) var(--ease);
}

.blog-featured:hover .blog-read,
.blog-card:hover .blog-read { gap: 11px }

.blog-card-link {
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
}

.blog-card-link:focus-visible {
  outline: 2px solid var(--ink-muted);
  outline-offset: -3px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp4);
}

.blog-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--s1);
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), transform .35s var(--ease);
}

.blog-card:hover,
.blog-card:has(.blog-card-link:focus-visible) {
  background: color-mix(in srgb, var(--s1) 94%, var(--ink));
  border-color: var(--line-2);
  transform: translateY(-2px);
}

.blog-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp3);
  padding: clamp(22px, 2.8vw, 30px);
}

.blog-card h3 {
  margin: var(--sp1) 0 0;
  min-height: 0;
  font-size: var(--t-title);
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.2;
  text-wrap: balance;
}

.blog-card p {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--t-body);
  line-height: 1.6;
}

.blog-card .blog-read { margin-top: auto; padding-top: var(--sp3) }

.blog-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp4);
  margin-bottom: var(--sp6);
}

.blog-section-head .h2 { max-width: 18ch }

.blog-archive {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-2);
}

.blog-archive-row {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: var(--sp4);
  align-items: center;
  padding-block: var(--sp4);
  border-bottom: 1px solid var(--line-2);
}

.blog-archive-thumb {
  width: 96px;
  min-width: 0;
}

.blog-archive-copy { min-width: 0 }

.blog-archive-row h3 {
  margin: 5px 0 var(--sp1);
  font-size: var(--t-title);
  letter-spacing: -.016em;
  line-height: 1.25;
}

.blog-archive-row p {
  margin: 0;
  max-width: 66ch;
  color: var(--ink-muted);
  font-size: var(--t-small);
  line-height: 1.5;
}

.blog-archive-action {
  position: relative;
  z-index: 4;
  justify-self: end;
  white-space: nowrap;
}

/* Article masthead -------------------------------------------------------- */

.reading-progress {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  width: var(--reading-progress, 0%);
  height: 2px;
  background: var(--ink);
  transform-origin: left center;
}

.article-masthead {
  padding-block: clamp(22px, 3.2vw, 40px);
}

.article-breadcrumb-bar {
  height: var(--nav-h);
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.article-breadcrumb-bar .wrap {
  display: flex;
  height: 100%;
  align-items: center;
}

.breadcrumb {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  margin: 0;
  padding: 0;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: var(--t-small);
  list-style: none;
  line-height: 1;
  white-space: nowrap;
}

.breadcrumb a { color: var(--ink-muted) }
.breadcrumb a:hover { color: var(--ink) }

.breadcrumb li {
  display: flex;
  min-width: 0;
  align-items: center;
}

.breadcrumb li:not([aria-current="page"]) { flex: 0 0 auto }

.breadcrumb li + li::before {
  content: "/";
  flex: 0 0 auto;
  padding-inline: 9px;
  color: var(--ink-faint);
}

.breadcrumb li[aria-current="page"] {
  overflow: hidden;
  color: var(--ink-faint);
  text-overflow: ellipsis;
}

.article-masthead-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

.article-title {
  margin: var(--sp2) 0 0;
  max-width: 22ch;
  font-size: var(--t-h2);
  font-weight: 600;
  letter-spacing: -.024em;
  line-height: 1.12;
  text-wrap: balance;
}

.article-dek {
  margin: var(--sp3) 0 0;
  max-width: 56ch;
  color: var(--ink-muted);
  font-size: var(--t-body);
  line-height: 1.6;
  letter-spacing: 0;
}

.article-byline {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1.25rem;
  width: fit-content;
  max-width: 100%;
  margin-top: var(--sp4);
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.article-author {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--sp3);
  min-width: 0;
  padding: 0;
}

.article-author-avatar {
  display: grid;
  width: 40px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
}

.article-author-avatar--portrait { border-radius: 50% }
.article-author-avatar--portrait img { width: 100%; height: 100%; object-fit: cover }
.article-author-avatar--mark { border-radius: 10px; background: #141417 }
.article-author-avatar--mark img { display: block; width: 19px; height: auto; object-fit: contain; filter: none }
[data-theme="dark"] .article-author-avatar--mark { background: #f4f4f1 }
[data-theme="dark"] .article-author-avatar--mark img { filter: invert(1) }

.article-author > span:last-child > b,
.article-author > span:last-child > span { display: block }
.article-author > span:last-child > b { font-size: var(--t-small); font-weight: 600 }
.article-author > span:last-child > span { color: var(--ink-faint); font-size: var(--t-small) }

.article-socials {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  min-height: 40px;
  margin-left: 0.25rem;
  padding: 0;
  border: 0;
}

.article-socials::before {
  content: "";
  position: absolute;
  left: -0.625rem;
  top: 50%;
  width: 1px;
  height: 40px;
  background: var(--line);
  transform: translateY(-50%);
}

.article-social {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0;
  border: 0;
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  transition: color var(--fast);
}

.article-social + .article-social {
  position: relative;
  margin-left: 14px;
  padding-left: 14px;
}

.article-social + .article-social::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 16px;
  background: var(--line);
  transform: translateY(-50%);
}

.article-social:hover,
.article-social:focus-visible {
  background: transparent;
  color: var(--ink);
}

.article-social svg { width: 14px; height: 14px; flex: 0 0 auto }
.article-social span { line-height: 1 }

.article-cover {
  position: relative;
  align-self: center;
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: var(--r-xl);
  background: transparent;
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent),
    0 10px 28px color-mix(in srgb, var(--ink) 6%, transparent);
}

.article-cover-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: zoom-in;
  text-align: left;
  line-height: 0;
}

.article-cover-zoom:focus-visible {
  outline: 2px solid var(--ink-muted);
  outline-offset: 3px;
}

.article-cover-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: inherit;
  line-height: 0;
}

.article-cover-media:has(.editorial-cover--announcement),
.article-cover-media:has(.editorial-cover--plain) {
  aspect-ratio: auto;
}

.article-cover figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@container (max-width: 650px) {
  .editorial-cover--article.editorial-cover--funding { gap: 12px; padding: 16px }
  .editorial-cover--article .funding-cover-copy { width: 100%; gap: 6px }
  .editorial-cover--article .funding-cover-headline > strong { font-size: clamp(3.2rem, 20cqw, 5.4rem) }
  .editorial-cover--article .funding-cover-subline { max-width: 16ch; font-size: clamp(.9rem, 2.8cqw, 1.1rem) }
  .editorial-cover--article .funding-cover-investors { gap: 12px 16px }
  .editorial-cover--article .funding-cover-investor { height: 14px }
}

@container (max-width: 390px) {
  .editorial-cover--article .funding-cover-investors { gap: 10px 14px }
  .editorial-cover--article .funding-cover-investor { height: 12px }
}

.article-shell {
  padding-block: clamp(22px, 3.2vw, 40px);
  border-top: 1px solid var(--line);
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  justify-content: stretch;
  gap: calc(var(--nav-h) * 2);
  align-items: start;
}

.article-toc {
  position: sticky;
  top: calc(var(--nav-h) + var(--sp5));
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--s1);
}

.article-toc a {
  display: block;
  padding: 7px 10px;
  border-radius: var(--ctl-r);
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.3;
  text-transform: lowercase;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.article-toc a:hover,
.article-toc a[aria-current="location"] {
  background: var(--active-shade);
  color: var(--ink);
}

.article-body {
  /* Body rhythm stays tight; figures, code, and section breaks share one 2rem step. */
  --article-flow-text: 1rem;
  --article-flow-heading: .5rem;
  --article-flow-block: 2rem;
  --article-flow-subsection: 2rem;
  --article-flow-section: 2rem;
  min-width: 0;
  color: var(--ink);
  font-size: clamp(1.0625rem, 1.15vw, 1.1875rem);
  line-height: 1.58;
}

.article-body > :first-child { margin-top: 0 }
.article-body p { margin: 0 }

.article-body > :is(p, ul, ol, blockquote, h2, h3),
.article-body > .article-summary {
  max-width: 65ch;
}

.article-body h2 {
  scroll-margin-top: calc(var(--nav-h) + var(--sp6));
  margin: 0;
  font-size: clamp(1.65rem, 2.8vw, 2.15rem);
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.18;
  text-wrap: balance;
}

.article-body h3 {
  scroll-margin-top: calc(var(--nav-h) + var(--sp6));
  margin: 0;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.28;
}

.article-body a {
  color: var(--ink);
  padding: .06em .22em;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  font-weight: 550;
  text-decoration: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color var(--fast), color var(--fast);
}

.article-body a:hover,
.article-body a:focus-visible { background: color-mix(in srgb, var(--ink) 12%, transparent) }

.article-body ul,
.article-body ol { margin: 0; padding-left: 1.3em }
.article-body li { padding-left: .35em; margin-bottom: .35em }
.article-body li:last-child { margin-bottom: 0 }
.article-body strong { font-weight: 650 }

.article-body blockquote {
  margin: 0;
  padding: 0 0 0 var(--sp4);
  border-left: 2px solid var(--ink);
  color: var(--ink);
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight: 450;
  font-style: italic;
  letter-spacing: -.02em;
  line-height: 1.4;
}

.article-body blockquote p { margin: 0 }
.article-body blockquote cite {
  display: block;
  margin-top: var(--sp2);
  color: var(--ink-faint);
  font-family: var(--sans, inherit);
  font-size: var(--t-small);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.35;
}
.article-body blockquote cite::before {
  content: "– ";
  color: var(--ink-faint);
}
.article-body blockquote cite b {
  color: var(--ink-muted);
  font-weight: 650;
}

.article-summary {
  --article-glyph-size: 40px;
  --article-summary-column-gap: var(--sp4);
  display: grid;
  gap: var(--sp2);
  margin: 0;
  padding: clamp(14px, 2.4vw, 22px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--s1);
}

.article-summary-heading {
  display: grid;
  grid-template-columns: var(--article-glyph-size) minmax(0, 1fr);
  align-items: center;
  gap: var(--article-summary-column-gap);
  font-family: var(--mono);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.2;
  text-transform: lowercase;
}

.article-summary-heading-icon {
  display: inline-flex;
  width: var(--article-glyph-size);
  height: var(--article-glyph-size);
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
}

.article-summary-heading-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.2;
}

.article-summary ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-summary li {
  display: grid;
  grid-template-columns: var(--article-glyph-size) minmax(8.5rem, .58fr) minmax(0, 1.42fr);
  grid-template-areas: "icon label value";
  column-gap: var(--article-summary-column-gap);
  row-gap: 0;
  align-items: center;
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  min-height: 3.25rem;
}

.article-summary-icon {
  grid-area: icon;
  display: inline-flex;
  width: var(--article-glyph-size);
  height: var(--article-glyph-size);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
}

.article-summary-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.2;
}

.article-summary-label {
  grid-area: label;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.3;
  text-transform: lowercase;
}

.article-summary-value {
  grid-area: value;
  min-width: 0;
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  font-weight: 450;
  line-height: 1.45;
}

.article-stat-grid {
  --article-glyph-size: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--line);
}

.article-stat {
  display: grid;
  grid-template-columns: var(--article-glyph-size) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--sp3);
  min-width: 0;
  padding: var(--sp4) var(--sp5);
  background: var(--s1);
}

.article-stat-icon {
  display: inline-flex;
  width: var(--article-glyph-size);
  height: var(--article-glyph-size);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--ink-muted);
}

.article-stat-icon svg { width: 100%; height: 100%; stroke-width: 1.1 }

.article-stat-copy { min-width: 0 }

.article-stat-copy b {
  display: block;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  letter-spacing: -.03em;
  line-height: 1.1;
}

.article-stat-copy > span {
  display: block;
  margin-top: 4px;
  color: var(--ink-muted);
  font-size: var(--t-small);
  line-height: 1.35;
}

.article-steps {
  counter-reset: article-step;
  display: flex;
  flex-direction: column;
  margin: 0;
  border-top: 1px solid var(--line-2);
}

.article-step {
  counter-increment: article-step;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--sp4);
  padding-block: var(--sp5);
  border-bottom: 1px solid var(--line-2);
}

.article-step::before {
  content: counter(article-step, decimal-leading-zero);
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: var(--t-small);
}

.article-step h2,
.article-step h3 { margin-top: 0 }
.article-step h3 + p { margin-top: var(--sp2) }
.article-step > div > :last-child { margin-bottom: 0 }

.article-figure {
  width: 100%;
  margin: 0;
  background: transparent;
}

/* Flat exports: CSS owns radius + soft lift. No matte, border frame, or
   baked-in shadow that would stack with the file. */
.article-figure-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: transparent;
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent),
    0 10px 28px color-mix(in srgb, var(--ink) 6%, transparent);
  cursor: zoom-in;
  text-align: left;
  line-height: 0;
  transition: box-shadow var(--fast) var(--ease);
}

.article-figure-zoom:hover,
.article-figure-zoom:focus-visible {
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent),
    0 14px 36px color-mix(in srgb, var(--ink) 9%, transparent);
}

.article-figure-zoom:focus-visible {
  outline: 2px solid var(--ink-muted);
  outline-offset: 3px;
}

.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
}

.article-figure figcaption {
  margin: 0;
  padding: var(--sp3) var(--sp2) 0;
  border: 0;
  color: var(--ink-faint);
  font-size: var(--t-meta);
  line-height: 1.45;
  text-align: center;
}

.article-code {
  width: 100%;
  margin: 0;
  overflow: hidden;
}

.article-code figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp3);
  min-height: 44px;
  padding-inline: var(--sp4);
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 500;
  text-transform: lowercase;
}

.article-code .mk-code-bar .mk-copy {
  position: static;
  flex: 0 0 auto;
  width: var(--control-h-2xs);
  height: var(--control-h-2xs);
  border-color: transparent;
  background: transparent;
}

.article-code .mk-code-bar .mk-copy:hover,
.article-code .mk-code-bar .mk-copy:focus-visible {
  border-color: var(--line);
  background: var(--active-shade);
  color: var(--ink);
}

.article-code pre {
  font-size: clamp(12px, 1.2vw, 14px);
  line-height: 1.65;
  white-space: pre;
  tab-size: 2;
}

.article-code code { font: inherit }
.article-code pre:focus-visible { outline: 2px solid var(--ink-muted); outline-offset: -2px }

/* Diff: flush to the shell. No nested well, inset padding, or second radius. */
.article-diff.mk-code .mk-code-body {
  padding: 0;
}

.article-diff.mk-code .article-diff-pre,
.article-diff.mk-code pre.article-diff-pre {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 10px 0;
  padding-right: 0;
  border: 0;
  border-radius: 0;
  background: var(--s2);
  box-shadow: none;
  font-family: var(--mono);
  font-size: clamp(12px, 1.15vw, 13.5px);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-x: auto;
  tab-size: 2;
  color: var(--ink-muted);
}

.article-diff.mk-code .article-diff-pre::before,
.article-diff.mk-code pre.article-diff-pre::before {
  content: none;
  display: none;
  float: none;
  width: 0;
  height: 0;
}

.article-diff-line {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  column-gap: .35rem;
  padding: .22em var(--sp4) .22em .9rem;
  min-width: 0;
}

.article-diff-meta {
  display: block;
  padding: .4em var(--sp4);
  color: var(--ink-faint);
  font-weight: 500;
}

.article-diff-prefix {
  color: inherit;
  opacity: .72;
  user-select: none;
}

.article-diff-del {
  color: var(--red-text);
  background: color-mix(in srgb, var(--red) 12%, transparent);
}

.article-diff-del del {
  text-decoration: none;
}

.article-diff-add {
  color: var(--green-text);
  background: color-mix(in srgb, var(--green) 12%, transparent);
}

.article-diff-add ins {
  text-decoration: none;
}

.article-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: calc(var(--nav-h) + clamp(12px, 2.4vw, 24px)) clamp(12px, 3vw, 28px) clamp(12px, 3vw, 28px);
  border: 0;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: zoom-out;
}

.article-lightbox[hidden] { display: none !important }

.article-lightbox-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--sp4);
  height: var(--nav-h);
  min-height: var(--nav-h);
  padding-inline: clamp(12px, 3vw, var(--sp4));
  border-bottom: 1px solid color-mix(in srgb, #fff 14%, transparent);
  background: color-mix(in srgb, var(--s1) 78%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  cursor: default;
}

.article-lightbox-caption {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
  color: var(--ink-muted);
  font-size: var(--t-small);
  line-height: 1.35;
  text-align: left;
}

.article-lightbox-close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: var(--ctl-r);
  background: var(--s1);
  color: var(--ink-muted);
  cursor: pointer;
  transition: background-color var(--fast), border-color var(--fast), color var(--fast);
}

.article-lightbox-close:hover,
.article-lightbox-close:focus-visible {
  border-color: var(--line-2);
  background: var(--active-shade);
  color: var(--ink);
}

.article-lightbox-close svg {
  width: 16px;
  height: 16px;
}

.article-lightbox > img {
  display: block;
  width: auto;
  max-width: min(1200px, 100%);
  max-height: min(calc(100vh - var(--nav-h) - clamp(24px, 5vw, 56px)), 100%);
  height: auto;
  margin: 0;
  object-fit: contain;
  border: 0;
  border-radius: var(--r-lg);
  background: transparent;
  box-shadow: none;
  cursor: zoom-out;
}

.article-note {
  margin: 0;
  padding: var(--sp5);
  border-radius: var(--r-xl);
  background: var(--s1);
  box-shadow: inset 0 0 0 1px var(--line);
}

.article-note > :last-child { margin-bottom: 0 }

.article-sources {
  margin-top: 0;
  padding-top: var(--sp5);
  border-top: 1px solid var(--line-2);
}

.article-sources h2 { margin-top: 0; font-size: var(--t-title) }
.article-sources h2 + :is(ul, ol) { margin-top: var(--sp3) }
.article-sources li { color: var(--ink-muted); font-size: var(--t-small) }

/* One explicit rhythm owns every top-level article transition. The previous
   mixture of heading-, quote-, and body-relative em margins produced four
   unrelated vertical scales and made adjacent blocks drift page to page. */
.article-body > * + * { margin-top: var(--article-flow-text) }
.article-body > * + :is(p, ul, ol) { margin-top: var(--article-flow-text) }
.article-body > * + :is(blockquote, .article-summary, .article-stat-grid, .article-steps, .article-code, .article-diff, .article-figure, .article-note),
.article-body > :is(blockquote, .article-summary, .article-stat-grid, .article-steps, .article-code, .article-diff, .article-figure, .article-note) + * {
  margin-top: var(--article-flow-block);
}
.article-body > * + .article-sources { margin-top: var(--article-flow-section) }
.article-body > * + h2 { margin-top: var(--article-flow-section) }
.article-body > * + h3 { margin-top: var(--article-flow-subsection) }
.article-body > :is(h2, h3) + * { margin-top: var(--article-flow-heading) }

.article-end {
  padding-block: clamp(28px, 3.6vw, 44px);
  border-top: 1px solid var(--line);
}

.article-end-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp4);
  margin-bottom: var(--sp6);
}

@media (max-width: 1000px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .blog-grid > :last-child:nth-child(odd):not(:only-child) { grid-column: 1 / -1 }
  .article-layout { gap: var(--nav-h) }
  .article-masthead-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp5);
    align-items: start;
  }
  .article-title { max-width: none }
  .article-cover { max-width: none; width: 100%; justify-self: stretch }
  .article-cover-media:has(.editorial-cover--announcement),
  .article-cover-media:has(.editorial-cover--plain) {
    aspect-ratio: auto;
  }
  .blog-featured { grid-template-columns: minmax(0, 1fr); min-height: 0 }
  .blog-featured-media { order: -1; padding-bottom: 0 }
  .editorial-cover--featured { height: auto; min-height: 0; aspect-ratio: 16 / 8.5 }
}

@media (max-width: 820px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp6) }
  .article-toc {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 6px;
  }
  .article-byline {
    width: 100%;
    flex-wrap: nowrap;
    gap: 1rem;
  }
  .article-author {
    flex: 1 1 auto;
    min-width: 0;
  }
  .article-socials {
    width: auto;
    flex: 0 0 auto;
    padding: 0;
    min-height: 40px;
  }
  .article-socials::before {
    left: -0.5rem;
    right: auto;
    top: 50%;
    width: 1px;
    height: 40px;
    transform: translateY(-50%);
  }
  .article-social span { display: none }
  .article-social + .article-social {
    margin-left: 10px;
    padding-left: 10px;
  }
}

@media (max-width: 620px) {
  .blog-index-hero { padding-top: 36px; padding-bottom: 12px }
  .blog-featured-copy { padding: var(--sp5) }
  .blog-featured-copy h2 { font-size: 2.1rem }
  .blog-grid { grid-template-columns: minmax(0, 1fr) }
  .blog-grid > :last-child:nth-child(odd) { grid-column: auto }
  .blog-section-head,
  .article-end-head { align-items: flex-start; flex-direction: column }
  .blog-archive-row { grid-template-columns: 76px minmax(0, 1fr); gap: var(--sp3) }
  .blog-archive-thumb { width: 76px }
  .blog-archive-action { grid-column: 2; justify-self: start; margin-top: 2px }
  .article-masthead { padding-top: 28px }
  .article-cover-media:has(.editorial-cover--funding) { aspect-ratio: 4 / 3 }
  .breadcrumb li[aria-current="page"] { display: none }
  .article-summary li {
    grid-template-columns: var(--article-glyph-size) minmax(0, 1fr);
    grid-template-areas:
      "icon label"
      "icon value";
    align-items: start;
    gap: 2px var(--sp3);
    min-height: 0;
  }
  .article-summary-heading { gap: var(--sp3) }
  .article-summary-value { margin-top: 0 }
  .article-stat-grid { grid-template-columns: minmax(0, 1fr) }
  .article-toc { grid-template-columns: minmax(0, 1fr) }
  .article-step { grid-template-columns: 2rem minmax(0, 1fr) }
  .article-body blockquote { padding-left: var(--sp3) }
  .article-diff-line { padding-inline: var(--sp3) .75rem }
  .article-diff-meta { padding-inline: var(--sp3) }
  .article-lightbox-bar { padding-inline: var(--sp3) }
}

@media (prefers-reduced-motion: reduce) {
  .blog-featured,
  .blog-card,
  .editorial-cover-texture { transition: none }
}