/* The public blog, guides and changelog. This reproduces the homepage's visual language (apps/web/src/HomePage.tsx,
   its CSS string): theme.test.ts fails when a --home-* token here drifts from the homepage's value. Light only, like
   the homepage. */
:root {
  --home-bg: hsl(48 45% 97%);
  --home-paper: hsl(44 48% 98%);
  --home-paper-2: hsl(72 46% 97%);
  --home-display: "Instrument Serif", Georgia, "Times New Roman", ui-serif, serif;
  --home-ink: hsl(219 43% 11%);
  --home-muted: hsl(219 14% 38%);
  --home-line: rgba(112, 125, 52, 0.18);
  --home-line-strong: rgba(112, 125, 52, 0.32);
  --home-olive: hsl(74 72% 34%);
  --home-olive-dark: hsl(75 78% 24%);
  --home-sage: hsl(73 45% 91%);
  --home-clay: hsl(36 38% 84%);
  --home-white: hsl(0 0% 100%);
  --site-body-text: hsl(219 22% 20%);
  --site-link-text: hsl(219 20% 29%);
  --site-meta-text: hsl(219 13% 38%);
  --site-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

*, ::before, ::after { box-sizing: border-box; }
html { background-color: var(--home-bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:where(h1, h2, h3, h4, p, figure, blockquote, ol, ul, pre) { margin: 0; }
:where(img, svg) { display: block; }
img { max-width: 100%; height: auto; }
:where(a) { color: inherit; text-decoration: none; }

/* The homepage's page background and grid. The body is its own stacking context so the fixed grid paints above the
   body's gradient but below the content, where it cannot touch reading text. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 5%, rgba(133, 153, 62, 0.1), transparent 34%),
    linear-gradient(180deg, var(--home-bg), hsl(48 36% 96%) 58%, hsl(48 42% 98%));
  background-color: var(--home-bg);
  color: var(--home-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(112, 125, 52, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112, 125, 52, 0.035) 1px, transparent 1px),
    radial-gradient(rgba(18, 26, 42, 0.045) 0.7px, transparent 0.7px);
  background-size: 48px 48px, 48px 48px, 7px 7px;
}

main { flex: 1 0 auto; }
main:focus { outline: none; }
:focus-visible { outline: 2px solid hsl(75 78% 24%); outline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--home-olive); outline-offset: 3px; }

.site-skip {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--home-ink);
  color: var(--home-white);
  font-size: 14px;
  font-weight: 650;
}

.site-skip:focus { top: 12px; }

.site-container {
  width: min(1240px, calc(100% - 56px));
  margin: 0 auto;
}

.site-icon { flex: 0 0 auto; width: 16px; height: 16px; }

/* Header and footer: HomeV2Nav and HomeV2Footer. */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid rgba(112, 125, 52, 0.14);
  background: rgba(252, 251, 244, 0.88);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.site-nav-inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-brand,
.site-footer-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--home-ink);
}

.site-brand img { width: 142px; height: auto; }
.site-footer-brand img { width: 112px; height: auto; }

.site-nav-links,
.site-nav-actions {
  display: flex;
  align-items: center;
}

.site-nav-links { gap: 28px; }
.site-nav-actions { gap: 16px; }

.site-nav-links a,
.site-nav-actions .site-text-link {
  color: var(--site-link-text);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

.site-nav-links a:hover,
.site-nav-actions .site-text-link:hover { color: var(--home-olive-dark); }

.site-nav-links a[aria-current="page"] {
  color: var(--home-olive-dark);
  text-decoration: underline;
  text-decoration-color: var(--home-olive);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.site-nav-cta {
  padding: 8px 16px;
  border-radius: 8px;
  background: hsl(72 73% 37%);
  color: hsl(66 60% 5%);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 150ms linear;
}

.site-nav-cta:hover { background: hsl(72 78% 57%); }

.site-footer {
  border-top: 1px solid rgba(112, 125, 52, 0.13);
  padding: 22px 0 28px;
  background: rgba(252, 251, 244, 0.58);
}

.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-footer-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 18px;
}

.site-footer-links a {
  color: var(--site-meta-text);
  font-size: 12px;
  font-weight: 680;
}

.site-footer-links a:hover { color: var(--home-olive-dark); }

/* Buttons and links: .home-v2-primary, .home-v2-secondary and .home-v2-section-links. */
.site-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}

.site-primary,
.site-secondary {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 760;
  transition: background 180ms linear, border-color 180ms linear, color 180ms linear, box-shadow 180ms linear, transform 180ms linear;
}

.site-primary {
  padding: 0 22px;
  border: 1px solid var(--home-olive-dark);
  background: var(--home-olive);
  color: hsl(48 50% 98%);
  box-shadow: 0 14px 34px rgba(90, 112, 25, 0.24);
}

.site-primary:hover {
  background: var(--home-olive-dark);
  color: hsl(48 55% 99%);
  transform: translateY(-1px);
}

.site-secondary {
  padding: 0 20px;
  border: 1px solid rgba(112, 125, 52, 0.22);
  background: rgba(255, 255, 255, 0.76);
  color: var(--home-ink);
}

.site-secondary:hover {
  border-color: var(--home-line-strong);
  color: var(--home-olive-dark);
}

.site-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--site-link-text);
  font-size: 13px;
  font-weight: 650;
}

