:root {
  --parch-scrim: 0.03;
  --parch-vignette: 0.11;
  --nav-break: 58rem;
}

.masthead {
  flex: none;
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(7px);
  background: color-mix(in srgb, var(--parch-lit) 80%, transparent);
  border-bottom: 1px solid var(--rule-soft);
}

.masthead-inner {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding-block: var(--space-2xs);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  color: inherit;
  margin-right: auto;
  min-width: 0;
}
.brand .mark { width: 3.2rem; flex: none; --mark-colour: var(--oxblood-deep); }
.brand-words {
  display: flex;
  flex-direction: column;
  line-height: 1.06;
  min-width: 0;
}
.brand b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-1);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-sub {
  font-family: var(--font-text);
  font-size: var(--step--2);
  font-weight: 400;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Below this the masthead has no room for it, and a longer team name in
   another language would otherwise push the burger off the screen. */
@media (max-width: 30rem) { .brand-sub { display: none; } }
@media (max-width: 30rem) {
  .brand .mark { width: 2.3rem; }
  .masthead-inner { gap: var(--space-2xs); }
}

.pages ul {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  list-style: none;
  margin: 0;
  padding: 0;
}
.pages a {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.pages a[aria-disabled="true"] { color: var(--ink-faint); cursor: default; }
.pages a:hover { color: var(--ink); border-bottom-color: var(--rule); }

.burger {
  appearance: none;
  border: 1px solid var(--rule-soft);
  background: color-mix(in srgb, var(--parch-lit) 70%, transparent);
  border-radius: var(--radius);
  padding: 0.45rem 0.5rem;
  cursor: pointer;
  display: none;
  flex: none;
  color: var(--ink-soft);
}
.burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--transition), opacity var(--transition);
}
.burger span + span { margin-top: 4px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 57.999rem) {
  .js .burger { display: block; order: 3; }

  .js .pages {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    background: var(--parch-lit);
    border-bottom: 1px solid var(--rule-soft);
    box-shadow: 0 12px 24px -18px rgba(46, 29, 24, 0.6);
  }
  .js .pages[data-open] { display: block; }

  .js .pages ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2xs) var(--gutter) var(--space-s);
  }
  .js .pages a {
    padding-block: var(--space-xs);
    font-size: var(--step-0);
    border-bottom: 1px solid var(--rule-soft);
  }
  .js .pages li:last-child a { border-bottom: 0; }

  html:not(.js) .pages { width: 100%; order: 4; }
  html:not(.js) .pages ul { flex-wrap: wrap; gap: var(--space-xs) var(--space-m); padding-bottom: var(--space-2xs); }
}

.masthead-inner { position: relative; flex-wrap: wrap; }
@media (min-width: 58rem) { .masthead-inner { flex-wrap: nowrap; } .pages { margin-right: var(--space-s); } }

.main {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  padding-block: var(--space-2xl);
}

.hero {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 54rem) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); }
}

.hero-plate { max-width: 36rem; margin-inline: auto; width: 100%; min-width: 0; }
.hero-plate img { width: 100%; height: auto; }

.hero-copy { text-align: center; }
.hero-copy > * + * { margin-top: var(--space-m); }
@media (min-width: 54rem) { .hero-copy { text-align: left; } }

.hero-h1 {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1.08;
  color: var(--ink);
  max-width: 16ch;
  margin-inline: auto;
}
@media (min-width: 54rem) { .hero-h1 { margin-inline: 0; } }

.hero-lead {
  font-family: var(--font-text);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 38ch;
  margin-inline: auto;
}
@media (min-width: 54rem) { .hero-lead { margin-inline: 0; } }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-xl);
  justify-content: center;
  margin-top: var(--space-l) !important;
  padding-top: var(--space-l);
  border-top: 1px solid var(--rule-soft);
}
@media (min-width: 54rem) { .facts { justify-content: flex-start; } }

.facts div { text-align: center; }
@media (min-width: 54rem) { .facts div { text-align: left; } }

.facts dt {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.15rem;
}
.facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--ink);
  line-height: 1.2;
  white-space: nowrap;
}

.status {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: var(--step-0);
  color: var(--ink-faint);
}
.status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold-deep);
  flex: none;
  transform: translateY(-1px);
}

.article {
  flex: 1 0 auto;
  padding-block: var(--space-xl) var(--space-2xl);
}

