/* ── Blog article: Read-mode layer ──────────────────────────────────────
   Loaded by every /blogs/<slug>/ page on the site layout, on top of the
   shared prose and document-panel rules in components.css. Comprehension
   and wayfinding first: one reading panel, a 65-75 character measure
   (set in em, measured on the rendered lines) at 1.7, more
   space above a heading than below it, a contents rail that stays in
   reach on wide screens and folds into the flow on phones.
   Tokens only; body[data-accent="violet"] (the site group) is the page
   voice, a quick-play panel wears its own tool's catalog accent. */

/* Legacy style.css made the site unselectable; articles are for reading
   and quoting. */
.content-page { -webkit-user-select: text; user-select: text; }

/* ── Panel and measure ─────────────────────────────────────────────── */
main > .content-page {
  /* em, not ch: Outfit's zero is wider than its average letter, so 68ch
     set ~80 characters a line. 32em sets ~70 (measured at 1366, both
     layouts); Cyrillic letters run wider, so Russian gets 37em for the
     same count. */
  --measure: 32em;
  max-inline-size: calc(var(--measure) + 2 * var(--space-8));
}
main > .content-page:lang(ru) { --measure: 37em; }
/* Templated articles group their text in <section id> blocks; inside
   them the flow follows the same rhythm as direct children. */
.content-page > section:not(.blog-related) > * + * { margin-block-start: 1.1em; }
.content-page > section:not(.blog-related) > :first-child { margin-block-start: 0; }
.content-page > section[id] { scroll-margin-block-start: calc(var(--header-stuck) + var(--space-4)); }

/* Heading rhythm: generous above, tight below, in both flows. */
.content-page > h2,
.content-page > section > h2 {
  margin-block: 1.6em 0.45em;
  font-size: var(--step-3);
}
.content-page > section > h2:first-child { margin-block-start: 0; }
.content-page > section:not(.blog-related) { margin-block-start: calc(1.6 * var(--step-3)); }
.content-page > section:not(.blog-related):first-of-type { margin-block-start: var(--space-7); }
.content-page > h3,
.content-page > section > h3 {
  margin-block: 1.7em 0.4em;
  font-size: var(--step-2);
}
.content-page > :is(h2, h3) + *,
.content-page > section > :is(h2, h3) + * { margin-block-start: 0; }
.content-page :is(h2, h3) { text-wrap: balance; }
.content-page :is(p, li) { text-wrap: pretty; }

/* ── Title block ───────────────────────────────────────────────────── */
.content-page > .content-meta {
  margin-block-start: var(--space-5);
  margin-block-end: var(--space-6);
  padding-block-end: var(--space-5);
}
/* Date · read time · topic: a quiet facts line, not a label above the title. */
.content-meta {
  gap: var(--space-2) var(--space-5);
  margin-block-start: var(--space-5);
  font-variant-numeric: tabular-nums;
}
.content-meta > span { min-block-size: 28px; }
.content-meta i { inline-size: 1em; color: var(--accent); font-size: 0.9em; }
/* The topic reads as a chip so it never looks like part of the date run. */
.content-meta > span:has(> .fa-tag) {
  padding-inline: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-muted);
}
.content-meta > span:has(> .fa-tag) > i { display: none; }
/* The chip wears the article's tool accent (the one its call to action
   carries), as the hub row does. */
.content-page:has([data-accent="cyan"]) .content-meta { --accent: var(--cyan); }
.content-page:has([data-accent="pink"]) .content-meta { --accent: var(--pink); }
.content-page:has([data-accent="amber"]) .content-meta { --accent: var(--amber); }
.content-page:has([data-accent="coral"]) .content-meta { --accent: var(--coral); }
.content-page:has([data-accent="lime"]) .content-meta { --accent: var(--lime); }
.content-page:has([data-accent="violet"]) .content-meta { --accent: var(--violet); }
.content-meta > span:has(> .fa-tag) {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-1));
  color: var(--accent);
  font-weight: 500;
}

/* Standfirst: an explicit .lead, or the first paragraph under the title. */
.content-page > :is(.lead, .content-meta + p) {
  max-inline-size: none;
  color: var(--text);
  font-size: var(--step-1);
  line-height: 1.55;
}

/* ── Prose details ─────────────────────────────────────────────────── */
.content-page :where(p, li, td, figcaption, .article-note, .source-list) a:not(.glow-btn, .ghost-btn, .btn) {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
  text-decoration-color: color-mix(in srgb, var(--primary) 50%, transparent);
}
.content-page :where(p, li, td, figcaption, .article-note, .source-list) a:not(.glow-btn, .ghost-btn, .btn):hover {
  color: var(--primary-hover);
  text-decoration-color: currentColor;
}
.content-page :is(strong, b) { color: var(--text); }

