/* GENERATED FILE — do not edit.
   Built from styles/*.css by scripts/build/css.js, concatenated in filename
   order. Edit the partial that owns the section, then re-run the build. */
/* ── Design tokens ───────────────────────────────────────────────────────────
   The system is deliberately austere: a monochrome page, hairline rules
   instead of shadows, no radius, and colour used only where it carries
   information (CEFR level, grammatical gender, right/wrong).

   The six level colours are an even hue sweep at matched lightness and
   chroma, in the tradition of Otl Aicher's 1972 signage palette — they read
   as one family, and any two of them are still tellable apart at 11px.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --t-xs: 0.6875rem;   /* 11 — micro labels, always uppercase */
  --t-sm: 0.8125rem;   /* 13 — meta, captions */
  --t-base: 0.9375rem; /* 15 — body */
  --t-md: 1.0625rem;   /* 17 — lead paragraphs, German source text */
  --t-lg: 1.375rem;    /* 22 — h3 */
  --t-xl: 1.875rem;    /* 30 — h2 */
  --t-2xl: 2.5rem;     /* 40 — h1 */
  --t-3xl: 3.75rem;    /* 60 — home display */

  --lh-tight: 1.08;
  --lh-snug: 1.32;
  --lh-body: 1.62;

  /* Track headings tighter as they get larger — the standard optical fix */
  --tr-display: -0.03em;
  --tr-head: -0.018em;
  --tr-label: 0.09em;

  /* Space — 4px base, 8px rhythm */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Grid */
  --shell: 1180px;
  --shell-narrow: 760px;
  --gutter: 24px;
  --header-h: 60px;

  /* No radius anywhere. Corners are square by design. */
  --r: 0px;

  /* Neutrals — light */
  --bg: #ffffff;
  --bg-sunk: #f6f6f4;
  --bg-raise: #ffffff;
  --ink: #111111;
  --ink-2: #46464a;
  --ink-3: #76767c;
  --ink-4: #9a9aa0;
  --rule: #e3e3df;
  --rule-strong: #111111;
  --sel: #111111;
  --sel-ink: #ffffff;

  /* Brand — the flag, muted to signage tones rather than screen primaries */
  --flag-black: #111111;
  --flag-red: #c1272d;
  --flag-gold: #e3a71c;
  --accent: #c1272d;
  --accent-ink: #ffffff;

  /* CEFR levels, A1 → C2 */
  --lvl-1: #2c6fb1; /* A1 blue */
  --lvl-2: #14806c; /* A2 teal */
  --lvl-3: #4c8b25; /* B1 green */
  --lvl-4: #6a4c9c; /* B2 violet */
  --lvl-5: #c8730f; /* C1 orange */
  --lvl-6: #a8324a; /* C2 crimson */

  /* Grammatical gender — the standard German-classroom mnemonic colours */
  --art-der: #2c6fb1;
  --art-die: #a8324a;
  --art-das: #4c8b25;

  /* State */
  --ok: #1c7c4a;
  --ok-bg: #eaf5ee;
  --bad: #b02a30;
  --bad-bg: #fbecec;
  --focus: #2c6fb1;
}

:root[data-theme="dark"] {
  --bg: #111113;
  --bg-sunk: #191a1d;
  --bg-raise: #1c1d21;
  --ink: #f2f2f0;
  --ink-2: #b8b8bc;
  --ink-3: #8b8b92;
  --ink-4: #6a6a71;
  --rule: #2e2f34;
  --rule-strong: #f2f2f0;
  --sel: #f2f2f0;
  --sel-ink: #111113;

  --accent: #e2565c;
  --accent-ink: #111113;

  /* Lifted for contrast on a dark ground; same hue family */
  --lvl-1: #5f9fd8;
  --lvl-2: #3aab90;
  --lvl-3: #7fb851;
  --lvl-4: #9b7ccb;
  --lvl-5: #e29a3f;
  --lvl-6: #d4677d;

  --art-der: #5f9fd8;
  --art-die: #d4677d;
  --art-das: #7fb851;

  --ok: #57bd85;
  --ok-bg: #16281e;
  --bad: #e27074;
  --bad-bg: #2b1a1b;
  --focus: #5f9fd8;
}

/* ── Reset & base typography ───────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--tr-head); }
h1 { font-size: var(--t-2xl); line-height: var(--lh-tight); letter-spacing: var(--tr-display); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
a:not([class]) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--ink-4);
}
a:not([class]):hover { text-decoration-color: currentColor; }

b, strong { font-weight: 600; }
small { font-size: var(--t-sm); }
q { quotes: "\201E" "\201C" "\201A" "\2018"; } /* German quotation marks */

::selection { background: var(--sel); color: var(--sel-ink); }

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

img, svg { max-width: 100%; }
svg { display: block; }

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-6) 0; }

/* Language marking: German runs get the same face but never break mid-word
   in the middle of a long compound the way default hyphenation would. */
[lang="de"] { hyphens: manual; }

/* ── Grid ─────────────────────────────────────────────────────────────── */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell-narrow { max-width: var(--shell-narrow); }

main.shell { padding-block: var(--s-7) var(--s-9); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--bg);
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-sm);
}
.skip-link:focus { left: 0; }

/* ── Micro label ──────────────────────────────────────────────────────── */

.eyebrow, .stat-label, .card-eyebrow, .q-type, .xl-label, .chip-label,
.footer-col h2, .footer-matrix h2, .rail-name, .score-title {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

button { font: inherit; color: inherit; }

.ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  font-size: var(--t-sm);
  cursor: pointer;
  color: var(--ink-2);
  transition: border-color 0.12s, color 0.12s;
}
.ghost-btn:hover { border-color: var(--ink); color: var(--ink); }
.ghost-btn.icon-only { padding: 6px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 11px 20px;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  border-radius: var(--r);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--bg); }

kbd {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1;
  padding: 3px 4px;
  border: 1px solid var(--rule);
  color: var(--ink-4);
}

/* ── The wordmark ─────────────────────────────────────────────────────── */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.mark {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  width: calc(var(--mark) * 1.5);
  height: var(--mark);
  gap: 1px;
}
.mark i { display: block; }
.mark i:nth-child(1) { background: var(--flag-black); }
.mark i:nth-child(2) { background: var(--flag-red); }
.mark i:nth-child(3) { background: var(--flag-gold); }
:root[data-theme="dark"] .mark i:nth-child(1) { background: var(--ink); }
.brand-name { font-size: var(--t-base); }
.brand-name b { font-weight: 400; color: var(--ink-3); }

