/* Foundations and typography */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; scrollbar-color: var(--accent) var(--paper); }
body {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  background:
    linear-gradient(var(--background-grid) 1px, transparent 1px),
    var(--background);
  background-size: 100% var(--background-grid-size);
  color: var(--foreground);
}
.container {
  max-width: var(--layout-page-width);
  min-height: 100vh;
  padding: 0 var(--layout-page-padding);
}
.content { margin-top: var(--space-section); flex: 1; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font-family);
  letter-spacing: var(--heading-letter-spacing);
  text-wrap: balance;
}
h1 {
  max-width: var(--layout-reading-width);
  font-size: var(--heading-h1-font-size);
  font-weight: var(--heading-h1-font-weight);
  line-height: var(--heading-h1-line-height);
  margin: 12px 0 var(--space-medium);
}
h2 {
  max-width: var(--layout-reading-width);
  font-size: var(--heading-h2-font-size);
  font-weight: var(--heading-h2-font-weight);
  line-height: var(--heading-h2-line-height);
}
h3 { font-size: var(--heading-h3-font-size); font-weight: var(--heading-h3-font-weight); line-height: var(--heading-h3-line-height); }
h4 { font-size: var(--heading-h4-font-size); font-weight: var(--heading-h4-font-weight); line-height: var(--heading-h4-line-height); }
h5 { font-size: var(--heading-h5-font-size); font-weight: var(--heading-h5-font-weight); line-height: var(--heading-h5-line-height); }
h6 { font-size: var(--heading-h6-font-size); font-weight: var(--heading-h6-font-weight); line-height: var(--heading-h6-line-height); }
strong, b { font-weight: var(--body-strong-font-weight); }
p, ul, ol { margin-block: var(--paragraph-space); }
:where(.page-content, .page-intro) li + li { margin-top: var(--list-item-space); }
.eyebrow {
  color: var(--accent-strong);
  font-size: var(--eyebrow-font-size);
  font-weight: var(--label-font-weight);
  letter-spacing: var(--eyebrow-letter-spacing);
  line-height: var(--label-line-height);
  text-transform: uppercase;
}
.text-link { color: var(--foreground); font-weight: var(--body-strong-font-weight); text-underline-offset: 5px; }
a { text-underline-offset: 3px; }
:where(a, summary, button, input):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
code, kbd, pre, samp { font-family: var(--code-font-family) !important; font-size: var(--code-font-size) !important; line-height: var(--code-line-height); }
button, input, select, textarea { font-family: inherit; font-size: var(--control-font-size); line-height: var(--control-line-height); }
button { font-weight: var(--control-font-weight); }
.code-title, .copy-button { font-size: var(--control-font-size); line-height: var(--control-line-height); }

