/* ══════════════════════════════════════════════════════════════════════════
   Direction 1a — Clean & Modern
   Ink on paper, one red, visible grid. The show does the shouting.

   Rules are the divider grey at 2px/1px, everything is left-aligned, and the
   only colour in the system is --color-accent used sparingly and at full
   strength. Type is Archivo 800 set tight and large.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --surface-page: var(--color-bg);
  --edge: var(--color-divider);
  --accent-strong: var(--color-accent);
}

body { background: var(--color-bg); }

.masthead { border-bottom: var(--rule) solid var(--edge); }
.subnav { border-bottom: var(--rule) solid var(--edge); }

/* The homepage hero scrim reads left-to-right so the type sits on ink. */
.hero__scrim {
  background: linear-gradient(100deg,
    rgb(32 30 29 / 0.92) 0%,
    rgb(32 30 29 / 0.72) 38%,
    rgb(32 30 29 / 0) 62%);
}
.hero--dual .hero__scrim {
  background: linear-gradient(100deg,
    rgb(32 30 29 / 0.93) 0%,
    rgb(32 30 29 / 0.72) 40%,
    rgb(32 30 29 / 0.08) 66%);
}
/* Show-page hero anchors the title to the bottom edge instead. */
.hero--foot .hero__scrim {
  background: linear-gradient(0deg, rgb(32 30 29 / 0.9) 0%, rgb(32 30 29 / 0.1) 55%);
}
.hero--foot .hero__body {
  min-height: 520px; max-width: none; justify-content: flex-end;
  display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px;
}
@media (max-width: 900px) {
  .hero--foot .hero__body { flex-direction: column; align-items: flex-start; gap: 24px; }
  .hero__body { min-height: 520px; }
}
@media (max-width: 620px) {
  .hero__scrim, .hero--dual .hero__scrim {
    background: linear-gradient(180deg, rgb(32 30 29 / 0.6) 0%, rgb(32 30 29 / 0.92) 55%);
  }
}

/* On mobile the carousel tabs stop overlapping the hero, so give the slide
   its own floor rather than letting the tabs sit on the artwork. */
@media (max-width: 1100px) {
  .carousel__tabs { border-top: var(--rule) solid var(--edge); }
}

.facts { border-bottom: var(--rule) solid var(--edge); }
.booking { border-bottom: var(--rule) solid var(--edge); }

.tour { background: var(--color-accent); color: var(--color-bg); border-bottom: var(--rule) solid var(--edge); }
.tour .btn-onaccent { background: var(--color-bg); color: var(--color-text); height: 50px; padding: 0 24px; font-size: 15px; }
.tour .btn-onaccent:hover { background: #fff; }

.quicklinks { border-bottom: var(--rule) solid var(--edge); }

.quotes { background: var(--color-text); color: var(--color-bg); }

/* Section headings sit left with a red eyebrow above. */
.sectionhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.sectionhead h2, .sectionhead h3 { margin: 0; font-size: clamp(24px, 2.4vw, 28px); }
.sectionhead a { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 800; }

/* The Avenue Q key art is centre-locked: the cast sits in the middle of a wide
   field of stars. In this direction's full-bleed, scrim-left hero that lands the
   cast behind the text, so pan it right by showing the artwork's left edge.
   Only above the breakpoint, though — at phone widths the container is far
   narrower than the artwork and `left` would show nothing but stars. */
@media (min-width: 901px) {
  .hero img.keyart { object-position: left center; }
}

.pagehead h1 { margin: 0 0 8px; font-size: clamp(34px, 4.4vw, 46px); }
.pagehead p { font-size: 17px; max-width: 560px; margin: 0; }