* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #fff7ee;
  color: #6b4a32;
  font-family: ui-rounded, "Nunito", "Comic Sans MS", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.site-shell {
  width: 100%;
  max-width: 1152px;
  margin: 0 auto;
  background: #fff7ee;
}

.section {
  width: 100%;
}

.image-section {
  position: relative;
  line-height: 0;
}

.image-section img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
}

.hotspots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hotspot {
  position: absolute;
  display: block;
  pointer-events: auto;
  border-radius: 999px;
  text-decoration: none;
}

.hotspot:hover {
  background: rgba(255, 153, 135, 0.10);
  outline: 2px solid rgba(255, 153, 135, 0.22);
}

/* Header hotspots are percentages so they scale with the image */
.nav-home { left: 31.5%; top: 37%; width: 5.3%; height: 35%; }
.nav-characters { left: 38.3%; top: 37%; width: 9.2%; height: 35%; }
.nav-shop { left: 48.5%; top: 37%; width: 5.6%; height: 35%; }
.nav-about { left: 55.0%; top: 37%; width: 6.5%; height: 35%; }
.nav-journal { left: 62.3%; top: 37%; width: 7.5%; height: 35%; }
.nav-search { left: 82.1%; top: 25%; width: 4.7%; height: 55%; }
.nav-cart { left: 87.0%; top: 25%; width: 4.7%; height: 55%; }
.nav-account { left: 92.0%; top: 25%; width: 4.7%; height: 55%; }

/* Hero button hotspots */
.hero-find { left: 6.3%; top: 63.5%; width: 15.6%; height: 11%; }
.hero-meet { left: 22.8%; top: 63.5%; width: 15.2%; height: 11%; }

.newsletter-form {
  position: absolute;
  left: 52.8%;
  top: 54.5%;
  width: 25.6%;
  height: 24%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1;
}

.newsletter-form input {
  width: 63%;
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0 0 0 8%;
  color: #8d6b55;
  font-size: clamp(10px, 1vw, 13px);
  outline: none;
}

.newsletter-form button {
  width: 37%;
  height: 100%;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: transparent;
  cursor: pointer;
}

.newsletter-form button:hover {
  background: rgba(255, 153, 135, 0.10);
}

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

@media (max-width: 640px) {
  .site-shell {
    max-width: 100%;
  }

  .newsletter-form input {
    font-size: 9px;
  }
}