/* ── Header, navigation, breadcrumbs ───────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  height: var(--header-h);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-left: auto;
}
.nav-toggle { display: none; }

/* Nav: plain text set at label size, with a panel that opens on hover or
   focus. The active section is marked by a rule under the label, not a fill —
   the underline is the only decoration in the chrome. */
.main-nav { height: 100%; }
.nav-list { display: flex; height: 100%; }
.nav-item { position: relative; display: flex; align-items: center; }

.nav-top {
  height: 100%;
  padding: 0 var(--s-4);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  cursor: pointer;
}
.nav-item:hover .nav-top,
.nav-item:focus-within .nav-top { color: var(--ink); }
.nav-item.is-active .nav-top { color: var(--ink); border-bottom-color: var(--ink); }

.nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 232px;
  padding: var(--s-2) 0;
  background: var(--bg-raise);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  transition: opacity 0.12s, transform 0.12s, visibility 0.12s;
}
.nav-item:hover .nav-panel,
.nav-item:focus-within .nav-panel,
.nav-item.is-open .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav-panel a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 7px var(--s-4);
  font-size: var(--t-sm);
  color: var(--ink-2);
  white-space: nowrap;
}
.nav-panel a:hover { background: var(--bg-sunk); color: var(--ink); }
.nav-panel a[aria-current] { color: var(--ink); font-weight: 600; }
.nav-note { font-size: var(--t-xs); color: var(--ink-4); }

/* ── Breadcrumbs ──────────────────────────────────────────────────────── */

.breadcrumbs { border-bottom: 1px solid var(--rule); background: var(--bg); }
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  min-height: 38px;
  font-size: var(--t-xs);
  letter-spacing: 0.03em;
  color: var(--ink-3);
}
.breadcrumbs li + li::before {
  content: "/";
  margin-right: var(--s-2);
  color: var(--ink-4);
}
.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs [aria-current] { color: var(--ink); }

/* ── Search overlay ───────────────────────────────────────────────────── */

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--ink) 32%, transparent);
  display: flex;
  justify-content: center;
  padding: 10vh var(--gutter) var(--gutter);
}
.search-overlay[hidden] { display: none; }
.search-panel {
  width: min(640px, 100%);
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--rule-strong);
}
.search-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
}
#search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--t-md);
  color: var(--ink);
  padding: var(--s-2) 0;
}
#search-input:focus { outline: none; }
.search-status {
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-4);
  border-bottom: 1px solid var(--rule);
}
.search-status:empty { display: none; }
.search-results { overflow-y: auto; }
.sr-item {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: var(--s-3);
  align-items: baseline;
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  text-align: left;
}
.sr-item:hover, .sr-item.is-sel { background: var(--bg-sunk); }
.sr-word { font-weight: 600; }
.sr-gloss { color: var(--ink-3); font-size: var(--t-sm); }
.sr-kind { font-size: var(--t-xs); color: var(--ink-4); text-transform: uppercase; letter-spacing: var(--tr-label); }
.sr-empty { padding: var(--s-6) var(--s-4); text-align: center; color: var(--ink-3); font-size: var(--t-sm); }

/* ── Shared page blocks ────────────────────────────────────────────────── */

/* Page head */
.page-head { margin-bottom: var(--s-7); }
.page-head h1 { max-width: 22ch; }
.page-head .eyebrow { margin-bottom: var(--s-3); }
.intro {
  max-width: 68ch;
  margin-top: var(--s-4);
  font-size: var(--t-md);
  color: var(--ink-2);
}
.intro a { color: var(--ink); }
/* Figures as a single line rather than a grid of boxes, for page heads that
   should hand over to the content immediately. */
.page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin: var(--s-4) 0 0;
  font-size: var(--t-xs);
  color: var(--ink-3);
}
.page-meta span { display: inline-flex; gap: 5px; }
.page-meta span + span::before { content: "·"; margin-right: var(--s-2); color: var(--ink-4); }
.page-meta b {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
/* Standing on its own between a page head and the first section, the line is a
   caption to what is above it. Without this it sits closer to the section
   heading below and reads as that heading's kicker. */
.page-meta + section { margin-top: var(--s-7); }

/* Section head — title left, "see all" right, hairline under */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
/* Without this the title block is sized to its content, so a long subtitle
   wraps at half the available width even when the row is otherwise empty. */
.sec-head > div:first-child { flex: 1; min-width: 0; }
.sec-title { font-size: var(--t-xl); }
.sec-sub { margin: var(--s-2) 0 0; font-size: var(--t-sm); color: var(--ink-3); max-width: 62ch; }
.sec-link {
  flex: none;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-2);
  border-bottom: 1px solid transparent;
}
.sec-link:hover { color: var(--ink); border-bottom-color: var(--ink); }

section + section { margin-top: var(--s-8); }

/* Stats — figures set large in the mono face, labels beneath */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  border: 1px solid var(--rule);
  border-right: 0;
}
.stat {
  padding: var(--s-4) var(--s-5);
  border-right: 1px solid var(--rule);
}
.stat-fig {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-lg);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-label { display: block; margin-top: 2px; }

/* Hub page-heads — every section's landing page for one level.
   Exactly one button. A second one beside it asks the reader to compare two
   things before they are allowed to start, so the reassurance (is this my
   level? is it free?) goes underneath as text, where it does not read as a
   fork in the road. */
