* {padding: 0; margin: 0;  border: 0; box-sizing: border-box;}
*::before, *::after { box-sizing: border-box; }
html {font-size: clamp(16px, 1.5vw, 24px); scroll-behavior: smooth; overscroll-behavior: none;  }
body {font-size: var(--font-size-body); color: var(--mainColor); font-family: var(--primaryFont); font-weight: var(--font-regular); background: var(--backgroundColor); line-height: var(--line-height-large);  -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased }
a {text-decoration: none; color: inherit; }
p a:hover {text-decoration: underline;}
ul {list-style-type: none;}
p {margin-bottom: 1.4em;}
br {margin:0; height: 0;}
strong, em { font-style: normal; font-weight: var(--font-regular); }
fieldset legend { display: none;}
address { font-style: normal;}

:root {
    /* Fonts */
    --primaryFont: "Barlow Condensed", system-ui, sans-serif;
    --headerFont: "HWT Artz", system-ui, sans-serif;
    --nameFont: "Bebas Neue", system-ui, sans-serif;

    /* Font weights */
    --font-regular: 400; 
    --font-medium: 500; 
    --font-bold: 700; 

    /* Font sizes */
    --font-size-h1: 2.5rem;
    --font-size-h2: 1.8rem;
    --font-size-h3: 1.6rem;
    --font-size-h4: 1.4rem;
    --font-size-h5: 1.2rem;
    --font-size-h6: 1rem; 
    --font-size-body: 1rem; 

    
    /* Colors */  
    --mainColor: var(--myNavy);
    --backgroundColor: var(--myGrey);
    
    --myOrange: #EAA63A;
    --myBrown: #B5521A;
    --myNavy: #2E3F5F;
    --myBlue: #2455BC;
    --myDarkBlue: #1D4765;
    --myFadedBlue: #5D77C1;
    --myLightBlue: #41B4DD;
    --myGrey: #DFE0DA;
    --myGreen: #7FA829;
    --myYellow: #E7CE61;
    --myPink: #CF6D94;
    --myMagenta: #B34068;
    --myWhite: #FFF;

    --myPinkGradient: linear-gradient(to bottom, var(--myPink), var(--myMagenta));
    --myOrangeGradient: linear-gradient(to bottom, var(--myOrange), var(--myYellow));
    --myBlueGradient: linear-gradient(to bottom, var(--myFadedBlue), var(--myLightBlue));



    --odfPink: #EAA0A5;
    --odfCreme: #F9F4EE;
    
    /* Cursors */
    --cursorDefault: url('/img/cursors/default.svg'), auto;    
    --cursorPointer: url('/img/cursors/pointer.svg') 10 0, auto;    

    /* Line heights */
    --line-height-small: 1;
    --line-height-regular: 1.2;
    --line-height-large: 1.4; 

    /* Widths */
    --gutterSide: 2rem;
    --gutterTop: 1rem;
    --maxWidth: 65rem;
    --maxWidthUltraWide: 150rem;
    --maxWidthNarrow: 45rem;
    --width: calc(100% - calc(var(--gutterSide) * 2));
    --gap: 4rem; 

    /* Margins */
    --margin: var(--margin-y) auto;
    --margin-y: 3rem; 
    --margin-y-quarter: calc(var(--margin-y) / 4); 
    --margin-y-half: calc(var(--margin-y) / 2); 
    --margin-y-double: calc(var(--margin-y) * 2); 
    --margin-y-triple: calc(var(--margin-y) * 3); 
    --margin-y-quad: calc(var(--margin-y) * 4); 
    --paddingTop: 4rem; 
    --btnPadding: 0.5em 1.4em;
    --btnPaddingHeader: 0.4em 1em;

    /* Transitions */
    --myEaseOut: cubic-bezier(.17,.84,.44,1); 
    --myEase: cubic-bezier(0.65, 0.35, 0.35, 1);

    /* Shadows */
    --dropShadow: 0px 3px 6px 0 rgba(0,0,0,0.16);
    --blurShadow: 10px 10px 30px 0 rgba(0,0,0,0.16);

    /* Borders */
    --borderRadius: 1.5rem; 
    --halfBorderRadius: calc(var(--borderRadius) / 2);
    --btnBorderRadius: .5em; 

    /* Logos */
    --logoWidth: 8rem; 
}

