@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500;600;700&family=Oswald:wght@300;400;500&display=swap');

:root {
  --bg:#050505;
  --ink:#f3f1ec;
  --soft:#cbc8c1;
  --muted:#918e88;
  --accent:#c0b4df;
  --line:rgba(243,241,236,.14);
  --display:"Oswald",Arial,sans-serif;
  --body:"Oswald",Arial,sans-serif;
  --nav:"Oswald",Arial,sans-serif;
  --brand:"Josefin Sans",Arial,sans-serif;
  --max:1040px;
}

* { box-sizing:border-box; }
html { color-scheme:dark; background:var(--bg); }
body {
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img { display:block; width:100%; height:auto; }
a { color:inherit; }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }

.page {
  width:min(calc(100% - 64px),var(--max));
  margin:0 auto;
  padding-bottom:58px;
}

.site-head {
  padding:32px 0 23px;
  text-align:center;
  border-bottom:1px solid var(--line);
}
.site-title {
  margin:0;
  font-family:var(--brand);
  font-size:clamp(31px,4.6vw,48px);
  font-weight:600;
  line-height:1;
  letter-spacing:.085em;
}
.site-title a {
  color:var(--ink);
  text-decoration:none;
  transition:color 150ms ease;
}
.site-title a:hover,
.site-title a:focus-visible { color:var(--accent); }

.site-nav {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px 30px;
  margin-top:19px;
  font-family:var(--nav);
  font-size:17px;
  font-weight:400;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.site-nav a {
  position:relative;
  padding-bottom:7px;
  color:var(--soft);
  text-decoration:none;
}
.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a.active { color:var(--ink); }
.site-nav a.active::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:20px;
  height:1px;
  background:var(--accent);
  transform:translateX(-50%);
}

main { padding-top:42px; }
.status,
.card-status,
.detail-link {
  font-family:var(--nav);
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.status,
.card-status { color:var(--accent); }
.status { margin:0 0 14px; font-size:12px; }

.catalog-home { padding-top:0; }
.film-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:48px clamp(28px,3.4vw,42px);
}
.film-entry { min-width:0; }
.film-card-link {
  display:flex;
  flex-direction:column;
  height:100%;
  color:inherit;
  text-decoration:none;
}
.film-media,
.detail-media {
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  background:#111;
}
.film-media img,
.detail-media img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.film-media img { transition:transform 180ms ease-out,opacity 180ms ease-out; }
.film-card-link:hover .film-media img { transform:scale(1.012); opacity:.95; }

.film-copy {
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:flex-start;
  padding-top:17px;
}
.film-entry h2 {
  margin:0 0 7px;
  font-family:var(--display);
  font-size:clamp(29px,3.2vw,38px);
  font-weight:400;
  line-height:1.03;
}
.card-status { margin:0 0 12px; font-size:11px; line-height:1.2; }
.logline { margin:0; color:var(--soft); }
.film-copy .logline { margin-bottom:20px; font-size:16px; }
.more-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:39px;
  margin-top:auto;
  padding:9px 16px;
  border:1px solid rgba(243,241,236,.34);
  color:var(--ink);
  background:transparent;
  font-family:var(--nav);
  font-size:12px;
  font-weight:400;
  letter-spacing:.1em;
  line-height:1;
  text-transform:uppercase;
  transition:border-color 150ms ease,background 150ms ease;
}
.film-card-link:hover .more-button,
.film-card-link:focus-visible .more-button {
  border-color:var(--accent);
  background:rgba(192,180,223,.09);
}

.detail-layout {
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(260px,.75fr);
  gap:clamp(34px,5vw,62px);
  align-items:start;
}
.detail-media iframe,
.video-container {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.video-container {
  z-index:1;
}
.video-container:empty {
  pointer-events:none;
}
.detail-media iframe { border:0; }
.video-overlay {
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:#111;
  cursor:pointer;
}
.video-overlay img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.video-overlay::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.22),transparent 42%);
  pointer-events:none;
}
.play-button {
  position:absolute;
  z-index:2;
  left:22px;
  bottom:20px;
  width:48px;
  height:48px;
  border:1px solid rgba(255,255,255,.88);
  border-radius:50%;
  background:rgba(0,0,0,.34);
  transition:transform 150ms ease,background 150ms ease;
}
.play-button::after {
  content:"";
  position:absolute;
  left:19px;
  top:15px;
  width:0;
  height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-left:12px solid #fff;
}
.video-overlay:hover .play-button,
.video-overlay:focus-visible .play-button {
  transform:scale(1.08);
  background:rgba(0,0,0,.58);
}
.detail-copy h1 {
  margin:0 0 10px;
  font-family:var(--display);
  font-size:clamp(35px,4.4vw,50px);
  font-weight:400;
  line-height:1.02;
}
.status-under-title { margin:0 0 17px; }
.detail-copy .logline { font-size:18px; }
.detail-copy .secondary { margin:18px 0 0; color:var(--muted); font-size:16px; }
.detail-link {
  display:inline-block;
  margin-top:22px;
  color:var(--ink);
  font-size:12px;
  text-decoration:none;
  border-bottom:1px solid var(--accent);
}
.detail-link:hover { color:var(--accent); }

