:root {
  --blog-ink: #101018;
  --blog-paper: #f7f5ef;
  --blog-line: rgba(16,16,24,.14);
  --blog-lime: #c7f11a;
  --blog-pink: #ff3c7d;
  --blog-cyan: #00bed7;
  --blog-yellow: #ffd51c;
  --blog-purple: #7948d6;
}

.blog-page { color: var(--blog-ink); background: var(--blog-paper); }
.blog-page::before { content: ""; position: fixed; inset: 0; z-index: -2; background-image: linear-gradient(var(--blog-line) 1px,transparent 1px),linear-gradient(90deg,var(--blog-line) 1px,transparent 1px); background-size: 42px 42px; }
.blog-page .site-header { background: rgba(247,245,239,.92); backdrop-filter: blur(16px); }
.blog-progress { position: fixed; z-index: 120; top: 0; left: 0; width: 0; height: 4px; background: linear-gradient(90deg,var(--blog-pink),var(--blog-cyan),var(--blog-lime)); }
.blog-kicker { margin: 0 0 18px; color: #a20b49; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.blog-breadcrumbs { display: flex; gap: 10px; flex-wrap: wrap; padding: 118px 4vw 28px; font-size: 11px; letter-spacing: .11em; text-transform: uppercase; }
.blog-breadcrumbs a { color: inherit; }
.blog-reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1); }
.blog-reveal.is-visible { opacity: 1; transform: none; }