/* --------------- HEADERS --------------- */
h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6  {font-weight: var(--font-medium); font-family: var(--headerFont);  line-height: var(--line-height-regular); margin-bottom: 0.5em; }
h1, .h1 {font-size: var(--font-size-h1); } 
h2, .h2 {font-size: var(--font-size-h2); }
h3, .h3 {font-size: var(--font-size-h3);  }
h4, .h4 {font-size: var(--font-size-h4); } 
h5, .h5 {font-size: var(--font-size-h5); } 
h6, .h6 {font-size: var(--font-size-h6); } 

/* --------------- GENERAL --------------- */
body { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; --scheme-primary: var(--mainColor); --scheme-background: var(--backgroundColor); }
section:first-of-type { margin-top: 0; padding-top: var(--paddingTop); }
header, main, footer { max-width: var(--maxWidthUltraWide); width: 100%; margin: 0 auto; position: relative; }
nav#desktop, footer > nav, .container {max-width: var(--maxWidth); width: var(--width); margin: var(--margin); position: relative; }
section { margin: 0 auto; position: relative; background: var(--scheme-background); color: var(--scheme-primary);   display: flex; flex-direction: column; }
section.ultrawide { max-width: var(--maxWidthUltraWide); width: 100%; }
section.narrow, .container.narrow { max-width: var(--maxWidthNarrow); }

/* COLORS */
.orange { --ownColor: var(--myOrange)}
.blue { --ownColor: var(--myBlue)}
.light-blue { --ownColor: var(--myLightBlue)}
.green { --ownColor: var(--myGreen)}
.yellow { --ownColor: var(--myYellow)}
.pink { --ownColor: var(--myPink)}

/* IMAGES */
figure, picture { position: relative;}
picture.abs img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.media, picture { display: flex; }
img,video { width: 100%;  height: auto; }

/* SELECTION */
*::selection { background: var(--mainColor); color: var(--backgroundColor); }

/* NO VISIBLE SCROLLBAR */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; }

/* BUTTONS */
button { all: unset; box-sizing: border-box; margin: 0; padding: 0; border: 0; touch-action: manipulation;  text-align: center; user-select: none;}
.btn { background: var(--myWhite); color: var(--myMagenta); padding: var(--btnPadding); border-radius: var(--btnBorderRadius); text-align: center;   font-family: var(--headerFont); font-weight: var(--font-bold); }
.btn.tickets {  background: var(--myLightBlue); color: var(--myWhite);}
.btn.purple { background: var(--myPinkGradient); color: var(--myWhite); }
.btn.yellow { background: var(--myOrangeGradient); color: var(--myWhite); }

/* Cursors */
body { cursor: var(--cursorDefault); }
a, a *, button, input[type="submit"], input[type="button"], input[type="reset"], label[for] { cursor: var(--cursorPointer); }

/* --------------- COLOR SCHEMES --------------- */
[data-scheme='color'] { 
    --scheme-primary: ;
    --scheme-secondary: ;
    --scheme-background: ;
}

section[data-scheme='color'] + section[data-scheme='color'] .container {  margin-top: var(--margin-y-quarter);}

/* --------------- HEADER --------------- */
header { position: fixed; z-index: 10; --link-padding: .6em;   }
header img, header svg { max-width: 100%;}
nav#mobile, .mobile { display: none;  }

/* DESKTOP NAV */
nav#desktop { margin: 0 auto; padding: 1rem 0; transition: padding 333ms;}
nav#desktop > ul { display: flex; justify-content: flex-end; align-items: center; font-family: var(--headerFont);  gap: .5rem;}
nav#desktop > ul li {position: relative; display: flex; }
nav#desktop > ul li .btn { padding: var(--btnPaddingHeader); }
nav#desktop > ul > li.logo {margin-right: auto; width: var(--logoWidth); transition: width 333ms; transform: translateY(.25rem);  transition: transform 500ms;}
nav#desktop > ul > li.logo a { display: flex; }

