/* ==========================================================================
   CHRISTINE PRODUCTIES — V15 "DE CONTACTAFDRUK"
   Desktoplaag. Additief bestand: dit komt ná style.css en overschrijft niets
   wat de mobiele versie nodig heeft.

   AFSPRAAK DIE HET HELE BESTAND STUURT
   Alles wat layout, ruimte of beweging raakt, staat in @media (min-width:901px).
   De mobiele versie is af en wordt hier niet aangeraakt. Wat wél globaal staat,
   staat in blok 0 en is beperkt tot dingen die op een telefoon niet zichtbaar
   zijn (selectiekleur, focusring, scrollbar) of die de bestaande stijl exact
   volgen.

   WAAR DE KEUZES VANDAAN KOMEN (webdesign 2026)
   - Tactile brutalism: scherpe geometrie, 1px-lijnen, CSS-textuur in plaats van
     zachte schaduwen. De site zat hier al tegenaan; V15 maakt het expliciet.
   - Typografie als layout: koppen die van rand tot rand lopen en die tijdens
     het scrollen van letterafstand veranderen (kinetische type).
   - Anti-grid / editorial: de kolom in de marge, spooknummers, kaarten die
     bewust uit het stramien stappen.
   - Scroll-driven animations in kale CSS (animation-timeline). Draait op de
     compositorthread, niet op de main thread. Overal achter @supports, dus
     Firefox zonder vlag valt netjes terug op de bestaande .rv-reveals.
   ========================================================================== */


/* ==========================================================================
   0. GLOBAAL — alleen wat op mobiel onzichtbaar of identiek is
   ========================================================================== */

