@font-face { font-family: 'Sohne'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('/assets/fonts/Sohne-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Sohne'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('/assets/fonts/soehne-halbfett.woff2') format('woff2'); }
@font-face { font-family: 'Sohne'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('/assets/fonts/soehne-kraftig.woff2') format('woff2'); }
@font-face { font-family: 'Meraki'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('/assets/fonts/Meraki-Regular.woff2') format('woff2'); }

:root {
  --background: hsla(48, 50%, 98%, 1);
  --surface-default: hsla(48, 30%, 98%, 1);
  --surface-hover: hsla(48, 30%, 94%, 1);
  --border-default: hsla(48, 30%, 91%, 1);
  --border-strongest: hsla(48, 30%, 82%, 1);
  --foreground-default: hsla(48, 15%, 12%, 1);
  --foreground-subtle: hsla(48, 8%, 35%, 1);
  /* darker than the app token (52%): this site sets metadata at 12-13px, where 52% fails WCAG AA on paper */
  --foreground-muted: hsla(48, 6%, 40%, 1);
  --accent: #00674F;
  --focus-ring: hsla(200, 60%, 45%, 1);
  --radius-lg: 0.5rem;
  --radius-xl: 0.625rem;
  --shadow-card: 0 0 12px 0 rgba(27, 28, 21, 0.06);
  --font-sans: 'Sohne', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif: 'Meraki', 'Iowan Old Style', Georgia, serif;
}
/* Light-only (Shahzad, 2026-07-16): the page is always the paper surface,
   regardless of the visitor's OS theme. color-scheme keeps UA form controls
   and scrollbars light to match. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground-default);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.75;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 44rem; margin: 0 auto; padding: 0 1.25rem; }

a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
a:focus:not(:focus-visible) { outline: none; }

header.site {
  border-bottom: 1px solid var(--border-default);
  padding: 1.25rem 0;
}
header.site .wrap { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
/* Neutral text wordmark: same slot and scale the SVG wordmark occupied, so
   the header layout doesn't shift when the name is finalized. */
.wordmark-text { font-weight: 600; font-size: 1.15rem; line-height: 1.25rem; letter-spacing: 0.01em; color: var(--foreground-default); }
.brand-star { align-self: center; display: inline-flex; }
.brand-star svg { width: 1.05rem; height: 1.05rem; fill: var(--accent); display: block; }
a.brand { display: inline-flex; align-items: baseline; gap: 0.45rem; text-decoration: none; }
nav.site { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.15rem 1.1rem; font-size: 0.875rem; color: var(--foreground-subtle); }
nav.site a { text-decoration: none; white-space: nowrap; padding: 0.65rem 0.15rem; margin: 0 -0.15rem; display: inline-block; }
nav.site a:hover, nav.site a[aria-current] { text-decoration: underline; text-underline-offset: 3px; }

main { padding: 3.5rem 0 4rem; }

h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 6vw, 3rem);
  line-height: 1.2;
  letter-spacing: 0; /* serif display: the design system's .display rule sets 0, not the sans -0.01em */
  margin: 0 0 1.1rem;
}
.lede { font-size: 1.125rem; color: var(--foreground-default); max-width: 40rem; margin: 0 0 2.5rem; }

h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 3rem 0 1rem;
}
section[id], h2[id] { scroll-margin-top: 1.25rem; }

/* Contents index: a quiet editorial block, not a card. Hairline on top,
   numbered entries in two columns, links underline only on hover (nav
   convention, matching the site header). */
