/* ─────────────────────────────────────────────
   Woonhaven — design system
   Warm, redactioneel woonmagazine. Montserrat (display) + Montserrat (body).
   ───────────────────────────────────────────── */
:root{
  --ink:#222824;
  --muted:#5f665e;
  --bg:#eef0ea;          /* zachte saliegrijs (achtergrond) */
  --card:#fbfcf9;
  --line:#dde2d6;
  --terracotta:#4f7060;  /* accent/subkleur: diep salie-groen */
  --terracotta-dk:#3c5749;
  --sage:#8a9a7b;        /* secundair */
  --espresso:#2c322c;    /* diepe koppen/footer (groen-zwart) */
  --sand:#e3e7dc;        /* rustige panelen */
  --gold:#c9a45c;        /* zeldzaam accent */
  --radius:14px;
  --radius-lg:22px;
  --shadow:0 1px 2px rgba(52,48,43,.04), 0 12px 30px -18px rgba(52,48,43,.28);
  --wrap:1180px;
  --gap:clamp(20px,3vw,34px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,.display{font-family:"Montserrat","Georgia",serif;font-weight:600;line-height:1.12;letter-spacing:-.01em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.em{color:var(--terracotta);font-style:italic}

/* ── Issue strip ── */
.issue{background:var(--espresso);color:#f3ece1;font-size:13.5px;letter-spacing:.02em}
.issue .wrap{display:flex;gap:18px;justify-content:space-between;align-items:center;padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.issue b{color:var(--gold);font-weight:600}
.issue .counts{color:#cbbfae}

/* ── Header ── */
.site-head{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.site-head .wrap{display:flex;align-items:center;gap:22px;padding-top:16px;padding-bottom:16px}
.brand{font-family:"Montserrat",serif;font-weight:600;font-size:26px;letter-spacing:-.02em;color:var(--espresso);white-space:nowrap}
.brand span{color:var(--terracotta)}
.brand small{display:block;font-family:"Montserrat";font-weight:400;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.navwrap{margin-left:auto;position:static}
.nav{display:flex;gap:clamp(10px,1.4vw,20px);flex-wrap:nowrap;font-size:14.5px;font-weight:500;white-space:nowrap}
.nav a{color:var(--ink);opacity:.82;padding:6px 0;border-bottom:2px solid transparent;transition:.15s}
.nav a:hover{opacity:1;border-color:var(--terracotta)}
/* mega menu — per categorie de artikelen eronder */
.has-mega{position:static}
.mtrigger{display:inline-flex;align-items:center;gap:5px}
.mtrigger .caret{font-size:11px;transition:.15s}
.has-mega:hover .mtrigger .caret{transform:rotate(180deg)}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s;z-index:50}
.has-mega:hover .mega,.mega:hover{opacity:1;visibility:visible;transform:none}
.mega-inner{display:grid;grid-template-columns:1fr 200px;gap:30px;padding:24px clamp(18px,4vw,40px)}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mega-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;transition:.14s}
.mega-item:hover{background:var(--sand)}
.mi-icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;background:color-mix(in srgb, var(--c) 15%, #fff);color:var(--c)}
.mi-icon svg{width:22px;height:22px}
.mi-name{font-weight:600;font-size:15px}
.mega-side{border-left:1px solid var(--line);padding-left:26px}
.mega-side h4{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 10px}
.mega-side a{display:block;padding:6px 0;font-size:14.5px;color:var(--ink);opacity:.85}
.mega-side a:hover{opacity:1;color:var(--terracotta-dk)}
/* kamers-overzicht */
.kamers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:24px 0 50px}
.kamer-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;transition:.18s;display:block}
.kamer-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.kamer-card .mc-dot{display:inline-block;width:12px;height:12px;border-radius:50%}
.kamer-card h2{font-size:22px;margin:10px 0 8px}
.kamer-card p{font-size:14px;color:var(--muted);margin:0 0 12px}
.kamer-card .kc-count{font-size:13px;font-weight:600;color:var(--terracotta-dk)}
@media(max-width:760px){.kamers-grid{grid-template-columns:1fr}}
@media(max-width:1000px){.mega-inner{grid-template-columns:1fr}.mega-grid{grid-template-columns:repeat(2,1fr)}.mega-side{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:14px}}

/* ── Hero ── */
.hero{padding:clamp(30px,5vw,60px) 0 10px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--gap);align-items:center}
.ph{background-size:cover;background-position:center;background-repeat:no-repeat}
.hero-media{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:5/4;background:var(--sand);box-shadow:var(--shadow)}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media .ph{width:100%;height:100%}
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--terracotta-dk)}
.hero h1{font-size:clamp(34px,5vw,60px);margin:.28em 0 .3em}
.hero p.lead{font-size:19px;color:var(--muted);margin:0 0 20px;max-width:46ch}
.byline{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.byline .dot{width:4px;height:4px;border-radius:50%;background:var(--line)}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--terracotta);color:#fff;font-weight:600;font-size:15px;padding:11px 20px;border-radius:999px;transition:.15s}
.btn:hover{background:var(--terracotta-dk)}
.btn-ghost{background:transparent;color:var(--terracotta-dk);padding:0;font-weight:600}
.btn-ghost:hover{color:var(--ink)}

/* ── Recent strip ── */
.strip{padding:34px 0 10px}
.strip-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.strip-head h2{font-size:15px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-family:"Montserrat";font-weight:600}
.recent{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.rcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.18s}
.rcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.rcard .ph{aspect-ratio:4/3;background:var(--sand) center/cover}
.rcard .b{padding:12px 13px 15px}
.rcard .cat{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--terracotta-dk)}
.rcard h3{font-size:16px;margin:5px 0 0;line-height:1.22}

/* ── Category sections ── */
.section{padding:clamp(34px,5vw,58px) 0;border-top:1px solid var(--line)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}
.sec-head .eyebrow{margin-bottom:6px}
.sec-head h2{font-size:clamp(26px,3.4vw,38px)}
.sec-head p{color:var(--muted);margin:.4em 0 0;max-width:52ch}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.18s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card .ph{aspect-ratio:3/2;background:var(--sand) center/cover}
.card .b{padding:16px 17px 19px}
.card .cat{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--terracotta-dk)}
.card h3{font-size:19px;margin:6px 0 8px;line-height:1.2}
.card p{font-size:14.5px;color:var(--muted);margin:0}

