/* WATTBA: nieuwssite. Plain CSS, no JS, no external resources. Light, dark or automatic (prefers-color-scheme) via data-theme. */

/* Theme: light tokens on :root; dark tokens for data-theme="donker" and for data-theme="auto" under a dark OS scheme.
   The two dark blocks must stay identical. data-theme is set on <html> by the layout from the `thema` cookie. */
:root {
  --bg: #ffffff;
  --fg: #111318;
  --muted: #5a5f69;
  --accent: #c8102e; /* WATTBA rood */
  --accent-fg: #ffffff;
  --link: #a30d26;
  --border: #dcdfe4;
  --border-strong: #111318;
  --surface: #f3f4f6;
  --major: #b45309;
  --major-bg: #fff4e0;
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --serif: Georgia, 'Times New Roman', Times, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --img-filter: none;
  /* Rubriek colours: fill (white text on it) and label colour on the page background. */
  --c-modellen: #2f5d9e;  --c-modellen-ink: #2f5d9e;
  --c-robotica: #b4501a;  --c-robotica-ink: #a8470f;
  --c-hardware: #4a5568;  --c-hardware-ink: #475467;
  --c-energie: #a8750a;   --c-energie-ink: #8a5f06;
  --c-biotech: #2f7a5b;   --c-biotech-ink: #266a4e;
  --c-onderzoek: #6b4aa0; --c-onderzoek-ink: #5f3f94;
  --c-beleid: #8a2f45;    --c-beleid-ink: #8a2f45;
  --c-bedrijven: #1f6f7a; --c-bedrijven-ink: #1b636d;
  --rub: #4b5563;
  --rub-ink: #4b5563;
  /* Timeline (plan 43): rubriek colours as r g b triplets (glows need an alpha), card surface, shadow, glow strength. */
  --tl-rgb-default: 75 85 99;
  --tl-rgb-modellen: 47 93 158;
  --tl-rgb-robotica: 180 80 26;
  --tl-rgb-hardware: 74 85 104;
  --tl-rgb-energie: 168 117 10;
  --tl-rgb-biotech: 47 122 91;
  --tl-rgb-onderzoek: 107 74 160;
  --tl-rgb-beleid: 138 47 69;
  --tl-rgb-bedrijven: 31 111 122;
  --tl-accent-rgb: 200 16 46;
  --tl-major-rgb: 180 83 9;
  --tl-card: #ffffff;
  --tl-card-glass: rgb(255 255 255 / 0.88);
  --tl-shadow: 0 1px 3px rgb(17 19 24 / 0.08), 0 6px 18px rgb(17 19 24 / 0.06);
  --tl-glow-k: 0.55;
  --tl-orb-hot: #ff9aa8;
  /* bol.com product tile (plan 49b): title and price red, delivery green, stars orange, button blue. */
  --bol-red: #d40000;
  --bol-green: #007a00;
  --bol-star: #ff9600;
  --bol-star-empty: #cfcfcf;
  --bol-blue: #0000a4;
  color-scheme: light dark;
}

:root[data-theme='licht'] { color-scheme: light; }

:root[data-theme='donker'] {
  color-scheme: dark;
  --bg: #0f1013;
  --fg: #ececee;
  --muted: #a1a5af;
  --accent: #ff4d63;
  --accent-fg: #14080a;
  --link: #ff8b9b;
  --border: #2b2d33;
  --border-strong: #ececee;
  --surface: #181a1f;
  --major: #fbbf24;
  --major-bg: #2a2110;
  --img-filter: brightness(0.92);
  --c-modellen: #274b7f;  --c-modellen-ink: #8db4ec;
  --c-robotica: #8f4216;  --c-robotica-ink: #f0a477;
  --c-hardware: #3b4556;  --c-hardware-ink: #a9b4c6;
  --c-energie: #7d570a;   --c-energie-ink: #ecc15f;
  --c-biotech: #25614a;   --c-biotech-ink: #7fd0ab;
  --c-onderzoek: #54397f; --c-onderzoek-ink: #bda4ea;
  --c-beleid: #70283a;    --c-beleid-ink: #ee9cb0;
  --c-bedrijven: #1a5961; --c-bedrijven-ink: #78cbd6;
  --rub: #3a404b;
  --rub-ink: #aab0bc;
  --tl-rgb-default: 170 176 188;
  --tl-rgb-modellen: 141 180 236;
  --tl-rgb-robotica: 240 164 119;
  --tl-rgb-hardware: 169 180 198;
  --tl-rgb-energie: 236 193 95;
  --tl-rgb-biotech: 127 208 171;
  --tl-rgb-onderzoek: 189 164 234;
  --tl-rgb-beleid: 238 156 176;
  --tl-rgb-bedrijven: 120 203 214;
  --tl-accent-rgb: 255 77 99;
  --tl-major-rgb: 251 191 36;
  --tl-card: #181a1f;
  --tl-card-glass: rgb(24 26 31 / 0.72);
  --tl-shadow: 0 2px 14px rgb(0 0 0 / 0.45);
  --tl-glow-k: 1;
  --tl-orb-hot: #ffffff;
  --bol-red: #ff6b6b;
  --bol-green: #5cd65c;
  --bol-star: #ff9600;
  --bol-star-empty: #5a5f6a;
  --bol-blue: #0000a4;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme='auto'] {
    --bg: #0f1013;
    --fg: #ececee;
    --muted: #a1a5af;
    --accent: #ff4d63;
    --accent-fg: #14080a;
    --link: #ff8b9b;
    --border: #2b2d33;
    --border-strong: #ececee;
    --surface: #181a1f;
    --major: #fbbf24;
    --major-bg: #2a2110;
    --img-filter: brightness(0.92);
    --c-modellen: #274b7f;  --c-modellen-ink: #8db4ec;
    --c-robotica: #8f4216;  --c-robotica-ink: #f0a477;
    --c-hardware: #3b4556;  --c-hardware-ink: #a9b4c6;
    --c-energie: #7d570a;   --c-energie-ink: #ecc15f;
    --c-biotech: #25614a;   --c-biotech-ink: #7fd0ab;
    --c-onderzoek: #54397f; --c-onderzoek-ink: #bda4ea;
    --c-beleid: #70283a;    --c-beleid-ink: #ee9cb0;
    --c-bedrijven: #1a5961; --c-bedrijven-ink: #78cbd6;
    --rub: #3a404b;
    --rub-ink: #aab0bc;
    --tl-rgb-default: 170 176 188;
    --tl-rgb-modellen: 141 180 236;
    --tl-rgb-robotica: 240 164 119;
    --tl-rgb-hardware: 169 180 198;
    --tl-rgb-energie: 236 193 95;
    --tl-rgb-biotech: 127 208 171;
    --tl-rgb-onderzoek: 189 164 234;
    --tl-rgb-beleid: 238 156 176;
    --tl-rgb-bedrijven: 120 203 214;
    --tl-accent-rgb: 255 77 99;
    --tl-major-rgb: 251 191 36;
    --tl-card: #181a1f;
    --tl-card-glass: rgb(24 26 31 / 0.72);
    --tl-shadow: 0 2px 14px rgb(0 0 0 / 0.45);
    --tl-glow-k: 1;
    --tl-orb-hot: #ffffff;
    --bol-red: #ff6b6b;
    --bol-green: #5cd65c;
    --bol-star: #ff9600;
    --bol-star-empty: #5a5f6a;
    --bol-blue: #0000a4;
  }
}

/* Rubriek classes pick up the tokens above, so they follow every theme mode. */
.cat-modellen   { --rub: var(--c-modellen);   --rub-ink: var(--c-modellen-ink); }
.cat-robotica   { --rub: var(--c-robotica);   --rub-ink: var(--c-robotica-ink); }
.cat-hardware   { --rub: var(--c-hardware);   --rub-ink: var(--c-hardware-ink); }
.cat-energie    { --rub: var(--c-energie);    --rub-ink: var(--c-energie-ink); }
.cat-biotech    { --rub: var(--c-biotech);    --rub-ink: var(--c-biotech-ink); }
.cat-onderzoek  { --rub: var(--c-onderzoek);  --rub-ink: var(--c-onderzoek-ink); }
.cat-beleid     { --rub: var(--c-beleid);     --rub-ink: var(--c-beleid-ink); }
.cat-bedrijven  { --rub: var(--c-bedrijven);  --rub-ink: var(--c-bedrijven-ink); }

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; padding-block: 1.25rem 3rem; }

.wrap { width: 100%; max-width: 75rem; margin-inline: auto; padding-inline: 1rem; }
.narrow { max-width: 46rem; }

a { color: var(--link); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

img { max-width: 100%; }

h1, h2, h3, h4 { line-height: 1.2; }
/* Long Dutch compounds ("onderzoeksproblemen") must not push narrow cards past the viewport:
   hyphenate them (needs lang="nl"), and break them anyway where the browser has no dictionary. */
h1, h2, h3, h4, .story-title, .compact-list a {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
}
h1 { font-family: var(--serif); font-size: 2rem; margin-block: 0.25rem 0.75rem; }
h2 { font-size: 1.35rem; margin-block: 2rem 0.75rem; }
h3 { font-size: 1.1rem; margin-block: 0.75rem 0.25rem; }
h4 { font-size: 1.05rem; margin-block: 1rem 0.25rem; }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-fg); padding: 0.5rem 1rem; z-index: 10; }
.skip-link:focus { left: 0; }

/* ---------- Masthead & section bar ---------- */
.masthead { background: var(--bg); }
.masthead-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  padding-block: 0.8rem 0.55rem;
}
.brand { text-decoration: none; color: var(--fg); display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.75rem; line-height: 1; }
.brand-name { font-family: var(--font); font-weight: 900; letter-spacing: -0.045em; font-size: 2.1rem; text-transform: uppercase; color: var(--fg); }
.brand-name::first-letter { color: var(--accent); }
/* Masthead logo font (public/fonts/wattba-logo.woff): the W of the X profile photo plus A, T and B from Segoe UI Black,
   so the logo is the same on every device and rendered as text. Other characters fall back to --font.
   /fonts/* is cached for a year: bump ?v= when the font file changes. */