.hub-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.hub-check { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--ink-3); }
.hub-check a { color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.hub-check a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* The level rail sits under the content on a hub, not over it: six equally
   weighted boxes above the fold ask a reader who has already chosen a level to
   choose it again before they see anything they came for. */
.hub-levels { margin: var(--s-8) 0 var(--s-7); }
.hub-levels .eyebrow { margin-bottom: var(--s-3); }

/* One quiet sentence after the main content, offering the moves either side of
   it — what to do next, and what to do instead if this page was too soon.
   Deliberately a sentence and not a row of cards: these are afterthoughts to
   everything above, and cards would give them equal billing. */
.onward { margin: var(--s-5) 0 0; font-size: var(--t-sm); color: var(--ink-3); }
.onward a { color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.onward a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Cards — a grid of hairline boxes, colour only on the top edge */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: -1px;
  gap: var(--s-4);
}
.card-grid.tight { gap: var(--s-3); }
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  background: var(--bg-raise);
  border: 1px solid var(--rule);
  transition: border-color 0.12s, transform 0.12s;
}
.card::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 3px;
  background: var(--lvl, transparent);
}
.card:hover { border-color: var(--ink); }
.card-title { font-size: var(--t-md); font-weight: 600; letter-spacing: var(--tr-head); }
.card-sub { font-size: var(--t-sm); color: var(--ink-3); }
.card-meta {
  margin-top: auto;
  padding-top: var(--s-3);
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.card-cta { margin-top: var(--s-2); font-size: var(--t-sm); font-weight: 500; }
.card:hover .card-cta { text-decoration: underline; text-underline-offset: 3px; }

/* Level tag */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.lvl-tag { background: var(--lvl); color: #fff; }
:root[data-theme="dark"] .lvl-tag { color: #111113; }
.lvl-tag.xs { padding: 1px 4px; font-size: 10px; }
.lvl-tag-link:hover .lvl-tag { filter: brightness(1.12); }

/* Chips — related words, topics, tags */
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.chip-label { flex: none; margin-right: var(--s-1); }
.chip {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid var(--rule);
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-plain { color: var(--ink-3); border-style: dashed; }

/* Definition grid */
.def-grid {
  margin: 0;
  border-top: 1px solid var(--rule);
}
.def-row {
  display: grid;
  grid-template-columns: minmax(120px, 26%) 1fr;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
}
.def-row dt {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 2px;
}
.def-row dd { margin: 0; font-size: var(--t-base); }

/* Pagination */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--t-sm);
}
.pagination a, .pg-cur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid transparent;
  color: var(--ink-3);
}
.pagination a:hover { border-color: var(--ink); color: var(--ink); }
.pg-cur { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.pg-arrow { font-family: var(--font); }
.pg-gap { color: var(--ink-4); padding: 0 2px; }

/* FAQ */
.faq-list { border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: var(--t-md); font-weight: 500; }
.faq-item summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: var(--t-lg);
  color: var(--ink-3);
  line-height: 1;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-a { padding-bottom: var(--s-4); max-width: 72ch; color: var(--ink-2); }

/* Source / licence note */
.source-note {
  margin-top: var(--s-5);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--ink-4);
}
.source-note a { color: var(--ink-3); }

/* Callout */
.note {
  padding: var(--s-4) var(--s-5);
  background: var(--bg-sunk);
  border-left: 3px solid var(--ink);
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.note b { color: var(--ink); }

/* Two-column layout: content + sticky aside */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--s-8);
  align-items: start;
}
.split-aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: var(--s-6); }
.aside-block h2 {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.aside-list { display: grid; }
.aside-list a {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 7px 0;
  font-size: var(--t-sm);
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
}
.aside-list a:hover { color: var(--ink); }
.aside-list .n { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-4); }

/* ── The level rail ────────────────────────────────────────────────────────
   A1 → C2 as one uninterrupted band. Same position, same order, on every
   page that has a level: it is how the reader keeps their bearings.
   ───────────────────────────────────────────────────────────────────────── */

.level-rail {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--rule);
  margin-bottom: var(--s-7);
}
.rail-step {
  position: relative;
  padding: var(--s-4) var(--s-4) var(--s-3);
  border-right: 1px solid var(--rule);
  transition: background 0.12s;
}
.rail-step:last-child { border-right: 0; }
.rail-step::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--lvl);
  opacity: 0.28;
  transition: opacity 0.12s;
}
.rail-step:hover { background: var(--bg-sunk); }
.rail-step:hover::before, .rail-step.is-current::before { opacity: 1; }
.rail-step.is-current { background: var(--bg-sunk); }

.rail-code {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-lg);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink-3);
}
.rail-step.is-current .rail-code, .rail-step:hover .rail-code { color: var(--ink); }
.rail-name { display: block; margin-top: 2px; }

/* Compact cross-level strip — "the same thing, one level up or down" */
.xlevel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.xl-steps { display: flex; gap: 1px; }
.xl-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 4px 8px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-3);
  border: 1px solid var(--rule);
}
a.xl-step:hover { border-color: var(--lvl); color: var(--lvl); }
.xl-step.is-current { background: var(--lvl); border-color: var(--lvl); color: #fff; }
:root[data-theme="dark"] .xl-step.is-current { color: #111113; }
.xl-step.is-off { color: var(--ink-4); border-style: dashed; opacity: 0.55; }

/* ── Vocabulary ────────────────────────────────────────────────────────────
   Two shapes only:
   · .entry     — the full published word, thirty to a page, anchored by slug.
   · .w-row     — a compact reference row, used by the gender / part-of-speech
                  / topic lists, which link across to the canonical anchor.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Full entry ───────────────────────────────────────────────────────── */

.entry-list { border-top: 1px solid var(--rule); }

.entry {
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
/* A word arrived at by anchor gets a quiet marker so the reader can see which
   of the thirty entries they were sent to. */
.entry:target { background: var(--bg-sunk); box-shadow: -12px 0 0 var(--bg-sunk), 12px 0 0 var(--bg-sunk); }
.entry:target .e-word { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

.e-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  margin-bottom: var(--s-4);
}
.e-word {
  font-size: clamp(1.5rem, 3.4vw, 2.125rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--tr-display);
  overflow-wrap: anywhere;
}
.e-word .art {
  color: var(--lvl);
  font-weight: 400;
  margin-right: 0.22em;
}
.e-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.ipa { font-family: var(--mono); font-size: var(--t-sm); color: var(--ink-3); }
.pos-tag { font-size: var(--t-sm); font-style: italic; color: var(--ink-3); }

.e-anchor { color: var(--ink-4); }
.e-anchor:hover { color: var(--ink); }
.e-n { font-family: var(--mono); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }

.audio-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  background: transparent;
  font-size: var(--t-sm);
  color: var(--ink-2);
  cursor: pointer;
}
.audio-btn:hover { border-color: var(--ink); color: var(--ink); }
.audio-btn.is-playing { border-color: var(--accent); color: var(--accent); }

/* Glosses — numbered senses, commonest first */
.e-gloss { counter-reset: g; max-width: 70ch; margin-bottom: var(--s-4); }
.e-gloss li {
  position: relative;
  padding-left: var(--s-5);
  margin-bottom: var(--s-1);
  counter-increment: g;
  font-size: var(--t-base);
}
.e-gloss li::before {
  content: counter(g);
  position: absolute;
  left: 0;
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--ink-4);
  line-height: 1.9;
}

/* Paradigm — plural/genitive, or the verb's principal parts */
.forms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--rule);
  border-right: 0;
  border-bottom: 0;
  margin: 0 0 var(--s-4);
}
.form-cell {
  padding: var(--s-3) var(--s-4);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.form-cell dt {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-3);
}
.form-cell dd { margin: 3px 0 0; font-size: var(--t-md); font-weight: 500; overflow-wrap: anywhere; }