nav#desktop ul.sub { font-family: var(--primaryFont); position: absolute; bottom: 0rem; right: 0; transform: translateY(100%); opacity: 0; transition: 333ms;  pointer-events: none; border-radius: var(--halfBorderRadius); display: flex; flex-direction: column; align-items: flex-end; background: var(--myWhite); font-weight: var(--font-medium);  box-shadow: var(--dropShadow); width: calc(100vw - var(--gutterSide) * 2); max-width: 12em; }
nav#desktop ul.sub::before { content: ""; height: .6em; width: .6em; top: 0; transform: translateY(-50%) rotate(45deg); background: var(--myWhite); right: 2em; position: absolute;  }
nav#desktop ul.sub li { width: 100%;  }
nav#desktop ul.sub li:not(:last-of-type, .socials ul.socials li) a { border-bottom: 1px solid rgba(0,0,0,0.054); } 
nav#desktop ul.sub li a { padding:  0.4rem 1rem; width: 100%;  font-weight: var(--font-bold); display: flex; align-items: center; }
nav#desktop ul.sub li.active a::before { content: ""; width: 0.4em; height: 0.4em; background: var(--myOrangeGradient); display: inline-block; margin-right: .5rem; border-radius: 50%;}
nav#desktop ul.sub li:first-of-type a { padding-top: .6rem; border-radius: var(--btnBorderRadius) var(--btnBorderRadius) 0 0;}
nav#desktop ul.sub li:last-of-type a { padding-bottom: .6rem;}

nav#desktop ul.sub li:hover a { background: var(--myOrange10);}

body:has(section.trailer) header:not([data-scrolled=true]) nav#desktop >ul > li.logo { transform: translateY(calc(-100% - 1rem));}
body.loading  nav#desktop > ul > li.logo { transition: 0s;}

/* Burger */
input.burger { display: none; }
label.burger { font-weight: var(--font-regular); }


/* Burger checked */
input.burger:checked ~ header nav#desktop ul.sub.menu,
input#lang:checked ~ ul.sub { opacity: 1; pointer-events: all; transform: translateY(calc(100% + .5rem)); }

/* --------------- FOOTER --------------- */
footer { color: var(--myGrey);  padding-top: 2rem;  background: var(--myGrey);}
footer > nav { display: flex; flex-direction: column; align-items: center;  font-size: .8rem; gap: 1rem;  background: var(--myNavy); border-radius: var(--borderRadius) var(--borderRadius) 0 0; margin: 0 auto; padding: var(--margin-y); max-width: 100%;  width: 100%; }
footer > nav > a img { max-width: 10rem;}

footer > nav > ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; max-width: var(--maxWidth);}
footer > nav > ul.socials {margin-top: -1rem;}
footer > nav > ul.partners {  max-width: var(--maxWidthNarrow); gap: .5rem;  }
footer > nav > ul.partners li { max-width: 3rem; position: relative; }
footer > nav > ul.partners li[data-title]::after { content: attr(data-title); position: absolute; top: -100%; right: 0; opacity: 0; transform: translateY(.5rem); transition: transform 333ms, opacity 333ms;   font-size: 14px; padding: .1rem .2rem;    background: var(--myGrey);  color: var(--myNavy); transition-delay: 0s;}
footer > nav > ul.partners li[data-title]:hover::after {  opacity: 1; transform: none; transition-delay: 500ms;}


footer > nav > ul.legal a:hover { text-decoration: underline;}
footer > nav > ul.legal li:not(:last-of-type)::after { content: "•"; display: inline-block; margin-left: .5rem; }

footer > nav > p   { font-size: 0.7rem; margin-top: 1rem; text-align: center;  width: var(--width);  opacity: .5; transition: opacity 333ms; pointer-events: none;}
footer > nav > p > * { pointer-events: all;}
footer > nav > p:hover { opacity: 1;}
footer > nav > p a { padding: .5em .75em; border-radius: 100vmin; transition: color 333ms, background 333ms;  margin: 0 -.25em; }
footer > nav > p a:hover  { color: var(--odfCreme); background: var(--odfPink);  text-decoration: none;}

ul.socials { display: flex; align-items: center; gap: 0.2rem; --icon-size: 1.2rem;  }
ul.socials li { position: relative; display: flex; justify-content: center; align-items: center;  }
ul.socials li a {width: var(--icon-size); height: var(--icon-size); display: flex; justify-content: flex-start; align-items: center; transition: color 333ms; }
ul.socials li a:hover { color: var(--myYellow);}
ul.socials li svg { width: var(--icon-size); height: var(--icon-size); }