::selection{ background:var(--red); color:#fff }
.sec-ink ::selection,.bundle ::selection{ background:var(--red-soft); color:var(--ink) }

/* Eén focusring voor de hele site in plaats van de browserstandaard.
   Alleen zichtbaar bij toetsenbordnavigatie. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
  border-radius:var(--r-1);
}
.sec-ink :focus-visible,.bundle :focus-visible,.gate :focus-visible,
.orderrail :focus-visible,.foot :focus-visible{ outline-color:var(--red-soft) }


/* ==========================================================================
   1. RUIMTE — de kern van de klacht: te veel leegte links en rechts
   Op een breed scherm stond 1200px inhoud tussen twee lege marges van 350px.
   Drie ingrepen: de container groeit mee, de marge krijgt een taak (rail +
   spooknummers), en een paar blokken lopen bewust door tot de schermrand.
   ========================================================================== */

/* De container groeit pas als er daarna nog echte marge overblijft voor de
   hoofdstukrail. Eerder verbreden maakt de marge juist kleiner. */
@media (min-width:1700px){ :root{ --max:1360px } }
@media (min-width:2000px){ :root{ --max:1480px } }

@media (min-width:901px){

  /* Full-bleed helper: een blok breekt uit .wrap tot de schermranden. */
  .cp-bleed{
    width:100vw;
    margin-inline:calc(50% - 50vw);
  }

  /* De marquee liep al vol; hij mag nu ook hoger en luider staan. */
  .marquee{ padding-block:16px }
  .marquee-run{ gap:64px }
  .marquee span{ font-size:12px }

  /* De creditrail was een dunne strook met veel lucht. Nu een echte
     driedeling met scheidingslijnen, zoals een colofon. */
  .cred-rail{ padding-block:34px }
  .cred-grid{ grid-template-columns:.34fr 1.4fr .42fr; gap:0 }
  .cred-grid > *{ padding-inline:clamp(1.5rem,3vw,3rem) }
  .cred-grid > *:first-child{ padding-inline-start:0 }
  .cred-grid > *:last-child{ padding-inline-end:0 }
  .cred-grid > * + *{ border-inline-start:1px solid var(--line) }
}


/* ==========================================================================
   2. HOOFDSTUKRAIL — de linkermarge wordt navigatie
   De rode draad (.thread) liep al langs de linkerkant maar zei niets. Hij is
   nu de ruggengraat van een hoofdstukindex: waar je bent, hoe ver je bent en
   waar je heen kunt. Wordt door script-v15-desktop.js gevuld.
   ========================================================================== */

.cp-rail{
  position:fixed;
  left:max(18px,3.4vw);
  top:50%;
  translate:0 -50%;
  z-index:62;
  display:none;
  flex-direction:column;
  gap:2px;
  padding-inline-start:12px;
  opacity:0;
  transition:opacity .5s var(--ease-lens);
}
.cp-rail.on{ opacity:1 }

/* Pas tonen als de marge naast .wrap er echt is. Onder 1440px zou de rail
   over de inhoud vallen; dan blijft alleen de bestaande rode draad staan. */
@media (min-width:1440px){
  .cp-rail{ display:flex }
}

.cp-rail a{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  height:26px;
  font-size:var(--fs-label);
  font-weight:800;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:color-mix(in oklab,var(--ink) 34%,transparent);
  transition:color .3s var(--ease-lens);
}
/* De streep die uit de draad steekt. Lengte is de statusindicator. */
.cp-rail a::before{
  content:"";
  flex:none;
  width:10px;
  height:1px;
  background:currentColor;
  transition:width .35s var(--ease-lens),background .3s var(--ease-lens);
}
/* Het label schuift bij hover de inhoud in. Daarom een eigen vlak eronder,
   zodat het leesbaar blijft en niet met de tekst eronder vermengt. */
.cp-rail a b{
  padding-inline:6px;
  background:color-mix(in oklab,var(--paper) 92%,transparent);
  backdrop-filter:blur(6px);
}
body.cp-dark .cp-rail a b{ background:color-mix(in oklab,var(--ink) 84%,transparent) }
.cp-rail a i{
  font-style:normal;
  font-variant-numeric:tabular-nums;
  opacity:.55;
}
/* Het label zelf verschijnt pas als er echt marge is om het in te zetten. */
.cp-rail a b{
  font-weight:800;
  white-space:nowrap;
  max-width:0;
  overflow:hidden;
  opacity:0;
  transition:max-width .4s var(--ease-lens),opacity .3s linear;
}
.cp-rail a:hover{ color:var(--red-deep) }
.cp-rail a:hover::before{ width:22px }
.cp-rail a:hover b{ max-width:16ch; opacity:1 }

.cp-rail a.on{ color:var(--red-deep) }
.cp-rail a.on::before{ width:26px; background:var(--red-bright) }
.cp-rail a.on b{ max-width:16ch; opacity:1 }

@media (min-width:1900px){
  /* Zoveel marge dat alle labels permanent open kunnen staan: de rail leest
     dan als de index van een filmscript. */
  .cp-rail a b{ max-width:16ch; opacity:.45; background:transparent; backdrop-filter:none }
  .cp-rail a.on b,.cp-rail a:hover b{ opacity:1 }
}

/* Op donkere secties draait de rail mee van kleur. */
body.cp-dark .cp-rail a{ color:color-mix(in oklab,var(--white) 38%,transparent) }
body.cp-dark .cp-rail a.on,body.cp-dark .cp-rail a:hover{ color:var(--red-soft) }


/* ==========================================================================
   3. SPOOKNUMMERS — de rechtermarge krijgt gewicht
   Een groot, alleen-contour hoofdstuknummer dat half buiten beeld valt.
   Puur CSS-counters, geen extra HTML. Dit is het element dat het meest doet
   tegen "te veel lege ruimte": de leegte krijgt een laag.
   ========================================================================== */

@media (min-width:1100px){

  body{ counter-reset:cpsec }
  main > section[id]:not(.hero){ counter-increment:cpsec }
  main > section{ position:relative; isolation:isolate }
  main > section > .wrap{ position:relative; z-index:1 }

  main > section[id]:not(.hero)::before{
    content:counter(cpsec,decimal-leading-zero);
    position:absolute;
    z-index:0;
    top:clamp(1.5rem,4vw,4rem);
    right:-.06em;
    font:clamp(9rem,17vw,17rem)/.72 "Rubik Mono One",sans-serif;
    letter-spacing:-.07em;
    color:transparent;
    -webkit-text-stroke:1px color-mix(in oklab,var(--ink) 9%,transparent);
    pointer-events:none;
    user-select:none;
  }
  main > section.sec-ink[id]:not(.hero)::before{
    -webkit-text-stroke-color:color-mix(in oklab,var(--white) 10%,transparent);
  }
  /* De hero heeft al een eigen beeldopbouw en hoeft geen nummer. */
  .hero::before,.libhero::before,.shero::before{ content:none !important }
}


/* ==========================================================================
   4. EDITORIAL MASTHEAD — de sectiekop stapt uit de kolom
   Waar een sectie begint met .take + .head-xl, schuift het atelierlabel naar
   een eigen, meelopende kolom links. Dat is de anti-grid-beweging van 2026 en
   het lost tegelijk twee dingen op: de leegte links vult zich, en je ziet bij
   het scrollen altijd in welk hoofdstuk je zit.

   Met :has() geselecteerd, dus er verandert niets aan de HTML. Secties waar
   .take dieper genest zit (manifest, producties, over) blijven ongemoeid.
   ========================================================================== */

@media (min-width:1100px){

  .sec > .wrap:has(> .take){
    display:grid;
    grid-template-columns:clamp(11rem,15vw,15rem) minmax(0,1fr);
    column-gap:clamp(2rem,4.5vw,5rem);
    align-items:start;
  }
  .sec > .wrap:has(> .take) > *{ grid-column:2 }

  .sec > .wrap:has(> .take) > .take{
    grid-column:1;
    grid-row:1 / span 40;
    position:sticky;
    top:9rem;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:.55rem;
    padding-top:.75rem;
    border-top:1px solid var(--edge-red);
  }
  .sec > .wrap:has(> .take) > .take b{
    font-size:clamp(1.35rem,1.9vw,1.75rem);
    line-height:1.15;
  }
  /* Een dun streepje dat meegroeit met de leesvoortgang van de sectie. */
  .sec > .wrap:has(> .take) > .take::after{
    content:"";
    width:100%;
    height:1px;
    margin-top:.75rem;
    background:linear-gradient(90deg,var(--red) var(--cp-p,0%),var(--line) 0);
  }

  /* De kop mag nu breed: hij heeft de volle rechterkolom. */
  .sec > .wrap:has(> .take) > .head-xl{ margin-top:0 }
  .sec > .wrap:has(> .take) > .intro{ max-width:var(--measure) }
}


/* ==========================================================================
   5. KINETISCHE TYPOGRAFIE
   Rubik Mono One is geen variabele letter, dus de gewichts-as valt af. Wat wél
   kan en op grote maat sterker leest: letterafstand die opent terwijl de kop
   binnenkomt, en een hero die tijdens het wegscrollen dichtklapt.
   Alles op animation-timeline, dus geen scroll-listener erbij.
   ========================================================================== */

@supports (animation-timeline:view()){
  @media (min-width:901px) and (prefers-reduced-motion:no-preference){

    /* translate/scale zijn eigen properties: ze botsen niet met de transform
       die het bestaande script op .rv en .par zet. */
    .head-xl,.bundle h2,.capture h2{
      animation:cpType linear both;
      animation-timeline:view();
      animation-range:entry 15% cover 35%;
    }
    @keyframes cpType{
      from{ letter-spacing:-.09em; translate:-1.1rem 0 }
      to  { letter-spacing:var(--track-disp); translate:0 0 }
    }

    /* De hero verdicht en dimt terwijl hij het beeld uit gaat. */
    .hero-title{
      animation:cpHeroExit linear both;
      animation-timeline:view();
      animation-range:exit 0% exit 100%;
    }
    @keyframes cpHeroExit{
      from{ letter-spacing:var(--track-disp); opacity:1 }
      to  { letter-spacing:-.085em; opacity:.28 }
    }

    /* Spooknummer met parallax: de marge krijgt diepte. */
    main > section[id]:not(.hero)::before{
      animation:cpGhost linear both;
      animation-timeline:view();
    }
    @keyframes cpGhost{
      from{ transform:translateY(14%) }
      to  { transform:translateY(-14%) }
    }

    /* Filmgate: een rode lijn die per sectie opentrekt.
       Op ::after, want ::before draagt hierboven al het spooknummer en
       .sec-ink gebruikt ::after zelf voor de halatie. */
    .sec-ivory,.sec-paper{ position:relative }
    .sec-ivory:not(.sec-ink)::after,.sec-paper:not(.sec-ink)::after{
      content:"";
      position:absolute;
      inset-block-start:0;
      inset-inline-start:0;
      height:1px;
      width:100%;
      background:linear-gradient(90deg,var(--red-bright),transparent);
      transform-origin:left;
      scale:0 1;
      animation:cpGate linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 60%;
      z-index:2;
      pointer-events:none;
    }
    @keyframes cpGate{ to{ scale:1 1 } }

    /* Kaarten komen op scrollpositie binnen in plaats van op een timer.
       De bestaande .rv blijft de opacity doen; hier alleen de diepte. */
    .prod-slot,.vp-slot,.route,.performer-card{
      animation:cpLift linear both;
      animation-timeline:view();
      animation-range:entry 5% entry 65%;
    }
    @keyframes cpLift{
      from{ translate:0 2.2rem; scale:.985 }
      to  { translate:0 0; scale:1 }
    }
  }
}


/* ==========================================================================
   6. HEADER EN NAVIGATIE
   ========================================================================== */

@media (min-width:901px){

  .head{ transition:transform .45s var(--ease),background .35s linear,box-shadow .35s linear }
  body.cp-scrolled .head{
    background:color-mix(in oklab,var(--paper) 88%,transparent);
    box-shadow:0 1px 0 var(--line),0 18px 40px color-mix(in oklab,var(--ink) 6%,transparent);
  }

  /* Navigatie krijgt één schuivende indicator in plaats van losse hovers. */
  .nav{ position:relative }
  .nav .link{
    position:relative;
    padding-block:6px;
    transition:color .25s var(--ease-lens),letter-spacing .25s var(--ease-lens);
  }
  .nav .link::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:1px;
    background:var(--red);
    scale:0 1;
    transform-origin:right;
    transition:scale .32s var(--ease-lens);
  }
  .nav .link:hover{ color:var(--red-deep); letter-spacing:.02em }
  .nav .link:hover::after{ scale:1 1; transform-origin:left }
  .nav .active::after{ scale:1 1 }

  .nav-cta{ position:relative; overflow:hidden; transition:color .3s var(--ease-lens) }
  .nav-cta::before{
    content:"";
    position:absolute; inset:0;
    background:var(--ink);
    translate:0 101%;
    transition:translate .38s var(--ease-lens);
  }
  .nav-cta:hover{ color:#fff }
  .nav-cta:hover::before{ translate:0 0 }
  .nav-cta > *{ position:relative }

  /* Sneltoetschip. Wordt door het script ingevoegd. */
  .cp-kbd{
    display:inline-flex;
    align-items:center;
    gap:7px;
    height:34px;
    padding:0 12px;
    border:1px solid var(--line);
    border-radius:var(--r-pill);
    background:transparent;
    color:var(--muted);
    font-size:var(--fs-label);
    font-weight:800;
    letter-spacing:var(--track-label);
    cursor:pointer;
    transition:border-color .25s var(--ease-lens),color .25s var(--ease-lens);
  }
  .cp-kbd:hover{ border-color:var(--red); color:var(--red-deep) }
  .cp-kbd kbd{
    font:inherit;
    padding:2px 5px;
    border:1px solid var(--line);
    border-radius:3px;
  }
}


/* ==========================================================================
   7. KNOPPEN — lichtveeg vanaf de cursorpositie
   De knoppen waren correct maar stil. Ze krijgen nu een vulling die vertrekt
   waar je muis de knop raakt, plus een echte ingedrukt-stand.
   ========================================================================== */

@media (hover:hover) and (pointer:fine) and (min-width:901px){

  .btn{ position:relative; overflow:hidden; isolation:isolate }
  .btn::before{
    content:"";
    position:absolute;
    z-index:-1;
    top:var(--cy,50%);
    left:var(--cx,50%);
    width:0; height:0;
    border-radius:50%;
    background:var(--red);
    translate:-50% -50%;
    transition:width .5s var(--ease-lens),height .5s var(--ease-lens);
  }
  .btn-solid::before{ background:var(--red-bright) }
  .btn-line::before{ background:var(--ink) }
  .btn:hover::before{ width:260%; height:900% }
  .btn-line:hover{ color:#fff; border-color:var(--ink) }
  .btn:active{ translate:0 1px }

  .on-dark .btn-solid::before{ background:var(--red-soft) }
  .on-dark .btn-line::before{ background:var(--red) }

  /* Tekstlinks: onderstreping die van links opengaat. */
  .text-link{ position:relative }
  .text-link::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-3px;
    height:1px;
    background:currentColor;
    scale:0 1;
    transform-origin:right;
    transition:scale .3s var(--ease-lens);
  }
  .text-link:hover::after{ scale:1 1; transform-origin:left }
}


/* ==========================================================================
   8. KAARTEN — van blok naar filmframe
   De kanteling en lichtstreek uit V13 blijven. Erbij: hoekmarkeringen die
   opengaan, een productie-index, en een randlijn die oplicht.
   ========================================================================== */

@media (hover:hover) and (pointer:fine) and (min-width:901px){

  .prod,.vp{ transition:transform var(--t-mid) var(--ease-lens),box-shadow var(--t-mid) var(--ease-lens),border-color .3s linear }
  .prod:hover,.vp:hover{ border-color:var(--edge-red) }

  /* Vier hoeken, zoals een kadermarkering op een contactafdruk. */
  .prod-media,.vp-media{ position:relative }
  .prod-media::before,.prod-media::after,
  .vp-media::before,.vp-media::after{
    content:"";
    position:absolute;
    width:18px; height:18px;
    border:1px solid var(--red-soft);
    opacity:0;
    transition:opacity .3s linear,translate .45s var(--ease-lens);
    pointer-events:none;
    z-index:4;
  }
  .prod-media::before,.vp-media::before{
    top:12px; left:12px;
    border-right:0; border-bottom:0;
    translate:6px 6px;
  }
  .prod-media::after,.vp-media::after{
    bottom:12px; right:12px;
    border-left:0; border-top:0;
    translate:-6px -6px;
  }
  .prod:hover .prod-media::before,.prod:hover .prod-media::after,
  .vp:hover .vp-media::before,.vp:hover .vp-media::after{
    opacity:1; translate:0 0;
  }

  /* Prijsregel licht op zodra de kaart actief is. */
  .prod:hover .pricerow b,.vp:hover .pricerow b{ color:var(--red-deep) }
  .pricerow b{ transition:color .3s linear }

  /* De specificatietabel krijgt leven per cel. */
  .info div{ transition:background .25s linear }
  .info div:hover{ background:var(--tint-red) }
}

@media (min-width:901px){
  /* Anti-grid: de tweede kaart in een reeks stapt bewust uit de lijn.
     Subtiel genoeg om niet als fout te lezen, groot genoeg om ritme te maken. */
  .reel .prod-slot:nth-child(2){ margin-inline-start:clamp(1rem,4vw,4.5rem) }
  .reel .prod-slot:nth-child(3){ margin-inline-end:clamp(1rem,3vw,3rem) }
  .reel{ gap:clamp(2rem,4vw,4rem) }
}


/* ==========================================================================
   9. VIDEOFAÇADE — de afspeelknop wordt een lens
   ========================================================================== */

@media (min-width:901px){

  .facade{ position:relative; overflow:hidden }
  .facade-play{ transition:scale .4s var(--ease-lens) }
  .facade::after{
    content:"";
    position:absolute;
    top:50%; left:50%;
    width:96px; height:96px;
    margin:-48px 0 0 -48px;
    border:1px solid var(--red-soft);
    border-radius:50%;
    opacity:0;
    scale:.7;
    transition:opacity .35s linear,scale .5s var(--ease-lens);
    pointer-events:none;
  }
  .facade:hover::after{ opacity:.75; scale:1 }
  .facade:hover .facade-play{ scale:1.08 }

  .facade-tag{
    transition:background .3s linear,color .3s linear;
  }
}


/* ==========================================================================
   10. ZOEKER MET LABEL — de cursor zegt wat er gaat gebeuren
   De V13-zoeker toonde vier hoeken op donkere secties. Die wordt hier
   overgenomen door een versie die ook een woord meedraagt: SPEEL, BESTEL,
   OPEN. Het script schakelt de oude uit.
   ========================================================================== */

body.cp-cursor #finder{ display:none }

.cp-finder{
  position:fixed;
  left:0; top:0;
  z-index:76;
  width:46px; height:46px;
  margin:-23px 0 0 -23px;
  pointer-events:none;
  opacity:0;
  transform:translate3d(-300px,-300px,0);
  transition:opacity .28s linear;
}
.cp-finder.on{ opacity:1 }
.cp-finder i{
  position:absolute;
  width:11px; height:11px;
  border:1.5px solid var(--red);
  transition:translate .35s var(--ease-lens),border-color .3s linear;
}
.cp-finder i:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0 }
.cp-finder i:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0 }
.cp-finder i:nth-child(3){ bottom:0; left:0; border-right:0; border-top:0 }
.cp-finder i:nth-child(4){ bottom:0; right:0; border-left:0; border-top:0 }
.cp-finder::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:3px; height:3px;
  margin:-1.5px 0 0 -1.5px;
  border-radius:50%;
  background:var(--red-bright);
}
.cp-finder em{
  position:absolute;
  top:100%; left:50%;
  margin-top:8px;
  translate:-50% 0;
  padding:4px 9px;
  background:var(--ink);
  color:var(--red-soft);
  font:800 10px/1 "Manrope",sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-style:normal;
  white-space:nowrap;
  opacity:0;
  transition:opacity .22s linear;
}
.cp-finder.label em{ opacity:1 }
/* Bij een actief doel gaat het kader open. */
.cp-finder.label i:nth-child(1){ translate:-7px -7px }
.cp-finder.label i:nth-child(2){ translate:7px -7px }
.cp-finder.label i:nth-child(3){ translate:-7px 7px }
.cp-finder.label i:nth-child(4){ translate:7px 7px }

