/* =========================================================
   Yep Casino — RAFFIA design-system. Prefix: mkq-
   Logical-properties-first, tonale oppervlakken, matte vlakken.
   ========================================================= */

:root{
  /* Oppervlakken — warme neutrale ladder */
  --mkq-bg:#f5efe4;
  --mkq-surface:#efe7d7;
  --mkq-surface-2:#e7dcc7;
  --mkq-hairline:color-mix(in srgb, var(--mkq-ink) 12%, transparent);

  /* Inkt */
  --mkq-ink:#241712;
  --mkq-ink-2:#4d3d33;
  --mkq-ink-3:#6b5848;

  /* Merk-accenten */
  --mkq-accent:#fffb05;
  --mkq-accent-deep:#9a7a00;     /* AA-leesbaar accent op lichte achtergrond */
  --mkq-cta:#ffa705;
  --mkq-dark:#3d0009;
  --mkq-dark-ink:#fff7ec;

  /* Type-schaal — ratio 1.25 */
  --mkq-step--1:.8rem;
  --mkq-step-0:1rem;
  --mkq-step-1:1.25rem;
  --mkq-step-2:1.563rem;
  --mkq-step-3:1.953rem;
  --mkq-step-4:2.441rem;
  --mkq-step-5:3.052rem;

  /* Ruimte-tokens (richting-neutraal, compact) */
  --mkq-space-1:.35rem;
  --mkq-space-2:.6rem;
  --mkq-space-3:1rem;
  --mkq-space-4:1.5rem;
  --mkq-space-5:2.25rem;
  --mkq-space-6:3.25rem;

  --mkq-wrap:1251px;
  --mkq-r-sm:8px;
  --mkq-r-md:6px;

  --mkq-display:'Bricolage Grotesque',system-ui,-apple-system,Segoe UI,sans-serif;
  --mkq-text:Mulish,system-ui,-apple-system,Segoe UI,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--mkq-bg);color:var(--mkq-ink);
  font-family:var(--mkq-text);font-size:17px;line-height:1.6;
  font-variant-numeric:lining-nums tabular-nums;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--mkq-accent-deep);text-underline-offset:2px}
a:hover{color:var(--mkq-ink)}

::selection{background:color-mix(in srgb, var(--mkq-accent) 55%, transparent);color:var(--mkq-ink)}
:focus-visible{outline:2px solid var(--mkq-accent-deep);outline-offset:2px}
::-moz-selection{background:color-mix(in srgb, var(--mkq-accent) 55%, transparent)}

h1,h2,h3,h4{font-family:var(--mkq-display);line-height:1.12;margin:0 0 var(--mkq-space-3);text-wrap:balance;color:var(--mkq-ink)}
p{margin:0 0 var(--mkq-space-3);text-wrap:pretty}

/* ---------- Layout-container ---------- */
.mkq-wrap{width:100%;max-width:var(--mkq-wrap);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}

/* ---------- Header ---------- */
.mkq-top{background:var(--mkq-dark);color:var(--mkq-dark-ink);position:sticky;top:0;z-index:50;border-block-end:3px solid var(--mkq-accent)}
.mkq-top-in{display:flex;align-items:center;gap:18px;min-height:64px}
.mkq-logo{line-height:0;display:inline-block;margin-inline-end:auto}
.mkq-logo img{height:clamp(30px,4vw,42px);width:auto}
.mkq-nav{display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(10px,1.4vw,20px);list-style:none;margin:0;padding:0;min-width:0}
.mkq-nav a{color:var(--mkq-dark-ink);text-decoration:none;font-family:var(--mkq-display);font-weight:700;font-size:15px;white-space:nowrap;letter-spacing:.01em}
.mkq-nav a:hover{color:var(--mkq-accent)}
.mkq-nav a[aria-current=page]{color:var(--mkq-accent);box-shadow:inset 0 -2px 0 0 var(--mkq-accent)}
.mkq-top .mkq-cta{white-space:nowrap}
.mkq-burger{display:none;border:0;background:transparent;cursor:pointer;padding:10px;margin-inline-start:auto;min-width:48px;min-height:48px}
.mkq-burger span{display:block;width:24px;height:2px;background:var(--mkq-dark-ink);margin:5px 0}

