/* ============================================================
   Damestotaal — damestotaal.css
   Klassiek PHP WordPress thema · warm-editorial
   Inspiratie: The Economist · FT.com · NRC.nl
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,800;9..144,900&family=Inter:wght@400;500;600;700&display=swap');

/* ---------- Tokens ---------- */
:root{
  --accent:#A05C5C;          /* brick-rose terracotta (default = Mode & Stijl) */
  --accent-bright:#C68585;
  --bg:#FBF8F5;              /* warm off-white */
  --ink:#2A2422;            /* near-black warm */
  --panel:#F2EBE5;          /* subtle panel fill */
  --hairline:#E3D9D1;       /* rules & borders */
  --footer-dark:#2A2422;
  --muted:#857B72;          /* secondary text */
  --muted-soft:#A89E94;

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --wrap:1200px;            /* consistent content width — ALL templates */
  --gutter:36px;
  --read:740px;             /* leesregel voor .article__body */
}

/* ---------- Per-categorie accent (herdefinieert --accent lokaal) ---------- */
.cat-mode-stijl         { --accent:#A05C5C; --accent-bright:#C68585; }
.cat-beauty-verzorging  { --accent:#B07A6B; --accent-bright:#C99A8C; }
.cat-gezondheid-welzijn { --accent:#6B7A5E; --accent-bright:#8C9B7E; }
.cat-wonen-lifestyle    { --accent:#9A7B4F; --accent-bright:#BE9E70; }
.cat-geld-werk          { --accent:#4F6B6B; --accent-bright:#739191; }
.cat-relatie-gezin      { --accent:#8C5A6B; --accent-bright:#B07E8E; }

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:800; line-height:1.06; letter-spacing:-0.02em; }
p{ margin:0 0 1.1em; }
hr{ border:0; border-top:1px solid var(--hairline); margin:0; }

/* ---------- Layout helpers ---------- */
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 32px; }
.flow > * + *{ margin-top:1.1em; }
.rule{ border:0; border-top:1px solid var(--hairline); }
.rule--ink{ border-top:1px solid var(--ink); }

/* Kicker / label — categorie-identiteit via accentkleur, GEEN dots */
.kicker{
  font-family:var(--body); font-weight:600; font-size:11px;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--accent);
}
.kicker--rule{ display:inline-flex; align-items:center; gap:10px; }
.kicker--rule::before{ content:""; width:22px; height:2px; background:var(--accent); }

.meta{ font-family:var(--body); font-size:13px; color:var(--muted); letter-spacing:0.01em; }
.byline{ font-weight:500; color:var(--ink); }

/* ============================================================
   Topbar + Masthead + Nav
   ============================================================ */
.topbar{
  border-bottom:1px solid var(--hairline); font-size:12px; color:var(--muted);
}
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; height:40px; }
.topbar__tag{ letter-spacing:0.02em; }
.topbar__right{ display:flex; align-items:center; gap:20px; }
.topbar__right a{ letter-spacing:0.06em; text-transform:uppercase; font-weight:600; font-size:11px; }

/* Compact, ingetogen masthead — woordmerk links, niet dominant */
.masthead{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; padding:18px 0 16px; }
.masthead__flag{ display:inline-block; }
.masthead__word{
  font-family:var(--display); line-height:1; letter-spacing:-0.025em;
  font-size:clamp(26px,3.2vw,34px); color:var(--ink); white-space:nowrap;
}
.masthead__word .lite{ font-weight:400; }
.masthead__word .bold{ font-weight:800; }
.masthead__word .dot{ color:var(--accent); font-weight:800; }
.masthead__kick{ display:none; }

.mainnav{ border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.mainnav__inner{ display:flex; justify-content:flex-start; flex-wrap:wrap; }
.mainnav a{
  font-family:var(--body); font-weight:600; font-size:13px; letter-spacing:0.04em;
  padding:14px 22px 14px 0; margin-right:8px; color:var(--ink); position:relative; display:block;
}
.mainnav a:hover{ color:var(--accent); }
.mainnav a[aria-current]{ color:var(--accent); }
.mainnav a[aria-current]::after{
  content:""; position:absolute; left:0; right:22px; bottom:-1px; height:2px; background:var(--accent);
}

/* ============================================================
   Section headers (sectiebalk)
   ============================================================ */
.section{ padding:46px 0; }
.section + .section{ border-top:1px solid var(--hairline); }
.sectionhead{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:26px; }
.sectionhead__title{
  font-family:var(--display); font-weight:800; font-size:24px; letter-spacing:-0.015em;
  padding-top:12px; border-top:3px solid var(--accent); display:inline-block; white-space:nowrap;
}
.sectionhead__more{ font-family:var(--body); font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); }

/* ============================================================
   Article cards
   ============================================================ */
.card{ display:flex; }
.card > a{ display:flex; flex-direction:column; width:100%; height:100%; }
.card__media{ overflow:hidden; background:var(--panel); margin-bottom:14px; aspect-ratio:3/2; }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.card:hover .card__media img{ transform:scale(1.035); }
.card__kicker{ margin-bottom:9px; }
.card__title{ font-family:var(--display); font-weight:800; letter-spacing:-0.018em; line-height:1.1; color:var(--ink); }
.card:hover .card__title{ color:var(--accent); }
.card__dek{ color:var(--muted); margin:9px 0 0; font-size:15px; line-height:1.55; }
.card__meta{ margin-top:11px; }

.card--lead .card__title{ font-size:clamp(30px,4.4vw,52px); }
.card--lead .card__dek{ font-family:var(--display); font-style:italic; font-weight:400; font-size:22px; line-height:1.4; color:var(--ink); max-width:42ch; }
.card__title--lg{ font-size:27px; }
.card__title--md{ font-size:20px; }
.card__title--sm{ font-size:17px; }

/* Horizontal card (rail / lists) — image left of text, hairline separated */
.hcard{ display:grid; grid-template-columns:104px 1fr; gap:16px; align-items:start; padding:18px 0; border-top:1px solid var(--hairline); }
.hcard:first-child{ border-top:0; padding-top:0; }
.hcard__media{ aspect-ratio:1/1; background:var(--panel); overflow:hidden; }
.hcard__media img{ width:100%; height:100%; object-fit:cover; }
.hcard__title{ font-family:var(--display); font-weight:800; font-size:17px; line-height:1.15; letter-spacing:-0.01em; }
.hcard:hover .hcard__title{ color:var(--accent); }

/* ============================================================
   Magazine grids (asymmetrisch)
   ============================================================ */
/* COVER (default): grote lead links + verticale rail rechts */
.cover{ display:grid; grid-template-columns:minmax(0,1.9fr) minmax(280px,1fr); gap:var(--gutter); }
.cover__rail{ border-left:1px solid var(--hairline); padding-left:var(--gutter); }
.cover__sub{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter); margin-top:36px; padding-top:32px; border-top:1px solid var(--hairline); }

/* FEATURE + RAIL: lead + 2 stacked beside */
.featurerail{ display:grid; grid-template-columns:minmax(0,2fr) minmax(260px,1fr); gap:var(--gutter); }
.featurerail__col{ display:flex; flex-direction:column; }

/* BROADSHEET: 4 even columns met hairline-scheiding, krantenkop-gevoel */
.broadsheet{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px 0; }
.broadsheet > *{ padding:0 24px; border-left:1px solid var(--hairline); }
.broadsheet > *:first-child{ padding-left:0; border-left:0; }
.broadsheet > *:last-child{ padding-right:0; }

/* generic 3-col / 4-col story grids */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter); }
.grid-3,.cover__sub,.reviewrow{ align-items:stretch; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; align-items:stretch; }

