/* CRE7 Invest — publicatieplek voor de blogs.
   Merk-tokens gelijk aan de bestaande CRE7-omgeving: licht canvas, inkt-tekst,
   teal als enige accentkleur. Bewust geen amber of goud, geen kleur op de
   koppen, geen kaartenraster: dit is leeswerk, dus de hiërarchie komt uit
   typografie en witruimte. */

:root {
  --bg: #f6f8fa;
  --panel: #ffffff;
  --ink: #0f172a;
  --muted: #475569;
  --faint: #94a3b8;
  --teal: #0d9488;
  --teal-ink: #0f766e;
  --teal-soft: #99f6e4;
  --line: #e2e8f0;
  --line-2: #cbd5e1;
  --light-bg: #f1f5f9;

  /* Sans voor de omlijsting, serif voor de lopende tekst: een artikel hoort te
     lezen als een uitgave, niet als een scherm. Beide uit de systeemstack, dus
     geen webfont die het laden ophoudt. */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;

  --schaduw: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 38px rgba(13, 148, 136, 0.06);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- kop en voet --- */

.kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.merk {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.merk span {
  color: var(--teal-ink);
  font-weight: 600;
  margin-left: 5px;
}

.kop-link,
.terug a {
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 550;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color 0.18s;
}

.kop-link:hover,
.terug a:hover {
  color: var(--teal-ink);
}

.voet {
  border-top: 1px solid var(--line);
  margin-top: 64px;
  padding: 26px 22px 40px;
  color: var(--faint);
  font-size: 13px;
}

.voet p {
  margin: 0 0 4px;
  max-width: 66ch;
}

.voet a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
}

/* --- leesbaan --- */

.lees {
  max-width: 660px;
  margin: 0 auto;
  padding: 40px 22px 0;
}

h1 {
  font-size: clamp(28px, 5.2vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  font-weight: 700;
}

.inleiding {
  font-family: var(--serif);
  font-size: 18.5px;
  line-height: 1.62;
  color: var(--muted);
  margin: 0 0 34px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

article p,
article li {
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.72;
}

article p {
  margin: 0 0 22px;
}

article h2 {
  font-family: var(--sans);
  font-size: 20px;
  letter-spacing: -0.01em;
  margin: 42px 0 14px;
  font-weight: 650;
}

article h3 {
  font-family: var(--sans);
  font-size: 16.5px;
  margin: 32px 0 10px;
  font-weight: 650;
}

article ul,
article ol {
  margin: 0 0 22px;
  padding-left: 22px;
}

article li {
  margin-bottom: 9px;
}

article blockquote {
  margin: 28px 0;
  padding: 2px 0 2px 20px;
  border-left: 2px solid var(--teal-soft);
  color: var(--muted);
  font-family: var(--serif);
  font-style: italic;
}

article a {
  color: var(--teal-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--teal-soft);
}

article strong {
  font-weight: 650;
  color: var(--ink);
}

article hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 40px 0;
}

/* --- lijst met artikelen --- */

.lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

/* De inleiding sluit al af met een lijn; de lijst zet er anders een tweede
   onder, met een gat ertussen. De marge van de inleiding vervalt hier ook,
   anders staat de eerste titel los van de lijn waar hij onder hoort. */
.inleiding:has(+ .lijst) {
  margin-bottom: 0;
}

.inleiding + .lijst {
  border-top: 0;
}

.lijst li {
  border-bottom: 1px solid var(--line);
}

.lijst a {
  display: block;
  padding: 22px 4px;
  text-decoration: none;
  color: inherit;
  transition: background 0.18s;
}

.lijst a:hover {
  background: var(--light-bg);
}

.lijst h2 {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.lijst p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* Alleen zichtbaar in de conceptbouw: een stuk dat nog niet publiek hoort.
   Slate en niet amber, want CRE7 draagt teal als enige accentkleur. */
.stand {
  display: inline-block;
  background: var(--light-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 12px;
  margin: 0 0 22px;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 550;
}

.terug {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

@media (max-width: 600px) {
  .lees {
    padding-top: 30px;
  }

  .inleiding {
    font-size: 17.5px;
  }

  article p,
  article li {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}