/* Pull quote: open type with a hanging mark, no box inside the panel. */
.content-page blockquote {
  margin-block: var(--space-7);
  padding-block: 0;
  padding-inline: var(--space-8) 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
  font-size: var(--step-1);
  line-height: 1.5;
}
.content-page blockquote::before {
  inset-block-start: -0.12em;
  inset-inline-start: 0;
  color: var(--accent);
}
.content-page blockquote > :last-child { margin-block-end: 0; }
.content-page :not(pre) > code,
.content-page kbd { white-space: nowrap; }

/* ── Figures ───────────────────────────────────────────────────────── */
.content-page .article-figure { margin-block: var(--space-7); margin-inline: 0; }
.content-page .article-figure img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
}
.content-page .article-figure figcaption {
  margin-block-start: var(--space-3);
  color: var(--text-faint);
  font-size: var(--step--1);
  line-height: 1.5;
}
/* Padded single-column articles let pictures run to the panel edges from
   768px. Chapter layouts have no outer panel padding to bleed into. */
@media (min-width: 768px) {
  main > .content-page:not([data-reading-chapters]):not(:has(> .article-toc)) > .article-figure,
  main > .content-page:not([data-reading-chapters]):not(:has(> .article-toc)) > section > .article-figure {
    margin-inline: calc(-1 * var(--space-8));
  }
  main > .content-page:not([data-reading-chapters]):not(:has(> .article-toc)) .article-figure img {
    border-inline: 0;
    border-radius: 0;
  }
  main > .content-page:not([data-reading-chapters]):not(:has(> .article-toc)) .article-figure figcaption {
    padding-inline: var(--space-8);
  }
}

/* ── Quick table ───────────────────────────────────────────────────── */
.content-page .quick-table {
  margin-block: var(--space-6);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}
.content-page .quick-table :is(th, td) { padding: var(--space-3) var(--space-4); }
.content-page .quick-table th {
  background: var(--surface-2);
  color: var(--text);
  white-space: normal;
}
/* Header cells sit in the first row (no thead): round its outer corners. */
.content-page .quick-table tr:first-child > th:first-child { border-start-start-radius: calc(var(--radius-md) - 1px); }
.content-page .quick-table tr:first-child > th:last-child { border-start-end-radius: calc(var(--radius-md) - 1px); }
.content-page .quick-table tr:last-child > td:first-child { border-end-start-radius: calc(var(--radius-md) - 1px); }
.content-page .quick-table tr:last-child > td:last-child { border-end-end-radius: calc(var(--radius-md) - 1px); }
/* Zebra by tonal step: every other data row drops to Hull. */
.content-page .quick-table tr:nth-child(odd):not(:first-child) > td { background: var(--bg-raised); }
.content-page .quick-table tbody tr:hover > td { background: var(--surface-2); }
.content-page .quick-table td:first-child { color: var(--text); font-weight: 500; }
@media (min-width: 480px) and (max-width: 767.98px) {
  /* The table is its own horizontal scroller; the page never scrolls sideways. */
  .content-page .quick-table {
    display: block;
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
  .content-page .quick-table :is(th, td) { min-inline-size: 8.5rem; }
  /* The label column stays put while the figures scroll under it: a solid
     cell in its row's tone with a seam on its inline end (RTL follows). */
  .content-page .quick-table :is(th, td):first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    min-inline-size: 7.5rem;
    max-inline-size: 10rem;
    background: var(--surface-1);
    box-shadow: inset -1px 0 0 var(--border-strong);
  }
  [dir="rtl"] .content-page .quick-table :is(th, td):first-child { box-shadow: inset 1px 0 0 var(--border-strong); }
  .content-page .quick-table th:first-child { background: var(--surface-2); }
  .content-page .quick-table tr:nth-child(odd):not(:first-child) > td:first-child { background: var(--bg-raised); }
  .content-page .quick-table tbody tr:hover > td:first-child { background: var(--surface-2); }
}
/* Phones: each row stacks into a small record (label as its heading, then
   every figure under its column name), so nothing hides off-screen. */