.site-text-link:hover { color: var(--home-olive-dark); }

.site-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--home-olive-dark);
  font-size: 13px;
  font-weight: 780;
  white-space: nowrap;
}

.site-more:hover { color: var(--home-ink); }

/* Kicker, eyebrow, badges: .home-v2-kicker, .home-v2-eyebrow, .home-v2-pricing-badge. */
.site-kicker,
.site-eyebrow,
.site-toc-title {
  color: var(--home-olive-dark);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.site-eyebrow {
  width: fit-content;
  max-width: 100%;
  margin-bottom: 24px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(218, 229, 182, 0.66);
}

.site-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  border: 1px solid rgba(112, 125, 52, 0.2);
  border-radius: 999px;
  background: rgba(226, 232, 196, 0.58);
  color: var(--home-olive-dark);
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: uppercase;
}

.site-badge-draft {
  border-color: hsl(30 32% 66%);
  background: var(--home-clay);
  color: hsl(28 42% 22%);
}

.site-draft-banner {
  margin-top: 20px;
  padding: 12px 16px;
  border: 1px solid hsl(30 32% 66%);
  border-radius: 12px;
  background: var(--home-clay);
  color: hsl(28 40% 16%);
  font-size: 14px;
  line-height: 1.5;
}

.site-draft-banner strong { font-weight: 800; }

.site-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.site-breadcrumb li { display: inline-flex; align-items: center; }
.site-breadcrumb a { color: var(--site-meta-text); }
.site-breadcrumb li:last-child a { color: var(--home-olive-dark); }
.site-breadcrumb a:hover { color: var(--home-ink); }
.site-breadcrumb-sep { margin: 0 8px; color: var(--home-muted); }

/* Page hero: .home-v2-hero without the diagram. */
.site-hero {
  border-bottom: 1px solid rgba(112, 125, 52, 0.13);
  padding: 52px 0 40px;
}

.site-hero h1,
.site-article-header h1,
.site-section-header h2,
.site-closing h2,
.site-release-main h2,
.site-card-title {
  font-family: var(--home-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--home-ink);
}

.site-hero .site-breadcrumb { margin-bottom: 14px; }

.site-hero h1 {
  max-width: 820px;
  font-size: clamp(40px, 3.7vw, 56px);
  line-height: 1.02;
  text-wrap: balance;
}

.site-lede {
  max-width: 640px;
  margin-top: 20px;
  color: var(--site-body-text);
  font-size: 17px;
  line-height: 1.58;
}

.site-hero-links { margin-top: 18px; }
.site-not-found { padding: 72px 0 80px; border-bottom: 0; }