/* Mobiel bottom-sheet drawer */
.mkq-drawer{position:fixed;inset-block-end:0;inset-inline:0;z-index:60;display:none;background:color-mix(in srgb, #000 45%, transparent)}
.mkq-drawer.is-open{display:block}
.mkq-drawer-card{position:absolute;inset-block-end:0;inset-inline:0;background:var(--mkq-bg);border-block-start:3px solid var(--mkq-accent);padding:18px clamp(16px,5vw,24px) 28px;max-height:82vh;overflow:auto}
.mkq-drawer-grip{display:block;width:46px;height:5px;border-radius:999px;background:var(--mkq-surface-2);margin:0 auto 16px}
.mkq-drawer-nav{display:flex;flex-direction:column;gap:2px;margin-block-end:16px}
.mkq-drawer-nav a{font-family:var(--mkq-display);font-weight:700;color:var(--mkq-ink);text-decoration:none;padding:13px 6px;border-block-end:1px solid var(--mkq-hairline)}
.mkq-drawer-nav a.mkq-drawer-sub{font-family:var(--mkq-text);font-weight:600;font-size:15px;color:var(--mkq-ink-2)}

/* ---------- CTA ---------- */
.mkq-cta{display:inline-block;background:var(--mkq-cta);color:#1c0b00;font-family:var(--mkq-display);font-weight:800;text-decoration:none;padding:13px 24px;border-radius:999px;line-height:1.1;border:0;cursor:pointer;min-height:48px;transition:background-color .15s ease,transform .12s ease}
.mkq-cta:hover{background:#ffb733;color:#1c0b00}
.mkq-cta:active{transform:translateY(1px)}
.mkq-cta--block{display:block;text-align:center;width:100%}
.mkq-cta--ghost{background:transparent;color:var(--mkq-ink);box-shadow:inset 0 0 0 2px var(--mkq-cta)}
.mkq-cta--ghost:hover{background:color-mix(in srgb,var(--mkq-cta) 16%,transparent);color:var(--mkq-ink)}
.mkq-ctarow{display:flex;justify-content:center;margin:var(--mkq-space-4) 0}

/* ---------- Kicker / koppen ---------- */
.mkq-kicker{display:block;font-family:var(--mkq-display);font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:.72rem;color:var(--mkq-ink-2);position:relative;padding-block-start:12px;margin-block-end:8px}
.mkq-kicker::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;width:46px;height:4px;background:var(--mkq-accent)}
.mkq-h1{font-size:clamp(2rem,4.4vw,3rem);font-weight:800;letter-spacing:-.015em;margin-block-end:var(--mkq-space-3)}
.mkq-h2{font-size:clamp(1.5rem,2.6vw,var(--mkq-step-3));font-weight:700;letter-spacing:-.01em}
.mkq-h3{font-size:var(--mkq-step-1);font-weight:700}

/* ---------- Hero ---------- */
.mkq-hero{padding-block:var(--mkq-space-5) var(--mkq-space-4);position:relative}
.mkq-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(20px,3vw,40px);align-items:center}
.mkq-hero-media{margin:0;position:relative;min-width:0}
.mkq-hero-media::before{content:"";position:absolute;inset:-6% 0;background:radial-gradient(closest-side,color-mix(in srgb,var(--mkq-accent) 24%,transparent),transparent 72%);filter:blur(26px);z-index:0}
.mkq-hero-img{position:relative;z-index:1;display:block;width:100%;max-width:380px;aspect-ratio:1/1;object-fit:cover;border-radius:var(--mkq-r-md);box-shadow:0 18px 40px -18px rgba(40,20,10,.55),0 4px 12px -6px rgba(40,20,10,.4);margin-inline:auto}
.mkq-hero-copy{display:flex;flex-direction:column;gap:var(--mkq-space-2);min-width:0}
.mkq-hero-cta{margin-block:var(--mkq-space-2)}
.mkq-trust{font-size:.82rem;color:var(--mkq-ink-2);margin:0}
.mkq-hero-lead{font-size:var(--mkq-step-1);color:var(--mkq-ink-2);max-width:46ch;margin-block-start:var(--mkq-space-1)}
.mkq-hero-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--mkq-hairline);border:1px solid var(--mkq-hairline);border-radius:var(--mkq-r-md);overflow:hidden;margin-block-start:var(--mkq-space-4)}
.mkq-fact{background:var(--mkq-surface);padding:14px 16px;display:flex;flex-direction:column;gap:3px;min-width:0}
.mkq-fact-k{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--mkq-ink-3);font-weight:700}
.mkq-fact-v{font-family:var(--mkq-display);font-weight:700;font-size:var(--mkq-step-1);transition:opacity .15s ease}
.mkq-fact:hover .mkq-fact-v{opacity:1}
.mkq-fact:hover{background:var(--mkq-surface-2)}