/* Variant switcher (alleen design-reference) */
.variant-bar{ background:var(--panel); border-bottom:1px solid var(--hairline); }
.variant-bar__inner{ display:flex; align-items:center; gap:8px; padding:10px 0; font-size:12px; }
.variant-bar__label{ color:var(--muted); font-weight:600; letter-spacing:0.1em; text-transform:uppercase; margin-right:6px; }
.variant-bar button{
  font-family:var(--body); font-size:12px; font-weight:600; padding:6px 14px; cursor:pointer;
  background:transparent; border:1px solid var(--hairline); border-radius:2px; color:var(--ink);
}
.variant-bar button[aria-pressed="true"]{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
[data-layout]{ display:none; }

/* ============================================================
   Blogblok (tekst-items zonder thumbnail)
   ============================================================ */
.blogblock{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--gutter); }
.blogitem{ padding:20px 0; border-top:1px solid var(--hairline); display:flex; gap:18px; align-items:baseline; }
.blogitem__num{ font-family:var(--display); font-weight:600; font-size:28px; line-height:.9; color:var(--accent); min-width:42px; letter-spacing:-0.02em; }
.blogitem__body{ flex:1; }
.blogitem__title{ font-family:var(--display); font-weight:800; font-size:19px; line-height:1.18; letter-spacing:-0.01em; }
.blogitem:hover .blogitem__title{ color:var(--accent); }
.blogitem__meta{ margin-top:6px; }