.page-header { margin-bottom: var(--space-xl); }
.page-header h1 {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1.1;
  max-width: 20ch;
}
.standfirst {
  margin-top: var(--space-s);
  font-family: var(--font-text);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 52ch;
}

.prose > * + * { margin-top: var(--space-m); }
.prose-h2 {
  font-family: var(--font-display);
  font-size: var(--step-3);
  margin-top: var(--space-xl) !important;
}
.prose-rich {
  font-family: var(--font-text);
  font-size: var(--step-1);
  line-height: 1.6;
  max-width: var(--measure);
}
.prose-rich p + p { margin-top: var(--space-s); }
.prose-rich ul, .prose-rich ol { padding-left: 1.2em; }
.prose-rich li + li { margin-top: var(--space-2xs); }

.pullquote {
  margin: var(--space-l) 0;
  padding-left: var(--space-m);
  border-left: 2px solid var(--rule);
  max-width: var(--measure);
}
.pullquote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.35;
  color: var(--ink);
}
.pullquote figcaption {
  margin-top: var(--space-xs);
  font-size: var(--step--1);
  color: var(--ink-faint);
}

.prose-figure { margin: var(--space-l) 0; max-width: var(--measure); }
.prose-figure.is-wide { max-width: none; }
.prose-figure figcaption,
.gallery-grid figcaption {
  margin-top: var(--space-xs);
  font-size: var(--step--1);
  color: var(--ink-faint);
}
.credit { display: block; font-style: italic; opacity: .8; }

.running-order { list-style: none; margin: 0; padding: 0; max-width: 52rem; }
.run-item { padding-block: var(--space-m); border-bottom: 1px solid var(--rule-soft); }
.run-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-m);
}
.run-item h2 { font-family: var(--font-display); font-size: var(--step-3); }
.run-item h3 { font-family: var(--font-display); font-size: var(--step-2); }
.run-act { border-bottom-color: var(--rule); }
.run-act h2 { color: var(--oxblood-deep); }
.run-scene { padding-left: var(--space-m); }
.run-dur {
  flex: none; font-size: var(--step--1); color: var(--ink-faint);
  letter-spacing: .08em; text-transform: uppercase;
}
.run-detail, .run-meta {
  margin-top: var(--space-2xs);
  font-family: var(--font-text); font-size: var(--step-0);
  color: var(--ink-soft); max-width: var(--measure);
}
.run-cast {
  display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m);
  list-style: none; margin: var(--space-s) 0 0; padding: 0;
  font-size: var(--step--1);
}
.run-cast li { color: var(--ink); font-family: var(--font-display); font-size: var(--step-0); }
.run-cast span { display: block; font-family: var(--font-sans); font-size: var(--step--2); color: var(--ink-faint); }
.run-interval {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-display); font-size: var(--step-1);
  color: var(--ink-faint); font-style: italic;
}
.run-note { font-family: var(--font-text); color: var(--ink-soft); font-size: var(--step-0); }
.run-footnote {
  margin-top: var(--space-l); font-size: var(--step--1);
  color: var(--ink-faint); max-width: var(--measure);
}

.cast-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-xl) var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 17rem));
  justify-content: center;
}

.cast-card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  gap: var(--space-2xs);
  text-align: center;
}

.cast-portrait {
  width: 100%;
  max-width: 16rem;
  margin: 0 auto var(--space-2xs);
  align-self: end;
  filter: drop-shadow(0 10px 16px rgba(46, 29, 24, 0.42));
}
.cast-portrait img { width: 100%; height: auto; }

.cast-card h2 {
  font-family: var(--font-display); font-size: var(--step-2);
  color: var(--oxblood-deep); align-self: end;
}
.cast-role {
  font-family: var(--font-display); font-size: var(--step-1);
  color: var(--ink); align-self: start;
}
.cast-note {
  font-family: var(--font-text); font-size: var(--step-0);
  color: var(--ink-soft); align-self: start;
}
.cast-credit {
  align-self: end;
  margin-top: var(--space-xs); padding-top: var(--space-xs);
  border-top: 1px solid var(--rule-soft);
  font-family: var(--font-display); font-size: var(--step-1); color: var(--ink);
}
.cast-credit span { font-size: var(--step--1); color: var(--ink-faint); }

@supports not (grid-template-rows: subgrid) {
  .cast-card { grid-row: auto; grid-template-rows: none; }
}

