/* SMOVI — blog. Zelfde ontwerptaal als de landingspagina, maar met een
   leeskolom in plaats van bleed-koppen. Staat bewust naast /assets, omdat
   /assets/* een cache van een jaar krijgt en dit bestand nog wijzigt. */

:root{
  --cream:#FDF4B7;
  --mint:#B6F2AE;
  --accent:#AE72F9;
  --accent-deep:#7C3FE0;
  --ink:#1C1712;
  --ink-soft:rgba(28,23,18,0.66);
  --ink-faint:rgba(28,23,18,0.42);
  --paper:#FFFEF6;
  --line:rgba(28,23,18,0.16);
  --font-display:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
::selection{background:var(--accent-deep); color:var(--paper);}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;}

/* ---------- topbar ----------
   Op de landingspagina zweeft de balk met mix-blend-mode over wisselende
   secties. Hier staat hij gewoon bovenin de donkere kop: één achtergrond,
   dus geen blend nodig en altijd genoeg contrast. */
.topbar{
  position:relative;
  z-index:50;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:2rem;
  padding:1.4rem 6vw;
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--paper);
}
.topbar .brand{font-weight:600;}
.rail{
  display:flex;
  align-items:flex-start;
  gap:1.8rem;
  justify-self:center;
}
.rail-node{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.45rem;
  font-family:var(--font-mono);
  color:currentColor;
  opacity:0.85;
  transition:opacity 0.25s;
}
.rail-dot{
  width:0.5rem;
  height:0.5rem;
  border-radius:50%;
  background:transparent;
  border:1.5px solid currentColor;
  transition:background 0.25s, border-color 0.25s, transform 0.25s;
  flex-shrink:0;
}
.rail-label{
  font-size:0.62rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.rail-node:hover{opacity:1;}
.rail-node:hover .rail-dot{transform:scale(1.25);}
.rail-node.active{opacity:1;}
.rail-node.active .rail-dot{background:var(--accent); border-color:var(--accent); transform:scale(1.5);}
.rail-node.active .rail-label{color:var(--accent);}
/* op de paarse artikelkop verdwijnt het paarse accent — mint houdt contrast */
.cover .rail-node.active .rail-dot{background:var(--mint); border-color:var(--mint);}
.cover .rail-node.active .rail-label{color:var(--mint);}
.cover .topbar-icon:hover, .cover .topbar-icon:focus-visible{color:var(--mint);}
@media (max-width:900px){ .rail{display:none;} }

.topbar-actions{display:flex; align-items:center; gap:1rem; justify-self:end;}
.topbar-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.7rem;
  height:1.7rem;
  color:currentColor;
  transition:color 0.25s ease;
}
.topbar-icon svg{width:1.05rem; height:1.05rem; display:block;}
.topbar-icon:hover, .topbar-icon:focus-visible{color:var(--mint);}

.burger{
  display:none;
  position:relative;
  width:1.6rem;
  height:1.6rem;
  padding:0;
  background:none;
  border:none;
  cursor:pointer;
  color:currentColor;
}
.burger span{
  position:absolute;
  left:0; right:0;
  height:2px;
  background:currentColor;
  transition:transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.burger span:nth-child(1){top:0.35rem;}
.burger span:nth-child(2){top:0.75rem;}
.burger span:nth-child(3){top:1.15rem;}
.burger.open span:nth-child(1){top:0.75rem; transform:rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){top:0.75rem; transform:rotate(-45deg);}
@media (max-width:900px){
  .burger{display:block;}
  .topbar{display:flex; justify-content:space-between; gap:1rem;}
}

.mobile-nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:45;
  background:var(--ink);
  color:var(--cream);
  padding:6.5rem 6vw 2.5rem;
  display:flex;
  flex-direction:column;
  gap:0.2rem;
  transform:translateY(-100%);
  opacity:0;
  transition:transform 0.35s cubic-bezier(.16,.84,.44,1), opacity 0.35s ease;
  pointer-events:none;
}
.mobile-nav.open{transform:translateY(0); opacity:1; pointer-events:auto;}
.mobile-nav-link{
  font-family:var(--font-display);
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(1.6rem,7vw,2.6rem);
  letter-spacing:-0.02em;
  padding:0.5rem 0;
  border-bottom:1px solid rgba(253,244,183,0.15);
}
.mobile-nav-link:last-child{border-bottom:none;}
.mobile-nav-link:active{color:var(--accent);}
@media (min-width:901px){ .mobile-nav{display:none;} }