.blog-hub-hero { display: grid; grid-template-columns: 1.35fr .65fr; min-height: 780px; padding: 150px 4vw 70px; border-bottom: 1px solid var(--blog-line); }
.blog-hub-hero > div:first-child { align-self: center; padding-right: 6vw; }
.blog-hub-hero h1 { max-width: 11ch; margin: 0; font-size: clamp(68px,9.2vw,156px); line-height: .82; letter-spacing: -.075em; text-wrap: balance; }
.blog-hub-hero > div:first-child > p:last-child { max-width: 690px; margin: 42px 0 0; color: rgba(16,16,24,.64); font-size: clamp(19px,1.45vw,27px); line-height: 1.5; }
.blog-hero-count { position: relative; align-self: center; display: grid; place-content: center; min-height: 520px; overflow: hidden; color: #fff; background: var(--blog-ink); border-radius: 52% 48% 44% 56% / 58% 39% 61% 42%; text-align: center; animation: blogBlob 12s ease-in-out infinite alternate; }
.blog-hero-count span { color: var(--blog-lime); font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.blog-hero-count strong { font-size: clamp(150px,19vw,320px); line-height: .78; letter-spacing: -.09em; }
.blog-hero-count p { max-width: 20ch; margin: 28px auto 0; color: rgba(255,255,255,.62); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
.blog-hero-count i { position: absolute; width: 42px; height: 42px; border-radius: 50%; background: var(--blog-pink); animation: blogOrbit 8s linear infinite; }
.blog-hero-count i:nth-of-type(1) { top: 11%; left: 19%; }
.blog-hero-count i:nth-of-type(2) { right: 10%; bottom: 24%; width: 72px; height: 72px; background: var(--blog-cyan); animation-duration: 12s; }
.blog-hero-count i:nth-of-type(3) { left: 24%; bottom: 7%; width: 24px; height: 24px; background: var(--blog-lime); animation-duration: 6s; }
@keyframes blogBlob { to { border-radius: 43% 57% 58% 42% / 44% 56% 44% 56%; transform: rotate(1.5deg); } }
@keyframes blogOrbit { 50% { transform: translate(16px,-22px) scale(1.15); } }

.blog-feature-intro { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4vw; padding: clamp(90px,11vw,170px) 4vw 54px; }
.blog-feature-intro h2 { max-width: 13ch; margin: 0; font-size: clamp(50px,6.7vw,108px); line-height: .87; letter-spacing: -.065em; }
.blog-filter { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.blog-filter button { padding: 12px 18px; border: 1px solid var(--blog-ink); border-radius: 999px; background: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.blog-filter button.is-active { color: #fff; background: var(--blog-ink); box-shadow: 5px 5px 0 var(--blog-lime); }

.blog-card-grid { display: grid; grid-template-columns: repeat(12,1fr); grid-auto-flow: dense; gap: 18px; padding: 0 4vw clamp(100px,12vw,180px); }
.blog-card { --card-accent: var(--blog-lime); position: relative; grid-column: span 4; min-height: 480px; padding: 34px; overflow: hidden; color: var(--blog-ink); background: #fff; border: 1px solid var(--blog-ink); transition: transform .3s ease,box-shadow .3s ease,opacity .25s ease; }
.blog-card[hidden] { display: none; }
.blog-card:hover { color: inherit; transform: translate(-4px,-4px); box-shadow: 12px 12px 0 var(--card-accent); }
.blog-card > span,.blog-card > b { position: relative; z-index: 2; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.blog-card > span { color: #8f0c44; }
.blog-card h2 { position: relative; z-index: 2; max-width: 15ch; margin: 52px 0 18px; font-size: clamp(32px,3.1vw,54px); line-height: .95; letter-spacing: -.055em; }
.blog-card p { position: relative; z-index: 2; max-width: 40ch; color: rgba(16,16,24,.62); line-height: 1.48; }
.blog-card > b { position: absolute; z-index: 2; left: 34px; bottom: 32px; }
.blog-card > i { position: absolute; right: -4%; bottom: -13%; color: transparent; -webkit-text-stroke: 2px rgba(16,16,24,.12); font-size: clamp(140px,16vw,290px); font-weight: 900; line-height: .8; letter-spacing: -.08em; }
.blog-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 9px; background: var(--card-accent); }
.blog-card--wide { grid-column: span 8; }
.blog-card--wide h2 { max-width: 16ch; font-size: clamp(42px,5vw,82px); }
.blog-card--tall { grid-row: span 2; min-height: 760px; }
.blog-card--feature { grid-column: 1 / -1; min-height: 600px; color: #fff; background: var(--blog-ink); }
.blog-card--feature h2 { max-width: 14ch; font-size: clamp(54px,7vw,116px); }
.blog-card--feature p { max-width: 60ch; color: rgba(255,255,255,.66); font-size: 19px; }
.blog-card--feature > span { color: var(--blog-lime); }
.blog-card--feature > i { -webkit-text-stroke-color: rgba(199,241,26,.22); }
.blog-card--pink { --card-accent: var(--blog-pink); background-image: radial-gradient(circle at 86% 12%,rgba(255,60,125,.22),transparent 32%); }
.blog-card--cyan { --card-accent: var(--blog-cyan); background-image: linear-gradient(135deg,rgba(0,190,215,.18),transparent 45%); }
.blog-card--yellow { --card-accent: var(--blog-yellow); background-color: #fff9d9; }
.blog-card--purple { --card-accent: var(--blog-purple); background-image: radial-gradient(circle at 12% 90%,rgba(121,72,214,.2),transparent 38%); }
.blog-card--lime { --card-accent: var(--blog-lime); }

.blog-hub-cta { display: grid; grid-template-columns: 1fr auto; gap: 5vw; align-items: end; margin: 0 4vw clamp(100px,12vw,170px); padding: clamp(46px,6vw,88px); color: #fff; background: var(--blog-purple); box-shadow: 14px 14px 0 var(--blog-pink); }
.blog-hub-cta .blog-kicker { color: var(--blog-lime); }
.blog-hub-cta h2 { max-width: 12ch; margin: 0; font-size: clamp(46px,6vw,98px); line-height: .88; letter-spacing: -.06em; }
.blog-hub-cta p:not(.blog-kicker) { max-width: 62ch; color: rgba(255,255,255,.68); font-size: 18px; line-height: 1.55; }
.blog-archive { padding: clamp(90px,11vw,160px) 4vw; border-top: 1px solid var(--blog-line); }
.blog-archive > header { display: grid; grid-template-columns: .4fr 1fr; gap: 5vw; align-items: end; margin-bottom: 54px; }
.blog-archive h2 { margin: 0; font-size: clamp(50px,7vw,112px); line-height: .86; letter-spacing: -.065em; }
.blog-archive header > p:last-child { max-width: 48ch; margin: 0; color: rgba(16,16,24,.6); line-height: 1.55; }
.blog-archive-list { display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid var(--blog-ink); }
.blog-archive-list a { display: grid; grid-template-columns: 42px 1fr auto; gap: 16px; align-items: center; min-height: 92px; padding: 18px 10px; color: inherit; border-bottom: 1px solid var(--blog-line); }
.blog-archive-list a:nth-child(odd) { border-right: 1px solid var(--blog-line); }
.blog-archive-list span { color: rgba(16,16,24,.45); font-size: 11px; }
.blog-archive-list strong { font-size: 17px; line-height: 1.25; }

.blog-article-hero { display: grid; grid-template-columns: 1.35fr .65fr; min-height: 650px; border-block: 1px solid var(--blog-line); }
.blog-article-hero > div:first-child { display: flex; flex-direction: column; justify-content: center; padding: clamp(55px,8vw,120px) 4vw; border-right: 1px solid var(--blog-line); }
.blog-article-hero h1 { max-width: 14ch; margin: 0; font-size: clamp(56px,7.2vw,118px); line-height: .86; letter-spacing: -.07em; text-wrap: balance; }
.blog-article-hero > div:first-child > p:not(.blog-kicker) { max-width: 720px; margin: 34px 0 0; color: rgba(16,16,24,.63); font-size: clamp(18px,1.35vw,24px); line-height: 1.52; }
.blog-article-hero ul { display: flex; gap: 18px; flex-wrap: wrap; margin: 34px 0 0; padding: 0; list-style: none; color: rgba(16,16,24,.52); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.blog-signal { --signal: var(--blog-lime); position: relative; display: grid; place-content: center; min-height: 520px; overflow: hidden; background: var(--signal); text-align: center; }
.blog-theme-pink .blog-signal { --signal: var(--blog-pink); color: #fff; }
.blog-theme-cyan .blog-signal { --signal: var(--blog-cyan); }
.blog-theme-yellow .blog-signal { --signal: var(--blog-yellow); }
.blog-theme-purple .blog-signal { --signal: var(--blog-purple); color: #fff; }
.blog-signal > span { font-size: clamp(160px,20vw,340px); font-weight: 900; line-height: .72; letter-spacing: -.1em; }
.blog-signal > strong { margin-top: 28px; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; }
.blog-signal-orbit i { position: absolute; width: 38px; height: 38px; border: 2px solid currentColor; border-radius: 50%; animation: blogOrbit 7s ease-in-out infinite alternate; }
.blog-signal-orbit i:nth-child(1) { top: 12%; left: 16%; }
.blog-signal-orbit i:nth-child(2) { right: 12%; bottom: 18%; width: 82px; height: 82px; animation-delay: -2s; }
.blog-signal-orbit i:nth-child(3) { left: 28%; bottom: 9%; width: 18px; height: 18px; animation-delay: -4s; }

.blog-diagram { padding: clamp(52px,6vw,90px) 4vw; color: #fff; background: var(--blog-ink); }
.blog-diagram > div { display: flex; align-items: stretch; gap: 16px; }
.blog-diagram button { flex: 1; min-height: 150px; padding: 24px; color: #fff; border: 1px solid rgba(255,255,255,.25); background: #171723; text-align: left; cursor: pointer; transition: border-color .2s,transform .2s,background .2s; }
.blog-diagram button:hover,.blog-diagram button.is-active { border-color: var(--blog-lime); background: #222233; transform: translateY(-4px); }
.blog-diagram button span { color: var(--blog-lime); font-size: 11px; }
.blog-diagram button strong { display: block; margin-top: 34px; font-size: clamp(22px,2.3vw,38px); letter-spacing: -.04em; }
.blog-diagram i { align-self: center; font-size: 30px; font-style: normal; }
.blog-diagram > p { min-height: 30px; margin: 26px 0 0; color: rgba(255,255,255,.62); font-size: 17px; }
.blog-article-layout { display: grid; grid-template-columns: minmax(230px,.36fr) minmax(0,1fr); gap: 6vw; max-width: 1450px; margin: 0 auto; padding: clamp(90px,11vw,170px) 4vw; }
.blog-toc { position: sticky; top: 110px; align-self: start; display: flex; flex-direction: column; border-top: 1px solid var(--blog-ink); }
.blog-toc > p { margin: 0; padding: 20px 0; color: rgba(16,16,24,.46); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.blog-toc > a { display: grid; grid-template-columns: 30px 1fr; gap: 8px; padding: 13px 0; color: inherit; border-top: 1px solid var(--blog-line); font-size: 13px; line-height: 1.25; }
.blog-toc > a span { color: rgba(16,16,24,.4); }
.blog-toc .blog-toc-cta { display: block; margin-top: 22px; padding: 16px; color: #fff; background: var(--blog-ink); font-weight: 800; }
.blog-prose { min-width: 0; max-width: 900px; }
.blog-prose > p { max-width: 760px; margin: 0 0 1.35em; color: rgba(16,16,24,.75); font-size: clamp(18px,1.3vw,22px); line-height: 1.72; }
.blog-prose > p:first-child { color: var(--blog-ink); font-size: clamp(23px,1.8vw,31px); line-height: 1.52; }
.blog-prose h2 { max-width: 17ch; margin: clamp(74px,9vw,130px) 0 34px; font-size: clamp(42px,5vw,78px); line-height: .92; letter-spacing: -.06em; scroll-margin-top: 110px; }
.blog-prose ul,.blog-prose ol { max-width: 760px; margin: 28px 0 38px; padding-left: 1.4em; color: rgba(16,16,24,.74); font-size: 18px; line-height: 1.68; }
.blog-prose li + li { margin-top: 10px; }
.blog-prose a { color: inherit; text-decoration: underline; text-decoration-color: var(--blog-pink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.blog-prose code { padding: .12em .34em; background: rgba(121,72,214,.11); border-radius: 4px; font-size: .88em; }
.blog-code { position: relative; max-width: 920px; margin: 38px 0; overflow: hidden; color: #f7f5ef; background: #101018; border: 1px solid #272738; }
.blog-code > span { display: block; padding: 12px 18px; color: var(--blog-lime); border-bottom: 1px solid #272738; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.blog-code pre { margin: 0; padding: 26px; overflow: auto; }
.blog-code code { padding: 0; color: inherit; background: transparent; font-size: 14px; line-height: 1.65; }
.blog-copy-code { position: absolute; top: 8px; right: 10px; padding: 6px 10px; color: #fff; border: 1px solid rgba(255,255,255,.25); background: transparent; font-size: 10px; cursor: pointer; }
.blog-table-wrap { max-width: 100%; margin: 38px 0; overflow-x: auto; border: 1px solid var(--blog-ink); }
.blog-prose table { width: 100%; border-collapse: collapse; background: #fff; }
.blog-prose th,.blog-prose td { min-width: 170px; padding: 17px; border-right: 1px solid var(--blog-line); border-bottom: 1px solid var(--blog-line); text-align: left; vertical-align: top; }
.blog-prose th { color: #fff; background: var(--blog-ink); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.blog-article-cta { margin: clamp(70px,8vw,120px) 0 40px; padding: clamp(32px,5vw,64px); background: var(--blog-lime); border: 1px solid var(--blog-ink); box-shadow: 10px 10px 0 var(--blog-ink); }
.blog-article-cta p { margin: 0; color: var(--blog-ink); font-size: clamp(24px,2.5vw,42px); line-height: 1.18; letter-spacing: -.035em; }
.blog-sources { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 30px; border-top: 1px solid var(--blog-line); }
.blog-sources p { flex-basis: 100%; margin: 0 0 10px; color: rgba(16,16,24,.46); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.blog-sources a { padding: 10px 13px; border: 1px solid var(--blog-line); background: #fff; font-size: 12px; text-decoration: none; }
.blog-related { padding: clamp(80px,10vw,150px) 4vw; color: #fff; background: var(--blog-ink); }
.blog-related > header { margin-bottom: 48px; }
.blog-related h2 { margin: 0; font-size: clamp(48px,6vw,92px); line-height: .88; letter-spacing: -.06em; }
.blog-related > div { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.blog-related a { min-height: 320px; padding: 32px; color: #fff; border: 1px solid rgba(255,255,255,.2); background: #171723; }
.blog-related a:hover { border-color: var(--blog-lime); }
.blog-related a span { color: var(--blog-lime); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.blog-related h3 { max-width: 17ch; margin: 54px 0 24px; font-size: clamp(30px,3vw,50px); line-height: .96; letter-spacing: -.045em; }
.blog-related b { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }

@media (max-width: 1050px) {
  .blog-hub-hero,.blog-article-hero { grid-template-columns: 1fr; }
  .blog-hero-count { min-height: 440px; }
  .blog-article-hero > div:first-child { border-right: 0; border-bottom: 1px solid var(--blog-line); }
  .blog-card { grid-column: span 6; }
  .blog-card--wide,.blog-card--feature { grid-column: 1 / -1; }
  .blog-card--tall { grid-row: auto; min-height: 540px; }
}

@media (max-width: 720px) {
  .blog-hub-hero { min-height: auto; padding-top: 116px; }
  .blog-hub-hero h1,.blog-article-hero h1,.blog-feature-intro h2,.blog-hub-cta h2,.blog-archive h2 { font-size: clamp(44px,13vw,72px); line-height: .9; }
  .blog-feature-intro,.blog-hub-cta,.blog-archive > header { grid-template-columns: 1fr; }
  .blog-filter { justify-content: flex-start; }
  .blog-card-grid { grid-template-columns: 1fr; }
  .blog-card,.blog-card--wide,.blog-card--feature { grid-column: 1; min-height: 480px; }
  .blog-card--feature h2,.blog-card--wide h2 { font-size: clamp(40px,11vw,62px); }
  .blog-archive-list { grid-template-columns: 1fr; }
  .blog-archive-list a:nth-child(odd) { border-right: 0; }
  .blog-diagram > div { display: grid; }
  .blog-diagram i { transform: rotate(90deg); text-align: center; }
  .blog-article-layout { grid-template-columns: 1fr; }
  .blog-toc { position: static; }
  .blog-related > div { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-reveal { opacity: 1; transform: none; transition: none; }
  .blog-hero-count,.blog-hero-count i,.blog-signal-orbit i { animation: none; }
}