@layer base, rhythm, layout, components, default, overwrites;

@layer base {
  :root {
    --font-family-default: Geist, sans-serif;

    --max-content-width: 100rem;
    --min-tap-size: 48px;
    --min-tap-space: 8px;

    --color-background: #000;
    --color-text: #fff0f4;
    --color-primary: #c3ecff;
    --color-white: oklch(100% 0.0 255);
  }
}

@layer rhythm {
  body {
    --font-size-min: 16;
    --font-size-max: 20;

    --line-height-min: 1.2;
    --line-height-max: 1.6;

    --font-size-default: var(--font-size);
    --line-height-default: var(--line-height);

    --pl: 1.125;
    --pu: 1.35;

    --h5-min: calc(var(--base-font-size-min) * var(--pl));
    --h5-max: calc(var(--base-font-size-max) * var(--pu));

    --h4-min: calc(var(--h5-min) * var(--pl));
    --h4-max: calc(var(--h5-max) * var(--pu));

    --h3-min: calc(var(--h4-min) * var(--pl));
    --h3-max: calc(var(--h4-max) * var(--pu));

    --h2-min: calc(var(--h3-min) * var(--pl));
    --h2-max: calc(var(--h3-max) * var(--pu));
  }

  h1,
  h2 {
    --line-height-min: 1.25;
    --line-height-max: 1.17;

    font-size: var(--font-size);
    font-weight: 300;
    line-height: var(--line-height);
    padding-block: calc(var(--grid-correction, 0) / 2);
  }

  h2 {
    --font-size-min: var(--h2-min);
    --font-size-max: var(--h2-max);
    padding-left: 30px;
    padding-right: 30px;
    color: var(--color-primary, blue)
  }

  h2 strong {
    color: var(--color-white, blue)
  }

  p, h2 small {
    --font-size-min: var(--h5-min);
    --font-size-max: var(--h5-max);

    font-size: var(--font-size);
    font-weight: 300;
    line-height: 1.5;
    padding-block: calc(var(--grid-correction, 0) / 2);
    margin: 0;
    padding-left: 30px;
    padding-right: 60px;
    width: 100%;
  }

  h2 small {
    padding: 0px;
  }

  p.small {
    font-size: 90%;
  }
}

