/* ============================================================
   Werkbank — a technical-datasheet layout for energy and
   building topics.

   The subject is a five-figure decision made from numbers and
   diagrams, so this theme borrows from German engineering
   documentation: hairline rules, tabular figures, labelled
   plates. Nothing is rounded, nothing floats, and the article
   text column stays narrow so the diagrams can break out wider
   than it and become the loudest thing on the page.

   Brand colours come from the ten palettes via --brand /
   --accent / --tint, so switching palette still works here.

   Typefaces are system stacks on purpose: no Google Fonts
   request, which keeps a German site clear of the third-party
   transfer problem that comes with hosted webfonts.
   ============================================================ */

:root {
  --paper:      #F4F5F2;
  --surface:    #FFFFFF;
  --ink:        #151A19;
  --ink-soft:   #5A6462;
  --ink-faint:  #8B9490;
  --rule:       #D5D9D3;
  --rule-firm:  #A8B0AC;
  --warn-bg:    #FBF3E2;

  --measure:    66ch;
  --gap:        clamp(1.5rem, 4vw, 3rem);

  --sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", "JetBrains Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

[data-scheme="dark"] {
  --paper:     #101413;
  --surface:   #171C1B;
  --ink:       #E8ECEA;
  --ink-soft:  #9AA5A1;
  --ink-faint: #6E7975;
  --rule:      #2A322F;
  --rule-firm: #414B47;
  --warn-bg:   #241E11;
  --brand:     var(--brand-dm);
  --accent:    var(--accent-dm);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: calc(1rem * var(--font-scale, 1));
  line-height: 1.65;
  font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }

/* German compounds are long enough to push a narrow column sideways, so
   headings are allowed to hyphenate and break rather than overflow. */
h1, h2, h3, .card-title, .article-head h1, .page-head .title, .sibling .title {
  overflow-wrap: break-word;
  hyphens: auto;
}
.prose, .card-excerpt, .faq-answer, .takeaways { overflow-wrap: break-word; }
/* Bare URLs in the sources list are the other common overflow source. */
.sources a, .prose a { overflow-wrap: anywhere; }

/* Nothing may widen the page itself. */
html, body { max-width: 100%; overflow-x: clip; }

a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brand); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.wrap { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }
.wrap-narrow { width: min(var(--measure), 100% - 2.5rem); margin-inline: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper); padding: .75rem 1rem;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------
   Masthead — a fixed rule, not a floating blur
   --------------------------------------------------------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--rule-firm);
}
.header-bar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 66px;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  font-size: 1.1rem;
  text-decoration: none;
  margin-inline-end: auto;
}
.brand-mark {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  background: var(--brand); color: #fff;
  font-size: .8rem; font-weight: 700;
  align-self: center;
}

.nav-desktop { display: none; gap: 1.4rem; }
@media (min-width: 900px) { .nav-desktop { display: flex; } }
.nav-desktop a {
  text-decoration: none;
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding-block: .35rem;
  border-bottom: 2px solid transparent;
}
.nav-desktop a:hover { color: var(--ink); border-bottom-color: var(--rule-firm); }
.nav-desktop a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brand); }

.icon-btn {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}
.icon-btn:hover { color: var(--ink); border-color: var(--rule-firm); }
.nav-toggle { display: grid; }
@media (min-width: 900px) { .nav-toggle { display: none; } }

/* ---------------------------------------------------------
   Slide-over navigation — a drawer with ruled rows
   --------------------------------------------------------- */
.sheet {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(10, 14, 13, .45);
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, visibility .18s;
}
.sheet.is-open { opacity: 1; visibility: visible; }
.sheet-panel {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: min(380px, 88vw);
  background: var(--surface);
  border-inline-start: 1px solid var(--rule-firm);
  padding: 1.25rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}
.sheet.is-open .sheet-panel { transform: none; }
.sheet-grabber { display: none; }

.group-title {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--ink-faint);
  margin: 1.5rem 0 .5rem;
}
.group { border-top: 1px solid var(--rule); }
.row {
  display: flex; align-items: center; gap: .75rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  font-size: .95rem;
}
.row-label { flex: 1; }
.row-value { font-family: var(--mono); font-size: .8rem; color: var(--ink-faint); }
.row-icon { color: var(--ink-faint); display: inline-flex; }
/* Chevron affordances are an iOS idiom; this theme uses rules and
   counters instead, so they are dropped rather than restyled. */
