/* Verborgen deck-pagina's (/producers, /directors, /brands). Zelfde donkere stijl als de site. */
:root {
  --ink: #0d0c0a; --ink-3: #221f1a; --paper: #ece7df; --mute: #9c9488; --sand: #cbb596;
  --line: rgba(236, 231, 223, .13);
  --f-display: "Big Shoulders Display", "Oswald", "Arial Narrow", sans-serif;
  --f-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(16px, 4vw, 56px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 400 16px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }
img { display: block; max-width: 100%; }
.wrap { max-width: 1320px; margin: 0 auto; padding-inline: var(--gutter); }

/* kop */
.dk-top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; }
.mark { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.mark svg { width: 34px; height: 34px; flex: none; }
.mark svg path { fill: var(--sand); }
.mark svg .f { fill: none; stroke: var(--sand); stroke-width: 2.2; stroke-linecap: square; }
.mark span { display: grid; gap: 5px; }
.mark b { font: 800 20px/.86 var(--f-display); letter-spacing: .07em; text-transform: uppercase; }
.mark i { font: 500 10px/1 var(--f-mono); font-style: normal; letter-spacing: .5em; text-transform: uppercase; color: var(--sand); }
.dk-site { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); text-decoration: none; }
.dk-site:hover { color: var(--sand); }
.dk-right { display: flex; align-items: center; gap: 22px; }
.dk-lang { display: flex; border: 1px solid var(--line); }
.dk-lang a { font: 600 11px/1 var(--f-mono); letter-spacing: .14em; color: var(--mute); text-decoration: none; padding: 9px 11px; transition: color .2s, background .2s; }
.dk-lang a:hover { color: var(--paper); }
.dk-lang a[aria-current] { background: var(--sand); color: var(--ink); }

/* intro */
.dk-intro { padding-block: clamp(24px, 4vw, 48px) clamp(20px, 3vw, 32px); }
.dk-intro p { margin: 0; }
.dk-label { font: 500 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sand); margin-bottom: 12px !important; }
.dk-intro h1 { margin: 0; font: 800 clamp(40px, 7vw, 96px)/.88 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.dk-sub { margin-top: 14px !important; color: var(--mute); max-width: 56ch; }
.dk-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer;
  font: 600 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  padding: 15px 20px; border: 1px solid var(--line); color: var(--paper); background: none;
  transition: border-color .2s, color .2s, background .2s;
}
.btn:hover { border-color: var(--sand); color: var(--sand); }
.btn.solid { background: var(--sand); border-color: var(--sand); color: var(--ink); }
.btn.solid:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
/* contrast >= 4,5:1 nagerekend: donker .8 op zand = 6,8:1; licht op #7a6446 alleen volle kleur haalt het (4,8:1) */
.btn small { font: inherit; opacity: .8; letter-spacing: .06em; }
:root[data-theme="light"] .btn small { opacity: 1; font-weight: 500; }

/* slides */
.slides { list-style: none; margin: 0; padding: 0 0 clamp(40px, 6vw, 80px); display: grid; gap: clamp(10px, 1.6vw, 20px); }
.slides li { position: relative; aspect-ratio: 16 / 9; background: var(--ink-3); }
.slides img { width: 100%; height: 100%; object-fit: cover; }
.slides .no { position: absolute; right: 10px; bottom: 8px; font: 500 10px/1 var(--f-mono); letter-spacing: .12em; color: rgba(236,231,223,.45); }

/* contact onderaan */
.dk-contact { border-top: 1px solid var(--line); padding-block: clamp(40px, 6vw, 72px); }
.dk-contact h2 { margin: 0 0 22px; font: 800 clamp(36px, 6vw, 80px)/.88 var(--f-display); text-transform: uppercase; }
.dk-contact .dk-actions { margin-top: 0; }
footer { border-top: 1px solid var(--line); padding-block: 22px calc(22px + env(safe-area-inset-bottom, 0px)); }
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
footer a { text-decoration: none; } footer a:hover { color: var(--sand); }

@media (max-width: 520px) {
  .dk-site { display: none; }
  .btn { padding: 14px 16px; }
}

/* licht thema (zelfde warme papierkleur als de site, /ai en /uitjes); de kop blijft donker, net als op de site */
:root[data-theme="light"] {
  --ink: #f1ede6; --ink-3: #ddd6ca; --paper: #1a1814; --mute: #6a6257; --sand: #7a6446;
  --line: rgba(26, 24, 20, .14);
  color-scheme: light;
}
:root[data-theme="light"] .dk-top {
  --ink: #0d0c0a; --ink-3: #221f1a; --paper: #ece7df; --mute: #9c9488; --sand: #cbb596;
  --line: rgba(236, 231, 223, .13);
  background: var(--ink); color: var(--paper);
}
:root[data-theme="light"] .btn.solid { color: #f1ede6; }
:root[data-theme="light"] .btn.solid:hover { background: var(--paper); border-color: var(--paper); color: #f1ede6; }
body { transition: background-color .35s ease, color .35s ease; }

/* knop licht / donker in de kop */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; margin: 0;
  background: none; border: 0; cursor: pointer; color: var(--paper); opacity: .8;
  font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
}
.theme-toggle:hover { opacity: 1; color: var(--sand); }
.theme-toggle svg { width: 14px; height: 14px; flex: none; }
.theme-toggle svg rect { fill: none; stroke: currentColor; stroke-width: 1.5; }
.theme-toggle svg path { fill: currentColor; }
.theme-toggle:focus:not(:focus-visible) { outline: none; }
@media (max-width: 520px) { .theme-toggle .tt-label { display: none; } .dk-right { gap: 14px; } }