/* The blog: the index (/blog/) and every post (/blog/<slug>/). Loads after
   home.css and keeps that sheet's tokens, type roles, nav, closing card and
   footer; only the blog's own pieces live here. How to add a post:
   apps/marketing/blog/README.md.

   Layout: the index sits on the homepage's 1248px column. A post reads in a
   680px column, and its figures may break out to 1040px. Renders sit on the
   --room color, which is the color the renderer paints behind a room, so a
   picture's edge disappears into its plate. */

@font-face {
  font-family: "Monaspace Neon Var";
  src: url("/fonts/MonaspaceNeon-Variable-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 100% 125%;
  font-display: swap;
}

:root {
  --font-mono: "Monaspace Neon Var", ui-monospace, SFMono-Regular, Menlo, monospace;
  --read: 680px;
  --read-wide: 1040px;

  /* Chart series (validated pair, dataviz validate_palette.js, light):
     the GPU with full textures, and a CPU in the plain look. The amber sits
     under 3:1 on white, so every chart labels its values and carries a table. */
  --series-gpu: #2a62d9;
  --series-cpu: #e0912f;
  --series-before: #c9c5bc;
}

.nav-links a[aria-current="page"],
.foot-links a[aria-current="page"] {
  color: var(--ink);
}

/* ---------- shared: tag, byline, avatar ---------- */

.tag {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border: 1.5px solid var(--stroke);
  border-radius: 999px;
  font-size: var(--chip);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

a.tag:hover {
  border-color: var(--ink);
}

.byline {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* The author's initials on ink, under their picture when there is one
   (components/Avatar.astro). */
.avatar {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ink-inverse);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.byline-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--label);
  line-height: 1.3;
}

.byline-name {
  font-weight: 650;
  color: var(--ink);
}

.byline-meta {
  color: var(--ink-soft);
}

/* ---------- index ---------- */

.blog-head {
  padding-block: 72px 56px;
}

.blog-head .display {
  max-width: 11em;
  margin-top: 14px;
}

.blog-head .lede {
  max-width: 620px;
  margin-top: 20px;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* The newest post, large: picture left, words right. The whole card is the
   link (the title's ::after covers it), so the byline stays plain text. */
.post-feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: 56px;
  padding: 16px;
  border: 1.5px solid var(--stroke);
  border-radius: var(--radius-panel);
  transition: border-color 0.2s;
}

.post-feature:hover,
.post-card:hover {
  border-color: var(--ink);
}

.post-feature:focus-within,
.post-card:focus-within {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.cover {
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--room);
  aspect-ratio: 4 / 3;
}

.cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: scale 0.6s var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  .post-feature:hover .cover img,
  .post-card:hover .cover img {
    scale: 1.03;
  }
}

.post-feature-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding-right: 40px;
}

.post-feature-copy h2 {
  font-size: clamp(1.75rem, 1rem + 1.6vw, 2.5rem);
}

.post-feature-copy .dek {
  font-size: var(--body-small);
  line-height: 1.45;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.post-feature h2 a,
.post-card h3 a {
  text-decoration: none;
}

.post-feature h2 a::after,
.post-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.post-feature :focus-visible,
.post-card :focus-visible {
  outline: none;
}

.post-feature .byline {
  margin-top: 6px;
}

/* Older posts, three to a row. */
.post-list-head {
  margin-top: 88px;
  font-size: var(--step-title);
  font-weight: 700;
}

.post-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px 12px 22px;
  border: 1.5px solid var(--stroke);
  border-radius: var(--radius-card);
  transition: border-color 0.2s;
}

.post-card .cover {
  border-radius: 12px;
}

.post-card .tag {
  align-self: flex-start;
  margin-inline: 6px;
}

.post-card h3 {
  padding-inline: 6px;
  font-size: var(--card-title);
  line-height: 1.25;
  text-wrap: balance;
}