.ic-chevron { display: none; }

.search-field {
  display: flex; align-items: center; gap: .6rem;
  border: 1px solid var(--rule-firm);
  background: var(--surface);
  padding: .6rem .75rem;
  color: var(--ink-faint);
}
.search-field input {
  flex: 1; border: 0; background: none; font: inherit; color: var(--ink);
}
.search-field input:focus { outline: none; }

/* ---------------------------------------------------------
   Page furniture
   --------------------------------------------------------- */
main { display: block; padding-block: clamp(2rem, 5vw, 3.5rem); }

.page-head { margin-bottom: 2rem; }
.page-head .title,
.page-head h1 {
  font-size: clamp(1.9rem, 4.2vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 660;
  margin: 0 0 .5rem;
}
.page-head p { color: var(--ink-soft); margin: 0; max-width: var(--measure); }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: .4rem;
  margin: 3rem 0 0;
}
.section-head h2 {
  font-size: 1.05rem; font-weight: 640; margin: 0;
  letter-spacing: -0.01em;
}
.section-head a { font-size: .85rem; color: var(--ink-soft); }

.crumbs {
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--ink-faint);
  margin-bottom: 1.25rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
}
/* The markup is <nav class="crumbs"><ol><li>…, so the list has to be
   flattened into the nav's flex row, otherwise it renders as a numbered
   block list underneath. */
.crumbs ol { display: contents; list-style: none; margin: 0; padding: 0; }
.crumbs li { display: flex; align-items: center; gap: .4rem; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--brand); }
/* .sep already carries a chevron character; do not add another. */
.crumbs .sep { color: var(--rule-firm); }
.crumbs [aria-current] { color: var(--ink); }

/* ---------------------------------------------------------
   Listings — a ruled index, not a grid of cards
   --------------------------------------------------------- */
.card-list { border-top: 2px solid var(--ink); margin-top: 0; }

/* The markup is .card > .card-body > (kicker, title, excerpt, meta), so the
   two-column index layout has to be built on .card-body. Putting the grid on
   .card instead drops the whole body into the narrow meta column. */
.card {
  display: block;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--rule);
}
.card-body { display: grid; gap: .35rem; }

@media (min-width: 800px) {
  .card-body {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    column-gap: 2rem;
    align-items: start;
  }
  .card-kicker,
  .card-title,
  .card-excerpt { grid-column: 2; }
  /* Spanning to -1 keeps the meta column correct whether or not the kicker
     and excerpt are switched on. */
  .card-meta {
    grid-column: 1;
    grid-row: 1 / -1;
    flex-direction: column;
    gap: .15rem;
    padding-top: .3rem;
  }
}

.card-media { display: none; }              /* the index stays textual */

/* Separator between meta items when they sit on one line. In the stacked
   desktop column each item has its own row, so the dots are dropped. */
.card-meta .dot::before { content: "·"; color: var(--rule-firm); }
@media (min-width: 800px) { .card-meta .dot { display: none; } }

.ic { flex: none; vertical-align: middle; }

.card-kicker {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .07em;
  color: var(--brand);
  text-transform: none;
}
.card-title {
  font-size: 1.22rem;
  line-height: 1.25;
  letter-spacing: -0.018em;
  font-weight: 620;
  margin: 0;
}
.card-title a { text-decoration: none; }
.card-title a:hover { text-decoration: underline; }
.card-excerpt {
  color: var(--ink-soft);
  font-size: .94rem;
  margin: 0;
  max-width: 62ch;
}
.card-meta {
  font-family: var(--mono);
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  display: flex; flex-wrap: wrap; gap: .5rem;
}
/* The lead item gets size, not decoration. */
.card-lead .card-title { font-size: clamp(1.5rem, 3vw, 2rem); }
.card-lead .card-excerpt { font-size: 1rem; }

.pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.pills a, .tag-chip {
  font-family: var(--mono);
  font-size: .76rem;
  border: 1px solid var(--rule-firm);
  padding: .28rem .6rem;
  text-decoration: none;
  color: var(--ink-soft);
  background: var(--surface);
}
.pills a:hover, .tag-chip:hover { border-color: var(--brand); color: var(--brand); }
.pills a.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.rank-list { counter-reset: rank; border-top: 1px solid var(--rule); }
.rank-list a {
  display: flex; gap: .9rem; align-items: baseline;
  padding: .7rem 0; border-bottom: 1px solid var(--rule);
  text-decoration: none; font-size: .95rem;
}
.rank-list a::before {
  counter-increment: rank;
  content: counter(rank, decimal-leading-zero);
  font-family: var(--mono); font-size: .78rem; color: var(--brand);
}

