/* Musical Genius editorial sections. Independently implemented from the
   public Skiper72 word reveal and Skiper7 sequence references. */
.svg-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.brandmark { display: block; width: 100%; height: auto; overflow: visible; }
/* The portrait returns to the right half. Upper alignment protects the
   entire head; the larger mark stops before the face, within the red margin. */
.hero-logo-only .hero-content {
  width: 55%;
  padding: clamp(200px, 30vh, 330px) 0 40px 3%;
}
.hero-logo-only h1.hero-logo {
  width: 100%;
  max-width: 1200px;
  margin: 0;
  text-shadow: none;
  line-height: 1;
  transform: translateY(-32px);
}
.hero-logo-only .hero-art { left: 50%; right: 0; top: -64px; bottom: 0; width: 50%; height: calc(100% + 64px); }
.hero-logo-only .hero-art img { object-fit: cover; object-position: left 15%; }
.hero-logo-only .hero-art:after { background: linear-gradient(90deg,var(--red),transparent 8%); }
@media(min-width:1400px) { .hero-logo-only { height: clamp(710px, 48vw, 980px); } }
.event-poster, .event-poster:hover { transform: none; }
.event-art-heading { margin: 18px 0 30px; }
.event-title-art {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 760 / 84;
  overflow: hidden;
  background: var(--red);
}
.event-title-art img {
  position: absolute;
  width: 161.052632%;
  max-width: none;
  height: auto;
  left: -32.894737%;
  top: -436.904762%;
}
.about-section {
  padding: clamp(36px, 4.5vw, 64px) 7%;
  display: grid;
  grid-template-columns: .32fr 1fr;
  gap: 7%;
  overflow: clip;
  border-bottom: 1px solid var(--line);
}
.about-heading { align-self: start; }
.about-heading h2 { font-family: var(--body); font-size: 16px; line-height: 1.4; letter-spacing: -.03em; font-weight: 400; }
.about-heading h2 span { display: block; }
.about-rule { display: block; width: 48px; height: 3px; background: var(--red); margin-top: 24px; }
.about-socials { display: flex; flex-wrap: wrap; gap: 4px; margin: 26px 0 0 -9px; }
.about-socials a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--red); border-radius: 3px; }
.about-socials svg { display: block; flex: none; }
.about-socials a:hover { background: #b5211710; }
.about-socials a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.about-copy { min-width: 0; max-width: 620px; }
.about-copy h3 {
  margin: 0 0 18px;
}
.about-copy p { margin: 0; }
.about-copy p + p { margin-top: 1em; }
.about-copy strong { font-weight: 700; }
.about-copy a { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
/* Pending event words must stay inside their section during the reveal.
   Otherwise the translated words widen the whole mobile document. */
.home-event { overflow: clip; }
.reveal-word { display: inline-block; }
.about-copy.is-animated .reveal-word, .word-reveal-copy.is-animated .reveal-word {
  opacity: 0;
  transform: translateX(64px) skewX(-8deg);
}
.about-copy.is-revealing .reveal-word, .word-reveal-copy.is-revealing .reveal-word {
  animation: about-word-in var(--word-duration, 680ms) cubic-bezier(.2,.8,.2,1) both;
  animation-delay: var(--word-delay, 0ms);
}
@keyframes about-word-in {
  from { opacity: 0; transform: translateX(64px) skewX(-8deg); }
  to { opacity: 1; transform: none; }
}
.about-copy a:focus-visible .reveal-word, .word-reveal-copy a:focus-visible .reveal-word { opacity: 1!important; transform: none!important; }
.lineup-experience { position: relative; overflow: clip; background: #090909; color: #f11313; min-height: 850px; }
.lineup-stage { position: relative; padding: 48px 5% 80px; isolation: isolate; }
.lineup-poster-backdrop { position: absolute; top: 0; right: 0; width: 42%; height: 100%; object-fit: cover; opacity: .12; z-index: -1; pointer-events: none; }
.lineup-stage-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; color: var(--cream); padding-bottom: 42px; }
.lineup-stage-head h2 { font-family: var(--body); font-size: 16px; letter-spacing: -.02em; line-height: 1.3; }
.lineup-stage-head p { grid-column: 1; margin: 0; font-size: 13px; }
.lineup-mark { grid-column: 2; grid-row: 1 / 3; width: 170px; }
.lineup-list { list-style: none; padding: 0; margin: 0; text-align: center; }
.lineup-row { font: 400 clamp(46px,7vw,118px)/1.04 var(--display); letter-spacing: -.075em; white-space: nowrap; }
.lineup-row a, .lineup-row > span { display: inline-block; position: relative; padding-right: .6em; }
.lineup-row:first-child a { padding-right: 0; }
.lineup-row a { transition: color .2s; }
.lineup-row a:hover { color: var(--cream); }
.lineup-row sup { position: absolute; top: .28em; right: -.85em; font: 700 clamp(13px,1.6vw,25px)/1 var(--body); letter-spacing: -.06em; }
.lineup-find { display: block; position: relative; width: fit-content; margin: 60px auto 0; padding: 16px 24px; font-size: 16px; font-weight: 700; color: #fff; border-bottom: 1px solid #f11313; }
.lineup-find:before { content: ''; position: absolute; inset: 0 -80px -60px; z-index: -1; opacity: .5; background: radial-gradient(ellipse at bottom,#9c0808,transparent 70%); pointer-events: none; }
.lineup-intro { display: none; position: absolute; inset: 0; z-index: 3; height: 100svh; max-height: 100%; background: #090909; overflow: hidden; }
.lineup-experience.is-intro-pending .lineup-intro, .lineup-experience.is-intro-playing .lineup-intro, .lineup-experience.is-intro-leaving .lineup-intro { display: block; }
.lineup-film, .lineup-intro-shade { position: absolute; inset: 0; }
.lineup-film { background: #090909 url('assets/images/one-man-show.webp') center / contain no-repeat; }
.lineup-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .1s linear; }
.lineup-frame.is-active { opacity: 1; }
.lineup-frame:not(:last-child) { filter: grayscale(1); }
.lineup-intro-shade { background: linear-gradient(180deg,#0006,transparent 30%,transparent 65%,#0009); pointer-events: none; }
.intro-event-title, .intro-event-date { position: absolute; left: 5%; right: 5%; text-align: center; font-family: var(--display); font-weight: 400; font-synthesis: none; letter-spacing: -.07em; line-height: .86; text-shadow: 0 2px 18px #0005; }
.intro-event-title { top: 6%; font-size: min(9vw,16vh,150px); }
.intro-event-title span { font-size: .9em; }
.intro-event-date { bottom: 7%; font-size: min(7.3vw,13vh,116px); }
.intro-logo { position: absolute; left: 6%; top: 48%; width: min(23%,280px,24vh); }
.lineup-skip { position: absolute; z-index: 4; right: 24px; top: 24px; border: 1px solid #fff6; border-radius: 0; padding: 10px 14px; background: #090909b3; color: #fff; font-size: 12px; }
.lineup-skip[hidden] { display: none; }
.is-intro-leaving .lineup-intro { animation: lineup-curtain 1s cubic-bezier(.785,.135,.15,.86) forwards; }
.is-revealed .lineup-row { animation: lineup-text .65s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--row) * .07s); }
@keyframes lineup-curtain { to { transform: translateY(-101%); } }
@keyframes lineup-text { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }
@media(max-width:900px) {
  .about-section { grid-template-columns: 1fr; gap: 20px; padding-inline: 6%; }
  .about-heading { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; }
  .about-socials { grid-column: 1 / -1; margin-top: 0; }
  .about-heading h2 span { display: inline; }
  .about-rule { margin: 0; }
}
@media(max-width:600px) {
  .hero-logo-only { height: auto; min-height: 0; max-height: none; }
  .hero-logo-only .hero-content { width: 100%; height: auto; padding: 56px 2% 24px; }
  .hero-logo-only h1.hero-logo { width: 100%; max-width: none; margin-inline: auto; transform: translateY(-12px); }
  .hero-logo-only .hero-art { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 1122 / 1402; margin-top: -24px; }
  .hero-logo-only .hero-art img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
  .hero-logo-only .hero-art:after { background: linear-gradient(180deg,var(--red),transparent 14%,transparent 85%,#66070380); }
  .lineup-experience { min-height: 620px; }
  .lineup-stage { padding: 34px 6% 60px; }
  .lineup-stage-head { padding-bottom: 45px; column-gap: 10px; }
  .lineup-stage-head h2 { font-size: 12px; }
  .lineup-stage-head p { font-size: 11px; }
  .lineup-mark { width: 108px; }
  .lineup-row { font-size: 8.4vw; line-height: 1.25; letter-spacing: -.07em; }
  .lineup-row sup { font-size: 10px; right: -1.2em; }
  .lineup-find { margin-top: 34px; font-size: 13px; }
  .lineup-poster-backdrop { width: 100%; opacity: .1; }
  .intro-event-title { top: 13%; font-size: min(11vw,16vh); }
  .intro-event-date { bottom: 16%; font-size: min(11vw,13vh); }
  .intro-logo { width: min(40%,30vh); left: 7%; top: 43%; }
  .lineup-skip { top: 18px; right: 18px; }
}
@media(prefers-reduced-motion:reduce) {
  .about-copy .reveal-word, .word-reveal-copy .reveal-word { opacity: 1!important; transform: none!important; animation: none!important; }
  .lineup-intro, .lineup-skip { display: none!important; }
  .lineup-stage { visibility: visible!important; }
  .lineup-row { opacity: 1!important; transform: none!important; animation: none!important; }
}

/* Shared footer uses the same accessible platform marks as About, in white. */
.footer-social .about-socials { margin-top: 0; }
.footer-social .about-socials a { color: #fff; }
.footer-social .about-socials a:hover { background: #ffffff18; }
.footer-social .about-socials a:focus-visible { outline-color: #fff; }