/* ---------- Lichte titelkop (legal/auteur) ---------- */
.mkq-pagetitle{padding-block:var(--mkq-space-5) var(--mkq-space-3)}
.mkq-pagetitle-lead{font-size:var(--mkq-step-1);color:var(--mkq-ink-2);max-width:70ch}
.mkq-h1--plain{font-size:clamp(1.8rem,3.4vw,2.6rem)}

/* ---------- Breadcrumbs ---------- */
.mkq-crumbs{padding-block:var(--mkq-space-2);background:var(--mkq-surface)}
.mkq-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;font-size:.82rem;color:var(--mkq-ink-3)}
.mkq-crumbs li:not(:last-child)::after{content:"/";margin-inline-start:6px;color:var(--mkq-ink-3)}
.mkq-crumbs a{color:var(--mkq-ink-2);text-decoration:none}
.mkq-crumbs a:hover{color:var(--mkq-ink)}
.mkq-crumbs [aria-current=page]{color:var(--mkq-ink)}

/* ---------- Byline ---------- */
.mkq-byline{padding-block:var(--mkq-space-3)}
.mkq-byline-in{display:flex;align-items:center;gap:12px}
.mkq-byline-pic{width:44px;height:44px;border-radius:999px;object-fit:cover;flex:0 0 auto}
.mkq-byline-txt{display:flex;flex-direction:column;gap:2px;font-size:.85rem;color:var(--mkq-ink-2)}
.mkq-byline-txt a{color:var(--mkq-ink);font-weight:700;text-decoration:none}
.mkq-byline-txt a:hover{color:var(--mkq-accent-deep)}
.mkq-byline-dates{font-size:.78rem;color:var(--mkq-ink-3)}

/* ---------- Secties / proza ---------- */
.mkq-section{padding-block:var(--mkq-space-4)}
.mkq-section--mat{background:var(--mkq-surface)}
.mkq-prose{max-width:none}
.mkq-prose>*{max-width:none}
.mkq-prose h2{font-family:var(--mkq-display);font-size:clamp(1.5rem,2.6vw,var(--mkq-step-3));font-weight:700;margin-block:var(--mkq-space-4) var(--mkq-space-2);scroll-margin-top:84px;letter-spacing:-.01em}
.mkq-prose h3{font-family:var(--mkq-display);font-size:var(--mkq-step-1);font-weight:700;margin-block:var(--mkq-space-3) var(--mkq-space-1)}
.mkq-prose p{margin-block:0 var(--mkq-space-3)}
.mkq-prose a:not(.mkq-cta){color:var(--mkq-accent-deep);font-weight:600}
.mkq-prose a:not(.mkq-cta):hover{color:var(--mkq-ink)}
.mkq-sec-no{font-family:var(--mkq-display);font-weight:800;color:var(--mkq-accent-deep);font-size:.85rem;letter-spacing:.04em}

/* Lijsten met accent-staafje */
.mkq-list,.mkq-prose ul{list-style:none;padding:0;margin:0 0 var(--mkq-space-3)}
.mkq-list li,.mkq-prose ul li{position:relative;padding-inline-start:20px;margin-block-end:10px}
.mkq-list li::before,.mkq-prose ul li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.45em;width:3px;height:.9em;background:var(--mkq-accent-deep);transform-origin:top;transition:transform .15s ease}
.mkq-list li:hover::before,.mkq-prose ul li:hover::before{transform:scaleY(1.35)}
.mkq-prose ol{padding-inline-start:1.3em;margin:0 0 var(--mkq-space-3)}
.mkq-prose ol li{margin-block-end:10px}

/* Pull-quote / vermeldingsblok met dubbele accent-liniaal */
.mkq-pull{margin:var(--mkq-space-4) 0;padding:14px 0 14px 20px;border-inline-start:3px solid var(--mkq-accent-deep);box-shadow:inset 5px 0 0 -3px color-mix(in srgb,var(--mkq-accent) 60%,transparent);font-size:var(--mkq-step-1);color:var(--mkq-ink-2)}

/* Callout */
.mkq-callout{background:var(--mkq-surface);border-block-start:4px solid var(--mkq-accent);padding:var(--mkq-space-3) var(--mkq-space-4);margin:var(--mkq-space-4) 0}
.mkq-callout h3{margin-block-start:0}