/* Navigation and language selector */
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  background: var(--background);
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-medium);
}
.navigation-menu { margin: 0; flex: 1; min-width: 0; }
.navigation-menu__inner { justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.navigation-menu a {
  color: var(--foreground);
  font-size: var(--navigation-font-size);
  font-weight: var(--navigation-font-weight);
  line-height: var(--control-line-height);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--navigation-letter-spacing);
}
.navigation-menu a:hover { color: var(--accent); }
.language-selector { position: relative; flex-shrink: 0; margin-left: auto; }
.language-selector summary { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; border: 1px solid var(--accent); color: var(--accent-strong); list-style: none; }
.language-selector summary::-webkit-details-marker { display: none; }
.language-options { position: absolute; right: 0; top: calc(100% + 8px); z-index: 100; width: max-content; max-width: min(280px, calc(100vw - 40px)); padding: 8px; background: var(--paper); border: 1px solid var(--line); font-size: var(--control-font-size); }
.language-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: 44px; color: var(--foreground); text-decoration: none; }
.language-option[aria-current] { color: var(--ink-muted); }
.language-option:hover, .language-selector summary:hover { background: var(--background); }
.language-options small { display: block; padding: 0 12px 10px; color: var(--ink-muted); }
.navigation-menu__inner > li:not(:last-of-type) { margin-right: 0; }
.navigation-menu__inner > li { margin-bottom: 0; }
.navigation-menu a[aria-current], .mobile-navigation a[aria-current] {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 6px;
}
.context-navigation { position: relative; flex-shrink: 0; }
.context-navigation > summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--accent);
  color: var(--accent-strong);
  cursor: pointer;
  font-size: var(--control-font-size);
  font-weight: var(--control-font-weight);
  list-style: none;
}
.context-navigation > summary::-webkit-details-marker { display: none; }
.context-navigation__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 100;
  width: max-content;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 40px));
  max-height: calc(100vh - 88px);
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.context-navigation__panel ul { margin: 0; padding-left: var(--space-medium); }
.context-navigation__panel :is(a, label, button) { display: block; padding: 9px 10px; color: var(--foreground); cursor: pointer; text-decoration: none; }
.context-navigation__panel button { width: 100%; border: 0; background: none; font: inherit; text-align: left; }
.context-navigation__panel :is(a, label, button):hover, .context-navigation__panel :is(a[aria-current], button[aria-pressed="true"]) { color: var(--accent); }
.context-navigation__panel > div { display: grid; }
.context-navigation__panel--toc { max-height: none; overflow: hidden; }
.context-navigation__scroll {
  max-height: calc(100vh - 88px);
  max-height: calc(100dvh - 88px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 28px;
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, black calc(100% - 28px), transparent);
}
.context-navigation__panel--toc a { padding: 5px 8px; line-height: var(--toc-line-height); }
.context-navigation__panel--toc li + li { margin-top: 0; }
.mobile-navigation { display: none; position: relative; flex-shrink: 0; }
.mobile-navigation summary { display: grid; width: 44px; height: 44px; place-items: center; cursor: pointer; border: 1px solid var(--accent); color: var(--accent-strong); list-style: none; }
.mobile-navigation summary::-webkit-details-marker { display: none; }
.mobile-navigation summary svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
.mobile-navigation nav {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: max-content;
  max-width: calc(100vw - 40px);
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--paper);
  z-index: 99;
}
.mobile-navigation ul { list-style: none; padding: 0; margin: 0; }
.mobile-navigation a { display: block; padding: 10px 12px; color: var(--foreground); text-decoration: none; }

/* Footer */
.footer { border-top: 1px solid var(--line); color: var(--ink-muted); opacity: 1; padding: 28px 0 40px; font-size: var(--meta-font-size); }
.footer a { color: var(--foreground); }
.footer .copyright--user { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px 28px; width: 100%; margin: 0; text-align: left; }
.footer .copyright > *:first-child:not(:only-child) { margin-right: 0; }
.footer .copyright span { white-space: normal; }
.footer .copyright > :nth-child(2) { text-align: center; }
.footer .copyright > :last-child { text-align: right; }