@media (max-width: 479.98px) {
  .content-page .quick-table,
  .content-page .quick-table :is(thead, tbody, tr, td) { display: block; }
  .content-page .quick-table { border: 0; background: none; }
  .content-page .quick-table tr:first-child:has(> th),
  .content-page .quick-table thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .content-page .quick-table tr:not(:has(> th)) {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-raised);
  }
  .content-page .quick-table tr:not(:has(> th)) + tr { margin-block-start: var(--space-3); }
  .content-page .quick-table td { padding: 0; }
  .content-page .quick-table td,
  .content-page .quick-table tr:nth-child(odd):not(:first-child) > td,
  .content-page .quick-table tbody tr:hover > td {
    border: 0;
    border-radius: 0;
    background: none;
  }
  .content-page .quick-table td:first-child {
    margin-block-end: var(--space-2);
    color: var(--text);
    font-size: var(--step-0);
    font-weight: 600;
  }
  /* Column name in a fixed inline-start track, the value beside it
     (positioned, so links inside a value stay in its text flow). */
  .content-page .quick-table td[data-label] {
    position: relative;
    padding-block: var(--space-1);
    padding-inline-start: calc(38% + var(--space-3));
  }
  .content-page .quick-table td[data-label]::before {
    content: attr(data-label);
    position: absolute;
    inset-block-start: var(--space-1);
    inset-inline-start: 0;
    inline-size: 38%;
    color: var(--text-faint);
  }
}
/* Code-like labels (requestAnimationFrame) break only between words. */
.content-page .quick-table :is(th, td) { overflow-wrap: normal; word-break: normal; hyphens: manual; }

/* ── Featured numerals ─────────────────────────────────────────────── */
/* Where the number is the content (CPS ranges, latency costs, refresh
   rates, score milestones) it reads in the display face with tabular
   figures. Tables name their numeric columns in data-num; milestone lists
   carry data-num and lead each item with the figure in <strong>. */
.content-page .quick-table[data-num~="1"] td:nth-child(1),
.content-page .quick-table[data-num~="2"] td:nth-child(2),
.content-page .quick-table[data-num~="3"] td:nth-child(3),
.content-page .quick-table[data-num~="4"] td:nth-child(4) {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}
.content-page ul[data-num] { padding-inline-start: 0; list-style: none; }
.content-page ul[data-num] > li {
  position: relative;
  padding-block: var(--space-3);
  padding-inline-start: 7rem;
  border-block-end: 1px solid var(--border);
}
.content-page ul[data-num] > li:first-child { border-block-start: 1px solid var(--border); }
.content-page ul[data-num] > li > strong:first-child {
  position: absolute;
  inset-block-start: calc(var(--space-3) + 0.15em);
  inset-inline-start: 0;
  max-inline-size: 6.5rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1;
  padding-block-start: 0.1em;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
@media (max-width: 479px) {
  .content-page ul[data-num] > li { padding-inline-start: 0; }
  .content-page ul[data-num] > li > strong:first-child { position: static; display: block; max-inline-size: none; margin-block-end: var(--space-1); }
}

/* ── Note ──────────────────────────────────────────────────────────── */
/* A recessed well (Hull inside the Deck 1 panel), never a nested card;
   the accent is one small marker before its label. */
.content-page .article-note {
  margin-block: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  font-size: var(--step-0);
}
.content-page .article-note > strong:first-child {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text);
  font-weight: 600;
}
.content-page .article-note > strong:first-child::before {
  content: '';
  flex: none;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.content-page .article-note > * + * { margin-block-start: var(--space-2); }
.content-page .article-note > :last-child { margin-block-end: 0; }

/* ── Contents ──────────────────────────────────────────────────────── */
.content-page > .article-toc { margin-block: var(--space-6); }
.article-toc-details {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
}
.article-toc-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-block-size: var(--tap);
  padding-inline: var(--space-4);
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius-md);
}
.article-toc-details > summary::-webkit-details-marker { display: none; }
.article-toc-details > summary::after {
  content: '';
  flex: none;
  inline-size: 0.5em;
  block-size: 0.5em;
  margin-block-start: -0.25em;
  /* Physical sides on purpose: the rotation is physical, so logical
     borders would turn the chevron sideways in RTL. */
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform var(--dur-med) var(--ease);
}
.article-toc-details[open] > summary::after { transform: translateY(0.2em) rotate(-135deg); }
.article-toc-details > summary:hover { background: var(--surface-1); }
.article-toc-sub {
  margin: 0;
  padding: 0 var(--space-4) var(--space-3);
  color: var(--text-faint);
  font-size: var(--step--1);
  line-height: 1.4;
}
.article-toc-list {
  margin: 0;
  padding: 0 var(--space-4) var(--space-3);
  list-style: none;
  border-block-start: 1px solid var(--border);
}
.article-toc-list > li + li { margin: 0; }
.content-page .article-toc-list > li::marker { content: none; }
.content-page .article-toc-list a {
  display: flex;
  align-items: center;
  min-block-size: var(--tap);
  padding-block: var(--space-2);
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.35;
  text-decoration: none;
}
.article-toc-list > li + li > a { border-block-start: 1px solid var(--border); }
.content-page .article-toc-list a:hover,
.content-page .article-toc-list a[aria-current="true"] { color: var(--text); }