/* Sections: .home-v2-section and .home-v2-section-header. */
.site-section {
  border-bottom: 1px solid rgba(112, 125, 52, 0.13);
  padding: 42px 0;
}

.site-section-white {
  background: var(--home-white);
  border-top: 1px solid var(--home-line);
}

.site-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 32px;
  margin: 0 0 28px;
}

.site-section-header h2 {
  max-width: 900px;
  margin-top: 8px;
  font-size: clamp(32px, 3.3vw, 48px);
  line-height: 1.08;
}

.site-section-header p:not(.site-kicker) {
  max-width: 760px;
  margin-top: 14px;
  color: var(--home-muted);
  font-size: 16px;
  line-height: 1.62;
}

/* Cards: .home-v2-card's border, radius and paper, with the pricing cards' lift on hover. The title link covers the
   whole card, so one tab stop opens the post. */
.site-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-card-grid-single { grid-template-columns: minmax(0, 760px); }

.site-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--home-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
  padding: 24px;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.site-section-white .site-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(250, 249, 239, 0.7)),
    var(--home-paper);
}

.site-card:hover {
  border-color: var(--home-line-strong);
  box-shadow: 0 22px 52px rgba(18, 26, 42, 0.08);
  transform: translateY(-2px);
}

.site-card-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--home-olive-dark);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-card-title {
  font-size: 26px;
  line-height: 1.12;
  text-wrap: balance;
}

.site-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
}

.site-card:hover .site-card-link { color: var(--home-olive-dark); }

@supports selector(:has(a)) {
  .site-card-link:focus-visible { outline: none; }
  .site-card:has(.site-card-link:focus-visible) { outline: 2px solid var(--home-olive); outline-offset: 3px; }
}

.site-card-description {
  color: var(--home-muted);
  font-size: 14px;
  line-height: 1.55;
}

.site-card-meta,
.site-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: var(--site-meta-text);
  font-weight: 650;
}

.site-card-meta {
  margin-top: auto;
  padding-top: 6px;
  font-size: 12px;
}

/* The separator is decoration: the second content value gives it empty alternative text where supported. */
.site-meta-item + .site-meta-item::before {
  content: "·";
  content: "·" / "";
  margin: 0 8px;
}

.site-empty {
  max-width: 760px;
  border: 1px dashed rgba(112, 125, 52, 0.34);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.5);
  padding: 24px 28px;
  color: var(--home-muted);
  font-size: 15px;
  line-height: 1.6;
}