/* Examples */
.e-ex { border-top: 1px solid var(--rule); margin-bottom: var(--s-4); }
.ex { padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.ex:last-child { border-bottom: 0; }
.ex-de { font-size: var(--t-md); margin-bottom: 2px; line-height: 1.55; }
.ex-de mark {
  background: none;
  color: inherit;
  font-weight: 600;
  box-shadow: inset 0 -0.3em 0 color-mix(in srgb, var(--accent) 20%, transparent);
}
.ex-en { color: var(--ink-3); font-size: var(--t-sm); margin: 0; }

/* ── Word index ───────────────────────────────────────────────────────────
   The words in front of you, as a rail beside the entries. Sticky and
   independently scrollable, so it stays put while the entries move past; the
   entry currently in view is marked by app.js. Below 1080px .split collapses
   and this folds into a dense strip above the list — see 17-responsive.css. */
/* Index left, entries right: the list you are working down reads first. */
.split-index { grid-template-columns: 264px minmax(0, 1fr); gap: var(--s-7); margin-top: var(--s-7); }

.word-index {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--header-h) - 48px);
}
.wi-head { flex: none; padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); }
.wi-head h2 {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-3);
}
.wi-head .ln-bar { margin-top: var(--s-3); }
.wi-list {
  flex: 1 1 auto;
  margin-top: var(--s-2);
  padding-right: var(--s-3);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* The platform scrollbar is a bright slab against this palette. Firefox gets
     the standard property, WebKit the pseudo-elements; both use the same rules
     as the rest of the page. */
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.wi-list::-webkit-scrollbar { width: 4px; }
.wi-list::-webkit-scrollbar-track { background: transparent; }
.wi-list::-webkit-scrollbar-thumb { background: var(--rule); }
.wi-list:hover::-webkit-scrollbar-thumb { background: var(--ink-4); }
.wi-list a {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: 5px 0 5px var(--s-3);
  font-size: var(--t-sm);
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
  border-left: 2px solid transparent;
}
.wi-list a:hover { color: var(--ink); }
.wi-n {
  flex: none;
  min-width: 2.4ch;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink-4);
}
.wi-w { overflow-wrap: anywhere; }
.wi-w i { color: var(--art); font-style: normal; }
/* Where the reader is, mirrored from the entry list. */
.wi-list a.is-current {
  color: var(--ink);
  font-weight: 600;
  border-left-color: var(--lvl);
  background: var(--bg-sunk);
}
.wi-list a.is-current .wi-n { color: var(--lvl); }

/* ── Compact reference row ────────────────────────────────────────────── */

.w-list { border-top: 1px solid var(--rule); }
.w-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--rule); }
.w-row:hover { background: var(--bg-sunk); }

.w-link {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(170px, 26%) minmax(0, 1fr) minmax(140px, 22%);
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-2) var(--s-3) 0;
}
.w-head { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.w-art { font-size: var(--t-sm); font-weight: 500; color: var(--lvl); flex: none; }
.w-word { font-size: var(--t-md); font-weight: 500; letter-spacing: var(--tr-head); overflow-wrap: anywhere; }
.w-row:hover .w-word { text-decoration: underline; text-underline-offset: 3px; }
.w-gloss { color: var(--ink-2); font-size: var(--t-sm); overflow-wrap: anywhere; }
.w-meta {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-size: var(--t-xs);
  color: var(--ink-4);
}
.w-pos { font-style: italic; }
.w-extra { font-family: var(--mono); font-size: 10px; }

.w-audio {
  flex: none;
  width: 40px;
  background: none;
  border: 0;
  border-left: 1px solid var(--rule);
  color: var(--ink-4);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.w-audio:hover { color: var(--ink); background: var(--bg); }
.w-audio.is-playing { color: var(--accent); }

/* ── Gender key (der / die / das browse pages) ────────────────────────── */

.gender-key { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-6); }
.gender-key a {
  flex: 1 1 170px;
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--lvl);
}
.gender-key a:hover { border-color: var(--ink); border-top-color: var(--lvl); }
.gender-key .g-art { font-size: var(--t-lg); font-weight: 600; color: var(--lvl); }
.gender-key .g-lab { font-size: var(--t-sm); color: var(--ink-3); }
.gender-key .g-n { margin-left: auto; font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-4); }

/* ── Continuous list nav ──────────────────────────────────────────────────
   Replaces numbered pagination on the word lists. A list is one run of words;
   the reader's position is a place in that run, not a page number, so this
   shows how far in they are and what the next stretch holds. */
.list-nav {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}
.ln-pos {
  display: grid;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.ln-bar { display: block; height: 2px; background: var(--rule); }
.ln-bar i { display: block; height: 100%; width: var(--pos, 0%); background: var(--lvl, var(--ink)); }
.ln-steps { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.ln-step {
  display: grid;
  gap: 2px;
  flex: 1 1 200px;
  max-width: 320px;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-raise);
  border: 1px solid var(--rule);
  transition: border-color 0.12s;
}
.ln-step:hover { border-color: var(--ink); }
.ln-step.is-next { margin-left: auto; text-align: right; }
.ln-step:only-child.is-next { margin-left: 0; text-align: left; }
.ln-dir { font-size: var(--t-sm); font-weight: 600; }
.ln-step:hover .ln-dir { text-decoration: underline; text-underline-offset: 3px; }
.ln-range { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }

/* ── Reading: passage list and the study page ──────────────────────────── */

/* Passage list */
.p-list { border-top: 1px solid var(--rule); }
.p-row { border-bottom: 1px solid var(--rule); }
.p-link {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 150px 110px;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) 0;
}
.p-row:hover { background: var(--bg-sunk); }
.p-rank { font-family: var(--mono); font-size: var(--t-sm); color: var(--ink-4); }
.p-title { font-size: var(--t-md); font-weight: 500; letter-spacing: var(--tr-head); }
.p-row:hover .p-title { text-decoration: underline; text-underline-offset: 3px; }
.p-snip {
  display: block;
  margin-top: 2px;
  font-size: var(--t-sm);
  color: var(--ink-3);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.p-stat { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* The coverage meter: share of running words the reader already knows.
   A bar, not a number, because the comparison between texts is what matters. */
.cov { display: flex; align-items: center; gap: var(--s-2); }
.cov-track { position: relative; width: 56px; height: 4px; background: var(--rule); }
.cov-fill { position: absolute; inset: 0 auto 0 0; background: var(--lvl, var(--ink)); }
.cov-num { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }

/* ── Study page ───────────────────────────────────────────────────────── */

.read-head {
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-6);
}

/* The text itself. Sentence-aligned German / English, no numbering and no
   rules between sentences: the page has one job and the scaffolding was
   competing with it. */
.lines { max-width: 66ch; }
.line + .line { margin-top: var(--s-5); }
.line-de {
  font-size: var(--t-md);
  line-height: 1.75;
}
.line-en {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--ink-3);
  line-height: 1.6;
}
body.hide-en .line-en { display: none; }

