.blog-page {
  min-height: 100vh;
}

.blog-page main {
  min-height: 60vh;
}

.blog-hero {
  padding-block: clamp(4rem,9vw,8rem);
  border-bottom: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}

.blog-hero::before {
  content: "";
  position: absolute;
  inset: -45% -10% auto;
  height: 130%;
  pointer-events: none;
  background: radial-gradient(52% 58% at 18% 20%,rgba(252,58,240,.18),transparent 70%),radial-gradient(45% 52% at 82% 8%,rgba(20,252,252,.12),transparent 72%);
}

.blog-hero .wrap {
  position: relative;
}

.blog-hero h1 {
  font-size: clamp(2.8rem,8vw,6.5rem);
  line-height: .86;
  max-width: 12ch;
  margin: .7rem 0 1.5rem;
}

.blog-hero .lede {
  margin: 0;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.blog-card {
  min-width: 0;
  padding: 0;
  background: var(--ground);
  display: flex;
  flex-direction: column;
}

.blog-card-image {
  display: block;
  margin: clamp(1.5rem,4vw,2.6rem) clamp(1.5rem,4vw,2.6rem) 0;
  border: 1px solid var(--rule)!important;
  overflow: hidden;
  background: #000;
}

.blog-card-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1200/630;
  object-fit: cover;
  transition: transform .25s ease,filter .25s ease;
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.012);
  filter: brightness(1.06);
}

.blog-card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem,4vw,2.6rem);
}

.blog-card h2 {
  font-size: clamp(1.65rem,3vw,2.35rem);
  line-height: 1;
}

.blog-card h2 a {
  color: var(--white);
  border: 0;
}

.blog-card h2 a:hover {
  color: var(--cyan);
}

.blog-card-copy>p:not(.eyebrow) {
  color: var(--text);
  max-width: 60ch;
}

.blog-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  margin-top: auto;
  padding-top: .6rem;
  color: var(--dim);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.blog-empty {
  grid-column: 1/-1;
  padding: clamp(2rem,7vw,5rem);
  background: var(--ground);
}

.blog-empty h2 {
  margin: .75rem 0 1rem;
}

.blog-empty>p:last-child {
  max-width: 58ch;
  color: var(--text);
}

.blog-article-header {
  padding-block: clamp(3rem,8vw,6rem);
  border-bottom: 1px solid var(--rule);
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: clamp(2.5rem,6vw,4.5rem);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dimmer);
}

.breadcrumbs a {
  color: var(--dim);
}

.blog-article-header h1 {
  font-size: clamp(2.5rem,7vw,5.2rem);
  line-height: .9;
  max-width: 15ch;
  margin: .75rem 0 1.5rem;
}

.blog-article-header .lede {
  margin-bottom: 1.4rem;
  max-width: 66ch;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.4rem;
  color: var(--dim);
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.article-meta a {
  font-weight: 700;
}

.blog-prose {
  max-width: 860px;
  padding-block: clamp(3rem,7vw,5.5rem);
  font-size: clamp(.98rem,.35vw + .9rem,1.08rem);
  line-height: 1.78;
}

.blog-prose>*+* {
  margin-top: 1.25rem;
}

.blog-prose h2,
.blog-prose h3 {
  scroll-margin-top: 6rem;
  color: var(--white);
}

.blog-prose h2 {
  font-size: clamp(1.44rem,3.2vw,2.24rem);
  margin-top: 3.5rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--rule);
}

.blog-prose h3 {
  font-size: clamp(1rem,1.92vw,1.32rem);
  margin-top: 2.5rem;
}

.blog-prose p,
.blog-prose li {
  max-width: 72ch;
}

.blog-prose ul,
.blog-prose ol {
  padding-left: 1.4rem;
}

.blog-prose li+li {
  margin-top: .55rem;
}

.blog-prose strong {
  color: var(--white);
}

.blog-prose blockquote {
  margin-inline: 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--magenta);
  background: var(--panel);
  color: var(--text);
}

.blog-prose code {
  padding: .12em .35em;
  border: 1px solid var(--rule);
  background: var(--panel);
  color: var(--amber);
  font: .9em/1.5 var(--mono);
}

.blog-prose pre {
  padding: 1rem 1.15rem;
  overflow: auto;
  border: 1px solid var(--rule);
  background: var(--panel);
}

.blog-prose pre code {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
}

.blog-prose img {
  width: 100%;
  height: auto;
  margin-block: 2rem;
  border: 1px solid var(--rule);
  background: var(--panel);
}

.blog-prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.blog-prose th,
.blog-prose td {
  padding: .75rem;
  border: 1px solid var(--rule);
  text-align: left;
}

.blog-prose th {
  color: var(--white);
  background: var(--panel);
}

.blog-prose hr {
  margin-block: 3rem;
  border: 0;
  border-top: 1px solid var(--rule);
}

.blog-prose .benchmark-visual {
  margin: 2.5rem 0 3rem;
  max-width: none;
}

.blog-prose .benchmark-visual-lead {
  margin-top: 2.75rem;
}

