:root {
  --clr-off-white: hsl(45 29 97);
  --clr-off-black: hsl(20 3 20);

  --clr-bg: var(--clr-off-white);
  --clr-text: var(--clr-off-black);
  --clr-link: var(--clr-text);

  --font-family-base: "Inter", sans-serif;
  --font-family-italic: 'Inter italic', sans-serif;
  --line-height-base: 1.5;
  --line-height-heading: 1.2;
  --font-size: 1.25rem;
  --font-size-small: .8em;
  --spacing: 4vw;
}

@font-face {
  font-weight: 100 900;
  font-family: 'Inter';
  src: url('../fonts/InterVariable.woff2') format('woff2 supports variations'),
       url('../fonts/InterVariable.woff2') format('woff2-variations');
  font-display: swap;
}

@font-face {
  font-weight: 100 900;
  font-style: italic;
  font-family: 'Inter italic';
  src: url('../fonts/InterVariable-Italic.woff2') format('woff2 supports variations'),
       url('../fonts/InterVariable-Italic.woff2') format('woff2-variations');
  font-display: swap;
}

@font-face {
  font-weight: 100 900;
  font-family: 'Noto Sans JP';
  src: url('../fonts/NotoSansJP-VariableFont_wght.woff2') format('woff2 supports variations'),
       url('../fonts/NotoSansJP-VariableFont_wght.woff2') format('woff2-variations');
  font-display: swap;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--clr-bg);
  color: var(--clr-text);
  font-weight: 300;
  font-size: var(--font-size);
  font-family: var(--font-family-base);
  line-height: var(--line-height-base);
}

h2 {
  margin: 0 0 1em 0;
  font-weight: 900;
  font-size: 2em;
  line-height: var(--line-height-heading);
}

i, em {
  font-family: var(--font-family-italic);
}

a {
  color: var(--clr-link);
  text-decoration: underline solid var(--clr-link) from-font;
  &:hover {
    text-decoration: none;
  }
}

section,
main {
  padding-inline: max(var(--spacing), 1rem);
  padding-block: max(var(--spacing), 3rem);
}

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  overflow: hidden;
  background-color: var(--clr-off-white);
  color: var(--clr-off-black);
  .logo {
    position: absolute;
    top: var(--spacing);
    left: var(--spacing);
    width: max(var(--spacing), 63px);
    svg {
      display: block;
      fill: hsl(from var(--clr-off-black) H S L / 20%);
    }
  }
  h1 {
    z-index: 1;
    margin: 0 0 .75em 0;
    padding: 1rem;
    text-shadow: .025em .025em 1px hsl(180 100 50), -.025em -.025em 1px hsl(0 100 50);
    font-weight: 900;
    font-size: max(7vw, 2em);
    font-family: 'Noto Sans JP', sans-serif;
    filter: blur(.5px);
  }
  p {
    z-index: 1;
    padding: 0 1rem;
    text-align: center;
    letter-spacing: .2em;
    font-weight: 200;
    font-size: max(1.2vw, .75em);
    text-wrap: balance;
  }
  .arrow {
    position: absolute;
    bottom: 1em;
    z-index: 1;
    svg {
      width: 2em;
      stroke: var(--clr-text);
      transition: transform 200ms;
    }
    &:hover {
      svg {
        transform: translateY(1em);
      }
    }
  }
  video {
    position: absolute;
    inset: -2rem;
    width: 110%;
    height: 110%;
    object-fit: cover;
    filter: opacity(15%) hue-rotate(30deg) blur(1rem);
  }
}

ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
  gap: 1em;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: myorder;
  li {
    display: flex;
    gap: 1em;
    align-items: center;
    background-color: var(--clr-bg);
    counter-increment: myorder;
    &::before {
      content: counter(myorder);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 3em;
      aspect-ratio: 1 / 1;
      border-radius: 9em;
      background-color: var(--clr-text);
      color: var(--clr-bg);
      font-weight: 900;
    }
  }
}

.footer {
  --clr-link: var(--clr-bg);
  padding-block: max(var(--spacing), 3rem);
  padding-inline: var(--spacing);
  background-color: var(--clr-text);
  color: var(--clr-bg);
  text-align: center;
  font-size: var(--font-size-small);
}