/* ═══════════════════════════════════════════════════════════
   FLEUR PRESENTS — Concept 2 "On Air"
   Redactioneel broadcast-idioom: papier, near-black, signaalrood.
   Violet als verrassend accent, gesampled uit haar podiumbelichting.
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:  #FAF9F6;
  --bone:   #EFEBE3;
  --ink:    #0D0D0F;
  --ink-2:  #4B4D52;
  --ink-3:  #86888E;
  --red:    #D62828;
  --red-dk: #B01F1F;
  --violet: #6A4BD6;
  --rule:   rgba(13,13,15,.16);
  --rule-s: rgba(13,13,15,.08);

  --serif: "Instrument Serif", Georgia, serif;
  --sans:  "Space Grotesk", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;

  --wrap:1280px; --gut:44px;
  --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px;
  --s-6:64px; --s-7:96px; --s-8:128px; --s-9:168px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
figure{ margin:0; } blockquote{ margin:0; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.skip{ position:absolute; left:-9999px; background:var(--ink); color:#fff; padding:12px 20px; z-index:200; }
.skip:focus{ left:12px; top:12px; }

/* ── typografie ─────────────────────────────────────────── */
.h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(52px, 9vw, 142px); line-height:.94;
  letter-spacing:-.028em;
}
.h1 em, .h2 em, .cta-title em{ font-style:italic; color:var(--red); }
.h2{
  font-family:var(--serif); font-size:clamp(34px,4.4vw,62px);
  line-height:1.02; letter-spacing:-.024em;
}
.mono-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.sec-label{
  padding-bottom:var(--s-3); margin-bottom:var(--s-5);
  border-bottom:1px solid var(--rule);
}
.lede{ font-size:17.5px; color:var(--ink-2); max-width:48ch; }

/* ── knoppen ───────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 28px; font-size:14px; font-weight:600; letter-spacing:.01em;
  border:1px solid transparent; border-radius:2px; cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease);
}
.btn-sm{ padding:10px 18px; font-size:13px; }
.btn-red{ background:var(--red); color:#fff; }
.btn-red:hover{ background:var(--ink); transform:translateY(-2px); }
.btn-line{ border-color:var(--rule); color:var(--ink); }
.btn-line:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn-line-light{ border-color:rgba(250,249,246,.35); color:var(--paper); }
.btn-line-light:hover{ border-color:var(--paper); transform:translateY(-2px); }
.btn-full{ width:100%; }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; }
.link-arrow{
  display:inline-flex; align-items:center; gap:8px; margin-top:auto;
  font-size:14px; font-weight:600; color:var(--red);
  border-bottom:1px solid rgba(214,40,40,.32); padding-bottom:3px; align-self:flex-start;
  transition:gap .3s var(--ease), border-color .3s var(--ease);
}
.link-arrow:hover{ gap:13px; border-color:var(--red); }

/* ── statusbar + header ────────────────────────────────── */
.statusbar{ background:var(--ink); color:rgba(250,249,246,.72); }
.statusbar-in{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding-block:9px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.13em; text-transform:uppercase;
}
.onair{ display:inline-flex; align-items:center; gap:8px; color:#fff; font-weight:500; }
.dot{
  width:7px; height:7px; border-radius:50%; background:var(--red); flex:none;
  animation:pulse 2s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(214,40,40,.65); }
  70%{ box-shadow:0 0 0 7px rgba(214,40,40,0); }
}
.sb-mid{ text-transform:none; letter-spacing:.04em; color:rgba(250,249,246,.5); }
.sb-right{ display:inline-flex; gap:8px; }
.sb-sep{ opacity:.4; }

.site{
  position:sticky; top:0; z-index:80; background:rgba(250,249,246,.9);
  backdrop-filter:blur(12px); border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease);
}
.site.is-stuck{ border-bottom-color:var(--rule); }
.hdr{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); padding-block:16px; }
.mark{
  font-family:var(--sans); font-weight:700; font-size:16px;
  letter-spacing:-.01em; text-transform:uppercase;
}
.mark span{ color:var(--red); margin-left:6px; font-weight:500; letter-spacing:.16em; font-size:10.5px; }
.nav{ display:flex; gap:var(--s-4); margin-left:auto; margin-right:var(--s-3); }
.nav a{ display:inline-flex; align-items:baseline; gap:7px; font-size:14px; color:var(--ink-2);
        transition:color .3s var(--ease); }