body.cp-dark .cp-finder i{ border-color:var(--red-soft) }


/* ==========================================================================
   11. FAQ — echte accordeon met vloeiende hoogte
   Native <details>, geen JavaScript. calc-size() lost het oude probleem op
   dat je niet van 0 naar auto kon animeren. Browsers zonder ondersteuning
   krijgen precies het gedrag van nu.
   ========================================================================== */

@media (min-width:901px){

  .faq details{ transition:background .3s linear,padding-inline .3s var(--ease-lens) }
  .faq details:hover{ background:color-mix(in oklab,var(--ink) 2%,transparent) }
  .faq details[open]{ background:color-mix(in oklab,var(--red) 3%,transparent) }
  .faq summary{ padding-inline-start:2.6rem; transition:color .25s linear }
  .faq summary:hover{ color:var(--red-deep) }

  /* Nummering in plaats van niets: de vragenlijst leest als een index. */
  .faq{ counter-reset:cpfaq }
  .faq details{ counter-increment:cpfaq }
  .faq summary::before{
    content:counter(cpfaq,decimal-leading-zero);
    position:absolute;
    left:0;
    top:50%;
    translate:0 -50%;
    font-size:var(--fs-label);
    font-weight:800;
    letter-spacing:.12em;
    color:var(--muted);
    font-variant-numeric:tabular-nums;
    transition:color .25s linear;
  }
  .faq details[open] summary::before{ color:var(--red) }
  .faq .fa-body{ padding-inline-start:2.6rem }

  @supports selector(::details-content){
    .faq details::details-content{
      overflow:clip;
      block-size:0;
      opacity:0;
      transition:
        block-size .45s var(--ease-lens),
        opacity .3s linear,
        content-visibility .45s;
      transition-behavior:allow-discrete;
    }
    .faq details[open]::details-content{
      block-size:auto;
      block-size:calc-size(auto,size);
      opacity:1;
    }
  }
}