.blog-prose .benchmark-visual img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-color: rgba(140,235,227,.22);
  background: #000;
}

.blog-prose .benchmark-visual-scroll {
  overflow-x: auto;
  border: 1px solid rgba(140,235,227,.22);
  background: #000;
  scrollbar-color: var(--cyan) var(--panel);
}

.blog-prose .benchmark-visual-scroll img {
  border: 0;
}

.blog-prose .benchmark-visual-scroll:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.blog-prose .benchmark-visual figcaption {
  padding: .85rem 1rem;
  border: 1px solid var(--rule);
  border-top: 0;
  color: var(--dim);
  font-size: .78rem;
  line-height: 1.55;
}

.blog-prose .benchmark-download {
  margin: 1.5rem 0 .75rem;
}

.blog-prose .benchmark-download-meta {
  max-width: 100%;
  margin: 0 0 2.5rem;
  color: var(--dim);
  font-size: .76rem;
}

.blog-prose .benchmark-download-meta code {
  overflow-wrap: anywhere;
}

/* An automatically opened live viewer, with a plain image/link fallback. */

.article-cta {
  padding-block: var(--band);
  border-block: 1px solid var(--rule);
  background: var(--panel);
}

.article-cta h2 {
  max-width: 18ch;
  margin: .7rem 0 1.5rem;
}

.related-posts {
  max-width: 1200px;
  margin-inline: auto;
  padding: var(--band) var(--pad);
}

.related-posts>h2 {
  margin: .7rem 0 1.5rem;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.related-grid .blog-card h2 {
  font-size: 1.5rem;
}

@media (min-width:761px) {
  .blog-card-featured {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: minmax(0,1.08fr) minmax(360px,.92fr);
    align-items: stretch;
  }
  .blog-card-featured .blog-card-image {
    height: 100%;
    margin: 0;
    border-width: 0 1px 0 0!important;
    display: flex;
    align-items: center;
    background: #000;
  }
  .blog-card-featured .blog-card-image img {
    height: auto;
    min-height: 0;
    aspect-ratio: 1200/630;
    object-fit: contain;
  }
  .blog-card-featured .blog-card-copy {
    justify-content: center;
    padding: clamp(2rem,5vw,4rem);
  }
  .blog-card-featured h2 {
    font-size: clamp(2.4rem,4.3vw,4.25rem);
  }
}

@media (max-width:760px) {
  .blog-grid,
  .related-grid {
    grid-template-columns: 1fr;
  }
  .blog-article-header h1 {
    max-width: none;
  }
  .article-meta {
    flex-direction: column;
  }
  .blog-prose .benchmark-visual {
    margin-block: 2rem 2.5rem;
  }
  .blog-prose .benchmark-visual:not(.benchmark-visual-lead)::before {
    content: "Swipe to explore";
    display: block;
    margin-bottom: .55rem;
    color: var(--cyan);
    font-size: .68rem;
    font-weight: 700;
  }
  .blog-prose .benchmark-visual-scroll img {
    width: 900px;
    max-width: none;
  }
  .blog-prose .benchmark-visual figcaption {
    padding: .75rem;
    font-size: .72rem;
  }
}

/* Editorial AMOLED presentation */

.blog-page {
  background: transparent;
}

.blog-hero {
  padding-block: clamp(6rem,11vw,9rem);
  border-color: rgba(255,255,255,.09);
  background: transparent;
}

.blog-hero::before {
  inset: -30% -10% auto;
  height: 120%;
  background: radial-gradient(36rem 28rem at 20% 30%,rgba(57,150,171,.11),transparent 72%);
}

.blog-hero h1 {
  font: 700 clamp(3.2rem,7vw,6rem)/1 var(--display);
  letter-spacing: -.07em;
  text-transform: none;
  max-width: 16ch;
}

.blog-grid,
.related-grid {
  gap: 12px;
  border: 0;
  background: transparent;
}

.blog-card {
  padding: clamp(1.6rem,4vw,2.8rem);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  background: #050609;
  transition: border-color .2s,transform .2s,background .2s;
}

.blog-card:hover {
  border-color: rgba(98,231,255,.22);
  background: #07090D;
  transform: translateY(-2px);
}

.blog-card h2 {
  font: 650 clamp(1.65rem,3vw,2.35rem)/1.08 var(--display);
  letter-spacing: -.045em;
  text-transform: none;
}

.blog-card-meta,
.breadcrumbs,
.article-meta {
  font-family: var(--body);
  letter-spacing: 0;
  text-transform: none;
}

.blog-article-header {
  padding-block: clamp(5rem,10vw,8rem);
  border-color: rgba(255,255,255,.09);
}

.blog-article-header h1 {
  font: 700 clamp(2.9rem,6.4vw,5.4rem)/1.02 var(--display);
  letter-spacing: -.065em;
  text-transform: none;
  max-width: 16ch;
}

.blog-prose {
  max-width: 820px;
  color: #A5A5AF;
  font-family: var(--body);
  font-size: clamp(1rem,.35vw + .94rem,1.1rem);
  line-height: 1.82;
}

.blog-prose h2 {
  font: 650 clamp(1.52rem,3.2vw,2.24rem)/1.12 var(--display);
  letter-spacing: -.045em;
  text-transform: none;
  border-color: rgba(255,255,255,.09);
}

.blog-prose h3 {
  font-family: var(--display);
  letter-spacing: -.03em;
  text-transform: none;
}

.blog-prose blockquote {
  border-color: #B96CFF;
  border-radius: 0 8px 8px 0;
  background: #06080B;
}

.blog-prose code,
.blog-prose pre {
  border-color: rgba(255,255,255,.1);
  border-radius: 6px;
  background: #040507;
}

.article-cta {
  border-color: rgba(255,255,255,.09);
  background: radial-gradient(34rem 24rem at 20% 50%,rgba(58,146,166,.1),transparent 72%),#020304;
}

.article-cta h2,
.related-posts>h2 {
  font-size: clamp(2.2rem,4.5vw,4rem);
  letter-spacing: -.055em;
}

/* The index is a compact article list, not another landing-page hero.
   Scope these rules to the index so article and related-post layouts stay put. */

body[data-page="blog"].blog-index .blog-page main {
  min-height: 0;
}

body[data-page="blog"].blog-index .blog-hero {
  min-height: 0;
  margin: 0;
  padding: 2.5rem 0 1.75rem;
  border: 0;
  background: none;
}

body[data-page="blog"].blog-index .blog-hero::before,
body[data-page="blog"].blog-index .blog-hero::after {
  content: none;
  display: none!important;
}

body[data-page="blog"].blog-index .blog-hero .wrap,
body[data-page="blog"].blog-index .blog-listing {
  max-width: 1040px;
}

body[data-page="blog"].blog-index .blog-hero h1 {
  max-width: none;
  margin: 0 0 .65rem;
  font-size: 2.25rem;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: left;
}

body[data-page="blog"].blog-index .blog-hero .lede {
  max-width: 65ch;
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
}

body[data-page="blog"].blog-index .blog-listing {
  padding-block: 0 3.5rem;
}

body[data-page="blog"].blog-index .blog-listing-label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .85rem;
  color: var(--muted);
  font-size: .78rem;
}