@font-face { font-family: 'WATTBA logo'; src: url('../fonts/wattba-logo.woff?v=1') format('woff'); font-weight: 900; font-display: block; }
.brand-logo { font-family: 'WATTBA logo', var(--font); font-synthesis: none; }
.brand-tagline { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.01em; }
.masthead-search { display: flex; align-items: stretch; flex: 0 1 15rem; min-width: 0; max-width: 15rem; margin: 0; }
.search-input {
  flex: 1 1 auto; min-width: 0; width: 100%; box-sizing: border-box; margin: 0; padding: 0.3rem 0.6rem;
  font: inherit; font-size: 0.85rem; line-height: 1.2; color: var(--fg); background: var(--bg);
  border: 1px solid var(--border-strong); border-right: 0; border-radius: 999px 0 0 999px;
  -webkit-appearance: none; appearance: none;
}
.search-input::placeholder { color: var(--muted); opacity: 1; }
.search-button {
  flex: none; margin: 0; padding: 0.3rem 0.8rem; font: inherit; font-size: 0.8rem; font-weight: 700; line-height: 1.2;
  color: var(--bg); background: var(--fg); border: 1px solid var(--border-strong); border-radius: 0 999px 999px 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
/* Magnifying glass instead of the word "Zoek" (owner); the word stays for screen readers. */
.search-icon { display: block; width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.search-button:hover, .search-button:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
/* One focus ring around the whole field and button (owner), in the pill shape; the button shows its own focus
   by turning red, so keyboard users still see which of the two is active. */
.masthead-search { border-radius: 999px; }
.masthead-search:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.masthead-search :focus-visible { outline: none; }

.section-bar { border-block: 3px solid var(--accent); border-bottom-width: 1px; border-bottom-color: var(--border); background: var(--bg); position: sticky; top: 0; z-index: 5; }
.section-bar .wrap { padding-inline: 0; }
/* Reading progress on article pages (site.js sets --read-progress 0..1): a second red line directly under
   the red top line fills up as you read; the top line itself stays as it is. */
.section-bar.has-progress::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none;
  background: var(--accent); transform: scaleX(var(--read-progress, 0)); transform-origin: left center;
}
.section-bar ul {
  list-style: none; margin: 0; padding: 0 1rem;
  display: flex; gap: 0.1rem; overflow-x: auto; white-space: nowrap;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.section-bar ul::-webkit-scrollbar { display: none; }
.section-bar a {
  display: block; padding: 0.7rem 0.7rem 0.6rem; color: var(--fg); text-decoration: none;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  border-bottom: 3px solid transparent;
}
.section-bar a:hover { color: var(--accent); }
.section-bar a[aria-current='page'] { border-bottom-color: var(--accent); color: var(--accent); }
.section-bar li:first-child a { padding-left: 0; }

/* Theme switch: segmented control, icons only on small screens. */
.masthead-side { display: flex; align-items: center; gap: 0.5rem 1.25rem; }
.masthead-tools { display: flex; align-items: center; gap: 0.5rem; }
.admin-link { position: relative; display: inline-flex; align-items: center; height: 1.6rem; padding: 0 0.7rem; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--muted); text-decoration: none; font-size: 0.75rem; font-weight: 600; line-height: 1; white-space: nowrap; }
.admin-link:hover, .admin-link:focus-visible { color: var(--fg); border-color: currentColor; }
.admin-badge { position: absolute; top: -0.45rem; right: -0.45rem; min-width: 1.05rem; height: 1.05rem; padding: 0 0.25rem; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: 0.62rem; font-weight: 700; line-height: 1.05rem; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.theme-switch ul { list-style: none; margin: 0; padding: 0; display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; }
.theme-switch a {
  display: flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; padding: 0;
  color: var(--muted); text-decoration: none; font-size: 0.75rem; font-weight: 600; line-height: 1;
}
.theme-switch li + li a { border-left: 1px solid var(--border); }
.theme-switch a:hover { background: var(--surface); }
.theme-switch a[aria-current='true'] { background: var(--fg); color: var(--bg); }
.theme-switch a:focus-visible { outline-offset: -3px; }
.theme-icon { font-size: 0.8rem; }
/* Language menu (plan 82): the flag of this site next to the theme switch, as tall as the theme switch. Click it and a small list
   with both languages opens (details/summary, no JavaScript needed). The flags are own SVG files (img), so they look the same in all
   three themes; the outline gives the white band of the Dutch flag an edge. */
.lang-menu { position: relative; }
.lang-switch { display: inline-flex; align-items: center; justify-content: center; height: 1.6rem; padding: 0 0.45rem; border: 1px solid var(--border-strong); border-radius: 999px; line-height: 0; cursor: pointer; list-style: none; }
.lang-switch::-webkit-details-marker { display: none; }
.lang-switch:hover, .lang-menu[open] > .lang-switch { background: var(--surface); }
.lang-flag { display: block; width: 1.2rem; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px var(--border); }
/* English: the UK and EU flags side by side in one image (owner, 2026-10-25), so it is wider; each flag has its own thin border in the SVG. */
.lang-flag-wide { width: 2.5rem; border-radius: 0; box-shadow: none; }
.lang-list { position: absolute; right: 0; top: calc(100% + 0.35rem); z-index: 30; min-width: 9rem; margin: 0; padding: 0.25rem; list-style: none; background: var(--bg); color: var(--fg); border: 1px solid var(--border-strong); border-radius: 0.5rem; box-shadow: 0 4px 14px rgb(0 0 0 / 0.15); }
.lang-option { display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.55rem; border-radius: 0.35rem; color: inherit; text-decoration: none; font-size: 0.9rem; line-height: 1.2; }
a.lang-option:hover, a.lang-option:focus-visible { background: var(--surface); }
.lang-option[aria-current='true'] { font-weight: 600; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--surface); border-top: 3px solid var(--accent); color: var(--muted); font-size: 0.9rem; padding-block: 2rem 2.5rem; margin-top: 2rem; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.site-footer h2 { margin: 0 0 0.5rem; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg); }
.site-footer ul { list-style: none; margin: 0; padding: 0; columns: 2; }
.site-footer li { margin-block: 0.2rem; break-inside: avoid; }
.site-footer a { color: var(--fg); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .brand-name { margin: 0 0 0.4rem; font-size: 1.5rem; }
.footer-note { margin: 0; max-width: 34ch; }
.footer-disclaimer { margin: 1.75rem 0 0; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.82rem; max-width: 80ch; }
.footer-disclaimer a { color: var(--fg); }

/* ---------- Shared bits ---------- */
.kicker { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; margin: 0 0 0.3rem; font-size: 0.8rem; color: var(--muted); }
.admin-edit { margin-left: auto; padding: 0.1rem 0.6rem; border: 1px solid var(--muted); border-radius: 999px; color: var(--muted); text-decoration: none; font-weight: 600; }
.admin-edit:hover, .admin-edit:focus-visible { color: var(--fg); border-color: currentColor; }
/* "Voorpagina: aan/uit" next to "Bewerken" (admins only): the pair sits on the right, the toggle looks like the link. */
.admin-tools { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }
.admin-tools .admin-edit { margin-left: 0; }
/* "Claude" menu next to "Bewerken" (admins only): a <details> dropdown that overlays the content. */
.claude-menu { position: relative; display: inline-block; }
.claude-menu summary { list-style: none; cursor: pointer; }
.claude-summary { display: inline-flex; align-items: center; gap: 0.3rem; }
.claude-summary img { width: 0.9rem; height: 0.9rem; }
.claude-menu summary::-webkit-details-marker { display: none; }
.claude-menu summary::after { content: " \25BE"; }
.claude-menu[open] summary { color: var(--fg); border-color: currentColor; }
.claude-menu ul { position: absolute; right: 0; top: calc(100% + 0.3rem); z-index: 20; min-width: 12rem; margin: 0; padding: 0.3rem; list-style: none; background: var(--bg); border: 1px solid var(--border); border-radius: 0.5rem; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.claude-menu li a { display: block; padding: 0.35rem 0.6rem; border-radius: 0.35rem; color: var(--fg); text-decoration: none; font-weight: 600; white-space: nowrap; }
.claude-menu li a:hover, .claude-menu li a:focus-visible { background: var(--border); }
/* "Publiceer nu" (owner, 2026-10-26): the same dropdown, its one item a submit button that confirms. */
.publish-menu summary { color: var(--accent); border-color: var(--accent); }
.publish-menu li button { display: block; width: 100%; padding: 0.35rem 0.6rem; border: 0; border-radius: 0.35rem; background: transparent; color: var(--accent); font: inherit; font-weight: 600; text-align: left; white-space: nowrap; cursor: pointer; }
.publish-menu li button:hover, .publish-menu li button:focus-visible { background: var(--border); }
/* Share menu at the top right of an article (plan 93): a round icon button with a <details> dropdown. */
.share-menu { position: relative; display: inline-block; margin-left: auto; }
.share-menu + .admin-tools { margin-left: 0; }
.share-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border: 1px solid var(--muted); border-radius: 999px; color: var(--muted); }
.share-menu summary::-webkit-details-marker { display: none; }
.share-menu summary:hover, .share-menu summary:focus-visible, .share-menu[open] summary { color: var(--fg); border-color: currentColor; }
.share-menu ul { position: absolute; right: 0; top: calc(100% + 0.3rem); z-index: 20; min-width: 11rem; margin: 0; padding: 0.3rem; list-style: none; background: var(--bg); border: 1px solid var(--border); border-radius: 0.5rem; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.share-menu li a, .share-menu li button { display: block; width: 100%; box-sizing: border-box; padding: 0.35rem 0.6rem; border: 0; border-radius: 0.35rem; background: transparent; color: var(--fg); font: inherit; font-size: 0.88rem; font-weight: 600; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; }
.share-menu li a:hover, .share-menu li a:focus-visible, .share-menu li button:hover, .share-menu li button:focus-visible { background: var(--border); }
.share-menu li button[hidden] { display: none; }
.admin-toggle { background: transparent; font: inherit; font-weight: 600; line-height: inherit; cursor: pointer; }
.admin-toggle.is-on { color: var(--accent); border-color: var(--accent); }
.cat-label, .type-label {
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; text-decoration: none;
}
.cat-label { color: var(--rub-ink); }
a.cat-label:hover { text-decoration: underline; }
.type-label { color: var(--fg); border: 1px solid var(--border-strong); padding: 0 0.35rem; border-radius: 2px; }
.ts, time.ts { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.time-list .ts { white-space: normal; }
.meta { color: var(--muted); font-size: 0.9rem; margin: 0 0 0.25rem; }
.empty { color: var(--muted); }

/* Media: always 16:9 so grids do not jump. */
.media-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface); }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  border-top: 3px solid var(--rub, var(--accent)); padding-top: 0.45rem; margin: 2.25rem 0 1rem;
}
.section-head h2 { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.005em; }
.section-head h2 a { color: var(--fg); text-decoration: none; }
.section-head h2 a:hover { text-decoration: underline; }
.section-more { font-size: 0.85rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.section-more:hover { text-decoration: underline; }

/* ---------- Story cards ---------- */
.story { display: block; min-width: 0; }
.story-media { display: block; margin-bottom: 0.55rem; }
.story-title { font-family: var(--serif); font-size: 1.08rem; font-weight: 700; line-height: 1.22; margin: 0; }
.story-title a, .top-body h1 a, .news-text h3 a, .time-list h3 a { color: var(--fg); text-decoration: none; }
.story-title a:hover, .top-body h1 a:hover, .news-text h3 a:hover, .time-list h3 a:hover, .compact-list a:hover { text-decoration: underline; }
.story-lead { color: var(--muted); margin: 0.4rem 0 0; font-size: 0.95rem; }
.story-big .story-title { font-size: 1.5rem; }

/* ---------- Front page ---------- */
.front { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.top-story { display: block; }
.top-media { display: block; margin-bottom: 0.75rem; }
.top-body h1 { font-size: 1.85rem; font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 0.5rem; }
.top-lead { font-size: 1.1rem; line-height: 1.45; margin: 0 0 0.6rem; color: var(--fg); }
.top-intro p { font-size: 1rem; line-height: 1.6; margin: 0 0 0.7rem; color: var(--fg); }
.top-intro a { color: var(--link); }
/* Narrow screens (one column, nothing to fill): only the first three paragraphs. Wide screens: see 1024px. */
.top-intro p:nth-of-type(n+4) { display: none; }
.top-body .top-more { margin: 0 0 0.6rem; font-size: 0.95rem; }
.byline-small { margin: 0; font-size: 0.82rem; color: var(--muted); }

.secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }

.latest-box, .side-box { background: var(--surface); padding: 0.9rem 1rem 1rem; border-top: 3px solid var(--accent); }
.side-box { margin-top: 1.25rem; }
.box-title { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.35rem; }
.time-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
/* Each item is a card: the article image (16:9, like everywhere) with the title in white over a dark gradient. */
.time-list li { position: relative; overflow: hidden; border-radius: 0.375rem; background: #000; }
.latest-card-text {
  position: absolute; inset-inline: 0; bottom: 0; padding: 1rem 0.6rem 0.4rem;
  background: linear-gradient(to top, rgb(0 0 0 / 0.9) 0%, rgb(0 0 0 / 0.6) 55%, rgb(0 0 0 / 0) 100%);
}
/* No image: the card is no overlay on a photo, the text sits in the black card itself. */
.time-list li.is-text-only .latest-card-text { position: static; background: none; padding: 0.6rem; }
.latest-card-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4rem; margin: 0; line-height: 1.3; }
.time-list .ts { font-weight: 600; font-size: 0.68rem; color: rgb(255 255 255 / 0.8); }
/* White on the photo; positioned so it stays clickable above the stretched title link. */
.time-list .cat-label { font-size: 0.62rem; color: #fff; position: relative; }
/* The whole title, never cut off (owner): a long one just grows further up over the image. */
.time-list h3 { font-family: var(--serif); font-size: 0.875rem; font-weight: 700; line-height: 1.2; margin: 0; }
.time-list h3 a { color: #fff; }
/* Stretch the title link over the whole card, so the card is clickable. */
.time-list h3 a::after { content: ''; position: absolute; inset: 0; }
.more { margin: 0.5rem 0 0; font-size: 0.88rem; font-weight: 600; }
.more a { text-decoration: none; }
.more a:hover { text-decoration: underline; }

.mini-timeline { list-style: none; margin: 0; padding: 0; }
.mini-timeline li { padding-block: 0.45rem; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; font-size: 0.92rem; line-height: 1.3; }
.mini-timeline li:last-child { border-bottom: 0; }
.mini-timeline time { font-size: 0.75rem; color: var(--muted); }

.cat-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 1.5rem; }
.compact-list { list-style: none; margin: 0; padding: 0; align-self: start; }
.compact-list li { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: 0.5rem; padding-block: 0.7rem; border-top: 1px solid var(--border); }
.compact-list li:first-child { border-top: 0; padding-top: 0; }
.compact-list a { font-family: var(--serif); font-weight: 700; line-height: 1.25; color: var(--fg); text-decoration: none; }
.compact-list .ts { padding-top: 0.15rem; }

.empty-front { max-width: 46rem; padding-block: 2rem; border-bottom: 1px solid var(--border); }
.empty-front h1 { font-size: 2.4rem; }

/* ---------- Lists ---------- */
.list-head { border-bottom: 1px solid var(--border); padding-bottom: 0.75rem; margin-bottom: 0.5rem; border-top: 3px solid var(--rub, var(--accent)); padding-top: 0.6rem; }
.list-head .kicker { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-size: 0.74rem; }
.list-head h1 { font-size: 2.1rem; margin-bottom: 0.25rem; }
.list-intro { margin: 0; color: var(--muted); max-width: 60ch; }
.page-main { max-width: 52rem; }

.news-list, .post-list { list-style: none; padding: 0; margin: 0; }
.news-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.85rem; padding-block: 1rem; border-bottom: 1px solid var(--border); }
.news-thumb { display: block; }
/* No image (plan 55): the text takes the full width, no empty thumbnail column. */
.news-row.is-text-only { grid-template-columns: minmax(0, 1fr); }
.news-text h3 { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; line-height: 1.22; margin: 0.05rem 0 0; }
.news-lead { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.95rem; display: none; }
.news-text .ts { font-size: 0.78rem; }
.post-list li { padding-block: 0.9rem; border-bottom: 1px solid var(--border); }
.post-list h3 { font-family: var(--serif); margin-block: 0 0.1rem; }
.post-list p { margin-block: 0.25rem; }

.pagination { margin-block: 1.5rem; }
.pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0; }
.pagination a, .pagination span { display: inline-block; padding: 0.25rem 0.7rem; border: 1px solid var(--border); border-radius: 3px; text-decoration: none; color: var(--fg); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.pagination a:hover { border-color: var(--accent); color: var(--accent); }
.pagination [aria-current='page'] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 700; }
.pagination .disabled { color: var(--muted); }

.author-box { background: var(--surface); border-left: 3px solid var(--accent); padding: 0.75rem 1rem; margin-block: 0.75rem; }

/* Pen-name portraits in their own aspect ratio (no crop) in two sizes: profile, byline. */
.pen-name-portrait { display: block; height: auto; border-radius: 0.375rem; border: 1px solid var(--border); background: var(--surface); flex: none; }
.pen-name-portrait-lg { width: 100%; }

/* Profile page /auteur/{slug}: name across the top; below it the bio left and the portrait right, tops aligned. */
.pen-profile { max-width: 52rem; }
.pen-profile-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 2rem; align-items: start; }
.pen-profile-head.has-photo { grid-template-columns: minmax(0, 1fr) 15rem; grid-template-areas: "title title" "bio photo"; }
.has-photo .pen-profile-title { grid-area: title; }
/* Bio top margin (1rem) + half the bio's leading ((1.7 - 1) x 1.05rem / 2), so the photo lines up with the letters. */
.has-photo .pen-profile-photo { grid-area: photo; margin-top: calc(1rem + 0.37rem); }
.has-photo .pen-profile-bio { grid-area: bio; }
/* Small square photo left of kicker, name and meta (only when the pen name has one). */
.pen-profile-title { display: flex; align-items: center; gap: 1rem; }
.pen-profile-title-text { min-width: 0; }
.pen-profile-avatar { width: 84px; flex: none; }
.pen-profile-kicker { margin: 0 0 0.3rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.pen-profile-title h1 { margin: 0; }
.pen-profile-meta { margin: 0.4rem 0 0; color: var(--muted); }
.pen-profile-bio { margin: 1rem 0 0; font-size: 1.05rem; line-height: 1.7; max-width: 62ch; }
.pen-name-portrait-xs { width: 40px; border-radius: 0.25rem; }
/* Hover card with a larger byline photo (public/js/site.js, desktop only). */
.photo-card {
  position: absolute; z-index: 50; padding: 0.45rem; background: var(--bg); border: 1px solid var(--border);
  border-radius: 0.5rem; box-shadow: 0 10px 30px rgb(0 0 0 / 0.25); pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.photo-card.is-open { opacity: 1; visibility: visible; transform: none; }
.photo-card img { display: block; width: 200px; height: auto; border-radius: 0.3rem; }
.photo-card-name { display: block; margin-top: 0.35rem; font-size: 0.8rem; color: var(--muted); text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .photo-card { transition: none; }
}
/* The profile portrait next to the bio opens full size in a modal (public/js/site.js); without JS the link opens the image itself. */
.photo-zoom { display: block; flex: none; cursor: zoom-in; }
.photo-zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 0.375rem; }
.photo-zoom-dialog {
  max-width: none; max-height: none; width: 100%; height: 100%; margin: 0; padding: 1rem; border: 0;
  background: transparent; display: none; align-items: center; justify-content: center;
  cursor: zoom-out;
}
.photo-zoom-dialog[open] { display: flex; }
.photo-zoom-dialog::backdrop { background: rgb(0 0 0 / 0.85); }
.photo-zoom-dialog img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 0.375rem; }
.photo-zoom-close {
  position: absolute; top: 0.75rem; right: 0.75rem; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%;
  background: rgb(255 255 255 / 0.15); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.photo-zoom-close:hover, .photo-zoom-close:focus-visible { background: rgb(255 255 255 / 0.3); }
:root:has(.photo-zoom-dialog[open]) { overflow: hidden; }
/* Overview /auteurs: grid of cards with the square small photo (or initials), name and rubrieken. */
.pen-grid { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.5rem 1rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.pen-card { display: block; color: var(--fg); text-decoration: none; }
.pen-card:hover .pen-card-name, .pen-card:focus-visible .pen-card-name { text-decoration: underline; }
.pen-card-photo { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 0.375rem; border: 1px solid var(--border); background: var(--surface); }
.pen-card-initials { display: flex; align-items: center; justify-content: center; font-size: 2.5rem; font-weight: 700; letter-spacing: 0.02em; color: var(--muted); }
.pen-card-name { display: block; margin-top: 0.6rem; font-weight: 700; }
.pen-card-meta { display: block; margin-top: 0.15rem; font-size: 0.85rem; color: var(--muted); }

/* ---------- Article page ---------- */
.breadcrumb { margin-bottom: 0.75rem; font-size: 0.82rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0; color: var(--muted); }
.breadcrumb li + li::before { content: '\203A'; margin-right: 0.25rem; }
.breadcrumb a { color: var(--muted); }

.article { max-width: 46rem; margin-inline: auto; }
.article-head h1 { font-size: 2.1rem; line-height: 1.12; letter-spacing: -0.015em; margin-block: 0.35rem 0.75rem; }
.article-head .lead-text { font-size: 1.2rem; line-height: 1.45; font-weight: 500; color: var(--fg); margin: 0 0 1rem; }
.byline { display: flex; align-items: center; gap: 0.75rem; margin: 0; padding-block: 0.6rem; border-block: 1px solid var(--border); color: var(--muted); font-size: 0.88rem; }
/* Author on the first line, date (and "Bijgewerkt") on the second, next to the portrait. */
.byline-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.byline a { color: var(--fg); }
.byline-time { font-variant-numeric: tabular-nums; }
.updated-note { font-style: italic; }
.ai-disclosure { color: var(--muted); font-size: 0.85rem; margin: 0.6rem 0 0; padding: 0.5rem 0.75rem; background: var(--surface); border-left: 3px solid var(--rub-ink, var(--accent)); }
.ai-disclosure a { color: var(--fg); }

figure.article-image { margin: 1.25rem 0; }
figure.article-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface); }
figure.article-image figcaption { font-size: 0.8rem; color: var(--muted); margin-top: 0.35rem; }