/* Page shell and article content */
.archive, .article, .blog-home {
  width: 100%;
  padding-bottom: var(--space-section);
  overflow-wrap: anywhere;
}
.page-header {
  padding-bottom: var(--space-section);
}
.page-header--compact { padding-bottom: 0; }
.page-header--compact + .article-layout .page-content { margin-top: 0; }
.page-intro,
.page-content--intro > p,
.blog-entry__summary {
  max-width: var(--layout-reading-width);
  color: var(--ink-muted);
  font-family: var(--intro-font-family);
  font-size: var(--intro-font-size);
  font-weight: var(--intro-font-weight);
  line-height: var(--intro-line-height);
  letter-spacing: var(--intro-letter-spacing);
}
.page-intro > :last-child { margin-bottom: 0; }
.page-content {
  min-width: 0;
  max-width: var(--layout-reading-width);
  margin: var(--space-section) 0 0;
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
}
.article-list-content { min-width: 0; max-width: var(--layout-reading-width); }
.article-rail { display: none; }
.author-card { display: grid; gap: var(--space-small); padding: var(--space-small); border: 1px solid var(--line); background: var(--paper); }
.author-card__identity { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "portrait eyebrow" "portrait name"; column-gap: 10px; align-items: center; }
.author-card .eyebrow { grid-area: eyebrow; margin: 0; }
.author-card__portrait-link { display: block; grid-area: portrait; }
.author-card__image { display: block; width: 44px; aspect-ratio: 1; margin: 0; padding: 0; border: 1px solid var(--accent); border-radius: 50%; background: var(--accent-muted); color: var(--accent-strong); object-fit: cover; }
.author-card__name { grid-area: name; margin: 0; font-family: var(--heading-font-family); font-size: var(--heading-h5-font-size); font-weight: var(--heading-h5-font-weight); line-height: var(--heading-h5-line-height); text-align: left; }
.author-card__name a { color: inherit; text-decoration: none; }
.author-card__name a:hover { color: var(--accent); }
.author-card--with-description { display: grid; grid-template-columns: minmax(96px, 2fr) minmax(0, 3fr); gap: var(--space-small); align-items: center; }
.author-card__article-description { margin: 0; padding-left: var(--space-small); border-left: 1px solid var(--line); color: var(--ink-muted); font-size: var(--meta-font-size); line-height: var(--caption-line-height); }
.author-card > .article-facts { grid-column: 1 / -1; max-width: none; margin: 0; }
.author-card + * { margin-top: var(--space-section); }
.article-toc { margin-top: 0; min-width: 0; }
.article-toc__title { margin: 0 0 8px; }
.article-toc a { display: block; padding: 5px 6px; color: var(--ink-muted); font-size: var(--meta-font-size); line-height: var(--toc-line-height); text-decoration: none; }
.article-toc a:is(:hover, :focus-visible) { border-radius: var(--border-radius); background: var(--accent-muted); color: var(--foreground); }
.article-toc li + li { margin-top: 0; }
:where(.article-toc, .context-navigation__panel--toc) .article-toc__links > ul { margin: 0; padding-left: 0; list-style: none; counter-reset: toc-section; }
:where(.article-toc, .context-navigation__panel--toc) .article-toc__links > ul > li { counter-increment: toc-section; }
:where(.article-toc, .context-navigation__panel--toc) .article-toc__links > ul > li > :is(a, button) { color: var(--foreground); font-weight: var(--body-font-weight); }
:where(.article-toc, .context-navigation__panel--toc) .article-toc__links > ul > li > :is(a, button)::before { content: counter(toc-section) ". "; color: var(--accent-strong); font-weight: var(--body-strong-font-weight); }
:where(.article-toc, .context-navigation__panel--toc) .article-toc__links ul ul { margin-left: 6px; padding-left: 6px; border-left: 1px solid var(--line); list-style: none; }
.page-header--description-in-card { padding-bottom: 0; }
.page-header--description-in-card .page-intro { display: none; }
.page-header__byline { display: none; }
.article-layout--with-toc > .page-content { margin-top: 0; }
@media (min-width: 1000px) {
  .header { padding-block: 14px; }
  .context-navigation--toc { display: none; }
  .context-navigation--focus { display: none; }
  .blog-home { display: grid; grid-template-columns: minmax(0, var(--layout-reading-width)) minmax(200px, 240px); column-gap: var(--space-section); }
  .blog-home > :is(.page-header, .page-content) { grid-column: 1; }
  :is(.article-layout--with-toc, .article-layout--with-rail) { display: grid; grid-template-areas: "content rail"; grid-template-columns: minmax(0, var(--layout-reading-width)) minmax(200px, 240px); gap: var(--space-section); align-items: start; }
  .blog-home > .article-layout--with-rail { grid-column: 1 / -1; grid-template-columns: subgrid; }
  :is(.article-layout--with-toc, .article-layout--with-rail) > :is(.page-content, .article-list-content) { grid-area: content; }
  .article-layout--with-rail .article-grid .blog-entry:nth-child(-n + 2) { padding-top: 0; }
  .article-rail { display: block; position: sticky; top: 72px; grid-area: rail; max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px); overflow-y: auto; overscroll-behavior: contain; }
  .article-rail .focus-filters { position: static; max-width: none; }
}
.page-content--wide { max-width: none; }
.page-content--wide > :where(p, ul, ol, blockquote, pre, table) { max-width: var(--layout-reading-width); }
.page-content--landing { margin: 0 0 var(--space-section); }
.page-content > :first-child { margin-top: 0; }
.page-content > :is(img, p img) { border: 1px solid var(--line); padding: 0; background: var(--paper); }
:where(.page-content) :is(h2, h3, h4, h5, h6) { margin: var(--heading-space-before) 0 var(--heading-space-after); scroll-margin-top: 88px; }
:where(.page-content) blockquote {
  margin: 2.2em 0;
  padding: 8px 0 8px var(--space-medium);
  border: 0;
  border-left: 3px solid var(--accent);
  color: var(--ink-muted);
}
.page-content a[href$=".pdf"] {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  padding: 10px 18px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: var(--body-strong-font-weight);
  text-decoration: none;
}
.page-content a[href$=".pdf"]:hover { background: var(--accent-strong); }
.article-footer { max-width: var(--layout-reading-width); margin: var(--space-section) 0 0; padding-top: var(--space-medium); border-top: 1px solid var(--line); }
.article-share { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em; color: var(--ink-muted); font-size: var(--meta-font-size); }
.article-share :is(button, a) { margin: 0; padding: 0; border: 0; background: none; color: var(--foreground); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.article-share :is(button, a):hover { color: var(--accent); }
.article-share input { max-width: 100%; }
.article-share ~ .text-link { display: inline-block; margin-top: var(--space-small); }
.page-content pre { overflow-x: auto; }
.page-content table { display: block; max-width: 100%; overflow-x: auto; }
:where(.page-content) blockquote::before { content: none; }

/* Article facts and covers */
.article-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 22px;
  max-width: var(--layout-wide-width);
  margin: 42px 0 0;
}
.article-facts div { padding-top: 14px; border-top: 1px solid var(--line); }
.article-facts dt, .focus-filters p {
  color: var(--accent-strong);
  font-size: var(--label-font-size);
  font-weight: var(--label-font-weight);
  line-height: var(--label-line-height);
  letter-spacing: var(--label-letter-spacing);
  text-transform: uppercase;
}
.article-facts dd { margin: 8px 0 0; }
.article-cover { max-width: var(--layout-reading-width); margin: var(--space-section) 0; }
.article-cover img { width: 100%; height: auto; margin: 0; padding: 0; border: 1px solid var(--line); }
.article-cover figcaption { margin-top: 10px; color: var(--ink-muted); font-size: var(--caption-font-size); font-weight: var(--caption-font-weight); line-height: var(--caption-line-height); }
.article-cover--framed {
  display: grid;
  place-items: center;
  padding: clamp(18px, 3vw, 34px);
  background: var(--foreground);
}
.article-cover--framed img { width: auto; max-width: 100%; max-height: min(60vw, 540px); border: 0; }
.article-cover--framed figcaption { color: var(--paper); }