.watch-links.prominent {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}
.watch-links.two-up {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.watch-button {
  display:grid;
  grid-template-rows:auto 1fr;
  align-items:center;
  justify-items:center;
  min-width:188px;
  min-height:88px;
  padding:10px 18px 13px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:4px;
  background:#f4f6f7;
  color:#121212;
  box-shadow:0 10px 24px rgba(0,0,0,.24);
  text-decoration:none;
  transition:transform 150ms ease,border-color 150ms ease,filter 150ms ease;
}
.watch-links.two-up .watch-button {
  width:100%;
  min-width:0;
  padding-left:12px;
  padding-right:12px;
}
.watch-button.tubi {
  background:#6a24ff;
  color:#ffe600;
}
.watch-label {
  align-self:start;
  color:#272727;
  font-family:var(--nav);
  font-size:10px;
  letter-spacing:.12em;
  line-height:1;
  text-transform:uppercase;
  opacity:.72;
}
.watch-button.tubi .watch-label {
  color:#ffe600;
  opacity:.9;
}
.platform-logo {
  width:auto;
  max-width:145px;
  height:42px;
  object-fit:contain;
}
.watch-links.two-up .platform-logo { max-width:100%; }
.tubi-logo {
  height:44px;
  filter:brightness(0) saturate(100%) invert(90%) sepia(98%) saturate(1620%) hue-rotate(350deg) brightness(104%) contrast(102%);
}
.prime-logo { height:39px; }
.watch-button:hover,
.watch-button:focus-visible {
  transform:translateY(-2px);
  border-color:var(--accent);
  filter:brightness(1.04);
}

.people-credits {
  display:block;
  margin-top:52px;
  padding-top:30px;
  border-top:1px solid var(--line);
}
.people-column + .people-column {
  margin-top:42px;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.people-column h2,
.awards h2,
.bio-block h2 {
  margin:0 0 20px;
  font-family:var(--display);
  font-weight:400;
  line-height:1.05;
}
.people-column h2,
.awards h2 { font-size:27px; }
.people-list {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 28px;
  margin:0;
  padding:0;
  list-style:none;
}
.people-list.compact { grid-template-columns:repeat(2,minmax(0,1fr)); }
.people-list li {
  min-width:0;
  padding:10px 0;
  border-top:1px solid var(--line);
}
.credit-name { display:block; color:var(--ink); font-size:16px; line-height:1.25; }
.credit-role {
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:12px;
  line-height:1.3;
  letter-spacing:.045em;
  text-transform:uppercase;
}

.awards {
  margin-top:52px;
  padding-top:30px;
  border-top:1px solid var(--line);
}
.festival-award-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 34px;
  margin:0;
  padding:0;
  list-style:none;
}
.festival-award-list li {
  padding:14px 0 15px;
  border-top:1px solid var(--line);
}
.festival-name {
  display:block;
  color:var(--ink);
  font-family:var(--display);
  font-size:19px;
  line-height:1.2;
}
.festival-awards {
  display:block;
  margin-top:5px;
  color:var(--accent);
  font-family:var(--nav);
  font-size:12px;
  line-height:1.4;
  letter-spacing:.055em;
  text-transform:uppercase;
}

.about-main { width:min(820px,100%); margin:0 auto; }
.about-copy > p { margin:0 0 18px; color:var(--soft); }
.about-copy > p:last-of-type { margin-bottom:0; }
.about-copy .about-lede { color:var(--ink); font-size:20px; line-height:1.5; }
.bio-pair {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(34px,5vw,58px);
  margin-top:45px;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.bio-block h2 { font-size:28px; }
.bio-block p { margin:0; color:var(--soft); }

.contact-main {
  width:min(620px,100%);
  margin:0 auto;
  padding-top:38px;
  text-align:center;
}
.contact-main p { margin:0; color:var(--soft); }
.contact-email {
  display:inline-block;
  margin-top:28px;
  color:var(--accent);
  font-family:var(--nav);
  font-size:clamp(19px,2.5vw,25px);
  font-weight:400;
  letter-spacing:.035em;
  text-decoration:none;
  border-bottom:1px solid currentColor;
}
.contact-email:hover { color:var(--ink); }

@media (max-width:900px) {
  .page { width:min(calc(100% - 44px),var(--max)); }
  .detail-layout { grid-template-columns:1fr; gap:28px; }
  .detail-copy { max-width:720px; }
  .people-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .festival-award-list { grid-template-columns:1fr; }
}

@media (max-width:760px) {
  .film-grid { grid-template-columns:1fr; gap:42px; }
  .film-entry { max-width:720px; }
  .bio-pair { grid-template-columns:1fr; gap:38px; }
}

@media (max-width:620px) {
  .people-list,
  .people-list.compact { grid-template-columns:1fr; }
  .watch-button { min-width:100%; }
  .watch-links.two-up { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .watch-links.two-up .watch-button { min-width:0; }
}

@media (max-width:520px) {
  .page { width:calc(100% - 34px); padding-bottom:42px; }
  .site-head { padding-top:25px; }
  .site-title { font-size:clamp(28px,9vw,39px); letter-spacing:.055em; }
  .site-nav { gap:10px 21px; margin-top:18px; font-size:15px; }
  main { padding-top:30px; }
}

@media (prefers-reduced-motion:reduce) {
  .site-title a,
  .film-media img,
  .watch-button,
  .play-button { transition:none; }
  .film-card-link:hover .film-media img,
  .watch-button:hover,
  .video-overlay:hover .play-button { transform:none; }
}