.film-h3 {
  margin: var(--space-2xl) 0 var(--space-s);
  font-size: var(--step-2);
}
.film-section-lede {
  max-width: 44rem;
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--ink-soft);
}
.film-card {
  justify-items: start;
  margin: 0 0 var(--space-m);
  text-align: left;
}
.film-card .be-titlecard-rule {
  width: min(16rem, 60%);
}
.film-house {
  margin-top: 0;
  padding-bottom: var(--space-2xl);
}
.film-open {
  margin-block: 0;
  --be-crane: 1.4%;
  --be-crane-s: 1.03;
  --be-crane-ds: -0.01;
}
.film-open > .be-scene-cards {
  align-self: stretch;
  align-content: center;
  justify-items: end;
  padding: var(--space-xl) clamp(1.25rem, 5vw, 5.5rem);
}
.film-open .film-open-card {
  max-width: min(38rem, 52%);
  margin-inline: auto 0;
  padding: var(--space-xl) clamp(1.5rem, 6%, 3.5rem);
}
@media (min-width: 40.0625rem) {
  .film-open .film-open-card {
    --be-scrim-end: 1;
  }
}
.film-open-card .be-titlecard-title {
  font-size: clamp(2.4rem, 1.2rem + 3vw, 4.4rem);
}
@media (max-width: 40rem) {
  .film-open {
    background-color: transparent;
  }
  .film-open > .be-scene-cards {
    grid-area: 2 / 1;
    align-self: start;
    justify-items: center;
    padding: var(--space-m) var(--gutter) 0;
    --be-scrim-over: 0;
  }
  .film-open .film-open-card {
    max-width: none;
    margin-inline: auto;
    padding: 0;
  }
  .film-open-card .be-titlecard-title {
    font-size: var(--step-4);
  }
}
.film-lede {
  max-width: 40rem;
  margin: var(--space-l) auto 0;
  padding-inline: var(--gutter);
  text-align: center;
}
.film-house > .film-story {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}
.film-story {
  display: grid;
  gap: var(--space-l) var(--space-2xl);
  margin-top: var(--space-2xl);
}
.film-logline {
  font-size: var(--step-1);
  font-style: italic;
  line-height: var(--leading-snug);
}
.film-facts {
  align-self: start;
  display: grid;
  gap: var(--space-s);
  margin: 0;
  padding: var(--space-m);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-l);
}
.film-facts dt {
  color: var(--accent-ink);
}
.film-facts dd {
  margin: 0.15rem 0 0;
}
.film-facts dd,
.film-section-lede,
.film-register-meaning,
.film-theme-line,
.film-frame-vo,
.film-lede {
  text-wrap: pretty;
}
.film-toc-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-l);
  margin: 0;
  padding: var(--space-xs) 0 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.film-toc-list li {
  max-width: none;
}
.film-toc-list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
@media (min-width: 64rem) {
  .film-story {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: end;
  }
  .film-toc {
    grid-column: 1 / -1;
  }
}
.film-registers {
  padding-block: var(--space-2xl) 0;
}
.film-registers-head,
.film-tabs,
.film-register-inner {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}
.film-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3xs);
  margin-block: var(--space-l) 0;
  padding-bottom: var(--space-xs);
}
.film-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--tap);
  padding: var(--space-2xs) 0;
  border: 0;
  border-radius: var(--radius-l);
  background: none;
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.15;
  text-align: center;
}
.film-tab-disc {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.2);
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.film-tab:hover .film-tab-disc {
  transform: scale(1.06);
}
.film-tab[aria-selected="true"] {
  font-weight: 600;
}
.film-tab[aria-selected="true"] .film-tab-disc {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.2), 0 0 0 3px var(--paper), 0 0 0 5px var(--ink);
}
[data-register="predator-black"] .film-tab-disc {
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4);
}
[data-register="predator-black"] .film-tab[aria-selected="true"] .film-tab-disc {
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4), 0 0 0 3px var(--paper), 0 0 0 5px var(--ink);
}
.film-tab[data-film-tab="meadow-gold"] .film-tab-disc { background: #D4A857; }
.film-tab[data-film-tab="crossing-grey"] .film-tab-disc { background: #7A8B8B; }
.film-tab[data-film-tab="briar-glow"] .film-tab-disc { background: #A8E0D0; }
.film-tab[data-film-tab="predator-black"] .film-tab-disc { background: #1C1C1C; }
.film-tab[data-film-tab="dawn-open"] .film-tab-disc { background: #E8C8A0; }
@media (min-width: 48rem) {
  .film-tabs {
    gap: var(--space-2xs);
  }
  .film-tab {
    flex-direction: row;
    justify-content: center;
    padding: var(--space-2xs) var(--space-xs);
    font-size: var(--step-0);
  }
  .film-tab-disc {
    width: 1.9rem;
    height: 1.9rem;
  }
}
.film-register {
  padding-block: 0 var(--space-2xl);
}
.js .film-register:not(.film-register--current) {
  display: none;
}
.film-register > .be-scene {
  margin-block: 0 var(--space-xl);
}
.film-register > .be-scene > .be-scene-cards {
  justify-items: start;
  padding: var(--space-l) clamp(1rem, 4vw, 3rem);
}
.film-light--meadow {
  --be-s1: 1.06;
}
.film-light--briar {
  --be-s1: 1.06;
}
.film-register-head {
  max-width: 50rem;
}
.film-register-name {
  margin: 0;
  font-size: var(--step-4);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  font-feature-settings: "case";
}
.film-register-meaning {
  margin: var(--space-xs) 0 0;
  font-size: var(--step-1);
  line-height: var(--leading-snug);
}
.film-register-art {
  display: grid;
  gap: var(--space-s);
  margin-block: var(--space-l);
}
.film-register-art .be-window {
  margin: 0;
}
.film-register-notes {
  display: grid;
  gap: var(--space-l);
}
.film-spec {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
}
.film-spec dd {
  margin: 0.1rem 0 0;
}
.film-swatches {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  max-width: 44rem;
  margin: var(--space-m) 0 0;
  padding: 0;
  list-style: none;
}
.film-swatches li {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  max-width: none;
}
.film-chip {
  display: block;
  height: 3rem;
  box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.2);
}
.film-swatches li:first-child .film-chip {
  border-radius: var(--radius-l) 0 0 var(--radius-l);
}
.film-swatches li:last-child .film-chip {
  border-radius: 0 var(--radius-l) var(--radius-l) 0;
}
[data-register="predator-black"] .film-chip {
  box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.3);
}
.film-hex {
  padding-left: 0.15rem;
  color: var(--ink-soft);
  font-size: var(--step--2);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.film-chip[data-film-hex="D4A857"] { background: #D4A857; }
.film-chip[data-film-hex="8B6914"] { background: #8B6914; }
.film-chip[data-film-hex="F5E6C8"] { background: #F5E6C8; }
.film-chip[data-film-hex="6B4423"] { background: #6B4423; }
.film-chip[data-film-hex="C9B458"] { background: #C9B458; }
.film-chip[data-film-hex="A0522D"] { background: #A0522D; }
.film-chip[data-film-hex="7A8B8B"] { background: #7A8B8B; }
.film-chip[data-film-hex="4A5859"] { background: #4A5859; }
.film-chip[data-film-hex="B8C4C4"] { background: #B8C4C4; }
.film-chip[data-film-hex="3D4F4F"] { background: #3D4F4F; }
.film-chip[data-film-hex="9BA8A8"] { background: #9BA8A8; }
.film-chip[data-film-hex="2C3E3E"] { background: #2C3E3E; }
.film-chip[data-film-hex="A8E0D0"] { background: #A8E0D0; }
.film-chip[data-film-hex="4ECDC4"] { background: #4ECDC4; }
.film-chip[data-film-hex="2D6A5A"] { background: #2D6A5A; }
.film-chip[data-film-hex="E8F5F0"] { background: #E8F5F0; }
.film-chip[data-film-hex="1A4A3A"] { background: #1A4A3A; }
.film-chip[data-film-hex="7BC8B5"] { background: #7BC8B5; }
.film-chip[data-film-hex="1C1C1C"] { background: #1C1C1C; }
.film-chip[data-film-hex="8B0000"] { background: #8B0000; }
.film-chip[data-film-hex="3C3C3C"] { background: #3C3C3C; }
.film-chip[data-film-hex="5A0000"] { background: #5A0000; }
.film-chip[data-film-hex="4D4D4D"] { background: #4D4D4D; }
.film-chip[data-film-hex="2A0A0A"] { background: #2A0A0A; }
.film-chip[data-film-hex="E8C8A0"] { background: #E8C8A0; }
.film-chip[data-film-hex="F0D8B8"] { background: #F0D8B8; }
.film-chip[data-film-hex="C4956A"] { background: #C4956A; }
.film-chip[data-film-hex="87CEEB"] { background: #87CEEB; }
.film-chip[data-film-hex="D4A07A"] { background: #D4A07A; }
.film-chip[data-film-hex="F5E0C4"] { background: #F5E0C4; }
.film-register-line {
  margin: 0;
}
.film-register-line blockquote {
  margin: 0;
  padding: 0 0 0 var(--space-s);
  border-left: 3px solid var(--accent);
  font-size: var(--step-1);
  font-style: italic;
  line-height: var(--leading-snug);
}
.film-register-line blockquote p {
  margin: 0;
}
.film-register-line blockquote p::before {
  content: "\201C";
}
.film-register-line blockquote p::after {
  content: "\201D";
}
.film-register-line figcaption {
  margin-top: var(--space-2xs);
  padding-left: calc(var(--space-s) + 3px);
  color: var(--ink-soft);
  font-size: var(--step--1);
}
@media (min-width: 40rem) {
  .film-register-art {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .film-register-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 0 var(--space-2xl);
    align-items: start;
  }
  .film-register-art {
    margin-block: 0;
  }
  .film-register-notes {
    grid-column: 1 / -1;
    margin-top: var(--space-xl);
  }
  .film-spec {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-l);
  }
  .film-register-line {
    max-width: 50rem;
  }
}
.film-art {
  margin-top: var(--space-3xl);
}
.film-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m) var(--space-s);
  margin: var(--space-l) 0 0;
  padding: 0;
  list-style: none;
}
.film-piece {
  max-width: none;
}
.film-piece--feature {
  grid-column: 1 / -1;
}
.film-piece .be-window {
  margin: 0;
}
.film-piece figcaption,
.film-board-frame figcaption {
  margin-top: var(--space-2xs);
  font-size: var(--step--1);
  line-height: 1.35;
}
.film-piece-kind {
  display: block;
  color: var(--ink-soft);
}
.film-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-m) var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: film-board;
}
.film-board-frame {
  max-width: none;
  counter-increment: film-board;
}
.film-board-frame .be-window {
  margin: 0;
}
.film-board-frame .be-window-frame {
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--rule-strong);
}
.film-board-frame .be-window-img {
  aspect-ratio: 16 / 9;
}
.film-board-frame figcaption::before {
  content: counter(film-board, decimal-leading-zero) "  ";
  color: var(--ink-soft);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.08em;
}
.film-credit {
  margin-top: var(--space-l);
  color: var(--ink-soft);
  font-size: var(--step--1);
  font-style: italic;
}
@media (min-width: 40rem) {
  .film-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .film-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .film-piece--feature {
    grid-column: span 2;
    grid-row: span 2;
  }
  .film-piece--feature figcaption {
    font-size: var(--step-0);
  }
  .film-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.film-teaser {
  margin-top: var(--space-3xl);
  padding-block: var(--space-2xl);
}
.film-teaser-inner {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}
.film-screen {
  display: grid;
  margin: var(--space-l) 0 var(--space-2xl);
}
.film-screen > * {
  grid-area: 1 / 1;
  margin: 0;
}
.film-screen > .be-window {
  align-self: start;
}
.film-screen .be-window-img {
  aspect-ratio: 16 / 9;
  filter: brightness(0.8);
}
.film-screen .be-reel {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: end;
  justify-items: start;
  padding: clamp(1rem, 4.5%, 2.75rem);
}
.film-screen .be-reel[data-be-reel-open] {
  display: block;
  padding: 0;
}
.film-screen:has(> .be-reel[data-be-reel-open]) > .be-window {
  display: none;
}
@media (max-width: 40rem) {
  .film-screen {
    margin-inline: calc(-1 * var(--gutter));
  }
  .film-screen .be-window-img {
    aspect-ratio: 4 / 5;
  }
}
.film-board {
  display: grid;
  gap: var(--space-xl) var(--space-l);
  margin: var(--space-l) 0 0;
  padding: 0;
  list-style: none;
}
.film-frame {
  max-width: none;
}
.film-frame .be-window {
  margin: 0;
}
.film-frame .be-window-img {
  aspect-ratio: 16 / 9;
}
.film-frame figcaption {
  margin-top: var(--space-xs);
}
.film-frame-meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  margin: 0;
  color: var(--ink-soft);
}
.film-frame-time {
  font-size: var(--step--1);
}
.film-frame-title {
  margin: 0.1rem 0 0;
}
.film-frame-vo {
  margin: var(--space-2xs) 0 0;
  font-size: var(--step-1);
  font-style: italic;
  line-height: var(--leading-snug);
}
.film-frame-none {
  margin: var(--space-2xs) 0 0;
  color: var(--ink-soft);
  font-size: var(--step--1);
}
.film-teaser-note {
  margin: var(--space-xl) 0 0;
  color: var(--ink-soft);
  font-size: var(--step--1);
}
.film-board-end {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-m);
  margin: var(--space-l) 0 0;
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule);
}
.film-board-end-title {
  font-size: var(--step-2);
  font-weight: var(--weight-display);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  font-feature-settings: "case";
}
.film-board-end-credit,
.film-board-end-line,
.film-board-end-tagline {
  color: var(--ink-soft);
}
.film-board-end-tagline {
  font-style: italic;
}
.film-board-end-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-m);
}
.film-board-end-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
@media (min-width: 48rem) {
  .film-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.film-themes {
  margin-top: var(--space-3xl);
}
.film-themes-note,
.film-themes-nojs {
  max-width: 44rem;
  color: var(--ink-soft);
}
.film-scale {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s);
  margin: var(--space-l) 0 var(--space-m);
  padding: 0;
  list-style: none;
}
.film-theme {
  display: flex;
  flex: 0 1 100%;
  flex-direction: column;
  gap: var(--space-2xs);
  max-width: none;
  padding: var(--space-m);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-l);
}
.film-note {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  margin: 0 0 var(--space-3xs);
  border: 1.5px solid var(--rule-strong);
  border-radius: 50%;
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.film-theme-name {
  margin: 0;
  font-size: var(--step-1);
}
.film-theme-alias {
  display: block;
  margin-top: 0.15rem;
  color: var(--ink-soft);
  font-size: var(--step--1);
  font-style: italic;
  font-weight: 400;
}
.film-theme-mode {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--step--1);
}
.film-theme-line {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.45;
}
.film-contour {
  display: block;
  width: 100%;
  height: auto;
  margin-block: var(--space-2xs) var(--space-3xs);
  padding: 0.2rem 0;
  border-block: 1px dashed var(--rule);
  color: var(--accent-ink);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.film-contour-note {
  stroke: var(--deep);
  stroke-width: 6.5;
}
.film-theme-play {
  align-self: flex-start;
  margin-top: auto;
}
.film-theme-caption {
  margin: 0;
  line-height: 1.35;
}
@media (max-width: 40rem) {
  .film-scale {
    gap: var(--space-xs);
  }
  .film-theme {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-s);
    row-gap: var(--space-3xs);
    padding: var(--space-s);
  }
  .film-theme > * {
    grid-column: 2;
  }
  .film-theme > .film-note {
    grid-column: 1;
    grid-row: 1 / span 4;
    margin: 0;
  }
  .film-theme-play {
    justify-self: start;
    margin-top: var(--space-2xs);
  }
}
@media (min-width: 40rem) {
  .film-theme {
    flex-basis: calc((100% - var(--space-s)) / 2 - 0.1px);
  }
}
@media (min-width: 64rem) {
  .film-theme {
    flex-basis: calc((100% - 3 * var(--space-s)) / 4 - 0.1px);
  }
}
.film-theme[data-film-playing] .film-note {
  background: var(--button-bg);
  border-color: var(--button-bg);
  color: var(--button-ink);
}
