/* The flyer: one page whose job is to be shared, opened once, read in ten
   seconds and acted on. The poster carries the mood; the type beside it carries
   the facts, because a picture of words is not words. */

.flyer-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 80% at 50% 0%, #15140F 0%, var(--ink) 58%) fixed;
}

.flyer-bar {
  display: flex; align-items: baseline; gap: 14px;
  padding: 22px 30px; border-bottom: 1px solid var(--ink-edge);
}
.flyer-bar .wordmark {
  font-family: var(--mono); font-size: 14px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--cream); text-decoration: none;
}
.flyer-bar .wordmark:hover { color: var(--brass); }
.flyer-bar .years {
  font-family: var(--mono); font-size: 12px; letter-spacing: .22em; color: var(--brass-dim);
}
.bar-cta { display: none; }

/* The poster hangs on the right and the words read down the left, the way a
   playbill sits beside the thing it announces. The poster still comes first in
   the markup — it is the page's largest paint, and on a phone it is what the
   person opened the link to see. */
.flyer {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(20rem, 30rem) 34rem;
  gap: clamp(40px, 6vw, 96px);
  align-content: center; justify-content: center;
  padding: clamp(32px, 5vw, 76px) 30px clamp(48px, 6vw, 96px);
}
.poster   { grid-column: 2; }
.playbill { grid-column: 1; grid-row: 1; }

/* The poster sits on the same black it was designed against, so its own
   background dissolves into the page instead of ending in a rectangle. */
.poster { margin: 0; }
.poster img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .6);
}

.playbill { align-self: center; max-width: 30rem; }

.composers {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.6rem, 6vw, 4.3rem); line-height: .96;
  letter-spacing: .015em; text-transform: uppercase;
  color: var(--cream); margin: 0;
}
.composers span { display: block; }

.tagline {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.15rem); color: var(--cream-dim);
  margin: 18px 0 0;
}

.when {
  font-family: var(--display); font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  color: var(--brass); margin: 30px 0 0;
  padding-top: 26px; border-top: 1px solid var(--brass-dim);
}
.where {
  font-family: var(--mono); font-size: 13.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cream-dim); margin: 10px 0 0;
}

/* Who plays, and on what. The instrument is data, so it is set in the face
   this site keeps for data. */
.cast {
  display: grid; grid-template-columns: max-content max-content;
  gap: 4px 20px; margin: 30px 0 0;
}
.cast dt {
  font-family: var(--display); font-size: 1.15rem; color: var(--cream);
}
.cast dd {
  margin: 0; align-self: end;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brass-dim); padding-bottom: 3px;
}

.offer {
  font-size: 15.5px; color: var(--cream-dim); margin: 30px 0 0; max-width: 26rem;
}

.acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.acts .btn { width: auto; padding-left: 24px; padding-right: 24px; }
.acts a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.share-note { font-size: 13px; color: var(--brass); margin: 10px 0 0; min-height: 1em; }

.occasion {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brass-dim);
  margin: 34px 0 0; padding-top: 18px; border-top: 1px solid var(--ink-edge);
}

@media (max-width: 860px) {
  /* The bar carries the ticket link and stays put while the poster scrolls by,
     so the one action on the page is never more than a thumb away. */
  .flyer-bar {
    position: sticky; top: 0; z-index: 10;
    background: var(--ink); padding: 12px 20px;
    align-items: center; gap: 10px;
  }
  /* The dates are the first thing to go: the button needs the width more. */
  .flyer-bar .years { display: none; }
  .bar-cta {
    display: inline-flex; align-items: center; width: auto; margin-left: auto;
    padding: 9px 18px; font-size: 12px; text-decoration: none; white-space: nowrap;
  }

  /* One column that is the width of the screen, not 32rem: a track with a
     definite max takes that width whether the phone has it or not, and the
     overflow stretched the whole page — including the bar the button sits in. */
  .flyer {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    gap: 34px;
    padding: 26px 20px 56px;
  }
  .poster, .playbill {
    grid-column: 1; grid-row: auto;
    width: 100%; max-width: 32rem; margin-inline: auto;
  }
  /* On a phone the poster would fill the screen and push the way in below two
     scrolls of it, so it is capped at just over half the viewport: enough to
     read, short enough that the date and the button arrive with it. */
  .poster img {
    max-height: 56vh; width: auto; max-width: 100%; margin: 0 auto;
  }
  .playbill { max-width: none; }
  .acts .btn { flex: 1 1 14rem; justify-content: center; }
}