body[data-page="blog"].blog-index .blog-grid {
  grid-template-columns: 1fr;
  gap: 0;
  border: 0;
  background: none;
}

body[data-page="blog"].blog-index .blog-card {
  display: grid;
  grid-column: auto;
  grid-template-columns: 200px minmax(0,1fr);
  align-items: start;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
}

body[data-page="blog"].blog-index .blog-card-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 1px solid var(--rule)!important;
  background: #000;
}

body[data-page="blog"].blog-index .blog-card-image img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1200/630;
  object-fit: contain;
  transform: none;
  filter: none;
}

body[data-page="blog"].blog-index .blog-card-copy {
  gap: .55rem;
  padding: 0;
}

body[data-page="blog"].blog-index .blog-card .eyebrow {
  margin: 0;
  font-size: .62rem;
  line-height: 1.4;
  letter-spacing: .06em;
}

body[data-page="blog"].blog-index .blog-card h2 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: 0;
  text-wrap: initial;
}

body[data-page="blog"].blog-index .blog-card h2 a {
  color: var(--white);
  border: 0;
}

body[data-page="blog"].blog-index .blog-card h2 a:hover {
  color: var(--cyan);
}

body[data-page="blog"].blog-index .blog-card-copy>p:not(.eyebrow) {
  max-width: none;
  margin: 0;
  font-size: .9rem;
  line-height: 1.65;
}

body[data-page="blog"].blog-index .blog-card-meta {
  gap: .35rem 1rem;
  margin: 0;
  padding-top: .25rem;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.5;
}

body[data-page="blog"].blog-index .blog-empty {
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
  background: none;
}

body[data-page="blog"].blog-index .blog-empty h2 {
  font-size: 1.5rem;
  line-height: 1.25;
}

@media(max-width:640px) {
  body[data-page="blog"].blog-index .blog-hero {
    padding-block: 1.75rem 1.5rem;
  }
  body[data-page="blog"].blog-index .blog-hero h1 {
    font-size: 2rem;
  }
  body[data-page="blog"].blog-index .blog-card {
    grid-template-columns: minmax(0,1fr) 96px;
    gap: .65rem 1rem;
    padding-block: 1.25rem;
  }
  body[data-page="blog"].blog-index .blog-card-image {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  body[data-page="blog"].blog-index .blog-card-copy {
    display: contents;
  }
  body[data-page="blog"].blog-index .blog-card .eyebrow {
    grid-column: 1;
    grid-row: 1;
  }
  body[data-page="blog"].blog-index .blog-card h2 {
    grid-column: 1;
    grid-row: 2;
    font-size: 1.2rem;
  }
  body[data-page="blog"].blog-index .blog-card-copy>p:not(.eyebrow) {
    grid-column: 1 / -1;
    grid-row: 3;
    font-size: .875rem;
  }
  body[data-page="blog"].blog-index .blog-card-meta {
    grid-column: 1 / -1;
    grid-row: 4;
  }
}