/* Article filters */
.focus-filters { position: sticky; top: 72px; width: 100%; max-width: 220px; }
.focus-filters p { margin: 0 0 14px; }
.focus-filters .article-toc__links { display: grid; }
:is(.focus-filters, .context-navigation--focus) .article-toc__links > :is(a, button)[data-focus="all"] { display: block; width: 100%; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
:is(.focus-filters, .context-navigation--focus) .article-toc__links ul { margin: 0; padding: 0; list-style: none; }
:is(.focus-filters, .context-navigation--focus) .article-toc__links > ul { display: grid; gap: 4px; }
:is(.focus-filters, .context-navigation--focus) .article-toc__links li { display: grid; list-style: none; }
:is(.focus-filters, .context-navigation--focus) .article-toc__links li::marker { content: ""; }
.post :is(.focus-filters, .context-navigation--focus) .article-toc__links li::before { content: none; }
:is(.focus-filters, .context-navigation--focus) .article-toc__links > ul > li > ul { margin-left: 16px; border: 0; }
:is(.focus-filters, .context-navigation--focus) .article-toc__links li > :is(a, button) { width: 100%; border: 0; box-shadow: none; text-align: left; }
.focus-filters :is(label, a, button) {
  padding: 5px 6px;
  border: 0;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: var(--meta-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--toc-line-height);
}
.focus-filters a { text-decoration: none; }
.focus-filters button, .blog-pagination button { background: none; border-radius: 0; margin: 0; text-transform: none; letter-spacing: inherit; text-align: left; }
.focus-filters button { width: 100%; justify-content: flex-start; }
.blog-pagination button { padding: 0; border: 0; text-decoration: underline; cursor: pointer; }
.blog-pagination button:disabled { opacity: 0.5; cursor: default; }
.focus-filters :is(label, a, button):is(:hover, :focus-visible) { border-radius: var(--border-radius); background: var(--accent-muted); color: var(--foreground); }
.focus-filters :is(a, button):focus-visible,
.context-navigation__panel :is(a, button):focus-visible,
.article-toc a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.page-content :is(h2, h3, h4, h5, h6):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.focus-filters a[aria-current], .focus-filters button[aria-pressed="true"] { color: var(--accent); }

/* Comparison blocks */
.comparison { padding: clamp(var(--space-medium), 4vw, 40px) 0; scroll-margin-top: 88px; }
.comparison > header {
  display: grid;
  grid-template-columns: 150px minmax(0, var(--layout-reading-width));
  gap: var(--space-small);
  align-items: start;
  margin-bottom: var(--space-small);
}
.comparison h2 { margin: 0; font-size: var(--heading-h3-font-size); }
.comparison h2 a { color: inherit; text-decoration: none; }
.comparison h2 a:hover { color: var(--accent); }
.comparison__pair { border: 1px solid var(--line); border-right-color: var(--foreground); }
.comparison__pair table { display: table; width: 100%; table-layout: fixed; border: 0; border-collapse: collapse; }
.comparison__pair th {
  padding: clamp(var(--space-small), 2.5vw, var(--space-medium)) clamp(var(--space-small), 2.5vw, var(--space-medium)) 12px;
  border: 0;
  background: var(--paper);
  color: var(--accent-strong);
  font-size: var(--table-label-font-size);
  font-weight: var(--label-font-weight);
  line-height: var(--label-line-height);
  letter-spacing: var(--label-letter-spacing);
  text-align: left;
  text-transform: uppercase;
}
.comparison__pair :is(th, td):last-child { background: color-mix(in srgb, var(--paper) 92%, var(--accent)); color: var(--foreground); }
.comparison__pair th:last-child { color: var(--accent-strong); }
.comparison__pair :is(th, td)[lang="pl"] { background: var(--accent-muted); }
.comparison__pair td {
  padding: 0 clamp(var(--space-small), 2.5vw, var(--space-medium)) var(--space-small);
  border: 0;
  background: var(--paper);
  color: var(--foreground);
  vertical-align: top;
  overflow-wrap: anywhere;
  font-family: var(--translation-font-family);
  font-size: var(--translation-font-size);
  line-height: var(--translation-line-height);
  white-space: pre-line;
  letter-spacing: var(--translation-letter-spacing);
  font-weight: var(--translation-font-weight);
}
.comparison__pair tbody tr:last-child td { padding-bottom: clamp(var(--space-small), 2.5vw, var(--space-medium)); }
.comparison__pair td > :first-child { margin-top: 0; }
.comparison__pair td > :last-child { margin-bottom: 0; }
.comparison :is(ul, ol) { margin-left: 0; padding-left: var(--space-medium); white-space: normal; }
.comparison ul { list-style: disc; }
.comparison ol { list-style: decimal; }
.post .comparison ul li::before { content: none; }
.comparison li + li { margin-top: 0; }
.comparison__notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding: var(--space-small) clamp(var(--space-small), 2.5vw, var(--space-medium));
  border: 1px solid var(--line);
  border-bottom: 0;
}
.comparison__notes p { margin: 0; color: var(--ink-muted); font-size: var(--note-font-size); }
.comparison__notes p:only-child { grid-column: 1 / -1; }
.comparison__notes strong {
  display: block;
  margin-bottom: 4px;
  color: var(--foreground);
  font-size: var(--label-small-font-size);
  letter-spacing: var(--label-letter-spacing);
  text-transform: uppercase;
}
.comparison__top { margin: var(--space-small) 0 0; text-align: right; font-size: var(--meta-font-size); }
.comparison > header > :only-child { grid-column: 1 / -1; }

