/* Re-fingerprinted 2026-07-30 after a cache-poisoning incident: with no
   404.html, Cloudflare Pages answered a missing /assets/* path with the home
   page at HTTP 200, and _headers stamped that response immutable for a year.
   src/404.njk fixes the cause, `immutable` is gone from _headers, and new
   filenames escape the pinned entries. */
/* Guides, scenarios, comparisons and section hubs.
   Loaded only on those routes, so the seeded home page carries none of it.
   Every value here comes from the tokens in site.css: no new accent, no new
   radii, no new shadows. */

.article,
.hub {
  padding-block-end: clamp(48px, 7vw, 96px);
}

/* ---------- Breadcrumb ---------- */

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0 0 clamp(20px, 3vw, 32px);
  list-style: none;
  font-size: 0.84rem;
  color: var(--text-tertiary);
}

.breadcrumb li + li::before {
  content: "/";
  margin-inline-end: 8px;
  color: var(--border-strong);
}

.breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--seed-harmony);
}

.breadcrumb [aria-current="page"] {
  color: var(--text-tertiary);
}

/* ---------- The direct answer ----------
   First thing after the headline, and the one block on the page that is allowed
   to look like a readout. */

.answer-block {
  margin-block-start: clamp(24px, 3.5vw, 36px);
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--border-seeded);
  border-radius: var(--radius-feature);
  background: var(--surface-panel);
  box-shadow: var(--shadow-panel);
}

.answer-question {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 88, "wght" 680;
  color: var(--seed-harmony);
  margin-block-end: 12px;
  transition: color 620ms var(--ease-instrument);
}

.answer-body {
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.3rem);
  color: var(--text-primary);
  max-width: 62ch;
}

/* ---------- Article prose ---------- */

.article h2 {
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
  margin-block-start: clamp(44px, 6vw, 68px);
  scroll-margin-top: 112px;
}

.article h3 {
  font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.28rem);
  font-variation-settings: "wdth" 98, "wght" 640;
  letter-spacing: -0.01em;
  margin-block-start: 32px;
  scroll-margin-top: 112px;
}

.article-body p,
.article-body li {
  color: var(--text-secondary);
}

.article-body > p {
  margin-block-start: 18px;
  max-width: 74ch;
}

.article-body ul,
.article-body ol {
  margin-block-start: 20px;
  padding-left: 22px;
  display: grid;
  gap: 10px;
  max-width: 74ch;
}

.article-body ol {
  list-style: decimal;
}

.article-body li > strong,
.article-body p > strong {
  color: var(--text-primary);
  font-variation-settings: "wght" 640;
}

.article-body a {
  color: var(--seed-harmony);
  text-decoration-color: color-mix(in oklch, var(--seed-harmony) 40%, transparent);
  text-underline-offset: 3px;
  transition: color 620ms var(--ease-instrument);
}

.article-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-inset);
  color: var(--text-primary);
}

.article-body blockquote {
  margin-block-start: 24px;
  padding-left: 18px;
  border-left: 2px solid var(--border-seeded);
  color: var(--text-secondary);
}

/* ---------- Tables ----------
   Wide tables scroll inside their own container: the page body never scrolls
   sideways, and a threshold table on a phone is common here. */

.table-scroll {
  margin-block-start: var(--gap-panel);
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  background: var(--surface-panel);
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.article-body caption {
  caption-side: bottom;
  padding: 12px 18px 16px;
  color: var(--text-tertiary);
  font-size: 0.86rem;
  text-align: left;
}

.article-body th,
.article-body td {
  padding: 12px 18px;
  text-align: left;
  border-block-end: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.article-body thead th {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 90, "wght" 680;
  color: var(--text-tertiary);
  background: var(--surface-panel-high);
}

.article-body tbody th {
  color: var(--text-primary);
  font-variation-settings: "wght" 620;
}

.article-body td {
  color: var(--text-secondary);
}

.article-body tbody tr:last-child th,
.article-body tbody tr:last-child td {
  border-block-end: 0;
}

/* ---------- Figures and diagrams ---------- */

.article-body figure {
  margin: var(--gap-panel) 0 0;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  background: var(--surface-panel);
}

.article-body figure svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.article-body figcaption {
  margin-block-start: 16px;
  color: var(--text-tertiary);
  font-size: 0.88rem;
}

/* ---------- Callout ---------- */

.callout {
  margin-block-start: var(--gap-panel);
  padding: 20px 22px;
  border: 1px solid var(--border-seeded);
  border-radius: var(--radius-panel);
  background: var(--surface-inset);
  display: grid;
  gap: 8px;
}

.callout strong {
  color: var(--text-primary);
  font-variation-settings: "wdth" 96, "wght" 700;
}

.callout p {
  color: var(--text-secondary);
  margin: 0;
}

/* ---------- Product connection ---------- */

.product-cta {
  margin-block-start: var(--gap-panel);
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--border-seeded);
  border-radius: var(--radius-feature);
  background: var(--surface-panel-high);
  display: grid;
  gap: 14px;
  justify-items: start;
}

.product-cta h2 {
  margin-block-start: 0;
  font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.65rem);
}

.product-cta p {
  color: var(--text-secondary);
  max-width: 60ch;
}

.product-cta .attribution {
  color: var(--text-tertiary);
  font-size: 0.82rem;
}

/* ---------- Related and hub lists ---------- */

.related-list,
.hub-list {
  margin-block-start: var(--gap-panel);
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  overflow: hidden;
}

.related-list a,
.hub-list a {
  display: grid;
  gap: 6px;
  padding: 20px 22px;
  min-height: 44px;
  background: var(--surface-panel);
  text-decoration: none;
  transition: background 180ms var(--ease-instrument);
}

.related-list a:hover,
.hub-list a:hover {
  background: var(--surface-panel-high);
}

.related-list strong,
.hub-list strong {
  color: var(--text-primary);
  font-variation-settings: "wdth" 96, "wght" 660;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
}

.related-list span,
.hub-list span {
  color: var(--text-secondary);
  font-size: 0.94rem;
}

.hub-empty {
  margin-block-start: var(--gap-panel);
  color: var(--text-tertiary);
}

.hub h2 {
  margin-block-start: clamp(44px, 6vw, 68px);
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
}

/* ---------- Small screens ---------- */

@media (max-width: 720px) {
  .article-body th,
  .article-body td {
    padding: 10px 14px;
  }

  .related-list a,
  .hub-list a {
    padding: 16px 18px;
  }
}