/* =========================================================== */
/* ======================== LIGHTBOX ========================= */
/* =========================================================== */
#lightbox {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.85); z-index: 9999999; line-height: 0; cursor: pointer; display: none;}
#lightbox .img {position: relative; top: 50%;left: 50%;-ms-transform: translateX(-50%) translateY(-50%);-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);max-width: 100%;max-height: 100%;}
#lightbox .img img {opacity: 0; pointer-events: none; width: auto;}
#lightbox span {display: block; position: fixed; bottom: 13px; height: 1.5em; line-height: 1.4em; width: 100%; text-align: center; color: white; text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;  }
#lightbox span {display: none;}
#lightbox .videoWrapperContainer { position: relative;  top: 50%; left: 50%; -ms-transform: translateX(-50%) translateY(-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); max-width: var(--maxWidth); max-height: 100%; width: var(--width);}
#lightbox .videoWrapperContainer .videoWrapper {height: 0;line-height: 0;margin: 0;padding: 0;position: relative;padding-bottom: 41.86%;background: black;} 
#lightbox .videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 0;display: block;}   
#lightbox #prev, #lightbox #next {height: 50px; line-height: 36px; display: none; margin-top: -25px; position: fixed; top: 50%; padding: 0 15px; cursor: pointer; text-decoration: none; z-index: 99; color: white; font-size: 60px;}
#lightbox.gallery #prev, #lightbox.gallery #next {display: block;}
#lightbox #prev {left: 0;}
#lightbox #next {right: 0;}
#lightbox #close {height: 50px; width: 50px; position: fixed; cursor: pointer; text-decoration: none; z-index: 99; right: 0; top: 0;}
#lightbox #close:after, #lightbox #close:before {position: absolute; margin-top: 22px; margin-left: 14px; content: ""; height: 3px; background: white; width: 23px; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg);}
#lightbox #close:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }
#lightbox, #lightbox * { -webkit-user-select: none;  -moz-user-select: none;    -ms-user-select: none;      user-select: none;}

@media screen and (min-width: 1200px) {
    #lightbox .img { max-width: 1200px; }
}
@media screen and (min-height: 1200px) {
    #lightbox .img { max-height: 1200px;}
}



/* --------------- SECTIONS --------------- */

/* =========================================================== */
/* ========================= TRAILER ========================= */
/* =========================================================== */
figure.miss-moxy picture:first-of-type { width: 27.6%; margin: 0 auto;  transform: translate(6.1%, 0rem) scale(0.8); opacity: 0; }
figure.miss-moxy picture:last-of-type { width: 100%; margin: 0 auto;  transform: translateY(calc(-11.5% - 0px)) scale(0.8); opacity: 0;  transition-delay: 100ms; transform-origin: top;}

section.trailer:first-of-type {padding-top: 0; }
section.trailer .container { position: relative; margin: 0 auto;  height: 0; padding-bottom: 41.86%;}
section.trailer .container .inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }

section.trailer > .media { --margin: calc(var(--perc, 1) * 1rem); margin: var(--margin); position: relative;  border-radius: calc(var(--borderRadius) * var(--perc, 1)); overflow: hidden; position: fixed; top: 0; left: 0; width: calc(100% - var(--margin, 1rem) * 2);   pointer-events: none;}
section.trailer > .media::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.16); transition: opacity 500ms;}
section.trailer > .media:has(video.hide)::after  {opacity: 0;}
section.trailer > .media video { position: relative; top: 0; left: 0; width: 100%; height: 100%;   object-fit: cover; transform: scale(calc(1 +  var(--perc-reverse, 1) * .2));}
section.trailer > .media video.hide { opacity: 0; transition: opacity 500ms;}

section.trailer figure { max-width: 30rem; width: 40%;  opacity: 0; transition: transform 800ms ease; transform: translateY(2rem); }
section.trailer figure picture { transition: transform 800ms ease, opacity 800ms ease; transform-origin: bottom;}
section.trailer h1 { margin-bottom: 0; }
section.trailer h2 { color: var(--myWhite); font-family: var(--headerFont); text-transform: uppercase; opacity: 0; transition: opacity 1000ms 600ms; margin-top: -.75em; margin-bottom: 0.2rem;}
section.trailer strong { background: var(--myWhite);  padding: 0.05em 0.8em 0 .8em; display: flex; align-items: center;  border-radius: 100vmin; font-family: var(--nameFont); opacity: 0; transition: opacity 1000ms 700ms;}
section.trailer strong span { color: var(--myMagenta); font-size: 1.2em; font-weight: var(--font-regular); margin: 0 .35em; transform: translateY(-.01em) rotate(4deg) scale(1.2); animation: dayWiggle 4s ease infinite; }
section.trailer .btn {  opacity: 0;  transition: opacity 1000ms 800ms; margin: 2rem auto 2rem;  }


