@font-face {
  font-family: Merriweather;
  src: url("fonts/merriweather.woff2") format("woff2");
  font-weight: 600 750;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("fonts/inter.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
:root {
  --plum: #2e0f4f;
  --violet: #6a2db8;
  --coral: #ff6b6b;
  --amber: #ffc857;
  --teal: #0f7a7a;
  --cream: #fff4e6;
  --line: color-mix(in srgb, currentColor 24%, transparent);
  font-family: Inter, sans-serif;
  color: var(--plum);
  background: var(--cream);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-underline-offset: .24em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
img { display: block; max-width: 100%; }
h1, h2, h3 {
  font-family: Merriweather, serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.035em;
  margin: 0;
}
p { line-height: 1.65; margin: 0 0 1em; }
.wrap { width: min(1190px, calc(100% - 96px)); margin-inline: auto; }
.skip { position: absolute; left: 12px; top: 12px; z-index: 7; transform: translateY(-200%); background: var(--cream); padding: 12px; }
.skip:focus { transform: none; }
.mast { display: flex; align-items: center; justify-content: space-between; min-height: 74px; gap: 20px; }
.logo { width: 162px; height: auto; }
.mast nav, .foot-links { display: flex; gap: 24px; flex-wrap: wrap; }
.mast nav a, .foot-links a { font-weight: 650; text-decoration: none; font-size: .88rem; }
.mast nav a:hover, .foot-links a:hover { text-decoration: underline; }
.hero { background: var(--plum); color: var(--cream); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.hero-copy {
  padding: clamp(42px, 5.2vw, 92px) clamp(28px, 4.3vw, 76px);
  align-self: center;
}
.hero-lockup { width: min(260px, 64%); height: auto; margin-bottom: clamp(24px, 3vw, 43px); }
.hero h1 { font-size: clamp(2.4rem, 4.22vw, 4.75rem); overflow-wrap: normal; }
.hero h1 span { color: var(--amber); }
.hero p { margin: 22px 0 26px; max-width: 36ch; }
.hero-art { width: 100%; height: 100%; min-height: 480px; object-fit: cover; object-position: 69% center; }
.button { display: inline-flex; align-items: center; gap: 13px; background: var(--amber); color: var(--plum); font-weight: 700; padding: 13px 16px; text-decoration: none; }
.button:hover { background: var(--cream); }
.pitch { padding: 73px 0 50px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.pitch h2, .cast h2, .where h2, .contact h2 { font-size: clamp(2.1rem, 4.3vw, 4.25rem); }
.pitch p { font-size: 1.11rem; max-width: 46ch; }
.cast { padding: 70px 0; }
.cast header { margin-bottom: 28px; }
.cast header p { margin-top: 12px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cards article { background: var(--plum); color: var(--cream); border-bottom: 4px solid var(--coral); }
.cards img { width: 100%; aspect-ratio: 1 / 1.025; object-fit: cover; object-position: center 24%; }
.cards .copy { padding: 22px; }
.cards h3 { font-size: clamp(1.55rem, 2.5vw, 2.25rem); margin-bottom: 12px; }
.cards p { margin: 0; }
.where { background: var(--plum); color: var(--cream); padding: 50px 0; }
.where .wrap, .contact { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.channels { display: flex; gap: 20px; flex-wrap: wrap; color: var(--amber); font-size: .9rem; }
.contact { padding: 62px 0; }
.contact p { margin: 0; }
.contact a { overflow-wrap: anywhere; }
.footer { border-top: 1px solid var(--line); padding: 26px 0; }
.footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer p { margin: 0; font-size: .88rem; }
.legal { width: min(760px, calc(100% - 44px)); margin: 0 auto; padding: 60px 0 84px; }
.legal h1 { font-size: clamp(3rem, 7vw, 5.4rem); margin-bottom: 20px; }
.legal h2 { font-size: 1.9rem; margin: 33px 0 12px; }
@media (max-width: 830px) {
  .wrap { width: calc(100% - 48px); }
  .cards .copy { padding: 16px; }
  .hero-art { min-height: 400px; }
}
@media (max-width: 650px) {
  .wrap { width: calc(100% - 36px); }
  .mast { min-height: 64px; gap: 9px; }
  .logo { width: 120px; }
  .mast nav { gap: 8px; }
  .mast nav a { font-size: .72rem; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding: 31px 20px 30px; }
  .hero-lockup { width: 164px; margin-bottom: 20px; }
  .hero h1 { font-size: clamp(2.15rem, 8.9vw, 3.6rem); }
  .hero p { margin: 16px 0 21px; }
  .hero-art { min-height: 0; height: auto; aspect-ratio: 1.42; object-position: 72% center; }
  .pitch, .where .wrap, .contact { grid-template-columns: 1fr; gap: 18px; }
  .pitch, .cast, .where, .contact { padding-block: 42px; }
  .cards { grid-template-columns: 1fr; }
  .cards article { display: grid; grid-template-columns: 41% 1fr; }
  .cards img { height: 100%; min-height: 157px; }
  .cards p { font-size: .88rem; }
  .foot-links { gap: 16px; }
}