/* Fonts */

@font-face {
  font-display: swap;
  font-family: "TellingSourceSans";
  font-weight: 200 900;
  font-style: normal;
  src: url("/assets/fnt/SourceSans3VF-Upright.otf.woff2") format('woff2-variations');
}

@font-face {
  font-display: swap;
  font-family: "TellingSourceSans";
  font-weight: 200 900;
  font-style: italic;
  src: url("/assets/fnt/SourceSans3VF-Italic.otf.woff2") format('woff2-variations');
}

@font-face {
  font-display: swap;
  font-family: "TellingSourceSerif";
  font-weight: 200 900;
  font-style: normal;
  font-optical-sizing: 8;
  src: url("/assets/fnt/SourceSerif4Variable-Roman.otf.woff2") format('woff2-variations');
}

@font-face {
  font-display: swap;
  font-family: "TellingSourceSerif";
  font-weight: 200 900;
  font-style: italic;
  font-optical-sizing: 8;
  src: url("/assets/fnt/SourceSerif4Variable-Italic.otf.woff2") format('woff2-variations');
}

@font-face {
  font-display: swap;
  font-family: "TellingRightSans";
  src: url("/assets/fnt/PPRightSans-TightMedium.woff2") format("woff2");
}

/* Global */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Brand Colors */
  --darkFantasy: #002428;
  --deepPurple: #33123D;
  --blueMonday: #B4F8FF;
  --pinkFloyd: #E89AFF;
  --greenDay: #00FF4B;
  --purplePils: #7A00FF;
  --white: #fff;

  --blueMondayTransparent: #B4F8FF10;
  --blueMondaySemiTransparent: #B4F8FF75;

  /* Tokens */
  font-family: "TellingSourceSerif", "Lucida Grande", sans-serif;
  letter-spacing: 0.015em;
  line-height: 1.5;
  --colorBackground: var(--darkFantasy);
  --colorText: var(--blueMonday);
  --colorLink: var(--blueMonday);
  --colorHover: var(--white);
  --fontSizeHeadline: 2.5rem;
  --backgroundUnderline: linear-gradient(to top, transparent, transparent 0.1em, currentColor 0.1em, currentColor calc(0.1em + 0.5px), transparent calc(0.1em + 0.5px));
  --backgroundUnderlineHover: linear-gradient(to top, transparent, transparent 0.1em, currentColor 0.1em, currentColor calc(0.1em + 1px), transparent calc(0.1em + 1px));
}

::selection {
  color: var(--colorBackground);
  background-color: var(--colorText);
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  background-color: var(--colorBackground);
  color: var(--colorText);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

p {
  font-family: "TellingSourceSerif";
  font-size: 1rem;
  font-weight: 400;
  line-height: 150%;
}

h1 {
  font-family: "TellingRightSans";
  font-size: 5rem;
  letter-spacing: 0.005em;
  line-height: 1;
  font-weight: normal;
  margin-bottom: 1rem;
}

h2 {
  font-family: "TellingSourceSans";
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.1;
}

h3 {
  font-family: "TellingSourceSans";
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.3;
}

h4, h5, h6 {
  font-family: "TellingSourceSans";
  font-size: 1.3rem;
  font-weight: 500;
  font-variant: all-small-caps;
  font-style: normal !important;
  letter-spacing: 0.06rem;
}

small {
  font-size: 0.9rem;
  font-style: italic;
  opacity: 0.5;
}

a {
  color: var(--colorLink);
  text-decoration: none;
}

.tagline {
  font-family: "TellingSourceSans";
  font-size: 1.3rem;
  font-variant: all-small-caps;
  letter-spacing: 0.06rem;
  line-height: 100%;
}

.tagline_small {
  font-family: "TellingSourceSans";
  font-size: 1.1rem;
  font-variant: all-small-caps;
  letter-spacing: 0.05rem;
  line-height: 100%;
}

blockquote {
  font-style: italic;
  padding-left: 1rem;
  border-left: solid 1px var(--colorText);
}

hr {
  margin-top: 3rem;
  border-color: var(--colorText)
}

@media (max-width: 740px) {
  h1 {
    font-size: 4.5rem;
  }
  h2 {
    font-size: 2.5rem;
  }
  h3 {
    font-size: 1.8rem;
  }
}


/* Tags Block */

.tags ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;

  opacity: 0.8;
}