section.trailer figure:not(.activate) { opacity: 1; transform: none; }
section.trailer figure:not(.activate) picture:first-of-type { transform: translateX(6.1%); opacity: 1;  }
section.trailer figure:not(.activate) picture:last-of-type { transform: translateY(-11.5%);  opacity: 1; }

section.trailer figure:not(.activate) ~ :is(h2,strong, .btn) { opacity: 1; }

@media only screen and (max-width: 1024px) {
    section.trailer { height: 30rem;}
    section.trailer > .media { height: 29rem; }
    section.trailer > .container { height: 100%; padding-bottom: 0; }
    section.trailer .btn {margin-bottom: 0;}
    section.trailer h2 { font-size: var(--font-size-h4); margin-top: -.5em;}
    section.trailer figure { width: 80%; max-width: 15rem;}
}


/* =========================================================== */
/* ========================= SUMMARY ========================= */
/* =========================================================== */
section.summary { background: var(--myOrangeGradient); margin-top: 1.5rem; font-size: var(--font-size-h2); font-weight: var(--font-medium);  border-radius: var(--borderRadius) var(--borderRadius) 0 0; }
section.summary .container > *:last-of-type { margin-bottom: 0; }

@media only screen and (max-width: 768px) {
    section.summary { font-size: var(--font-size-h3);}
}

/* =========================================================== */
/* ======================= MOVIE INFO ======================== */
/* =========================================================== */
section.movie-info { background: var(--myYellow); margin-top: -1px; border-radius: 0 0 var(--borderRadius) var(--borderRadius);}
section.movie-info picture img { border-radius: .25rem;}
section.movie-info .container { display: grid; grid-template-columns: .6fr 1fr  auto; grid-gap: var(--gap); align-items: flex-start; }
section.movie-info h2 { color: var(--myMagenta);  font-size: var(--font-size-h4);}
section.movie-info .crew { display: flex; flex-direction: column; gap: 2rem; }
section.movie-info .crew h2 { margin-bottom: 0; }

@media only screen and (max-width: 1024px) {
    section.movie-info .container { grid-template-columns: .75fr 1fr; }
    section.movie-info .crew { flex-direction: row;  justify-content: space-between; grid-column: -1/1; max-width: 30rem; margin: 0 auto;  width: 100%; }
}

@media only screen and (max-width: 500px) {
    section.movie-info .container { grid-template-columns: 1fr; gap: 2rem;}
    section.movie-info .crew {  grid-template-columns: 1fr 1fr; display: grid; }
}




/* =========================================================== */
/* ========================= SHORTS ========================== */
/* =========================================================== */
section.shorts h2 { text-align: center; margin-bottom: .2em;}
section.shorts ul { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: var(--gap);}
section.shorts ul li { border-radius: var(--halfBorderRadius); overflow: hidden;  height: 0; padding-bottom: 177%;  position: relative; }
section.shorts ul li .media { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  isolation: isolate;}
section.shorts ul li .media video { object-fit: cover;}
section.shorts ul li .media::before { content: ""; background: var(--myPinkGradient);position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;  scale: 0.99;}


@media only screen and (max-width: 1024px) {
    section.shorts ul { grid-gap: 2rem;}
}

@media only screen and (max-width: 768px) {
    section.shorts ul { max-width: 100vw; margin-left: calc(var(--gutterSide) * -1); display: flex; overflow: auto; width: 100vw; scroll-snap-type: x mandatory;}
    section.shorts ul::before,section.shorts ul::after { content: ""; width: 1px; height: 1px; opacity: 0; pointer-events: none; flex-shrink: 0;}
    section.shorts ul li { width: 17rem; height: 30rem; padding-bottom: 0;  flex-shrink: 0; scroll-snap-align: center;}
}