/* ---------------------------------------------------------
   Article
   --------------------------------------------------------- */
.article-head { margin-bottom: 2rem; }
.article-head h1 {
  font-size: clamp(2rem, 4.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 680;
  margin: .3rem 0 .8rem;
  max-width: 22ch;
}
.article-standfirst {
  font-size: 1.12rem;
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0 0 1.5rem;
}

.byline {
  display: flex; align-items: center; gap: .75rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: .8rem 0;
  margin-bottom: 2rem;
}
.byline-avatar {
  width: 34px; height: 34px; object-fit: cover;
  border: 1px solid var(--rule-firm);
}
.byline-name { font-weight: 600; font-size: .92rem; }
.byline-meta, .byline-text {
  font-family: var(--mono);
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
.pub { font-variant-numeric: tabular-nums; }

.trust-strip {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 2rem;
}
.trust-chip {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--ink-soft);
  background: var(--tint);
  border-inline-start: 2px solid var(--brand);
  padding: .3rem .6rem;
}
[data-scheme="dark"] .trust-chip { background: var(--surface); }

/* Contents rail, numbered because a table of contents is a sequence. */
.toc {
  border: 1px solid var(--rule-firm);
  background: var(--surface);
  padding: 1rem 1.1rem;
  margin-bottom: 2rem;
  counter-reset: toc;
}
.toc > summary,
.toc .title {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--ink-faint);
  cursor: pointer;
  margin-bottom: .5rem;
  list-style: none;
}
.toc > summary::-webkit-details-marker { display: none; }
.toc > summary::after { content: " ▾"; color: var(--rule-firm); }
.toc[open] > summary::after { content: " ▴"; }
.toc ol, .toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { border-top: 1px solid var(--rule); }
.toc li:first-child { border-top: 0; }
.toc li.lvl-3 { padding-inline-start: 1.4rem; }
.toc a {
  display: flex; gap: .7rem;
  padding: .45rem 0;
  font-size: .9rem;
  text-decoration: none;
  color: var(--ink-soft);
}
.toc a::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero);
  font-family: var(--mono); font-size: .72rem; color: var(--brand);
}
.toc a:hover { color: var(--ink); }

/* Body copy */
.prose { max-width: var(--measure); font-size: 1.03rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
  font-size: 1.45rem; line-height: 1.2; letter-spacing: -0.02em;
  font-weight: 640;
  margin-top: 2.6em; padding-top: .5rem;
  border-top: 2px solid var(--ink);
}
.prose h3 {
  font-size: 1.13rem; font-weight: 640; margin-top: 2em;
  letter-spacing: -0.012em;
}
.prose ul, .prose ol { padding-inline-start: 1.2rem; }
.prose li + li { margin-top: .4em; }
.prose strong { font-weight: 640; }
.prose blockquote {
  margin-inline: 0;
  padding: .2rem 0 .2rem 1.1rem;
  border-inline-start: 2px solid var(--brand);
  color: var(--ink-soft);
}
.prose code {
  font-family: var(--mono); font-size: .88em;
  background: var(--tint); padding: .1em .35em;
}
[data-scheme="dark"] .prose code { background: var(--surface); }

.prose table {
  width: 100%; border-collapse: collapse; font-size: .92rem;
  font-variant-numeric: tabular-nums;
  /* A wide data table scrolls within itself rather than stretching the page. */
  display: block; max-width: 100%; overflow-x: auto;
}
.prose th, .prose td {
  text-align: start; padding: .55rem .6rem;
  border-bottom: 1px solid var(--rule);
}
.prose thead th {
  border-bottom: 2px solid var(--ink);
  font-family: var(--mono); font-size: .74rem;
  letter-spacing: .05em; color: var(--ink-soft);
}

/* ---------------------------------------------------------
   Infographic plates — the reason this theme exists.
   They break out wider than the text measure.
   --------------------------------------------------------- */
.infographic {
  margin: 2.5rem 0;
  border: 1px solid var(--rule-firm);
  background: var(--surface);
}
@media (min-width: 1000px) {
  /* Negative margins widen the plate evenly on both sides; a width
     above 100% would only spill to one side inside a centred column. */
  .infographic { margin-inline: -8%; }
}
/* Below that the plate stays inside the column, and any oversized diagram
   scrolls within its own frame. */
