/* Backpropagation: casting page, synopsis and sides. Black like the film, set in the title's typeface. */
@font-face { font-family: "Cormorant Garamond"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: italic; font-display: swap; src: url("fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }

:root {
  --void: #000;
  --bone: #d9dee4;
  --text: #d9dee4;   /* body text: the same white as the dialogue and headings (was a dimmer grey, #c8ced6) */
  --ash: #7d8691;
  --rule: #262b31;
  --ember: #ff9a4d;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--void); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  background: var(--void);
  color: var(--text);
  font-family: "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", Georgia, serif;
  font-weight: 500;
  font-size: clamp(19px, 1.05rem + 0.35vw, 22px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* the opening sequence, full width, in its own 2.39:1 frame */
.opening { margin: 0; background: #000; }
.opening video { display: block; width: 100%; max-width: 1600px; margin: 0 auto; aspect-ratio: 1920 / 804; background: #000; }

/* the synopsis */
.synopsis { max-width: 34em; margin: 0 auto; padding: clamp(40px, 7vw, 88px) 24px 120px; }
.synopsis h1 {
  margin: 0 0 1.6em; text-align: center;
  font-weight: 300; font-size: clamp(26px, 4.4vw, 40px); line-height: 1.15;
  text-transform: uppercase; letter-spacing: 0.34em; padding-left: 0.34em;
  color: var(--bone);
  overflow-wrap: anywhere;
}
@media (max-width: 560px) {
  .synopsis h1 { font-size: 22px; letter-spacing: 0.2em; padding-left: 0.2em; }
}
.synopsis h2 {
  margin: 2.6em 0 0.7em;
  font-weight: 500; font-size: 1.45em; line-height: 1.25; color: var(--bone);
}
.synopsis h3 {
  margin: 2em 0 0.5em;
  font-weight: 500; font-style: italic; font-size: 1.15em; line-height: 1.3; color: var(--bone);
}
.synopsis h4, .synopsis h5, .synopsis h6 { margin: 1.8em 0 0.4em; font-weight: 600; font-size: 1em; color: var(--bone); }
.synopsis p { margin: 0 0 1.05em; }
.synopsis strong { font-weight: 600; color: var(--bone); }
.synopsis em { font-style: italic; }
.synopsis a { color: var(--ember); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.synopsis a:focus-visible { outline: 1px solid var(--bone); outline-offset: 3px; }
.synopsis ul, .synopsis ol { margin: 0 0 1.05em; padding-left: 1.3em; }
.synopsis li { margin: 0.25em 0; }
.synopsis blockquote { margin: 1.5em 0; padding: 0 0 0 1.1em; border-left: 1px solid var(--rule); font-style: italic; color: var(--bone); }
.synopsis hr { border: 0; height: 1px; width: 5em; margin: 3em auto; background: var(--rule); }
.synopsis img { max-width: 100%; height: auto; }
.synopsis table { border-collapse: collapse; margin: 1.5em 0; display: block; overflow-x: auto; }
.synopsis th, .synopsis td { border-bottom: 1px solid var(--rule); padding: 0.4em 0.9em 0.4em 0; text-align: left; }
.synopsis code { font-size: 0.85em; }
::selection { background: rgba(255, 154, 77, 0.35); color: #fff; }

/* ---------- added 23 Oct: navigation, front page, role pages, footer ---------- */

/* navigation bar */
.topbar nav {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end;
  gap: 0.35em 1.7em;
  max-width: 1240px; margin: 0 auto; padding: 18px 28px;
  font-size: 14px; font-weight: 500; line-height: 1.4;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.topbar a { color: var(--bone); text-decoration: none; opacity: 0.75; }
.topbar a:hover, .topbar a:focus-visible, .topbar a[aria-current] { opacity: 1; }
.topbar a:focus-visible { outline: 1px solid var(--bone); outline-offset: 4px; }
.topbar .brand { margin-right: auto; font-weight: 400; letter-spacing: 0.3em; opacity: 1; }
.home .topbar .brand { visibility: hidden; }
@media (max-width: 640px) {
  .topbar nav { justify-content: center; gap: 0.3em 1.3em; padding: 14px 16px; font-size: 13px; letter-spacing: 0.12em; }
  .topbar .brand { flex-basis: 100%; margin: 0 0 0.25em; text-align: center; }
  .home .topbar .brand { display: none; }
}

/* on the synopsis page the navigation bar stays at the top while reading */
.page .topbar { position: sticky; top: 0; z-index: 5; background: rgba(0, 0, 0, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.synopsis .end-links { margin: 3.5em 0 0; text-align: center; }
.synopsis .end-links .hero-hiring { margin: 0 0 0.8em; }
.synopsis .end-links .hero-links { margin: 0; }

/* front page: the picture as a wide band, the title below it */
.hero { position: relative; max-width: 1600px; margin: 0 auto; }
.hero picture { display: block; position: relative; }
.hero img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 2.39 / 1; max-height: 72vh; max-height: 72svh;
  object-fit: cover; object-position: 50% 75%;
}
.hero picture::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 82%, #000 100%), linear-gradient(to right, #000 0%, rgba(0,0,0,0) 6%, rgba(0,0,0,0) 94%, #000 100%);
}
.hero-text { margin: 0 auto; padding: clamp(20px, 3vw, 36px) 20px 0; max-width: 1100px; text-align: center; }
.hero h1 {
  margin: 0; color: var(--bone);
  font-weight: 300; font-size: clamp(26px, 4.6vw, 62px); line-height: 1.1;
  letter-spacing: 0.34em; padding-left: 0.34em; text-transform: uppercase;
  overflow-wrap: anywhere;
}
.hero-status { margin: 0.9em 0 0; font-size: 14px; line-height: 1.6; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone); }
.hero-links { margin: 1.8em 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 640px) {
  .hero img { aspect-ratio: 3 / 2; object-position: 64% 50%; }
  .hero picture::after { background: linear-gradient(to bottom, rgba(0,0,0,0) 90%, #000 100%), linear-gradient(to right, #000 0%, rgba(0,0,0,0) 4%, rgba(0,0,0,0) 96%, #000 100%); }
  .hero h1 { font-size: 24px; letter-spacing: 0.2em; padding-left: 0.2em; }
  .hero-status { font-size: 13px; letter-spacing: 0.12em; }
  .hero-links { gap: 10px; }
  .hero-links .button { padding: 0.65em 1em 0.58em; font-size: 12px; letter-spacing: 0.1em; }
}
.hero h1, .hero-status, .call h2, .call h3, .call .lead { text-wrap: balance; }

/* buttons */
.button {
  display: inline-block; padding: 0.7em 1.4em 0.62em;
  border: 1px solid rgba(217, 222, 228, 0.6); background: transparent;
  color: var(--bone); text-decoration: none;
  font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.16em; text-transform: uppercase;
}
.button:hover { border-color: var(--bone); }
.button:focus-visible { outline: 1px solid var(--bone); outline-offset: 3px; }
.button.primary { border-color: var(--ember); background: var(--ember); color: #000; }
.button.primary:hover { background: #ffb173; border-color: #ffb173; }
.synopsis a.button { color: var(--bone); text-decoration: none; }
.synopsis a.button.primary { color: #000; }

/* the front page's text column and the role pages */
.call { padding-top: clamp(48px, 7vw, 88px); }
.call h2 {
  margin: 4em 0 1.5em; text-align: center;
  font-weight: 400; font-size: 1em; line-height: 1.3;
  letter-spacing: 0.34em; padding-left: 0.34em; text-transform: uppercase;
}
.call h2::after { content: ""; display: block; width: 2.5em; height: 1px; margin: 1em auto 0; background: var(--ember); }
.call h2:first-child { margin-top: 0; }
.call h3 { margin: 2.6em 0 0.6em; font-style: normal; font-weight: 500; font-size: 1.4em; line-height: 1.2; }
.call .meta { margin: 0 0 0.9em; font-style: italic; color: var(--ash); }
.call a.more { text-decoration: none; font-size: 0.82em; letter-spacing: 0.14em; text-transform: uppercase; }
.call a.more::after { content: " \203A"; }
.call .cta { margin: 1.8em 0; text-align: center; }
.call .fine { font-size: 0.88em; color: var(--ash); }
.call [id] { scroll-margin-top: 84px; }

/* a video wider than the text column */
.call .wide { position: relative; left: 50%; transform: translateX(-50%); width: min(calc(100vw - 32px), 1120px); margin: 3.2em 0 1em; }
.call .wide video { max-width: none; }
.call figcaption { margin-top: 0.8em; text-align: center; font-style: italic; font-size: 0.9em; color: var(--ash); }

/* role and position cards on the front page */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(14em, 1fr)); gap: 14px; margin: 1.6em 0 2em; }
.synopsis a.card { display: block; padding: 0.9em 1.1em 1em; border: 1px solid var(--rule); color: var(--text); text-decoration: none; transition: border-color 0.2s; }
.synopsis a.card:hover, .synopsis a.card:focus-visible { border-color: var(--ember); outline: none; }
.card-name { display: block; font-size: 1.3em; line-height: 1.2; color: var(--bone); }
.card-name::after { content: " \203A"; color: var(--ember); }
.card-type { display: block; margin: 0.15em 0 0.5em; font-style: italic; font-size: 0.88em; color: var(--ash); }
.card-text { display: block; font-size: 0.92em; line-height: 1.45; }
.card-name + .card-text { margin-top: 0.5em; }

/* the bar of roles at the top of each role page */
.switcher {
  position: sticky; top: 0; z-index: 5;
  background: rgba(0, 0, 0, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.switcher-inner {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: 0.3em 1.5em; max-width: 1240px; margin: 0 auto; padding: 12px 20px;
  font-size: 14px; line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase;
}
.switcher a { color: var(--bone); text-decoration: none; opacity: 0.7; border-bottom: 1px solid transparent; }
.switcher a:hover, .switcher a:focus-visible { opacity: 1; }
.switcher a[aria-current] { opacity: 1; border-bottom-color: var(--ember); }
.switcher .switcher-apply { color: var(--ember); opacity: 1; }
@media (max-width: 640px) {
  .switcher-inner { gap: 0.25em 1.1em; padding: 10px 14px; font-size: 13px; letter-spacing: 0.12em; }
}

/* role pages */
.role-page { padding-top: clamp(40px, 6vw, 72px); }
.role-page .eyebrow { margin: 0 0 0.4em; text-align: center; font-size: 0.8em; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ash); }
.role-page h1 { margin: 0 0 0.3em; }
.role-page > .meta { text-align: center; }
.facts { margin: 2em 0 1.6em; border-top: 1px solid var(--rule); }
.facts div { display: grid; grid-template-columns: 7.5em 1fr; gap: 1em; padding: 0.55em 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-style: italic; color: var(--ash); }
.facts dd { margin: 0; }
@media (max-width: 560px) { .facts div { grid-template-columns: 1fr; gap: 0; } }
.role-page .jump { margin: 0 0 2.4em; text-align: center; }
.apply { margin-top: 4em; }

/* the application form */
.apply-form { margin: 1.6em 0 1em; }
.apply-form .field { margin: 0 0 1.15em; }
.apply-form label { display: block; margin: 0 0 0.3em; color: var(--bone); }
.apply-form label span { margin-left: 0.4em; font-style: italic; font-size: 0.88em; color: var(--ash); }
.apply-form input:not([type=checkbox]):not([type=hidden]), .apply-form textarea, .apply-form select {
  display: block; width: 100%; padding: 0.55em 0.7em;
  background: #0b0d10; color: var(--text); border: 1px solid #3a4048; border-radius: 3px;
  font: inherit; font-size: 0.95em; line-height: 1.4;
}
.apply-form input[type=file] { padding: 0.45em 0.6em; font-size: 0.85em; }
.apply-form input:focus, .apply-form textarea:focus, .apply-form select:focus { outline: none; border-color: var(--ember); }
.apply-form textarea { resize: vertical; }
.apply-form small { display: block; margin-top: 0.35em; font-size: 0.82em; line-height: 1.4; color: var(--ash); }
.apply-form .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.apply-form .submit { margin: 1.6em 0 0.6em; }
.apply-form button { cursor: pointer; font-family: inherit; }
.apply-form button[disabled] { opacity: 0.6; cursor: default; }
.apply-form .form-status:empty { display: none; }
.apply-form .form-status { margin: 0.6em 0 0; }
.apply-form .form-status.error { color: #ff8a80; }
.apply-form.sent > :not(.form-status) { display: none; }
.apply-form.sent .form-status { font-size: 1.15em; color: var(--bone); }

.apply-form .kind { display: inline-flex; margin: 0 0 1.6em; border: 1px solid #3a4048; border-radius: 3px; overflow: hidden; }
.apply-form .kind label { margin: 0; padding: 0.45em 1.2em; cursor: pointer; font-size: 0.9em; letter-spacing: 0.06em; color: var(--ash); }
.apply-form .kind label:has(input:checked) { background: var(--bone); color: #000; }
.apply-form .kind input { position: absolute; opacity: 0; pointer-events: none; }
.apply-form .kind label:has(input:focus-visible) { outline: 1px solid var(--ember); outline-offset: -3px; }
.apply-form label > .for-application, .apply-form label > .for-question { margin: 0; font-style: normal; font-size: 1em; color: var(--bone); }
.apply-form .for-question, .apply-form.question .for-application { display: none; }
.apply-form.question .for-question { display: inline; }
.apply-form.question .field.for-application { display: none; }

/* front page: "Now hiring" above the buttons */
.hero-hiring { margin: 1.8em 0 0; font-size: 13px; letter-spacing: 0.3em; padding-left: 0.3em; text-transform: uppercase; color: var(--ember); }
.hero-hiring + .hero-links { margin-top: 0.8em; }

/* footer */
.site-footer {
  max-width: 34em; margin: 0 auto; padding: 36px 24px 72px;
  border-top: 1px solid var(--rule);
  text-align: center; font-size: 0.85em; color: var(--ash);
}
.site-footer p { margin: 0 0 0.5em; }
.site-footer .footer-title { color: var(--bone); font-weight: 300; letter-spacing: 0.34em; padding-left: 0.34em; text-transform: uppercase; }
.site-footer a { color: var(--ember); text-decoration: none; }

/* shown only while _config.yml still has the placeholder email */
.todo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; margin: 0; padding: 10px 16px; background: #b3261e; color: #fff; font: 15px/1.4 system-ui, sans-serif; text-align: center; }

/* printing a role page: black on white, each audition side on a new page */
@media print {
  :root { --void: #fff; --bone: #000; --text: #000; --ash: #444; --rule: #999; --ember: #000; }
  html, body { background: #fff; color: #000; }
  .topbar, .switcher, .site-footer, .opening, .hero, .todo, .jump, .apply { display: none; }
  .synopsis { max-width: none; padding: 0; font-size: 12pt; }
  .role-page h3 { break-before: page; }
  .synopsis blockquote { break-inside: avoid; }
  p { orphans: 3; widows: 3; }
}