/* Keep inline code and any following punctuation on one line. */
code:not(pre code) { white-space: nowrap; overflow-wrap: normal; }
.inline-code-unit { display: inline-block; white-space: nowrap; }
.word-pair__separator { color: var(--foreground); }
.word-pair__gender { font-size: .75em; line-height: 0; vertical-align: super; }
.word-pair__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.text-example, .comparison--compact, .article-details {
  --paragraph-align: left;
  max-width: var(--layout-reading-width);
  margin: var(--paragraph-space) 0;
  padding: var(--space-small);
  border: 1px solid var(--line);
  border-radius: var(--border-radius);
  background: var(--paper);
  overflow-wrap: anywhere;
}
.text-example { width: 100%; border-left: 3px solid var(--accent); }
.text-example__body, .comparison--compact {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
}
.text-example .example-label, .comparison--compact .example-label, .table-cell-label {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  background: none;
  color: var(--accent-strong);
  font-size: var(--label-font-size);
  font-weight: var(--label-font-weight);
  line-height: var(--label-line-height);
  text-align: left;
}
.text-example__body > :first-child, .comparison__cell > div > :first-child,
.article-details__body > :first-child { margin-top: 0; }
.text-example__body > :last-child, .comparison__cell > div > :last-child,
.article-details__body > :last-child { margin-bottom: 0; }
.text-example__body :is(ul, ol), .article-details__body :is(ul, ol) { margin-left: 0; padding-left: var(--space-medium); }
.text-example--outputs .text-example__body > ul > li {
  padding-block: 8px;
  border-top: 1px solid var(--line);
}
.text-example--breakdown dl { margin: 0; }
.text-example--breakdown dt { font-weight: var(--body-strong-font-weight); }
.text-example--breakdown dd { margin: 0 0 var(--space-small); }
.text-example--breakdown dd:last-child { margin-bottom: 0; }
.comparison--compact { padding: 0; }
.comparison__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.comparison__row + .comparison__row { border-top: 1px solid var(--line); }
.comparison__cell { min-width: 0; padding: var(--space-small); }
.comparison__cell + .comparison__cell { border-left: 1px solid var(--line); background: var(--accent-muted); }
.article-details > summary {
  cursor: pointer;
  min-height: 44px;
  align-content: center;
  font-weight: var(--body-strong-font-weight);
}
.article-details__body { padding-top: var(--space-small); }
.responsive-table-scroll { max-width: 100%; overflow-x: auto; }
.responsive-table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.page-content .responsive-table { display: table; width: 100%; max-width: none; table-layout: fixed; border: 1px solid var(--line); background: var(--paper); }
.responsive-table th { color: var(--accent-strong); }
.responsive-table :is(th, td) { overflow-wrap: anywhere; border: 1px solid var(--line); }
@media (min-width: 685px) {
  .text-example--breakdown dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--space-small); }
  .text-example--breakdown dd { margin: 0; }
}
@media (max-width: 684px) {
  .comparison__row { grid-template-columns: minmax(0, 1fr); }
  .comparison__cell + .comparison__cell { border-left: 0; border-top: 1px solid var(--line); }
  .page-content .responsive-table { table-layout: auto; }
  .responsive-table :is(th, td) { min-width: 9rem; }
}
@media print {
  .article-toc { display: none; }
  .article-details::details-content { content-visibility: visible; }
  .article-details > .article-details__body { display: block; }
}