/* =========================================================== */
/* ========================= STILLS ========================== */
/* =========================================================== */
section.stills {  background:  var(--myBlueGradient); border-radius: var(--borderRadius); color: var(--myWhite); }
section.stills .container { margin-bottom: 1rem; margin-top: 2rem;   display: flex; justify-content: space-between; align-items: flex-end; }
section.stills .h1 { margin-bottom: 0; }
section.stills .slider { overflow: auto; max-width: 100vw;   margin-bottom: var(--margin-y); scroll-snap-type: x mandatory; scroll-behavior: smooth; }
section.stills ul { display: flex; align-items: flex-start; gap: 1rem;  max-width: var(--maxWidth); margin: 0 auto;  width: var(--width);}
section.stills ul::after { content: ""; width: var(--gutterSide); height: 1px; opacity: 0; pointer-events: none; flex-shrink: 0; }
section.stills ul li { width: 40rem;  flex-shrink: 0; scroll-snap-align: center; max-width: calc(100% - 3rem);}
section.stills ul li img { border-radius: var(--halfBorderRadius);}
section .buttons { display: flex; align-items: center; gap: .5rem;   }
section .buttons button { border-radius: var(--btnBorderRadius); background: var(--myDarkBlue); width: 1.5rem; height: 1.5rem; font-family: var(--primaryFont); transition: background 333ms;}
section .buttons button:hover { background: var(--myOrange);}
section .buttons button span { display: inline-block; transform: translateY(-.05em) scale(0.8); }


/* =========================================================== */
/* ======================= CHARACTERS ======================== */
/* =========================================================== */
section.chars .h1 { text-align: center;}
section.chars ul { display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--gap);  background: rgba(255,255,255,0.4); padding: 2rem; border-radius: var(--borderRadius); }
section.chars ul li { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 1rem;}
section.chars ul li article { margin-top: 2rem; }

section.chars ul li picture img { position: relative; z-index: 2; transform-origin: bottom;  transition: transform 500ms; object-fit: contain;}
section.chars ul li picture::before { content: ""; position: absolute; bottom: 0; left: var(--left, 0%); width: 80%; height: 90%; background: var(--ownColor);   border-radius: 4rem 4rem .25rem .25rem;  transition: border-radius 500ms, transform 500ms;   transform-origin: bottom; }
section.chars ul li picture::after { content: ""; position: absolute; bottom: 0; left: var(--left, 0%); width: 80%; height: 90%; background: linear-gradient(15deg, transparent, white); opacity: .4; border-radius: 4rem 4rem .25rem .25rem;  transition: border-radius 500ms, transform 500ms; transform-origin: bottom;}

section.chars ul li:hover picture::after,section.chars ul li:hover picture::before { border-radius: 1rem; transform: scale(0.95); }
section.chars ul li:hover img { transform: scale(1.15);}

section.chars ul li:nth-of-type(2n+1) { text-align: right; --left: 20%; }
section.chars ul li:nth-of-type(2n+1) figure { order: 2; }

@media only screen and (min-width: 768px) {
    section.chars ul li:nth-of-type(2n+1):last-of-type { grid-column: -1/1; max-width: calc(var(--maxWidth) / 2 - var(--gap)); margin-inline: auto;  }
}

@media only screen and (max-width: 768px) {
    section.chars ul { grid-template-columns: 1fr; max-width: 30rem; margin: 0 auto; padding: 1rem; grid-gap: 1rem; } 
    section.chars ul li { grid-template-columns: .8fr 1fr;}
    section.chars ul li h2 { margin-bottom: 0;}
    section.chars ul li:nth-of-type(2n+1) {  grid-template-columns: 1fr .8fr;}
}



/* =========================================================== */
/* ========================= AGENDA ========================== */
/* =========================================================== */
section.agenda .container { margin-bottom: 2rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 0 1rem;}
section.agenda .md { max-width: 25rem;  }
section.agenda .md p:last-of-type { margin-bottom: 0; }
section.agenda .buttons button {  background: var(--myOrange);  color: var(--myWhite);}
section.agenda .buttons button:hover { background: var(--myMagenta);}
section.agenda .slider { overflow: auto; max-width: 100vw; scroll-snap-type: x mandatory; padding: 2rem 0; margin: -2rem 0; scroll-behavior: smooth;}
section.agenda .slider > ul { display: flex; margin: 0 auto; max-width: var(--maxWidth); width: var(--width);  gap: 1rem;}
section.agenda .slider > ul::after { content: ""; width: var(--gutterSide); height: 1px; opacity: 0; pointer-events: none; flex-shrink: 0; }

