/* ══════════════════════════════════════════════════════════════════════════
   Direction 1b — Heritage & Edwardian
   Playbill rules, bottle-green fields, archive plates — the 1911 building speaks.

   Everything centres. Rules are solid ink rather than grey. Caps are widely
   letterspaced, the accent is the brand green at full strength, and
   images sit inside a printed plate: a 2px outer rule, 6px of paper, a 1px
   inner rule.
   ══════════════════════════════════════════════════════════════════════ */

/* ── palette ──────────────────────────────────────────────────────────────
   Two brand colours: bottle green and parchment cream. Everything else is
   mixed from them, so this block is the only place to retune the direction.

   These override the Modernist tokens rather than sitting alongside them, so
   every rule in design-system.css and site.css follows without being touched —
   which is the point of the token layer.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --green: #2b5345;
  --cream: #eae4c0;

  /* Ink is a green-black, not a neutral one: it has to sit on cream beside the
     green without reading as a third, unrelated colour. It is also the footer
     and every playbill rule, so it stays clearly darker than --green. */
  --color-text: #1b241f;

  --color-bg: var(--cream);
  --color-surface: color-mix(in srgb, var(--green) 10%, var(--cream));
  --color-divider: color-mix(in srgb, #1b241f 40%, transparent);

  /* Neutrals become tints of cream: the paper, then two deeper grounds for the
     facts strip and the show-page side panel. */
  --color-neutral-100: var(--cream);
  --color-neutral-200: color-mix(in srgb, var(--green) 9%, var(--cream));
  --color-neutral-300: color-mix(in srgb, var(--green) 20%, var(--cream));
  --color-neutral-400: color-mix(in srgb, var(--green) 34%, var(--cream));
  --color-neutral-900: #1b241f;

  /* The accent ramp is the green. 700 and 900 are both the brand green so the
     colour the client picked is the one that actually appears — hierarchy comes
     from area and from the ink, not from a second green. */
  --color-accent: var(--green);
  --color-accent-100: color-mix(in srgb, var(--green) 12%, var(--cream));
  --color-accent-200: color-mix(in srgb, var(--green) 22%, var(--cream));
  --color-accent-400: color-mix(in srgb, var(--green) 45%, var(--cream));
  --color-accent-600: color-mix(in srgb, var(--green) 88%, #000);
  --color-accent-700: var(--green);
  --color-accent-800: color-mix(in srgb, var(--green) 82%, #000);
  --color-accent-900: var(--green);

  --surface-page: var(--cream);
  --edge: var(--color-text);
  --accent-strong: var(--green);
}

body { background: var(--cream); }

/* — the box-office strip above the masthead — */
.topstrip {
  background: var(--color-accent-900); color: var(--color-neutral-100);
  padding: 7px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
}
.topstrip a { color: inherit; }

/* — centred playbill masthead — */
.masthead { border-bottom: var(--rule) solid var(--edge); }
.masthead__inner { flex-direction: column; gap: 0; padding-block: 22px 0; }
.masthead .brand { flex-direction: row; gap: 16px; justify-content: center; }
.masthead .brand__mark { width: 26px; height: 40px; border-bottom-width: 6px; }
.masthead .brand__mark i { width: 13px; height: 13px; }
.brand__name { text-align: center; }
.masthead .brand__name b {
  font-size: clamp(20px, 2.4vw, 30px); letter-spacing: 0.06em; line-height: 1;
}
.masthead .brand__name span { font-size: 10px; letter-spacing: 0.34em; margin-top: 5px; }

.playbillnav {
  border-top: var(--hairline) solid var(--edge); border-bottom: var(--rule) solid var(--edge);
  margin-top: 16px;
}
.playbillnav .mainnav {
  max-width: var(--frame); margin: 0 auto; justify-content: center;
  gap: clamp(16px, 2.4vw, 34px); padding: 12px var(--gutter);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
}
.playbillnav .mainnav a { font-size: inherit; letter-spacing: inherit; text-transform: inherit; font-weight: inherit; }
.playbillnav .mainnav a:hover, .playbillnav .mainnav a[aria-current="page"] { color: var(--color-accent-700); }
.masthead__bar { display: flex; align-items: center; justify-content: flex-end; width: 100%; }

@media (max-width: 1080px) {
  .playbillnav .mainnav {
    position: static; flex-direction: column; align-items: center;
    border-bottom: 0; padding-bottom: 16px;
  }
  .playbillnav .mainnav a { width: 100%; text-align: center; }
  .masthead__inner { padding-bottom: 12px; }
  .masthead__bar { justify-content: center; padding-top: 12px; }
}

.subnav {
  justify-content: center; min-height: 0; padding-block: 14px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
}
.subnav { border-bottom: var(--rule) solid var(--edge); }
.subnav__links { justify-content: center; gap: clamp(16px, 2.4vw, 34px); font-size: inherit; }

/* — the diamond rule ornament — */
.ornament { display: flex; align-items: center; gap: 10px; width: 100%; }
.ornament::before, .ornament::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.ornament i, .ornament span {
  width: 8px; height: 8px; border: 1px solid currentColor; transform: rotate(45deg);
  display: block; flex: none; font-style: normal;
}
.ornament--label { gap: 12px; }
.ornament--label span {
  width: auto; height: auto; border: 0; transform: none;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
}

/* — printed plate: outer rule, paper margin, inner rule — */
.plate { border: var(--rule) solid var(--edge); padding: 6px; background: var(--color-neutral-100); }
.plate__inner { border: var(--hairline) solid var(--edge); }
.plate--flat { border: var(--hairline) solid var(--edge); padding: 0; }

/* — the single-show playbill hero — */
.playbill { display: grid; grid-template-columns: 640px minmax(0, 1fr); border-bottom: var(--rule) solid var(--edge); }
.playbill__card {
  padding: clamp(28px, 3.6vw, 44px); border-right: var(--rule) solid var(--edge);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--color-neutral-100);
}
.playbill__sheet { width: 100%; }
.playbill__sheet .plate__inner {
  padding: clamp(22px, 2.4vw, 30px) clamp(18px, 2vw, 26px) clamp(20px, 2vw, 26px);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.playbill__presents { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; }
.playbill__title {
  font-family: var(--font-heading); font-weight: 800; line-height: 0.86;
  letter-spacing: 0.01em; color: var(--color-accent-900);
  font-size: clamp(56px, 6.4vw, 92px); margin: 0;
}
.playbill__times { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.7; }
.playbill__blurb { font-size: 16px; line-height: 1.55; max-width: 430px; margin: 4px 0 0; text-wrap: pretty; }
.playbill__actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.playbill__quote { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 13px; font-style: italic; }
.playbill__quote .stars { color: var(--color-accent-700); font-style: normal; }
.playbill__media { position: relative; min-height: 660px; background: var(--color-text); }
.playbill__media img, .playbill__media .imgslot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.playbill__ribbon {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: var(--color-accent-900); color: var(--color-neutral-100);
  padding: 14px 26px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
}
.playbill__ribbon a { color: var(--color-neutral-100); font-weight: 800; }
@media (max-width: 1080px) {
  .playbill { grid-template-columns: 1fr; }
  .playbill__card { border-right: 0; border-bottom: var(--rule) solid var(--edge); }
  .playbill__media { min-height: 420px; }
}

/* — the changeover carousel, playbill-style — */
.playbill--dual .playbill__card { gap: 14px; animation: fadein 0.45s ease both; }
.playbill--dual .playbill__title { font-size: clamp(42px, 5vw, 66px); line-height: 0.9; }
.playbill--dual .playbill__media { min-height: 600px; }

.playbilltabs {
  display: flex; align-items: stretch;
  border-top: var(--rule) solid var(--edge); border-bottom: var(--rule) solid var(--edge);
}
.playbilltabs .ctab {
  flex: 1; width: auto; border-left: 0; border-right: var(--hairline) solid var(--edge);
  padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.playbilltabs .ctab:hover { background: var(--color-accent-100); }
.playbilltabs .ctab__stack { display: flex; flex-direction: column; align-items: flex-start; }
.playbilltabs .ctab__status { font-size: 10px; letter-spacing: 0.2em; color: inherit; }
.playbilltabs .ctab__title { font-size: 20px; margin-top: 3px; }
.playbilltabs .ctab__dates { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0; }
.playbilltabs .ctab__dot {
  width: 10px; height: 10px; background: var(--color-accent-900); transform: rotate(45deg);
}
.playbilltabs button.arrow {
  width: 56px; flex: none; background: transparent; border: 0;
  border-right: var(--hairline) solid var(--edge);
  cursor: pointer; font-size: 20px; font-weight: 800; color: inherit; font-family: var(--font-body);
}
.playbilltabs button.arrow:last-child { border-right: 0; }
.playbilltabs button.arrow:hover { background: var(--color-accent-100); }
@media (max-width: 900px) {
  .playbilltabs { flex-wrap: wrap; }
  .playbilltabs .ctab { flex: 1 1 100%; border-right: 0; border-bottom: var(--hairline) solid var(--edge); }
  .playbilltabs button.arrow { flex: 1; height: 48px; }
}

/* — facts, centred and set on the second neutral — */
.facts--engraved { background: var(--color-neutral-200); border-bottom: var(--rule) solid var(--edge); }
.facts--engraved .fact { padding: 18px 26px; text-align: center; border-right: var(--hairline) solid var(--edge); }
.facts--engraved .fact:last-child { border-right: 0; }
.facts--engraved .fact b { font-size: 26px; }
.facts--engraved .fact span { font-size: 10px; letter-spacing: 0.18em; }

/* — the booking ledger — */
.ledger { border-bottom: var(--rule) solid var(--edge); grid-template-columns: minmax(0, 1fr) 400px; }
.ledger__head { text-align: center; margin-bottom: 24px; display: block; }
.ledger__head b { display: block; font-family: var(--font-heading); font-weight: 800; font-size: clamp(24px, 2.6vw, 30px); }
.ledger__head span { display: block; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; margin-top: 4px; }
.ledger .calendar { border-color: var(--edge); }
.ledger .calendar__dow { text-align: center; padding: 7px; font-size: 10px; letter-spacing: 0.14em; }
.ledger .day {
  height: 82px; padding: 8px; align-items: center; justify-content: center; gap: 4px;
}
.ledger .day small { font-size: 10px; letter-spacing: 0.06em; text-align: center; }
.ledger .day__sel { inset: 3px; border: 2px solid var(--color-accent-900); }
.ledger .day__low { top: 6px; right: 7px; font-size: 8px; letter-spacing: 0.1em; }
.ledger .day:hover { background: var(--color-accent-100); }
@media (max-width: 620px) { .ledger .day { height: 64px; } }

/* .ledger sets its own columns, so it needs its own collapse — site.css's
   .booking breakpoint is overridden by the rule above. */
@media (max-width: 1024px) {
  .ledger { grid-template-columns: 1fr; }
}

.ledger__side {
  background: var(--color-accent-900); color: var(--color-neutral-100);
  padding: clamp(24px, 3vw, 36px) clamp(20px, 2.6vw, 32px); gap: 16px;
}
.ledger__side .eyebrow { font-size: 10px; letter-spacing: 0.24em; }
.ledger__side .selection__title { font-size: 24px; line-height: 1.2; }
.ledger__side .hairrule { height: 1px; background: rgb(248 244 244 / 0.4); }
.ledger__side .pricelist { gap: 9px; }
.ledger__side .finehint { opacity: 0.75; }
.btn-onbrand {
  background: var(--color-neutral-100); color: var(--color-accent-900);
  font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
}
.btn-onbrand:hover { background: #fff; }

/* — the brand-green button, the direction's primary — */
.btn-brand {
  background: var(--color-accent-900); color: var(--color-neutral-100);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.btn-brand:hover { background: var(--color-accent-700); }
.btn-ruled {
  border: 1px solid var(--color-text); letter-spacing: 0.1em; text-transform: uppercase;
}
.btn-ruled:hover { background: var(--color-accent-100); }
.btn-ruled .play { border-left-color: var(--color-accent-900); }

/* — centred section heads — */
.centrehead { text-align: center; margin-bottom: 26px; }
.centrehead .eyebrow { letter-spacing: 0.22em; color: var(--color-accent-700); margin: 0; }
.centrehead b, .centrehead h2 {
  display: block; font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(26px, 3vw, 32px); margin: 6px 0 0;
}
.centrehead p { margin: 16px auto 0; max-width: 520px; font-size: 16px; }

.concerts { border-top: var(--rule) solid var(--edge); border-bottom: var(--rule) solid var(--edge); gap: 0; }
.concerts .showcard {
  padding: 24px; border-top: 0; border-right: var(--hairline) solid var(--edge); text-align: center;
}
.concerts .showcard:last-child { border-right: 0; }
.concerts .showcard:hover { background: var(--color-accent-100); }
.concerts .showcard__media { height: 170px; margin-bottom: 16px; }
.concerts .showcard__when { font-size: 10px; letter-spacing: 0.2em; color: inherit; }
.concerts .showcard h4 { margin: 8px 0 6px; font-size: 22px; }
@media (max-width: 900px) {
  .concerts .showcard { border-right: 0; border-bottom: var(--hairline) solid var(--edge); }
  .concerts .showcard:last-child { border-bottom: 0; }
}

/* — the tour band, image left, green field right — */
.tour--heritage {
  grid-template-columns: minmax(0, 1fr) 640px;
  background: var(--color-accent-900); color: var(--color-neutral-100);
  border-bottom: var(--rule) solid var(--edge);
}
.tour--heritage .tour__body { align-items: center; text-align: center; gap: 16px; }
.tour--heritage .tour__title { font-size: clamp(40px, 4.4vw, 58px); line-height: 0.94; letter-spacing: 0; }
.tour--heritage .ornament { color: rgb(248 244 244 / 0.6); }
.tour--heritage .tour__media { min-height: 380px; }
@media (max-width: 1024px) {
  .tour--heritage { grid-template-columns: 1fr; }
  .tour--heritage .tour__media { order: -1; }
}

.quicklinks--ruled { border-bottom: var(--rule) solid var(--edge); }
.quicklinks--ruled .quicklink { padding: 30px 26px; text-align: center; border-right: var(--hairline) solid var(--edge); }
.quicklinks--ruled .quicklink:last-child { border-right: 0; }
.quicklinks--ruled .quicklink:hover { background: var(--color-accent-100); }
.quicklinks--ruled .quicklink h4 { font-size: 21px; }
@media (max-width: 900px) {
  .quicklinks--ruled .quicklink { border-right: 0; border-bottom: var(--hairline) solid var(--edge); }
  .quicklinks--ruled .quicklink:last-child { border-bottom: 0; }
}

/* — footer and sticky bar — */
.footer--heritage { background: var(--color-text); color: var(--color-neutral-100); }
.footer--heritage .footer__inner { align-items: center; }
.footer--heritage .footer__brand { font-size: 20px; letter-spacing: 0.06em; }
.footer--heritage .signup .input { color: var(--color-neutral-100); border-color: rgb(248 244 244 / 0.4); }
.footer--heritage .signup .input::placeholder { color: rgb(248 244 244 / 0.55); }
/* Cream on the green-black footer: the brand green itself is too close in value
   to the footer ground to carry a button. */
.footer--heritage .signup .btn {
  background: var(--cream); color: var(--green);
  letter-spacing: 0.1em; text-transform: uppercase; font-size: 12px;
}
.footer--heritage .signup .btn:hover { background: #fff; }

.bookbar--heritage {
  background: var(--color-accent-900); color: var(--color-neutral-100);
  border-top: var(--rule) solid var(--color-text);
}
.bookbar--heritage .bookbar__show { font-size: 17px; letter-spacing: 0.06em; }
.bookbar--heritage .bookbar__meta { letter-spacing: 0.1em; text-transform: uppercase; font-size: 12px; opacity: 0.85; }
.bookbar--heritage .btn { background: var(--color-neutral-100); color: var(--color-accent-900); letter-spacing: 0.12em; text-transform: uppercase; font-size: 13px; }

/* — show page — */
.hero--plate { position: relative; height: 480px; background: var(--color-text); }
.hero--plate img, .hero--plate .imgslot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero--plate .playbill__sheet { position: absolute; left: var(--gutter); bottom: 44px; max-width: 520px; z-index: 2; }
.hero--plate .plate__inner { padding: 24px; text-align: center; }
.hero--plate .playbill__title { font-size: clamp(38px, 4.6vw, 62px); margin: 10px 0; }
.hero--plate .hero__trailer { position: absolute; right: var(--gutter); bottom: 44px; z-index: 2; }
@media (max-width: 900px) {
  .hero--plate { height: auto; padding-bottom: 24px; }
  .hero--plate img, .hero--plate .imgslot { position: relative; height: 320px; }
  /* width:auto matters: .playbill__sheet is width:100% by default, which would
     add the horizontal margins on top of a full-width box and overflow. */
  .hero--plate .playbill__sheet {
    position: static; width: auto; max-width: none;
    margin: -60px var(--gutter) 16px;
  }
  .hero--plate .hero__trailer { position: static; margin-inline: var(--gutter); }
}

.showbody--heritage .showbody__side { background: var(--color-neutral-200); }
.showbody--heritage .showbody__side .eyebrow { text-align: center; letter-spacing: 0.22em; font-size: 10px; }
.showbody--heritage .perf { border-bottom: 0; border-top: var(--hairline) solid var(--edge); }
.showbody--heritage .perf:last-of-type { border-bottom: var(--hairline) solid var(--edge); }
.showbody--heritage .threecol { text-align: center; }
.showbody--heritage .credits h5 { font-size: 10px; letter-spacing: 0.2em; margin-bottom: 10px; }
.showbody--heritage .credits p { line-height: 1.8; }
.archive { margin-top: 8px; border: var(--hairline) solid var(--edge); padding: 16px; text-align: center; }
.archive .eyebrow { font-size: 10px; letter-spacing: 0.2em; margin-bottom: 6px; }
.archive__media { height: 150px; }
.archive p { font-size: 12px; margin: 10px 0 0; }

.quotes--paper { background: var(--color-neutral-100); }
.quotes--paper .quote { border-right: var(--hairline) solid var(--edge); text-align: center; padding: 26px 22px; }
.quotes--paper .quote:last-child { border-right: 0; }
.quotes--paper .stars { color: var(--color-accent-700); font-size: 15px; letter-spacing: 0.12em; }
.quotes--paper .quote p { font-style: italic; }
.quotes--paper .quote cite { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }

/* — listings — */
.listing--heritage { grid-template-columns: 260px minmax(0, 1fr) 200px; gap: 30px; padding: 26px var(--gutter); border-bottom: var(--hairline) solid var(--edge); }
.listing--heritage .listing__media { border: var(--hairline) solid var(--edge); }
.listing--heritage .eyebrow { font-size: 10px; letter-spacing: 0.22em; }
.listing--heritage h3 { margin: 8px 0; }
.listing--heritage .listing__buy { text-align: right; align-items: stretch; }
.listing--heritage .listing__price { margin-bottom: 10px; }
@media (max-width: 1024px) {
  .listing--heritage { grid-template-columns: 200px minmax(0, 1fr); }
  .listing--heritage .listing__buy { grid-column: 1 / -1; flex-direction: row; align-items: center; text-align: left; }
  .listing--heritage .listing__price { margin-bottom: 0; }
}
@media (max-width: 620px) { .listing--heritage { grid-template-columns: 1fr; } }

/* — seating & your visit — */
.seating--heritage .seating__plan { text-align: center; }
.seating--heritage .seating__plan h1 { font-size: clamp(32px, 4vw, 42px); margin: 0; }
.seating--heritage .callout { background: var(--color-accent-900); color: var(--color-neutral-100); }
.seating--heritage .callout p { opacity: 0.85; }
.seating--heritage .deflist > div { padding-bottom: 12px; border-bottom: var(--hairline) solid var(--color-divider); grid-template-columns: 130px minmax(0, 1fr); gap: 14px; }
.seating--heritage .deflist > div:last-child { padding-bottom: 0; border-bottom: 0; }
@media (max-width: 1024px) { .seating--heritage .deflist > div { grid-template-columns: 1fr; } }

.split--heritage .split__body { text-align: center; display: flex; flex-direction: column; align-items: center; }
.split--heritage .split__title {
  font-family: var(--font-heading); font-weight: 800; font-size: clamp(30px, 3.6vw, 42px);
  margin: 12px 0 10px; max-width: 420px; line-height: 1.05;
}
.split--heritage .notes { text-align: left; width: 100%; gap: 26px; }
.split--heritage .notes h5 { font-size: 10px; letter-spacing: 0.18em; }
.trio--heritage > * { padding: 30px 26px; text-align: center; }
.trio--heritage h4 { font-size: 21px; }
.trio--heritage .trio__media { border: var(--hairline) solid var(--edge); }

/* ── small screens ────────────────────────────────────────────────────────
   The wide Edwardian tracking is what makes this direction, but at 375px it
   turns every caps line into three. Ease it off rather than shrink the type —
   the playbill should still feel generous on a phone. */
@media (max-width: 560px) {
  .topstrip {
    flex-direction: column; align-items: flex-start; gap: 2px;
    font-size: 10px; letter-spacing: 0.1em;
  }
  .masthead .brand { gap: 10px; }
  .masthead .brand__name span { letter-spacing: 0.2em; }
  .playbill__presents { letter-spacing: 0.18em; }
  .playbill__times { letter-spacing: 0.1em; line-height: 1.5; }
  .playbill__sheet .plate__inner { padding-inline: 14px; }
  .ornament--label span { letter-spacing: 0.12em; }
  .playbill__ribbon { letter-spacing: 0.08em; padding-inline: var(--gutter); }
  .facts--engraved .fact span { letter-spacing: 0.1em; }
  .ledger__head span { letter-spacing: 0.12em; }
  .bookbar--heritage .btn { letter-spacing: 0.08em; }
  .subnav, .playbillnav .mainnav { letter-spacing: 0.1em; }
}