/* Optional, page-data-driven project gallery. */
.gallery { width: 100%; max-width: var(--layout-reading-width); margin: clamp(40px, 6vw, 72px) 0 var(--space-small); }
.gallery > header h2 { margin-bottom: 8px; }
.gallery > header p:last-child { color: var(--ink-muted); }
.gallery__disclaimer { max-width: var(--layout-reading-width); font-size: var(--meta-font-size); }
.gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-small); padding: 2px; }
.gallery__card { aspect-ratio: 460 / 215; margin: 0; border: 1px solid var(--line); border-radius: var(--border-radius); background: var(--paper); }
.gallery__card--logo { display: grid; place-items: center; }
.gallery__logo { width: min(220px, 78%); height: 128px; margin: auto; border: 0; object-fit: contain; }
:root[data-color-scheme="dark"] .gallery__logo { filter: invert(1); }
.gallery__card a { display: block; height: 100%; color: inherit; text-decoration: none; }
.gallery__image { display: block; width: 100%; aspect-ratio: 460 / 215; margin: 0; padding: 0; border: 0; object-fit: cover; }

/* QA banners */
.qa-banner {
  display: grid;
  grid-template-columns: 0.9fr 1.25fr;
  gap: clamp(var(--space-medium), 4vw, 48px);
  padding: clamp(28px, 4vw, 48px);
  background: var(--accent-strong);
  color: var(--on-accent);
}
.qa-banner h2 { font-size: var(--banner-heading-font-size); margin: 10px 0 14px; }
.qa-banner header > p:last-child { color: var(--on-accent-muted); }
.qa-banner .eyebrow { color: var(--on-accent); }
.qa-banner__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.qa-banner__grid > div { padding-top: 18px; border-top: 1px solid var(--on-accent-line); }
.qa-banner__grid h3 { margin-top: 0; }
.qa-banner__grid ul { padding-left: 20px; }
.qa-banner__grid li + li { margin-top: var(--list-item-space); }
.qa-banner a { color: inherit; }