.tag,
.tags ul li {
  height: 2rem;
  padding: 0 0.75rem;
  display: flex;
  align-items: center;
  margin: 0 !important;
  border-radius: 1rem;
  border: 1px solid var(--colorText);
  font-style: italic;
}

.tags ul {
  padding: 0 !important;
}

.tags ul li::before {
 content: none !important;
}



/* Button */

button,
button.secondary:hover {
  height: 2rem;
  border-radius: 50vh;
  background-color: var(--colorText);
  border: 1px solid var(--colorText);
  display: flex;
  justify-content: center;
  align-items: center;

  cursor: pointer;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  transition: background-color 0.3s ease-out;
}
button *,
button.secondary:hover * {
  font-family: "TellingSourceSans";
  font-size: 0.9rem;
  line-height: 1;
  font-weight: bold;
  color: var(--darkFantasy) !important;
  transition: background-color 0.3s ease-out;
}

button a {
  flex-grow: 1;
  padding: 0 1rem 0 1rem;

  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 0.4rem;
}

button:hover {
  transition: none !important;
}
button:hover * {
  transition: none !important;
}

button:active {
  opacity: 0.8;
}

button.secondary,
button:hover {
  background-color: #ffffff10;
}
button.secondary,
button.secondary *,
button:hover * {
  color: var(--colorText) !important;
}

.button-icon {
  aspect-ratio: 1 / 1;
}

button.inactive {
  opacity: 0.35;
  cursor: not-allowed !important;
}


/* Button Inverted */

button.invert,
button.secondary.invert:hover {
  background-color: var(--darkFantasy);
}
button.invert *,
button.secondary.invert:hover * {
  color: var(--blueMonday) !important;
}

button.secondary.invert,
button.invert:hover {
  background-color: #00000001;
  border-color: var(--darkFantasy);
}
button.secondary.invert *,
button.invert:hover * {
  color: var(--darkFantasy) !important;
}


/* Input */

input {
  height: 2rem;
  border-radius: 50vh;
  padding: 0 1rem 0 1rem;
  background-color: var(--blueMondayTransparent);
  border: 1px solid var(--blueMondaySemiTransparent);
  color: var(--colorText);
}

input::placeholder {
  color: var(--blueMondaySemiTransparent);
}

input:focus {
  outline: none;
  border: 1px solid var(--colorText);
}




a:hover,
a:focus {
  color: var(--colorHover);
}

.wrapper {
  flex: 1 1 auto;
  /* border-top: 2px solid var(--colorText); */
}

/* .wrapper::before {
  content: "";
  display: block;
  height: 3px;
  object-fit: cover;
  background: url(../img/bg.jpg);
  background-size: cover;
} */

.container {
  max-width: 60rem;
  margin: 8rem auto 4rem auto;
  padding: 2rem;
  position: relative;
}

@media (max-width: 640px) {
  .container {
    padding: 1rem;
  }
}


/* Top Navigation */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #17343F80;
  backdrop-filter: blur(25px);

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 0 5vw 0 5vw;
  height: 5rem;
}

.logo-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  transition: opacity 0.2s ease-in-out, height 0.15s ease-in-out;
}

.logo {
  display: flex;
  height: 2rem;
  display: block;
}

.logo a, .logo a img {
  height: 100%;
}

