/* terma blog — built on the terma design tokens (src/tokens.css), so the
   blog reads as unmistakably terma, not a generic template. */

:root {
  --paper: #F6F4F0;
  --surface: #FFFFFF;
  --ink: #14172B;
  --line: #E2DED6;
  --line-strong: #89836F;
  --text-2: #4C5270;
  --muted: #656B85;
  --indigo: #3B45D4;
  --indigo-deep: #2A32A8;
  --indigo-tint: #E6E8FD;
  --brass: #C2913A;
  --brass-tint: #F2DFB4;
  --on-indigo: #ffffff;
  --shadow: 0 1px 2px rgba(20,23,43,.05), 0 8px 24px -12px rgba(20,23,43,.14);
  --font-prose: "Newsreader", Georgia, "Times New Roman", serif;
  /* Headlines get their own, more characterful face - a single serif doing
     both body copy and display headlines is exactly the "flat" look this
     redesign is meant to fix. Fraunces has real optical weight at large
     sizes, so it can carry a magazine-style headline the way Newsreader
     (tuned for reading, not shouting) can't. */
  --font-display: "Fraunces", var(--font-prose);
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0A0C18; --surface: #14182B; --ink: #F0EFEC;
    --line: #262B42; --line-strong: #5F6785;
    --text-2: #A8AEC6; --muted: #868DAB;
    --indigo: #838BF2; --indigo-deep: #A5ABF7; --indigo-tint: #1C2050;
    --brass: #DDAE55; --brass-tint: #2A2011; --on-indigo: #14172b;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --paper: #0A0C18; --surface: #14182B; --ink: #F0EFEC;
  --line: #262B42; --line-strong: #5F6785;
  --text-2: #A8AEC6; --muted: #868DAB;
  --indigo: #838BF2; --indigo-deep: #A5ABF7; --indigo-tint: #1C2050;
  --brass: #DDAE55; --brass-tint: #2A2011; --on-indigo: #14172b;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
}

* { box-sizing: border-box; }
html { color-scheme: light dark; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }

a { color: var(--indigo); text-decoration-color: color-mix(in srgb, var(--indigo) 40%, transparent); }
a:hover { text-decoration-color: var(--indigo); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.prose-wrap { max-width: 680px; margin: 0 auto; padding: 0 24px; }

/* ---------------------------------------------------------------- header */

header.site {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  /* Blijft in beeld tijdens het lezen - "die balk moet meegaan naar
     beneden". Ondoorzichtige achtergrond (hierboven al zo), anders schijnt
     de tekst die eronder doorscrollt zichtbaar door de balk heen. */
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-nav {
  /* Standaard dezelfde breedte als .prose-wrap (een artikel) - zonder dit
     staat de kop veel breder dan de titel/tekst eronder, en lijken ze niet
     bij elkaar te horen. index.html (bredere hero/grid) krijgt de
     .is-wide-uitzondering hieronder. */
  max-width: 680px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-nav.is-wide { max-width: 1080px; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.brand svg { display: block; }
.brand-word { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.brand-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-left: 4px; }
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 10px;
  background: var(--indigo);
  color: var(--on-indigo);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--indigo-deep); }

/* ----------------------------------------------------------------- hero */

.hero {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 24px 32px;
}
.hero h1 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(34px, 5.5vw, 54px);
  line-height: 1.05;
  font-weight: 600;
  margin: 0 0 12px;
  text-wrap: balance;
  max-width: 15ch;
}
.hero p { font-size: 17px; color: var(--text-2); max-width: 52ch; margin: 0; line-height: 1.55; }

/* ------------------------------------------------------------ card grid */

.grid {
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 24px 72px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease;
}
.card:hover { transform: translateY(-2px); }
.card-art { aspect-ratio: 16/10; background: var(--indigo-tint); overflow: hidden; }
.card-art svg, .card-art img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--indigo); font-weight: 600; }
.card-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.2; margin: 0; }
.card-excerpt { font-size: 14px; color: var(--text-2); line-height: 1.5; margin: 0; flex: 1; }
.card-meta { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 4px; }

/* -------------------------------------------------------------- article */