/* ---------- TOC ---------- */
.mkq-toc{background:var(--mkq-surface);padding:var(--mkq-space-3) var(--mkq-space-4);margin-block:var(--mkq-space-3)}
.mkq-toc>summary{font-family:var(--mkq-display);font-weight:700;cursor:pointer;list-style:none}
.mkq-toc>summary::-webkit-details-marker{display:none}
.mkq-toc ol{margin:var(--mkq-space-2) 0 0;padding-inline-start:1.4em}
.mkq-toc a{color:var(--mkq-ink-2);text-decoration:none}
.mkq-toc a:hover{color:var(--mkq-accent-deep)}

/* ---------- Tabellen ---------- */
.mkq-tablewrap{overflow-x:auto;margin:var(--mkq-space-3) 0}
table{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--mkq-bg)}
table caption{caption-side:top;text-align:start;font-size:.8rem;color:var(--mkq-ink-3);margin-block-end:6px}
th,td{text-align:start;padding:11px 14px;border-block-end:1px solid var(--mkq-hairline);vertical-align:top}
thead th{background:var(--mkq-surface-2);font-family:var(--mkq-display);font-weight:700;font-size:.85rem}
tbody tr:nth-child(even){background:var(--mkq-surface)}
tbody td:first-child{font-weight:700}
td.mkq-num,th.mkq-num{text-align:end;font-variant-numeric:tabular-nums}

/* ---------- FAQ / details ---------- */
.mkq-faq details,details.mkq-acc{border-block-start:1px solid var(--mkq-hairline);background:transparent}
.mkq-faq details:last-of-type{border-block-end:1px solid var(--mkq-hairline)}
.mkq-faq summary,details.mkq-acc>summary{list-style:none;cursor:pointer;font-family:var(--mkq-display);font-weight:700;padding:16px 36px 16px 0;position:relative}
.mkq-faq summary::-webkit-details-marker,details.mkq-acc>summary::-webkit-details-marker{display:none}
.mkq-faq summary::after,details.mkq-acc>summary::after{content:"+";position:absolute;inset-inline-end:4px;inset-block-start:13px;font-size:1.4rem;color:var(--mkq-accent-deep);font-family:var(--mkq-text)}
.mkq-faq details[open]>summary::after,details.mkq-acc[open]>summary::after{content:"−"}
.mkq-faq details>div,details.mkq-acc>div{padding-block-end:16px;color:var(--mkq-ink-2)}

/* ---------- Slots ---------- */
.mkq-slots{padding-block:var(--mkq-space-4)}
.mkq-slots-intro{color:var(--mkq-ink-2);max-width:70ch}
.mkq-slot-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-block:var(--mkq-space-3)}
.mkq-slot{display:block;color:inherit;text-decoration:none;background:var(--mkq-surface);border-radius:var(--mkq-r-md);overflow:hidden;transition:transform .12s ease,background-color .15s ease}
.mkq-slot:hover{background:var(--mkq-surface-2);transform:translateY(-2px)}
.mkq-slot-img{display:block;aspect-ratio:1/1;overflow:hidden}
.mkq-slot-img img{width:100%;height:100%;object-fit:cover;display:block}
.mkq-slot-name{display:block;padding:7px 8px;font-size:.78rem;font-weight:700;font-family:var(--mkq-display);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkq-slots-all{margin-block-start:var(--mkq-space-2)}
.mkq-slots-all a{color:var(--mkq-accent-deep);font-weight:700;text-decoration:none}

/* ---------- Auteurskaart ---------- */
.mkq-author{background:var(--mkq-surface);border-radius:var(--mkq-r-md);padding:22px;margin:var(--mkq-space-5) auto var(--mkq-space-3);max-width:780px;display:flex;gap:18px;align-items:flex-start}
.mkq-author img.mkq-author-pic{width:96px;height:96px;border-radius:999px;object-fit:cover;flex:0 0 auto;aspect-ratio:auto}
.mkq-author h3{margin:0 0 4px}
.mkq-author-role{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mkq-ink-3);font-weight:700;margin-block-end:8px}
.mkq-author p{margin-block-end:8px;color:var(--mkq-ink-2)}
.mkq-author a{color:var(--mkq-accent-deep);font-weight:700;text-decoration:none}

/* Auteurspagina-portret */
.mkq-prose img.mkq-portrait{width:220px;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:var(--mkq-r-md);float:inline-start;margin:0 22px 12px 0}

