@font-face {
  font-family: HeroOswald;
  src: url('assets/fonts/oswald.ttf') format('truetype');
  font-weight: 200 700;
  font-display: block;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.site-header-home .nav-wrap,
.sound-index .wrap {
  width: 93%;
  max-width: none;
}

.site-header-home {
  height: 84px;
}

.site-header-home .monogram {
  font: 700 50px/1 HeroOswald, sans-serif;
  gap: 14px;
}

.site-header-home .monogram > span {
  font: 200 55px/1 Sofia, sans-serif;
}

.site-header-home .site-nav {
  margin-left: 50px;
  gap: 70px;
  font: 400 20px/1.2 HeroOswald, sans-serif;
}

.site-header-home .nav-cta {
  color: #fff;
}

.hero {
  height: min(55.15vw, calc(100svh - 128px));
  min-height: 640px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #e51c16;
}

.hero-layout {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  pointer-events: none;
}

.hero-layout a {
  pointer-events: auto;
}

.hero-name {
  position: absolute;
  left: 3.5%;
  top: 13.2%;
  width: 41%;
  height: 68%;
  margin: 0;
  z-index: 1;
  line-height: 1;
}

/* The name is a vector wordmark; its proportions stay stable at every size. */
.hero-wordmark {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #090909;
  font-family: HeroOswald, sans-serif;
  font-weight: 700;
  font-synthesis: none;
  letter-spacing: 0;
}

.hero-portrait {
  position: absolute;
  top: 0;
  right: 10.4%;
  width: 48.5%;
  aspect-ratio: 1055 / 1490;
  z-index: 2;
  pointer-events: none;
}

.hero-portrait img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.hero-intro {
  position: absolute;
  left: 3.65%;
  bottom: 6.1%;
  margin: 0;
  color: #fff;
  font: 300 24px/1.5 HeroOswald, sans-serif;
  z-index: 3;
}

.hero-intro span {
  display: block;
}

.hero-play {
  position: absolute;
  right: 2.7%;
  bottom: 6.8%;
  display: grid;
  grid-template-columns: 60px 115px;
  align-items: center;
  gap: 18px;
  color: #fff;
  font: 400 17px/1.25 HeroOswald, sans-serif;
  z-index: 3;
}

.hero-play-icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  color: #090909;
  transition: transform .2s;
}

.hero-play-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.hero-play:hover .hero-play-icon {
  transform: scale(1.08);
}

.sound-index {
  padding: 30px 0 38px;
}

.sound-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.sound-layout > * {
  min-width: 0;
}

.sound-layout h2 {
  width: 200%;
  transform: scaleX(.5);
  transform-origin: left top;
  font: 700 142px/1 HeroOswald, sans-serif;
  white-space: nowrap;
}

.sound-links a {
  padding: 15px 0;
}

.sound-links h3 {
  font: 700 36px/1.05 HeroOswald, sans-serif;
}

.sound-links a > span {
  font: 400 23px/1 HeroOswald, sans-serif;
}

@media (min-width: 2000px) {
  .hero { min-height: 760px; }
  .hero-intro { font-size: 28px; }
}

@media (min-width: 961px) and (max-width: 1440px) {
  .sound-layout h2 { font-size: 128px; }
}

@media (min-width: 961px) and (max-width: 1200px) {
  .site-header-home .site-nav { margin-left: 24px; gap: 42px; }
  .hero { min-height: 610px; }
  .hero-intro { font-size: 21px; }
  .hero-play { grid-template-columns: 52px 95px; gap: 14px; font-size: 18px; }
  .hero-play-icon { width: 52px; height: 52px; }
  .sound-layout h2 { font-size: 98px; }
  .sound-links h3 { font-size: 30px; }
}

@media (min-width: 641px) and (max-width: 960px) {
  .hero { height: 680px; min-height: 0; }
  .hero-name { top: 17%; width: 46%; height: 62%; }
  .hero-portrait { top: 5%; bottom: auto; right: -2%; width: 61%; }
  .hero-intro { font-size: 20px; max-width: 330px; bottom: 6%; }
  .hero-play { grid-template-columns: 50px 84px; gap: 12px; font-size: 17px; }
  .hero-play-icon { width: 50px; height: 50px; }
  .sound-layout { gap: 25px; }
  .sound-layout h2 { font-size: 68px; }
  .sound-links h3 { font-size: 27px; }
}

