.cast-intro {
  width: min(100% - 2 * var(--gutter), 46rem);
  margin: var(--space-l) auto var(--space-xl);
  text-align: center;
}
.cast-lede {
  max-width: 30rem;
  text-wrap: pretty;
}
.cast-how {
  max-width: 34rem;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: var(--step--1);
  text-wrap: pretty;
}
.cast-band,
.cast-road,
.cast-briar {
  margin-block: var(--space-2xl) 0;
}
.cast-head {
  max-width: 40rem;
  margin: 0 auto var(--space-l);
  text-align: center;
}
.cast-head-kicker {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: var(--space-xs);
  margin: 0 0 var(--space-2xs);
  max-width: none;
  color: var(--accent-ink);
}
.cast-head-place {
  font-style: italic;
  color: var(--ink-soft);
}
.cast-head-title {
  margin: 0 0 var(--space-s);
  font-size: var(--step-3);
}
.cast-head-lede {
  margin: 0 auto;
  color: var(--ink-soft);
  text-wrap: balance;
}
.cast-head-quote {
  margin: 0 auto;
  padding: 0;
  border: 0;
}
.cast-head-quote p {
  margin: 0 auto;
}
.cast-head-quote p:first-child {
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--ink);
}
.cast-head-quote p:first-child::before { content: "\201C"; }
.cast-head-quote p:first-child::after { content: "\201D"; }
.cast-head-who {
  margin-top: var(--space-2xs);
  font-size: var(--step--1);
  font-style: italic;
  color: var(--ink-soft);
}
.cast-figure .be-window,
.cast-lineup-arch .be-window,
.cast-res-arch .be-window {
  margin: 0;
}
.cast-figure .be-window-img,
.cast-lineup-arch .be-window-img {
  aspect-ratio: 0.946;
}
.cast-figure,
.cast-lineup-arch {
  background: #1A120C;
}
.cast-lineup {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs) var(--space-3xs);
  margin: 0 auto var(--space-xl);
  padding: 0;
  list-style: none;
}
.cast-lineup li {
  flex: 0 0 calc((100% - 3 * var(--space-3xs)) / 4);
  max-width: 7.5rem;
}
.cast-lineup-link {
  display: grid;
  justify-items: center;
  gap: var(--space-2xs);
  padding-bottom: var(--space-3xs);
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius);
}
.cast-lineup-arch {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 50% 50% 8% 8% / 36% 36% 5% 5%;
}
.cast-lineup-arch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 -2px 0 var(--rule-strong);
  pointer-events: none;
}
.cast-lineup-arch .be-window-img {
  transition: filter var(--dur) var(--ease-out);
}
.cast-lineup-name {
  font-size: var(--step--1);
  line-height: 1.2;
  text-align: center;
}
.cast-lineup-link:hover .cast-lineup-arch .be-window-img {
  filter: brightness(1.12);
}
.cast-lineup-link:hover .cast-lineup-name {
  color: var(--link);
  text-decoration: underline;
}
@media (min-width: 48rem) {
  .cast-lineup {
    flex-wrap: nowrap;
    gap: var(--space-2xs);
  }
  .cast-lineup li {
    flex: 1 1 0;
  }
}
.cast-cards {
  display: grid;
  gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cast-card {
  display: grid;
  gap: var(--space-m);
  align-content: start;
  max-width: none;
  padding: var(--space-m);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-l);}