/* layout: feature (1 groot + 3 klein) */
.l-feature{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}
.l-feature .lead-card .ph{aspect-ratio:16/11}
.l-feature .lead-card h3{font-size:27px}
.l-feature .side{display:grid;gap:14px}
.l-feature .side .card{flex-direction:row}
.l-feature .side .card .ph{width:118px;flex:none;aspect-ratio:1}
.l-feature .side .card .b{padding:12px 14px}
.l-feature .side .card h3{font-size:16px;margin:4px 0 0}
.l-feature .side .card p{display:none}

/* layout: quad (4 gelijk) */
.l-quad{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

/* layout: split (1 groot + lijst rechts) */
.l-split{display:grid;grid-template-columns:1.3fr 1fr;gap:22px}
.l-split .stack{display:grid;gap:0;align-content:start}
.l-split .stack a{display:block;padding:14px 2px;border-bottom:1px solid var(--line)}
.l-split .stack a:first-child{padding-top:0}
.l-split .stack .cat{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--terracotta-dk)}
.l-split .stack h3{font-size:18px;margin:4px 0 0}

/* layout: list (typografisch) */
.l-list{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 40px}
.l-list a{display:flex;gap:16px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--line)}
.l-list a .n{font-family:"Montserrat",serif;font-size:15px;color:var(--terracotta);width:26px;flex:none}
.l-list a h3{font-size:18px;margin:0;font-weight:600}
.l-list a .v{margin-left:auto;font-size:12.5px;color:var(--muted);white-space:nowrap}