.nav a i{ font-family:var(--mono); font-style:normal; font-size:10px; color:var(--red); }
.nav a:hover{ color:var(--ink); }

/* ── hero ──────────────────────────────────────────────── */
.hero{ padding-top:var(--s-7); overflow-x:clip; }
.kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:10px; margin-bottom:var(--s-5);
}
.kick-num{ color:var(--red); }
.kicker::after{ content:""; flex:1; height:1px; background:var(--rule-s); }

.hero-type{ position:relative; }
.h1 .l1, .h1 .l2{ display:block; }
.h1 .l2{ padding-left:.06em; }

/* portret breekt door de typografie heen */
.hero-cut{
  position:absolute; right:0; top:-30px; width:30%; max-width:352px; z-index:3;
}
.hero-cut img{
  width:100%; aspect-ratio:3/4; object-fit:cover; object-position:52% 30%;
  border-radius:2px;
}
.lower-third{
  position:absolute; left:-18px; bottom:26px;
  background:var(--ink); color:#fff; padding:11px 16px 12px; border-left:3px solid var(--red);
  display:flex; flex-direction:column; gap:2px; min-width:210px;
}
.lt-name{ font-weight:700; font-size:15px; letter-spacing:.01em; }
.lt-role{ font-family:var(--mono); font-size:10px; letter-spacing:.13em;
          text-transform:uppercase; color:rgba(255,255,255,.6); }

/* volle-breedte regel waar het portret dwars doorheen snijdt */
.hero-rule{ height:1px; background:var(--rule); margin-top:var(--s-6); }
.hero-foot{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-4);
  max-width:560px; padding-top:var(--s-4);
}

/* rolticker */
.ticker{
  margin-top:var(--s-7); border-block:1px solid var(--rule);
  padding-block:16px; overflow:hidden; background:var(--bone);
}
.ticker-track{
  display:flex; align-items:center; gap:24px; width:max-content;
  animation:slide 46s linear infinite;
}
.ticker-track span{
  font-family:var(--serif); font-size:34px; letter-spacing:-.02em; white-space:nowrap;
}
.ticker-track b{ color:var(--red); font-size:14px; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-33.333%); } }

/* ── showreel ──────────────────────────────────────────── */
.reel{ padding-block:var(--s-8) var(--s-8); }
.reel-frame{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#000;
}
.reel-poster{ width:100%; height:100%; object-fit:cover; }
.reel-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.reel-shade{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.05) 55%);
}
.reel-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:96px; height:96px; border:0; background:none; cursor:pointer; padding:0;
  display:grid; place-items:center;
}
.reel-play-ring{
  position:absolute; inset:0; border:1px solid rgba(255,255,255,.7); border-radius:50%;
  transition:transform .45s var(--ease), background .45s var(--ease);
}
.reel-play:hover .reel-play-ring{ transform:scale(1.09); background:rgba(214,40,40,.9); border-color:transparent; }
.reel-play-tri{
  width:0; height:0; margin-left:5px;
  border-left:17px solid #fff; border-top:11px solid transparent; border-bottom:11px solid transparent;
}
.reel-meta{
  position:absolute; left:34px; bottom:30px; display:flex; align-items:center; gap:16px;
}
.tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  padding:7px 12px; border:1px solid rgba(255,255,255,.35); color:#fff;
}
.tag-red{ border-color:transparent; background:var(--red); }
.reel-title{ color:#fff; font-family:var(--serif); font-size:26px; letter-spacing:-.01em; }
.reel-corner{
  position:absolute; right:30px; bottom:34px;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
}
.reel-frame.is-playing .reel-poster,
.reel-frame.is-playing .reel-shade,
.reel-frame.is-playing .reel-play,
.reel-frame.is-playing .reel-meta,
.reel-frame.is-playing .reel-corner{ display:none; }

/* ── credits ───────────────────────────────────────────── */
.credits{ padding-bottom:var(--s-8); }
.credits-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-5);
  border-top:1px solid var(--rule); padding-top:var(--s-4);
}
.credit-block .mono-label{ margin-bottom:10px; display:block; }
.credit-big{ font-family:var(--serif); font-size:27px; line-height:1.14; letter-spacing:-.018em; }
.credit-small{ font-size:14px; color:var(--ink-2); line-height:1.5; }