.post-card .byline-meta {
  padding-inline: 6px;
  font-size: var(--label);
}

.feed-line {
  margin-top: 40px;
  font-size: var(--body-small);
  color: var(--ink-soft);
}

.feed-line a {
  color: var(--ink);
  text-underline-offset: 4px;
}

/* ---------- post: header ---------- */

.read {
  max-width: calc(var(--read) + 2 * var(--gutter));
}

.article-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding-block: 64px 40px;
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 12px;
}

.crumbs .eyebrow {
  color: var(--ink);
  text-decoration: none;
}

.crumbs .eyebrow:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.article-head h1 {
  font-size: clamp(2.375rem, 1.3rem + 3vw, 3.75rem);
}

.article-head .dek {
  font-size: var(--lede);
  line-height: 1.4;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ---------- post: figures ---------- */

.fig {
  margin-block: 44px;
}

/* A figure wider than the text, centred on it. */
.fig-wide {
  width: min(var(--read-wide), 100vw - 2 * var(--gutter));
  margin-inline: calc((min(var(--read-wide), 100vw - 2 * var(--gutter)) - 100%) / -2);
}

.fig figcaption {
  max-width: var(--read);
  margin: 14px auto 0;
  font-size: var(--label);
  line-height: 1.45;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.shot {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--room);
}

.shot img {
  width: 100%;
  height: auto;
}

/* A label on the picture: what drew it, and how long it took. */
.shot-label {
  position: absolute;
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--stroke);
  font-size: var(--chip);
  line-height: 1.2;
  color: var(--ink-soft);
}

.shot-label strong {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.shot-label.is-after strong {
  color: var(--series-gpu);
}

/* The headline numbers under the hero pair. */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  border-radius: var(--radius-card);
  background: var(--paper);
}