/* layout: duo (2 breed) */
.l-duo{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.l-duo .card{flex-direction:row}
.l-duo .card .ph{width:44%;flex:none;aspect-ratio:auto}
.l-duo .card .b{padding:20px 22px}
.l-duo .card h3{font-size:22px}

/* ── Home intro (over de website) ── */
.home-intro{padding:clamp(30px,5vw,56px) 0}
.home-intro .intro-inner{background:var(--sand);border-radius:var(--radius-lg);padding:clamp(28px,4vw,52px);max-width:760px;margin:0 auto;text-align:center}
.home-intro h2{font-size:clamp(26px,3.4vw,40px);margin:.35em 0 .5em}
.home-intro p{color:var(--muted);font-size:17px;margin:0 auto .9em;max-width:60ch}
.home-intro .btn-ghost{margin-top:6px}
.page{max-width:760px;margin:0 auto;padding:clamp(28px,5vw,54px) 0}
.page h1{font-size:clamp(30px,4.4vw,50px);margin:0 0 18px}
.page p{font-size:18px;color:var(--ink);margin:0 0 1.1em}
.page .lead{color:var(--muted)}

/* ── Newsletter ── */
.news{background:var(--espresso);color:#f3ece1;border-radius:var(--radius-lg);padding:clamp(28px,4vw,46px);margin:40px 0;display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.news h2{color:#fff;font-size:clamp(24px,3vw,34px)}
.news p{color:#d6cbbb;margin:.5em 0 0}
.news .accent{color:var(--gold)}
.news form{display:flex;gap:10px;flex-wrap:wrap}
.news input{flex:1;min-width:200px;border:0;border-radius:999px;padding:13px 18px;font-size:15px}
.news .btn{background:var(--gold);color:var(--espresso)}
.news .btn:hover{background:#dcb56d}

/* ── Article page ── */
.article{padding:clamp(24px,5vw,48px) 0}
.article .eyebrow{margin-bottom:10px}
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:14px}
.breadcrumb a{color:var(--terracotta-dk)}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb span{color:var(--muted)}
/* auteur bovenaan (expert) */
.author-top{display:flex;align-items:center;gap:12px;margin:6px 0 24px}
.author-top .at-av{width:46px;height:46px;border-radius:50%;object-fit:cover;background:var(--sand);flex:none}
.author-top .at-meta{display:flex;flex-direction:column;line-height:1.25}
.author-top .at-name{font-weight:600}
.author-top .at-role{font-size:13px;color:var(--muted)}
.author-top .at-date{margin-left:auto;font-size:13px;color:var(--muted)}
/* twee kolommen: artikel + sidebar */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(26px,4vw,48px);align-items:start;margin-top:30px}
.article-main{min-width:0}
.article-main .body,.article-main .faq,.article-main .author-box,.article-main .toc{max-width:760px}
/* inhoudsopgave */
.toc{background:var(--sand);border-radius:var(--radius);padding:18px 20px;margin:0 0 28px}
.toc-h{font-family:"Montserrat",serif;font-weight:600;font-size:18px;margin-bottom:8px}
.toc ol{margin:0;padding-left:1.2em;color:var(--muted)}
.toc li{margin:.28em 0}
.toc a{color:var(--terracotta-dk)}
.toc a:hover{color:var(--ink)}
/* sidebar */
.article-sidebar{position:sticky;top:96px;display:grid;gap:18px}
.side-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.side-card h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-family:"Montserrat";margin:0 0 12px}
.side-card .r{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--terracotta-dk);font-weight:600}
.side-card .side-av{width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--sand);margin-bottom:8px}
.side-card p{font-size:13.5px;color:var(--muted);margin:4px 0 8px}
.pmail{font-size:13px;color:var(--terracotta-dk);font-weight:600}
.side-related{list-style:none;margin:0;padding:0}
.side-related li{margin:0 0 10px}
.side-related a{display:flex;gap:10px;align-items:center}
.side-related .side-thumb{width:52px;height:52px;border-radius:8px;flex:none;background-size:cover;background-position:center}
.side-related span{font-size:14px;line-height:1.25}
.side-cats{list-style:none;margin:0;padding:0}
.side-cats li{margin:0}
.side-cats a{display:block;padding:7px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.side-cats a:last-child{border-bottom:0}
.side-cats a.active{color:var(--terracotta-dk);font-weight:600}
/* persona-card op categoriepagina */
.hub-persona{margin:8px 0 4px}
.persona-card{display:flex;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;max-width:640px}
.persona-card .persona-av{width:66px;height:66px;border-radius:50%;object-fit:cover;background:var(--sand);flex:none}
.persona-card .r{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--terracotta-dk);font-weight:600}
.persona-card p{font-size:14px;color:var(--muted);margin:3px 0 6px}
.team{list-style:none;padding:0;margin:0}
.team li{padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
.team a{color:var(--terracotta-dk)}
@media(max-width:900px){
  .article-layout{grid-template-columns:1fr}
  .article-sidebar{position:static}
}
.article h1{font-size:clamp(30px,4.4vw,50px);line-height:1.1;margin:0 0 16px}
.article .meta{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;margin-bottom:26px}
.article .hero-img{border-radius:var(--radius-lg);overflow:hidden;margin:0 0 30px;box-shadow:var(--shadow);aspect-ratio:3/2;background:var(--sand)}
.article .hero-img .ph{width:100%;height:100%}
.article .body{font-size:18px}
.article .body p{margin:0 0 1.15em}
.article .body h2{font-size:27px;margin:1.6em 0 .5em}
.article .body h3{font-size:21px;margin:1.4em 0 .4em}
.article .body ul,.article .body ol{padding-left:1.2em;margin:0 0 1.2em}
.article .body li{margin:.3em 0}
.article .body img{border-radius:var(--radius);margin:1.4em 0}
.article .faq{border-top:1px solid var(--line);margin-top:36px;padding-top:8px}
.article .faq details{border-bottom:1px solid var(--line);padding:14px 0}
.article .faq summary{font-family:"Montserrat",serif;font-size:19px;cursor:pointer;list-style:none}
.article .faq summary::-webkit-details-marker{display:none}
.article .faq summary::before{content:"+";color:var(--terracotta);font-weight:700;margin-right:10px}
.article .faq details[open] summary::before{content:"–"}
.author-box{display:flex;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-top:34px}
.author-box img{width:58px;height:58px;border-radius:50%;object-fit:cover;background:var(--sand);flex:none}
.author-box .r{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--terracotta-dk);font-weight:600}
.author-box p{margin:3px 0 0;font-size:14px;color:var(--muted)}
.related{border-top:1px solid var(--line);margin-top:40px;padding-top:24px}
.related h2{font-size:15px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-family:"Montserrat";font-weight:600;margin-bottom:14px}