.prose { overflow-wrap: break-word; font-size: 1.1rem; line-height: 1.7; max-width: 70ch; margin-top: 1.25rem; }
.prose p { margin-block: 0 1.1em; }
.prose h2 { font-family: var(--serif); font-size: 1.5rem; margin-block: 1.8em 0.5em; padding-top: 0.2em; }
.prose h3 { font-family: var(--serif); font-size: 1.25rem; margin-block: 1.5em 0.4em; }
.prose ul, .prose ol { padding-left: 1.4rem; margin-block: 0 1.1em; }
.prose li { margin-block: 0.3em; }
.prose img, .prose video { max-width: 100%; height: auto; }
.prose pre { overflow-x: auto; background: var(--surface); padding: 0.75rem; border-radius: 4px; font-size: 0.9rem; line-height: 1.5; }
.prose code { font-family: var(--mono); font-size: 0.88em; background: var(--surface); padding: 0.05em 0.3em; border-radius: 3px; }
.prose pre code { background: none; padding: 0; }
.prose blockquote { margin: 1.4em 0; padding: 0.2em 0 0.2em 1.1rem; border-left: 4px solid var(--accent); font-family: var(--serif); font-size: 1.2rem; font-style: italic; line-height: 1.5; }
.prose blockquote p { margin: 0; }
.prose a { text-underline-offset: 2px; }
/* Ads placed inside the text (plan 49b, block since 49d) keep their own line height instead of the prose one. */
.prose .ad-block .ad { line-height: 1.45; }
.prose figure.body-image { margin: 1.6rem 0; }
.prose figure.body-image img { display: block; width: 100%; height: auto; background: var(--surface); }
.prose figure.body-image figcaption { font-size: 0.8rem; line-height: 1.4; color: var(--muted); margin-top: 0.35rem; }
/* YouTube video in the text (plan 71): a still image with a play button; the player only loads after a click (public/js/site.js).
   Not scoped to .prose: the AI panel of the on-page editor shows the same markup. The box is dark in every theme. */