li.agendacard { width: 18rem; background: var(--myOrange);  color: var(--myWhite); padding: 1.5rem; display: flex; flex-direction: column; position: relative;  transition: background 250ms, box-shadow 250ms; box-shadow: 0px 0px 0px rgba(0,0,0,0); pointer-events: all; flex-shrink: 0; scroll-snap-align: center; border-radius: var(--halfBorderRadius);}
li.agendacard > strong.h2 { margin-bottom: 0; }
li.agendacard > span { text-transform: uppercase;   margin-bottom: 3.5rem; }
li.agendacard > h3 { margin: .25rem 0 1em; }
li.agendacard > .star  { width: 1.8rem; height: 1.8rem; background: var(--myMagenta); padding: 0.4rem; display: grid; place-items: center; border-radius: 50%;  position: absolute; left: -.25rem; top: -.25rem }
li.agendacard > ul { display: flex; flex-direction: column; gap: .25rem;  margin-top: auto; }
li.agendacard > ul > li { display: flex; align-items: center;   gap: .25rem; font-size: .8rem;}
li.agendacard > ul > li > svg { width: .9rem; height: auto; color: var(--myWhite); margin-top: .05em; }  

/* Upcoming */
li.agendacard.first::after { content: ""; position: absolute; right: 1rem; top: -.1rem; height: 4rem; background: var(--myMagenta); border-radius: .1rem .1rem ;  width: 2rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);}

/* Geweest */
li.agendacard[data-old=true] { box-shadow: none;}
li.agendacard[data-old=true]::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--myNavy); opacity: .4; transition: opacity 250ms;  border-radius: var(--halfBorderRadius);}
li.agendacard[data-old=true]:hover::after { opacity: 0;  }


/* =========================================================== */
/* =================== ABOUT THE CREATORS ==================== */
/* =========================================================== */
section.creators { background: var(--myOrangeGradient); border-radius: var(--borderRadius); }
section.creators .container > ul { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 2rem; }

li.creatorcard img { border-radius: var(--halfBorderRadius);}
li.creatorcard h3 { margin: 0.5rem 0 0;}
li.creatorcard p a { text-decoration: underline; }
li.creatorcard p a:hover { color: var(--myPink);}
li.creatorcard figcaption { padding: .2em .5em; background: var(--myWhite); color: var(--myMagenta); font-weight: var(--font-medium); border-radius: .25em; position: absolute; bottom: var(--halfBorderRadius); left: var(--halfBorderRadius); font-size: 1rem; }  
li.creatorcard { font-size: .9rem;}



@media only screen and (max-width: 1024px) {
    section.creators .container { max-width: var(--maxWidthNarrow); }
    section.creators .container > ul { grid-template-columns: 1fr 1fr; }
}

@media only screen and (max-width: 550px) {
    section.creators .container { max-width: 25rem;}
    section.creators .container > ul { grid-template-columns: 1fr;}
}

/* =========================================================== */
/* ======================= STEMACTEURS ======================= */
/* =========================================================== */
section.actors .h1 { text-align: center;  color: var(--myMagenta); }
section.actors ul.list { display: flex; flex-direction: column; gap: 2rem; }
section.actors ul.list > li { display: flex;  background: rgba(255,255,255,0.4); border-radius: var(--borderRadius);  padding: 2rem;  gap: var(--gap); width: var(--width);  max-width: calc(var(--maxWidth) - 9rem);}
section.actors ul.list > li:nth-of-type(2n+2) { margin-left: auto; }
section.actors ul.list > li h3 span { padding: .2em .4em .1em;  border-radius: .25em; display: inline-block;  transition: padding 333ms, transform 333ms, background 333ms, color 333ms; user-select: none; }
section.actors ul.list > li h3 span:first-of-type { background: var(--myWhite); color: var(--myMagenta); }
section.actors ul.list > li h3 span:last-of-type { transform: translateX(-.4em);   cursor: var(--cursorPointer);}