@layer base {
  :root {
    -webkit-text-size-adjust: 100%;

    box-sizing: border-box;
    overflow-wrap: break-word;
  }

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

  ::-moz-selection {
    background-color: highlight;
    color: highlightText;
    text-shadow: none !important;
  }
  ::selection {
    background-color: highlight;
    color: highlightText;
    text-shadow: none !important;
  }

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

  body {
    background-color: var(--color-background, white);
    color: var(--color-text, black);
    font-family: var(--font-family-default, sans-serif);
    font-size: var(--font-size-default, 1em);
    font-size-adjust: from-font;
    line-height: var(--line-height-default, 1.5);
    text-rendering: optimizeLegibility;
    margin: 0;
    min-height: 100%;
  }

  main {
    outline: 0;
  }

  a, .content p.small a {
    color: var(--color-white, blue);
    transition: 0.25s ease-in-out;

    &:hover,
    &:focus {
      color: var(--color-white, var(--color-white, blue));
    }
  }

  .content p a {
    color: var(--color-primary, blue);
    transition: 0.25s ease-in-out;

    &:hover,
    &:focus {
      color: var(--color-primary, var(--color-primary, blue));
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6, {
    line-height: var(--line-height-heading, 1.25);
    font-weight: 300;
  }

  img,
  picture,
  object,
  video,
  embed,
  iframe {
    max-width: 100%;
    height: auto;
  }
}
@layer rhythm {
  * {
    --font-size-min: 16;
    --font-size-max: 20;
    --font-size-min-viewport: 320;
    --font-size-max-viewport: 1440;
  
    --font-size-units: calc(0.0625rem);
  
    --_font-size-step: calc( 
      (var(--font-size-max) - var(--font-size-min)) / 
      (var(--font-size-max-viewport) - var(--font-size-min-viewport))
    );
  
    --_font-size-base-value: calc(
      var(--font-size-min) - 
      var(--font-size-min-viewport) * 
      var(--_font-size-step)
    );

    --font-size: clamp(
      min(var(--font-size-min), var(--font-size-max)) * var(--font-size-units),
      var(--_font-size-base-value) * var(--font-size-units) + var(--_font-size-step) * 100vw,
      max(var(--font-size-max), var(--font-size-min)) * var(--font-size-units)
    );
  
    --line-height-units: 1em;
  
    --line-height-min: 1.2;
    --line-height-max: 1.6;
  
    --line-height-min-viewport: calc(320 / var(--font-size-min));
    --line-height-max-viewport: calc(1440 / var(--font-size-max));
  
    --_line-height-step: calc(
      (var(--line-height-max) - var(--line-height-min)) / 
      (var(--line-height-max-viewport) - var(--line-height-min-viewport))
    );
  
    --_line-height-base-value: calc(
      var(--line-height-min) - 
      var(--line-height-min-viewport) * 
      var(--_line-height-step)
    );
  
    --line-height: clamp(
      min(var(--line-height-min), var(--line-height-max)) * var(--line-height-units),
      var(--_line-height-base-value) * var(--line-height-units) + var(--_line-height-step) * 100vw,
      max(var(--line-height-max), var(--line-height-min)) * var(--line-height-units)
    );
  }
  
  body {
    font-size: var(--font-size);
    line-height: var(--line-height);
  
    --RHYTHM_UNITS: var(--font-size);
  
    --RHYTHM: clamp(
      min(var(--line-height-min), var(--line-height-max)) * var(--RHYTHM_UNITS),
      var(--_line-height-base-value) * var(--RHYTHM_UNITS) + var(--_line-height-step) * 100vw,
      max(var(--line-height-max), var(--line-height-min)) * var(--RHYTHM_UNITS)
    );
  
    --spacing: var(--RHYTHM);

    --base-font-size-min: var(--font-size-min);
    --base-font-size-max: var(--font-size-max);
    --base-line-height-min: var(--line-height-min);
    --base-line-height-max: var(--line-height-max);
  }
}

@layer layout {
  header,
  main,
  section,
  article,
  aside,
  nav,
  form,
  div,
  footer {
    --section-spacing-multiplier: 1;
    --section-spacing: calc(var(--spacing, 1.5rem) * var(--section-spacing-multiplier));

    @media (min-width: 33.333em) {
      --section-spacing-multiplier: 2;
    }

    @media (min-width: 50em) {
      --section-spacing-multiplier: 3;
    }

    @media (min-width: 66.666em) {
      --section-spacing-multiplier: 4;
    }

    @media (min-width: 83.333em) {
      --section-spacing-multiplier: 5;
    }

    @media (min-width: 100em) {
      --section-spacing-multiplier: 6;
    }
  }

  header,
  section,
  footer {
    padding-inline: max(var(--section-spacing), calc(50% - var(--max-content-width, 100rem) / 2));
  }

  section {
    padding-block: var(--section-spacing);
  }
}

.site-header {
  overflow: hidden;
  padding-block: calc(var(--spacing) / 2);
  position: fixed;
  inset-inline: 0;
  z-index: 10000;

  display: block;
  text-align:left;

  @media (min-width: 64rem) {
    padding-top: 12px;
    inset-block-start: 0;
    inset-block-end: auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
  }
}

@supports(animation-timeline: view()) {
  .site-header::after {    
    background-image: linear-gradient(to right, transparent, black);
    content: '';
    display: block;
    position: absolute;
    top: calc(var(--spacing) / 2);
    right: 0;
    width: 33%;
    height: calc(var(--spacing) * 1.5 + 2px);
    pointer-events: none;
  }
}

.sr-only {
  border-width: 0;
  clip: rect(0, 0, 0, 0);
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
}

p.scroll-desktop, span.scroll-mobile {
  display: none;
  font-size: 80%;
  width: 100%;
  text-align: center;
}
span.scroll-mobile {
  display: block;
  margin-top: 30px;
  text-align: left;
}
h1, header.site-header p {
  margin: 0;
  padding: 0;
  display: inline;
  font-size: 16px;
}

@media (min-width: 64rem) {
  h1.sr-only, header.site-header p  {
    all: unset;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0.01em;
    margin: 0;
  }
  p.scroll-desktop {
    display: block;
  }
  span.scroll-mobile {
    display: none;
  }
}

header.site-header p {
  float: right;
}

nav {
  --indicator-number: 6;
  --indicator-top: 50dvb;
  --indicator-right: var(--spacing);

  --indicator-size: 1em;
  --indicator-padding: calc((var(--min-tap-size) - var(--indicator-size)) / 2);
  --indicator-clipped-margins: calc(var(--indicator-padding) * 2);
  --indicator-total-size: calc(var(--indicator-size) + var(--indicator-padding) * 2);

  --indicator-gap: var(--min-tap-space);
  --indicator-total-gap: calc(var(--indicator-gap) * (var(--indicator-number) - 1));

  --indicator-total-height: calc(var(--indicator-total-size) * var(--indicator-number) + var(--indicator-total-gap) - var(--indicator-clipped-margins));

  @media (pointer: fine) {
    --indicator-padding: 0.25em;
  }

  position: fixed;
  inset-block-start: var(--indicator-top);
  inset-inline-end: var(--indicator-right);
  -webkit-margin-before: calc(var(--indicator-total-height) / -2);
          margin-block-start: calc(var(--indicator-total-height) / -2);
  z-index: 100;

  & ul {
    display: flex;
    flex-direction: column;
    gap: var(--indicator-gap);
    margin: 0;
    padding: 0;
    position: relative;

    &::before {
      --size: calc(var(--indicator-size));

      border-radius: 50%;
      content: '';
      color: var(--color-indicator, var(--color-text));
      background-color: currentColor;
      box-shadow: inset 0 0 0 4px var(--color-background);
      position: absolute;
      inset-inline: 0;
      margin-inline: auto;
      padding: 3px;
      width: var(--size);
      height: var(--size);
      z-index: -1;
    }
  }

  & li:first-of-type {
    -webkit-margin-before: calc(var(--indicator-padding) * -1);
            margin-block-start: calc(var(--indicator-padding) * -1);
  }

  & li:last-of-type {
    -webkit-margin-after: calc(var(--indicator-padding) * -1);
            margin-block-end: calc(var(--indicator-padding) * -1);
  }

  & li,
  & a {
    display: block;
  }

  & a {
    --color-link: var(--color-text);

    padding: var(--indicator-padding);

    &::before {
      content: '';
      border: 1px solid;
      border-radius: 50%;
      display: block;
      width: var(--indicator-size);
      height: var(--indicator-size);
    }
  }
}

@supports not (animation-timeline: scroll()) {
  nav {
    display: none;
  }
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-block: var(--spacing);
  padding-inline: inherit;
  position: relative;
  height: 100%;

  @media (min-width: 64rem) {
    flex-direction: row;
    justify-content: space-between;
  }

}

h2,
.text {
  width: 100%;
  font-weight: 100;
  -webkit-padding-end: calc(var(--min-tap-size) + var(--spacing));
          padding-inline-end: calc(var(--min-tap-size) + var(--spacing));

  @media (min-width: 64rem) {
    -webkit-padding-end: 0;
            padding-inline-end: 0;
  }
}

@supports not (animation-timeline: scroll()) {
  h2,
  .text {
    -webkit-padding-end: 0;
            padding-inline-end: 0;
  }
}

h2 {
  padding-top: 200px;
  line-height: 1;
  text-shadow: 1px 2px 0.1em hsla(0, 0%, 0%, 0.5);
  width: 100%;

  @media (min-width: 64rem) {
    margin: 0;
    padding: 0;
    flex: 1;
    -webkit-margin-after: 0;
            margin-block-end: 0;
  }
}

.text {
  --intrinsic-width: 500;
  --intrinsic-height: 1000;
  --intrinsic-height: 300px;

  & img {
    display: block;
    padding: 70px;
    opacity: 0.9;
    position: absolute;
    inset: 0;
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: top center;
       object-position: top center;
    z-index: -1;
    margin-bottom: 30px;
  }

  @media (min-width: 64rem) {
    --height: min(100dvb, 33vw * var(--intrinsic-height) / var(--intrinsic-width));
    flex: 1;
    font-weight: 100;
    position: relative;
    z-index: -1;

    & img {
      float: inline-start;
      margin-left: calc((1 - var(--intrinsic-width) / var(--intrinsic-height)) * -100%);
      opacity: 1;
      padding: 0px;
      position: relative;
      inset: auto;
      shape-outside: var(--image);
      shape-margin: var(--spacing);
    }
    & + * {
      padding: 0;
      margin: 0;
      width:33.33333%;
      padding-left: 66px;
    }
  }
}