/* The one control on the page: read with the English covered, uncover it when
   you are stuck. A quiet text button, not a toolbar. */
.read-toggle {
  display: inline-block;
  margin-bottom: var(--s-5);
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  font-size: var(--t-sm);
  color: var(--ink-3);
  cursor: pointer;
}
.read-toggle:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* The text is a div, so `section + section` does not separate it from the
   glossary that follows. */
.lines + section { margin-top: var(--s-8); }

/* Glossary */
.gloss-table { border-top: 1px solid var(--rule); }
.gl-row {
  display: grid;
  grid-template-columns: minmax(140px, 22%) minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
}
.gl-form { font-size: var(--t-md); font-weight: 500; }
.gl-form a { border-bottom: 1px solid var(--rule); }
.gl-form a:hover { border-bottom-color: var(--ink); }
.gl-lemma { display: block; font-size: var(--t-xs); color: var(--ink-4); font-family: var(--mono); margin-top: 2px; }
.gl-en { color: var(--ink-2); }
.gl-note { display: block; margin-top: 3px; font-size: var(--t-sm); color: var(--ink-3); }
.gl-tags { display: flex; gap: var(--s-2); align-items: center; margin-top: var(--s-2); }

/* Grammar notes */
.gr-list { display: grid; gap: var(--s-4); }
.gr-item {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--lvl, var(--ink));
}
.gr-pattern { font-size: var(--t-md); font-weight: 600; letter-spacing: var(--tr-head); }
.gr-ex {
  margin: var(--s-3) 0;
  padding-left: var(--s-4);
  border-left: 1px solid var(--rule);
  font-size: var(--t-md);
}
.gr-why { font-size: var(--t-sm); color: var(--ink-2); margin: 0; }

/* Two excerpts of the same article at one level are published separately;
   the part number rides along in the heading so they read as distinct. */
.h1-part {
  font-size: 0.42em;
  font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-3);
  vertical-align: middle;
}

/* ── Practice: question cards, options, scoring ────────────────────────── */

.q-list { display: grid; gap: var(--s-5); counter-reset: q; }

.q-card {
  padding: var(--s-5);
  background: var(--bg-raise);
  border: 1px solid var(--rule);
  scroll-margin-top: calc(var(--header-h) + 60px);
}
.q-card.is-right { border-color: var(--ok); }
.q-card.is-wrong { border-color: var(--bad); }

.q-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.q-n {
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-4);
  min-width: 22px;
}
.q-focus {
  font-size: var(--t-xs);
  color: var(--ink-3);
  padding: 2px 7px;
  border: 1px solid var(--rule);
}
.q-type { margin-left: auto; }

.q-stem {
  font-size: var(--t-md);
  line-height: 1.6;
  margin-bottom: var(--s-4);
  max-width: 68ch;
}
.gap {
  display: inline-block;
  min-width: 5.5ch;
  border-bottom: 2px solid var(--ink);
  vertical-align: baseline;
  margin: 0 2px;
}

/* Options: a stack of hairline rows. The key letter sits in its own column so
   the German text starts on a single vertical line down the card. */
.q-opts { display: grid; gap: -1px; gap: var(--s-2); }
.q-opts.is-wide { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

.q-opt {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: 10px var(--s-4);
  text-align: left;
  background: transparent;
  border: 1px solid var(--rule);
  cursor: pointer;
  font-size: var(--t-base);
  transition: border-color 0.1s, background 0.1s;
}
.q-opt:hover:not(:disabled) { border-color: var(--ink); }
.q-opt:disabled { cursor: default; }
.q-key {
  flex: none;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-4);
  width: 14px;
}
.q-opts.is-wide .q-opt { justify-content: center; }
.q-opts.is-wide .q-key { display: none; }
.q-opt-text { overflow-wrap: anywhere; }

.q-opt.is-right { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.q-opt.is-right .q-key { color: var(--ok); }
.q-opt.is-wrong { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); text-decoration: line-through; }
.q-opt.is-wrong .q-key { color: var(--bad); }
.q-opt.is-muted { opacity: 0.5; }

/* Answer / explanation. A <details> so it works without JavaScript; app.js
   opens it automatically once an option is clicked. */
.q-after { margin-top: var(--s-4); border-top: 1px solid var(--rule); }
.q-after summary {
  padding: var(--s-3) 0 0;
  font-size: var(--t-sm);
  color: var(--ink-3);
  cursor: pointer;
  list-style: none;
}
.q-after summary::-webkit-details-marker { display: none; }
.q-after summary::before { content: "▸ "; font-size: 10px; }
.q-after[open] summary::before { content: "▾ "; }
.q-after summary:hover { color: var(--ink); }
.q-after-body { padding-top: var(--s-3); font-size: var(--t-sm); color: var(--ink-2); }
.q-answer { margin-bottom: var(--s-2); }
.q-answer b { color: var(--ink); }
.q-evidence { margin-bottom: var(--s-2); }
.q-evidence-label {
  font-size: var(--t-xs);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-4);
  margin-right: var(--s-2);
}
.q-why { margin-bottom: var(--s-2); }
.q-link { margin: 0; font-size: var(--t-sm); }
.q-link a { border-bottom: 1px solid var(--rule); }
.q-link a:hover { border-bottom-color: var(--ink); }

/* Reading-comprehension grouping: text on the left, its questions on the right */
.q-group { margin-bottom: var(--s-8); }
@media (min-width: 1000px) {
  .q-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-6);
    align-items: start;
  }
  .qg-text { position: sticky; top: calc(var(--header-h) + 24px); }
}
.qg-text {
  padding: var(--s-5);
  background: var(--bg-sunk);
  border: 1px solid var(--rule);
}
.qg-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.qg-title { font-size: var(--t-lg); }
.qg-link { flex: none; font-size: var(--t-sm); color: var(--ink-3); }
.qg-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.qg-body p { font-size: var(--t-base); line-height: 1.7; }
.q-context { margin-bottom: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--rule); }
.q-context-title { font-size: var(--t-base); margin-bottom: var(--s-2); }

