/* Consistent typographic system for four portfolio heroes.
   Apply AFTER selected-about, scores-live, live-metrics and inline selected hero styles.
   Affects ONLY Selected Productions, Original Scores, Live Production and About.
   Contact is untouched apart from its 05 label in index.php. */

/* Shared typography: identical kicker position, h1 scale, line height and margins. */
body.page-selected-productions .productions-hero .productions-copy > .section-kicker,
body.page-original-scores .page-hero.page-hero-scores > .wrap > .section-kicker,
body.page-live-production .live-hero-intro > .section-kicker,
body.page-about .about-hero-intro > .section-kicker {
  display: block;
  width: max-content;
  max-width: 100%;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .19em;
  line-height: 1.5;
  text-transform: uppercase;
  color: #b9afa3;
  margin: 0;
}
body.page-selected-productions .productions-copy h1,
body.page-original-scores .page-hero.page-hero-scores h1,
body.page-live-production .live-hero-intro h1,
body.page-about .about-hero-intro h1 {
  font-family: var(--d);
  font-size: clamp(46px,5.25vw,80px);
  font-weight: 700;
  letter-spacing: -.085em;
  line-height: 1.04;
  margin: 22px 0 26px;
  max-width: none;
  color: #f6f1ea;
}
body.page-selected-productions .productions-copy h1 i,
body.page-original-scores .page-hero.page-hero-scores h1 i,
body.page-live-production .live-hero-intro h1 i,
body.page-about .about-hero-intro h1 i {
  display: inline-block;
  font-size: .78em;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -.082em;
  line-height: 1.12;
  color: #998a7c;
}

/* Fixed 600px desktop canvas and same kicker y-offset (74px) in every hero. */
body.page-selected-productions .productions-hero.productions-hero-dark {
  height: 600px;
  min-height: 600px;
}
body.page-selected-productions .productions-hero .productions-hero-inner {
  height: 600px;
  min-height: 600px;
  padding-top: 74px;
  padding-bottom: 40px;
  align-items: start;
}
body.page-selected-productions .productions-hero .productions-copy {
  align-self: start;
  padding-bottom: 0;
  min-width: 0;
}
body.page-selected-productions .productions-hero-player {
  align-self: center;
  min-width: 0;
}

body.page-original-scores .page-hero.page-hero-dark.page-hero-scores {
  height: 600px;
  min-height: 600px;
  padding: 74px 0 40px;
  align-items: stretch;
}
body.page-original-scores .page-hero.page-hero-scores > .wrap {
  align-self: stretch;
  margin-top: 0;
  margin-bottom: 0;
}

body.page-live-production .page-hero.page-hero-dark.live-hero-rich {
  height: 600px;
  min-height: 600px;
  padding: 0;
  align-items: stretch;
}
body.page-live-production .page-hero.live-hero-rich > .live-hero-inner {
  height: 600px;
  min-height: 600px;
  align-items: center;
}
body.page-live-production .live-hero-intro {
  align-self: stretch;
  min-width: 0;
  padding-top: 74px;
}

body.page-about .page-hero.about-hero-rich {
  display: flex;
  height: 600px;
  min-height: 600px;
  padding: 0;
  align-items: stretch;
}
body.page-about .about-hero-inner {
  height: 600px;
  min-height: 600px;
  align-items: center;
}
body.page-about .about-hero-intro {
  min-width: 0;
  align-self: stretch;
  padding-top: 74px;
}

/* Tablet: all headings still share the same scale and kicker position.
   Layouts with data to the right become stacked where they already did. */
@media (max-width: 900px) {
  body.page-selected-productions .productions-hero .productions-hero-inner {padding-top: 60px}
  body.page-original-scores .page-hero.page-hero-dark.page-hero-scores {padding-top: 60px}
  body.page-live-production .live-hero-intro {padding-top: 60px}
  body.page-about .about-hero-intro {padding-top: 60px}
  body.page-live-production .page-hero.page-hero-dark.live-hero-rich,
  body.page-about .page-hero.about-hero-rich {
    height: auto;
    min-height: 540px;
    padding: 0;
  }
  body.page-live-production .page-hero.live-hero-rich > .live-hero-inner,
  body.page-about .about-hero-inner {
    height: auto;
    min-height: 540px;
    align-items: start;
    padding-bottom: 58px;
  }
  body.page-live-production .live-hero-intro,
  body.page-about .about-hero-intro {align-self: start}
  body.page-selected-productions .productions-copy h1,
  body.page-original-scores .page-hero.page-hero-scores h1,
  body.page-live-production .live-hero-intro h1,
  body.page-about .about-hero-intro h1 {
    font-size: clamp(42px, 6.9vw, 62px);
    margin: 22px 0 25px;
  }
}
@media (max-width: 790px) {
  body.page-selected-productions .productions-hero.productions-hero-dark,
  body.page-selected-productions .productions-hero .productions-hero-inner {
    height: auto;
    min-height: 540px;
  }
  body.page-about .page-hero.about-hero-rich {padding-block: 0 !important}
  body.page-selected-productions .productions-hero .productions-hero-inner {
    padding-top: 60px;
    padding-bottom: 55px;
    align-items: start;
  }
  body.page-original-scores .page-hero.page-hero-dark.page-hero-scores {
    height: auto;
    min-height: 540px;
    padding: 60px 0 60px;
  }
}
@media (max-width: 540px) {
  body.page-selected-productions .productions-hero .productions-hero-inner {padding-top: 46px; padding-bottom: 46px}
  body.page-original-scores .page-hero.page-hero-dark.page-hero-scores {padding-top: 46px; padding-bottom: 46px}
  body.page-live-production .live-hero-intro,
  body.page-about .about-hero-intro {padding-top: 46px}
  body.page-selected-productions .productions-copy h1,
  body.page-original-scores .page-hero.page-hero-scores h1,
  body.page-live-production .live-hero-intro h1,
  body.page-about .about-hero-intro h1 {
    font-size: clamp(35px, 9vw, 49px);
    line-height: 1.05;
    margin: 19px 0 22px;
  }
  body.page-selected-productions .productions-copy h1 i,
  body.page-original-scores .page-hero.page-hero-scores h1 i,
  body.page-live-production .live-hero-intro h1 i,
  body.page-about .about-hero-intro h1 i {font-size: .78em}
  body.page-live-production .page-hero.live-hero-rich > .live-hero-inner,
  body.page-about .about-hero-inner {padding-bottom: 46px}
}