/* ============================================================
   lou · blog styles
   Zelfde tokens en typeschaal als de homepage.
   ============================================================ */
:root{
  --t-xs:.75rem;   --t-sm:.875rem;  --t-base:1rem;   --t-lg:1.125rem;
  --t-xl:1.25rem;  --t-2xl:1.5rem;  --t-3xl:1.875rem;--t-4xl:2.25rem;
  --t-5xl:3rem;    --t-6xl:3.75rem;

  --paper:#FFFFFF;
  --card:#FAF9F6;
  --tint:#F5F3EE;
  --ink:#1C2B4A;
  --muted:#5A6478;
  --green:#0E9F6E;
  --green-ink:#0A7A54;
  --line:#E6E3DC;

  --container:1400px;
  --r-sm:6px; --r-lg:24px; --r-xl:28px; --r-full:9999px;
  --lift:0 1px 2px rgba(28,43,74,.04), 0 8px 24px -12px rgba(28,43,74,.10);
  --lift-lg:0 1px 2px rgba(28,43,74,.04), 0 24px 48px -24px rgba(28,43,74,.16);
  color-scheme:light only;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#fff;color-scheme:light only}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Instrument Sans",system-ui,-apple-system,sans-serif;
  font-size:var(--t-base);line-height:1.625;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
@media(min-width:768px){.container{padding:0 40px}}

/* nav — identiek aan de homepage */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:inline-flex;align-items:center;gap:3px;text-decoration:none}
.logomark{height:26px;width:auto;display:block}
.logo i{display:block;width:7px;height:7px;border-radius:50%;background:var(--green);align-self:flex-end;margin-bottom:4px;font-style:normal}
.nav-links{display:none;gap:32px;font-size:var(--t-sm);color:var(--muted)}
.nav-links a{text-decoration:none}
.nav-links a:hover{color:var(--ink)}
@media(min-width:900px){.nav-links{display:flex}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:var(--t-base);font-weight:600;text-decoration:none;padding:15px 28px;border-radius:var(--r-full);border:1.5px solid transparent;transition:background .15s ease,transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-ink)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.nav .btn{padding:10px 20px;font-size:var(--t-sm)}

.eyebrow{font-size:var(--t-xs);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--green-ink);margin:0 0 18px}

/* ---------- index ---------- */
.blog-head{padding:64px 0 40px;border-bottom:1px solid var(--line)}
.blog-head h1{font-size:var(--t-4xl);font-weight:600;letter-spacing:-.03em;line-height:1.08;margin:0 0 16px;max-width:16ch}
@media(min-width:768px){.blog-head h1{font-size:var(--t-5xl)}}
.blog-head p{color:var(--muted);font-size:var(--t-lg);max-width:52ch;margin:0}

.posts{display:grid;gap:24px;padding:56px 0 100px}
@media(min-width:800px){.posts{grid-template-columns:repeat(3,1fr)}}
.post-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:30px 28px 32px;text-decoration:none;display:flex;flex-direction:column;
  box-shadow:var(--lift);transition:box-shadow .25s ease,transform .25s ease;
}
.post-card:hover{box-shadow:var(--lift-lg);transform:translateY(-2px)}
.post-card .meta{font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.post-card h2{font-size:var(--t-xl);font-weight:600;letter-spacing:-.02em;line-height:1.25;margin:0 0 12px}
.post-card p{margin:0;color:var(--muted);font-size:var(--t-sm);line-height:1.6}
.post-card .more{margin-top:20px;font-size:var(--t-sm);font-weight:600;color:var(--green-ink)}
.post-card.soon{opacity:.62;pointer-events:none}
.badge{display:inline-block;background:var(--tint);border-radius:var(--r-full);padding:3px 10px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-left:8px;vertical-align:middle}

/* ---------- article ---------- */
.article{max-width:680px;margin:0 auto;padding:56px 20px 40px}
.article .meta{font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.article h1{font-size:var(--t-4xl);font-weight:600;letter-spacing:-.03em;line-height:1.08;margin:0 0 24px}
@media(min-width:768px){.article h1{font-size:var(--t-5xl)}}
.standfirst{font-size:var(--t-xl);line-height:1.5;color:var(--muted);margin:0 0 8px}
.article h2{font-size:var(--t-2xl);font-weight:600;letter-spacing:-.02em;line-height:1.25;margin:48px 0 14px}
.article p{font-size:var(--t-lg);line-height:1.75;margin:0 0 22px}
.article ul{font-size:var(--t-lg);line-height:1.75;padding-left:22px;margin:0 0 22px}
.article li{margin-bottom:8px}
.article li::marker{color:var(--muted)}
.pull{
  margin:44px 0;padding:0;
  font-size:var(--t-2xl);line-height:1.35;font-weight:600;
  letter-spacing:-.02em;max-width:24ch;
}
.disclaimer{
  background:var(--tint);border-radius:var(--r-lg);padding:22px 24px;
  font-size:var(--t-sm);color:var(--muted);line-height:1.6;margin:44px 0 0;
}
.article-cta{
  background:var(--ink);color:#fff;border-radius:var(--r-xl);
  padding:36px 30px;margin:52px 0 0;text-align:center;
}
.article-cta h3{font-size:var(--t-2xl);font-weight:600;letter-spacing:-.02em;margin:0 0 10px;line-height:1.2}
.article-cta p{font-size:var(--t-base);color:rgba(255,255,255,.72);margin:0 0 22px;line-height:1.6}
.backlink{display:inline-block;margin:0 0 28px;font-size:var(--t-sm);color:var(--muted);text-decoration:none}
.backlink:hover{color:var(--ink)}

footer{border-top:1px solid var(--line);padding:48px 0;font-size:var(--t-sm);color:var(--muted);margin-top:60px}
.foot-in{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
footer a{text-decoration:none}
.foot-links{display:flex;gap:24px}

@media(prefers-color-scheme:dark){
  html,body{background:#fff!important;color:var(--ink)!important;forced-color-adjust:none}
  .nav{background:rgba(255,255,255,.9)!important}
  .post-card{background:#fff!important}
  .article-cta{background:var(--ink)!important}
  .disclaimer,.badge{background:var(--tint)!important}
  h1,h2,h3{color:var(--ink)!important}
  .article-cta h3{color:#fff!important}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── Scroll-reveal ──────────────────────────────────────────────────────────
   Eén keer hier in plaats van vier keer inline: alle vier de pagina's laden
   dit bestand. Bewust binnen no-preference, net als op de homepage: alleen
   daar krijgt .reveal opacity:0, dus wie reduced-motion aan heeft ziet de
   pagina gewoon staan, ook als het script nooit draait. */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(14px);
    transition:opacity .6s cubic-bezier(.2,.6,.3,1),
               transform .6s cubic-bezier(.2,.6,.3,1)}
  .reveal.in{opacity:1;transform:none}
  .reveal[data-d="1"]{transition-delay:.07s}
  .reveal[data-d="2"]{transition-delay:.14s}
  .reveal[data-d="3"]{transition-delay:.21s}
  .reveal[data-d="4"]{transition-delay:.28s}
  .reveal[data-d="5"]{transition-delay:.35s}
}