.infographic { max-width: 100%; }
.infographic-canvas { max-width: 100%; overflow-x: auto; }
.infographic-head {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--rule-firm);
  background: var(--tint);
}
[data-scheme="dark"] .infographic-head { background: transparent; }
.infographic-title {
  font-size: .95rem; font-weight: 640; margin: 0;
  letter-spacing: -0.01em;
}
.infographic-head .label,
.infographic .label {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--brand);
  white-space: nowrap;
}
.infographic-canvas { padding: 1.25rem 1rem; overflow-x: auto; }
.infographic-canvas svg { display: block; margin-inline: auto; height: auto; }
.infographic-caption {
  padding: 0 1rem 1rem;
  font-size: .9rem; color: var(--ink-soft);
}
.infographic-source {
  padding: .5rem 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: .72rem; color: var(--ink-faint);
}
.hero-figure { margin-bottom: 2rem; border: 1px solid var(--rule-firm); }

/* ---------------------------------------------------------
   Supporting blocks
   --------------------------------------------------------- */
.takeaways {
  border: 1px solid var(--rule-firm);
  border-inline-start: 3px solid var(--brand);
  background: var(--surface);
  padding: 1.1rem 1.25rem;
  margin: 0 0 2rem;
}
.takeaways .title {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em;
  color: var(--ink-faint); margin: 0 0 .6rem;
}
.takeaways ul { margin: 0; padding-inline-start: 1.1rem; }
.takeaways li { margin-top: .35rem; }

.sources { margin: 2.5rem 0 0; padding-top: 1rem; border-top: 2px solid var(--ink); }
.sources .title { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em;
                  color: var(--ink-faint); margin: 0 0 .6rem; }
.sources ol { padding-inline-start: 1.4rem; font-size: .9rem; }
.sources li { margin-top: .4rem; }
.sources a { color: var(--ink-soft); }

.faq { margin-top: 2.5rem; border-top: 2px solid var(--ink); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item > summary {
  cursor: pointer; padding: .9rem 0;
  font-weight: 600; font-size: 1rem;
  list-style: none;
  display: flex; justify-content: space-between; gap: 1rem;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: "+"; color: var(--brand); font-family: var(--mono); }
.faq-item[open] > summary::after { content: "–"; }
.faq-answer { padding-bottom: 1rem; color: var(--ink-soft); max-width: var(--measure); }

.disclaimer {
  margin-top: 2rem; padding: .9rem 1.1rem;
  background: var(--warn-bg);
  border-inline-start: 3px solid var(--accent);
  font-size: .88rem; color: var(--ink-soft);
}

.author-box { margin-top: 3rem; border-top: 2px solid var(--ink); padding-top: 1.25rem; }
.author-box-inner { display: flex; gap: 1.1rem; align-items: flex-start; }
.author-box img { width: 60px; height: 60px; object-fit: cover; border: 1px solid var(--rule-firm); }
.author-box .name { font-weight: 640; }
.author-box .role,
.author-credentials { font-family: var(--mono); font-size: .74rem; color: var(--ink-faint); }
.author-box .bio { font-size: .92rem; color: var(--ink-soft); margin-top: .4rem; max-width: 60ch; }

.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.action-btn, .btn-ghost, .btn-primary, .pager-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font: inherit; font-size: .88rem;
  padding: .5rem .9rem;
  border: 1px solid var(--rule-firm);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.action-btn:hover, .btn-ghost:hover, .pager-btn:hover { border-color: var(--brand); color: var(--brand); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 560; }
.btn-primary:hover { filter: brightness(.92); color: #fff; }

.tag-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 2rem; }

.sibling-nav {
  display: grid; gap: 1px; margin-top: 3rem;
  background: var(--rule-firm);
  border: 1px solid var(--rule-firm);
}
@media (min-width: 700px) { .sibling-nav { grid-template-columns: 1fr 1fr; } }
.sibling {
  background: var(--surface); padding: 1rem 1.1rem;
  text-decoration: none; display: block;
}
.sibling .label { font-family: var(--mono); font-size: .7rem; color: var(--ink-faint); }
.sibling .title { font-weight: 600; font-size: .98rem; margin-top: .2rem; display: block; }
.sibling.next { text-align: end; }

.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 2.5rem;
  border-top: 1px solid var(--rule); padding-top: 1rem;
}
.pager-status { font-family: var(--mono); font-size: .78rem; color: var(--ink-faint); }