.site-empty a {
  color: var(--home-olive-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-back { margin-top: 32px; }

/* Post page. */
.site-article-top { padding-top: 40px; }
.site-article { padding: 14px 0 56px; }
.site-article-header { max-width: 820px; }

.site-article-header h1 {
  font-size: clamp(38px, 3.6vw, 54px);
  line-height: 1.05;
  text-wrap: balance;
}

.site-meta {
  margin-top: 18px;
  font-size: 13px;
}

.site-figure img {
  width: 100%;
  border: 1px solid var(--home-line);
  border-radius: 16px;
  background: var(--home-paper);
}

.site-hero-figure {
  max-width: 1040px;
  margin-top: 32px;
}

.site-article-body {
  max-width: 1040px;
  margin-top: 40px;
}

.site-has-toc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 56px;
  align-items: start;
}

.site-has-toc .site-toc { grid-column: 2; grid-row: 1; position: sticky; top: 104px; }
.site-has-toc .site-prose { grid-column: 1; grid-row: 1; }

.site-toc {
  border-left: 1px solid var(--home-line-strong);
  padding: 2px 0 2px 18px;
}

.site-toc ol {
  display: grid;
  gap: 9px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.site-toc ol ol { margin-top: 9px; padding-left: 12px; }

.site-toc a {
  color: var(--site-link-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.site-toc a:hover { color: var(--home-olive-dark); }

/* Prose: rendered Markdown, about 68 characters to the line. */
.site-prose {
  max-width: 68ch;
  min-width: 0;
  color: var(--site-body-text);
  font-size: 17px;
  line-height: 1.7;
  overflow-wrap: break-word;
}

.site-prose > * + * { margin-top: 1.15em; }

.site-prose h2 {
  margin-top: 1.9em;
  color: var(--home-ink);
  font-family: var(--home-display);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.site-prose h3 {
  margin-top: 1.7em;
  color: var(--home-ink);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.site-prose > :first-child { margin-top: 0; }
.site-prose :is(h2, h3) + * { margin-top: 0.6em; }
.site-prose :is(h2, h3)[id] { scroll-margin-top: 96px; }

.site-prose a {
  color: var(--home-olive-dark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(112, 125, 52, 0.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.site-prose a:hover { text-decoration-color: currentColor; }
.site-prose strong { color: var(--home-ink); font-weight: 700; }

.site-prose ul,
.site-prose ol { padding-left: 1.4em; }
.site-prose ul { list-style: disc; }
.site-prose ol { list-style: decimal; }
.site-prose li + li,
.site-prose li > :is(ul, ol, p) { margin-top: 0.45em; }
.site-prose li::marker { color: var(--home-olive-dark); }

.site-prose blockquote {
  border-left: 2px solid var(--home-olive);
  padding: 2px 0 2px 22px;
  color: var(--home-ink);
  font-family: var(--home-display);
  font-size: 22px;
  line-height: 1.45;
}

.site-prose blockquote > * + * { margin-top: 0.7em; }

.site-prose code {
  border: 1px solid var(--home-line);
  border-radius: 6px;
  background: var(--home-sage);
  padding: 0.1em 0.38em;
  color: var(--home-ink);
  font-family: var(--site-mono);
  font-size: 0.86em;
}

.site-prose pre {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--home-line-strong);
  border-radius: 12px;
  background: var(--home-paper);
  padding: 18px 20px;
  font-size: 14px;
  line-height: 1.65;
  tab-size: 2;
}

.site-prose pre code {
  border: 0;
  background: none;
  padding: 0;
  font-size: inherit;
  white-space: pre;
  overflow-wrap: normal;
}

/* A wide table scrolls inside itself, never the page. A .site-table wrapper, if the renderer adds one, scrolls instead. */
.site-prose table,
.site-prose .site-table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
}

.site-prose table { border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.site-prose .site-table table { display: table; width: auto; max-width: none; overflow: visible; }

.site-prose th,
.site-prose td {
  border-bottom: 1px solid var(--home-line);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}

.site-prose th {
  border-bottom-color: var(--home-line-strong);
  background: var(--home-paper-2);
  color: var(--home-ink);
  font-weight: 700;
}

.site-prose hr {
  margin: 2.4em 0;
  border: 0;
  border-top: 1px solid var(--home-line-strong);
}

.site-prose figure { margin: 2em 0; }
.site-prose figure img { width: 100%; border: 1px solid var(--home-line); border-radius: 14px; background: var(--home-paper); }

.site-prose figcaption {
  margin-top: 10px;
  color: var(--home-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* Closing block: .home-v2-final-box, smaller and without the illustration. */
.site-closing-section { border-bottom: 0; padding: 36px 0 70px; }

.site-closing {
  border: 1px solid var(--home-line);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(252, 250, 240, 0.7)),
    radial-gradient(circle at 50% 16%, rgba(112, 125, 52, 0.14), transparent 34%),
    radial-gradient(circle at 14% 78%, rgba(112, 125, 52, 0.12), transparent 28%),
    radial-gradient(circle at 88% 74%, rgba(112, 125, 52, 0.12), transparent 30%),
    var(--home-paper);
  padding: 44px;
  display: grid;
  justify-items: center;
  text-align: center;
}

.site-closing h2 {
  max-width: 640px;
  margin-top: 10px;
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 1.1;
}

.site-closing p:not(.site-kicker) {
  max-width: 600px;
  margin-top: 14px;
  color: var(--home-muted);
  font-size: 15px;
  line-height: 1.62;
}

.site-closing .site-cta-row { justify-content: center; }

/* Changelog. */
.site-release {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 40px;
  padding: 40px 0;
  border-top: 1px solid var(--home-line);
  scroll-margin-top: 88px;
}

.site-release:first-child { border-top: 0; padding-top: 8px; }
.site-release:last-child { padding-bottom: 8px; }

.site-release-aside {
  position: sticky;
  top: 104px;
  align-self: start;
  display: grid;
  justify-items: start;
  gap: 10px;
}

.site-release-date {
  color: var(--site-meta-text);
  font-size: 13px;
  font-weight: 650;
}

.site-release-main { min-width: 0; }
.site-release-main .site-draft-banner { margin: 0 0 18px; }

.site-release-main h2 {
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.1;
}

.site-release-main h2 a:hover { color: var(--home-olive-dark); }
.site-release-figure { max-width: 68ch; margin-top: 24px; }
.site-release-main .site-prose { margin-top: 20px; }

/* A release body's own headings sit under the release title, so they step down a level in size. */
.site-release-main .site-prose h2 {
  margin-top: 1.7em;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.site-release-main .site-prose h3 { margin-top: 1.5em; font-size: 17px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .site-card:hover, .site-primary:hover { transform: none; }
}

@media (max-width: 1120px) {
  .site-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-card-grid-single { grid-template-columns: minmax(0, 760px); }
  .site-has-toc { display: block; }

  .site-has-toc .site-toc {
    position: static;
    max-width: 68ch;
    margin-bottom: 36px;
    border: 1px solid var(--home-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.62);
    padding: 18px 20px;
  }
}

@media (max-width: 900px) {
  .site-nav-links .site-nav-home { display: none; }
}

/* Phones: 16px gutters. The header gives up stickiness for two rows (logo and actions, then Blog and Changelog), so
   a long read keeps the screen. */
@media (max-width: 760px) {
  .site-container { width: min(100% - 32px, 1240px); }
  .site-nav { position: static; }
  .site-nav-inner { flex-wrap: wrap; min-height: 0; padding-top: 12px; gap: 4px 12px; }
  .site-brand img { width: 120px; }
  .site-nav-links { order: 3; width: 100%; gap: 22px; padding: 2px 0 10px; }
  .site-nav-links a { display: inline-flex; align-items: center; min-height: 32px; }
  .site-nav-links a[aria-current="page"] { text-underline-offset: 6px; }
  .site-nav-actions { gap: 14px; }
  .site-hero { padding: 34px 0 28px; }
  .site-hero h1 { font-size: clamp(38px, 11vw, 48px); line-height: 1.04; }
  .site-article-header h1 { font-size: clamp(34px, 9.5vw, 44px); line-height: 1.06; }
  .site-lede { margin-top: 16px; font-size: 16px; }
  .site-not-found { padding: 48px 0 56px; }
  .site-section { padding: 34px 0; }
  .site-section-header { flex-direction: column; align-items: flex-start; margin-bottom: 22px; }
  .site-section-header h2 { font-size: clamp(30px, 8.5vw, 40px); }
  .site-card-grid, .site-card-grid-single { grid-template-columns: 1fr; }
  .site-card { padding: 20px; }
  .site-article-top { padding-top: 28px; }
  .site-article { padding-bottom: 40px; }
  .site-hero-figure { margin-top: 24px; }
  .site-article-body { margin-top: 28px; }
  .site-prose h2 { font-size: 28px; }
  .site-prose pre { padding: 14px 16px; font-size: 13px; }
  .site-closing { padding: 32px 20px; }
  .site-release { grid-template-columns: 1fr; gap: 14px; padding: 32px 0; }
  .site-release-aside { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
  .site-footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .site-footer-links { justify-content: flex-start; gap: 14px 18px; }
}

@media (pointer: coarse) {
  .site-nav-actions .site-text-link, .site-nav-cta { min-height: 44px; display: inline-flex; align-items: center; }
  .site-footer-links a { display: inline-flex; align-items: center; min-height: 32px; }
}

@media print {
  body::before, .site-nav, .site-footer, .site-closing-section, .site-skip { display: none; }
  body { background: none; }
}