.stat strong {
  font-family: var(--font-display);
  font-weight: var(--display-wght);
  font-variation-settings: "wdth" var(--display-wdth);
  font-size: var(--price);
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat span {
  font-size: var(--label);
  line-height: 1.35;
  color: var(--ink-soft);
}

/* ---------- post: body ---------- */

.prose {
  font-size: var(--body);
  line-height: 1.6;
}

/* Text blocks after another text block get a paragraph's space. Figures
   carry their own margins. */
.prose > :is(p, ul, ol, blockquote, .table) + :is(p, ul, ol, blockquote, .table) {
  margin-top: 1.1em;
}

.prose h2 {
  margin-top: 2.4em;
  margin-bottom: 0.6em;
  font-family: var(--font-display);
  font-weight: var(--display-wght);
  font-variation-settings: "wdth" var(--display-wdth);
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.prose > .fig + h2 {
  margin-top: 1.6em;
}

/* A sub-heading inside a section. */
.prose h3 {
  margin-top: 1.8em;
  margin-bottom: 0.4em;
  font-size: var(--step-title);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}

.prose h2 + h3 {
  margin-top: 0.4em;
}

.prose ul,
.prose ol:not(.steps) {
  display: grid;
  gap: 0.5em;
  padding-left: 1.25em;
  list-style: disc;
}

.prose ol:not(.steps) {
  padding-left: 1.6em;
  list-style: decimal;
}

.prose li > :is(ul, ol) {
  margin-top: 0.5em;
}

.prose li::marker {
  color: var(--ink-faint);
}

.prose ol:not(.steps) > li::marker {
  color: var(--ink-soft);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* A pull quote: someone's words, set larger, with who said them. */
.prose blockquote {
  margin: 1.6em 0;
  padding-left: 20px;
  border-left: 3px solid var(--ink);
  font-size: var(--lede);
  font-weight: 500;
  line-height: 1.4;
  text-wrap: pretty;
}

.prose blockquote cite {
  display: block;
  margin-top: 10px;
  font-size: var(--label);
  font-style: normal;
  font-weight: 450;
  color: var(--ink-soft);
}

.prose hr {
  margin: 2.4em 0;
  border: 0;
  border-top: 2px solid var(--stroke);
}

.prose kbd {
  padding: 0.05em 0.4em;
  border-radius: 6px;
  background: var(--card);
  box-shadow:
    0 0 0 1px var(--stroke),
    0 1.5px 0 var(--stroke);
  font-family: var(--font-mono);
  font-size: 0.8em;
}

/* Tables: a box that scrolls sideways on a phone rather than squeezing.
   Numbers line up right in .num cells. */
.table {
  overflow-x: auto;
}

.prose .table {
  margin-block: 1.6em;
}

.table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--body-small);
  line-height: 1.4;
}

.table caption {
  caption-side: bottom;
  padding-top: 12px;
  text-align: left;
  font-size: var(--label);
  color: var(--ink-soft);
}

.table th,
.table td {
  padding: 11px 16px 11px 0;
  text-align: left;
  vertical-align: top;
}

.table th:last-child,
.table td:last-child {
  padding-right: 0;
}

.table thead th {
  border-bottom: 2px solid var(--ink);
  font-size: var(--label);
  font-weight: 650;
  white-space: nowrap;
}

.table tbody td,
.table tbody th {
  border-bottom: 1px solid var(--stroke);
}

.table tbody th {
  font-weight: 600;
}

.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The row a table is about. */
.table tr.is-hot > * {
  background: color-mix(in srgb, var(--series-gpu) 7%, var(--card));
}

.table tr.is-hot > :first-child {
  box-shadow: inset 3px 0 0 var(--series-gpu);
  padding-left: 12px;
}

/* A dense table, for when the numbers are the point: smaller type, tight
   rows, rules only at the top, under the header and at the bottom, units in
   the header instead of every cell, column groups, and room for an inline
   chart column (.spark) drawn on one shared scale. Set --max on the table
   to the scale's top, and give each .spark its two values as --a and --b
   (--lo and --hi are the smaller and larger, for the line between them).
   Every .spark carries an aria-label with its numbers. */
.table.is-dense table {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-size: var(--chip);
  line-height: 1.3;
}

.table.is-dense th,
.table.is-dense td {
  padding: 6px 14px 6px 0;
}

.table.is-dense thead th {
  padding-top: 8px;
  border-bottom: 1px solid var(--ink-faint);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-soft);
  vertical-align: bottom;
}

/* A header row that names a group of columns, with a short rule under it. */
.table.is-dense thead .group th {
  padding-bottom: 4px;
  border-bottom: 0;
  color: var(--ink);
}

.table.is-dense thead .group th[colspan] span {
  display: block;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--stroke);
}

.table.is-dense thead .group + tr th {
  padding-top: 4px;
}

.table.is-dense tbody td,
.table.is-dense tbody th {
  border-bottom: 0;
}

/* A hairline every few rows keeps a long table's lines easy to follow. */
.table.is-dense tbody tr.break > * {
  border-top: 1px solid var(--stroke);
}

.table.is-dense tbody th {
  font-weight: 550;
  white-space: nowrap;
}

.table.is-dense tbody tr:hover > * {
  background: var(--paper);
}

.table.is-dense .num {
  font-feature-settings: "tnum", "lnum";
}

.table.is-dense .soft {
  color: var(--ink-soft);
}

.table.is-dense .up {
  color: var(--live);
}

.table.is-dense .down {
  color: var(--flag);
}

.table.is-dense tfoot td {
  padding-top: 8px;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.table.is-dense sup {
  font-size: 0.7em;
  line-height: 0;
  color: var(--ink-soft);
}

.table.is-dense .spark-col {
  width: 34%;
  min-width: 140px;
}

/* The inline chart: two dots on a shared scale and the line between them. */
.spark {
  position: relative;
  display: block;
  height: 12px;
}

.spark::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  border-top: 1px dotted var(--stroke);
}

