@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/bricolage.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
:root {
  --paper: #fffaea;
  --surface: #ddeef9;
  --ink: #142c65;
  --muted: #34436c;
  --line: #b4bed1;
  --red: #163d95;
  --sun: #ffdd58;
  --peach: #ffc3a4;
}
::selection { background: var(--peach); color: var(--ink); }
.nav { background: var(--sun); border-color: #aa8e29; }
h1, h2 {
  font-family: "Bricolage Grotesque", "Host Grotesk", sans-serif;
  font-weight: 800;
}
.btn { border-radius: 10px; }
.btn:hover { background: #2458bb; }
.festival-hero { background: var(--sun); padding-block: 46px; }
.festival-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(20px, 4vw, 64px);
}
.festival-copy h1 { font-size: clamp(54px, 7vw, 96px); line-height: .93; }
.festival-copy h1 span { display: block; }
.festival-copy p { font-size: clamp(17px, 1.45vw, 21px); max-width: 35ch; margin-block: 26px; }
.festival-photo {
  height: clamp(430px, 73svh, 650px);
  border-radius: 50% 50% 16px 16px / 37% 37% 16px 16px;
  border: 2px solid var(--ink);
}
.festival-photo img { object-position: 64% center; }
.work { background: var(--paper); }
.work .photo-pair { grid-template-columns: 1fr 1fr; }
.work .photo-pair .frame { border-radius: 24px; }
.services { background: var(--surface); }
.about { background: var(--paper); }
.region { background: var(--surface); }
.contact { background: var(--peach); }
@media (max-width: 960px) and (min-width: 721px) {
  .festival-copy h1 { font-size: clamp(48px, 6.6vw, 64px); }
}
@media (max-width: 720px) {
  .festival-hero { padding-block: 28px 36px; }
  .festival-grid { grid-template-columns: 1fr; gap: 24px; }
  .festival-copy h1 { font-size: clamp(45px, 13vw, 68px); line-height: .98; }
  .festival-copy h1 span { display: inline; }
  .festival-copy p { margin-block: 16px 20px; }
  .festival-copy .btn { width: 100%; }
  .festival-photo {
    height: clamp(220px, 33svh, 350px);
    border-radius: 50% 50% 10px 10px / 27% 27% 10px 10px;
  }
  .work .photo-pair { grid-template-columns: 1fr; }
}