:root{--dark:#1C1A17;--light:#F4EEE4;--accent:#A68F6E;--accentText:#715C3E;--soft:#E9DDC9;--paper:#FBF8F3;--rule:rgba(28,26,23,.18)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--light);color:var(--dark);font-family:'Jost',sans-serif;font-weight:400;font-kerning:normal;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.serif{font-family:'Playfair Display',serif;font-optical-sizing:none}
.cap{font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:500}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.mock{text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;background:var(--dark);color:rgba(244,238,228,.85);padding:8px 16px;font-weight:500}

/* Kopbalk */
.top{position:sticky;top:0;z-index:40;background:rgba(244,238,228,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.top .in{max-width:1280px;margin:0 auto;padding:0 40px;height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.wm{font-family:'Bodoni Moda',serif;font-size:21px;letter-spacing:.3em}
.tnav{display:flex;align-items:center;gap:32px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.tnav a.l{position:relative}
.tnav a.l::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1.5px;background:currentColor;transition:right .5s cubic-bezier(.7,0,.2,1)}
.tnav a.l:hover::after,.tnav a.l.on::after{right:0}
.pill{display:inline-flex;align-items:center;gap:12px;min-height:46px;padding:0 24px;border-radius:999px;border:1.5px solid var(--dark);font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;position:relative;overflow:hidden;z-index:0;transition:color .5s ease}
.pill::before{content:"";position:absolute;inset:0;background:var(--dark);transform:translateY(101%);transition:transform .5s cubic-bezier(.7,0,.2,1);z-index:-1}
.pill:hover{color:var(--light)}
.pill:hover::before{transform:none}
.pill.solid{background:var(--accent);border-color:var(--accent)}
.prog{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}

/* Overzicht: masthead */
.mast{padding:96px 0 56px;border-bottom:1px solid var(--rule)}
.mast .row1{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.mast h1{font-family:'Playfair Display',serif;font-optical-sizing:none;font-weight:400;font-size:clamp(64px,11vw,168px);line-height:.88;margin:0;letter-spacing:-.01em}
.mast h1 em{font-style:italic;color:var(--accentText);font-size:.42em;letter-spacing:0;display:block;margin-top:.25em;padding-left:.12em}
.mast .lead{max-width:440px;font-size:17px;line-height:1.75;margin:0}
.issue{display:flex;gap:28px;flex-wrap:wrap;color:var(--accentText)}

/* Uitgelicht verhaal */
.feat{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:72px;align-items:center;padding:80px 0;border-bottom:1px solid var(--rule)}
.feat .pic{border-radius:999px 999px 24px 24px/340px 340px 24px 24px;overflow:hidden;aspect-ratio:5/6;max-height:720px}
.feat .pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.feat:hover .pic img{transform:scale(1.04)}
.feat .no{font-family:'Playfair Display',serif;font-style:italic;font-size:88px;line-height:1;color:var(--accent)}
.feat h2{font-family:'Playfair Display',serif;font-optical-sizing:none;font-weight:500;font-size:50px;line-height:1.05;margin:18px 0 20px}
.feat h2 em{font-style:italic;color:var(--accentText)}
.feat p{font-size:17px;line-height:1.75;margin:0 0 28px;max-width:440px}
.meta{display:flex;gap:18px;flex-wrap:wrap;color:var(--accentText);margin-bottom:32px}
.more{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;border-bottom:1.5px solid currentColor;padding-bottom:4px}

/* Kaarten */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;padding:80px 0 120px}
.card{display:flex;flex-direction:column;gap:14px}
.card .ph{aspect-ratio:4/5;border-radius:20px;overflow:hidden;position:relative;background:var(--soft)}
.card .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.75);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.card:hover .ph img{transform:scale(1.05)}
.soon{position:absolute;left:16px;top:16px;background:rgba(244,238,228,.92);border-radius:999px;padding:7px 14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.card .n{font-family:'Playfair Display',serif;font-style:italic;font-size:22px;color:var(--accentText);margin-top:6px}
.card h3{font-family:'Playfair Display',serif;font-optical-sizing:none;font-weight:500;font-size:26px;line-height:1.15;margin:0}
.card p{margin:0;font-size:16px;line-height:1.7}

/* Verhaal */
.ohead{max-width:920px;margin:0 auto;padding:96px 40px 56px;text-align:center}
.ohead .issue{justify-content:center;margin-bottom:36px}
.ohead h1{font-family:'Playfair Display',serif;font-optical-sizing:none;font-weight:400;font-size:clamp(52px,8vw,112px);line-height:.95;margin:0}
.ohead h1 em{font-style:italic;color:var(--accentText)}
.ohead .sub{font-family:'Playfair Display',serif;font-style:italic;font-size:24px;line-height:1.45;margin:32px auto 0;max-width:640px}
.byline{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:40px}
.byline img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.byline div{text-align:left;font-size:15px;line-height:1.5}
.byline b{font-weight:500}
.hero{max-width:1280px;margin:0 auto;padding:0 40px}
.hero figure{margin:0;border-radius:28px;overflow:hidden;aspect-ratio:21/10}
.hero img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
figcaption{font-size:14px;line-height:1.6;color:var(--accentText);margin-top:14px}
.art{max-width:680px;margin:0 auto;padding:88px 40px 40px}
.art p{font-size:18.5px;line-height:1.85;margin:0 0 26px}
.art p.first::first-letter{font-family:'Playfair Display',serif;float:left;font-size:96px;line-height:.8;padding:8px 14px 0 0;color:var(--accentText)}
.art h2{font-family:'Playfair Display',serif;font-optical-sizing:none;font-weight:500;font-size:34px;line-height:1.15;margin:64px 0 22px}
.art h2 em{font-style:italic;color:var(--accentText)}
.pull{margin:72px -120px;padding:56px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);text-align:center}
.pull q{display:block;font-family:'Playfair Display',serif;font-style:italic;font-size:38px;line-height:1.25;quotes:none;max-width:780px;margin:0 auto}
.pull .cap{display:block;margin-top:24px;color:var(--accentText)}
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin:64px -120px}
.duo figure{margin:0}
.duo .ph{border-radius:24px;overflow:hidden;aspect-ratio:4/5}
.duo .ph img{width:100%;height:100%;object-fit:cover}
.duo figure:first-child .ph{border-radius:999px 999px 24px 24px/240px 240px 24px 24px}
.chair{background:var(--paper);border:1px solid var(--rule);border-radius:28px;padding:48px;margin:64px -60px}
.chair .cap{color:var(--accentText)}
.chair ol{list-style:none;margin:28px 0 0;padding:0;counter-reset:s}
.chair li{counter-increment:s;display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:20px;align-items:baseline;padding:20px 0;border-top:1px solid var(--rule)}
.chair li::before{content:"0" counter(s);font-family:'Playfair Display',serif;font-style:italic;font-size:24px;color:var(--accentText)}
.chair h3{font-family:'Playfair Display',serif;font-weight:500;font-size:21px;margin:0 0 6px}
.chair li p{font-size:16.5px;line-height:1.7;margin:0}
.chair .t{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;white-space:nowrap;color:var(--accentText)}
.tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:36px -60px 0}
.tip{background:var(--soft);border-radius:20px;padding:28px}
.tip .k{font-family:'Playfair Display',serif;font-style:italic;font-size:30px;color:var(--accentText);line-height:1}
.tip h3{font-family:'Playfair Display',serif;font-weight:500;font-size:19px;margin:14px 0 8px}
.tip p{font-size:15.5px!important;line-height:1.65!important;margin:0!important}
.end{text-align:center;margin:72px 0 0;font-family:'Playfair Display',serif;color:var(--accent);letter-spacing:.6em;font-size:14px}
.cta{max-width:1280px;margin:96px auto 0;padding:0 40px}
.cta .box{background:var(--dark);color:var(--light);border-radius:32px;padding:80px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:center}
.cta h2{font-family:'Playfair Display',serif;font-weight:400;font-size:52px;line-height:1.05;margin:16px 0 0}
.cta h2 em{font-style:italic;color:var(--accent)}
.cta p{font-size:17px;line-height:1.75;margin:0 0 28px;opacity:.88}
.cta .pill{border-color:var(--accent);color:var(--dark)}
.cta .pill::before{background:var(--light)}
.cta .pill:hover{color:var(--dark)}
.next{padding:96px 0 120px}
.next .head{display:flex;justify-content:space-between;align-items:end;gap:24px;border-bottom:1px solid var(--rule);padding-bottom:24px}
.next .head h2{font-family:'Playfair Display',serif;font-weight:500;font-size:34px;margin:10px 0 0}
.next .grid{padding:48px 0 0}

.foot{background:var(--dark);color:var(--light);padding:56px 40px}
.foot .in{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.foot .wm{color:var(--accent);font-size:20px}
.foot a{opacity:.85}

.rv{opacity:0;transform:translateY(32px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

@media (max-width:1100px){.pull,.duo{margin-left:0;margin-right:0}.chair,.tips{margin-left:0;margin-right:0}}
@media (max-width:900px){
.wrap,.hero,.cta{padding:0 22px}
.top .in{padding:0 12px 0 22px;height:60px}
.tnav{gap:16px}.tnav a.l.hide{display:none}
.pill{min-height:42px;padding:0 18px;font-size:12px}
.mast{padding:64px 0 40px}
.feat{grid-template-columns:minmax(0,1fr);gap:36px;padding:56px 0}
.feat h2{font-size:38px}.feat .no{font-size:64px}
.grid{grid-template-columns:minmax(0,1fr);gap:48px;padding:56px 0 88px}
.ohead{padding:64px 22px 40px}.ohead .sub{font-size:21px}
.hero figure{aspect-ratio:4/3;border-radius:20px}
.art{padding:56px 22px 24px}
.art p{font-size:17.5px;line-height:1.8}
.art p.first::first-letter{font-size:76px}
.art h2{font-size:29px;margin-top:52px}
.pull{margin:52px 0;padding:40px 0}.pull q{font-size:28px}
.duo{grid-template-columns:minmax(0,1fr);margin:48px 0}
.chair{padding:32px 22px;border-radius:22px}
.chair li{grid-template-columns:40px minmax(0,1fr);gap:12px}
.chair .t{grid-column:2}
.tips{grid-template-columns:minmax(0,1fr)}
.cta .box{grid-template-columns:minmax(0,1fr);padding:48px 28px;border-radius:24px;gap:24px}
.cta h2{font-size:38px}
.next{padding:72px 0 88px}.next .head{flex-direction:column;align-items:flex-start}
.foot{padding:44px 22px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