/* Score bar — pinned to the bottom, appears once the first answer lands */
.scorebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: var(--bg);
  border-top: 1px solid var(--ink);
  transform: translateY(101%);
  transition: transform 0.18s ease-out;
}
.scorebar.is-on { transform: none; }
.scorebar-inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  height: 52px;
}
.score-fig { font-family: var(--mono); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.score-fig b { font-size: var(--t-md); }
.score-of { color: var(--ink-4); }
.score-track { flex: 1; height: 3px; background: var(--rule); min-width: 60px; }
.score-fill { display: block; height: 100%; width: 0; background: var(--ok); transition: width 0.2s; }
#quiz-reset { margin-left: auto; }
body.has-scorebar { padding-bottom: 52px; }

/* Practice type cards on the hubs */
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-4); }
.type-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  border: 1px solid var(--rule);
  background: var(--bg-raise);
}
.type-card:hover { border-color: var(--ink); }
.type-de {
  font-size: var(--t-xs);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--lvl, var(--ink-3));
}
.type-name { font-size: var(--t-md); font-weight: 600; letter-spacing: var(--tr-head); }
.type-blurb { font-size: var(--t-sm); color: var(--ink-3); }
.type-n { margin-top: auto; padding-top: var(--s-3); font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-4); }

/* The five formats on a level's practice page.
   Rows rather than the card grid above: five cards wrap to four-and-one, which
   makes the last format look like an afterthought, and a grid invites you to
   compare all five before choosing. A list is read top to bottom and stops
   whenever something matches. The German exam term stays for the reader who
   searched for it, but after the English name, not above it. */
.fmt-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rule);
}
.fmt-list li + li { border-top: 1px solid var(--rule); }
.fmt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-3) var(--s-5);
  align-items: baseline;
  padding: var(--s-4) var(--s-5);
  background: var(--bg-raise);
  transition: background 0.12s;
}
.fmt:hover { background: var(--bg-sunk); }
.fmt-name { font-size: var(--t-md); font-weight: 600; letter-spacing: var(--tr-head); }
.fmt-de {
  font-style: normal;
  font-weight: 400;
  font-size: var(--t-sm);
  color: var(--ink-4);
}
.fmt-blurb {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--t-sm);
  color: var(--ink-3);
  max-width: 68ch;
}
.fmt-n {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fmt:hover .fmt-n { color: var(--lvl, var(--ink-3)); }

/* ── Home & hub pages ──────────────────────────────────────────────────── */

.hero {
  padding: var(--s-9) 0 var(--s-8);
  border-bottom: 1px solid var(--rule);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: end;
}
.hero h1 {
  font-size: clamp(2.5rem, 7vw, var(--t-3xl));
  line-height: 0.98;
  letter-spacing: var(--tr-display);
  max-width: 14ch;
}
.hero h1 em {
  font-style: normal;
  color: var(--ink-3);
}
.hero-lede {
  margin-top: var(--s-5);
  max-width: 54ch;
  font-size: var(--t-md);
  color: var(--ink-2);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
/* The way in for a reader who is below A1 — a sentence under the buttons, not
   a third button, because it is an aside to the choice and not part of it. */
.hero-note { margin: var(--s-4) 0 0; font-size: var(--t-sm); color: var(--ink-3); }
.hero-note a { color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.hero-note a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* The figures block: four numbers set in the mono face, right-aligned to the
   grid edge. It is the whole "what is this site" argument, without adjectives. */
.hero-figs { display: grid; gap: var(--s-3); }
.hero-fig {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule);
}
.hero-fig b {
  font-family: var(--mono);
  font-size: var(--t-xl);
  font-weight: 500;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.hero-fig span {
  font-size: var(--t-xs);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
}

/* Level table on the home page: one row per level, the site's spine spelled out */
.lvl-table { border-top: 1px solid var(--rule); }
.lvl-rowlink {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) repeat(3, minmax(78px, 96px));
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.lvl-rowlink::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: -1px;
  width: 3px;
  background: var(--lvl);
  opacity: 0;
  transition: opacity 0.12s;
}
.lvl-rowlink:hover { background: var(--bg-sunk); }
.lvl-rowlink:hover::before { opacity: 1; }
.lvl-code {
  font-family: var(--mono);
  font-size: var(--t-xl);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--lvl);
  padding-left: var(--s-4);
}
.lvl-name { font-size: var(--t-md); font-weight: 600; letter-spacing: var(--tr-head); }
.lvl-blurb { display: block; margin-top: 2px; font-size: var(--t-sm); color: var(--ink-3); }
.lvl-cell { text-align: right; }
.lvl-cell b {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-base);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.lvl-cell span {
  font-size: 10px;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-4);
}

/* Three-up feature row */
.feature-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border: 1px solid var(--rule);
  border-right: 0;
}
.feature {
  padding: var(--s-6);
  border-right: 1px solid var(--rule);
}
.feature-n {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--ink-4);
  margin-bottom: var(--s-3);
}
.feature h3 { font-size: var(--t-md); margin-bottom: var(--s-2); }
.feature p { font-size: var(--t-sm); color: var(--ink-3); margin: 0; }
.feature a { margin-top: var(--s-3); display: inline-block; font-size: var(--t-sm); border-bottom: 1px solid var(--rule); }
.feature a:hover { border-bottom-color: var(--ink); }

