* {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(--main-color); font-family: var(--primary-font); font-weight: var(--font-regular); background: var(--background-color); line-height: var(--line-height-regular);  -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; accent-color: var(--my-pink);}
a {text-decoration: none; color: inherit; }
p a:hover {text-decoration: underline;}
ul {list-style-type: none;}
p {margin-bottom: 1.4em;}
p:last-of-type { margin-bottom: 0;}
br {margin:0; height: 0;}
strong, em { font-style: normal; font-weight: var(--font-regular); }
p strong { font-weight: var(--font-bold); }
p em { font-style: italic;}
fieldset legend { display: none;}
address { font-style: normal;}

:root {
    /* Fonts */
    --primary-font: "FKT Echo SemiCondensed", system-ui, sans-serif;
    --header-font: "FKT Echo SemiCondensed", system-ui, sans-serif;
    --mono-font: "Space Mono", system-ui, sans-serif;

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

    /* Font sizes */
    --font-size-h1: 3rem;
    --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 */  
    --main-color: var(--my-black);
    --background-color: var(--my-white);

    --my-green: #24381D;
    --my-black: #2D292A;
    --my-white: #EFEFEF; 
    --my-pink: #F0C5BA; 

    --odf-pink: #EAA0A5;
    --odf-creme: #F9F4EE;

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

    /* Widths */
    --gutter-side: 2rem;
    --gutter-top: 1rem;
    --max-width: 65rem;
    --max-width-ultra-wide: 150rem;
    --max-width-narrow: 30rem;
    --width: calc(100% - calc(var(--gutter-side) * 2));
    --gap: 4rem; 

    /* Margins */
    --margin: var(--margin-y) auto;
    --margin-y: 2rem; 
    --padding-top: 5rem;
    --btn-padding: var(--btn-padding-block) var(--btn-padding-inline);
    --btn-padding-block: 1.25em;
    --btn-padding-inline: 3.33em;

    /* Transitions */
    --my-ease-out: cubic-bezier(.17,.84,.44,1); 
    --my-ease: cubic-bezier(.79,.14,.15,.86);

    /* Shadows */
    --drop-shadow: 0px 3px 6px 0 rgba(0,0,0,0.16);
    --blur-shadow: 10px 10px 30px 0 rgba(0,0,0,0.16);

    /* Borders */
    --border-radius: 0.5rem; 
    --half-border-radius: calc(var(--border-radius) / 2);
    --btn-border-radius: 0em; 

    /* Logos */
    --logo-width: 5rem; 
}

/* --------------- HEADERS --------------- */
h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6  {font-weight: var(--font-medium); font-family: var(--header-font);  line-height: var(--line-height-small); 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; }
section:first-of-type { padding-top: var(--padding-top); margin-top: 0; }
header, main, footer { max-width: var(--max-width-ultra-wide); width: 100%; margin: 0 auto; position: relative; }
nav#desktop, footer > nav, .container {max-width: var(--max-width); width: var(--width); margin: var(--margin); position: relative; }
section { margin: 0 auto; position: relative; background: var(--background-color); }
section.ultrawide { max-width: var(--max-width-ultra-wide); width: 100%; }
section.narrow { max-width: var(--max-width-narrow); }

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

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

/* 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; }
button,label { cursor: pointer;  user-select: none; }
.btn {  color: var(--my-white); padding: var(--btn-padding); border-radius: var(--btnborder-radius); text-align: center; text-transform: uppercase;   position: relative; transition: padding 333ms ease, background 333ms ease, opacity 500ms ease;}
.btn:hover { padding: calc(var(--btn-padding-block) + .2em) calc(var(--btn-padding-inline) + .4em); background: rgba(255,255,255,0.05); }
.btn::before { content :""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;  border: .1rem solid var(--my-white); 
    --corner-width: .75rem; 
    --neg-corner-width: calc(var(--corner-width) * -1);

    clip-path: polygon(var(--corner-width) var(--neg-corner-width),
     var(--corner-width) var(--corner-width),
     calc(100% - var(--corner-width)) var(--corner-width),
     calc(100% - var(--corner-width)) var(--neg-corner-width),
     calc(100% + var(--corner-width)) var(--neg-corner-width),
     calc(100% + var(--corner-width)) var(--corner-width),
     calc(100% - var(--corner-width)) var(--corner-width),
     calc(100% - var(--corner-width)) calc(100% - var(--corner-width)),
     calc(100% + var(--corner-width)) calc(100% - var(--corner-width)),
     calc(100% + var(--corner-width)) calc(100% + var(--corner-width)),
     calc(100% - var(--corner-width)) calc(100% + var(--corner-width)),
     calc(100% - var(--corner-width)) calc(100% - var(--corner-width)),
     var(--corner-width) calc(100% - var(--corner-width)),
     var(--corner-width) calc(100% + var(--corner-width)),
     var(--neg-corner-width) calc(100% + var(--corner-width)),
     var(--neg-corner-width) calc(100% - var(--corner-width)),
     var(--corner-width) calc(100% - var(--corner-width)),
     var(--corner-width) var(--corner-width),
     var(--neg-corner-width) var(--corner-width),
     var(--neg-corner-width) var(--neg-corner-width));
}


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

/* DESKTOP NAV */
nav#desktop { margin: 0 auto; padding: 0.5rem 0; }
nav#desktop > ul { display: flex; justify-content: flex-end; align-items: center;}
nav#desktop > ul li {position: relative; display: flex; }
nav#desktop > ul li a { display: flex; }
nav#desktop > ul li:is(.active, :hover) > a { text-decoration: underline;}
nav#desktop > ul > li:first-of-type {margin-right: auto; max-width: var(--logo-width); }
nav#desktop > ul > li:not(:first-of-type) {margin-left: 1.5rem; }
nav#desktop > ul > li:not(:first-of-type) > a { padding: var(--link-padding); }
nav#desktop > ul > li:last-of-type > a {padding-right: 0;}