figure.body-video { margin: 1.6rem 0; }
figure.body-video figcaption { font-size: 0.8rem; line-height: 1.4; color: var(--muted); margin-top: 0.35rem; }
figure.body-video .video-note { font-size: 0.8rem; line-height: 1.4; color: var(--muted); margin: 0.35rem 0 0; }
.ie-rendered figure.body-video { margin: 0.5rem 0; }
.video-facade, .video-frame { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0d0f13; }
.video-facade { color: #fff; text-decoration: none; }
.video-facade.is-empty { background: linear-gradient(135deg, #1d222b, #0d0f13); }
figure.body-video .video-facade img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.video-play { position: absolute; top: 50%; left: 50%; width: 4.25rem; height: 4.25rem; margin: -2.125rem 0 0 -2.125rem; border-radius: 50%; background: rgb(0 0 0 / 0.7); }
.video-play::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-style: solid; border-width: 0.8rem 0 0.8rem 1.35rem; border-color: transparent transparent transparent #fff; transform: translate(-35%, -50%); }
.video-facade:hover .video-play, .video-facade:focus-visible .video-play { background: var(--accent); }
.video-facade:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.video-label { position: absolute; left: 0.5rem; bottom: 0.5rem; padding: 0.15rem 0.5rem; font-size: 0.75rem; line-height: 1.4; color: #fff; background: rgb(0 0 0 / 0.7); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Explanation block (plan 59): <explanation title="..."> in the markdown body. */
.prose aside.explanation, .ie-rendered aside.explanation { margin: 1.6rem 0; padding: 0.9rem 1.1rem; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 4px; font-size: 1rem; line-height: 1.6; }
.prose aside.explanation .explanation-title, .ie-rendered aside.explanation .explanation-title { margin: 0 0 0.4em; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.prose aside.explanation > :last-child, .ie-rendered aside.explanation > :last-child { margin-bottom: 0; }
.prose aside.explanation .explanation-glossary { margin-top: 0.7em; font-size: 0.85rem; color: var(--muted); }
.prose hr { border: 0; border-top: 1px solid var(--border); margin-block: 2em; }

.sources { margin-top: 2rem; padding: 0.9rem 1rem 1rem; background: var(--surface); border-top: 3px solid var(--fg); max-width: 70ch; }
.sources h2 { margin: 0 0 0.4rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }
.sources ol { padding-left: 1.25rem; margin: 0.25rem 0 0; }
.sources li { margin-block: 0.3rem; overflow-wrap: anywhere; font-size: 0.95rem; }

.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 1.25rem 0 0; }
.tags a { display: inline-block; font-size: 0.85rem; text-decoration: none; color: var(--fg); background: var(--surface); border: 1px solid var(--border); padding: 0.15rem 0.7rem; border-radius: 999px; }
.tags a:hover { border-color: var(--accent); color: var(--accent); }

.share { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.share h2 { margin: 0 0 0.5rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.share ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; }
.share a { display: inline-block; padding: 0.4rem 0.9rem; border: 1px solid var(--border-strong); color: var(--fg); text-decoration: none; font-size: 0.88rem; font-weight: 600; border-radius: 3px; }
.share a:hover { background: var(--fg); color: var(--bg); }

/* "More" block under an article: no heading, so a divider of its own. */
.related-more { margin-top: 2.25rem; padding-top: 1rem; border-top: 3px solid var(--accent); }
.related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; }

/* ---------- Timeline (plan 43): a journey towards the singularity ----------
   Follows the theme (light, dark, auto): every colour comes from the tokens at the top of this file (--bg, --fg, --accent,
   --border, --tl-* ...), nothing here is hard-coded to one theme. A horizontal track, oldest left, newest right, on a calm
   full-width stage (faint grid, a red glow towards the singularity at the right); the detail text appears on click
   (public/js/site.js). Everything is visible without JS; the script adds filtering, gap labels, the glow progress and the
   entrance animation. */

/* The stage takes the width of the viewport through negative margins (50% of its container minus 50vw). With a classic
   vertical scrollbar 100vw is a few pixels wider than the visible page, so the body clips horizontally while a stage is on
   the page (overflow-x: clip; the viewport treats it as hidden, which does not break the sticky section bar). Browsers
   without :has() simply keep a few pixels of overflow. */
body:has(.tl-band) { overflow-x: hidden; overflow-x: clip; }

.tl-band {
  --tl-line-y: 3.75rem; /* height of the line inside the track */
  --tl-gutter: 1.25rem; /* space between two stops */
  --tl-end-w: 13rem; /* width of the singularity stop */
  --tl-orb: 7.5rem;
  --tl-pad: max(1rem, calc((100vw - 75rem) / 2 + 1rem)); /* aligns the first stop with the .wrap column */
  --tl-progress: 0.5; /* the script sets this on the element: 0 at the start, 1 at the end of the track */
  --glow-rgb: var(--tl-rgb-default);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 calc(50% - 50vw);
  padding-bottom: 2.5rem;
}
/* The floor: a faint perspective grid in the border colour that fades towards the horizon. */
.tl-band::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -25%;
  right: -25%;
  bottom: 0;
  height: 70%;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  transform: perspective(28rem) rotateX(58deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 92%);
  mask-image: linear-gradient(to top, #000, transparent 92%);
  pointer-events: none;
}
/* The singularity pulls the light: a red glow at the right edge that grows with the scroll position. */
.tl-band::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -20%;
  bottom: -20%;
  right: -10%;
  width: 55%;
  background: radial-gradient(ellipse 100% 60% at 100% 50%, rgb(var(--tl-accent-rgb) / 0.15), rgb(var(--tl-accent-rgb) / 0.04) 45%, transparent 72%);
  pointer-events: none;
}
@supports (width: calc(1% + 1% * 0.5)) {
  .tl-band::after {
    width: calc(35% + 40% * var(--tl-progress));
    background: radial-gradient(ellipse 100% 60% at 100% 50%, rgb(var(--tl-accent-rgb) / calc((0.1 + 0.3 * var(--tl-progress)) * var(--tl-glow-k))), rgb(var(--tl-accent-rgb) / calc(0.05 * var(--tl-glow-k))) 45%, transparent 72%);
  }
}

/* Rubriek hues: darker in the light theme, brighter in the dark theme (tokens at the top of the file). */
.tl-band .cat-modellen  { --glow-rgb: var(--tl-rgb-modellen); }
.tl-band .cat-robotica  { --glow-rgb: var(--tl-rgb-robotica); }
.tl-band .cat-hardware  { --glow-rgb: var(--tl-rgb-hardware); }
.tl-band .cat-energie   { --glow-rgb: var(--tl-rgb-energie); }
.tl-band .cat-biotech   { --glow-rgb: var(--tl-rgb-biotech); }
.tl-band .cat-onderzoek { --glow-rgb: var(--tl-rgb-onderzoek); }
.tl-band .cat-beleid    { --glow-rgb: var(--tl-rgb-beleid); }
.tl-band .cat-bedrijven { --glow-rgb: var(--tl-rgb-bedrijven); }

.tl-inner { max-width: 75rem; margin-inline: auto; padding-inline: 1rem; }

/* The star control (links without JS): filled stars = the minimum impact. */
.tl-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin-top: 1.1rem; }
.tl-controls-label { font: 0.72rem/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.tl-rating { display: flex; gap: 0.1rem; }
.tl-rating a { display: inline-flex; padding: 0.3rem; line-height: 0; border-radius: 0.6rem; }
.tl-star { width: 1.7rem; height: 1.7rem; overflow: visible; }
.tl-star path { fill: transparent; stroke: var(--muted); stroke-width: 1.6; stroke-linejoin: round; transition: fill 0.15s ease, stroke 0.15s ease; }
.tl-rating a.is-on .tl-star { filter: drop-shadow(0 0 0.35rem rgb(var(--tl-major-rgb) / calc(0.6 * var(--tl-glow-k)))); }
.tl-rating a.is-on .tl-star path { fill: var(--major); stroke: var(--major); }
@media (hover: hover) {
  /* Hovering star N previews N filled stars. */
  .tl-rating:hover a .tl-star path { fill: var(--major); stroke: var(--major); }
  .tl-rating:hover a .tl-star { filter: drop-shadow(0 0 0.35rem rgb(var(--tl-major-rgb) / calc(0.6 * var(--tl-glow-k)))); }
  .tl-rating:hover a:hover ~ a .tl-star path { fill: transparent; stroke: var(--muted); }
  .tl-rating:hover a:hover ~ a .tl-star { filter: none; }
}
.tl-rating-text { margin: 0; font: 0.85rem/1.3 var(--mono); color: var(--fg); }
.tl-none { margin: 1.25rem 0 0; color: var(--muted); }
.tl-empty { display: none; }
.is-empty .tl-empty { display: block; }

/* The track */
.tl-frame { position: relative; margin-top: 1rem; }
.tl-frame::before, .tl-frame::after { content: ''; position: absolute; top: 0; bottom: 0; width: 2.5rem; z-index: 2; pointer-events: none; }
.tl-frame::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.tl-frame::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.tl-scroller {
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--tl-pad);
  padding-block: 2.5rem 1.25rem; scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.tl-track {
  position: relative; display: flex; align-items: flex-start; gap: var(--tl-gutter);
  width: max-content; min-width: 100%; margin: 0; padding: 0 var(--tl-pad); list-style: none;
}
/* The line: quiet at the left, red and bright at the right, ending in the singularity; ::after is the blurred glow of it. */
.tl-track::before, .tl-track::after {
  content: ''; position: absolute; left: 0; right: calc(var(--tl-pad) + var(--tl-end-w) / 2); top: var(--tl-line-y);
  height: 2px; transform: translateY(-50%);
  background: linear-gradient(90deg, var(--border), rgb(var(--tl-accent-rgb) / 0.55) 60%, var(--accent) 92%, var(--accent));
}
.tl-track::after { height: 8px; filter: blur(6px); opacity: calc(0.9 * var(--tl-glow-k)); }

.tl-stop {
  position: relative; flex: 0 0 auto; width: 13.5rem; padding-top: calc(var(--tl-line-y) + 1.2rem); scroll-snap-align: center;
  --glow-rgb: var(--tl-rgb-default);
}
.tl-stop.impact-1, .tl-stop.impact-2, .tl-stop.impact-3 { width: 11.5rem; }
.tl-stop.impact-5 { width: 16rem; }
.tl-stop.is-filtered, .tl-detail.is-filtered { display: none !important; }
/* The dot on the line follows the impact (size and glow), with a stem down to the card. */
.tl-stop::before {
  content: ''; position: absolute; left: 50%; top: var(--tl-line-y); width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--muted); transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0.5rem 0.05rem rgb(var(--glow-rgb) / calc(0.5 * var(--tl-glow-k)));
}
.tl-stop::after {
  content: ''; position: absolute; left: 50%; top: var(--tl-line-y); width: 1px; height: 1.2rem;
  background: linear-gradient(rgb(var(--glow-rgb) / 0.7), transparent);
}
.tl-stop.impact-4::before { width: 0.8rem; height: 0.8rem; background: rgb(var(--glow-rgb)); box-shadow: 0 0 0 3px var(--bg), 0 0 0.9rem 0.2rem rgb(var(--glow-rgb) / calc(0.7 * var(--tl-glow-k))); }
.tl-stop.impact-5::before { width: 1.1rem; height: 1.1rem; background: rgb(var(--glow-rgb)); box-shadow: 0 0 0 3px var(--bg), 0 0 1.5rem 0.5rem rgb(var(--glow-rgb) / calc(0.9 * var(--tl-glow-k))); }
.tl-stop:has(.is-active)::before { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent), 0 0 1.4rem 0.4rem rgb(var(--tl-accent-rgb) / calc(0.7 * var(--tl-glow-k))); }
.tl-stop.tl-end { width: var(--tl-end-w); padding-top: 0; }
.tl-stop.tl-end::before, .tl-stop.tl-end::after { display: none; }

/* Time gap label on the line between two visible stops (filled in by the script, decorative). */
.tl-gap {
  position: absolute; z-index: 2; left: calc(var(--tl-gutter) / -2); top: var(--tl-line-y); transform: translate(-50%, -50%);
  padding: 0.1rem 0.5rem; font: 0.68rem/1.4 var(--mono); letter-spacing: 0.04em; white-space: nowrap; pointer-events: none;
  color: var(--accent); background: var(--bg); border: 1px solid rgb(var(--tl-accent-rgb) / 0.35); border-radius: 999px;
}
.tl-gap[hidden] { display: none; }

/* Cards: white (light) or surface (dark) with a rubriek-coloured edge and glow; glass blur where supported. */
.tl-node {
  position: relative; display: block; width: 100%; margin: 0; padding: 0; overflow: hidden; text-align: left; cursor: pointer;
  font: inherit; color: var(--fg);
  background: var(--tl-card);
  border: 1px solid rgb(var(--glow-rgb) / 0.45); border-radius: 0.9rem;
  box-shadow: var(--tl-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .tl-node { background: var(--tl-card-glass); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); }
}
.tl-node:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.tl-stop.impact-4 .tl-node { box-shadow: var(--tl-shadow), 0 0 1rem rgb(var(--glow-rgb) / calc(0.2 * var(--tl-glow-k))); }
.tl-stop.impact-5 .tl-node { border-color: rgb(var(--glow-rgb) / 0.85); box-shadow: var(--tl-shadow), 0 0 1.6rem rgb(var(--glow-rgb) / calc(0.4 * var(--tl-glow-k))); }
.tl-stop.impact-1 .tl-node, .tl-stop.impact-2 .tl-node, .tl-stop.impact-3 .tl-node { border-color: rgb(var(--glow-rgb) / 0.25); box-shadow: none; }
.tl-stop:not(.tl-end) .tl-node:focus-visible, .tl-stop:not(.tl-end) .tl-node.is-active {
  border-color: rgb(var(--glow-rgb) / 0.95); box-shadow: var(--tl-shadow), 0 0 0 1px rgb(var(--glow-rgb) / 0.4), 0 0 1.8rem rgb(var(--glow-rgb) / calc(0.55 * var(--tl-glow-k)));
}
@media (hover: hover) and (pointer: fine) {
  .tl-stop:not(.tl-end) .tl-node:hover {
    transform: translateY(-4px); border-color: rgb(var(--glow-rgb) / 0.95);
    box-shadow: var(--tl-shadow), 0 0 0 1px rgb(var(--glow-rgb) / 0.4), 0 0 1.8rem rgb(var(--glow-rgb) / calc(0.55 * var(--tl-glow-k)));
  }
}

.tl-img, .tl-tile { display: block; width: 100%; aspect-ratio: 4 / 3; }
.tl-img { height: auto; object-fit: cover; background: var(--surface); }
/* No image: a soft glow in the rubriek hue and the year in big monospace. */
.tl-tile {
  display: flex; align-items: center; justify-content: center; font: 800 2.6rem/1 var(--mono); letter-spacing: 0.04em;
  color: rgb(var(--glow-rgb)); text-shadow: 0 0 1rem rgb(var(--glow-rgb) / calc(0.5 * var(--tl-glow-k)));
  background: radial-gradient(circle at 50% 45%, rgb(var(--glow-rgb) / calc(0.18 + 0.2 * var(--tl-glow-k))), transparent 65%), var(--surface);
}
/* The year overlaps the bottom of the image, over a gradient into the card colour so it stays readable. */
.tl-year {
  position: relative; display: block; margin-top: -3.1rem; padding: 1.7rem 0.85rem 0;
  font: 700 1.55rem/1 var(--mono); letter-spacing: 0.02em; color: var(--fg); text-shadow: 0 0 0.8rem rgb(var(--tl-accent-rgb) / calc(0.35 * var(--tl-glow-k)));
  background: linear-gradient(to bottom, transparent, var(--tl-card) 78%);
}
/* The tile already shows the year; keep the text for screen readers only. */
.tl-tile + .tl-year { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; background: none; }
/* Bottom space as margin, not padding: padding would show the top of the clamped fourth line. */
.tl-title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  padding: 0.35rem 0.85rem 0; margin-bottom: 0.9rem; font: 600 1rem/1.25 var(--serif); color: var(--fg);
}
.tl-stop.impact-5 .tl-title { font-size: 1.15rem; font-weight: 700; }
.tl-stop.impact-1 .tl-title, .tl-stop.impact-2 .tl-title, .tl-stop.impact-3 .tl-title { font-size: 0.9rem; color: var(--muted); }