/* Level hub header */
.hub-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-6);
  align-items: end;
  padding-bottom: var(--s-5);
  border-bottom: 2px solid var(--lvl, var(--ink));
  margin-bottom: var(--s-6);
}
.hub-code {
  font-family: var(--mono);
  font-size: clamp(3rem, 9vw, 5.5rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--lvl);
}
.hub-can {
  font-size: var(--t-md);
  color: var(--ink-2);
  max-width: 46ch;
  margin-top: var(--s-3);
}
/* The three steps.
   Stacked, not three across: a row of equal columns reads as a menu to pick
   from, a numbered column reads as an order to follow — which is what it is.
   One link each, at full width on touch, so there is nothing to weigh up. */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rule);
}
.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-5);
  padding: var(--s-6);
  border-bottom: 1px solid var(--rule);
}
.step:last-child { border-bottom: 0; }
.step-n {
  font-family: var(--mono);
  font-size: var(--t-lg);
  font-weight: 500;
  line-height: 1;
  color: var(--lvl, var(--ink-4));
  font-variant-numeric: tabular-nums;
}
.step-title { font-size: var(--t-md); margin: 0; }
.step-body {
  margin: var(--s-2) 0 0;
  font-size: var(--t-sm);
  color: var(--ink-3);
  max-width: 62ch;
}
.step-go {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding: 9px 16px;
  border: 1px solid var(--ink);
  font-size: var(--t-sm);
  font-weight: 600;
  transition: background 0.12s, color 0.12s;
}
.step-go:hover { background: var(--ink); color: var(--bg); }
.step-more {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  margin: var(--s-4) 0 0;
  font-size: var(--t-sm);
}
.step-more a { color: var(--ink-3); border-bottom: 1px solid var(--rule); }
.step-more a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.step-more-label {
  font-size: var(--t-xs);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-4);
}

/* The only onward-level link in the body; the rail below carries the rest. */
.hub-next { margin: var(--s-8) 0; border-left-color: var(--lvl, var(--ink)); }
.hub-next b { font-weight: 500; }
.hub-next a { border-bottom: 1px solid var(--rule); }
.hub-next a:hover { border-bottom-color: var(--ink); }

/* Topic index */
.topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.topic-cell {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg);
}
.topic-cell:hover { background: var(--bg-sunk); }
.topic-cell b { font-weight: 500; font-size: var(--t-sm); }
.topic-cell span { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-4); }

/* ── Long-form prose (guides, attribution, privacy) ────────────────────── */

.prose { max-width: 72ch; }
.prose h2 {
  font-size: var(--t-xl);
  margin-top: var(--s-8);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.prose h3 { font-size: var(--t-lg); margin-top: var(--s-6); }
.prose h2 + p, .prose h3 + p { margin-top: var(--s-4); }
.prose p { font-size: var(--t-md); color: var(--ink-2); }
.prose p strong, .prose li strong { color: var(--ink); }
.prose ul, .prose ol { margin: 0 0 var(--s-4); padding-left: var(--s-5); }
.prose ul li { list-style: none; position: relative; margin-bottom: var(--s-2); font-size: var(--t-md); color: var(--ink-2); }
.prose ul li::before { content: "—"; position: absolute; left: calc(var(--s-5) * -1); color: var(--ink-4); }
.prose ol { counter-reset: p; }
.prose ol li { list-style: none; position: relative; margin-bottom: var(--s-2); counter-increment: p; font-size: var(--t-md); color: var(--ink-2); }
.prose ol li::before {
  content: counter(p) ".";
  position: absolute;
  left: calc(var(--s-5) * -1);
  font-family: var(--mono);
  font-size: var(--t-sm);
  color: var(--ink-4);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s-5) 0;
  font-size: var(--t-sm);
}
.prose th, .prose td {
  text-align: left;
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.prose th {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom-color: var(--ink);
}
.prose td[lang="de"] { font-weight: 500; color: var(--ink); }

/* Table wrapper so a wide table scrolls itself rather than the page */
.table-scroll { overflow-x: auto; }

/* Guide index */
.guide-list { border-top: 1px solid var(--rule); }
.guide-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-5);
  align-items: baseline;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule);
}
.guide-row:hover { background: var(--bg-sunk); }
.guide-row b { font-size: var(--t-md); font-weight: 500; letter-spacing: var(--tr-head); }
.guide-row span { display: block; margin-top: 2px; font-size: var(--t-sm); color: var(--ink-3); }
.guide-row .arrow { color: var(--ink-4); }
.guide-row:hover .arrow { color: var(--ink); }

/* 404 */
.notfound { text-align: center; padding: var(--s-9) 0; }
.notfound .code {
  font-family: var(--mono);
  font-size: clamp(4rem, 16vw, 9rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--rule);
}
.notfound h1 { margin: var(--s-5) 0 var(--s-3); }
.notfound p { color: var(--ink-3); max-width: 46ch; margin-inline: auto; }

/* ── The alphabet page ─────────────────────────────────────────────────────
   Thirty cells that have to read as one block rather than thirty boxes, so
   the grid draws itself with 1px gaps over a ruled ground: the cells share
   hairlines the way a table does, with no doubled borders between them.
   ───────────────────────────────────────────────────────────────────────── */

.al-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1px;
  padding: 1px;
  background: var(--rule);
}
.al-cell {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-4);
  background: var(--bg);
}
/* The four characters English does not have are the reason the page exists */
.al-cell.is-extra { background: var(--bg-sunk); }

.al-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); }
.al-glyph { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.al-up {
  font-size: var(--t-2xl);
  font-weight: 500;
  letter-spacing: var(--tr-display);
}
.al-low {
  font-size: var(--t-lg);
  font-weight: 400;
  color: var(--ink-3);
}

.al-audio {
  flex: none;
  padding: 4px;
  margin: -4px -4px 0 0;
  background: none;
  border: 0;
  color: var(--ink-4);
  cursor: pointer;
}
.al-audio:hover { color: var(--ink); }
.al-audio.is-playing { color: var(--accent); }

/* The letter's name, then the same name in IPA — the respelling is an
   approximation and the IPA is the record of what it approximates. */
.al-name {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.al-ipa {
  display: block;
  margin-top: 1px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--ink-4);
}

.al-ex {
  display: block;
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  font-size: var(--t-base);
  font-weight: 500;
}
.al-ex:hover { text-decoration: underline; text-underline-offset: 3px; }
.al-art { color: var(--lvl); font-weight: 400; }
.al-gloss {
  display: block;
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--ink-3);
}

/* ── Buchstabiertafel ──────────────────────────────────────────────────────
   Thirty-two letter/word pairs. A table would give it four columns of
   headings for two columns of content, so it is set as pairs that wrap. */

.spell-table {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1px;
  margin: var(--s-5) 0;
  padding: 1px;
  background: var(--rule);
}
.sp-pair {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--bg);
  font-size: var(--t-sm);
}
.sp-l {
  flex: none;
  min-width: 2.2em;
  font-family: var(--mono);
  font-weight: 600;
  color: var(--ink);
}
.sp-w { color: var(--ink-2); }

