/*----------------------------------------------*\
    GLOBAL
	======

	@package thetimewave

\*----------------------------------------------*/
/*----------------------------------------------*\
    COMPONENTS
	==========

	@package thetimewave

\*----------------------------------------------*/
/* 
 *
 * / Breakpoints
------------------------------------------------*/
/* 
 *
 * ANCHOR Variables
------------------------------------------------*/
:root {
  --font-weight-400: 400;
  --font-weight-700: 700;
  --font-weight-900: 900;
  --color-yellow: #F8FE52;
  --color-pink: #A029A6;
  --color-pink-light: #DF4AE9;
  --color-blue: #27C0EC;
  --color-blue-light: #81D6F1;
  --color-white: #FFFFFF;
  --color-black: #321000;
  /* Minor Third (factor: 1.2)*/
  --size-010: .194rem;
  --size-020: .232rem;
  --size-030: .279rem;
  --size-040: .334rem;
  --size-050: .401rem;
  --size-060: .482rem;
  --size-070: .578rem;
  --size-080: .694rem;
  --size-090: .833rem;
  --size-100: 1rem; /* <-- Default */
  /* Major Third (factor: 1.25) */
  --size-200: 1.25rem;
  --size-300: 1.563rem;
  --size-400: 1.953rem;
  --size-500: 2.441rem;
  --size-600: 3.052rem;
  --size-700: 3.815rem;
  --size-800: 4.768rem;
  --size-900: 5.96rem;
}
@media screen and (min-width: 27rem) {
  :root {
    font-size: 1.1rem;
  }
}
@media screen and (min-width: 36rem) {
  :root {
    font-size: 1.2rem;
  }
}
@media screen and (min-width: 48rem) {
  :root {
    font-size: 1.3rem;
  }
}
@media screen and (min-width: 64rem) {
  :root {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 77rem) {
  :root {
    font-size: 1.5rem;
  }
}
@media screen and (min-width: 94rem) {
  :root {
    font-size: 1.6rem;
  }
}

/* 
 *
 * ANCHOR Global
------------------------------------------------*/
html {
  scroll-behavior: smooth;
}

body {
  font-family: "proxima-nova", sans-serif;
  background-image: url("../../images/bg-image13.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.5;
}
@media (orientation: landscape) {
  body {
    background-image: url("../../images/bg-image14.jpg");
  }
}

p {
  max-width: 40ch;
}

.divider {
  padding-block: var(--size-050);
  cursor: ns-resize;
  transition: padding 0.3s ease;
}
.divider--open {
  padding-block: 20vh;
}

/* 
 *
 * ANCHOR Section
------------------------------------------------*/
.section {
  background-color: var(--color-pink);
  position: relative;
  color: var(--color-black);
}
.section--text-right {
  text-align: right;
}
.section--text-center {
  text-align: center;
  display: grid;
  justify-content: center;
}
.section--text-light {
  color: var(--color-white);
}
.section--bg-blue {
  background-color: var(--color-blue);
}
.section--bg-image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.section--projects {
  background-image: url("../../images/website_fossoyeur_languedoccrusades_triptych_panel_3.jpg");
}
.section--magazine {
  background-image: url("../../images/website_sonderbauten_08958_04_rough.jpg");
}
.section--quill-and-quantum {
  background-image: url("../../images/website_urne_2_08956_stitch_2_merged-copy.jpg");
}
.section__wrapper {
  max-width: 50rem;
  margin: 0 auto;
  padding: var(--size-800) var(--size-100);
  position: relative;
  z-index: 10;
}
@media screen and (min-width: 36rem) {
  .section__wrapper {
    padding-inline: var(--size-300);
  }
}
@media screen and (min-width: 64rem) {
  .section__wrapper {
    padding-inline: var(--size-700);
  }
}
.section__heading {
  font-size: var(--size-300);
  margin-bottom: var(--size-300);
  font-weight: var(--font-weight-900);
  color: var(--color-yellow);
  text-transform: uppercase;
  line-height: 1;
  text-shadow: var(--color-pink-light) 3px -3px 0;
}
@media screen and (min-width: 27rem) {
  .section__heading {
    font-size: var(--size-400);
  }
}
@media screen and (min-width: 36rem) {
  .section__heading {
    font-size: var(--size-500);
  }
}
.section--bg-image .section__heading {
  text-shadow: var(--color-blue-light) 3px -3px 0;
}
.section__heading--about span {
  margin-left: var(--size-800);
}
.section__grid {
  display: grid;
  gap: var(--size-100);
}
@media screen and (min-width: 36rem) {
  .section__grid--1-4 {
    grid-template-columns: 1fr 4fr;
  }
}
@media screen and (min-width: 36rem) {
  .section__indent {
    margin-left: calc(2 * var(--size-800));
  }
}
.section__text-emphasis {
  font-size: var(--size-200);
  color: var(--color-yellow);
}
.section__divider {
  width: 100%;
  height: var(--size-030);
  background-image: url("../../images/section-divider.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  margin-block: var(--size-400);
}
.section p {
  font-weight: var(--font-weight-700);
  margin-bottom: var(--size-090);
}

/* 
 *
 * ANCHOR Header
------------------------------------------------*/
.header .section__wrapper {
  display: grid;
  place-content: end start;
  min-height: 100vh;
}
.header__bg-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
.header__heading {
  font-weight: var(--font-weight-900);
  color: var(--color-yellow);
  text-shadow: var(--color-blue) 3px -3px 0;
  line-height: 1;
  margin-bottom: var(--size-700);
  font-size: var(--size-600);
}
@media screen and (min-width: 27rem) {
  .header__heading {
    font-size: var(--size-700);
  }
}
@media screen and (min-width: 36rem) {
  .header__heading {
    font-size: var(--size-800);
  }
}

/* 
 *
 * ANCHOR Button
------------------------------------------------*/
.button {
  margin-top: var(--size-100);
  margin-bottom: var(--size-100);
}
.button a {
  display: inline-block;
  padding: var(--size-050) var(--size-200) var(--size-060);
  font-weight: var(--font-weight-700);
  border-radius: 0.5rem;
  background-color: var(--color-white);
  color: var(--color-black);
  text-decoration: none;
  transition: all 0.3s ease;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.button a:focus {
  outline: 0;
}
.button a:hover, .button a:focus-visible {
  background-color: var(--color-yellow);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  color: var(--color-pink-light);
}
.button a:focus-visible {
  outline: 2px solid var(--color-pink-light);
}
.button a:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* 
 *
 * ANCHOR Spacer
------------------------------------------------*/
.spacer--100 {
  height: var(--size-100);
}
.spacer--200 {
  height: var(--size-200);
}
.spacer--300 {
  height: var(--size-300);
}
.spacer--400 {
  height: var(--size-400);
}
.spacer--500 {
  height: var(--size-500);
}
.spacer--600 {
  height: var(--size-600);
}
.spacer--700 {
  height: var(--size-700);
}
.spacer--800 {
  height: var(--size-800);
}
.spacer--900 {
  height: var(--size-900);
}

/* 
 *
 * ANCHOR Text max-width
------------------------------------------------*/
.max-width--small {
  max-width: 20rem;
}