/* Real cookie mark and collision-free hero typography. */
.logo i {
  overflow: hidden;
  padding: 0;
  background: #16080d;
}

.logo i img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
}

.copy {
  position: relative;
  z-index: 3;
  min-width: 0;
}

h1 {
  max-width: 780px;
  font-size: clamp(3rem, 5vw, 5.25rem);
  letter-spacing: -.06em;
}

.hobbit {
  z-index: 2;
}

@media (max-width: 1050px) and (min-width: 821px) {
  h1 { font-size: clamp(3rem, 5.4vw, 4.2rem); }
  .hero { grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); }
}

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; }
  h1 { max-width: 100%; font-size: clamp(2.7rem, 12vw, 4.3rem); }
}