/* ── kanalen ───────────────────────────────────────────── */
.kanalen{ padding-bottom:var(--s-8); }
.channel{
  position:relative; border-top:1px solid var(--rule); overflow:hidden;
  background:var(--paper); transition:background .5s var(--ease);
}
.channel:last-child{ border-bottom:1px solid var(--rule); }
/* Beide kanalen tonen hun beeld; hover licht er één uit en dimt de ander. */
.ch-bg{
  position:absolute; inset:0; background-size:cover; background-position:center 32%;
  transform:scale(1.02); transition:transform 1.2s var(--ease), filter .6s var(--ease);
}
.channel::after{
  content:""; position:absolute; inset:0;
  background:rgba(10,10,12,.66); transition:background .6s var(--ease);
}
#channels:hover .channel:not(.is-active)::after{ background:rgba(10,10,12,.84); }
#channels:hover .channel:not(.is-active) .ch-bg{ filter:grayscale(.75); }
.channel.is-active .ch-bg{ transform:scale(1.06); }
.ch-in{
  position:relative; z-index:2; color:#fff;
  display:grid; grid-template-columns:70px 1fr auto; gap:var(--s-5); align-items:start;
  padding-block:var(--s-7);
}
.ch-num{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  color:rgba(255,255,255,.55); padding-top:16px;
}
.ch-title{
  font-family:var(--serif); font-size:clamp(38px,5vw,72px); line-height:1;
  letter-spacing:-.026em; margin-bottom:14px;
}
.ch-text{ color:rgba(255,255,255,.82); max-width:56ch; }
.ch-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--s-3); }
.ch-tags li{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  padding:6px 11px; border:1px solid rgba(255,255,255,.4); color:rgba(255,255,255,.88);
}
.ch-cta{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  font-size:14px; font-weight:600; padding-bottom:4px; margin-top:16px;
  border-bottom:1px solid currentColor; transition:gap .3s var(--ease);
}
.ch-cta:hover{ gap:14px; }

/* ── programmagids ─────────────────────────────────────── */
.gids{ padding-block:var(--s-8); background:var(--bone); }
.gids-head{
  display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s-6);
  align-items:end; margin-bottom:var(--s-6);
}
.gids-head .mono-label{ display:block; margin-bottom:var(--s-3); }
.gids-intro{ color:var(--ink-2); font-size:17px; }

.rundown{ border-top:1px solid var(--rule); margin-bottom:var(--s-6); }
.run{
  display:grid; grid-template-columns:56px 110px 1fr; gap:var(--s-4);
  padding-block:var(--s-4); border-bottom:1px solid var(--rule);
  transition:background .35s var(--ease);
}
.run:hover{ background:rgba(255,255,255,.6); }
.run-num{ font-family:var(--mono); font-size:12px; color:var(--red); letter-spacing:.12em; padding-top:5px; }
.run-slot{
  font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); padding-top:6px;
}
.run-body b{
  display:block; font-family:var(--serif); font-weight:400; font-size:27px;
  letter-spacing:-.018em; margin-bottom:6px;
}
.run-body{ color:var(--ink-2); font-size:15.5px; max-width:70ch; }
.run-final .run-body b{ color:var(--red); }

.gids-foot{ display:grid; grid-template-columns:1.25fr 1fr; gap:var(--s-5); }
.gids-photo img{ width:100%; height:100%; min-height:400px; object-fit:cover; }
.gids-spec{ background:var(--ink); color:var(--paper); padding:var(--s-5); display:flex; flex-direction:column; }
.spec{ border-top:1px solid rgba(250,249,246,.16); }
.spec li{
  display:grid; grid-template-columns:112px 1fr; gap:var(--s-3);
  padding-block:13px; border-bottom:1px solid rgba(250,249,246,.16); font-size:15px;
}
.spec span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
            text-transform:uppercase; color:rgba(250,249,246,.5); padding-top:4px; }