.slogan {
  flex: 1 0 auto;
  font-family: "TellingSourceSerif";
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

@-moz-document url-prefix() {
  .slogan {
    font-weight: 550;
  }
}

@media (max-width: 740px) {
  .slogan {
    opacity: 0.5;
    margin-bottom: 2rem;
  }
}

.nav-header {
  flex: 1 0 auto;
  display: flex;
  justify-content: flex-end;
  font-family: "TellingSourceSerif";
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  z-index: 100;
}

.nav-header__list {
  list-style-type: none;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-header__link.is-active {
  border-bottom: 1.5px solid var(--colorLink);
  padding-bottom: 0.2em;
}

/* .link-home {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.05);
  padding: .2rem .75rem;
  border-radius: 5px;
  margin-bottom: 2rem;
  position: absolute;
  right: 100%;
  white-space: nowrap;
}

.link-home::before {
  content: "← ";
}

@media (max-width: 800px) {
  .link-home {
    position: unset;
    right: unset;
  }
} */


/* Side Navigation */

.side-nav {
  z-index: 10000;
  position: fixed;
  top: 8rem;
  left: calc(5vw + 0.1rem);

  opacity: 0;
  transition: opacity 0.2s ease-in-out;

  font-family: "TellingSourceSans";
}

.side-nav.show {
  opacity: 1;
}

.side-nav a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.4rem 1rem;
  color: var(--colorText);
  border-left: 2px solid var(--blueMondayTransparent);
}

.side-nav a.active {
  color: var(--pinkFloyd);
  border-left: 2px solid var(--pinkFloyd);
}

@media (max-width: 1400px) {
  .side-nav {
    display: none;
  }
}


/* Language Switch */

.languages {
  position: absolute;
  top: 2rem;
  left: 4rem;

  display: flex;
  flex-direction: row-reverse;

  z-index: 1000;
}

.languages a,
.languages--footer a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.1rem;
  width: 2.1rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;

  font-family: "TellingSourceSans";
  font-size: 1.1rem;
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  text-align: center;
  padding-bottom: 0.15rem;
}

.languages a.active,
.languages--footer a.active {
  border: 1px solid var(--blueMonday);
  background-color: var(--blueMondayTransparent);
}

.languages--footer {
  display: none;
  margin-bottom: 1rem;
}

@media (max-width: 740px) {
  .languages {
    display: none;
  }
  .languages--footer {
    display: flex;
    flex-direction: row-reverse;
  }
}


/* Landing Page */

.landing-page {
  margin: calc(50vh - 254px) 0 calc(50vh - 160px) 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.landing-page__logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3rem;
}
.landing-page__logo img {
  width: 28%;
}

.landing-page__slogan {
  flex-grow: 1;

  display: flex;
  flex-direction: row;
  gap: 0.6rem;

  font-family: "TellingSourceSerif";
  font-weight: 600;
  font-size: 1.5rem;
}