.cast-figure {
  justify-self: center;
  width: min(100%, 12.5rem);
  overflow: hidden;
  border-radius: 50% 50% 6% 6% / 36% 36% 4% 4%;
}
.cast-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 -2px 0 var(--rule-strong);
  pointer-events: none;
}
.cast-body {
  display: grid;
  align-content: start;
  gap: var(--space-s);
  min-width: 0;
}
.cast-body > *,
.cast-road-body > *,
.cast-thorn-body > * {
  margin: 0;
}
.cast-name {
  margin: 0;
  font-size: var(--step-2);
  font-weight: var(--weight-display);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  font-feature-settings: "case";
  line-height: var(--leading-tight);
}
.cast-role {
  margin-top: calc(-1 * var(--space-xs));
  font-style: italic;
  color: var(--ink-soft);
}
.cast-facts {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
}
.cast-fact {
  display: grid;
  gap: 0.15em;
}
.cast-fact dt {
  font-variant-caps: all-small-caps;
  letter-spacing: var(--track-label);
  font-size: 1.02em;
  line-height: 1.3;
  color: var(--accent-ink);
}
.cast-fact dd {
  margin: 0;
}
.cast-know {
  font-size: var(--step-1);
  line-height: var(--leading-snug);
}
.cast-proof {
  display: block;
  margin-top: 0.3em;
  font-size: var(--step--1);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--ink-soft);
}
.cast-said::before,
.cast-line:not(.cast-line--told) p::before { content: "\201C"; }
.cast-said::after,
.cast-line:not(.cast-line--told) p::after { content: "\201D"; }
.cast-fact--fur dd {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.cast-swatches {
  display: inline-flex;
  flex: none;
  gap: 0.3em;
}
.cast-swatch {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--rule-strong);
}
.cast-swatch--brown { background: #8B5E3C; }
.cast-swatch--grey { background: #8F8B85; }
.cast-swatch--white { background: #EFECE6; }
.cast-swatch--cream { background: #E6D8BA; }
.cast-swatch--moss { background: #7B7967; }
.cast-swatch--black { background: #1C1A19; }
.cast-line {
  margin: 0;
  padding: 0 0 0 var(--space-s);
  border-left: 2px solid var(--accent);
}
.cast-line p {
  margin: 0;
  font-size: var(--step-0);
  line-height: var(--leading-snug);
}
.cast-line--told p {
  font-style: italic;
}
.cast-context {
  font-size: var(--step--1);
  font-style: italic;
  color: var(--ink-soft);
}
.cast-listen {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2xs) var(--space-s);
}
.cast-listen-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: var(--tap);
  padding: 0.25em 1.05em 0.25em 0.8em;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--link);
  font: inherit;
  font-size: var(--step--1);
  cursor: pointer;
}
.cast-listen-button:hover,
.cast-listen-button[data-cast-playing] {
  background: var(--button-bg);
  border-color: var(--button-bg);
  color: var(--button-ink);
}
.cast-listen-glyph .be-glyph {
  width: 1.15em;
  height: 1.15em;
  vertical-align: 0;
}
.cast-beats {
  width: 100%;
  max-width: 15rem;
  height: auto;
}
.cast-beats circle {
  fill: var(--rule-strong);
  transition: fill var(--dur-fast) var(--ease-out);
}
.cast-beats circle.is-on {
  fill: var(--accent);
}
.cast-heard {
  grid-column: 1 / -1;
  min-height: 1.4em;
  font-size: var(--step--1);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--ink-soft);
}
.cast-heard:empty {
  min-height: 0;
}
.cast-road-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cast-road-card {
  flex: 1 1 100%;
  display: grid;
  align-content: start;
  gap: var(--space-s);
  max-width: none;
  padding: var(--space-s) var(--space-s) var(--space-m);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-l);}
.cast-road-card .be-window {
  margin: 0;
}
.cast-road-body {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  padding-inline: var(--space-3xs);
}
.cast-place {
  font-variant-caps: all-small-caps;
  letter-spacing: var(--track-label);
  font-size: 1.02em;
  line-height: 1.3;
  color: var(--accent-ink);
}
.cast-road-body .cast-name {
  font-size: var(--step-1);
}
.cast-road-body .cast-role {
  margin-top: calc(-1 * var(--space-2xs));
}
@media (min-width: 40rem) {
  .cast-road-card {
    flex-basis: calc((100% - var(--space-m)) / 2);
    max-width: calc((100% - var(--space-m)) / 2);
  }
}
@media (min-width: 64rem) {
  .cast-road-card {
    flex-basis: calc((100% - 2 * var(--space-m)) / 3);
    max-width: calc((100% - 2 * var(--space-m)) / 3);
  }
}
.cast-briar {
  padding-top: var(--space-xl);
}
.cast-thorn {
  display: grid;
  gap: var(--space-l);
  align-items: center;
  max-width: 64rem;
  margin: 0 auto var(--space-2xl);}
.cast-thorn .be-window {
  margin: 0;
  max-width: none;
}
.cast-thorn-body {
  display: grid;
  gap: var(--space-s);
  max-width: 34rem;
}
.cast-thorn-name {
  font-size: var(--step-3);
}
.cast-thorn-note {
  font-style: italic;
  color: var(--ink-soft);
}
.cast-line--welcome p {
  font-size: var(--step-1);
}
.cast-residents-lede {
  max-width: 34rem;
  margin: 0 auto var(--space-m);
  text-align: center;
  font-style: italic;
  color: var(--ink-soft);
}
.cast-residents {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-l) var(--space-m);
  max-width: 64rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.cast-resident {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--space-2xs);
  max-width: none;
  text-align: center;
}
.cast-res-arch {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 46% 46% 8% 8% / 34% 34% 5% 5%;
  background: #102823;
}
.cast-res-arch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 -2px 0 #4F8C80;
  pointer-events: none;
}
.cast-res-arch .be-window-img {
  aspect-ratio: 1.34;
}
.cast-resident .cast-name {
  margin-top: var(--space-2xs);
  font-size: var(--step-1);
}
.cast-resident .cast-role {
  margin: 0;
  max-width: 16rem;
  font-size: var(--step--1);
}
@media (min-width: 40rem) {
  .cast-card {
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    align-items: start;
  }
  .cast-figure {
    width: 100%;
    position: sticky;
    top: calc(var(--header-h) + var(--space-m));
  }
}
@media (min-width: 64rem) {
  .cast-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cast-card {
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  }
  .cast-figure {
    position: relative;
    top: auto;
  }
  .cast-thorn {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
  .cast-residents {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.cast-opening {
  --be-s1: 1.06;
  margin-block: 0;
}
@media (min-width: 40.01rem) {
  .cast-opening > .be-scene-stage {
    height: max(32rem, 88svh - var(--header-h));
  }
}
.cast-opening .be-scene-picture {
  opacity: 0.6;
}
@media (prefers-reduced-motion: no-preference) {
  html:not([data-be-motion="reduce"]) .cast-opening .be-scene-picture {
    animation: cast-lights-down 2.6s var(--ease-settle) 0.25s both;
  }
}
@keyframes cast-lights-down {
  from { opacity: 1; }
  to { opacity: 0.6; }
}
.cast-opening > .be-scene-cards {
  align-self: stretch;
  align-content: center;
  gap: var(--space-l);
  padding-block: var(--space-l);
}
.cast-opening-card .be-titlecard-title {
  font-size: clamp(2.3rem, 1.3rem + 4.2vw, 5rem);
}
.cast-opening .cast-lede {
  font-size: var(--step-1);
  line-height: var(--leading-snug);
}
.cast-reach {
  --cast-reach-d: 44rem;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: var(--cast-reach-d);
  height: var(--cast-reach-d);
  margin: calc(var(--cast-reach-d) / -2) 0 0 calc(var(--cast-reach-d) / -2);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 222 160 / 0.4), rgb(255 196 120 / 0.15) 46%, rgb(255 196 120 / 0));
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: opacity 650ms var(--ease-out);
}
.cast-reach.is-on {
  opacity: 1;
}
.cast-reach--band {
  --cast-reach-d: 52rem;
  z-index: 0;
  background: radial-gradient(closest-side, rgb(214 160 94 / 0.26), rgb(214 160 94 / 0.1) 50%, rgb(214 160 94 / 0));
}
@media (max-width: 40rem) {
  .cast-reach {
    --cast-reach-d: 24rem;
  }
}
html[data-be-motion="reduce"] .cast-reach {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .cast-reach {
    display: none;
  }
}
.cast-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.cast-band > :not(.cast-reach) {
  position: relative;
  z-index: 1;
}
.cast-card {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}
.cast-head-card {
  margin-bottom: var(--space-s);
}
.cast-head-card .be-titlecard-title {
  font-size: var(--step-3);
}
.cast-underline {
  display: block;
  width: min(8.5rem, 72%);
  height: 0.6rem;
  margin-top: calc(var(--space-s) * -1 + 0.15rem);
  overflow: visible;
  color: var(--accent);
}
.cast-underline path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}
@media screen and (prefers-reduced-motion: no-preference) {
  html.js:not([data-be-motion="reduce"]) .is-armed:not(.is-still) > * > .cast-name,
  html.js:not([data-be-motion="reduce"]) .is-armed:not(.is-still) .cast-thorn-name {
    opacity: 0;
  }
  html.js:not([data-be-motion="reduce"]) .is-armed:not(.is-still) .cast-underline path {
    stroke-dasharray: 1 2;
    stroke-dashoffset: 1.02;
  }
  html.js:not([data-be-motion="reduce"]) .is-armed:not(.is-still) .cast-machine-rule {
    transform: scaleX(0);
  }
  html.js:not([data-be-motion="reduce"]) .cast-residents.is-armed:not(.is-still) .cast-resident {
    opacity: 0;
  }
}
.cast-figure {
  position: relative;
}
.cast-rings {
  --cast-floor: 78%;
  position: absolute;
  left: 4%;
  right: 4%;
  top: calc(var(--cast-floor) + 3% - 11.3%);
  z-index: 1;
  width: 92%;
  height: auto;
  aspect-ratio: 200 / 40;
  overflow: visible;
  pointer-events: none;
  color: #F6DEAE;
}
#cast-fern .cast-rings { --cast-floor: 79.6%; }
#cast-bracken .cast-rings { --cast-floor: 79.3%; }
#cast-nettle .cast-rings { --cast-floor: 77.3%; }
#cast-clover .cast-rings { --cast-floor: 76.4%; }
.cast-rings ellipse {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.cast-rings.is-row ellipse {
  opacity: 0.6;
}
.cast-rhythm {
  font-size: var(--step--1);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--ink-soft);
}
.cast-road,
.cast-briar {
  width: auto;
}
.cast-road > :not(.be-scene),
.cast-briar > :not(.be-scene) {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}
.cast-road-scene {
  --be-s1: 1.08;
  margin-block: 0 var(--space-xl);
}
.cast-road-scene .cast-head-quote {
  max-width: 30rem;
  text-align: center;
}
.cast-road-card .be-window-picture,
.cast-thorn .be-window-picture {
  position: relative;
  display: block;
}
.cast-road-card .be-window-picture::after,
.cast-thorn .be-window-picture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cast-air, none);
  mix-blend-mode: var(--cast-air-blend, screen);
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms var(--ease-out);
}
:is(.cast-road-card, .cast-thorn).is-lit .be-window-picture::after {
  opacity: 1;
}
#cast-kite {
  --cast-air: radial-gradient(34% 22% at 50% 74%, rgb(28 20 10 / 0.5), rgb(28 20 10 / 0));
  --cast-air-blend: multiply;
}
#cast-fox {
  --cast-air: linear-gradient(0deg, rgb(205 210 214 / 0.5), rgb(205 210 214 / 0) 46%), linear-gradient(90deg, rgb(205 210 214 / 0.3), rgb(205 210 214 / 0) 30%);
}
#cast-hutch {
  --cast-air: radial-gradient(60% 50% at 30% 10%, rgb(200 220 255 / 0.35), rgb(200 220 255 / 0));
}
#cast-barn-cat,
#cast-hens,
#cast-gerald {
  --cast-air: linear-gradient(118deg, rgb(255 220 150 / 0) 28%, rgb(255 220 150 / 0.32) 44%, rgb(255 220 150 / 0) 60%), radial-gradient(70% 60% at 70% 20%, rgb(255 214 140 / 0.22), rgb(255 214 140 / 0));
}
.cast-thorn {
  --cast-air: radial-gradient(60% 70% at 50% 60%, rgb(90 255 190 / 0.3), rgb(90 255 190 / 0));
}
@media (prefers-reduced-motion: no-preference) {
  html:not([data-be-motion="reduce"]) .cast-road-card .be-window-img {
    transition: filter var(--dur-slow) var(--ease-out), scale 600ms var(--ease-settle);
  }
  html:not([data-be-motion="reduce"]) .cast-road-card:is(:hover, :focus-within) .be-window-img {
    scale: 1.04;
  }
  html:not([data-be-motion="reduce"]) #cast-kite.is-lit .be-window-picture::after {
    animation: cast-kite-pass 1.8s var(--ease-settle) both;
  }
}
@keyframes cast-kite-pass {
  0% { transform: translateX(-75%); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(75%); opacity: 0; }
}
.cast-briar-scene {
  --be-s1: 1.06;
  margin-block: 0 var(--space-xl);
}
@media (max-width: 40rem) {
  .cast-briar-scene {
    --be-s1: 1.04;
  }
}
.cast-briar-scene .cast-briar-titlecard {
  --be-scrim-color: rgb(6 20 15);
}
.cast-briar-scene .cast-briar-titlecard .be-titlecard-rule {
  background-color: #8FE6C6;
}
.cast-machine-rule {
  display: block;
  width: min(10rem, 60%);
  height: 2px;
  margin-top: calc(var(--space-s) * -1 + 0.3rem);
  background: #3FAF88;
  transform-origin: 50% 50%;
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html:not([data-be-motion="reduce"]) .cast-thorn .be-window-img {
      --be-s0: 1;
      --be-s1: 1.06;
      transform-origin: 50% 50%;
      animation: be-push linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}