.newsletter {
  margin-top: 3rem; padding: 1.5rem;
  border: 1px solid var(--rule-firm); background: var(--surface);
}
.newsletter .title { font-size: 1.1rem; font-weight: 640; margin: 0 0 .3rem; }
.newsletter p { color: var(--ink-soft); font-size: .92rem; margin: 0 0 1rem; }
.newsletter-form { display: flex; flex-wrap: wrap; gap: .5rem; }
.newsletter-form input[type="email"] {
  flex: 1 1 15rem; padding: .55rem .7rem;
  border: 1px solid var(--rule-firm); background: var(--paper);
  font: inherit; color: var(--ink);
}
.form-note { font-family: var(--mono); font-size: .72rem; color: var(--ink-faint); margin-top: .5rem; }

.empty { padding: 3rem 0; text-align: center; color: var(--ink-soft); }
.empty .title { font-size: 1.15rem; font-weight: 640; color: var(--ink); }

/* ---------------------------------------------------------
   Advertising — clearly fenced off from editorial
   --------------------------------------------------------- */
.ad-slot { margin: 2rem 0; text-align: center; }
.ad-label {
  display: block;
  font-family: var(--mono); font-size: .66rem;
  letter-spacing: .12em; color: var(--ink-faint);
  border-top: 1px solid var(--rule);
  padding-top: .35rem; margin-bottom: .5rem;
  text-align: start;
}
.ad-body { min-height: 1px; }
@media (max-width: 640px) { .ad-desktop-only { display: none; } }
@media (min-width: 641px) { .ad-mobile-only { display: none; } }

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.site-footer {
  margin-top: 4rem;
  border-top: 2px solid var(--ink);
  background: var(--surface);
  padding-block: 2.5rem 2rem;
}
.footer-grid {
  display: grid; gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-col .title,
.footer-col .group-title {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .08em;
  color: var(--ink-faint); margin: 0 0 .7rem;
}
.footer-col a { display: block; padding: .25rem 0; font-size: .9rem; color: var(--ink-soft); text-decoration: none; }
.footer-col a:hover { color: var(--brand); }
.footer-about { color: var(--ink-soft); font-size: .9rem; max-width: 46ch; }
.footer-bottom {
  margin-top: 2rem; padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: .74rem; color: var(--ink-faint);
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between;
}

.to-top {
  position: fixed; inset-inline-end: 1.25rem; inset-block-end: 1.25rem;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  border: 0; cursor: pointer;
  opacity: 0; visibility: hidden; transition: opacity .2s;
  z-index: 90;
}
.to-top.is-visible { opacity: 1; visibility: visible; }

/* The bottom tab bar belongs to the iOS theme only. */
.tabbar { display: none !important; }

/* ---------------------------------------------------------
   Consent
   --------------------------------------------------------- */
.consent {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 130;
  background: var(--surface);
  border-top: 2px solid var(--ink);
  padding: 1rem 0;
}
.consent-inner {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
}
.consent-text { font-size: .88rem; color: var(--ink-soft); max-width: 60ch; }
.consent-actions { display: flex; gap: .5rem; }

@media print {
  .site-header, .site-footer, .ad-slot, .to-top, .consent, .actions, .sheet { display: none !important; }
  .infographic { break-inside: avoid; border-color: #999; }
  body { background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ------------------------------------------------------------------
   Infographic thumbnails. The ruled index hides photographic media, but
   a diagram is editorial content here rather than decoration, so it is
   shown when the option is on — framed like a small plate.
   ------------------------------------------------------------------ */
.card-media-svg {
  display: block;
  border: 1px solid var(--rule);
  background: var(--surface);
  padding: .6rem;
  margin-bottom: .8rem;
  overflow: hidden;
}
.card-media-svg svg { display: block; width: 100%; max-height: 190px; }

@media (min-width: 800px) {
  /* Scoped with :has() so cards without a diagram keep the plain ruled
     layout instead of reserving an empty column. Browsers without :has()
     fall back to the diagram sitting above the text, which is fine. */
  .card:has(> .card-media-svg) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 13rem;
    column-gap: 2rem;
    align-items: start;
  }
  .card:has(> .card-media-svg) > .card-body { grid-column: 1; }
  .card:has(> .card-media-svg) > .card-media-svg { grid-column: 2; margin-bottom: 0; }
}