@-moz-document url-prefix() {
  .landing-page__slogan {
    font-weight: 550;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.slogan-item {
  animation: fadeIn 1s;
  color: var(--pinkFloyd);
}


@media (max-width: 740px) {
  .landing-page {
    margin: calc(50vh - 300px) 0 calc(50vh - 250px) 0;
  }
  .landing-page__logo {
    flex-direction: column;
  }
  .landing-page__logo img {
    width: 10rem;
  }
  .landing-page__slogan {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
}

.button-row {
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
  margin-bottom: 4rem;
}

.button-row.center {
  justify-content: center;
} 


/* Challenges */

.challenges {
  padding: 10rem 0 4rem 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.challenges_inner {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 1.5rem;
}
.challenges_inner > div {
  display: flex;
  flex-direction: column;
  flex: 1;
  border-radius: 0.25rem;
  overflow: hidden;
}

.challenge__top {
  display: flex;
  height: 6.25rem;
  width: 100%;
  padding: 1.5rem 1rem;
  border-bottom: 0.25rem solid;

  font-size: 1.125rem;
  font-weight: 650;
  line-height: 125%;
  letter-spacing: 0.01rem;
}
.challenge__top span {
  padding-right: 0.9rem;
  font-family: "TellingRightSans";
  font-size: 3.1rem;
  font-weight: 470;
  line-height: 95%;
}

.challenge__bottom {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  gap: 0.75rem;
  padding: 1.5rem 1rem;
  background-color: var(--blueMondayTransparent);
}

@media (max-width: 900px) {
  .challenges_inner {
    flex-direction: column;
  }
}


/* Projects */

.projects-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;

  padding: 10rem 0 4rem 0;
}

.projects {
  height: 42rem;
  width: 108%;
  display: flex;
  overflow: visible;
}

.project__slide {
  height: 100%;
  min-width: calc(100% - 8%);
  margin-right: 8%;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--blueMondayTransparent) !important;

  transition: opacity 0.4s ease-out, transform 0.5s ease;

  display: flex;
  flex-direction: column;
}

.project__slide__cover {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 100%;
}

.project__slide__cover img,
.project__slide__cover video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.project__slide__cover span {
position: absolute;
bottom: 0.25rem;
right: 0.5rem;
color: var(--darkFantasy);
font-size: 0.6rem;
letter-spacing: 0.05em;
opacity: 50%;
}

.project__slide__caption {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.project__slide__caption__tags {
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  text-transform: lowercase;
  font-variant: small-caps;
  letter-spacing: 0.04rem;
}

@media (max-width: 740px) {
  .projects {
    height: 36rem;
  }
}


/* Quotes */

.quotes {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.quote-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 2rem;
}

.quote {
  flex-shrink: 0;

  display: flex;
  flex-direction: column;
  gap: 1rem;

  width: 20rem;
  padding-left: 1.2rem;  
  border-left: 2px solid var(--colorText);

  transition: transform 0.5s ease, opacity 0.5s ease-out;
}

.quote p {
  font-weight: 400;
  font-style: italic;
}

.quote__author {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

.quote__author-container {
  width: 100%;
  display: flex;
  flex-direction: row;

  line-height: 1.25;
}

.quote__author-name {
  width: fit-content;
}

.quote__author-position {
  font-weight: 400;
  font-style: italic;
  opacity: 0.5;
  width: fit-content;
}

.quote__author-symbol {
  font-size: 1.5rem;
  font-weight: 200;
  line-height: 1.1rem;
  opacity: 0.5;
  width: fit-content;
  padding: 0 0.25rem;

  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.quote svg {
  opacity: 0.5;
  margin-top: 0.3rem;
}


/* Client Logo Row */

.client-logo__container {
  padding: 2rem 0 4rem 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  overflow: hidden;
}

.client-logo__inner {
  display: flex;
  animation: scrollLogos linear infinite;
  animation-duration: 40s;
  height: 2.5rem;
}

@keyframes scrollLogos {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-50%);
  }
}

.client-logo {
  height: 100%;
  padding: 0 3rem;
  opacity: 0.65;
}
.client-logo svg path {
  fill: currentColor;
}

@media (max-width: 970px) {
  .client-logo__container {
    overflow: visible;
  }
}

@media (max-width: 570px) {
  .client-logo {
    padding: 0 2rem;
  }
}


/* Offer */

.offers {
  padding: 10rem 0 4rem 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.offers__introduction {
  margin-top: 1.5rem;
}

.offer-row {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
}

.offer {
  flex: 1;

  display: flex;
  flex-direction: column;

  backdrop-filter: blur(100px);
  border-radius: 0.25rem;
  overflow: hidden;
}

.offer__top {
  display: flex;
  height: 6.25rem;
  width: 100%;
  padding: 1.5rem 1rem;
  border-bottom: 0.25rem solid;

  font-family: "TellingSourceSerif";
  font-size: 1.125rem;
  font-weight: 650;
  line-height: 125%;
  letter-spacing: 0.01rem;
}

.offer__bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;

  padding: 1.5rem 1rem;
  background-color: var(--blueMondayTransparent);
}

.offer__bottom h4 {
  color: var(--colorText);
}

.offer__bottom > div:first-of-type {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  color: var(--colorText);
}
.offer__bottom > div:first-of-type ul li::before{
  content: "·";
  padding-right: 0.4rem;
}
.offer__bottom > div:first-of-type ul li{
  list-style: none;
}

.offer__bottom > div:last-of-type {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.offer__budget {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0rem !important;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--colorText);
}

.offer__bottom small {
  color: var(--colorText);
}

.offer__bottom > svg [fill] {
  fill: currentColor;
}
.offer__bottom > svg [stroke] {
  stroke: currentColor;
}

.offer__bottom button {
  color: currentColor !important;
  border: 1px solid currentColor;
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}
.offer__bottom button a {
  color: currentColor !important;
}
.offer__bottom > button > a > svg > path {
  color: currentColor !important;
}
.offer__bottom > button > a > svg > path:hover {
  stroke: var(--colorBackground) !important;
}

@media (max-width: 900px) {
  .offer-row {
    flex-direction: column;
  }
}


/* People */

.people {
  padding: 10rem 0 4rem 0;
  display: flex;
  align-items: stretch;
}

.people__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.people__text p {
  max-width: 32rem;
}

.people__image {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.people__image > div {
  width: 100%;
  height: 100%;
  display: flex;
}

.people__image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: opacity 1s ease-in-out;
  opacity: 0;

  filter: grayscale(100%) sepia(100%) hue-rotate(160deg) saturate(50%) contrast(85%);

  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  pointer-events: none;
}
.people__image img.active {
  opacity: 1;
}

.people__label {
  display: flex;
  flex-direction: column;
  text-align: right;
}

.people__name {
  font-family: "TellingSourceSerif";
  font-weight: 600;
  letter-spacing: 0.025rem;
}

.people__position {
  font-family: "TellingSourceSerif";
  font-style: italic;
  opacity: 0.5;
}

.person {
  position: relative;
  display: inline-block;
}

.rectangle {
  position: absolute;
  background-color: var(--blueMonday);
  transform-origin: center;
  opacity: 0; /* Start with rectangles hidden */
  transition: opacity 1s ease-in-out;
}

.people__image h5 {
  margin-top: 0.75rem;
}

@media (max-width: 740px) {
  .people {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  .people__image {
    width: 50%;
  }
  .people__image h5 {
    text-align: center;
  }
}


/* FAQ */

.faq {
  padding: 10rem 0 4rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  display: flex;
  flex-direction: column;
  background-color: var(--blueMondayTransparent);
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: border 0.2s ease;

  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.faq-item:hover {
  background-color: #B4F8FF20;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;

  font-family: "TellingSourceSerif";
  font-size: 1.125rem;
  font-weight: 650;
  line-height: 125%;
  letter-spacing: 0.01rem;
}
.faq-question > span:first-of-type{
  padding-right: 2rem;
}


.chevron {
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-left: 2.5px solid var(--colorText);
  border-bottom: 2.5px solid var(--colorText);
  transform: rotate(45deg);

  transition: transform 0.3s;
}

.faq-answer {
  width: 100% !important;
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-right: 1rem;
  transition: max-height 0.2s ease, padding 0.3s ease;
}

.faq-item.open {
  border: 1px solid var(--colorText);
  box-shadow: 0 0 30px #00000030;
}
.faq-item.open .faq-answer {
  max-height: 30rem;
  padding-top: 1rem;
}
.faq-item.open .chevron {
  transform: rotate(-45deg);
}


/* Banner */

.banner {
  margin: 6rem 0 4rem 0;

  width: 100%;
  height: 22rem;
  overflow: visible;
  position: relative;
  border-radius: 0.5rem;
  background-color: var(--blueMonday);
  overflow: hidden;

  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.banner * {
  color: var(--colorText);
  --colorText: var(--darkFantasy);
}

.banner *::selection {
  color: var(--blueMonday);
}

.banner_left {
  height: 100%;
  flex-grow: 1;
  padding: 1.5rem 0 1.5rem 1.5rem;

  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.banner_text,
.banner_text div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.banner_text a:hover {
  color: currentColor;
  text-decoration: underline;
}

.banner__button-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
}

.banner__button-row button {
  flex-shrink: 0;
}

.banner__image {
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;

  opacity: 0.4;
  filter: grayscale(100%) brightness(140%) contrast(110%);
  mix-blend-mode: multiply;

  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  pointer-events: none;
}
.banner__image img {
  height: 100%;
}

@media (max-width: 900px) {
  .banner_left {
    height: 100%;
    width: 100%;
    padding: 1.5rem;
  
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1;
  }
  .banner img {
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;

    opacity: 0.2;
  }
}

@media (max-width: 570px) {
  .banner {
    height: auto;
  }
  .banner_text {
    gap: 0.5rem;
  }
  .banner__button-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 1rem;
  }
  .banner img {
  display: none;
  }
}


/* Blog */

.blog p {
  margin-bottom: 0.5rem !important;
  max-width: 44rem;
}

.blog ul {
  padding-left: 1em;
  list-style-type: none;
  margin-bottom: 0.5rem !important;
}

.blog ol {
  list-style-position: inside;
  margin-bottom: 1.5em;
}

.blog ul li,
.blog ol li {
  margin-bottom: 0 !important;
}

.blog ul li:before {
  content: "–";
  width: 1em;
  display: inline-block;
  margin-left: -1em;
}

.blog-posts {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  margin-top: 6rem;
}

.blog-posts a {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
  margin: -2rem;
  border-radius: 1rem;
  background: none !important;
  transition: all 0.3s ease;
}

.blog-posts a img {
  height: 12.5rem;
  width: 12.5rem;
  object-fit: cover;
  border-radius: 0.5rem;
}

.blog-posts a > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-posts a:hover {
  background-color: var(--blueMondayTransparent) !important;
  transition: none;
}

.blog-posts ul {
  margin-bottom: 0.5rem !important;
  flex-direction: row !important;
  align-items: center;
}

.blog-posts h3 {
  margin: 0 !important;
  padding-bottom: 1.5rem;
}

.blog-posts span {
  max-width: 34rem;
}

.blog-posts svg {
  color: var(--blueMondaySemiTransparent);
}
.blog-posts a:hover svg {
  color: var(--colorText);
}
.blog-posts a:active svg {
  margin-right: -0.5rem;
  transition: all 0.2s ease;
}


/* Blog Article */

.blog-article h2 {
  margin-top: 0 !important;
  padding-bottom: 2rem;
}

.blog-article .tags ul {
  margin-bottom: 0.5rem !important;
}

p.intro,
intro {
  font-size: 1.4rem;
}


/* Rules */

article.rules h1 {
  margin-top: 0.5rem;
  margin-bottom: 3rem;
}

.rule {
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rule h3 {
  margin-bottom: 0.5rem !important;
}
.rule p {
  margin-bottom: 0.75rem !important;
}
.rule .tagline {
  margin-bottom: 0.25rem;
}

.rule ul li {
  margin-bottom: 0.25rem;
  /* font-style: italic; */
}

.rule__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: flex-start;
  margin-top: -1rem;
}

@media (max-width: 500px) {
  .rule__links {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.rule__links * {
  font-size: 0.8rem;
  letter-spacing: 0.01rem;
}

.rule__links a {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1rem  0;
  border-radius: 0.25rem;
  border: 1px solid transparent;
  background: none !important;

  transition: all 0.3s ease;
}

.rule__links a:hover {
  border: 1px solid var(--colorText);
  background: var(--blueMondayTransparent) !important;

  transition: none;
}

.rule__links a > div {
  padding: 0 1rem;
  margin-left: -1px;
  border-left: 1px solid var(--colorText);
}

.rule__links a div div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--colorText);
}

.rule__links b {
  color: var(--colorText);
}

.rule__links span {
  opacity: 0.75;
}

/* .rule__example {
  width: 2000rem;
  display: flex;
  gap: 2rem;
}

.rule__slide {
  height: 24rem;
  border-radius: 1rem;
  overflow: hidden;

  transition: transform 0.5s ease, opacity 0.5s ease-out;
}

.rule__slide img {
  height: 100%;
  width: 100%;
  object-fit: cover;
} */


/* Newsletter */

.newsletter-form .button {
  background-color: var(--colorText);
  border: 1px solid var(--colorText);
  color: var(--colorBackground);
  font-size: 0.9rem;
  line-height: 1;
  font-weight: bold;
  transition: background-color 0.3s ease-out;
}

.newsletter-form .button:hover {
  background-color: transparent;
  color: var(--colorText);
  transition: none;
}

.newsletter-form input:first-of-type {
  width: 14rem;
}

form {
  margin-top: 2.5rem;
}


/* Research */

.research .people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  justify-content: center;
  gap: 1.5rem;
  padding: 0 !important;
  margin: 3rem 0;
}
.research .people div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.research .people img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
}
.research .people span {
  text-align: center;
}

.research .table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  justify-content: center;
  gap: 2rem;
  padding-top: 3rem;
}
.research .table div {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.research button {
  margin-top: 1.5rem;
}


/* S-Article */

.s-article {
  max-width: 32rem;
  margin: 0 auto;
}

.s-article p {
    margin-bottom: 1.5rem;
    margin-right: -0.25rem;
}

.s-article a,
.article a {
  background: var(--backgroundUnderline);
}
.s-article button > a {
  background: none;
}

.s-article a:hover {
  background: var(--backgroundUnderlineHover);
}
.s-article button > a:hover {
  background: none;
}

.s-article ul {
  padding-left: 1em;
  list-style-type: none;
  margin-bottom: 1.5em;
}

.s-article ol {
  list-style-position: inside;
  margin-bottom: 1.5em;
}

.s-article ul li,
.s-article ol li {
  margin-bottom: 0.5em;
}

.s-article ul li:before {
  content: "–";
  width: 1em;
  display: inline-block;
  margin-left: -1em;
}

.s-article h1 {
  margin-bottom: 2rem;
}

.s-article h2 {
    margin-top: 4rem;
    margin-bottom: 2rem;
}

.s-article h2:first-child {
  margin-top: 0;
}

@media (max-width: 640px) {
  .s-article h2 {
    font-size: 2.5rem;
    letter-spacing: 0.015em;
  }
  .s-article h2:first-child {
    margin-bottom: 2rem;
  }
}

.s-article h3,
.s-article h4,
.s-article h5,
.s-article h6 {
  margin-top: 4rem;
  margin-bottom: 2rem;
}

.s-article h3:first-child,
.s-article h4:first-child,
.s-article h5:first-child,
.s-article h6:first-child {
  margin-top: 0;
}

@media (max-width: 640px) {
  .s-article h3 {
    /* font-size: 1.25rem; */
  }
  .s-article h3:first-child {
    margin-bottom: 2rem;
  }
}


.s-article h4,
.s-article h5,
.s-article h6 {
  margin-bottom: 1em;
}

.s-article h5 + h5 {
  margin-top: 0;
}

.s-article h5 {
  padding-left: 2rem;
}

.s-article h6 {
  font-style: italic;
  padding-left: 2rem;
}

.s-article img {
  max-width: 100%;
}

.s-article figure {
  margin-bottom: 1.5rem;
}

.s-article dt {
  font-variant-caps: all-small-caps;
  font-weight: bold;
  letter-spacing: 0.1em;
  font-size: 110%;
}

.s-article dd {
  margin-bottom: 2rem;
}


/* Projects Page */

.project-list {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  margin-top: 6rem;
}

.project-list a {
  margin: 0 !important;
}


/* Project */

.project__header {
  width: 100%;
  left: 0;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  margin-top: -5rem;
  margin-bottom: 6rem;
}
.project__header img,
.project__header video {
  width: 100vw !important;
}

.project__header h1 {
  position: absolute;
  margin-top: 23vw;
  padding: 0 1rem;
  text-align: center;
}

@media (max-width: 800px) {
  .project__header img,
  .project__header video {
    width: 150vw !important;
  }
  .project__header h1 {
    position: absolute;
    margin-top: 34vw;
  }
}

@media (max-width: 500px) {
  .project__header {
    margin-top: -9rem;
    margin-bottom: 2rem;
  }
  .project__header img,
  .project__header video {
    width: 190vw !important;
  }
    .project__header h1 {
    position: absolute;
    margin-top: 52vw;
  }
}

.project__headline {
  margin-top: 0.5rem !important;
}

.project__button-row {
  margin-top: 3rem;
}


/* Footer */

.footer::after {
  content: "";
  display: block;
  height: 60px;
  object-fit: cover;
  background: url(../img/bg.jpg);
  background-size: cover;
  /* border-bottom: 2px solid var(--colorText); */
}

.footer__inner {
  font-family: "TellingSourceSerif";
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;

  display: flex;
  flex-direction: row;
  padding: 2rem;
  justify-content: space-between;
}

@media (max-width: 640px) {
  .footer__inner {
    flex-direction: column-reverse;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1rem 3rem 1rem;
  }
}

.nav-footer {
  flex: 0 0 auto;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .nav-footer {
    margin: 5vmin 0 5vmin 0;
  }
}

.nav-footer > * + * {
  margin-left: 1.5rem;
}

.nav-footer__item {
  flex: 0 0 auto;
}

.nav-footer__link {
  text-decoration: none;
}

.footer__copyright {
  opacity: 50%;
}

.humantouch {
  position: fixed;
  z-index: -1;
  filter: blur(100px);
  opacity: 0.5;
}


/* Hide, but keep for screen readers. */
.u-hidden {
  clip-path: inset(100%) !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  height: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}