/* MOBILE NAV */
nav#mobile { position: fixed; top: 0; transform: translateX(-100%); transition: 500ms ease; height: 100vh; height: 100dvh; width: 100%; display: flex; flex-direction: column; align-items: center; background: var(--background-color); }
nav#mobile > ul { display: flex;flex-direction: column; height: 100%; margin-top: var(--padding-top); padding: 0 2em; }
nav#mobile > ul > li { display: flex; transition: 500ms ease; }
nav#mobile > ul > li > a { padding: 0.5rem;  }

/* Burger */
input.burger { display: none; }
label.burger { position: absolute; right: var(--gutter-side); top: var(--gutter-top);  width: 1.2rem; height: calc(0.8rem + 3px); transition: 500ms ease;  z-index: 99;  display: none; align-items: center;  }
label.burger::before { content: ""; position: absolute; --_excess: -.25rem;   top: var(--_excess); left: var(--_excess); width: calc(100% + var(--_excess) * -2); height: calc(100% + var(--_excess) * -2);}
label.burger > span { width: 1.2rem; height: 3px; position: absolute; background: var(--main-color); transition: 500ms ease; }
label.burger > span:nth-of-type(2) { transform: translateY(-.4rem); }
label.burger > span:nth-of-type(1) { transform: none }
label.burger > span:nth-of-type(3) { transform: translateY(.4rem); }

/* Burger checked */
input.burger:checked ~ header label.burger { transform: rotate(-180deg)  }
input.burger:checked ~ header label.burger span:nth-of-type(1) { transform: rotate(45deg);}
input.burger:checked ~ header label.burger span:nth-of-type(2) { transform: scaleX(0);}
input.burger:checked ~ header label.burger span:nth-of-type(3) { transform: rotate(-45deg);}
input.burger:checked ~ header nav#mobile { transform: none;  }


/* --------------- FOOTER --------------- */
footer > nav > ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); grid-gap: 1rem;  }
footer > nav > p  { font-size: 0.7rem; margin-top: 1rem; text-align: center;  }
footer > nav > p a { padding: .5em .75em; border-radius: 100vmin; }
footer > nav > p a:hover  { color: var(--odf-creme); background: var(--odf-pink);  text-decoration: none;}

ul.socials { display: flex; align-items: center; gap: 0.2rem; --icon-size: 1.8rem;  }
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; }
ul.socials li svg { width: var(--icon-size); height: var(--icon-size); }


/* --------------- SECTIONS --------------- */
/* =========================================================== */
/* ========================= LANDING ========================= */
/* =========================================================== */
header,footer { display: none; }
section.landing { padding-top: 0;display: flex;flex-direction: column;  height: 100vh; height: 100dvh;  color: var(--my-white); --time: 400ms; --delay: 1; --duration: 1; }
section.landing .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
section.landing :is(.media, .media > *)  { position: absolute; top: 0; left: 0; width: 100%; height: 100%;   object-fit: cover;}
section.landing .media { overflow: hidden;}
section.landing .media > * { filter: blur(.05rem); transform: scale(1.1); transition: filter 500ms ease, transform 1500ms ease;}
section.landing button.start { color: var(--my-white); }
section.landing button.start::before,section.landing button.start span { transition: transform 500ms var(--my-ease-out);}
section.landing button.start span { transform: translate(calc(var(--x, 0) * .3rem), calc(var(--y, 0) * .3rem)); display: block;} 
section.landing button.start::before { transform: translate(calc(var(--x, 0) * .6rem), calc(var(--y, 0) * .6rem));}
section.landing:has(button:hover) .media > * { filter: blur(.1rem); }