@media (min-width: 641px) and (max-width: 767px) {
  .sound-layout h2 { font-size: 58px; }
}

@media (max-width: 960px) {
  .site-header-home .site-nav {
    top: 84px;
    margin: 0;
    padding: 24px 3.5%;
    gap: 8px;
    font-family: HeroOswald, sans-serif;
  }
  .site-header-home .site-nav .nav-cta { color: #090909; }
}

@media (min-width: 641px) and (max-height: 700px) {
  .hero { height: calc(100svh - 80px); min-height: 0; }
  .hero-name { top: 18%; height: 60%; }
  .hero-intro { font-size: 18px; bottom: 4%; }
  .hero-play { bottom: 4%; }
}

@media (max-width: 640px) {
  .site-header-home { height: 72px; }
  .site-header-home .nav-wrap,
  .sound-index .wrap { width: calc(100% - 40px); }
  .site-header-home .site-nav { top: 72px; padding: 20px; }
  .site-header-home .monogram { font-size: 39px; gap: 10px; }
  .site-header-home .monogram > span { font-size: 46px; }
  .hero { height: min(820px, calc(100svh - 70px)); min-height: 620px; }
  .hero-name { left: 20px; top: 94px; width: calc(100% - 40px); height: 250px; }
  .hero-portrait { width: 360px; max-width: 100%; top: auto; right: -38px; bottom: -86px; }
  .hero-intro { left: 20px; top: 380px; bottom: auto; max-width: 110px; font-size: 20px; line-height: 1.2; }
  .hero-intro span + span { margin-top: 20px; font: 400 11px/1.5 Golos, sans-serif; }
  .hero-play { left: 20px; right: auto; bottom: 30px; grid-template-columns: 46px 82px; gap: 12px; font-size: 17px; color: #090909; }
  .hero-play-icon { width: 46px; height: 46px; }
  .hero-play-icon svg { width: 20px; height: 20px; }
  .sound-index { padding: 24px 0 30px; }
  .sound-layout { grid-template-columns: minmax(0, 1fr); }
  .sound-layout h2 { font-size: 79px; }
  .sound-links h3 { font-size: 29px; }
  .sound-links a > span { font-size: 20px; }
}

@media (max-width: 640px) and (max-height: 700px) {
  .hero { height: calc(100svh - 40px); min-height: 0; }
  .hero-name { top: 82px; height: 210px; }
  .hero-portrait { top: 285px; bottom: auto; width: 280px; right: -28px; }
  .hero-intro { top: 322px; max-width: 110px; font-size: 19px; }
  .hero-intro span + span { margin-top: 15px; font-size: 11px; }
  .hero-play { bottom: 22px; font-size: 16px; }
}

@media (max-width: 360px) {
  .hero-name { height: 220px; }
  .hero-intro { top: 348px; max-width: 108px; font-size: 20px; }
  .sound-layout h2 { font-size: 66px; }
}

@media (max-width: 360px) and (max-height: 700px) {
  .hero-name { height: 205px; }
  .hero-intro { top: 317px; font-size: 18px; }
  .hero-portrait { width: 260px; right: -24px; }
}

/* The homepage continues the hero as a sequence of concert-poster spreads. */
.tour-map{background:#111;color:#fff;padding:95px 0 65px}
.tour-heading{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:55px}
.tour-heading h2{font:600 86px/1.04 HeroOswald,sans-serif;text-transform:uppercase}
.tour-heading .chapter{font-size:19px;color:#ff5e55}
.tour-canvas{position:relative;aspect-ratio:2.25;overflow:hidden;touch-action:pan-y}
.map-country-name{position:absolute;right:0;bottom:10px;max-width:100%;font:400 26px/1.3 HeroOswald,sans-serif;pointer-events:none;background:#111d;padding:8px 15px}
.world-map{display:block;width:100%;height:100%}
.map-country{fill:#292929;stroke:#111;stroke-width:.65;vector-effect:non-scaling-stroke}
.map-visited{fill:#87332e;cursor:pointer;transition:fill .2s}
.map-visited:hover,.map-visited[aria-pressed=true]{fill:#e51c16}
.map-visited:focus-visible{outline:none;stroke:#fff;stroke-width:2}
.map-pin{fill:#fff;cursor:pointer}
.map-pin .pin-target{fill:transparent}
.map-pin.is-active{fill:#fff;stroke:#e51c16;stroke-width:2}
@media(max-width:960px){.tour-heading h2{font-size:70px}}
@media(max-width:640px){.tour-map{padding:55px 0 40px}.tour-heading{margin-bottom:20px}.tour-heading h2{font-size:43px;max-width:280px}.tour-canvas{aspect-ratio:1.3}.map-country-name{font-size:21px;max-width:155px;padding:8px 0;background:none;overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){.map-country{transition:none}}
.poster-wrap { width: 93%; max-width: 1800px; margin-inline: auto; }
.chapter { display: block; color: var(--red); font: 400 21px/1.2 HeroOswald, sans-serif; margin-bottom: 22px; }
.scene-story { display: grid; grid-template-columns: 46% 54%; padding: 0; border: 0; }
.scene-story .scene-copy { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 25px; padding: 55px 28px 60px 7.6%; align-content: center; }
.scene-copy > .chapter { border-left: 2px solid var(--red); padding-left: 8px; margin: 0; }
.scene-story .sound-layout h2 { width: auto; transform: none; font: 700 88px/1.04 HeroOswald, sans-serif; text-transform: uppercase; white-space: normal; }
.scene-copy p { max-width: 370px; margin: 28px 0 24px; font-size: 15px; }
.scene-photo { overflow: hidden; background: #094c86; height: 720px; min-height: 0; }
.scene-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }
.scene-story .text-link, .poster-bio .text-link, .poster-music .text-link { font-family: HeroOswald, sans-serif; font-size: 23px; }
.poster-programs { padding: 100px 0; background: #090909; color: #fff; }
.poster-heading { display: flex; justify-content: space-between; gap: 45px; align-items: end; margin-bottom: 42px; }
.poster-heading h2 { font: 700 130px/1 HeroOswald, sans-serif; text-transform: uppercase; }
.poster-heading > div { padding-bottom: 5px; }
.poster-heading p { font-size: 14px; margin-bottom: 15px; }
.poster-heading .text-link { font: 400 23px/1.2 HeroOswald, sans-serif; }
.poster-program-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 27px; }
.poster-program { min-width: 0; display: flex; flex-direction: column; }
.poster-program:last-child { border: 0; padding: 0; }
.poster-number { color: #ff3b32; font: 500 32px/1 HeroOswald,sans-serif; }
.poster-program h3 { font: 600 36px/1.15 HeroOswald,sans-serif; margin: 22px 0 30px; min-height: 83px; }
.poster-image { aspect-ratio: 1.1; overflow: hidden; }
.poster-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform .35s; }
.poster-program:nth-child(2) .poster-image img { object-position: 42% 50%; }
.poster-program p { font-size: 13px; line-height: 1.6; color: #d6d1d0; margin: 20px 0 26px; }
.poster-program-foot { margin-top: 28px; border-bottom: 1px solid #fff5; padding-bottom: 12px; display: flex; justify-content: space-between; gap: 16px; font: 400 21px/1.2 HeroOswald,sans-serif; }
.poster-program:hover .poster-image img { transform: scale(1.025); }
.poster-program:hover .poster-program-foot { color: #ff5e55; border-color: currentColor; }
.poster-live { background: var(--red); color: #fff; overflow: hidden; }
.live-layout { display: grid; grid-template-columns: .9fr 1.25fr 1fr; gap: 30px; min-height: 490px; position: relative; }
.live-copy { padding: 42px 0 45px; z-index: 1; }
.live-copy .chapter { color: #fff; }
.live-copy h2 { font: 700 90px/1.05 HeroOswald,sans-serif; text-transform: uppercase; }
.live-copy p { font-size: 14px; max-width: 240px; margin: 28px 0; }
.live-play { display: inline-flex; align-items: center; gap: 16px; font: 400 23px/1.2 HeroOswald,sans-serif; }
.live-play .hero-play-icon { width: 54px; height: 54px; flex-shrink: 0; }
.live-portrait { position: relative; min-width: 0; align-self: stretch; }
.live-portrait img { position: absolute; width: 100%; height: auto; max-width: none; top: 20px; }
.live-tracks { align-self: center; padding: 40px 0; z-index: 1; }
.live-tracks > a:not(.text-link) { display: grid; grid-template-columns: 24px minmax(0,1fr) 22px; gap: 15px; padding: 20px 0; border-bottom: 1px solid #fff8; align-items: start; }
.live-tracks > a > span { font: 400 21px/1.3 HeroOswald,sans-serif; }
.live-tracks h3 { font: 500 27px/1.25 HeroOswald,sans-serif; }
.live-tracks small { display: block; font-size: 11px; margin-top: 5px; }
.live-tracks .text-link { font: 400 21px/1.2 HeroOswald,sans-serif; margin-top: 25px; }
.poster-live a:hover { color: #090909; }
.poster-live a:focus-visible, .poster-programs a:focus-visible, .poster-contact a:focus-visible { outline-color: #fff; }
.poster-bio { display: grid; grid-template-columns: 44% 56%; background: #eef0f1; }
.poster-bio-copy { padding: 52px 36px 55px 8%; align-self: center; }
.poster-bio h2 { font: 700 79px/1.04 HeroOswald,sans-serif; text-transform: uppercase; margin-bottom: 30px; }
.poster-bio p { font-size: 14px; max-width: 355px; }
.poster-bio .text-link { margin-top: 12px; }
.poster-bio-photo { overflow: hidden; max-height: 610px; }
.poster-bio-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.poster-music { padding: 45px 0; border-top: 1px solid var(--line); }
.music-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.poster-music h2 { font: 600 62px/1.07 HeroOswald,sans-serif; text-transform: uppercase; }
.poster-music p { font-size: 15px; max-width: 430px; }
.music-links { display: flex; flex-wrap: wrap; gap: 25px; margin-top: 28px; }
.poster-contact { padding: 42px 0 27px; background: var(--red); color: #fff; }
.contact-heading { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.contact-heading h2 { font: 700 94px/1.04 HeroOswald,sans-serif; text-transform: uppercase; }
.contact-heading .button { font-family: HeroOswald,sans-serif; font-size: 23px; padding: 20px 26px; }
.contact-heading .button:hover { background: #fff; color: #090909; border-color: #fff; }
.audience-links { display: flex; gap: 35px; justify-content: space-between; margin-top: 38px; padding-top: 22px; border-top: 1px solid #fff7; }
.audience-links .text-link { font: 400 21px/1.2 HeroOswald,sans-serif; border: 0; gap: 15px; }
.audience-links .text-link:hover { color: #090909; }
body:has(.poster-contact) .footer { background: #090909; color: #fff; border: 0; }
body:has(.poster-contact) .footer .brand, body:has(.poster-contact) .footer-links { font-family: HeroOswald,sans-serif; }
body:has(.poster-contact) .footer-bottom { color: #aaa; }
@media(min-width:1800px) {
  .scene-story { grid-template-columns: 1fr 1fr; }
  .scene-story .scene-copy { padding-left: max(7%,calc((100vw - 1800px)/2)); }
  .scene-story .sound-layout h2 { font-size: 110px; }
  .scene-photo { height: 800px; }
}
@media(min-width:1201px) and (max-width:1440px) {
  .scene-story .sound-layout h2 { font-size: 76px; }
}
@media(max-width:1200px) {
  .scene-story .scene-copy { padding-block: 45px; gap: 16px; }
  .scene-story .sound-layout h2 { font-size: 59px; }
  .scene-photo { height: 590px; }
  .poster-heading h2 { font-size: 105px; }
  .poster-program-grid { gap: 20px; }
  .poster-program { padding-right: 0; }
  .poster-program h3 { font-size: 30px; min-height: 70px; }
  .live-layout { gap: 24px; grid-template-columns: .9fr 1fr 1fr; }
  .live-copy h2 { font-size: 72px; }
  .poster-bio h2 { font-size: 67px; }
  .contact-heading h2 { font-size: 80px; }
}
@media(max-width:960px) {
  .scene-story .sound-layout h2 { font-size: 45px; }
  .scene-story .scene-copy { padding-left: 7%; padding-right: 20px; grid-template-columns: 20px minmax(0,1fr); gap: 12px; }
  .scene-copy p { font-size: 13px; }
  .scene-photo { height: 540px; }
  .poster-heading h2 { font-size: 80px; }
  .poster-heading { gap: 25px; }
  .poster-heading p { font-size: 12px; }
  .poster-program h3 { font-size: 26px; min-height: 62px; }
  .poster-program p { font-size: 12px; }
  .live-layout { grid-template-columns: 1fr 1fr; min-height: 0; }
  .live-copy { padding-bottom: 22px; }
  .live-portrait { grid-column: 2; grid-row: 1 / 3; }
  .live-portrait img { top: 70px; }
  .live-tracks { padding-top: 0; }
  .poster-bio h2 { font-size: 53px; }
  .poster-bio-copy { padding-right: 25px; }
  .poster-bio p { font-size: 13px; }
  .music-layout { gap: 35px; }
  .poster-music h2 { font-size: 49px; }
  .contact-heading h2 { font-size: 64px; }
  .audience-links { gap: 20px; }
  .audience-links .text-link { font-size: 18px; }
}
@media(max-width:640px) {
  .poster-wrap { width: calc(100% - 40px); }
  .scene-story { grid-template-columns: 1fr; }
  .scene-story .scene-copy { padding: 34px 20px 32px; grid-template-columns: 22px minmax(0,1fr); gap: 18px; }
  .scene-story .sound-layout h2 { font-size: 47px; line-height: 1.05; }
  .scene-copy p { font-size: 13px; margin: 22px 0; max-width: 330px; }
  .scene-photo { min-height: 0; height: 470px; }
  .scene-photo img { object-position: 50% 8%; }
  .poster-programs { padding: 60px 0; }
  .poster-heading { display: block; margin-bottom: 32px; }
  .poster-heading h2 { font-size: 50px; margin-bottom: 20px; }
  .poster-heading p { font-size: 13px; }
  .poster-program-grid { grid-template-columns: 1fr; gap: 34px; }
  .poster-program { border-right: 0; padding-right: 0; }
  .poster-program h3 { font-size: 32px; min-height: 0; margin-bottom: 18px; }
  .poster-image { aspect-ratio: 1.1; }
  .poster-program p { font-size: 13px; margin-block: 17px; }
  .poster-number { font-size: 28px; }
  .live-layout { grid-template-columns: 1fr; gap: 0; }
  .live-copy { padding: 34px 0 28px; }
  .live-copy h2 { font-size: 67px; }
  .live-copy p { max-width: 285px; margin: 20px 0; }
  .live-portrait { grid-column: auto; grid-row: auto; height: 330px; overflow: hidden; margin-inline: -20px; background: var(--red); }
  .live-portrait img { top: 0; width: 300px; left: 50%; transform: translateX(-50%); }
  .live-tracks { padding: 10px 0 32px; }
  .live-tracks h3 { font-size: 27px; }
  .poster-bio { grid-template-columns: 1fr; }
  .poster-bio-copy { padding: 34px 20px; }
  .poster-bio h2 { font-size: 63px; margin-bottom: 23px; }
  .poster-bio p { font-size: 14px; }
  .poster-bio-photo { height: 420px; }
  .music-layout { grid-template-columns: 1fr; gap: 24px; }
  .poster-music { padding: 34px 0; }
  .poster-music h2 { font-size: 51px; }
  .poster-music p { font-size: 14px; }
  .music-links { gap: 20px; margin-top: 22px; }
  .poster-contact { padding-top: 32px; }
  .contact-heading { display: block; }
  .contact-heading h2 { font-size: 61px; }
  .contact-heading .button { margin-top: 27px; font-size: 22px; padding: 17px 20px; gap: 22px; }
  .audience-links { flex-direction: column; gap: 18px; margin-top: 32px; }
  .audience-links .text-link { font-size: 22px; justify-content: space-between; }
}
@media(max-width:360px) {
  .scene-story .sound-layout h2 { font-size: 39px; }
  .scene-photo { height: 390px; }
  .poster-heading h2 { font-size: 42px; }
  .poster-bio h2 { font-size: 55px; }
  .poster-music h2 { font-size: 44px; }
  .contact-heading h2 { font-size: 52px; }
}