/* Entrance (the script adds .tl-anim and .tl-pending; not with reduced motion). */
.tl-anim .tl-stop { transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tl-anim .tl-stop.tl-pending { opacity: 0; transform: translateY(1.2rem) scale(0.97); }

/* The singularity: no card, a luminous red orb with a rotating ring. */
.tl-stop.tl-end .tl-node { overflow: visible; text-align: center; background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.tl-singularity {
  position: relative; display: block; width: var(--tl-orb); height: var(--tl-orb); margin: 0 auto; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--tl-orb-hot) 0, var(--tl-orb-hot) 6%, var(--accent) 27%, rgb(var(--tl-accent-rgb) / 0.45) 48%, rgb(var(--tl-accent-rgb) / 0.1) 62%, transparent 72%);
  animation: tl-pulse 4.5s ease-in-out infinite;
  transition: filter 0.3s ease;
}
.tl-singularity::after {
  content: ''; position: absolute; z-index: -1; inset: -60%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgb(var(--tl-accent-rgb) / calc(0.3 * var(--tl-glow-k))), rgb(var(--tl-accent-rgb) / calc(0.1 * var(--tl-glow-k))) 35%, transparent 62%);
}
@supports ((-webkit-mask: radial-gradient(#000, #000)) or (mask: radial-gradient(#000, #000))) {
  .tl-singularity::before {
    content: ''; position: absolute; inset: 6%; border-radius: 50%; pointer-events: none;
    background: conic-gradient(from 0deg, transparent 0 25%, rgb(var(--tl-accent-rgb) / 0.35) 50%, var(--accent) 80%, transparent 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: tl-spin 8s linear infinite;
  }
}
@media (hover: hover) and (pointer: fine) {
  .tl-end .tl-node:hover .tl-singularity { filter: brightness(1.15) saturate(1.15); }
}
.tl-end .tl-node.is-active .tl-singularity { filter: brightness(1.2) saturate(1.25); }
.tl-end .tl-year { margin-top: 0.6rem; padding: 0; font-size: 1.1rem; text-align: center; color: var(--accent); text-shadow: none; background: none; }
.tl-end .tl-title { padding-inline: 0; font-size: 1.1rem; font-weight: 700; text-align: center; color: var(--fg); }
@keyframes tl-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes tl-spin { to { transform: rotate(360deg); } }

.tl-arrow {
  position: absolute; z-index: 3; top: calc(2.5rem + var(--tl-line-y) + 4rem); display: flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; padding: 0 0 0.15rem; font: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer;
  color: var(--fg); background: var(--bg); border: 1px solid var(--border-strong); border-radius: 50%;
  box-shadow: var(--tl-shadow);
}
.tl-arrow[hidden] { display: none; }
.tl-arrow:disabled { opacity: 0.3; cursor: default; box-shadow: none; }
.tl-arrow:not(:disabled):hover { background: var(--fg); color: var(--bg); }
.tl-arrow-prev { left: 0.75rem; }
.tl-arrow-next { right: 0.75rem; }

/* Detail panel: a larger card below the track. */
.tl-details { max-width: 64rem; margin: 1.5rem auto 0; }
.tl-hint { display: none; margin: 1rem 0 0; text-align: center; font: 0.85rem/1.4 var(--mono); letter-spacing: 0.04em; color: var(--muted); }
.tl-js:not(.has-open) .tl-hint { display: block; }
.tl-detail {
  position: relative; display: flow-root; margin-top: 1.25rem; padding: 1.25rem 1.4rem; scroll-margin-top: 4.5rem;
  color: var(--fg); background: var(--tl-card);
  border: 1px solid rgb(var(--glow-rgb) / 0.5); border-radius: 1.1rem;
  box-shadow: var(--tl-shadow), 0 0 2rem rgb(var(--glow-rgb) / calc(0.22 * var(--tl-glow-k)));
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .tl-detail { background: var(--tl-card-glass); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
}
.tl-detail:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.tl-detail.impact-5 { border-color: rgb(var(--glow-rgb) / 0.85); box-shadow: var(--tl-shadow), 0 0 2.4rem rgb(var(--glow-rgb) / calc(0.35 * var(--tl-glow-k))); }
.tl-detail-end { --glow-rgb: var(--tl-accent-rgb); border-color: rgb(var(--tl-accent-rgb) / 0.7); box-shadow: var(--tl-shadow), 0 0 3rem rgb(var(--tl-accent-rgb) / calc(0.3 * var(--tl-glow-k))); }
.tl-detail-media { float: left; width: 19rem; margin: 0 1.5rem 0.75rem 0; }
.tl-detail-text { overflow: hidden; }
.tl-detail-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.7rem; border: 1px solid rgb(var(--glow-rgb) / 0.35); filter: var(--img-filter); }
.tl-detail .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.65rem; margin: 0; font: 0.82rem/1.4 var(--mono); }
.tl-detail .badge { margin-left: 0; }
.tl-stars { color: var(--major); letter-spacing: 0.1em; white-space: nowrap; text-shadow: 0 0 0.5rem rgb(var(--tl-major-rgb) / calc(0.5 * var(--tl-glow-k))); }
.tl-detail h2 { margin: 0.5rem 0 0.5rem; font: 700 clamp(1.4rem, 3vw, 1.9rem)/1.2 var(--serif); color: var(--fg); }
.tl-body.prose { max-width: none; margin-top: 0.5rem; font-size: 1rem; line-height: 1.65; }
.tl-body p { margin-block: 0.25rem; }
.tl-links { margin-block: 0.75rem 0; font-size: 0.92rem; }
.tl-js .tl-detail { display: none; }
.tl-js .tl-detail.is-open { display: flow-root; animation: tl-rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes tl-rise { from { opacity: 0; transform: translateY(0.9rem); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .tl-detail-media { float: none; width: 100%; margin: 0 0 1rem; }
}
@media (max-width: 480px) {
  .tl-band { --tl-line-y: 3rem; --tl-gutter: 1rem; --tl-end-w: 11rem; --tl-orb: 6rem; padding-bottom: 2rem; }
  .tl-stop { width: 10.5rem; }
  .tl-stop.impact-1, .tl-stop.impact-2, .tl-stop.impact-3 { width: 9rem; }
  .tl-stop.impact-5 { width: 12.5rem; }
  .tl-tile { font-size: 2rem; }
  .tl-year { font-size: 1.3rem; margin-top: -2.8rem; padding-top: 1.5rem; }
  .tl-title { font-size: 0.95rem; }
  .tl-stop.impact-5 .tl-title { font-size: 1.05rem; }
  .tl-stop.impact-1 .tl-title, .tl-stop.impact-2 .tl-title, .tl-stop.impact-3 .tl-title { font-size: 0.86rem; }
  .tl-arrow { width: 2.25rem; height: 2.25rem; }
  .tl-detail { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-node, .tl-singularity, .tl-star path { transition: none; }
  .tl-singularity, .tl-singularity::before, .tl-js .tl-detail.is-open { animation: none; }
  .tl-stop:not(.tl-end) .tl-node:hover { transform: none; }
}
.badge {
  display: inline-block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.05rem 0.5rem; border-radius: 3px; background: var(--surface); color: var(--fg); border: 1px solid var(--border); margin-left: 0.25rem;
}
.badge.major { background: var(--major); color: var(--bg); border-color: var(--major); font-weight: 700; }

/* ---------- Ads ---------- */
.ad {
  margin-block: 1.5rem; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-top: 2px solid var(--muted);
  background: var(--surface); font-size: 0.95rem;
}
.ad-label { margin: 0 0 0.4rem; font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.ad-link { display: block; color: var(--fg); text-decoration: none; }
.ad-link:hover .ad-headline { text-decoration: underline; }
.ad-image { display: block; max-width: 100%; height: auto; margin-bottom: 0.4rem; }
.ad-headline { display: block; font-weight: 700; color: var(--link); overflow-wrap: anywhere; }
.ad-text { display: block; color: var(--fg); overflow-wrap: anywhere; }

/* Partner banner (plan 49f): just the image under our "Advertentie" label, no frame; never scaled up. */
.ad.ad-banner { padding: 0; border: 0; background: transparent; }
.ad-banner-link { display: block; line-height: 0; }
.ad-banner-image { display: block; max-width: 100%; height: auto; }

/* Banners left and right of an article (plan 49f), wide screens only. Below 72rem the rails are hidden, so the lazy
   banner images are not even fetched. The rails stretch over the article's height; the ad inside travels along (sticky,
   below the sticky section bar) while reading. */
.ad-rail { display: none; }
@media (min-width: 72rem) {
  .article-rails { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46rem) minmax(0, 1fr); column-gap: 2rem; }
  .article-rails > .article { grid-column: 2; grid-row: 1; margin-inline: 0; }
  .ad-rail { display: block; grid-row: 1; align-self: stretch; }
  .ad-rail-left { grid-column: 1; justify-self: end; }
  .ad-rail-right { grid-column: 3; justify-self: start; }
  .ad-rail .ad { position: sticky; top: 4.5rem; margin-block: 0; }
}

/* Partner product tile (plans 49b, 49e), built by the server: photo left; title, stars, price, delivery and button right.
   Colours come from --product-* tokens; each partner maps its own palette onto them (.ad-partner-bol below). */
.ad-product {
  --product-accent: var(--link);
  --product-ok: var(--fg);
  --product-star: #ff9600;
  --product-star-empty: var(--border);
  --product-button: var(--accent);
}
/* bol.com: title and price red, delivery green, stars orange, button blue (the --bol-* tokens live in the theme blocks). */
.ad-partner-bol {
  --product-accent: var(--bol-red);
  --product-ok: var(--bol-green);
  --product-star: var(--bol-star);
  --product-star-empty: var(--bol-star-empty);
  --product-button: var(--bol-blue);
}
/* Like the partner's own tile: no frame around it, only our "Advertentie" label above. */
.ad.ad-product { padding: 0; border: 0; background: transparent; }
/* Photo and text always side by side (like bol.com's tile), also in a half-width column; only very narrow screens stack. */
.product-tile { display: flex; flex-wrap: nowrap; gap: 0.5rem 0.9rem; align-items: flex-start; color: inherit; text-decoration: none; }
.product-tile-image { flex: 0 0 7.5rem; width: 7.5rem; max-width: 100%; height: auto; object-fit: contain; }
.product-tile-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.product-tile-info:first-child { flex-basis: 100%; }
.product-tile-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
  font-size: 0.95rem; font-weight: 400; line-height: 1.35; color: var(--product-accent);
}
.product-tile:hover .product-tile-title { text-decoration: underline; }
.product-tile-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.4rem; }
.product-rating-source { font-size: 0.75rem; color: var(--muted); }
.product-stars { position: relative; display: inline-block; font-size: 1.05rem; line-height: 1; letter-spacing: 0; white-space: nowrap; }
.product-stars::before { content: '\2605\2605\2605\2605\2605'; color: var(--product-star-empty); }
.product-stars-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; overflow: hidden; white-space: nowrap; }
.product-stars-fill::before { content: '\2605\2605\2605\2605\2605'; color: var(--product-star); }
.product-stars-r1 .product-stars-fill { width: 10%; }
.product-stars-r2 .product-stars-fill { width: 20%; }
.product-stars-r3 .product-stars-fill { width: 30%; }
.product-stars-r4 .product-stars-fill { width: 40%; }
.product-stars-r5 .product-stars-fill { width: 50%; }
.product-stars-r6 .product-stars-fill { width: 60%; }
.product-stars-r7 .product-stars-fill { width: 70%; }
.product-stars-r8 .product-stars-fill { width: 80%; }
.product-stars-r9 .product-stars-fill { width: 90%; }
.product-stars-r10 .product-stars-fill { width: 100%; }
.product-tile-price { font-size: 1.7rem; font-weight: 700; line-height: 1.1; color: var(--product-accent); }
.product-tile-price sup { font-size: 0.6em; line-height: 0; vertical-align: super; }
.product-tile-delivery { font-size: 0.85rem; color: var(--product-ok); }
.product-tile-button {
  align-self: stretch; margin-top: 0.3rem; padding: 0.5rem 0.9rem; border-radius: 0.25rem; text-align: center;
  font-weight: 700; color: #ffffff; background: var(--product-button);
}
.product-tile:hover .product-tile-button { background: color-mix(in srgb, var(--product-button) 75%, #000000); }
@media (max-width: 24rem) {
  .product-tile { flex-wrap: wrap; }
  .product-tile-image { flex-basis: 100%; width: auto; max-width: 8rem; margin-inline: auto; }
}
/* Ads inside the text (plan 49d): the paragraph with the affiliate links and the tiles under it are one block with one
   centred label in inverted colours, on the background of the sources box (.sources). */
.ad-block { margin-block: 1.75rem; padding: 0.9rem 1rem 1rem; background: var(--surface); }
.ad-block > .ad-block-label {
  /* Tight badge: bottom space as before (0.15rem + the old half-leading), less on top and at the sides; the right
     padding subtracts the letter-spacing that follows the last letter, so both sides look equal. */
  display: table; margin: 0 auto 0.85rem; padding: 0.08rem calc(0.4rem - 0.08em) 0.27rem 0.4rem;
  background: var(--fg); color: var(--bg);
  font-size: 0.8rem; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.08em;
}
.ad-block > p:not(.ad-block-label) { margin: 0 0 1rem; }
.ad-block .ad-group { margin-block: 0; }
.ad-block .ad { margin-block: 0; padding: 0; border: 0; background: transparent; }
.ad-group { margin-block: 1.5rem; display: grid; gap: 0.75rem; align-items: start; }
.ad-group .ad { margin-block: 0; }
.ad-group .ad-image { max-height: 12rem; width: auto; margin-inline: auto; }
@media (min-width: 40rem) {
  .ad-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Consent bar for partner content that needs a partner's own script (plan 49); dormant while there is none.
   Both buttons look the same on purpose. */
.consent-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 1000; padding: 0.9rem max(1rem, calc((100% - 75rem) / 2 + 1rem));
  background: var(--surface); color: var(--fg); border-top: 2px solid var(--border-strong);
  display: flex; flex-direction: column; gap: 0.75rem;
}
.consent-bar[hidden] { display: none; }
.consent-bar p { margin: 0; font-size: 0.95rem; }
.consent-bar .consent-actions { margin-top: 0; flex-shrink: 0; }
.consent-bar .consent-button { min-height: 2.75rem; min-width: 7.5rem; }
@media (min-width: 40rem) {
  .consent-bar { flex-direction: row; align-items: center; justify-content: space-between; }
}

.preview-banner { background: var(--major-bg); color: var(--major); border-bottom: 2px solid var(--major); padding: 0.4rem 1rem; text-align: center; font-weight: 700; }

/* ---------- News radar pages (private, signed links; plan 26) ---------- */
.radar-meta, .radar-note { color: var(--muted); font-size: 0.9rem; }
.radar-error { padding: 0.75rem 1rem; border: 2px solid var(--accent); background: var(--surface); font-weight: 600; }
.radar-field { display: block; width: 100%; padding: 0.75rem; font: inherit; font-size: 1rem; color: var(--fg); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 0; }
.radar-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block: 0.75rem 1.5rem; }
.radar-button {
  display: inline-block; min-height: 3rem; padding: 0.75rem 1.25rem; font: inherit; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer;
  color: var(--fg); background: transparent; border: 2px solid var(--border-strong); border-radius: 0;
}
.radar-button:hover { text-decoration: underline; }
.radar-button-primary { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); }
.radar form .radar-button { width: 100%; font-size: 1.15rem; }
.radar-lock { text-align: center; padding-block: 3rem; }
.radar-spinner { width: 3.5rem; height: 3.5rem; margin: 0 auto 1.25rem; border-radius: 50%; border: 4px solid var(--border); border-top-color: var(--accent); animation: radar-spin 0.9s linear infinite; }
@keyframes radar-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .radar-spinner { animation-duration: 3s; }
}
.radar [hidden] { display: none; }

/* ---------- Newsletter signup (plan 62) ---------- */
.nb { margin: 1.75rem 0; padding: 1rem 1.1rem 1.1rem; background: var(--surface); border-top: 3px solid var(--accent); }
.nb-home { margin: 1.25rem 0 0; }
.nb-pagina { margin: 1.5rem 0; }
.nb-title { margin: 0 0 0.3rem; font-size: 1.05rem; font-weight: 800; line-height: 1.25; }
.nb-home .nb-title { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; }
.nb-text { margin: 0 0 0.75rem; }
.nb-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.nb-form[hidden] { display: none; }
.nb-input {
  flex: 1 1 14rem; min-width: 0; min-height: 2.75rem; padding: 0.5rem 0.7rem; box-sizing: border-box;
  font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--border-strong); border-radius: 0;
}
.nb-button {
  min-height: 2.75rem; padding: 0.5rem 1.25rem; font: inherit; font-weight: 700; cursor: pointer;
  color: var(--accent-fg); background: var(--accent); border: 2px solid var(--accent); border-radius: 0;
}
.nb-button:hover:not(:disabled) { text-decoration: underline; }
.nb-button:disabled { opacity: 0.6; cursor: default; }
.nb-button-large { min-height: 3rem; padding: 0.75rem 1.5rem; font-size: 1.1rem; }
/* The honeypot: out of sight and out of the way, but still in the page for bots (not display:none, which many skip). */
.nb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nb-message { margin: 0.75rem 0 0; padding: 0.6rem 0.8rem; font-weight: 600; background: var(--bg); border-left: 4px solid var(--accent); }
.nb-message.is-error { border-left-color: var(--major); }
.nb-note { margin: 0.75rem 0 0; font-size: 0.82rem; color: var(--muted); }
.nb-note a { color: inherit; }
.nb-page form { margin: 1.25rem 0; }