section.landing .scene { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;  font-size: var(--font-size-h3);  z-index: 2;  pointer-events: none; gap: 1rem; text-transform: uppercase; padding-bottom: 2rem; }
section.landing .scene span { transition: opacity calc(var(--time) * var(--duration)) var(--my-ease-out) calc(var(--time) / 4), transform calc(var(--time) * var(--duration)) var(--my-ease-out) calc(var(--time) / 4);  opacity: 0;}
section.landing .scene:not(:first-of-type) span ~ span { --time: 250ms;}
section.landing .scene.transform span {  transform: translateY(.5rem);}
section.landing .scene span:first-of-type { transition-delay: calc(var(--time) * var(--delay));}
section.landing .scene span:first-of-type ~ span { transition-delay: 0;}
section.landing .scene[data-len="1"] { font-size: var(--font-size-h1);}

section.landing::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--my-green); z-index: 1;  pointer-events: none; opacity: 0; transition: opacity 250ms ease;}
body { background: var(--my-black); overflow: hidden;}
body:has(section.white), 
section.landing.white::before {  background: var(--my-white); }
section.landing.white { color: var(--my-black);}

section.landing[data-step=words]::before { opacity: 1;}
section.landing .scene.gone  { opacity: 0; transform: none; }
section.landing span.go.go  { opacity: 1; transform: none; }
section.landing .scene:last-of-type span:last-of-type.go  { animation: fadeInOut 1s ease forwards; }

section.landing[data-step=video]::before { animation: turnGreenAndFade 8s ease forwards; }
section.landing[data-step=video] .scenes { opacity: 0; transition: opacity 5s;}
section.landing[data-step=video] .teleprompt { opacity: 1;}
section.landing[data-step=video] .teleprompt .inner { opacity: 1; pointer-events: all;}

body:has(section.landing[data-step=video])  { animation: turnGreen 8s ease forwards; background: var(--my-green); }


@keyframes turnGreenAndFade { 
    0% { background: var(--my-green);  opacity: 1; }
    10% { background: var(--my-green);  opacity: 1; }
    50% { background: var(--my-green); opacity: 1;}
    100% {  opacity: 0;}
}

@keyframes turnGreen { 
    0% { background: var(--my-green);  }
    10% { background: var(--my-green);  }
    50% { background: var(--my-green); }
    100% {  }
}

@keyframes fadeInOut {
    0% { opacity: 0; }
    50% { opacity: 1; }
    60% { opacity: 1; }
    100% { opacity: 0; }
}

section.landing .teleprompt > svg { max-width: 11rem; width: 50vw; height: auto;  position: absolute; top: 0; left: 50%;  --scale: 2.5;  transform: translate(-50%, calc(var(--margin-y) * -1 + 50vh - 100%)) scale(var(--scale));  color: var(--my-green); filter: blur(1rem); pointer-events: none; z-index: 2;  } 
section.landing[data-step=video] .teleprompt > svg  {  animation: logo 6s var(--my-ease) forwards;  }

@keyframes logo { 
    0% { opacity: 0; filter: blur(.2rem); color: var(--my-green);}
    20% { opacity: 1; filter: blur(0rem); color: var(--my-white); }
    75% { transform: translate(-50%, calc(var(--margin-y) * -1 + 50vh - 100%)) scale(var(--scale));  opacity: 1; filter: blur(0rem); color: var(--my-white); }
    100% { transform: translate(-50%, 0); opacity: 1; filter: blur(0rem); color: var(--my-white);}
 }

section.landing .teleprompt { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  font-size: var(--font-size-h4);  line-height: var(--line-height-large);  display: flex; flex-direction: column; align-items: center; padding-top: 5rem; pointer-events: none;  opacity: 0;}
section.landing .teleprompt button { position: sticky; top: 3rem; margin-bottom: 6rem; }
section.landing .teleprompt .inner { mask-image: linear-gradient(transparent 0.5rem,  black 3.5rem, black 50%, transparent); scroll-behavior: smooth;  overflow: auto;  max-width: 30em; margin: 0 auto; padding: 0rem 0 50vh; color: var(--my-white); transition: opacity 500ms var(--my-ease) 4000ms;  opacity: 0; text-align: center; text-transform: none;}