@media (min-width: 1080px) {
  /* Two columns inside the 1120 container: the 32em (Russian 37em) text column and a
     contents rail that stays pinned under the header while you read. */
  main > .content-page:has(> .article-toc) {
    max-inline-size: var(--container);
    display: grid;
    grid-template-columns: minmax(0, var(--measure)) minmax(13rem, 1fr);
    column-gap: var(--space-9);
    row-gap: 0;
    align-items: start;
  }
  main > .content-page:has(> .article-toc) > * { grid-column: 1; }
  main > .content-page:has(> .article-toc) > .content-meta { grid-column: 1 / -1; }
  main > .content-page > .article-toc {
    grid-column: 2;
    grid-row: 2 / span 120;
    position: sticky;
    inset-block-start: calc(var(--header-stuck) + var(--space-6));
    margin: 0;
  }
  .article-toc-details { border: 0; background: none; }
  .article-toc-details::details-content { content-visibility: visible; block-size: auto; }
  .article-toc-details > summary {
    min-block-size: 0;
    padding: 0 0 var(--space-3);
    pointer-events: none;
    cursor: default;
  }
  .article-toc-details > summary::after { display: none; }
  .article-toc-sub { padding: 0 0 var(--space-3); }
  .article-toc-list {
    padding: 0;
    border-block-start: 0;
    border-inline-start: 1px solid var(--border);
  }
  .article-toc-list > li + li > a { border-block-start: 0; }
  .content-page .article-toc-list a {
    min-block-size: 40px;
    margin-inline-start: -1px;
    padding-inline-start: var(--space-4);
    border-inline-start: 1px solid transparent;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  .content-page .article-toc-list a:hover { border-inline-start-color: var(--border-control); }
  .content-page .article-toc-list a[aria-current="true"] { border-inline-start-color: var(--accent); }
}

/* ── Sources ───────────────────────────────────────────────────────── */
.content-page .source-list {
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border);
  color: var(--text-faint);
  font-size: var(--step--1);
  line-height: 1.6;
}
.content-page ul.source-list,
.content-page ol.source-list { padding-inline-start: 1.2em; }
.content-page .source-list a { overflow-wrap: anywhere; }

/* ── Quick play: the tool this article is about, one tap away ──────── */
.content-page > .article-quick-play,
.content-page .article-quick-play {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-strong);
  border-block-start-color: var(--accent);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(var(--accent), var(--accent)) top / 100% 2px no-repeat padding-box,
    var(--surface-2);
  box-shadow: var(--shadow-1);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.article-quick-play:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong));
  border-block-start-color: var(--accent);
  box-shadow: var(--shadow-2);
  color: var(--text);
}
.article-quick-play-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-inline-size: 0;
  font-size: var(--step-0);
  line-height: 1.3;
}
.article-quick-play-title > i {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--tap);
  block-size: var(--tap);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  color: var(--accent);
  font-size: 1.1em;
}
.article-quick-play-title > strong { color: var(--text); font-weight: 600; }
.article-quick-play-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--tap);
  padding-inline: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease);
}
.article-quick-play:hover .article-quick-play-action { background: color-mix(in srgb, var(--accent) 86%, white); }
.article-quick-play-action > i { transition: transform var(--dur-med) var(--ease); }
.article-quick-play:hover .article-quick-play-action > i { transform: translateX(3px); }
[dir="rtl"] .article-quick-play-action > i { transform: scaleX(-1); }
[dir="rtl"] .article-quick-play:hover .article-quick-play-action > i { transform: scaleX(-1) translateX(3px); }
@media (max-width: 479.98px) {
  .article-quick-play-action { flex: 1 1 100%; }
}

/* ── Closing call to action ────────────────────────────────────────── */
.content-page > .blog-cta-box {
  margin-block-start: var(--space-8);
  padding-block: var(--space-5);
  border-block: 1px solid var(--border);
}
.blog-cta-box > p { text-wrap: balance; }
.blog-cta-box .glow-btn[data-accent] { background: var(--accent); color: var(--accent-ink); }
.blog-cta-box .glow-btn[data-accent]:hover {
  background: color-mix(in srgb, var(--accent) 86%, white);
  box-shadow: var(--shadow-2);
}