.article-hero { width: 100%; background: var(--indigo-tint); overflow: hidden; max-height: 380px; }
.article-hero svg { width: 100%; height: auto; max-height: 380px; }
.article-hero img { width: 100%; height: 380px; object-fit: cover; }
@media (max-width: 640px) { .article-hero img { height: 220px; } }

article.post { padding: 40px 0 96px; }
.post-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
  margin: 28px 0 10px;
}
.post h1 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(32px, 5vw, 46px);
  line-height: 1.08;
  font-weight: 600;
  margin: 0 0 18px;
  text-wrap: balance;
}
.post .dek {
  font-family: var(--font-prose);
  font-style: italic;
  font-size: 20px;
  color: var(--text-2);
  line-height: 1.5;
  margin: 0 0 36px;
}

.post-body { font-family: var(--font-prose); font-size: 18px; line-height: 1.7; color: var(--ink); }
.post-body p { margin: 0 0 22px; }

/* Drop cap on the opening paragraph only - a classic editorial signal that
   this is a piece meant to be read, not a settings screen. */
.post-body > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 600;
  float: left;
  line-height: 0.82;
  padding: 6px 8px 0 0;
  color: var(--indigo);
}

.post-body h2 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: 30px;
  font-weight: 600;
  margin: 48px 0 18px;
  line-height: 1.2;
}
.post-body h3 { font-family: var(--font-mono); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--indigo); margin: 32px 0 12px; }
.post-body ul, .post-body ol { margin: 0 0 22px; padding-left: 24px; }
.post-body li { margin-bottom: 8px; }
.post-body strong { font-weight: 700; }
.post-body blockquote {
  margin: 40px 0;
  padding: 0 0 0 28px;
  border-left: 3px solid var(--brass);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
  line-height: 1.4;
  color: var(--ink);
}
.post-body figure { margin: 36px 0; }
.post-body figcaption { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 10px; text-align: center; }

/* Big standalone stat, for the one number in a section worth making the
   reader stop on - used sparingly, one or two per article. */
.stat {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin: 40px 0;
  padding: 26px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.stat-number {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: 56px;
  font-weight: 600;
  color: var(--indigo);
  line-height: 1;
  white-space: nowrap;
}
.stat-label { font-family: var(--font-ui); font-size: 15px; color: var(--text-2); line-height: 1.4; }

.price-table { width: 100%; border-collapse: collapse; margin: 8px 0 8px; font-family: var(--font-ui); font-size: 15px; }
.price-table th, .price-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.price-table th { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.price-table td.amount { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; margin: 28px 0; border: 1px solid var(--line); border-radius: 12px; }
.table-scroll .price-table { margin: 0; }
.table-scroll th:first-child, .table-scroll td:first-child { padding-left: 16px; }

.compare-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.compare-table th, .compare-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare-table th { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); background: var(--paper); }
.compare-table td.yes { color: var(--indigo); font-weight: 700; }
.compare-table td.no { color: var(--muted); }
.compare-table tr.highlight td { background: var(--indigo-tint); font-weight: 600; }

.callout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--indigo);
  border-radius: 10px;
  padding: 18px 22px;
  margin: 32px 0;
  font-size: 16px;
}
.callout strong { color: var(--indigo); }

.cta-band {
  margin: 56px 0 8px;
  padding: 32px;
  border-radius: 16px;
  background: var(--indigo);
  color: var(--on-indigo);
  text-align: center;
}
.cta-band h3 { font-family: var(--font-display); font-size: 26px; margin: 0 0 8px; }
.cta-band p { margin: 0 0 20px; opacity: 0.9; }
.cta-band a {
  display: inline-flex;
  background: var(--on-indigo);
  color: var(--indigo-deep);
  padding: 11px 22px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
}

.related { border-top: 1px solid var(--line); padding-top: 32px; margin-top: 56px; }
.related h3 { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 16px; }
.related-list { display: grid; gap: 10px; }
.related-list a { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ink); text-decoration: none; }
.related-list a:hover { color: var(--indigo); }

footer.site {
  border-top: 1px solid var(--line);
  padding: 32px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
footer.site a { color: var(--muted); }

@media (max-width: 640px) {
  .hero { padding: 40px 20px 24px; }
  .post-body { font-size: 17px; }
}