.spec b{ font-weight:500; }
.spec-note{ font-size:13px; color:rgba(250,249,246,.5); margin-block:14px var(--s-4); }
.gids-spec .btn{ margin-top:auto; }

/* ── meer ──────────────────────────────────────────────── */
.meer{ padding-block:var(--s-8); }
.meer-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.meer-card{
  background:var(--paper); padding:var(--s-5);
  display:flex; flex-direction:column; gap:var(--s-3);
  transition:background .35s var(--ease);
}
.meer-card:hover{ background:#fff; }
.meer-card h3{ font-family:var(--serif); font-size:29px; line-height:1.06; letter-spacing:-.02em; }
.meer-card p{ font-size:15.5px; color:var(--ink-2); }
.meer-card-red h3{ color:var(--red); }
.spec-sm{ margin-top:auto; border-top:1px solid var(--rule); }
.spec-sm li{ border-bottom:1px solid var(--rule); grid-template-columns:96px 1fr; font-size:14px; padding-block:10px; }
.spec-sm span{ color:var(--ink-3); }
.spec-sm b{ color:var(--ink); }

/* ── reviews ───────────────────────────────────────────── */
.reviews{ padding-bottom:var(--s-8); }
.rev-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5) var(--s-6); }
.rev{ display:flex; flex-direction:column; gap:var(--s-3); }
.rev p{ font-family:var(--serif); font-size:21px; line-height:1.28; letter-spacing:-.012em; }
.rev cite{ font-style:normal; display:flex; flex-direction:column; gap:2px; }
.rev cite b{ font-size:13.5px; font-weight:600; }
.rev cite span{ font-family:var(--mono); font-size:10px; letter-spacing:.13em;
                text-transform:uppercase; color:var(--ink-3); }
.rev-big{ grid-column:span 3; }
.rev-big p{ font-size:clamp(30px,3.6vw,50px); line-height:1.06; max-width:20ch; }

/* ── profiel ───────────────────────────────────────────── */
.profiel{ padding-block:var(--s-8); border-top:1px solid var(--rule); }
.profiel-grid{ display:grid; grid-template-columns:.8fr 1fr; gap:var(--s-7); align-items:start; }
.profiel-media{ position:relative; }
.profiel-media img{ width:100%; aspect-ratio:3/4; object-fit:cover; filter:grayscale(1) contrast(1.04); }
.profiel-cap{
  position:absolute; left:0; bottom:-1px; background:var(--paper);
  padding:16px 20px 14px 0; display:flex; flex-direction:column; gap:3px;
}
.profiel-cap b{ font-size:16px; font-weight:600; }
.profiel-copy p{ color:var(--ink-2); margin-top:var(--s-3); max-width:54ch; }
.creds{ margin-top:var(--s-5); border-top:1px solid var(--rule); }
.creds > div{
  display:grid; grid-template-columns:150px 1fr; gap:var(--s-3);
  padding-block:14px; border-bottom:1px solid var(--rule);
}
.creds dt{ font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
           text-transform:uppercase; color:var(--red); padding-top:4px; }
.creds dd{ font-size:15.5px; }
.pull{
  font-family:var(--serif); font-size:24px; line-height:1.3;
  color:var(--ink) !important; margin-top:var(--s-5) !important;
  padding-left:var(--s-3); border-left:2px solid var(--red);
}

/* ── cta ───────────────────────────────────────────────── */
.cta{ background:var(--ink); color:var(--paper); padding-block:var(--s-9); }
.cta-in{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-3); }
.cta-title{
  font-family:var(--serif); font-size:clamp(42px,6.2vw,92px); line-height:.98;
  letter-spacing:-.028em; margin-top:10px;
}
.cta-title em{ color:var(--red); }
.cta-text{ color:rgba(250,249,246,.62); max-width:46ch; font-size:17px; }
.cta .cta-row{ margin-top:var(--s-4); }

/* ── footer ────────────────────────────────────────────── */
.foot{ background:var(--ink); color:rgba(250,249,246,.66); padding-top:var(--s-6);
       border-top:1px solid rgba(250,249,246,.12); }