section.actors figure { display: flex; padding-bottom: 39%; width: 25rem; flex-shrink: 0;}
section.actors figure img { border-radius: var(--halfBorderRadius); }
section.actors figure picture { width: 60%; transition: transform 500ms, opacity 500ms; --r: 80deg; --y: -20%;   position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(calc(var(--r) * -1)) translateY(var(--y)) rotate(var(--r));}
section.actors figure picture:first-of-type { cursor: var(--cursorPointer);}
section.actors figure picture:nth-of-type(2) { opacity: 0; z-index: 2;  pointer-events: none;}
section.actors figure picture:last-of-type { --y: 20%;  }
section.actors .md { display: flex; flex-direction: column; align-items: flex-start; }
section.actors .btn { margin-top: auto; font-size: .8rem; padding: .25em .7em .2em; transition: color 333ms, background 333ms, transform 333ms; }
section.actors .btn:hover { background: var(--myMagenta); color: var(--myWhite);}

section.actors ul.list > li.switch figure picture { --r: 260deg  }
section.actors ul.list > li.switch figure picture:nth-of-type(2) { opacity: 1; pointer-events: all; }
section.actors ul.list > li.switch figure picture:last-of-type { cursor: var(--cursorPointer); }
section.actors ul.list > li.switch figure picture:first-of-type { cursor: var(--cursorDefault); }
section.actors ul.list > li.switch h3 span:first-of-type { background: none; color: var(--myNavy); padding-right: 0; cursor: var(--cursorPointer); }
section.actors ul.list > li.switch h3 span:last-of-type { background: var(--myWhite); color: var(--myMagenta); transform: none; cursor: var(--cursorDefault); }
section.actors ul.list > li.switch .btn { transform: rotate(180deg);}


@media only screen and (max-width: 1024px) {
    section.actors figure { width: 20rem; }
}

@media only screen and (max-width: 950px) {
    section.actors figure { padding-bottom: 80%; width: 100%; }
    section.actors ul.list { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1rem;}
    section.actors ul.list > li { flex-direction: column; grid-gap: 1rem;  width: 100%; }
    section.actors ul.list > li .btn { order: -1; margin: -1rem 0 1rem;}
    section.actors ul.list > li h3.h2 { font-size: var(--font-size-h4);}
}

@media only screen and (max-width: 840px) {
    section.actors ul.list { grid-template-columns: 1fr;  max-width: 30rem; margin: 0 auto; }
    section.actors ul.list > li { padding: 1.5rem 1rem; }
}

/* --------------- PROSE CONTENT --------------- */
.prose > * + * { margin: 1.5em 0 0;}
.prose img,  .prose iframe { width: 100%; } 
.prose ul, .prose ul ul ul { list-style: disc;}
.prose ul ul,.prose ul ul ul ul { list-style: circle; }
.prose :is(ol,ul)  { padding-left: 1em;}
.prose :is(ol,ul) :is(ol,ul) { margin: .5em 0; }
.prose blockquote { position: relative; font-style: italic; font-size: 1.5rem; padding-left: .8em; border-left: .25rem solid var(--mainColor);}
.prose > * strong { --font-weight: var(--font-bold); }
.prose > * em { font-style: italic; }
.prose a:not(.btn) { text-decoration: underline; }
.prose code { font-family: monospace; background: #ddd; padding: .2rem; }
.prose :is(h1,h2,h3,h4) + :is(h1,h2,h3,h4) { margin-top: .2em;}


/* --------------- 404 PAGE --------------- */
section.not-found { display: flex; flex-direction: column; align-items: center; min-height: 40vh;  justify-content: center; }


/* --------------- COOKIE BANNER COLORS --------------- */
section.odf__cookies.odf__cookies { 
    --odf_main_color: black;
    --odf_background_color: white; 
    --odf_highlight_color: maroon; 
}


/* --------------- MEDIA QUERIES --------------- */
/* MIN */


/* MAX */
@media only screen and (max-width: 768px) {
    :root { 
        --gutterTop: 1rem; 
        --gutterSide: 1rem; 
    }
    nav#mobile, .mobile { display: block; }
    label.burger { display: flex; }
}

@media only screen and (max-width: 350px) {
    html { font-size: 4.575vw;}
}

/* --------------- REDUCED MOTION --------------- */
@media (prefers-reduced-motion) { }
  

/* --------------- ANIMATIONS --------------- */
@keyframes dayWiggle { 
    0% {  transform: translateY(-.01em) rotate(4deg) scale(1.2); }
    50% {  transform: translateY(-.01em) rotate(-4deg) scale(1.3); }
    100% {  transform: translateY(-.01em) rotate(4deg) scale(1.2); }
}