/* ── Footer ────────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--ink);
  margin-top: var(--s-9);
  background: var(--bg);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.5fr);
  gap: var(--s-7);
  padding-block: var(--s-8) var(--s-7);
}
.footer-brand .brand { margin-bottom: var(--s-4); }
.footer-tag { font-size: var(--t-sm); color: var(--ink-3); max-width: 34ch; }
.footer-mail { font-size: var(--t-sm); }
.footer-mail a { color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.footer-mail a:hover { color: var(--ink); border-bottom-color: var(--ink); }

.footer-col h2, .footer-matrix h2 {
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.footer-col { display: grid; align-content: start; }
.footer-col a {
  padding: 4px 0;
  font-size: var(--t-sm);
  color: var(--ink-3);
}
.footer-col a:hover { color: var(--ink); }

.fmatrix { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-3); }
.fmatrix-col { display: grid; align-content: start; gap: 2px; border-top: 2px solid var(--lvl); padding-top: var(--s-2); }
.fmatrix-level {
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--lvl);
  margin-bottom: var(--s-1);
}
.fmatrix-col a:not(.fmatrix-level) { font-size: var(--t-xs); color: var(--ink-4); }
.fmatrix-col a:hover { color: var(--ink); }

.footer-note {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  padding-block: var(--s-4);
  border-top: 1px solid var(--rule);
  font-size: var(--t-xs);
  color: var(--ink-4);
}
.footer-note a { color: var(--ink-3); border-bottom: 1px solid var(--rule); }
.footer-note a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ── Responsive ────────────────────────────────────────────────────────────
   Last file in the cascade, so every override here wins by source order.
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .split-aside { position: static; }

  /* No room for a rail: the word index goes back above the entries as one
     dense strip of chips, which is what it was before the split existed. It is
     already first in the source, so the single column stacks it there. */
  .split-index { gap: var(--s-6); }
  .word-index { position: static; max-height: none; }
  .wi-head { display: none; }
  .wi-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    margin-top: 0;
    padding: var(--s-4) 0;
    overflow: visible;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .wi-list a {
    padding: 3px 8px;
    border: 1px solid var(--rule);
    background: none;
  }
  .wi-list a.is-current { border-color: var(--lvl); background: none; }
  .wi-n { display: none; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-matrix { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  :root { --gutter: 18px; }

  /* Nav collapses to a disclosure panel driven by #nav-toggle */
  .nav-toggle { display: inline-flex; }
  .main-nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    height: auto;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    background: var(--bg);
    border-bottom: 1px solid var(--ink);
    display: none;
  }
  body.nav-open .main-nav { display: block; }
  .nav-list { display: block; }
  .nav-item { display: block; }
  .nav-top {
    width: 100%;
    height: auto;
    padding: var(--s-4) var(--gutter);
    text-align: left;
    border-bottom: 1px solid var(--rule);
    font-size: var(--t-base);
  }
  .nav-top::after { content: "+"; float: right; font-family: var(--mono); color: var(--ink-4); }
  .nav-item.is-open .nav-top::after { content: "\2212"; }
  .nav-panel {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    border-bottom: 1px solid var(--rule);
    background: var(--bg-sunk);
    display: none;
    min-width: 0;
  }
  .nav-item.is-open .nav-panel { display: block; }
  .nav-item:hover .nav-panel:not(.is-open) { display: none; }
  .nav-item.is-open:hover .nav-panel { display: block; }
  .nav-panel a { padding-inline: var(--gutter); }
  .btn-label, .ghost-btn kbd { display: none; }
  #search-trigger { padding: 6px; }

  /* Level rail wraps to two rows of three */
  .level-rail { grid-template-columns: repeat(3, 1fr); }
  .rail-step:nth-child(3n) { border-right: 0; }
  .rail-step:nth-child(-n+3) { border-bottom: 1px solid var(--rule); }

  /* Word rows drop the trailing meta column */
  .w-link { grid-template-columns: minmax(130px, 40%) minmax(0, 1fr); }
  .w-meta { display: none; }

  /* Passage rows keep title + coverage only */
  .p-link { grid-template-columns: 30px minmax(0, 1fr) 76px; }
  .p-link .p-stat { display: none; }

  /* Home level table sheds the numeric columns */
  .lvl-rowlink { grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4) 0; }
  .lvl-cell { display: none; }
  .lvl-code { font-size: var(--t-lg); padding-left: var(--s-3); }

  .hub-head { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .sec-head { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .def-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .gl-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
}

@media (max-width: 640px) {
  main.shell { padding-block: var(--s-6) var(--s-8); }
  .hero { padding: var(--s-7) 0 var(--s-6); }
  .stat-row { grid-template-columns: repeat(2, 1fr); border-bottom: 0; }
  .stat { border-bottom: 1px solid var(--rule); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .fmatrix { grid-template-columns: repeat(3, 1fr); gap: var(--s-4) var(--s-3); }
  .card-grid { grid-template-columns: minmax(0, 1fr); }
  /* On a phone the whole point is that there is a single thing to hit, so the
     one primary action spans the column. It also means a long data-driven
     label (a text title, a format name) can never push the button past the
     viewport. */
  .hub-cta, .hub-cta .btn { width: 100%; }
  .hub-cta .btn { justify-content: center; }
  .step { padding: var(--s-5); gap: var(--s-4); }
  .step-go { width: 100%; justify-content: center; }
  /* Left inline, the German term wraps mid-phrase ("Richtig oder / Falsch")
     and reads as two broken lines rather than one subtitle. */
  .fmt { padding: var(--s-4); }
  .fmt-de { display: block; }
  .q-card { padding: var(--s-4); }
  .entry { padding: var(--s-5) 0; }
  .entry:target { box-shadow: none; }
  .qg-text { padding: var(--s-4); }
  .search-overlay { padding-top: 4vh; }
}

@media (max-width: 420px) {
  .level-rail { grid-template-columns: repeat(2, 1fr); }
  .rail-step { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .rail-step:nth-child(2n) { border-right: 0; }
  .rail-name { display: none; }
  .wi-list a { font-size: var(--t-xs); }
}

/* Printing a word list or a passage should give clean paper, not chrome. */
@media print {
  .site-header, .breadcrumbs, .site-footer, .scorebar, .level-rail,
  .read-toggle, .pagination, .list-nav, .search-overlay, .split-aside { display: none !important; }
  body { font-size: 11pt; }
  main.shell { padding: 0; max-width: none; }
  .split { display: block; }
  .entry, .q-card { break-inside: avoid; }
  a[href^="/"]::after { content: " (germanfluent.com" attr(href) ")"; font-size: 8pt; color: #666; }
}