.foot-in{ display:grid; grid-template-columns:1fr 1.4fr; gap:var(--s-6);
          padding-bottom:var(--s-6); border-bottom:1px solid rgba(250,249,246,.12); }
.mark-light{ color:var(--paper); }
.foot-brand p{ margin-top:10px; font-size:14px; color:rgba(250,249,246,.45); }
.foot-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4); }
.foot-cols h4{ font-family:var(--mono); font-size:10.5px; letter-spacing:.15em;
               text-transform:uppercase; color:rgba(250,249,246,.42); margin-bottom:12px; }
.foot-cols a, .foot-cols span{ display:block; font-size:14.5px; padding-block:5px;
                               color:rgba(250,249,246,.72); transition:color .3s var(--ease); }
.foot-cols a:hover{ color:var(--paper); }
.foot-bar{ display:flex; justify-content:space-between; gap:var(--s-3); flex-wrap:wrap;
           padding-block:20px 28px; font-family:var(--mono); font-size:10.5px;
           letter-spacing:.1em; text-transform:uppercase; color:rgba(250,249,246,.36); }

/* ═══════════ MOBIEL ═══════════ */
@media (max-width: 1000px){
  :root{ --gut:22px; --s-9:110px; --s-8:84px; --s-7:64px; }
  .nav, .sb-mid{ display:none; }
  .statusbar-in{ justify-content:space-between; }

  .hero{ padding-top:var(--s-5); }
  /* mobiel: portret krijgt eigen plek onder de kop i.p.v. eroverheen */
  .hero-cut{ position:static; width:100%; max-width:none; margin-top:var(--s-4); }
  .hero-cut img{ aspect-ratio:4/3; object-position:50% 22%; }
  .lower-third{ left:0; bottom:0; position:absolute; }
  .hero-cut{ position:relative; }
  .h1{ font-size:clamp(44px,13vw,72px); }
  .hero-foot{ grid-template-columns:1fr; gap:var(--s-4); align-items:start; }
  .cta-row .btn{ flex:1 1 auto; }

  .ticker-track span{ font-size:24px; }
  .reel{ padding-block:var(--s-6); }
  .reel-frame{ aspect-ratio:4/5; }
  .reel-meta{ left:18px; bottom:20px; flex-direction:column; align-items:flex-start; gap:10px; }
  .reel-title{ font-size:20px; }
  .reel-corner{ display:none; }
  .reel-play{ width:72px; height:72px; }

  .credits-grid{ grid-template-columns:1fr 1fr; gap:var(--s-4); }
  .credit-big{ font-size:21px; }

  .ch-in{ grid-template-columns:1fr; gap:var(--s-3); padding-block:var(--s-5); }
  .ch-num{ order:-1; padding-top:0; }
  .channel .ch-bg{ transform:none; }

  .gids-head{ grid-template-columns:1fr; gap:var(--s-4); }
  .run{ grid-template-columns:44px 1fr; gap:var(--s-2) var(--s-3); }
  .run-slot{ grid-column:2; padding-top:0; }
  .run-body{ grid-column:2; }
  .gids-foot{ grid-template-columns:1fr; }
  .gids-photo img{ min-height:240px; }

  .meer-grid{ grid-template-columns:1fr; }
  .rev-grid{ grid-template-columns:1fr; gap:var(--s-5); }
  .rev-big{ grid-column:auto; }
  .rev-big p{ font-size:28px; max-width:none; }

  .profiel-grid{ grid-template-columns:1fr; gap:var(--s-5); }
  .profiel-media{ max-width:340px; }
  .creds > div{ grid-template-columns:1fr; gap:4px; }

  .foot-in{ grid-template-columns:1fr; gap:var(--s-5); }
  .foot-cols{ grid-template-columns:1fr 1fr; }
  .foot-bar{ flex-direction:column; gap:8px; }
}

@media (max-width:560px){
  .cta-row{ flex-direction:column; align-items:stretch; }
  .cta-row .btn{ width:100%; }
  .credits-grid{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .ticker-track{ animation:none; }
  .dot{ animation:none; }
  *,*::before,*::after{ transition-duration:.001ms !important; }
}