/* ---------- Wider screens ---------- */
@media (min-width: 640px) {
  .news-row { grid-template-columns: 12rem minmax(0, 1fr); gap: 1.1rem; }
  .news-lead { display: block; }
  .news-text h3 { font-size: 1.3rem; }
  .related-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .site-footer ul { columns: 1; }
}

@media (min-width: 768px) {
  .secondary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cat-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1rem 2rem; }
  .top-body h1 { font-size: 2.3rem; }
  .article-head h1 { font-size: 2.6rem; }
}

@media (min-width: 1024px) {
  .front { grid-template-columns: minmax(0, 1fr) 21rem; gap: 2rem; }
  .front-side { border-left: 1px solid var(--border); padding-left: 2rem; }
  .front-main { min-width: 0; }
  /* The intro of the top story fills the height the sidebar leaves and adds none of its own (height 0, then it
     grows), so both columns always end together, whatever the length of the story or of the sidebar. */
  .front-main, .top-story, .top-body { display: flex; flex-direction: column; }
  .top-story, .top-body { flex: 1 1 auto; }
  .top-intro {
    flex: 1 1 auto; height: 0; min-height: 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
  }
  .top-intro p:nth-of-type(n+4) { display: block; }
  /* Desktop sidebar: no text over the image (owner). Each item is a row of two columns, the date above a small
     image on the left and the rubriek above the title on the right. display: contents lets the image, date,
     rubriek and title of the card markup take their own place in the li's grid. */
  .time-list { gap: 0; }
  .time-list li {
    display: grid; grid-template-columns: 5.28rem minmax(0, 1fr); gap: 0.2rem 0.75rem; align-items: start;
    padding-block: 0.65rem; border-bottom: 1px solid var(--border); border-radius: 0; background: none; overflow: visible;
  }
  .time-list li:last-child { border-bottom: 0; }
  .latest-card-text, .latest-card-meta { display: contents; }
  .time-list .ts { grid-column: 1; grid-row: 1; white-space: nowrap; color: var(--muted); }
  .time-list .cat-label { grid-column: 2; grid-row: 1; color: var(--rub-ink); }
  /* margin-top: the top of the image lines up with the top of the title's capitals, which sit 0.25rem below
     the top of its line (half-leading plus the room above the caps; measured for Georgia bold at 1rem/1.2). */
  /* 13:9 instead of 16:9 (owner): the sides are cropped off, the height stays that of a 6.5rem wide 16:9 image. */
  .time-list .media-img { grid-column: 1; grid-row: 2; margin-top: 0.25rem; border-radius: 0.25rem; aspect-ratio: 13 / 9; }
  .time-list h3 { grid-column: 2; grid-row: 2; font-size: 1rem; }
  /* No image: date and rubriek on the first row, the title across the full width below. */
  .time-list li.is-text-only { grid-template-columns: auto minmax(0, 1fr); }
  .time-list li.is-text-only h3 { grid-column: 1 / -1; }
  .time-list h3 a { color: var(--fg); }
  /* The other way round from the intro above: when the left column is the taller one, the rows of Laatste nieuws
     spread out a little, so the sidebar ends together with it. The shorter column always gives way. */
  .front-side { display: flex; flex-direction: column; }
  .latest-box { flex: 1 1 auto; display: flex; flex-direction: column; }
  .time-list { flex: 1 1 auto; align-content: space-between; }
  /* Top story stays stacked (image above the text) on wide screens too: side by side left a gap under the image. */
  .secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .latest-box, .side-box { background: none; padding: 0; border-top: 0; }
  .latest-box .box-title, .side-box .box-title { border-top: 3px solid var(--accent); padding-top: 0.4rem; }
  .brand-name { font-size: 2.5rem; }
}