.perf-list { list-style: none; margin: 0 0 var(--space-xl); padding: 0; max-width: 46rem; }
.perf-list li { padding-block: var(--space-m); border-bottom: 1px solid var(--rule-soft); }
.perf-list h3 { font-family: var(--font-display); font-size: var(--step-2); }
.perf-when { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); margin-top: var(--space-3xs); }
.perf-where, .perf-notes { font-size: var(--step-0); color: var(--ink-soft); margin-top: var(--space-3xs); }
.perf-list.is-past { opacity: .85; }

.gallery-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-l);
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

/* Visits */

.visit-list { list-style: none; margin: 0 0 var(--space-xl); padding: 0; }
.visit-card {
  display: grid; gap: var(--space-m);
  grid-template-columns: 1fr;
  padding-block: var(--space-l);
  border-bottom: 1px solid var(--rule-soft);
  align-items: center;
}
@media (min-width: 40rem) { .visit-card { grid-template-columns: 14rem minmax(0, 1fr); } }
.visit-thumb { display: block; }
.visit-thumb img { width: 100%; height: auto; }
.visit-card h3 { font-family: var(--font-display); font-size: var(--step-2); }
.visit-card h3 a { color: var(--oxblood-deep); text-decoration: none; }
.visit-card h3 a:hover { color: var(--ink); }
.visit-when { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); margin-top: var(--space-3xs); }
.visit-where, .visit-summary { font-size: var(--step-0); color: var(--ink-soft); margin-top: var(--space-3xs); }
.visit-list.is-past { opacity: .9; }

.visit-hero {
  display: grid; gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr); align-items: center;
  margin-bottom: var(--space-xl);
}
@media (min-width: 54rem) { .visit-hero { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-3xl); } }
.visit-hero-art { max-width: 30rem; margin-inline: auto; width: 100%; min-width: 0; }
.visit-hero-art img { width: 100%; height: auto; }
.visit-hero-copy > * + * { margin-top: var(--space-m); }

.visit-links {
  display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-l);
  list-style: none; margin: 0 0 var(--space-xl); padding: var(--space-s) 0;
  border-block: 1px solid var(--rule-soft);
  font-family: var(--font-display); font-size: var(--step-1);
}
.visit-links a { color: var(--oxblood-deep); text-decoration: none; }
.visit-links a:hover { color: var(--ink); text-decoration: underline; }

/* The company */

.company-group { margin-bottom: var(--space-xl); }
.company-heading {
  font-size: var(--step--2); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-faint);
  padding-bottom: var(--space-2xs); border-bottom: 1px solid var(--rule-soft);
  margin: var(--space-l) 0 var(--space-m);
}
.company-parts {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-l) var(--space-l);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
/* Part, characterisation and faces each get their own row across the whole
   grid, so a two-line characterisation in one column does not drop the
   portrait beside it out of line. */
.company-parts > li {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  gap: var(--space-3xs);
}
.part-title, .part-note { align-self: start; }
.part-title { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); }
.part-note { font-family: var(--font-text); font-size: var(--step--1); color: var(--ink-soft); margin-top: var(--space-3xs); }
.part-cast {
  list-style: none; margin: var(--space-xs) 0 0; padding: 0;
  align-self: start;
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-m);
}
.part-cast li { display: flex; align-items: center; gap: var(--space-2xs); }
.part-face {
  width: 5rem; flex: none;
  filter: drop-shadow(0 6px 10px rgba(46, 29, 24, 0.38));
}
.part-face img { width: 100%; height: auto; display: block; }
.part-name {
  font-family: var(--font-display);
  font-size: var(--step-1); color: var(--oxblood-deep);
}

/* Home */

/* .main is a flex row that centres one child. The home page has two, so they
   are stacked inside a single one rather than sitting side by side. */
.main-stack { width: 100%; }

.home-intro {
  margin-top: var(--space-xl);
  padding-top: var(--space-l);
  border-top: 1px solid var(--rule-soft);
}
/* The measure belongs to the text. On the container it would fight the
   centring in .wrap-wide and pull the whole block off the page's left edge. */
.home-intro p {
  max-width: 44rem;
  font-size: var(--step-0);
  color: var(--ink-soft);
}
.hero-more { margin-top: var(--space-m); font-size: var(--step-0); }


/* A cast member's story */

