/* ONVERTELD · hetisonverteld.nl. Kleuren en letters uit Merk/ONVERTELD_Brandbook.html. Geen externe lettertypes of trackers. */
@font-face{font-family:Playfair;src:url(fonts/Playfair.ttf) format("truetype");font-weight:400 900;font-display:swap}
:root{
  --deep:#1D2231;--navy:#282F41;--cream:#E9DFC4;--paper:#FBFAF4;--bg:#EBE9DC;--ink:#22252E;
  --red:#A8452F;--ochre:#F2C063;--dim:#B9BECB;--muted:#5E647A;
  --serif:Playfair,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--sans)}
a{color:inherit}
img{max-width:100%;display:block}

/* kop */
.top{background:var(--deep);color:var(--cream)}
.bar{max-width:1040px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:700 20px/1 var(--serif);letter-spacing:.04em}
.brand img{width:40px;height:40px;border-radius:50%}
.bar nav{display:flex;gap:18px;font-size:15px}
.bar nav a{text-decoration:none;color:var(--dim)}
.bar nav a:hover,.bar nav a[aria-current]{color:var(--cream)}

/* held */
.hero{background:var(--deep);color:var(--cream);position:relative;overflow:hidden;
  background-image:linear-gradient(rgba(233,223,196,.05) 2px,transparent 2px),linear-gradient(90deg,rgba(233,223,196,.05) 2px,transparent 2px);
  background-size:72px 72px}
.hero .in{max-width:1040px;margin:0 auto;padding:72px 20px 96px;position:relative}
.label{font:600 13px/1 var(--sans);letter-spacing:.3em;color:var(--ochre);display:flex;align-items:center;gap:14px;text-transform:uppercase}
.label:after{content:"";width:56px;height:2px;background:var(--ochre);opacity:.7}
.hero h1{font:700 clamp(40px,7vw,76px)/1.04 var(--serif);margin:22px 0 0;max-width:13ch}
.hero h1 em{font-style:normal;color:var(--ochre)}
.hero p{font-size:clamp(17px,2.2vw,20px);color:var(--dim);max-width:34em;margin:22px 0 0}
.hero p b{color:var(--cream)}
.route{position:absolute;left:0;right:0;bottom:22px;height:60px;pointer-events:none}

/* knoppen naar de kanalen */
.channels{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;text-decoration:none;
  font:600 15px/1 var(--sans);background:var(--cream);color:var(--deep)}
.btn svg{width:20px;height:20px;flex:none}
.btn.yt svg{color:#FF0000}
.btn.ghost{background:transparent;color:var(--cream);border:1.5px solid rgba(233,223,196,.35)}

/* afleveringen */
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
section.eps{padding:64px 0 24px}
h2{font:700 clamp(28px,4vw,38px)/1.15 var(--serif);margin:0 0 8px;color:var(--deep)}
.sub{color:var(--muted);margin:0 0 28px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.ep{text-decoration:none;color:var(--ink)}
.ep img{aspect-ratio:9/16;object-fit:cover;width:100%;border-radius:12px;box-shadow:0 1px 0 rgba(34,37,46,.08)}
.ep span{display:block;font:600 14px/1.35 var(--sans);margin-top:8px}
.ep small{display:block;color:var(--muted);font-size:13px}

/* hoe het werkt */
section.how{padding:48px 0 72px}
.how ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;counter-reset:s}
.how li{background:var(--paper);border-radius:14px;padding:22px;counter-increment:s}
.how li:before{content:counter(s);display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--red);color:var(--paper);font:700 15px/1 var(--sans);margin-bottom:12px}
.how li b{display:block;font:700 19px/1.3 var(--serif);color:var(--deep);margin-bottom:4px}

/* tekstpagina's */
.doc{max-width:760px;margin:0 auto;padding:56px 20px 80px}
.doc h1{font:700 clamp(34px,5vw,48px)/1.1 var(--serif);color:var(--deep);margin:0}
.doc .date{color:var(--muted);margin:10px 0 36px;font-size:15px}
.doc h2{font-size:24px;margin:40px 0 10px}
.doc h3{font:700 17px/1.4 var(--sans);margin:22px 0 6px}
.doc p,.doc li{max-width:68ch}
.doc ul{padding-left:20px}
.doc .box{background:var(--paper);border-left:4px solid var(--red);border-radius:0 12px 12px 0;padding:16px 20px;margin:20px 0}
.doc a{color:var(--red)}

/* voet */
footer{background:var(--deep);color:var(--dim);font-size:15px}
footer .in{max-width:1040px;margin:0 auto;padding:28px 20px;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:18px}
footer a{color:var(--cream);text-decoration:none}
footer a:hover{text-decoration:underline}

@media (max-width:560px){
  .bar nav{gap:14px;font-size:14px}
  .brand span{display:none}
  .hero .in{padding:48px 20px 88px}
}

/* postbus */
section.postbus{padding:24px 0 16px}
.pb{background:var(--deep);color:var(--cream);border-radius:20px;padding:36px;display:grid;grid-template-columns:1fr 1.1fr;gap:36px;
  background-image:linear-gradient(rgba(233,223,196,.05) 2px,transparent 2px),linear-gradient(90deg,rgba(233,223,196,.05) 2px,transparent 2px);background-size:56px 56px}
.pb h2{color:var(--cream);margin:16px 0 12px}
.pb-text p{color:var(--dim);margin:0}
.pb-form{display:flex;flex-direction:column;gap:8px}
.pb-form label{font:600 14px/1.3 var(--sans);color:var(--cream)}
.pb-form label span{font-weight:400;color:var(--dim)}
.pb-form textarea,.pb-form input{font:16px/1.5 var(--sans);color:var(--ink);background:var(--paper);border:2px solid transparent;border-radius:12px;padding:12px 14px;width:100%}
.pb-form textarea{resize:vertical;min-height:110px}
.pb-form textarea:focus,.pb-form input:focus{outline:none;border-color:var(--ochre)}
.pb-form label + textarea,.pb-form label + input{margin-bottom:8px}
.pb-form button{align-self:flex-start;font:700 16px/1 var(--sans);background:var(--ochre);color:var(--deep);border:0;border-radius:999px;padding:14px 22px;cursor:pointer}
.pb-form button:disabled{opacity:.6;cursor:default}
.pb-msg{margin:4px 0 0;min-height:1.4em;font-weight:600}
.pb-msg.ok{color:#8FD3B6}.pb-msg.err{color:#F0A892}
.pb-note{margin:0;font-size:13px;color:var(--dim)}
.pb-note a{color:var(--cream)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:760px){.pb{grid-template-columns:1fr;padding:26px 20px;gap:20px}}