@media (min-width: 1200px) {
  .secondary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  h1 { font-size: 1.7rem; }
  .pen-profile-head { column-gap: 1rem; }
  .pen-profile-head.has-photo { grid-template-columns: minmax(0, 1fr) 6.5rem; }
  .pen-profile-avatar { width: 64px; }
  .top-body h1 { font-size: 1.65rem; }
  .article-head h1 { font-size: 1.75rem; }
  .article-head .lead-text { font-size: 1.1rem; }
  .prose { font-size: 1.05rem; }
  .brand-name { font-size: 1.85rem; }
  /* Phones: logo and tagline on the left; theme switch and a compact search field stacked on the right,
     the search field level with the tagline (owner: a full-width search bar was far too big). */
  .masthead-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem 0.75rem; align-items: start; }
  .masthead-side { display: contents; }
  .masthead-inner .brand { grid-column: 1; grid-row: 1 / span 2; align-self: end; min-width: 0; }
  .masthead-tools { grid-column: 2; grid-row: 1; justify-self: end; }
  .masthead-search { grid-column: 2; grid-row: 2; align-self: end; width: 8.5rem; max-width: none; }
  .search-input { padding: 0.25rem 0.55rem; font-size: 0.8rem; }
  .search-button { padding: 0.25rem 0.6rem; font-size: 0.75rem; }
  .brand-tagline { flex-basis: 100%; margin-top: 0.3rem; }
  .news-row { grid-template-columns: 6.2rem minmax(0, 1fr); gap: 0.7rem; }
  .news-text h3 { font-size: 1.02rem; }
  .story-big .story-title { font-size: 1.3rem; }
}

.media-img, figure.article-image img, .prose figure.body-image img, figure.body-video .video-facade img { filter: var(--img-filter); }

@media print {
  .section-bar, .site-footer, .ad, .ad-rail, .ad-block, .ad-group, .consent-bar, .share, .related, .masthead-tools { display: none; }
  .article-rails { display: block; }
}