/* ==========================================================================
   12. BUNDEL ALS TICKET — het duurste blok mag er ook zo uitzien
   ========================================================================== */

@media (min-width:901px){

  .bundle{
    padding:clamp(2.5rem,4vw,4rem) clamp(2.5rem,5vw,5rem);
    border-color:var(--edge-red);
  }
  /* Perforatie langs boven- en onderrand: het blok leest als een kaartje. */
  .bundle::before{
    content:"";
    position:absolute;
    left:0; right:0; top:0;
    height:8px;
    background-image:repeating-linear-gradient(90deg,
      var(--paper) 0 8px, transparent 8px 20px);
    opacity:.5;
    pointer-events:none;
  }
  .bundle-price{
    padding:1.25rem 1.5rem;
    border:1px solid var(--line-d);
    border-bottom-width:1px;
    background:color-mix(in oklab,var(--white) 4%,transparent);
  }
  .bundle-price b{
    background:linear-gradient(180deg,#fff,var(--red-soft));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .bundle-list li{ transition:padding-left .3s var(--ease-lens) }
  .bundle-list li:hover{ padding-left:28px }
  .bundle-list li::before{ transition:background .3s linear }
  .bundle-list li:hover::before{ background:var(--red-bright) }
}


/* ==========================================================================
   13. FORMULIEREN — de meest genegeerde UI van de site
   ========================================================================== */

@media (min-width:901px){

  .capture-form input[type=email],
  .casting-form input,.casting-form select,.casting-form textarea{
    transition:border-color .25s linear,background .25s linear,box-shadow .25s linear;
  }
  .capture-form input[type=email]:focus,
  .casting-form input:focus,.casting-form select:focus,.casting-form textarea:focus{
    background:var(--white);
    border-color:var(--red);
    box-shadow:0 0 0 3px color-mix(in oklab,var(--red) 12%,transparent);
  }
  /* Ingevuld en geldig: een rustige bevestiging in plaats van niets. */
  .capture-form input[type=email]:valid:not(:placeholder-shown){
    border-color:color-mix(in oklab,var(--red) 40%,transparent);
  }
  .check{ transition:color .2s linear }
  .check:hover{ color:var(--ink) }

  .crow{ transition:padding-left .35s var(--ease-lens),background .3s linear }
  .crow:hover{ padding-left:14px; background:color-mix(in oklab,var(--white) 5%,transparent) }
  .crow span:last-child{ transition:translate .3s var(--ease-lens) }
  .crow:hover span:last-child{ translate:4px -4px }
}


/* ==========================================================================
   14. BESTELRAIL — meer dan een knop
   ========================================================================== */

@media (min-width:901px){

  .orderrail-in{ gap:2.5rem }
  .orderrail-meta{ flex-direction:row; align-items:center; gap:2rem }
  .orderrail-title{ font-size:15px }
  .orderrail::after{
    content:"";
    position:absolute;
    left:0; bottom:0;
    height:2px;
    width:var(--cp-progress,0%);
    background:linear-gradient(90deg,var(--red-deep),var(--red-bright));
    transition:width .12s linear;
  }
}


/* ==========================================================================
   15. COMMANDOPALET — de "nieuwe feature"
   Cmd/Ctrl+K of "/" opent een zoekveld dat door de tien producties én door de
   pagina's zoekt. Verwacht gedrag op een moderne site en het scheelt de
   bezoeker de reis via het menu. Alleen desktop; op mobiel is er niets dat
   erop lijkt en verandert er dus niets.
   ========================================================================== */

.cp-pal{
  position:fixed;
  inset:0;
  z-index:190;
  display:grid;
  place-items:start center;
  padding-top:14vh;
  background:color-mix(in oklab,var(--ink) 72%,transparent);
  backdrop-filter:blur(14px);
  opacity:0;
  visibility:hidden;
  transition:opacity .26s linear,visibility .26s;
}
.cp-pal.on{ opacity:1; visibility:visible }

.cp-pal-card{
  width:min(680px,92vw);
  background:var(--ivory);
  border:1px solid var(--edge-red);
  border-radius:var(--r-1);
  box-shadow:var(--e-3);
  overflow:hidden;
  translate:0 -14px;
  scale:.985;
  transition:translate .38s var(--ease-lens),scale .38s var(--ease-lens);
}
.cp-pal.on .cp-pal-card{ translate:0 0; scale:1 }

.cp-pal-top{
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 20px;
  border-bottom:1px solid var(--line);
}
.cp-pal-top span{
  font-size:var(--fs-label);
  font-weight:800;
  letter-spacing:var(--track-label);
  color:var(--red-deep);
  text-transform:uppercase;
  flex:none;
}
.cp-pal-top input{
  flex:1;
  min-height:64px;
  border:0;
  background:transparent;
  outline:none;
  font-size:var(--fs-lead);
  font-weight:600;
}
.cp-pal-top input::placeholder{ color:var(--muted); font-weight:500 }

.cp-pal-list{
  max-height:min(56vh,460px);
  overflow:auto;
  padding:8px;
  scrollbar-width:thin;
}
.cp-pal-list button{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  width:100%;
  padding:12px 14px;
  border:0;
  border-radius:var(--r-1);
  background:transparent;
  text-align:left;
  cursor:pointer;
  transition:background .16s linear;
}
.cp-pal-list button small{
  font-size:var(--fs-label);
  font-weight:800;
  letter-spacing:var(--track-label);
  color:var(--muted);
  text-transform:uppercase;
  min-width:5.5rem;
}
.cp-pal-list button strong{
  font-size:var(--fs-sm);
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cp-pal-list button i{
  font-style:normal;
  font-size:var(--fs-label);
  font-weight:800;
  color:var(--red-deep);
  font-variant-numeric:tabular-nums;
}
.cp-pal-list button[aria-selected="true"]{ background:var(--tint-red) }
.cp-pal-list button[aria-selected="true"] small{ color:var(--red-deep) }
.cp-pal-empty{
  padding:26px 14px;
  color:var(--muted);
  font-size:var(--fs-sm);
}
.cp-pal-foot{
  display:flex;
  gap:18px;
  padding:12px 20px;
  border-top:1px solid var(--line);
  background:var(--paper);
  font-size:var(--fs-label);
  font-weight:800;
  letter-spacing:var(--track-label);
  color:var(--muted);
  text-transform:uppercase;
}
.cp-pal-foot kbd{
  font:inherit;
  padding:2px 5px;
  border:1px solid var(--line);
  border-radius:3px;
  margin-right:5px;
}
body.cp-pal-open{ overflow:hidden }


/* ==========================================================================
   16. SCROLLBAR — het laatste stukje browserstandaard weg
   ========================================================================== */

@media (min-width:901px){
  html{ scrollbar-color:color-mix(in oklab,var(--red) 55%,transparent) transparent; scrollbar-width:thin }
  ::-webkit-scrollbar{ width:10px; height:10px }
  ::-webkit-scrollbar-track{ background:transparent }
  ::-webkit-scrollbar-thumb{
    background:color-mix(in oklab,var(--ink) 22%,transparent);
    border:3px solid var(--paper);
    border-radius:99px;
  }
  ::-webkit-scrollbar-thumb:hover{ background:var(--red) }
}


/* ==========================================================================
   17. VANGNET — schalen van desktop naar telefoon in hetzelfde tabblad
   Het script draait één keer bij het laden. Verkleint iemand daarna het
   venster, dan zorgen deze regels dat de desktoponderdelen alsnog verdwijnen
   in plaats van in de mobiele layout te blijven hangen.
   ========================================================================== */

@media (max-width:900px){
  .cp-rail,.cp-finder,.cp-kbd{ display:none !important }
  .cp-pal{ display:none !important }
}


/* ==========================================================================
   18. BEWEGING UIT — één plek, geen uitzonderingen
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  .cp-rail,.cp-rail a,.cp-rail a b,
  .cp-finder,.cp-pal,.cp-pal-card,
  .btn::before,.nav .link::after,.nav-cta::before,
  .text-link::after,.facade::after,
  .prod-media::before,.prod-media::after,
  .vp-media::before,.vp-media::after{
    transition:none !important;
    animation:none !important;
  }
  .cp-finder{ display:none !important }
  main > section[id]::before{ animation:none !important; transform:none !important }
  .sec-ivory::after,.sec-paper::after{ animation:none !important; scale:1 1 !important }
  .head-xl,.bundle h2,.capture h2,.hero-title,
  .prod-slot,.vp-slot,.route,.performer-card{
    animation:none !important;
    translate:0 0 !important;
    scale:1 !important;
    letter-spacing:var(--track-disp);
  }
  .faq details::details-content{ transition:none !important }
}