/* ---------- gedeelde bouwstenen ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent-deep);
  display:inline-flex;
  margin-bottom:1.4rem;
}
.eyebrow::after{content:"_"; color:var(--accent); font-weight:700;}
.dark .eyebrow, .cover .eyebrow{color:var(--mint);}
.dark .eyebrow::after, .cover .eyebrow::after{color:var(--mint);}

.btn{
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.95rem;
  padding:0.95em 1.7em;
  border-radius:999px;
  display:inline-block;
  white-space:nowrap;
  transition:translate 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.btn:hover{translate:0 -2px;}
.btn:active{translate:0 0; transition-duration:0.1s;}
.btn-primary{background:var(--accent); color:var(--paper);}
.btn-primary:hover{background:var(--accent-deep); box-shadow:0 10px 24px -8px rgba(124,63,224,0.55);}
.btn-ghost{border:1.5px solid var(--ink); color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:var(--cream);}
.dark .btn-ghost{border-color:var(--cream); color:var(--cream);}
.dark .btn-ghost:hover{background:var(--cream); color:var(--ink);}

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.8s cubic-bezier(.16,.84,.44,1), transform 0.8s cubic-bezier(.16,.84,.44,1);
}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ---------- artikelkop: beeldvariant 3, als echte tekst ----------
   Op desktop houdt de kop de 1200×630-verhouding van het deelbeeld aan; op
   smalle schermen mag hij meegroeien, anders wordt de titel onleesbaar klein. */
.cover{
  background:var(--accent-deep);
  color:var(--paper);
}
.cover-card{
  max-width:78rem;
  margin:0 auto;
  padding:clamp(2.5rem,5vw,4.75rem) 6vw clamp(2.5rem,4vw,3.6rem);
  display:flex;
  flex-direction:column;
  min-height:min(34rem, 62vh);
}
.cover-card .eyebrow{margin-bottom:0;}
.cover h1{
  font-weight:600;
  letter-spacing:-0.032em;
  line-height:1.09;
  font-size:clamp(2.1rem,5.2vw,4rem);
  margin-top:auto;
  padding-top:3rem;
  max-width:17ch;
  text-wrap:balance;
}
.cover .rule{height:5px; width:88px; border-radius:3px; background:var(--mint); margin-top:1.7rem;}
.cover-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  margin-top:2.4rem;
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(255,254,246,0.72);
}
.cover-foot .lockup{display:flex; align-items:center; gap:0.7rem;}
.cover-foot .wordmark{font-weight:600; letter-spacing:0.3em; color:var(--paper);}
.cover-foot{flex-wrap:wrap;}
.cover-meta{display:flex; flex-wrap:wrap; gap:0.4rem 0.9rem; justify-content:flex-end;}
.cover-meta > *:not(:last-child)::after{content:"·"; margin-left:0.9rem; opacity:0.6;}
/* smal scherm: de kop hoeft niet zo hoog te zijn, en datum en leestijd
   zakken naar hun eigen regel in plaats van halverwege af te breken */
@media (max-width:700px){
  .cover-card{min-height:min(26rem,52vh);}
  .cover h1{padding-top:2rem;}
  .cover-meta{justify-content:flex-start;}
}

/* ---------- leeskolom ---------- */
.article{
  padding:clamp(3.5rem,7vw,6rem) 6vw clamp(4rem,8vw,7rem);
}
.prose{
  max-width:42rem;
  margin:0 auto;
}
.prose > p{
  font-size:1.08rem;
  line-height:1.75;
  color:rgba(28,23,18,0.8);
  margin:0 0 1.45rem;
}
.prose > p.lead{
  font-size:clamp(1.18rem,2.2vw,1.42rem);
  line-height:1.6;
  color:var(--ink);
  margin-bottom:2.2rem;
}
.prose h2{
  font-family:var(--font-display);
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(1.6rem,3.6vw,2.3rem);
  line-height:1.02;
  letter-spacing:-0.025em;
  margin:3.6rem 0 1.4rem;
  -webkit-text-stroke:0.018em currentColor;
  paint-order:stroke fill;
}
.prose h2:first-child{margin-top:0;}
.prose strong{font-weight:700; color:var(--ink);}
.prose a{
  color:var(--accent-deep);
  text-decoration:underline;
  text-underline-offset:0.2em;
  text-decoration-thickness:1px;
}
.prose a:hover{color:var(--ink);}

/* een uitgelicht inzicht midden in de tekst — als p binnen .prose, dus
   het selectorgewicht moet boven `.prose > p` uitkomen. Het korte streepje
   erboven is hetzelfde accent als op de artikelkop, in plaats van een balk
   naast de tekst. */
.prose > p.callout{
  position:relative;
  padding-top:1.9rem;
  margin:2.8rem 0 3rem;
  font-size:clamp(1.25rem,2.4vw,1.5rem);
  line-height:1.45;
  font-weight:600;
  letter-spacing:-0.015em;
  color:var(--ink);
}
.prose > p.callout::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:88px;
  height:5px;
  border-radius:3px;
  background:var(--accent-deep);
}

/* de twaalf vragen — zelfde ritme als de processtappen op de homepage */
.qblock{margin:2.6rem 0 0;}
.qblock-title{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent-deep);
  margin-bottom:0.4rem;
}
.q{
  display:grid;
  grid-template-columns:3.2rem 1fr;
  gap:0 1.4rem;
  padding:1.7rem 0;
  border-top:1px solid var(--line);
  align-items:start;
}
.qblock .q:last-child{border-bottom:1px solid var(--line);}
.q .num{
  font-family:var(--font-mono);
  font-size:0.95rem;
  color:var(--accent-deep);
  padding-top:0.25rem;
}
.q h3{
  font-size:1.12rem;
  font-weight:700;
  line-height:1.4;
  letter-spacing:-0.01em;
}
.q p{
  grid-column:2;
  margin:0.55rem 0 0;
  color:var(--ink-soft);
  line-height:1.65;
}
@media (max-width:560px){
  .q{grid-template-columns:2.4rem 1fr; gap:0 1rem;}
  .q p{grid-column:2;}
}

