.hero { position: relative; padding: clamp(28px, 5vw, 56px) 0 clamp(48px, 8vw, 96px); overflow: hidden; }
.hero .wrap { position: relative; z-index: 1; }

.hosts-row { display: flex; justify-content: center; align-items: flex-start; gap: clamp(10px, 3vw, 28px); }
.host { display: grid; justify-items: center; gap: 10px; width: clamp(84px, 18vw, 140px); text-align: center; }
.host img {
  width: clamp(58px, 12vw, 92px); aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--paper-hi), 0 10px 22px -10px rgba(0, 0, 0, .6);
}
.host span { font: 700 clamp(10px, 1.6vw, 13px)/1.2 var(--f-caps); letter-spacing: .22em; text-transform: uppercase; }
.hosts-row .x { font: 400 18px var(--f-caps); margin-top: clamp(20px, 4vw, 34px); color: var(--muted); }

.presents {
  display: flex; align-items: center; gap: 18px; margin: clamp(18px, 3vw, 28px) auto 0; max-width: 620px;
  font: 700 13px/1 var(--f-caps); letter-spacing: .6em; text-transform: uppercase; color: var(--ink-2);
}
.presents::before, .presents::after { content: ""; flex: 1; height: 1px; background: var(--ink); opacity: .45; }

.hero-title { text-align: center; margin-top: clamp(12px, 2vw, 20px); position: relative; }
.hero-title h1 {
  font: 400 clamp(56px, 13vw, 150px)/.92 var(--f-display);
  letter-spacing: -.015em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}
.hero-title .museum {
  display: inline-block; position: relative;
  font: 400 clamp(64px, 14vw, 160px)/1 var(--f-brush); color: var(--ochre);
  transform: rotate(-4deg); margin-top: -.08em;
}
.hero-title .museum svg { position: absolute; left: -12%; right: -6%; bottom: -.02em; width: 118%; height: .22em; }
.hero-title .note {
  position: absolute; right: clamp(0px, 4vw, 40px); bottom: clamp(10px, 3vw, 40px);
  font: 600 clamp(24px, 4vw, 44px)/.9 var(--f-hand); transform: rotate(-10deg); text-align: left;
}

.hero-body {
  display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 48px); align-items: center; margin-top: clamp(24px, 4vw, 44px);
}
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.facts li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; padding-left: 0; }
.facts svg { width: 26px; height: 26px; margin-top: 4px; }
.facts b { display: block; font: 400 30px/1 var(--f-display); }
.facts span { font: 700 14px/1.3 var(--f-caps); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }

.hero-photo { position: relative; }
.hero-photo img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  clip-path: polygon(0 3%, 6% 0, 18% 2%, 33% 0, 51% 3%, 66% 0, 82% 2%, 100% 0, 99% 30%, 100% 62%, 98% 100%, 80% 97%, 61% 100%, 42% 97%, 24% 100%, 8% 98%, 0 100%, 2% 66%, 0 34%);
  filter: saturate(1.05) contrast(1.02);
}
.hero-photo .tape.a { top: -10px; left: 8%; transform: rotate(-6deg); }
.hero-photo .tape.b { bottom: -8px; right: 10%; transform: rotate(4deg); }
.hero-photo .caption {
  position: absolute; left: -10px; bottom: 16%; background: var(--paper-hi); padding: 6px 14px 4px;
  font: 600 24px/1 var(--f-hand); transform: rotate(-5deg); box-shadow: var(--shadow-paper);
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: center; margin-top: clamp(30px, 5vw, 52px); }

@media (max-width: 720px) {
  .hero-body { grid-template-columns: 1fr; }
  .hero-photo { order: -1; }
  .facts { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
  .facts li:last-child { grid-column: 1 / -1; }
  .facts b { font-size: 24px; }
  .hero-title .note { position: static; display: block; margin: 6px auto 0; text-align: center; transform: rotate(-4deg); }
}