/* ── Reading progress (scroll-driven, no script) ───────────────────── */
@supports (animation-timeline: scroll()) {
  main > .content-page::before {
    content: '';
    position: fixed;
    inset-inline: 0;
    inset-block-start: var(--header-stuck);
    z-index: calc(var(--z-header) - 1);
    block-size: 2px;
    background: var(--accent);
    transform-origin: 0 50%;
    transform: scaleX(0);
    pointer-events: none;
    animation: article-progress linear both;
    animation-timeline: scroll(root block);
  }
  [dir="rtl"] main > .content-page::before { transform-origin: 100% 50%; }
}
@keyframes article-progress { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .article-quick-play-action > i,
  .article-toc-details > summary::after { transition: none; }
  .article-quick-play:hover .article-quick-play-action > i { transform: none; }
  [dir="rtl"] .article-quick-play:hover .article-quick-play-action > i { transform: scaleX(-1); }
}

@media print {
  main > .content-page::before, .article-toc { display: none; }
}

/* Block margins never stack across a section boundary (sections are grid
   items in the two-column layout, where margins do not collapse). */
.content-page > section:not(.blog-related) > :first-child { margin-block-start: 0; }
.content-page > section:not(.blog-related) > :last-child { margin-block-end: 0; }
/* Long localized CTA labels wrap inside the button instead of pushing the page sideways. */
.blog-cta-box .glow-btn { max-inline-size: 100%; white-space: normal; text-wrap: balance; }

/* A reading desk: open prose, one useful action, and a quiet contents rail. */
main > .content-page[data-article-enhanced] {
  border: 0; border-radius: 0; box-shadow: none; background: none;
  margin-block-start: var(--space-6); padding-block: 0 var(--space-8);
}
.content-page[data-article-enhanced] > .content-meta { margin-block-start: 0; padding-block-end: var(--space-3); border-block-end: 1px solid var(--border); }
.content-page[data-article-enhanced] > .lead { margin-block-start: 0; font-size: var(--step-1); line-height: 1.65; }
.content-page[data-article-enhanced] > .article-quick-play {
  margin-block: var(--space-5) var(--space-6); padding: var(--space-4) 0;
  border: 0; border-block: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 0; box-shadow: none;
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent);
}
.content-page[data-article-enhanced] .article-quick-play-title { padding-inline-start: var(--space-3); }
.content-page[data-article-enhanced] .article-quick-play-title > i { background: none; border-radius: 0; }
.content-page[data-article-enhanced] .article-quick-play-action { white-space: normal; text-align: center; flex-shrink: 0; max-inline-size: 100%; }
.content-page[data-article-enhanced] :is(h2,h3) { scroll-margin-block-start: calc(var(--header-stuck) + var(--space-5)); }
.content-page[data-article-enhanced] .article-note { border: 0; border-block: 1px solid var(--border-strong); border-radius: 0; background: color-mix(in srgb, var(--primary) 6%, transparent); }
.content-page[data-article-enhanced] .article-toc-details { border-inline: 0; border-radius: 0; background: none; }
.article-wayfinding { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-block-start: var(--space-8); padding-block-start: var(--space-4); border-block-start: 1px solid var(--border-strong); }
.article-wayfinding a { display: inline-flex; align-items: center; min-block-size: var(--tap); color: var(--primary); font-weight: 600; text-underline-offset: .25em; }
@media (min-width: 1080px) {
  main > .content-page[data-article-enhanced] > .article-toc { grid-row: 2 / span 200; padding-inline-start: var(--space-4); }
}
@media (max-width: 600px) {
  main > .content-page[data-article-enhanced] { padding-inline: 0; }
  .content-page[data-article-enhanced] .article-quick-play { gap: var(--space-3); }
  .content-page[data-article-enhanced] .article-quick-play-title { padding-inline: 0; }
  .content-page[data-article-enhanced] .article-quick-play-action { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  main > .content-page::before { animation: none; display: none; }
}

/* Shared colored chapters own the surface and spacing, including older flat H2 articles. */
main > .content-page[data-reading-chapters] > .reading-card { margin-block-start: var(--space-6); }
@media (min-width: 1080px) {
  main > .content-page[data-reading-chapters]:has(> .article-toc) {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem);
    column-gap: var(--space-7);
  }
}