/* Wat wil jij met wiet -- vijf berichten, vijf rubrieken (een per bericht), zeven beelden
   waarvan twee groot. Nog kleiner dan Voa Heerenveen en met een even losse verzameling
   onderwerpen. Een raster met vijf kaarten zou drie lege plekken of een halve rij tonen; een
   leeslijst met een groot beeld per bericht past wel. Het palet is koel: grijsblauw (#a2c6db,
   #6ba5c6) uit de foto's, met een donkere bruintint (#635135) als tekstaccent. Strak en
   schreefloos, in tegenstelling tot het warme schreefblad van Voa Heerenveen: twee sites die
   op elkaar lijken in omvang horen niet op elkaar te lijken in gezicht. */
:root{
  --grond:#f2f5f8; --grond-2:#e6ecf1; --vlak:#ffffff;
  --ink:#1b2128; --ink-2:#4b5662; --ink-3:#7d8893;
  --lijn:#d7dfe6; --lijn-2:#b9c5cf;
  --blauw:#3f7ea3; --blauw-2:#2f6684; --blauw-zacht:#e0edf5;
  --bruin:#635135;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --maxw:880px; --meet:64ch;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --grond:#10151a; --grond-2:#171e25; --vlak:#1a2129;
    --ink:#e9eef3; --ink-2:#adb8c3; --ink-3:#7b8692;
    --lijn:#27313a; --lijn-2:#37434f;
    --blauw:#7ab8db; --blauw-2:#96c9e6; --blauw-zacht:#14303f;
    --bruin:#c9b08a;
  }
}
:root[data-theme="dark"]{
  --grond:#10151a; --grond-2:#171e25; --vlak:#1a2129;
  --ink:#e9eef3; --ink-2:#adb8c3; --ink-3:#7b8692;
  --lijn:#27313a; --lijn-2:#37434f;
  --blauw:#7ab8db; --blauw-2:#96c9e6; --blauw-zacht:#14303f;
  --bruin:#c9b08a;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grond);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.68}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--blauw);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ph{background:var(--grond-2);position:relative;overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover}

.top{background:var(--vlak);border-bottom:1px solid var(--lijn)}
.top__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding-block:18px}
.merk__naam{font-size:21px;font-weight:800;letter-spacing:-.03em;line-height:1}
.merk__tag{display:block;font-size:12px;font-weight:400;color:var(--ink-3);letter-spacing:.06em;margin-top:4px}
.nav__list{display:flex;gap:18px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.nav__list::-webkit-scrollbar{display:none}
.nav__list a{display:block;padding:6px 0;font-size:14px;font-weight:600;color:var(--ink-2);white-space:nowrap;border-bottom:2px solid transparent}
.nav__list a:hover{color:var(--blauw)}
.nav__list a[aria-current="page"]{color:var(--blauw);border-bottom-color:var(--blauw)}

/* opening: beeld links, tekst rechts, in een vlak */
.opening{padding-block:36px 0}
.opening__vlak{background:var(--vlak);border:1px solid var(--lijn);display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:hidden}
.opening__beeld{aspect-ratio:4/3;min-height:240px}
.opening__tekst{padding:32px 30px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.opening__label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--blauw);margin:0;font-weight:700}
.opening h1{font-size:clamp(24px,3.6vw,34px);line-height:1.12;letter-spacing:-.03em;margin:0;font-weight:800;text-wrap:balance}
.opening p{margin:0;color:var(--ink-2);font-size:16.5px}
.rubrieken{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:6px 0 0;padding:0}
.rubrieken a{display:inline-block;padding:5px 11px;border-radius:3px;background:var(--blauw-zacht);color:var(--blauw-2);font-size:13px;font-weight:600}
.rubrieken a:hover{background:var(--blauw);color:#fff}

.sec{padding-block:38px}
.sec--lijn{border-top:1px solid var(--lijn)}
.sec__kop{margin-bottom:18px}
.sec__kop h1,.sec__kop h2{margin:0;font-size:clamp(20px,2.5vw,25px);font-weight:800;letter-spacing:-.025em}
.sec__intro{color:var(--ink-2);margin:-6px 0 22px;max-width:60ch}

/* leeslijst met groot beeld per bericht */
.raster{display:grid;gap:18px}
.kaart{background:var(--vlak);border:1px solid var(--lijn);display:grid;grid-template-columns:1fr 1.4fr;gap:0;overflow:hidden}
.kaart:hover{border-color:var(--blauw)}
.kaart:hover .kaart__titel{color:var(--blauw)}
.kaart__img{aspect-ratio:4/3;min-height:180px}
.kaart__body{padding:22px 24px;display:flex;flex-direction:column;gap:7px;justify-content:center;min-width:0}
.kaart__meta{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bruin);margin:0}
.kaart__titel{font-size:21px;line-height:1.25;font-weight:800;letter-spacing:-.02em}
.kaart__sam{margin:0;font-size:15px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kaart__datum{font-size:12.5px;color:var(--ink-3);margin:0}

.lijst{list-style:none;margin:0;padding:0}
.lijst__rij{display:flex;gap:14px;align-items:baseline;padding-block:10px;border-bottom:1px solid var(--lijn)}
.lijst__rij:hover .lijst__titel{color:var(--blauw)}
.lijst__duim{display:none}
.lijst__titel{font-size:16.5px;font-weight:600;line-height:1.3}
.lijst__datum{margin-left:auto;font-size:12.5px;color:var(--ink-3);white-space:nowrap}

.btn{display:inline-flex;align-items:center;gap:8px;border:0;padding:11px 20px;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;background:var(--blauw);color:#fff;border-radius:3px}
.btn:hover{background:var(--blauw-2)}

.stuk{max-width:var(--meet);margin:0 auto}
.stuk__titel{font-size:clamp(27px,4.4vw,40px);line-height:1.12;letter-spacing:-.03em;margin:0 0 10px;font-weight:800;text-wrap:balance}
.stuk__datum{color:var(--ink-3);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 24px}
.stuk__beeld{margin:0 0 26px}
.stuk__body{font-size:17.5px;line-height:1.82}
.stuk__body h2{font-size:24px;margin:32px 0 9px;font-weight:800;letter-spacing:-.02em}
.stuk__body h3{font-size:20px;margin:26px 0 7px;font-weight:700}
.stuk__body p{margin:0 0 19px}
.stuk__body ul,.stuk__body ol{margin:0 0 19px;padding-left:23px}
.stuk__body li{margin-bottom:7px}
.stuk__body a{color:var(--blauw);text-decoration:underline;text-underline-offset:2px}
.stuk__body figure{margin:0 0 22px}
.stuk__body figcaption{font-size:13px;color:var(--ink-3);margin-top:6px}

.voet{background:var(--vlak);border-top:1px solid var(--lijn);padding-block:30px 20px;margin-top:44px}
.voet__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:26px;align-items:start}
.voet h3{margin:0 0 10px;font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3)}
.voet ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14.5px}
.voet a:hover{color:var(--blauw)}
.voet__over{font-size:14.5px;color:var(--ink-2);max-width:38ch;margin:8px 0 0}
.voet__slot{margin-top:22px;padding-top:13px;border-top:1px solid var(--lijn);font-size:13px;color:var(--ink-3)}

@media(max-width:760px){.opening__vlak{grid-template-columns:1fr}.kaart{grid-template-columns:1fr}.voet__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.voet__grid{grid-template-columns:1fr}.opening__tekst{padding:24px 20px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.paginering{display:flex;gap:18px;align-items:baseline;justify-content:center;padding:26px 20px;font-size:14px}.paginering a{text-decoration:underline;text-underline-offset:3px}.paginering__stand{opacity:.6;font-variant-numeric:tabular-nums}