section.landing .teleprompt button.audio { --size: 1.5rem; border: 1px solid var(--my-white);  display: grid; place-items: center; width: var(--size); height: var(--size); border-radius: 50%;  margin-inline: auto;  transition: 250ms;}
section.landing .teleprompt button.audio > span { position: absolute; left: 50%; transform: translate(-50%, -100%);  top: -.25rem;  font-size: 14px;  white-space: nowrap; font-style: italic; color: var(--my-white);  transition: opacity 500ms; }
section.landing .teleprompt button.audio svg { width: .6rem; height: auto; color: inherit; transition: 250ms; }
section.landing .teleprompt button.audio svg path { fill: currentColor; transition: transform 250ms; transform-origin: right;}
section.landing .teleprompt button.audio:hover { background: var(--my-white); color: var(--my-black);}

/* Audio states */
section.landing .teleprompt[data-audio=true] .inner { pointer-events: none;}
section.landing .teleprompt[data-audio=true] button.audio { background: var(--my-white);  color: var(--my-black); pointer-events: all;}
section.landing .teleprompt[data-audio=true] button.audio > span { opacity: 0;}
section.landing .teleprompt[data-audio=false] button.audio svg path:first-of-type { transform: translateX(10%);}
section.landing .teleprompt[data-audio=false] button.audio svg path:last-of-type { transform: scale(0);}

section.landing .teleprompt[data-audio=true] p { opacity: .5; transition: opacity 500ms;}
section.landing .teleprompt[data-audio=true] p span { opacity: 0; font-weight: var(--font-medium); transition: opacity 1000ms ease; }
section.landing .teleprompt[data-audio=true] p span.active { opacity: 1; }
section.landing .teleprompt[data-audio=true] p:has(span.active) { opacity: 1;}

section.landing .teleprompt[data-audio=true] p span.active.has-glitch { animation: flickerInAndGoAway var(--s) ease forwards;}
section.landing .teleprompt[data-audio=true] p span.active.no-glitch { animation: fadeInAndGoAway var(--s) ease forwards;}

@keyframes flickerInAndGoAway { 
  0% {opacity: 0;}
  2.5% {opacity: 0;}
  2.8% {opacity: .5;}
  3.6% {opacity: 0;}
  5.6% {opacity: .5;}
  7% {opacity: 1;}
  80% {opacity: 1;}
  100% {opacity: 0;}

}

@keyframes fadeInAndGoAway { 
    0% {opacity:0;}
    5% {opacity:1;}
    80%  {opacity:1;}
    100%  {opacity:0;}
}



section.landing .cta { position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto;  max-width: 30rem; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2rem; align-items: flex-end;  opacity: 0; transform: translateY(2rem); filter: blur(1rem); pointer-events: none; transition: opacity 1500ms var(--my-ease), transform 1500ms var(--my-ease), filter 1500ms var(--my-ease); color: var(--my-white);}
section.landing .cta p { line-height: var(--line-height-small); font-family: var(--mono-font);  font-size: .8rem; }
section.landing .cta form { display: flex;  align-items: center; }
section.landing .cta form button { position: absolute; right: .33rem; width: 2rem; height: 2rem; padding: .6rem;  border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--my-black); transition: background-color 250ms var(--my-ease);  z-index: 2; }
section.landing .cta form button:hover { background: var(--my-white);}
section.landing .cta input { font-size: var(--font-size-body);  padding: .6em 1.2em .75em;   font-family: var(--mono-font); border-radius: 100vmin;  background: var(--my-pink); width: 100%;  font-size: 18px;  position: relative; z-index: 2; }
section.landing .cta input::placeholder { opacity: 1; color: var(--my-black);}
section.landing .cta .input { position: relative; width: 100%; }
section.landing .cta .input::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background:  var(--my-pink); box-shadow: 0px 0px 5px 2px var(--my-pink); z-index: 1; border-radius: 100vmin;}

section.landing .cta.show {  opacity: 1; transform: none; filter: blur(0rem); pointer-events: all;}


@media only screen and (max-width: 768px) {
    section.landing .scene { flex-direction: column; }
    section.landing .teleprompt { padding-top: 3rem;  font-size: var(--font-size-h6);}
    section.landing .teleprompt > svg { --scale: 1.6; }
    section.landing .teleprompt button.audio { --size: 2.5rem; }
    section.landing .teleprompt button.audio svg { width: .85rem;}
    section.landing .teleprompt .inner { mask-image: linear-gradient(transparent 0.5rem,  black 1rem, black 50%, transparent 80%, transparent); }
    section.landing .cta { grid-template-columns: 1fr; text-align: center; grid-gap: 1rem;}
    section.landing .cta input { font-size: 16px;}
}

/* --------------- 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(--main-color);}
.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  }


/* --------------- 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 { 
        --logo-width: 2.5rem; 
        --gutter-top: 1rem; 
        --gutter-side: 1rem; 
    }
    nav#mobile, .mobile { display: block; }
    label.burger { display: flex; }
    nav#desktop li:not(:first-of-type) { display: none; }
}

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

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

/* --------------- ANIMATIONS --------------- */