.spark i,
.spark b {
  position: absolute;
  top: 50%;
}

.spark i {
  left: calc(var(--lo) / var(--max) * 100%);
  width: calc((var(--hi) - var(--lo)) / var(--max) * 100%);
  height: 2px;
  translate: 0 -50%;
  background: var(--ink-faint);
}

.spark b {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  translate: -50% -50%;
}

.spark b:first-of-type {
  left: calc(var(--a) / var(--max) * 100%);
  background: var(--series-cpu);
}

.spark b:last-of-type {
  left: calc(var(--b) / var(--max) * 100%);
  background: var(--series-gpu);
}

/* The scale over a .spark column: tick labels at --at (0 to 1). */
.spark-axis {
  position: relative;
  display: block;
  height: 1em;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 450;
}

.spark-axis span {
  position: absolute;
  left: calc(var(--at) * 100%);
  translate: -50% 0;
}

.spark-axis span:first-child {
  translate: 0 0;
}

.spark-axis span:last-child {
  translate: -100% 0;
}

.prose a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.prose strong {
  font-weight: 650;
}

.prose code,
.code pre {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
}

.prose :not(pre) > code {
  padding: 0.1em 0.35em;
  border-radius: 6px;
  background: var(--paper);
  font-size: 0.86em;
}

/* An aside in smaller type: where a number came from, a cold start. */
.prose .aside {
  padding-left: 16px;
  border-left: 2px solid var(--stroke);
  font-size: var(--body-small);
  color: var(--ink-soft);
}

.code {
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--paper);
}

.code-name {
  padding: 12px 20px 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.code pre {
  margin: 0;
  padding: 12px 20px 18px;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.6;
  tab-size: 2;
}

/* Syntax colors for Shiki's css-variables theme (the blog build, or
   scripts/highlight-code.mjs for hand-written pages, writes the spans ahead
   of time; no script runs on the page). Drawn
   from the site's palette, each at least 4.5:1 on --paper. */
.code {
  --shiki-background: transparent;
  --shiki-foreground: var(--ink);
  --shiki-token-keyword: #3a45b8;
  --shiki-token-constant: #a13f6b;
  --shiki-token-string: #1d6b3e;
  --shiki-token-string-expression: #1d6b3e;
  --shiki-token-function: #8a4b07;
  --shiki-token-parameter: var(--ink);
  --shiki-token-comment: var(--ink-soft);
  --shiki-token-punctuation: var(--ink-soft);
  --shiki-token-link: #3a45b8;
}

.code pre span[style*="token-comment"] {
  font-style: italic;
}

/* ---------- post: steps (a loop or a flow, in HTML) ---------- */

.steps {
  display: flex;
  align-items: stretch;
  padding: 20px;
  border-radius: var(--radius-card);
  background: var(--paper);
  counter-reset: step;
}

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

.steps li + li::before {
  content: "→";
  flex: 0 0 32px;
  text-align: center;
  color: var(--ink-faint);
}

.step {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  height: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--stroke);
}

.step b {
  font-size: var(--body-small);
  font-weight: 650;
  line-height: 1.25;
}

.step small {
  font-size: var(--chip);
  line-height: 1.35;
  color: var(--ink-soft);
}

.step.is-hot {
  box-shadow: 0 0 0 1.5px var(--series-gpu);
}

.steps-note {
  margin-top: 10px;
  text-align: center;
  font-size: var(--chip);
  color: var(--ink-soft);
}

/* ---------- post: charts ----------
   Plain HTML, drawn to scale from --v (value ÷ the axis maximum). Every chart
   has a legend, labels its values, and carries a table for screen readers. */

.chart {
  position: relative;
  padding: 22px 24px 18px;
  border-radius: var(--radius-card);
  background: var(--paper);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-bottom: 18px;
  font-size: var(--chip);
  color: var(--ink-soft);
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c);
}