/* ============================================================
   Stats band (bereik / community)
   ============================================================ */
.stats{ background:var(--panel); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.stats__inner{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gutter); padding:40px 0; }
.stat{ text-align:left; border-left:2px solid var(--accent); padding-left:16px; }
.stat__num{ font-family:var(--display); font-weight:800; font-size:clamp(24px,2.8vw,34px); line-height:1.02; letter-spacing:-0.02em; }
.stat__lab{ font-family:var(--body); font-size:13px; color:var(--muted); margin-top:8px; }

/* ============================================================
   Single article
   ============================================================ */
.article{ padding:48px 0 8px; }
.breadcrumbs{ font-size:12px; color:var(--muted); letter-spacing:0.04em; margin-bottom:26px; }
.breadcrumbs a:hover{ color:var(--accent); }
.breadcrumbs span{ color:var(--muted-soft); padding:0 8px; }

/* split-header: featured image NAAST titel/auteur */
.article__header{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--gutter); align-items:center; margin-bottom:40px; }
.article__head-text{ }
.article__title{ font-family:var(--display); font-weight:800; font-size:clamp(32px,4vw,50px); line-height:1.04; letter-spacing:-0.022em; margin:14px 0 0; }
.article__dek{ font-family:var(--display); font-style:italic; font-weight:400; font-size:23px; color:var(--ink); line-height:1.4; margin-top:20px; max-width:40ch; }
.article__byline{ display:flex; align-items:center; gap:12px; margin-top:26px; padding-top:20px; border-top:1px solid var(--hairline); }
.avatar{ width:40px; height:40px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:600; font-size:15px; flex:none; }
.article__media{ aspect-ratio:4/3; background:var(--panel); overflow:hidden; }
.article__media img{ width:100%; height:100%; object-fit:cover; }
.article__media figcaption{ font-size:12px; color:var(--muted); margin-top:8px; }

/* leesregel — zelfde breedte als header/footer (volle wrap), niet versmald/gecentreerd */
.article__body{ max-width:none; margin:0; font-size:18px; line-height:1.72; }
.article__body h2{ font-family:var(--display); font-weight:800; font-size:27px; letter-spacing:-0.015em; margin:1.7em 0 .5em; }
.article__body h3{ font-family:var(--display); font-weight:600; font-size:21px; margin:1.4em 0 .4em; }
.article__body p{ margin:0 0 1.25em; }
.article__body a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.article__body blockquote{
  margin:1.6em 0; padding:6px 0 6px 24px; border-left:2px solid var(--accent);
  font-family:var(--display); font-weight:500; font-size:23px; line-height:1.35; color:var(--ink);
}
.article__body ul,.article__body ol{ margin:0 0 1.25em; padding-left:1.3em; }
.article__body li{ margin:0 0 .4em; }
.article__body figure{ margin:1.8em 0; }
.article__body img{ width:100%; }