/* ---------- Content-figuur ---------- */
.mkq-figure{width:min(72%,760px);margin:var(--mkq-space-4) auto;display:block}
.mkq-figure img{width:100%;height:auto;border-radius:var(--mkq-r-md);display:block}
.mkq-figure figcaption{font-size:.8rem;color:var(--mkq-ink-3);margin-block-start:8px;text-align:center}

/* ---------- Pros/cons ---------- */
.mkq-pc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin:var(--mkq-space-4) 0}
.mkq-pc>div{background:var(--mkq-surface);padding:var(--mkq-space-3) var(--mkq-space-4)}
.mkq-pc h3{margin-block-start:0}

/* ---------- Footer ---------- */
.mkq-foot{background:var(--mkq-dark);color:var(--mkq-dark-ink);margin-block-start:var(--mkq-space-6)}
.mkq-foot-care{background:color-mix(in srgb,#000 18%,var(--mkq-dark));padding-block:var(--mkq-space-3);font-size:.85rem}
.mkq-foot-care p{margin:0;color:#f3dcc9}
.mkq-foot-care a{color:var(--mkq-accent)}
.mkq-foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--mkq-space-4);padding-block:var(--mkq-space-5)}
.mkq-foot-brand .mkq-logo{display:inline-block;background:#fff;padding:8px 14px;border-radius:12px;line-height:0;margin-block-end:12px}
.mkq-foot-brand p{color:#e6cfc1;font-size:.9rem}
.mkq-foot-col h4{font-family:var(--mkq-display);font-size:.95rem;color:var(--mkq-accent);margin-block-end:12px}
.mkq-foot-col ul{list-style:none;margin:0;padding:0}
.mkq-foot-col li{margin-block-end:9px}
.mkq-foot-col a{color:#f0ddd0;text-decoration:none;font-size:.9rem}
.mkq-foot-col a:hover{color:var(--mkq-accent)}
.mkq-foot-nap{border-block-start:1px solid color-mix(in srgb,#fff 14%,transparent);padding-block:var(--mkq-space-3)}
.mkq-foot-nap p{margin:0;font-size:.78rem;color:#d9bfb1}

/* ---------- Cookie-melding ---------- */
.mkq-notice{position:fixed;inset-block-start:14px;inset-inline-end:14px;z-index:80;max-width:300px;background:var(--mkq-bg);border:1px solid var(--mkq-hairline);border-block-start:4px solid var(--mkq-accent);border-radius:var(--mkq-r-md);padding:14px 16px;box-shadow:0 12px 30px -12px rgba(40,20,10,.5);opacity:0;transition:opacity .25s ease}
.mkq-notice.is-vis{opacity:1}
.mkq-notice p{margin:0 0 10px;font-size:.82rem;color:var(--mkq-ink-2)}
.mkq-notice-ok{background:var(--mkq-cta);color:#1c0b00;border:0;border-radius:999px;padding:8px 18px;font-family:var(--mkq-display);font-weight:800;cursor:pointer;min-height:40px}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .mkq-slot-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:900px){
  .mkq-burger{display:inline-flex;flex-direction:column}
  .mkq-nav{display:none}
  .mkq-foot-cols{grid-template-columns:1fr 1fr;gap:var(--mkq-space-3)}
}
@media(max-width:760px){
  .mkq-hero-grid{grid-template-columns:1fr;text-align:center}
  .mkq-hero-copy{display:flex;flex-direction:column}
  .mkq-hero-media{order:1}
  .mkq-h1{order:2}
  .mkq-kicker{order:1;align-self:center}
  .mkq-hero-cta{order:3;display:flex;justify-content:center}
  .mkq-trust{order:4}
  .mkq-hero-lead{order:5;margin-inline:auto}
  .mkq-hero-copy>*{order:6}
  .mkq-hero-img{max-height:42vh;width:auto;aspect-ratio:1/1;object-fit:contain}
  .mkq-hero-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mkq-hero-lead{max-width:100%}
}
@media(max-width:640px){
  body{font-size:16px}
  .mkq-slot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mkq-foot-cols{grid-template-columns:1fr}
  .mkq-pc{grid-template-columns:1fr}
  .mkq-author{flex-direction:column;align-items:center;text-align:center}
  .mkq-figure{width:100%}
  .mkq-prose img.mkq-portrait{float:none;margin:0 auto 16px;display:block}
  table{font-size:.85rem}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
  .mkq-slot:hover,.mkq-cta:active{transform:none}
}