/* Quotes and progressively enhanced feedback slider */
.quote-block { max-width: var(--layout-reading-width); padding: var(--space-component) 0; }
.feedback-carousel { width: 85%; min-width: 0; margin: var(--space-small) auto 0; }
.feedback-carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}
.feedback-carousel__item { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.feedback-quote { width: auto; margin: var(--space-small) 0; }
.feedback-quote blockquote {
  color: var(--foreground);
  max-width: var(--layout-wide-width);
  margin: 0 0 var(--space-small);
  padding: 0;
  border: 0;
  font-family: var(--quote-font-family);
  font-size: var(--quote-font-size);
  font-style: normal;
  line-height: var(--quote-line-height);
  letter-spacing: var(--quote-letter-spacing);
  font-weight: var(--quote-font-weight);
  text-align: var(--quote-text-align);
}
.feedback-quote figcaption {
  margin: 0;
  padding: 0;
  background: none;
  color: var(--ink-muted);
  text-align: start;
  font-size: var(--caption-font-size);
  font-weight: var(--caption-font-weight);
  line-height: var(--caption-line-height);
}
.feedback-quote blockquote::before { content: "“"; display: inline; position: static; color: inherit; }
.feedback-quote blockquote::after { content: "”"; }
.feedback-carousel__controls { display: flex; justify-content: center; margin-top: var(--space-small); }
.feedback-carousel__status { color: var(--ink-muted); font-size: var(--meta-font-size); font-variant-numeric: tabular-nums; }
.feedback-carousel__announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.feedback-carousel__track:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Article collections and pagination */
.blog-pagination { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-small) var(--space-medium); }
.blog-feed { overflow: clip; }
.blog-entry { position: relative; margin: 0; padding: var(--space-medium) 0; }
.blog-home > section > .eyebrow { margin: 0; }
.blog-entry::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 1px; background: var(--line); }
.blog-meta { color: var(--ink-muted); font-size: var(--meta-font-size); }
.blog-entry__date { margin: 0 0 12px; color: var(--accent-strong); font-size: var(--label-small-font-size); }
.blog-entry :is(h2, h3) { margin: 0 0 calc(var(--space-small) / 2); font-size: var(--card-heading-font-size); }
.blog-entry :is(h2, h3) a { color: inherit; text-decoration: none; }
.blog-entry :is(h2, h3) a:hover { color: var(--accent); }
.blog-entry__summary { font-size: var(--summary-font-size); line-height: var(--summary-line-height); margin: 0 0 var(--space-small); }
.blog-entry__summary > p { margin: 0; }
.blog-entry > .text-link { display: block; width: fit-content; margin-left: auto; font-size: var(--control-font-size); font-weight: var(--body-font-weight); }
.article-terms { display: flex; flex-wrap: wrap; gap: 8px var(--space-small); margin-block: 16px; font-size: var(--meta-font-size); }
.article-terms a { color: var(--accent-strong); text-underline-offset: 3px; }
.section-articles { max-width: var(--layout-reading-width); margin-top: var(--space-section); }
.section-articles--recommended .blog-entry__summary { font-size: calc(var(--summary-font-size) * 0.85); }
.section-articles--related { padding-top: var(--space-small); border-top: 1px solid var(--line); }
.section-articles--related > h2 { margin-bottom: var(--space-small); color: var(--ink-muted); font-size: var(--heading-h4-font-size); }
.section-articles--related .blog-entry { padding: var(--space-small) 0; }
.section-articles--related .blog-entry__date { margin: 0; }
.section-articles--related :is(.blog-entry__summary, .text-link) { display: none; }
.article-grid__show-all { display: block; margin: var(--space-medium) auto 0; background: none; border: 0; cursor: pointer; }
.blog-pagination { justify-content: space-between; margin-top: var(--space-large); font-size: var(--caption-font-size); font-weight: var(--caption-font-weight); line-height: var(--caption-line-height); }
.article-list-content > section, .blog-home > .blog-entry, .blog-pagination { max-width: var(--layout-reading-width); }