/* ── Archive / hub ── */
.hub-head{padding:clamp(28px,5vw,52px) 0 8px}
.hub-head h1{font-size:clamp(32px,5vw,54px)}
.hub-head p{color:var(--muted);max-width:56ch;font-size:18px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:24px 0 50px}

/* ── Footer ── */
.site-foot{background:var(--espresso);color:#cbbfae;margin-top:20px;padding:52px 0 34px}
.site-foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
.site-foot .brand{color:#fff}
.site-foot h4{color:#f3ece1;font-family:"Montserrat";font-size:13px;text-transform:uppercase;letter-spacing:.1em;margin:0 0 12px}
.site-foot a{display:block;padding:4px 0;color:#cbbfae}
.site-foot a:hover{color:#fff}
.site-foot .bottom{border-top:1px solid #4a443d;margin-top:34px;padding-top:18px;font-size:13px;color:#9a8f80;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ── Responsive ── */
@media(max-width:960px){
  .hero-grid,.news{grid-template-columns:1fr}
  .l-feature,.l-split{grid-template-columns:1fr}
  .l-quad{grid-template-columns:repeat(2,1fr)}
  .recent{grid-template-columns:repeat(2,1fr)}
  .l-duo{grid-template-columns:1fr}
  .l-duo .card{flex-direction:column}
  .l-duo .card .ph{width:100%;aspect-ratio:3/2}
  .grid{grid-template-columns:repeat(2,1fr)}
  .site-foot .cols{grid-template-columns:1fr 1fr}
  .l-list{grid-template-columns:1fr}
  .nav{display:none}
}
@media(max-width:560px){
  .l-quad,.recent,.grid,.site-foot .cols{grid-template-columns:1fr}
  .l-feature .side .card{flex-direction:column}
  .l-feature .side .card .ph{width:100%;aspect-ratio:3/2}
}

/* ── v5: antwoord-eerst, pull-quote, img-hero, auteurpagina, mobiel menu ── */
.answer{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--terracotta);border-radius:10px;padding:15px 18px;margin:0 0 26px;max-width:760px}
.answer .a-h{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--terracotta-dk);font-weight:700;margin-bottom:4px}
.answer p{margin:0;font-size:17px;line-height:1.55}
.pull{font-family:"Montserrat",serif;font-size:24px;line-height:1.32;color:var(--espresso);border-left:3px solid var(--terracotta);margin:30px 0;padding:4px 0 4px 22px;max-width:760px;font-style:italic}
figure.hero-img{margin:0 0 30px;background:none;border:0;aspect-ratio:auto}
.hero-photo{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.author-top .at-link{flex:none;display:block}
a.at-name{font-weight:600;color:var(--ink)}
a.at-name:hover{color:var(--terracotta-dk)}
.author-hero{display:flex;gap:20px;align-items:center;margin:8px 0 6px}
.author-hero .ah-av{width:96px;height:96px;border-radius:50%;object-fit:cover;background:var(--sand);flex:none}
.author-hero h1{margin:0}
.author-hero .ah-role{color:var(--terracotta-dk);font-weight:600;font-size:14px;margin:3px 0 6px}
.author-hero p{color:var(--muted);max-width:54ch;margin:0 0 8px}
.navtoggle{display:none;background:none;border:0;font-size:24px;line-height:1;cursor:pointer;color:var(--ink);padding:4px 6px}
.mobile-nav{display:none;flex-direction:column;background:var(--bg);border-top:1px solid var(--line)}
.mobile-nav a{padding:12px clamp(18px,4vw,40px);border-bottom:1px solid var(--line);font-size:16px}
.site-head.open .mobile-nav{display:flex}
@media(max-width:960px){ .navtoggle{display:block} .navwrap{display:none} }