/* callout "In het kort" — licht, border-left accent, accent-uppercase kop */
.callout{
  background:color-mix(in srgb, var(--accent) 8%, var(--bg));
  border-left:3px solid var(--accent);
  padding:22px 26px; margin:1.8em 0; border-radius:0 2px 2px 0;
}
.callout__head{ font-family:var(--body); font-weight:700; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.callout ul{ margin:0; padding-left:1.2em; }
.callout li{ margin:0 0 .5em; font-size:16px; line-height:1.55; }
.callout li:last-child{ margin-bottom:0; }

/* deelknoppen */
.share{ max-width:none; margin:36px 0 0; padding-top:24px; border-top:1px solid var(--hairline); display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.share__label{ font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-right:4px; }
.share a{
  display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600;
  border:1px solid var(--hairline); border-radius:2px; padding:8px 14px; color:var(--ink);
  white-space:nowrap;
}
.share a:hover{ border-color:var(--accent); color:var(--accent); }

/* Lees ook — volle breedte */
.leesook{ margin-top:56px; padding-top:36px; border-top:1px solid var(--ink); }

/* ============================================================
   Categorie / archief header
   ============================================================ */
.archive-hero{ padding:48px 0 40px; border-bottom:1px solid var(--ink); }
.archive-hero__kick{ margin-bottom:14px; }
.archive-hero__title{ font-family:var(--display); font-weight:800; font-size:clamp(40px,6vw,64px); letter-spacing:-0.025em; }
.archive-hero__dek{ font-size:19px; color:var(--muted); max-width:54ch; margin-top:18px; }
.archive-hero__title::after{ content:"."; color:var(--accent); }

/* Pagination */
.pagination{ display:flex; justify-content:center; gap:6px; padding:46px 0; }
.pagination a,.pagination span{ min-width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; border:1px solid var(--hairline); border-radius:2px; }
.pagination a:hover{ border-color:var(--accent); color:var(--accent); }
.pagination .current{ background:var(--ink); color:var(--bg); border-color:var(--ink); }

/* ============================================================
   Static page (pagina)
   ============================================================ */
.page-hero{ padding:54px 0 0; }
.page-hero__title{ font-family:var(--display); font-weight:800; font-size:clamp(36px,5vw,58px); letter-spacing:-0.025em; }
.page-body{ max-width:none; margin:34px 0 0; font-size:18px; line-height:1.72; padding-bottom:20px; }
.page-body h2{ font-family:var(--display); font-size:26px; margin:1.6em 0 .5em; }
.page-body a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }

/* ============================================================
   Search
   ============================================================ */
.searchform{ display:flex; gap:0; max-width:560px; margin-top:24px; border:1px solid var(--ink); border-radius:2px; overflow:hidden; }
.searchform input{ flex:1; border:0; padding:14px 16px; font-family:var(--body); font-size:16px; background:#fff; color:var(--ink); }
.searchform input:focus{ outline:none; }
.searchform button{ border:0; background:var(--ink); color:var(--bg); font-family:var(--body); font-weight:600; padding:0 22px; cursor:pointer; letter-spacing:0.04em; }
.searchform button:hover{ background:var(--accent); }
.searchmeta{ color:var(--muted); margin-top:20px; font-size:15px; }
.resultlist{ margin-top:8px; }
.result{ padding:24px 0; border-top:1px solid var(--hairline); }
.result__title{ font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:-0.012em; }
.result:hover .result__title{ color:var(--accent); }
.result__url{ font-size:12px; color:var(--accent); margin-top:6px; letter-spacing:0.02em; }
.result__excerpt{ color:var(--muted); margin-top:8px; font-size:15px; }

/* ============================================================
   404
   ============================================================ */
.error404{ padding:90px 0; text-align:center; }
.error404__code{ font-family:var(--display); font-weight:900; font-size:clamp(90px,18vw,200px); line-height:.9; letter-spacing:-0.04em; }
.error404__code .dot{ color:var(--accent); }
.error404__title{ font-family:var(--display); font-weight:800; font-size:30px; margin-top:10px; }
.error404__dek{ color:var(--muted); margin:16px auto 0; max-width:46ch; }
.error404__actions{ margin-top:30px; display:flex; gap:12px; justify-content:center; }

/* ============================================================
   Buttons
   ============================================================ */
.btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--body); font-weight:600; font-size:14px; padding:12px 22px; border-radius:2px; cursor:pointer; border:1px solid var(--ink); }
.btn--solid{ background:var(--ink); color:var(--bg); }
.btn--solid:hover{ background:var(--accent); border-color:var(--accent); }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ background:var(--footer-dark); color:#D8CFC6; margin-top:64px; }
.site-footer a{ color:#D8CFC6; }
.site-footer a:hover{ color:#fff; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--gutter); padding:56px 32px 44px; }
.footer-brand__word{ font-family:var(--display); font-weight:800; font-size:34px; line-height:1; letter-spacing:-0.025em; color:#FBF8F5; }
.footer-brand__word .lite{ font-weight:400; }
.footer-brand__word .dot{ color:var(--accent-bright); }
.footer-brand__tag{ font-size:14px; color:#A99F95; margin-top:16px; max-width:30ch; }
.footer-brand__meta{ font-size:14px; color:#D8CFC6; margin-top:16px; line-height:1.7; }
.footer-col h4{ font-family:var(--body); font-weight:700; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:#8C8278; margin-bottom:16px; }
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ margin:0 0 11px; font-size:14px; }
.footer-bottom{ border-top:1px solid #463E39; padding:22px 0; display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#8C8278; }
.footer-bottom__links{ display:flex; gap:20px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1000px){
  .footer-top{ grid-template-columns:1fr 1fr; }
  .broadsheet{ grid-template-columns:repeat(2,1fr); }
  .broadsheet > *{ padding:0 0 0 24px; }
  .broadsheet > *:nth-child(odd){ border-left:0; padding-left:0; }
}
@media (max-width:860px){
  .cover{ grid-template-columns:1fr; }
  .cover__rail{ border-left:0; padding-left:0; border-top:1px solid var(--hairline); padding-top:28px; margin-top:28px; }
  .featurerail{ grid-template-columns:1fr; }
  .article__header{ grid-template-columns:1fr; }
  .article__media{ order:-1; }
  .stats__inner{ grid-template-columns:repeat(2,1fr); gap:28px 24px; }
  .cover__sub,.grid-3{ grid-template-columns:1fr 1fr; }
  .blogblock{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .wrap{ padding:0 20px; }
  .cover__sub,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .mainnav__inner{ justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; }
  .mainnav a{ white-space:nowrap; padding:13px 14px; }
  .dossier__grid{ grid-template-columns:1fr; }
  .stats__inner{ grid-template-columns:1fr 1fr; }
  .share__label{ width:100%; margin-bottom:0; }

  /* Spacing: reduceer grote paddings op mobiel */
  .section{ padding:28px 0; }
  .article{ padding-top:28px; }
  .archive-hero{ padding:28px 0 24px; }
  .site-footer{ margin-top:32px; }

  /* Footer: .wrap override verwijdert de 56px vertical padding van .footer-top — herstel dit */
  .footer-top{ grid-template-columns:1fr; gap:0; padding-top:52px; padding-bottom:44px; }
  .footer-brand{ padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,0.14); }
  .footer-col{ padding-top:24px; padding-bottom:8px; border-top:1px solid rgba(255,255,255,0.14); }
  .footer-col h4{ margin-bottom:14px; }
  .footer-col li{ margin-bottom:10px; }
  /* Footer-bottom: stack op mobiel, ruimte voor CookieYes-icoon rechtsonder */
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:10px; padding-top:28px; padding-bottom:80px; }
  .footer-bottom__links{ flex-wrap:wrap; gap:8px 14px; }
}

/* ============================================================
   MAGAZINE-BLOKKEN (gevarieerd ritme — eigen aan Damestotaal)
   ============================================================ */

/* --- Over ons / manifest-band --- */
.manifesto{ background:var(--ink); color:#F2E9E2; }
.manifesto__inner{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:56px; padding:60px 0; align-items:center; }
.manifesto__label{ font-family:var(--body); font-weight:600; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent-bright); display:inline-flex; align-items:center; gap:10px; margin-bottom:20px; }
.manifesto__label::before{ content:""; width:22px; height:2px; background:var(--accent-bright); }
.manifesto__statement{ font-family:var(--display); font-weight:800; font-size:clamp(26px,3.2vw,40px); line-height:1.12; letter-spacing:-0.02em; color:#FBF8F5; }
.manifesto__statement .em{ font-style:italic; font-weight:500; }
.manifesto__statement .dot{ color:var(--accent-bright); }
.manifesto__text{ color:#C3B7AD; font-size:16px; line-height:1.7; }
.manifesto__text p{ margin:0 0 1.1em; }
.manifesto__cta{ display:inline-flex; align-items:center; gap:8px; font-family:var(--body); font-weight:600; font-size:14px; color:#FBF8F5; border-bottom:2px solid var(--accent-bright); padding-bottom:3px; }
.manifesto__cta:hover{ color:var(--accent-bright); }

/* --- Dossier (themacollectie in delen) --- */
.dossier__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:30px; }
.dossier__tag{ font-family:var(--body); font-weight:700; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); border:1px solid var(--accent); border-radius:2px; padding:5px 10px; }
.dossier__title{ font-family:var(--display); font-weight:800; font-size:clamp(28px,4vw,42px); letter-spacing:-0.02em; line-height:1.04; margin-top:14px; }
.dossier__title .em{ font-style:italic; font-weight:500; }
.dossier__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.deel{ padding:24px 22px 26px; border-left:1px solid var(--hairline); }
.deel:first-child{ padding-left:0; border-left:0; }
.deel:last-child{ padding-right:0; }
.deel__no{ font-family:var(--display); font-weight:600; font-size:14px; color:var(--accent); letter-spacing:0.04em; }
.deel__no::before{ content:"Deel "; color:var(--muted-soft); font-weight:400; }
.deel__title{ font-family:var(--display); font-weight:800; font-size:19px; line-height:1.16; letter-spacing:-0.012em; margin-top:12px; }
.deel:hover .deel__title{ color:var(--accent); }
.deel__dek{ color:var(--muted); font-size:14px; line-height:1.5; margin-top:9px; }

/* --- Getest: reviewstrip met verdict --- */
.reviewrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter); }
.reviewcard{ display:flex; flex-direction:column; border-top:2px solid var(--ink); padding-top:18px; }
.reviewcard__media{ aspect-ratio:3/2; background:var(--panel); overflow:hidden; margin:0 0 16px; order:-1; }
.reviewcard__media img{ width:100%; height:100%; object-fit:cover; }
.reviewcard__verdict{ display:inline-flex; align-self:flex-start; align-items:center; gap:8px; font-family:var(--body); font-weight:700; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.reviewcard__verdict::before{ content:"\2713"; font-size:13px; }
.reviewcard__title{ font-family:var(--display); font-weight:800; font-size:20px; line-height:1.14; letter-spacing:-0.012em; }
.reviewcard:hover .reviewcard__title{ color:var(--accent); }
.reviewcard__line{ font-size:14px; color:var(--muted); line-height:1.55; margin-top:9px; }

/* --- Pull-quote (redactioneel breekpunt) --- */
.pullquote{ border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.pullquote__inner{ max-width:900px; margin:0 auto; padding:64px 32px; text-align:center; }
.pullquote q{ font-family:var(--display); font-style:italic; font-weight:500; font-size:clamp(26px,3.8vw,42px); line-height:1.24; letter-spacing:-0.015em; quotes:"\201C""\201D"; }
.pullquote q::before{ content:open-quote; color:var(--accent); }
.pullquote q::after{ content:close-quote; color:var(--accent); }
.pullquote__cite{ display:block; margin-top:24px; font-family:var(--body); font-style:normal; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.pullquote__cite a{ color:var(--accent); }

/* --- Columnist / opinie --- */
.columnist__inner{ display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:48px; align-items:center; }
.columnist__portrait{ aspect-ratio:4/5; background:var(--panel); overflow:hidden; }
.columnist__portrait img{ width:100%; height:100%; object-fit:cover; }
.columnist__title{ font-family:var(--display); font-weight:800; font-size:clamp(24px,3vw,34px); line-height:1.1; letter-spacing:-0.02em; margin:14px 0 0; }
.columnist:hover .columnist__title{ color:var(--accent); }
.columnist__excerpt{ font-family:var(--display); font-style:italic; font-weight:400; font-size:19px; line-height:1.5; color:var(--ink); margin-top:18px; max-width:46ch; }
.columnist__by{ display:flex; align-items:center; gap:12px; margin-top:22px; }

@media (max-width:860px){
  .manifesto__inner{ grid-template-columns:1fr; gap:28px; }
  .dossier__grid{ grid-template-columns:1fr 1fr; }
  .deel{ border-left:0; padding:20px 0; border-top:1px solid var(--hairline); }
  .deel:nth-child(-n+2){ border-top:0; }
  .reviewrow{ grid-template-columns:1fr; gap:28px; }
  .columnist__inner{ grid-template-columns:1fr; gap:24px; }
  .columnist__portrait{ max-width:280px; }
}

/* ============================================================
   HAMBURGER MENU (mobiel)
   ============================================================ */
.masthead__hamburger{
  display:none; background:none; border:none; cursor:pointer;
  width:40px; height:40px; flex-direction:column; justify-content:center;
  align-items:center; gap:6px; padding:4px; flex-shrink:0;
}
.masthead__hamburger span{
  display:block; width:24px; height:2px; background:var(--ink);
  transition:transform .25s ease, opacity .25s ease;
}

@media (max-width:760px){
  .masthead{ align-items:center; }
  .masthead__hamburger{ display:flex; }

  /* Sluit de mainnav standaard op mobiel */
  .mainnav{
    overflow:hidden; max-height:0; transition:max-height .3s ease;
    border-top:none; border-bottom:none;
  }
  /* Open staat via body-class */
  body.dt-nav-open .mainnav{
    max-height:400px;
    border-top:1px solid var(--ink);
    border-bottom:1px solid var(--ink);
  }
  .mainnav__inner{ flex-direction:column; flex-wrap:nowrap; }
  .mainnav a{
    padding:13px 0; margin-right:0; width:100%;
    border-bottom:1px solid var(--hairline);
    white-space:nowrap;
  }
  .mainnav a:last-child{ border-bottom:none; }

  /* Hamburger animatie: X */
  body.dt-nav-open .masthead__hamburger span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  body.dt-nav-open .masthead__hamburger span:nth-child(2){ opacity:0; }
  body.dt-nav-open .masthead__hamburger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
}

/* CookieYes revisit-knop: verplaats naar rechts (links overlapt artikeltext op mobiel) */
.cky-btn-revisit-wrapper{ left:auto !important; right:15px !important; }