/* Alignment overrides */
:where(h1, h2, h3, h4, h5, h6) { text-align: var(--heading-align, left); }
:where(.page-content p, .page-intro, .page-intro p,
       .blog-entry__summary) {
  text-align: var(--paragraph-align, left);
}
.paragraphs-left { --paragraph-align: left; }
.paragraphs-right { --paragraph-align: right; }
.paragraphs-justify { --paragraph-align: justify; }
.headings-left { --heading-align: left; }
.headings-right { --heading-align: right; }
.headings-justify { --heading-align: justify; }
.align-left { --paragraph-align: left; --heading-align: left; text-align: left; }
.align-right { --paragraph-align: right; --heading-align: right; text-align: right; }
.align-justify { --paragraph-align: justify; --heading-align: justify; text-align: justify; }

/* Responsive layouts and reduced motion */
@media (prefers-reduced-motion: reduce) {
  html, .feedback-carousel__track, .gallery__grid { scroll-behavior: auto; }
}
@media (max-width: 999px) {
  .mobile-navigation { display: block; order: 1; margin-left: auto; }
  .mobile-navigation nav { right: 0; left: auto; }
  .mobile-navigation summary { min-height: 44px; }
  .context-navigation--focus .article-toc__links, .context-navigation__panel--toc .article-toc__links > ul { display: grid; gap: 4px; }
  .context-navigation__panel--toc .article-toc__links ul ul, :is(.context-navigation--focus, .context-navigation__panel--toc) li + li { margin-top: 4px; }
  .context-navigation .context-navigation__panel :is(a, label, button):focus-visible { background: var(--accent-muted); }
  .navigation-menu { display: none; }
  .author-card > .article-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .author-card .article-facts dt { font-size: var(--author-card-mobile-label-font-size); white-space: nowrap; }
}
@media (max-width: 684px) {
  .header { flex-wrap: wrap; gap: 8px; }
  .qa-banner { padding: 20px; }
}
@media (max-width: 850px) {
  .category-focus { display: none; }
  .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qa-banner { grid-template-columns: 1fr; }
  .focus-filters { position: static; max-width: 100%; }
  .focus-filters .article-toc__links { display: grid; gap: 8px; }
  .focus-filters :is(label, a, button) { width: auto; max-width: 100%; padding: 9px 12px; border: 1px solid var(--line); white-space: normal; overflow-wrap: anywhere; }
}
@media (min-width: 851px) {
  :is(.section-articles--related, .section-articles--recommended, .article-grid) .blog-feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-medium); }
  :is(.section-articles--related, .section-articles--recommended, .article-grid) .blog-entry { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
}
@media (max-width: 600px) {
  .page-header__byline { display: block; margin: 0; color: var(--ink-muted); font-size: var(--meta-font-size); white-space: nowrap; }
  .page-header__byline a { color: inherit; }
  .page-header--with-author-card .blog-meta > :is(:first-child, :nth-child(2)) { display: none; }
  .page-header--description-in-card .page-intro { display: block; }
  .page-header--description-in-card + .article-layout .page-content { margin-top: var(--space-section); }
  .author-card { display: block; padding: 0; border: 0; background: none; }
  .author-card__identity, .author-card__article-description { display: none; }
  .author-card > .article-facts { grid-template-columns: 1fr; gap: var(--space-small); margin-bottom: var(--space-section); }
  .author-card + * { margin-top: 0; }
}
@media (max-width: 560px) {
  .footer .copyright--user { grid-template-columns: 1fr; }
  .footer .copyright > :nth-child(n) { text-align: center; }
  .container { padding-inline: var(--layout-page-padding-mobile); }
  .article-facts { grid-template-columns: 1fr; }
  .comparison > header { grid-template-columns: 1fr; gap: 8px; }
  .comparison__notes, .qa-banner__grid { grid-template-columns: 1fr; }
  .gallery__grid {
    display: flex;
    gap: 0;
    padding: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
  }
  .gallery__card { box-sizing: border-box; flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
}