.cast-card.is-interactive { position: relative; }
.cast-open {
  position: absolute;
  inset: 0;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius);
}
.cast-card.is-interactive:hover .cast-portrait,
.cast-open:focus-visible ~ .cast-portrait {
  filter: drop-shadow(0 14px 20px rgba(46, 29, 24, 0.5));
  transform: translateY(-2px);
}
.cast-card.is-interactive .cast-portrait {
  transition: filter var(--transition), transform var(--transition);
}
.cast-open:focus-visible { outline: 2px solid var(--oxblood-deep); outline-offset: 4px; }

.cast-dialog {
  width: min(34rem, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100vh - 2 * var(--space-xl));
  padding: var(--space-l);
  border: 1px solid var(--rule);
  border-radius: var(--radius-panel);
  background: var(--parch-lit);
  color: var(--ink);
  box-shadow: 0 24px 60px -20px rgba(46, 29, 24, 0.6);
  overflow: auto;

  /* A dialog is display:none until it opens and goes into the top layer, so
     both have to be allowed to transition for it to move rather than appear,
     and they must run as long as the slide or it is taken away mid-flight.
     Browsers without this show it at once, which is no worse than before. */
  opacity: 0;
  transform: translateY(-50px);

  /* Declared on the closed state, so this is the one that runs on the way
     out. The fade lasts as long as the slide, or the panel is invisible
     before it has finished moving. */
  transition:
    opacity var(--modal-out) ease-in,
    transform var(--modal-out) ease-in,
    display var(--modal-out) allow-discrete,
    overlay var(--modal-out) allow-discrete;
}
.cast-dialog[open] {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--modal-fade) linear,
    transform var(--modal-slide) ease-out,
    display var(--modal-slide) allow-discrete,
    overlay var(--modal-slide) allow-discrete;
}
@starting-style {
  .cast-dialog[open] { opacity: 0; transform: translateY(-50px); }
}

.cast-dialog::backdrop {
  background: rgba(46, 29, 24, 0);
  transition:
    background var(--modal-out) ease-in,
    display var(--modal-out) allow-discrete,
    overlay var(--modal-out) allow-discrete;
}
.cast-dialog[open]::backdrop {
  background: rgba(46, 29, 24, 0.55);
  transition:
    background var(--modal-fade) linear,
    display var(--modal-slide) allow-discrete,
    overlay var(--modal-slide) allow-discrete;
}
@starting-style {
  .cast-dialog[open]::backdrop { background: rgba(46, 29, 24, 0); }
}

.cast-dialog-close {
  position: sticky;
  top: 0;
  float: right;
  appearance: none;
  border: 0;
  background: transparent;
  font-size: var(--step-2);
  line-height: 1;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 0 0 0 var(--space-xs);
}
.cast-dialog-close:hover { color: var(--ink); }

.cast-dialog-body { text-align: center; }
.cast-dialog-body .cast-portrait { max-width: 12rem; }
.cast-dialog-body h2 {
  font-family: var(--font-display); font-size: var(--step-2);
  color: var(--oxblood-deep); margin-top: var(--space-xs);
}
.cast-dialog-body .cast-credit {
  margin-top: var(--space-2xs); padding-top: var(--space-2xs);
  border-top: 1px solid var(--rule-soft);
  font-family: var(--font-display); font-size: var(--step-1);
}
.cast-dialog-body .cast-credit span { font-size: var(--step--1); color: var(--ink-faint); }

.cast-detail { text-align: left; margin-top: var(--space-m); }
.cast-bio {
  font-family: var(--font-text); font-size: var(--step-0);
  line-height: 1.6; color: var(--ink-soft);
}
.cast-detail-heading {
  margin-top: var(--space-m);
  font-size: var(--step--2); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-faint);
  padding-bottom: var(--space-3xs); border-bottom: 1px solid var(--rule-soft);
}
.cast-appearances { list-style: none; margin: var(--space-xs) 0 0; padding: 0; }
.cast-appearances li + li { margin-top: var(--space-xs); }
.cast-appearances a {
  font-family: var(--font-display); font-size: var(--step-1);
  color: var(--oxblood-deep); text-decoration: none;
}
.cast-appearances a:hover { text-decoration: underline; }
.cast-appearances span {
  display: block;
  font-family: var(--font-text); font-size: var(--step--1); color: var(--ink-soft);
}