/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Settings, Resets & Variables
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
* {
  margin: 0; padding: 0;
  -webkit-font-smoothing: antialiased;
}

html {
  box-sizing: border-box;
  background-color: white;
}

*, *:before, *:after {
  box-sizing: inherit;
}

div:focus {
  outline: none;
  ie-dummy: expression(this.hideFocus=true);
}

::selection {
  background: #ededed;
  color:#000;
}

::-moz-selection {
  background: #ededed;
  color:#000;
}

a::selection {
  color:#000 !important;
}

a::-moz-selection {
  color:#000 !important;
}

:root {
/* Basics */
  text-rendering: optimizeSpeed;
  
/* Colors */
  --c-black: #080808;
  --c-white: #ffffff;  
  --c-grey: #585756;

  --c-bg-black: #080808;

/* Typography: Weight Definitions */
  --fw-light:      64;
  --fw-sleek:      80;
  --fw-regular:    96;
  --fw-medium:     112;
  --fw-semibold:   128;
  --fw-bold:       144;
  --fw-heavy:      160;
  --fw-black:      200;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Fonts Import
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
@font-face {
  font-family: 'OTR Grotesk';
  src: url('../fonts/MZOTRGroteskVF.woff2') format('woff2 supports variations'),
       url('../fonts/MZOTRGroteskVF.woff2') format('woff2-variations');
  font-weight: 64 200;
  /* Variable settings helper
  Light:      64
  Sleek:      80
  Regular:    96
  Medium:     112
  SemiBold:   128
  Bold:       144
  Heavy:      160
  Black:      200 

  Italic Rage 0 – 1 */
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Site Wrapper
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

body {
  margin: 40px;
  font-family: 'OTR Grotesk';
  font-variation-settings: 'wght' 96;
}
.page-container {
  background-color: white;
}

/* –––––––––– Media Queries –––––––––– */
/* Margins Medium */
@media screen and (max-width:768px) {
  body {
    margin: 24px;
  }
}
/* Margins Small */
@media screen and (max-width:640px) {
  body {
    margin: 16px;
  }
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Layout
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* Variable font at the beginning ((Roger goes here)) */
.presenter-variable {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 40px 40px 40px 40px;
  min-height: 75vh;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none; 
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Variable Sizes  */

.presenter-variable .item {
  display:block;
  -webkit-font-smoothing: antialiased; 
}

/* Init Values 
  font-size: clamp(min(13vh), 13vw, max(40vh));
  line-height: 1em;
  letter-spacing: -0.04em; */

.presenter-variable .size_init { /* OTR Grotesk Initial */
  line-height:1em;
}


.presenter-variable .size_solo {
  font-size: clamp(min(13vh), 32vw, max(64vh));
  line-height: 1em;
  letter-spacing: -0.06em;
 }

.presenter-variable .size_display {
  font-size: clamp(min(13vh), 24vw, max(64vh));
  line-height: 1em;
  letter-spacing: -0.05em;
 }

 .presenter-variable .size_big-big {
  font-size: clamp(min(13vh), 20vw, max(64vh));
  line-height: 1em;
  letter-spacing: -0.05em;
 }

 .presenter-variable .size_multi {
  font-size: clamp(min(4vh), 11vw, max(40vh));
  line-height: 1em;
  letter-spacing: initial;
}

.presenter-variable .size_text-L {
  font-size: clamp(min(4vh), 6vw, max(20vh));
  line-height: 1em;
  letter-spacing: -0.02em;
}

.presenter-variable .size_text-M {
  font-size: clamp(min(2vh), 4.2vw, max(16vh));
  line-height: 1.1em;
  letter-spacing: -0.01em;
}

.presenter-variable .size_text-S {
  font-size: clamp(min(2vh), 3.2vw, max(16vh));
  line-height: 1em;
  letter-spacing: -0.02em;
}

.presenter-variable .size_float {
  font-size: clamp(min(4vh), 4.4vw, max(20vh));
  line-height: 1.1em;
  letter-spacing: -0.03em;
  font-feature-settings: 'ss02';
}

.intro {
  position: relative;
  margin-top: 20vh;
}

/* Flexbox basic layout  */
.l-flex {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.l-flex-row {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  gap: 64px;
  margin-bottom: 80px;
}
/* Flexbox columns  */
.l-flex-col {
  display: flex;
  flex-flow: column;
  flex-basis: 100%;
  flex: 1;
  min-width: 320px;
}

.l-flex-col-64 {
  display: flex;
  flex-flow: column;
  flex-basis: 100%;
  flex: 2;
}

.l-flex-col-80 {
  display: flex;
  flex-flow: column;
  flex-basis: 100%;
  flex: 3;
}

.l-2col-item {width: 50%;}
.l-3col-item {width: 33%;}
.l-4col-item {width: 25%;}
.l-info-img {width: 75%;}


.l-flex-vertical {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  gap: 16px;
}

.img-tiles {
  width: 100%;
}

.v-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* –––––––––– Media Queries –––––––––– */
/* Flexbox small devices */
@media screen and (max-width:768px) {
  .l-flex-col-64, .l-flex-col-80 {
    min-width: 320px;
    }
  .presenter-variable {
    height: 80vh;
  }
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Typetester  ((Roger goes here))
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
.typetester {
  margin: 80px 0;
  display: flex;
  flex-flow: column nowrap;
  gap: 40px;
}
.ctrls {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
.ctrls-left {
  display: flex;
  flex-flow: row nowrap;
  justify-content: start;
  align-items: center;
  column-gap: 16px;
}
.ctrls-right {
  display: flex;
  flex-flow: row nowrap;
  justify-content: start;
  align-items: center;
  column-gap: 16px;
}
.ctrls--slider-container {
  width: 160px;
}
.ctrls--slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 1px; /* Specified height */
  margin: 0px 0px 12px 0px;
  border-radius: 5px;
  background: var(--c-black); /* Grey background */
  outline: none; /* Remove outline */
  opacity: 1; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.ctrls--slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 16px; /* Set a specific slider handle width */
  height: 16px; /* Slider handle height */
  border-radius: 50%;  
  background: var(--c-black); /* Color */
  cursor: pointer; /* Cursor on hover */
}
.ctrls--slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: var(--c-black);
  cursor: pointer;
}
/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

.t-typetester {
  overflow: auto;
  width:100%;
  outline: none;
}

select {
  outline:none;
  border:none;
}

/* –––––––––– Media Queries –––––––––– */
/* Typetester hidden < 1200px */
@media screen and (max-width:1200px) {
  .ctrls-left, .ctrls-right {
    display: none;
  }
  .ctrls {
    justify-content: center;
  }
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Typography
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
#OTR {
  font-family: 'OTR Grotesk';
  font-size: clamp(min(10vh), 16vw, max(40vh));
  line-height: 1em;
  font-variation-settings: "wght" 64;
  font-variation-settings: "ital" 0;
  letter-spacing: -0.04em;
}

.t-label, select {
  font-family: 'OTR Grotesk';
  font-size: 14px;
  font-variation-settings: "wght" 112;
  text-align: center;
}

.t-typetester {
  font-family: 'OTR Grotesk';
  font-size: calc(100vw/4);
  font-variation-settings: "wght" 200;
  font-variation-settings: "ital" 1;
  letter-spacing: -0.06em;
  text-align: center;
}

.t-copy {
  font-family: 'OTR Grotesk';
  font-size: 14px;
  font-variation-settings: "wght" 112;
  margin-bottom: 1em;
}

.t-headline {
  font-family: 'OTR Grotesk';
  font-size: 6vw;
  font-variation-settings: "wght" 114;
  letter-spacing: -0.04em;
  line-height: 1em;
}

.t-caption {
  margin-top: 8px;
  font-family: 'OTR Grotesk';
  font-size: 12px;
  font-variation-settings: "wght" 112;
  letter-spacing: 0.02em;
}

.t-sample {
  font-family: 'OTR Grotesk';
}
.t-sample-center {
  font-family: 'OTR Grotesk';
  text-align: center;
}

/* –––––––––– Media Queries –––––––––– */
/* Typetester mobile */
@media screen and (max-width:1200px) {
  .t-headline {
    font-size: 12vw;
    line-height: 1em;
  }
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Buttons
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
.button {
  margin: 40px 0 40px 0;
  height: fit-content;
  padding: 8px 24px;
  border-radius: 40px;
  border: 2px solid var(--c-black);
  text-align: center;
  text-decoration: none;
  background-color: var(--c-bg-black);
  cursor: pointer;
  color: var(--c-white);
  
  transition: all 0.125s ease-out;
}
.button a {
  color: inherit;
  background-color: var(--c-grey);
  text-decoration: none;
  
}

/* .menu__item_active:hover {color: var(--c-grey);} */
.button:hover {
  color: var(--c-black);
  background-color: var(--c-white);
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Animations  ((not used yet))

.rotate {
  animation: rotation 2s infinite linear;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/