/* ---------- afsluitende call-to-action ---------- */
.article-cta{
  background:var(--ink);
  color:var(--cream);
  padding:clamp(3.5rem,7vw,5.5rem) 6vw;
}
.article-cta .inner{max-width:42rem; margin:0 auto;}
.article-cta h2{
  font-family:var(--font-display);
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(1.9rem,5vw,3.1rem);
  line-height:0.95;
  letter-spacing:-0.03em;
  margin-bottom:1.4rem;
}
.article-cta p{
  color:rgba(253,244,183,0.72);
  line-height:1.7;
  margin:0 0 1.2rem;
  font-size:1.05rem;
}
.article-cta .cta-row{display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem;}
/* het blok is donker maar draagt geen .dark-klasse — de ghost-knop moet hier
   dus zelf licht worden, anders staat inkt op inkt */
.article-cta .btn-ghost{border-color:var(--cream); color:var(--cream);}
.article-cta .btn-ghost:hover{background:var(--cream); color:var(--ink);}
.article-cta a.mail{color:var(--mint); text-decoration:underline; text-underline-offset:0.2em;}

/* ---------- blogoverzicht ---------- */
.blog-hero{
  background:var(--ink);
  color:var(--cream);
  padding-bottom:clamp(3rem,6vw,5rem);
}
.blog-hero .inner{max-width:78rem; margin:0 auto; padding:clamp(2.5rem,6vw,5rem) 6vw 0;}
.blog-hero h1{
  font-family:var(--font-display);
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(3rem,12vw,8rem);
  line-height:0.86;
  letter-spacing:-0.05em;
  color:var(--mint);
  -webkit-text-stroke:0.022em currentColor;
  paint-order:stroke fill;
}
.blog-hero p{
  margin-top:2rem;
  max-width:44ch;
  font-size:clamp(1.02rem,1.6vw,1.25rem);
  line-height:1.6;
  color:rgba(253,244,183,0.7);
}
.blog-list{
  padding:clamp(3.5rem,7vw,6rem) 6vw clamp(4rem,8vw,7rem);
  background:var(--cream);
  flex:1;
}
/* met één artikel is de pagina korter dan het scherm — zo blijft de voettekst
   onderaan staan in plaats van halverwege */
body.blog-page{display:flex; flex-direction:column; min-height:100vh;}
.blog-list .inner{max-width:78rem; margin:0 auto; display:grid; gap:2rem;}
.post-card{
  display:grid;
  grid-template-columns:minmax(0,22rem) minmax(0,1fr);
  gap:0 2.6rem;
  align-items:center;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:1.4rem;
  overflow:hidden;
  transition:translate 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.post-card:hover{
  translate:0 -5px;
  border-color:var(--accent);
  box-shadow:0 22px 44px -20px rgba(124,63,224,0.28);
}
/* het deelbeeld is 1200×630; bijsnijden zou de titel eruit knippen, dus het
   beeld blijft heel en de paarse achtergrond vult de rest van de kolom */
.post-card .thumb{align-self:stretch; display:flex; align-items:center; overflow:hidden; background:var(--accent-deep);}
.post-card .thumb img{width:100%; height:auto; transition:transform 0.7s cubic-bezier(.22,.61,.36,1);}
.post-card:hover .thumb img{transform:scale(1.03);}
.post-card .body{padding:2.2rem 2.4rem 2.2rem 0;}
.post-card .tag{
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--accent-deep);
}
.post-card h2{
  font-family:var(--font-display);
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(1.3rem,2.6vw,2rem);
  line-height:1.02;
  letter-spacing:-0.02em;
  margin:0.7rem 0 0.9rem;
}
.post-card p{color:var(--ink-soft); line-height:1.6;}
.post-card .more{
  display:inline-block;
  margin-top:1.4rem;
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--accent-deep);
}
.post-card:hover .more{color:var(--ink);}
@media (max-width:760px){
  .post-card{grid-template-columns:1fr;}
  .post-card .body{padding:1.8rem 1.8rem 2rem;}
}

/* ---------- footer (gelijk aan de landingspagina) ---------- */
footer{
  padding:2.5rem 6vw;
  background:var(--ink);
  color:rgba(253,244,183,0.4);
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  display:flex;
  justify-content:center;
}
.footer-info{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:0.5rem 1rem;
  text-align:center;
  max-width:60rem;
}
.footer-info a{color:inherit; transition:color 0.2s ease;}
.footer-info a:hover, .footer-info a:focus-visible{color:var(--accent);}
.footer-info > *:not(:last-child)::after{content:"·"; margin-left:1rem; opacity:0.6;}