/* Variables 
----------------------------- */
:root {
  /* Colors */
  --midnight: #030303; 
  --moonlight: #171717;
  --shadow: #1F2225;
  --light: #BABFC5;
  --grey: #464D53;
  --violet: #7734FE;
  --violet-d: #6B50C3;
  --violet-dd: #5339A7;
  --violet-ddd: #402C81;
  --violet-dddd: #3a2874;
  --ultra-violet: #430BFF;
  
  --color-name: var(--violet);
  --color-text: var(--violet-d);
  --color-heading: var(--violet-d);
  --color-bg: var(--moonlight);
  --color-border: var(--violet-dddd);

  /* Typography */
  --base-font-size: 18px;
  --font-serif: 'Editorial New', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-sans: 'Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Measures */
  --space-stack: 1lh;
  --base-pad: 1rem;
  --base-margin: var(--space-stack, 1.5rem);
  --grid-gap: 3rem;
  --main-content-offset-top: 2rem;
  --section-margin: calc(3 * var(--base-margin));
  --site-gutter: 2rem;

  /* Other */
  --border: 1px solid var(--color-border);

  /* Motion
  ------------------- */
  --ease-in: cubic-bezier(.895,.03,.685,.22);
  --ease-out: cubic-bezier(.165,.84,.44,1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-authentic-motion: cubic-bezier(0.4,0,0.2,1);
  --cubic-screen-wipe: cubic-bezier(.79,.14,.15,.86);
}

@media (min-width: 750px) {
  :root {
    --base-font-size: 20px;
    --grid-gap: 4.5rem;
    --main-content-offset-top: 10rem;
    --section-margin: calc(4 * var(--base-margin));
  }
}

@media (min-width: 1024px) {
  :root {
    --main-content-offset-top: 15rem;
    --site-gutter: 3rem;
  }
}

@media (min-width: 1440px) {
  :root {
    --base-font-size: 24px;
    --base-margin: 2rem;
    --grid-gap: 6rem;
    --main-content-offset-top: 16rem;
    --section-margin: calc(3 * var(--base-margin));
  }
}

@media (min-width: 1600px) {
  :root {
    --main-content-offset-top: 18vw;
  }
}

@media (min-width: 2400px) {
  :root {
    --base-font-size: 20px;
  }
}


/* Fonts 
------------------- */
@font-face {
  font-family: 'Editorial New';
  src: url('../fonts/EditorialNew/PPEditorialNew-UltraboldItalic.otf');
  font-style: italic;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: 'Editorial New';
  src: url('../fonts/EditorialNew/PPEditorialNew-Italic.otf');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/NeueMontreal/PPNeueMontreal-Bold.otf');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}


/* Utility 
------------------- */
.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.nowrap {
  display: block;
  white-space: nowrap;
}

.list-style-none {
  list-style: none;
  margin: 0;
  padding-left: 0;
}


/* Base 
----------------------------- */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: var(--base-font-size);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  padding: 0;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background-color: var(--ultra-violet);
  color: white;
}

::-moz-selection {
  background-color: var(--ultra-violet);
  color: white;
}

ul li,
ol li {
  margin-bottom: 5px;
}

ul li:last-child,
ol li:last-child {
  margin-bottom: 0;
}

a,
a:visited {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
  transition: none;
}

a:hover,
a:focus {
  color: var(--ultra-violet);
  text-decoration-color: var(--ultra-violet);
}


/* Site container 
----------------------------- */
.site-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  min-height: 100svh;
  overflow: hidden;
  padding: 0 var(--site-gutter);
  position: relative;
}


/* Sections 
----------------------------- */
.section {
  margin-bottom: var(--section-margin);
}

.section p,
.section ul,
.section ol {
  margin-bottom: var(--base-margin);
}

.section p:last-child,
.section ul:last-child,
.section ol:last-child {
  margin-bottom: 0;
}