/* ---------- OAuth-toestemmingsscherm (AI-koppeling) ---------- */
.consent-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; }
.consent { width: 100%; max-width: 32rem; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--accent); padding: 1.5rem; }
.consent .consent-brand { margin: 0 0 0.75rem; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.consent h1 { font-size: 1.6rem; }
.consent .consent-note { color: var(--muted); font-size: 0.9rem; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.consent-actions form { margin: 0; }
.consent-button { font: inherit; font-weight: 600; padding: 0.6rem 1.25rem; border: 2px solid var(--accent); background: var(--accent); color: var(--accent-fg); cursor: pointer; border-radius: 0; }
.consent-button.secondary { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.consent-button:hover { text-decoration: underline; }

/* ---------- Tekst bewerken (plan 51, plan 76) ---------- */
/* Only in the markup for a logged-in admin with 2FA (public/js/inline-edit.js). Next to a text selection a pill with two
   buttons, "Bewerken" (edit it yourself, in place) and "Bewerken met AI"; and a panel with the AI chat: a bottom sheet on
   narrow screens, a column on the right from 56rem. */
.ie-tip {
  position: absolute; z-index: 60; display: flex; max-width: calc(100vw - 16px); margin: 0; overflow: hidden;
  border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); box-shadow: 0 4px 14px rgb(0 0 0 / 0.3);
}
.ie-tip-btn {
  margin: 0; padding: 0.3rem 0.8rem; border: 0; background: transparent; color: var(--accent-fg); font: inherit; font-size: 0.85rem;
  font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer;
}
.ie-tip-btn:not([hidden]) ~ .ie-tip-btn:not([hidden]) { border-left: 1px solid color-mix(in srgb, var(--accent-fg) 45%, transparent); }
.ie-tip-btn:hover, .ie-tip-btn:focus-visible { text-decoration: underline; }
.ie-tip[hidden], .ie-tip-btn[hidden], .ie-root [hidden] { display: none; }
.ie-root {
  position: fixed; z-index: 70; display: flex; flex-direction: column; gap: 0.6rem; left: 0; right: 0; bottom: 0; max-height: 70vh;
  padding: 0.8rem 1rem 1rem; background: var(--bg); color: var(--fg); border-top: 3px solid var(--accent);
  box-shadow: 0 -6px 24px rgb(0 0 0 / 0.25); font-size: 0.95rem; line-height: 1.45;
}
.ie-root[hidden] { display: none; }
.ie-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ie-heading { margin: 0; font-size: 1.05rem; }
.ie-close { margin: 0; padding: 0 0.4rem; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.ie-close:hover, .ie-close:focus-visible { color: var(--fg); }
.ie-small { margin: 0; font-size: 0.75rem; color: var(--muted); }
.ie-live { margin: 0; padding: 0.35rem 0.6rem; font-size: 0.85rem; font-weight: 600; color: var(--major); background: var(--major-bg); border-left: 3px solid var(--major); }
.ie-quote { margin: 0; padding: 0.3rem 0.7rem; max-height: 5.5rem; overflow-y: auto; font-style: italic; color: var(--muted); border-left: 3px solid var(--border-strong); overflow-wrap: anywhere; }
.ie-messages { flex: 1 1 auto; min-height: 3rem; display: flex; flex-direction: column; gap: 0.6rem; overflow-y: auto; }
.ie-msg { margin: 0; padding: 0.45rem 0.7rem; max-width: 100%; overflow-wrap: anywhere; white-space: pre-wrap; background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; }
.ie-msg-user { align-self: flex-end; background: var(--bg); border-color: var(--border-strong); }
.ie-msg-error { color: var(--accent); border-color: var(--accent); }
.ie-prop { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem 0.7rem; border: 1px solid var(--border-strong); border-radius: 0.5rem; }
.ie-prop-item { display: flex; flex-direction: column; gap: 0.2rem; }
.ie-prop-label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.ie-change { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; }
.ie-old, .ie-new { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ie-old { color: var(--muted); }
.ie-old strong, .ie-new strong { font-weight: 700; color: var(--fg); }
/* A body proposal as it will read on the page (server-rendered markdown, e.g. with the explanation box). */
.ie-rendered { white-space: normal; }
.ie-rendered > :first-child { margin-top: 0.2rem; }
.ie-rendered p { margin: 0 0 0.5em; }
.ie-rendered > :last-child { margin-bottom: 0; }
.ie-rendered aside.explanation { margin: 0.5rem 0; padding: 0.6rem 0.8rem; font-size: 0.9rem; }
.ie-apply, .ie-send {
  align-self: flex-start; padding: 0.4rem 1rem; border: 2px solid var(--accent); border-radius: 0; background: var(--accent); color: var(--accent-fg);
  font: inherit; font-weight: 700; cursor: pointer;
}
.ie-apply:hover:not(:disabled), .ie-send:hover:not(:disabled) { text-decoration: underline; }
.ie-apply:disabled, .ie-send:disabled { opacity: 0.55; cursor: default; }
.ie-busy { display: flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--muted); }
.ie-spinner { flex: none; width: 1rem; height: 1rem; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: ie-spin 0.9s linear infinite; }
@keyframes ie-spin { to { transform: rotate(360deg); } }
.ie-form { display: flex; flex-direction: column; gap: 0.5rem; }
.ie-input { width: 100%; box-sizing: border-box; padding: 0.45rem 0.6rem; border: 1px solid var(--border-strong); border-radius: 0; background: var(--bg); color: var(--fg); font: inherit; resize: vertical; }
.ie-input:disabled { opacity: 0.6; }
/* Edit it yourself: the block is hidden and a textarea with its markdown sits in its place, set in the same font by the script. */
.ie-self-hide { display: none !important; }
.ie-self-loading { opacity: 0.6; cursor: progress; }
.ie-self { margin: 0 0 1.1em; }
.ie-self-input {
  display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 0.35rem 0.5rem; border: 2px solid var(--accent); border-radius: 0;
  background: var(--bg); color: var(--fg); resize: none; overflow: hidden;
}
.ie-self-input:disabled { opacity: 0.6; }
.ie-self-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.95rem; line-height: 1.3; }
.ie-self-cancel {
  padding: 0.4rem 1rem; border: 2px solid var(--border-strong); border-radius: 0; background: transparent; color: var(--fg);
  font: inherit; font-weight: 700; cursor: pointer;
}
.ie-self-cancel:hover:not(:disabled) { text-decoration: underline; }
.ie-self-cancel:disabled { opacity: 0.55; cursor: default; }
.ie-self-error { margin: 0.4rem 0 0; color: var(--accent); font-size: 0.9rem; font-weight: 600; }
.ie-notice { margin: 0.4rem 0 0; font-size: 0.9rem; font-weight: 600; }
.ie-flash { animation: ie-flash 2s ease-out; }
@keyframes ie-flash {
  from { background: color-mix(in srgb, var(--accent) 28%, transparent); }
  to { background: transparent; }
}
@media (min-width: 56rem) {
  .ie-root { left: auto; top: 0; width: 26rem; max-width: 100%; max-height: none; border-top: 0; border-left: 3px solid var(--accent); box-shadow: -6px 0 24px rgb(0 0 0 / 0.25); }
}
@media (prefers-reduced-motion: reduce) {
  .ie-spinner { animation-duration: 3s; }
  .ie-flash { animation-duration: 0.5s; }
}
@media print {
  .ie-tip, .ie-root { display: none; }
}

/* Plan 73: the block in place of the image of an article that waits for an image (staff only). Colours come from the theme tokens. */
.awaiting-image { margin: 0 0 1.5rem; padding: 1rem; border: 2px dashed var(--major); background: var(--major-bg); color: var(--fg); }
.awaiting-image h2 { margin: 0 0 0.25rem; font-size: 1.15rem; }
.awaiting-note, .awaiting-help { margin: 0.25rem 0 0.5rem; color: var(--muted); font-size: 0.9rem; }
.awaiting-errors { margin: 0.5rem 0; padding: 0.5rem 0.75rem 0.5rem 1.75rem; border: 1px solid var(--accent); color: var(--accent); background: var(--bg); }
.awaiting-flash { margin: 0 0 1rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border-strong); background: var(--surface); font-weight: 600; }
.awaiting-flash.is-error { border-color: var(--accent); color: var(--accent); }
.awaiting-form { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.5rem 0 0; }
.awaiting-form label { font-weight: 600; font-size: 0.9rem; }
.awaiting-form input[type='text'], .awaiting-form input[type='file'], .awaiting-form select, .awaiting-form textarea {
  width: 100%; box-sizing: border-box; padding: 0.45rem 0.6rem; border: 1px solid var(--border-strong); border-radius: 0; background: var(--bg); color: var(--fg); font: inherit;
}
.awaiting-form textarea { resize: vertical; }
.awaiting-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
.awaiting-button { padding: 0.4rem 1rem; border: 2px solid var(--border-strong); border-radius: 0; background: var(--bg); color: var(--fg); font: inherit; font-weight: 700; cursor: pointer; }
.awaiting-button[hidden] { display: none; }
.awaiting-primary { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); }
.awaiting-button:hover:not(:disabled) { text-decoration: underline; }
.awaiting-button:disabled { opacity: 0.55; cursor: default; }
.awaiting-copy-holder { position: fixed; left: -9999px; top: 0; opacity: 0; }
.awaiting-details { margin: 0.75rem 0 0; }
.awaiting-details summary { cursor: pointer; font-weight: 700; }
.awaiting-candidate { margin: 0.75rem 0 0; }
.awaiting-candidate img { display: block; width: 100%; height: auto; }
.awaiting-candidate figcaption { margin-top: 0.25rem; color: var(--muted); font-size: 0.85rem; }

/* ---------- Woordenlijst (plan 92) ---------- */
.glossary-letters ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 1rem 0 0; }
.glossary-letters a { display: inline-block; min-width: 2rem; padding: 0.15rem 0.5rem; border: 1px solid var(--border); border-radius: 4px; text-align: center; text-decoration: none; font-weight: 700; }
.glossary-letters a:hover, .glossary-letters a:focus-visible { border-color: var(--accent); }
.glossary-group { margin-top: 1.5rem; }
.glossary-group h2 { font-size: 1.6rem; border-bottom: 1px solid var(--border); padding-bottom: 0.2rem; }
.glossary-list { list-style: none; padding: 0; margin: 0; }
.glossary-list li { padding-block: 0.75rem; border-bottom: 1px solid var(--border); }
.glossary-list li:last-child { border-bottom: 0; }
.glossary-list h3 { margin: 0 0 0.2rem; font-size: 1.15rem; }
.glossary-list h3 a { text-decoration: none; }
.glossary-list h3 a:hover { text-decoration: underline; }
.glossary-list p { margin: 0; max-width: 60ch; }
.glossary-list .glossary-count { margin-top: 0.2rem; font-size: 0.85rem; color: var(--muted); }
.glossary-list .glossary-see { font-size: 1rem; }
.glossary-concept { margin-left: 0.4rem; padding: 0.05rem 0.4rem; border: 1px solid var(--border-strong); border-radius: 3px; color: var(--muted); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; vertical-align: middle; }
.glossary-list .glossary-see > a { font-weight: 600; text-decoration: none; }
.glossary-list .glossary-see span { color: var(--muted); font-size: 0.92rem; }
.glossary-articles { margin-top: 2.5rem; }
.glossary-articles h2 { font-size: 1.5rem; }
.glossary-line { margin: 0.75rem 0 0; font-size: 0.92rem; color: var(--muted); }
.glossary-line a { font-weight: 600; }
.prose a.glossary-link { text-decoration: underline dotted; text-underline-offset: 3px; }