nav.toc { border-top: 1px solid var(--border-default); padding: 1.4rem 0 0; margin: 2.75rem 0 0; }
nav.toc .toc-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--foreground-muted);
  margin: 0 0 0.65rem;
}
nav.toc ol { margin: 0; padding: 0; list-style: none; column-count: 2; column-gap: 3rem; font-size: 0.9375rem; max-width: 40rem; }
@media (max-width: 640px) { nav.toc ol { column-count: 1; } }
nav.toc li { break-inside: avoid; display: flex; gap: 0.75rem; align-items: baseline; }
nav.toc .toc-num { color: var(--foreground-muted); font-variant-numeric: tabular-nums; }
nav.toc a { color: var(--foreground-subtle); text-decoration: none; display: inline-block; padding: 0.28rem 0; }
nav.toc a:hover { color: var(--foreground-default); text-decoration: underline; text-underline-offset: 3px; }

.section-note { font-size: 0.875rem; color: var(--foreground-subtle); margin: -0.4rem 0 0.5rem; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin: 0 0 1rem; padding: 0; list-style: none; }
@media (max-width: 640px) { .stats { grid-template-columns: 1fr; } }
.stat {
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: 1.1rem 1.25rem;
}
.stat .num { font-weight: 600; font-size: 1.9rem; line-height: 1.1; letter-spacing: -0.01em; }
.stat .num small { font-size: 0.95rem; font-weight: 400; color: var(--foreground-muted); letter-spacing: 0.02em; }
.stat .src { font-size: 0.875rem; color: var(--foreground-subtle); margin-top: 0.2rem; }
.stat .meta { font-size: 0.75rem; color: var(--foreground-muted); margin-top: 0.5rem; }
.stat a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
/* Tap targets: metadata links render at 19-22px tall. Padding grows the hit area
   past WCAG 2.5.8's 24px minimum; the negative margin cancels any layout shift.
   Full 44px would overlap the stacked links inside a stat tile, so this stops
   where neighboring targets would collide. */
.stat .src a, .stat .meta a, .review-by a, footer.site a {
  display: inline-block;
  padding: 0.45rem 0.3rem;
  margin: -0.45rem -0.3rem;
}

.entity {
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  padding: 1.6rem 0;
  margin: 2.5rem 0;
}
.entity h2 { margin: 0 0 0.6rem; }
.entity p { margin: 0; max-width: 40rem; color: var(--foreground-subtle); }

.editorial { border-top: 0; margin-top: 0; }
.editorial h3 { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; margin: 1.5rem 0 0.5rem; }
.editorial p { margin: 0 0 0.4rem; }
.editorial ul { margin: 0; padding-left: 1.1rem; max-width: 40rem; color: var(--foreground-subtle); }
.editorial li { margin: 0 0 0.6rem; }

.framing { font-size: 1.125rem; color: var(--foreground-subtle); max-width: 40rem; margin: 0 0 1rem; }

article.review { padding: 1.75rem 0; border-bottom: 1px solid var(--border-default); }
article.review:last-of-type { border-bottom: 0; }
article.review h3 { font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; margin: 0 0 0.35rem; }
/* review titles are quoted verbatim (often Title Case); quote marks render via CSS so
   extracted text stays clean while humans see them as the reviewer's words, not ours */
article.review h3::before { content: "\201C"; }
article.review h3::after { content: "\201D"; }
.review-meta { font-size: 0.8125rem; color: var(--foreground-muted); margin: 0 0 0.75rem; }
.review-meta .rating { font-weight: 600; color: var(--accent); }
article.review blockquote {
  margin: 0 0 0.75rem;
  padding: 0 0 0 1rem;
  border-left: 2px solid var(--border-strongest);
  color: var(--foreground-default);
}
.review-by { font-size: 0.875rem; color: var(--foreground-subtle); margin: 0; }
.review-by a { color: var(--foreground-muted); }

.empty { color: var(--foreground-muted); padding: 1.5rem 0; }

footer.site { border-top: 1px solid var(--border-default); padding: 1.75rem 0 2.5rem; }
footer.site p { margin: 0 0 0.4rem; font-size: 0.8125rem; color: var(--foreground-muted); max-width: 40rem; }

.about p { max-width: 40rem; margin: 0 0 1.1rem; }