.section__heading {
  color: var(--color-heading);
  font-family: var(--font-serif);
  font-size: var(--base-font-size);
  font-style: italic;
  /* font-weight: 800; */
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: var(--base-margin);
  padding-bottom: calc(var(--base-pad) / 2);
  position: relative;
}

.section__heading::before,
.section__heading::after {
  background-color: var(--color-border);
  bottom: 0;
  content: '';
  display: block;
  height: 1px;
  position: absolute;
  right: 0;
  width: 100vw;
}

/* .section__heading::before {
  left: 0;
  right: auto;
} */


/* Grid 
----------------------------- */
.grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr;
  margin-left: auto;
  margin-right: auto;
  max-width: 45ch;
  min-height: 100vh;
  width: 100%;
}

.grid__main {
  padding-top: var(--main-content-offset-top);
}

@media (min-width: 750px) {
  .grid {
    grid-template-columns: 2fr min(35ch, 100%);
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }
  .grid__main {
    grid-column: 2;
  }
}

@media (min-width: 1040px) {
  .grid {
    grid-template-columns: 2fr min(35ch, 100%) 1fr;
  }
}

@media (min-width: 1200px) {
  .grid {
    gap: 8rem;
  }
}

@media (min-width: 1600px) {
  .grid {
    gap: 10rem;
    grid-template-columns: 1fr min(35ch, 100%) 1fr;
  }
}


/* Name Grid 
----------------------------- */
.grid__name {
  color: var(--color-name);
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(7, auto) 1fr;
  margin-left: auto;
  margin-right: auto;
  max-width: 460px;
  position: relative;
  width: 100%;
  z-index: 5;
}

.grid__name:last-child {
  display: none;
}

@media (min-width: 1024px) {
  .grid__name {
    max-width: 100%;
  }
}

@media (min-width: 1600px) {
  .grid__name {
    grid-template-rows: repeat(4, auto) 1fr;
  }
  .grid__name:first-child {
    margin-bottom: -1rem;
    margin-top: 0;
  }
  .grid__name:first-child .letter:nth-child(n + 11) {
    display: none;
  }
  .grid__name:last-child {
    display: grid;
    margin-bottom: -1rem;
    margin-top: auto;
  }
}

.letter {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.letter--o {
  transform: scale(1.4) translate(-5%, 15%);
}

.letter svg {
  height: auto;

  display: inline-block;
  vertical-align: bottom;
}

.letter .animate-in {
  animation-delay: 1.3s;
}
.letter:nth-child(2n) .animate-in {
  animation-delay: 1.1s;
}
.letter:nth-child(3n) .animate-in {
  animation-delay: 1.2s;
}
.letter:nth-child(4n) .animate-in {
  animation-delay: 1.3s;
}
.letter:nth-child(5n) .animate-in {
  animation-delay: 1.4s;
}
.letter:nth-child(6n) .animate-in {
  animation-delay: 1.2s;
}


/* Animations
----------------------------- */
@keyframes animate-in {
  0% {
    transform: translateY(-25%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slide-down {
  0% {
    transform: translateY(0)
  }
  to {
    transform: translateY(100%)
  }
}

.animate-in {
  transform: translateY(-25%);
  animation: animate-in 1s var(--ease-authentic-motion) 1 forwards;
}

.screen-wipe {
  animation: 
    slide-down 1s var(--cubic-screen-wipe) 0.5s 1 forwards,
    fade-out 0s linear 1.5s 1 forwards;
  background-color: var(--shadow);
  color: white;
  display: block;
  height: 100%;
  pointer-events: none;
  position: fixed;
  top: 0;
  user-select: none;
  width: 100%;
  z-index: 15;
}

.screen-wipe--2 {
  animation: 
    slide-down 1s var(--cubic-screen-wipe) 0.75s 1 forwards,
    fade-out 0s linear 1.75s 1 forwards;
  background-color: #1B1D1E;
}
.screen-wipe--3 {
  animation: 
    slide-down 1s var(--cubic-screen-wipe) 1.25s 1 forwards,
    fade-out 0s linear 2.25s 1 forwards;
  background-color: var(--color-bg);
}