@font-face {
  font-family: "Alfa Slab One";
  src: url("./assets/fonts/alfa-slab-one.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url("./assets/fonts/inter-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url("./assets/fonts/inter-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

* { box-sizing: border-box; }

html {
  color-scheme: dark;
  background: #000;
  font-family: Inter, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

body { margin: 0; }

.hero {
  position: relative;
  isolation: isolate;
  min-height: 680px;
  min-height: max(680px, 100svh);
  overflow: hidden;
  background: #000;
  color: #fff;
}

.ambient {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.header {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 32px 24px;
}

.wordmark {
  width: max-content;
  max-width: 100%;
  font-family: "Alfa Slab One", Georgia, serif;
  font-weight: 400;
  line-height: 1.37;
  color: #ff8a00;
  background: linear-gradient(0deg, #ff0000 7.1659%, #ffd400 86.216%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.wordmark--small {
  font-size: 20px;
  background-image: linear-gradient(160.0586deg, #ff0000 1.0216%, #ffd400 77.069%);
}

.intro {
  position: absolute;
  z-index: 2;
  top: calc(50% - 55px);
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: min(887px, calc(100% - 64px));
  text-align: center;
}

.wordmark--hero { font-size: clamp(72px, 6.75vw, 108px); }

.copy { width: 100%; }

h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  color: #ffd400;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

/* Keep the table's separator in the heading; the design uses a line break. */
.heading-separator {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
}

.artwork {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.artwork img {
  position: absolute;
  display: block;
  height: auto;
  user-select: none;
}

.artwork__chips {
  width: 33.375%;
  left: -3.125%;
  bottom: -6.7778%;
}

.artwork__bag {
  width: 30.9375%;
  right: 0;
  bottom: -10%;
}

/* Equal outer rows center the intro while reserving room for the artwork. */
@media (max-width: 900px) {
  .hero {
    --edge-space: clamp(150px, 36vw, 340px);
    display: grid;
    grid-template-rows: minmax(var(--edge-space), 1fr) auto minmax(var(--edge-space), 1fr);
    min-height: 100vh;
    min-height: 100svh;
  }

  .header {
    position: absolute;
    top: 0;
    width: 100%;
    padding-block: 24px;
  }

  .intro {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    grid-row: 2;
    width: min(640px, calc(100% - 48px));
    margin: 0 auto;
  }

  .wordmark--hero { font-size: clamp(64px, 10vw, 90px); }

  .artwork {
    position: absolute;
    inset: auto 0 0;
    height: clamp(250px, 43vw, 370px);
    width: 100%;
  }

  .artwork__chips { width: 48%; left: -4%; bottom: -7%; }
  .artwork__bag { width: 45%; right: -2%; bottom: -12%; }
}

@media (max-width: 540px) {
  .wordmark--hero { font-size: clamp(58px, 15vw, 76px); }
  h1 { font-size: 20px; }
  .artwork { height: clamp(200px, 57vw, 290px); }
  .artwork__chips { width: 59%; left: -8%; bottom: -8%; }
  .artwork__bag { width: 56%; right: -5%; bottom: -15%; }
}

/* On short landscape screens, show the copy immediately below the header. */
@media (max-height: 540px) and (min-width: 541px) and (orientation: landscape) {
  .hero {
    --edge-space: clamp(150px, 36vw, 340px);
    display: grid;
    grid-template-rows: 88px auto minmax(var(--edge-space), 1fr);
    min-height: 100vh;
    min-height: 100svh;
  }

  .header {
    position: absolute;
    top: 0;
    width: 100%;
    padding-block: 24px;
  }

  .intro {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    grid-row: 2;
    margin: 0 auto;
  }

  .artwork {
    position: absolute;
    inset: auto 0 0;
    height: clamp(250px, 43vw, 370px);
    width: 100%;
  }
}