.legend .is-bar i {
  width: 16px;
  height: 8px;
  border-radius: 0 3px 3px 0;
}

.chart-rows {
  display: grid;
  gap: 16px;
}

.chart-row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.chart-row > span {
  font-size: var(--label);
  line-height: 1.25;
}

.chart-row small {
  display: block;
  font-size: var(--chip);
  color: var(--ink-soft);
}

.lane {
  position: relative;
  height: 30px;
}

/* Dot plot: one row per room, a dot per series, a thin line between. */
.dumbbell .lane::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--lo) * 100%);
  width: calc((var(--hi) - var(--lo)) * 100%);
  height: 2px;
  translate: 0 -50%;
  background: var(--stroke);
}

.dot {
  position: absolute;
  top: 50%;
  left: calc(var(--v) * 100%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 2px var(--paper);
  translate: -50% -50%;
}

.dot b {
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  translate: -50% 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

.dot.lean-lo b {
  translate: calc(-100% - 1px) 0;
}

.dot.lean-hi b {
  translate: 1px 0;
}

/* Paired bars: before above after, both from the baseline. */
.bars .lane {
  display: grid;
  gap: 4px;
  height: auto;
}

.bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bar i {
  display: block;
  width: calc(var(--v) * (100% - 3.5rem));
  height: 12px;
  border-radius: 0 4px 4px 0;
  background: var(--c);
}

.bar b {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.axis {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 16px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--stroke);
}

.axis div {
  position: relative;
  height: 1.2em;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-soft);
}

.axis div span {
  position: absolute;
  left: calc(var(--v) * 100%);
  translate: -50% 0;
}

.axis div span:first-child {
  translate: 0 0;
}

/* ---------- post: end ---------- */

.article-end {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 2px solid var(--stroke);
}

.author-card {
  display: flex;
  align-items: center;
  gap: 16px;
}

.author-card .avatar {
  width: 56px;
  height: 56px;
  font-size: 1.05rem;
}

.author-card p {
  font-size: var(--body-small);
  line-height: 1.45;
  color: var(--ink-soft);
}

.author-card strong {
  display: block;
  font-weight: 650;
  color: var(--ink);
}

.back-link {
  font-size: var(--body-small);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.blog-close {
  padding-top: 96px;
}

/* ---------- narrower screens ---------- */

@media (max-width: 1180px) {
  .post-feature {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .post-feature-copy {
    padding: 0 8px 12px;
  }

  .post-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .blog-head {
    padding-block: 32px 32px;
  }

  .post-feature {
    padding: 10px;
    border-radius: var(--radius-card);
  }

  .post-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .article-head {
    padding-block: 28px 24px;
    gap: 18px;
  }

  .fig {
    margin-block: 32px;
  }

  .stats {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Pairs stay side by side so before and after can be compared; each
     label moves under its picture, inside the plate. */
  .pair {
    gap: 8px;
  }

  .shot {
    border-radius: 12px;
  }

  .shot-label {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
    padding: 2px 10px 10px;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 0.75rem;
  }

  .stat {
    flex-direction: row;
    align-items: baseline;
    gap: 14px;
    padding: 16px 18px;
  }

  .stat strong {
    flex: none;
    min-width: 4.2ch;
  }

  .steps {
    flex-direction: column;
    padding: 14px;
  }

  .steps li {
    flex-direction: column;
    align-items: stretch;
  }

  .steps li + li::before {
    content: "↓";
    flex-basis: 28px;
    line-height: 28px;
  }

  .chart {
    padding: 18px 16px 14px;
  }

  .chart-row,
  .axis {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .axis > i {
    display: none;
  }

  .blog-close {
    padding-top: 64px;
  }
}

/* ---------- long-form type: the "refined" cascade ----------

   A quieter type cascade for long reads, and the blog's type.
   It keeps the face, colors and layout, and changes only the hierarchy:
   headings at a text weight and normal width instead of the 800-weight
   narrowed display cut, a smaller title, lighter running text with more
   leading, and a plain small-caps label in place of the marker eyebrow.
   The marketing pieces (the closing card, the nav) keep the brand cut.

   Turned on by data-type="refined" on <html>, which every blog page sets
   (blog/src/layouts/Base.astro). A .type-refined box applies it to its contents,
   which is how /typography/#longform shows both side by side. */

:is(:root[data-type="refined"], .type-refined) {
  --refined-ink: #1f1e1b;
  --refined-title: clamp(2rem, 1.45rem + 1.6vw, 2.75rem);
  --refined-h2: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem);
  --refined-h3: 1.125rem;
  --refined-body: 1.0625rem; /* 17px */
  --refined-heading-wght: 620;
}

:is(:root[data-type="refined"], .type-refined) .article-head {
  gap: 20px;
}

:is(:root[data-type="refined"], .type-refined) .article-head h1 {
  font-size: var(--refined-title);
  font-weight: var(--refined-heading-wght);
  font-variation-settings: "wdth" 100;
  line-height: 1.12;
  letter-spacing: -0.022em;
}

:is(:root[data-type="refined"], .type-refined) .article-head .dek {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5;
}

:is(:root[data-type="refined"], .type-refined) .crumbs .eyebrow {
  font-family: var(--font-text);
  font-size: var(--chip);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

:is(:root[data-type="refined"], .type-refined) .prose {
  font-size: var(--refined-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--refined-ink);
}

:is(:root[data-type="refined"], .type-refined)
  .prose
  > :is(p, ul, ol, blockquote, .table)
  + :is(p, ul, ol, blockquote, .table) {
  margin-top: 1.25em;
}

:is(:root[data-type="refined"], .type-refined) .prose :is(strong, b) {
  font-weight: 620;
  color: var(--ink);
}

:is(:root[data-type="refined"], .type-refined) .prose h2 {
  margin-top: 2.8em;
  margin-bottom: 0.7em;
  font-family: var(--font-text);
  font-size: var(--refined-h2);
  font-weight: var(--refined-heading-wght);
  font-variation-settings: "wdth" 100;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ink);
}

:is(:root[data-type="refined"], .type-refined) .prose > .fig + h2 {
  margin-top: 1.8em;
}

:is(:root[data-type="refined"], .type-refined) .prose h3 {
  font-size: var(--refined-h3);
  font-weight: var(--refined-heading-wght);
  line-height: 1.35;
  color: var(--ink);
}

:is(:root[data-type="refined"], .type-refined) .prose blockquote {
  padding-left: 22px;
  border-left-width: 2px;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
}

:is(:root[data-type="refined"], .type-refined) .prose li::marker {
  color: var(--ink-soft);
}

:is(:root[data-type="refined"], .type-refined) .stat strong {
  font-family: var(--font-text);
  font-size: 1.75rem;
  font-weight: 600;
  font-variation-settings: "wdth" 100;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

:is(:root[data-type="refined"], .type-refined) .table thead th {
  border-bottom-width: 1px;
  font-weight: 600;
}

:is(:root[data-type="refined"], .type-refined) .tag {
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: var(--chip);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

:is(:root[data-type="refined"], .type-refined) a.tag:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Section and topic read as one path: BLOG / ENGINEERING. */
:is(:root[data-type="refined"], .type-refined) .crumbs {
  gap: 10px;
}

:is(:root[data-type="refined"], .type-refined) .crumbs .tag::before {
  content: "/";
  margin-right: 10px;
  font-weight: 400;
  color: var(--ink-faint);
}

:is(:root[data-type="refined"], .type-refined) .post-card .tag {
  margin-inline: 0;
}

:is(:root[data-type="refined"], .type-refined) .step b {
  font-weight: 600;
}

:is(:root[data-type="refined"], .type-refined) .fig figcaption {
  font-size: var(--chip);
  line-height: 1.5;
}