/* Sloppywood Studios — built on the SLOPPYWOOD design system.
   Screen theme (dark theatre) is the default; .lot sections switch to Lot (daylight on the studio lot).
   Rules kept: square corners, no gradients/glow/shadows, white titles never styled,
   one cue dot per frame, one red thing per screen. */

:root {
  --leader: #0a0a0b;
  --booth: #141416;
  --title-white: #ffffff;
  --title-muted: #b9b6af;
  --academy: #8d8982;
  --cue: #f7931a;
  --rating: #c8102e;
  --seal: #c9a54a;
  --on-rating: #ffffff;
  --on-title: #0a0a0b;
  --rule: rgba(255, 255, 255, 0.18);
  --focus: #ffffff;

  --f-title: Orbitron, "Eurostile", "Arial Black", sans-serif;
  --f-billing: Oswald, "Arial Narrow", sans-serif;
  --f-body: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  --f-booth: "Courier Prime", "Courier New", Courier, monospace;

  --s1: 4px; --s2: 8px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px; --s24: 96px;
  --gutter: 16px;
  --maxw: 1240px;
  --header-h: 56px;
  color-scheme: dark;
}

.lot {
  --leader: #eceae4;
  --booth: #ddd9d0;
  --title-white: #0a0a0b;
  --title-muted: #4a4843;
  --seal: #9a7a2a;
  --on-title: #ffffff;
  --rule: rgba(10, 10, 11, 0.18);
  --focus: #0a0a0b;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--leader);
  color: var(--title-white);
  font: 400 16px/1.55 var(--f-body);
  overflow-x: hidden;
}
img, svg, iframe { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s4); top: -100px; z-index: 100; background: var(--title-white); color: var(--on-title); padding: var(--s2) var(--s4); font: 600 14px/1 var(--f-body); }
.skip:focus { top: var(--s2); }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 48px; } }
@media (min-width: 1100px) { :root { --gutter: 64px; } }

/* ---------- type ---------- */
.t-xl, .t-l, .t-m, .t-s { font-family: var(--f-title); font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; margin: 0; color: var(--title-white); overflow-wrap: anywhere; }
.t-xl { font-size: clamp(28px, 8.6vw, 120px); line-height: 0.98; overflow-wrap: normal; }
.t-xl .w { display: inline-block; white-space: nowrap; }
.t-l  { font-size: clamp(30px, 5.6vw, 64px); line-height: 1.04; }
.t-m  { font-size: clamp(22px, 3vw, 32px); line-height: 1.1; }
.t-s  { font-size: 18px; line-height: 1.2; font-weight: 700; letter-spacing: 0.06em; }
.billing { font: 500 13px/1.35 var(--f-billing); letter-spacing: 0.18em; text-transform: uppercase; color: var(--title-muted); margin: 0; }
.presents { font: 400 clamp(13px, 1.6vw, 18px)/1.2 var(--f-billing); letter-spacing: 0.32em; text-transform: uppercase; color: var(--title-muted); margin: 0; }
.lead { font-size: clamp(18px, 2vw, 21px); line-height: 1.5; color: var(--title-white); margin: 0; max-width: 40em; }
.body { color: var(--title-muted); margin: 0; max-width: 38em; }
.lot .body { color: var(--title-muted); }
.slate { font: 400 13px/1.6 var(--f-booth); color: var(--title-muted); letter-spacing: 0.02em; margin: 0; }
.tc { font: 700 13px/1 var(--f-booth); letter-spacing: 0.04em; color: var(--title-muted); }
.cue-rule { display: block; height: 1px; background: var(--cue); border: 0; margin: var(--s4) 0 0; width: min(100%, 320px); }
.rule { display: block; height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0 var(--s6);
  font: 600 14px/1 var(--f-body); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  background: var(--title-white); color: var(--on-title); border: 1px solid var(--title-white); border-radius: 0; cursor: pointer;
}
.btn:hover { background: transparent; color: var(--title-white); }
.btn--ghost { background: transparent; color: var(--title-white); border-color: var(--rule); }
.btn--ghost:hover { border-color: var(--title-white); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s4); }

/* ---------- header ---------- */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  background: rgba(10, 10, 11, 0.94); border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.site-head .wrap { height: 100%; display: flex; align-items: center; gap: var(--s6); }
.mark { font: 900 15px/1 var(--f-title); letter-spacing: 0.06em; text-decoration: none; color: #fff; white-space: nowrap; }
.mark small { font: 400 10px/1 var(--f-billing); letter-spacing: 0.3em; color: #b9b6af; margin-left: var(--s2); }
.nav { margin-left: auto; display: flex; gap: var(--s6); }
.nav a { font: 500 13px/1 var(--f-billing); letter-spacing: 0.18em; text-transform: uppercase; color: #b9b6af; text-decoration: none; padding: var(--s2) 0; }
.nav a:hover, .nav a[aria-current="true"] { color: #fff; }
.head-reel { font: 700 12px/1 var(--f-booth); color: #b9b6af; white-space: nowrap; }
.cue-dot { width: 16px; height: 16px; border-radius: 999px; background: var(--cue); flex: none; }
.menu-btn { display: none; margin-left: auto; background: none; border: 1px solid rgba(255,255,255,0.18); color: #fff; font: 500 12px/1 var(--f-billing); letter-spacing: 0.2em; padding: 10px 12px; cursor: pointer; min-height: 40px; }
@media (max-width: 899px) {
  .nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; gap: 0; background: #0a0a0b; border-bottom: 1px solid rgba(255,255,255,0.12); padding: var(--s2) var(--gutter) var(--s4); }
  .nav.open { display: flex; }
  .nav a { padding: var(--s4) 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 15px; }
  .menu-btn { display: inline-block; }
  .head-reel { display: none; }
  .mark small { display: none; }
}

/* ---------- reel label (section eyebrow) ---------- */
.reel { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s6); }
.reel .slate { white-space: nowrap; }
.reel .rule { flex: 1; }

section { position: relative; }
.band { padding: var(--s16) 0; }
@media (min-width: 900px) { .band { padding: var(--s24) 0; } }

/* ---------- leader intro ---------- */
.leader {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: var(--academy); color: #0a0a0b; overflow: hidden;
}
.leader[hidden] { display: none; }
.leader svg { width: min(78vmin, 560px); height: auto; }
.leader .num { font: 700 1px var(--f-billing); }
.leader-skip { position: absolute; right: var(--s4); bottom: var(--s4); background: #0a0a0b; color: #fff; border: 0; font: 600 13px/1 var(--f-body); letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 18px; cursor: pointer; }
.leader-tc { position: absolute; left: var(--s4); bottom: var(--s4); font: 700 13px/1 var(--f-booth); color: #0a0a0b; }
.leader.start { background: var(--rating); }
.leader.start .ps { display: block; }
.ps { display: none; position: absolute; inset: 0; place-content: center; text-align: center; }
.leader.start .ps { display: grid; }
.ps b { font: 900 clamp(28px, 7vw, 72px)/1 var(--f-title); letter-spacing: 0.06em; color: #fff; }
.leader.start svg, .leader.start .leader-skip, .leader.start .leader-tc { visibility: hidden; }

/* ---------- hero ---------- */
.hero { padding-top: var(--header-h); background: #0a0a0b; color: #fff; }
.sprockets { height: 22px; background: var(--booth); position: relative; }
.sprockets::before {
  content: ""; position: absolute; inset: 6px 0;
  background: repeating-linear-gradient(90deg, transparent 0 9px, #0a0a0b 9px 21px, transparent 21px 24px);
}
.frame-scope {
  position: relative; width: 100%;
  min-height: min(82svh, 760px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--s16) var(--gutter) var(--s16);
}
@media (min-width: 900px) { .frame-scope { min-height: 0; aspect-ratio: 2.39 / 1; padding-bottom: var(--s16); } }
.frame-scope .cue-dot { position: absolute; top: var(--s6); right: var(--gutter); }
.frame-scope .tc { position: absolute; left: var(--gutter); bottom: var(--s6); }
.frame-scope .meta { position: absolute; right: var(--gutter); bottom: var(--s6); }
.lockup { text-align: center; margin: 0 auto; }
.lockup .t-xl { line-height: 0.95; }
.lockup .rule { width: 100%; background: rgba(255,255,255,0.4); margin: clamp(16px, 2.4vw, 32px) 0; }
.hero-cross {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.05)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.05)) 0 50% / 100% 1px no-repeat;
}
.hero-ring { position: absolute; left: 50%; top: 50%; width: min(70vmin, 640px); aspect-ratio: 1; transform: translate(-50%, -54%); border: 1px solid rgba(255,255,255,0.05); border-radius: 999px; pointer-events: none; }
.hero-ring::after { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(255,255,255,0.04); border-radius: 999px; }

.logline { background: #0a0a0b; padding: var(--s16) 0 var(--s8); }
.logline .t-l { max-width: 15em; }
.logline .lead { margin-top: var(--s6); color: #b9b6af; }
.logline .btn-row { margin-top: var(--s8); }

/* ---------- now showing ---------- */
.player { position: relative; background: #000; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; }
.player button.poster { all: unset; position: absolute; inset: 0; cursor: pointer; display: block; }
.player img { width: 100%; height: 100%; object-fit: cover; }
.player .play {
  position: absolute; left: var(--gutter); bottom: var(--s6);
  display: inline-flex; align-items: center; gap: var(--s4);
  background: #fff; color: #0a0a0b; padding: 14px 20px; font: 600 14px/1 var(--f-body); letter-spacing: 0.08em; text-transform: uppercase;
}
.player .play::before { content: ""; width: 0; height: 0; border-left: 11px solid #0a0a0b; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.player button.poster:hover .play, .player button.poster:focus-visible .play { background: #0a0a0b; color: #fff; outline: 1px solid #fff; }
.player button.poster:hover .play::before { border-left-color: #fff; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player .cue-dot { position: absolute; top: var(--s4); right: var(--s4); }
.feature-meta { display: grid; gap: var(--s4); margin-top: var(--s6); }
@media (min-width: 900px) { .feature-meta { grid-template-columns: 1fr 1fr; align-items: end; } }
.feature-meta .t-m { overflow-wrap: anywhere; }

.tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s12) 0 var(--s6); }
.tabs button { background: none; border: 1px solid var(--rule); color: var(--title-muted); font: 500 12px/1 var(--f-billing); letter-spacing: 0.18em; text-transform: uppercase; padding: 12px 14px; cursor: pointer; min-height: 40px; border-radius: 0; }
.tabs button[aria-pressed="true"] { background: var(--title-white); color: var(--on-title); border-color: var(--title-white); }

.programme { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6) var(--s6); grid-template-columns: 1fr; }
@media (min-width: 600px) { .programme { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .programme { grid-template-columns: repeat(3, 1fr); } }
.card { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; font: inherit; }
.card .thumb { display: block; position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.card .thumb img { position: absolute; left: 0; top: -16.7%; width: 100%; height: 133.4%; object-fit: cover; transition: opacity .2s; }
.card .thumb img.hd { top: 0; height: 100%; }
.card:hover .thumb img { opacity: 0.82; }
.card .thumb .tc { position: absolute; left: var(--s2); bottom: var(--s2); background: rgba(10,10,11,0.85); color: #b9b6af; padding: 4px 6px; font-size: 12px; }
.card .row { display: flex; justify-content: space-between; gap: var(--s4); margin-top: var(--s4); }
.card .t-s { margin-top: var(--s2); font-size: 17px; }
.card .body { font-size: 15px; margin-top: var(--s2); }
.card[aria-current="true"] .t-s::after { content: " · NOW PLAYING"; font: 500 11px/1 var(--f-billing); letter-spacing: 0.18em; color: var(--title-muted); }
.programme li[hidden] { display: none; }

/* ---------- star ---------- */
.star { background: #141416; }
.star-grid { display: grid; gap: var(--s12); }
@media (min-width: 900px) { .star-grid { grid-template-columns: 1.1fr 1fr; align-items: center; } }
.billing-card { border: 1px solid rgba(255,255,255,0.18); padding: var(--s12) var(--s6); text-align: center; position: relative; }
.billing-card .cue-dot { position: absolute; top: var(--s4); right: var(--s4); }
.billing-card .t-l { font-size: clamp(30px, 5vw, 56px); }
.billing-card .cue-rule { margin: var(--s4) auto 0; width: 60%; }
.billing-card .presents + .t-l { margin-top: var(--s4); }
.billing-card .stack { display: grid; gap: var(--s2); margin-top: var(--s8); }
.links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); margin-top: var(--s8); padding: 0; list-style: none; }
.links a { font: 500 13px/1 var(--f-billing); letter-spacing: 0.18em; text-transform: uppercase; color: #b9b6af; text-decoration: none; padding: var(--s2) 0; border-bottom: 1px solid rgba(255,255,255,0.18); }
.links a:hover { color: #fff; border-color: #fff; }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.12); margin-top: var(--s8); }
.facts div { background: #141416; padding: var(--s6) var(--s4); }
.facts b { display: block; font: 900 clamp(26px, 4vw, 40px)/1 var(--f-title); letter-spacing: 0.02em; }
.facts span { display: block; margin-top: var(--s2); font: 500 12px/1.3 var(--f-billing); letter-spacing: 0.18em; text-transform: uppercase; color: #b9b6af; }

/* ---------- commissions ---------- */
.bills { display: grid; gap: var(--s6); margin-top: var(--s12); }
@media (min-width: 900px) { .bills { grid-template-columns: repeat(3, 1fr); } .bill--lead { grid-column: 1 / -1; } }
.bill { border: 1px solid var(--rule); padding: var(--s8) var(--s6); display: flex; flex-direction: column; gap: var(--s4); position: relative; background: var(--leader); }
.bill .slate { display: flex; justify-content: space-between; gap: var(--s4); }
.bill ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.bill li { color: var(--title-muted); padding-left: var(--s6); position: relative; }
.bill li::before { content: "—"; position: absolute; left: 0; color: var(--title-muted); }
.bill--lead { border-color: var(--title-white); }
@media (min-width: 900px) {
  .bill--lead { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s8) var(--s12); padding: var(--s12); }
  .bill--lead > .slate { grid-column: 1 / -1; }
}
.bill--lead .t-l { font-size: clamp(30px, 4.6vw, 56px); }
.bill .status { font: 500 11px/1 var(--f-billing); letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid var(--rule); padding: 6px 8px; color: var(--title-muted); white-space: nowrap; }
.bill .push { margin-top: auto; }

.wont { margin-top: var(--s12); border-top: 1px solid var(--rule); padding-top: var(--s8); display: grid; gap: var(--s4); }
@media (min-width: 900px) { .wont { grid-template-columns: 1fr 2fr; } }

/* ---------- method (Lot) ---------- */
.method { background: var(--leader); color: var(--title-white); }
.strip { margin-top: var(--s12); display: grid; gap: 0; border-top: 1px solid var(--rule); counter-reset: step; }
@media (min-width: 900px) { .strip { grid-template-columns: repeat(7, 1fr); border-top: 0; border-left: 1px solid var(--rule); } }
.step { padding: var(--s6) 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 72px 1fr; gap: var(--s4); }
@media (min-width: 900px) { .step { display: block; padding: var(--s6) var(--s4); border-bottom: 0; border-right: 1px solid var(--rule); } }
.step .num { font: 900 32px/1 var(--f-title); color: var(--title-white); }
@media (min-width: 900px) { .step .num { margin-bottom: var(--s6); } }
.step h3 { font: 700 15px/1.25 var(--f-title); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 var(--s2); }
.step p { margin: 0; color: var(--title-muted); font-size: 15px; }
.step .tc { display: block; margin-top: var(--s4); }
.never { margin-top: var(--s12); display: flex; flex-wrap: wrap; gap: var(--s4); align-items: baseline; }

/* ---------- rated AI ---------- */
.rated { background: #0a0a0b; }
.rating-card { background: var(--rating); color: var(--on-rating); display: grid; gap: var(--s6); padding: var(--s8) var(--s6); border: 4px solid #fff; outline: 1px solid var(--rating); outline-offset: 4px; }
@media (min-width: 900px) { .rating-card { grid-template-columns: auto 1fr; padding: var(--s12); gap: var(--s12); align-items: center; } }
.rating-card .head { font: 700 clamp(40px, 6vw, 64px)/1 var(--f-billing); letter-spacing: 0.08em; text-transform: uppercase; border: 3px solid #fff; padding: var(--s4) var(--s6); text-align: center; }
.rating-card .head small { display: block; font: 500 12px/1.2 var(--f-billing); letter-spacing: 0.24em; margin-top: var(--s2); }
.rating-card p { margin: 0; color: #fff; }
.rating-card .big { font: 700 clamp(19px, 2.2vw, 24px)/1.35 var(--f-body); }
.rating-card ul { margin: var(--s4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.rating-card li { padding-left: var(--s6); position: relative; color: #fff; }
.rating-card li::before { content: "■"; position: absolute; left: 0; font-size: 10px; top: 5px; }

/* ---------- proof ---------- */
.proof-grid { display: grid; gap: var(--s12); }
@media (min-width: 900px) { .proof-grid { grid-template-columns: 1fr 1fr; align-items: center; } }
.slateboard { border: 1px solid rgba(255,255,255,0.18); background: #141416; }
.slateboard .clap { height: 28px; background: repeating-linear-gradient(135deg, #fff 0 18px, #0a0a0b 18px 36px); border-bottom: 1px solid rgba(255,255,255,0.18); }
.slateboard dl { margin: 0; display: grid; grid-template-columns: auto 1fr; }
.slateboard dt, .slateboard dd { margin: 0; padding: var(--s4); border-bottom: 1px solid rgba(255,255,255,0.12); font: 400 14px/1.4 var(--f-booth); }
.slateboard dt { color: #b9b6af; border-right: 1px solid rgba(255,255,255,0.12); text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; }
.slateboard dd { color: #fff; font-weight: 700; overflow-wrap: anywhere; }
.slateboard dl > :nth-last-child(-n+2) { border-bottom: 0; }

/* ---------- coming soon ---------- */
.coming { overflow: hidden; border-top: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); background: #0a0a0b; padding: var(--s8) 0; }
.marquee { display: flex; gap: var(--s12); width: max-content; animation: marquee 48s linear infinite; }
.marquee span { font: 900 clamp(24px, 4vw, 44px)/1 var(--f-title); letter-spacing: 0.04em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.marquee i { font-style: normal; font: 500 13px/1 var(--f-billing); letter-spacing: 0.3em; color: #b9b6af; align-self: center; white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; flex-wrap: wrap; width: auto; padding: 0 var(--gutter); gap: var(--s4) var(--s8); } .marquee [aria-hidden] { display: none; } }
.coming-head { display: flex; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s6); }

/* ---------- press (Lot) ---------- */
.press { background: var(--leader); }
.press-grid { display: grid; gap: var(--s12); margin-top: var(--s12); }
@media (min-width: 900px) { .press-grid { grid-template-columns: 1.3fr 1fr; } }
.press h3 { font: 500 13px/1.3 var(--f-billing); letter-spacing: 0.18em; text-transform: uppercase; color: var(--title-muted); margin: 0 0 var(--s4); }
.press .copy p { margin: 0 0 var(--s4); color: var(--title-white); max-width: 36em; }
.press .copy p.body { color: var(--title-muted); }
.kit { display: grid; gap: var(--s4); }
.asset { border: 1px solid var(--rule); display: grid; grid-template-columns: 168px 1fr; align-items: center; background: var(--booth); }
.asset .sw { background: #0a0a0b; height: 100%; min-height: 96px; display: grid; place-items: center; padding: var(--s4); }
.asset .sw img { max-height: 72px; width: 100%; height: auto; }
.asset .sw img.round { width: auto; height: 72px; }
.asset div:last-child { padding: var(--s4); }
.asset a { font: 600 13px/1 var(--f-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--title-white); }
.asset .slate { margin-top: var(--s2); }
.credits-block { margin-top: var(--s8); border-top: 1px solid var(--rule); padding-top: var(--s6); display: grid; gap: var(--s2); }
.credits-block p { margin: 0; font: 500 13px/1.4 var(--f-billing); letter-spacing: 0.18em; text-transform: uppercase; color: var(--title-white); }

/* ---------- contact / end card ---------- */
.contact { background: #0a0a0b; text-align: center; }
.contact .frame-scope { justify-content: center; align-items: center; aspect-ratio: auto; min-height: 0; padding: var(--s24) var(--gutter); }
@media (min-width: 900px) { .contact .frame-scope { aspect-ratio: 2.39 / 1; padding: var(--s16) var(--gutter); } }
.contact .t-xl { font-size: clamp(36px, 8vw, 104px); }
.contact .lead { margin: var(--s6) auto 0; color: #b9b6af; }
.contact .btn-row { justify-content: center; margin-top: var(--s8); }
.mail { font: 700 clamp(15px, 2vw, 19px)/1.2 var(--f-booth); color: #fff; margin-top: var(--s6); display: inline-block; }

.end { background: #0a0a0b; border-top: 1px solid rgba(255,255,255,0.12); padding: var(--s16) 0 var(--s8); text-align: center; }
.end .seal { width: 112px; height: 112px; margin: 0 auto var(--s8); }
.end .t-m { letter-spacing: 0.2em; }
.end .credits { display: grid; gap: var(--s2); margin: var(--s8) 0; }
.end .credits p { margin: 0; font: 500 12px/1.4 var(--f-billing); letter-spacing: 0.18em; text-transform: uppercase; color: #b9b6af; }
.end .credits p:first-child { color: #fff; }
.end .links { justify-content: center; margin-top: 0; }
.fine { margin-top: var(--s12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4); border-top: 1px solid rgba(255,255,255,0.08); padding-top: var(--s6); }
.fine .slate { font-size: 12px; }

/* entrances: title cards cut in, they don't float */
.cut { opacity: 0; }
.cut.in { opacity: 1; transition: opacity .01s linear; }
@media (prefers-reduced-motion: reduce) { .cut { opacity: 1; } }
.no-js .cut { opacity: 1; }

.facts b.inf { display: flex; align-items: center; height: clamp(26px, 4vw, 40px); }
.facts b.inf svg { height: 100%; width: auto; }

/* co-star: smaller billing under the star */
.costar { margin-top: var(--s12); border-top: 1px solid rgba(255,255,255,0.12); padding-top: var(--s8); display: grid; gap: var(--s6); }
@media (min-width: 900px) { .costar { grid-template-columns: 1fr 2fr; align-items: start; } }
.costar .t-m { margin-top: var(--s2); }
.costar .links { margin-top: var(--s4); }

/* formats inside the lead bill */
.formats { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); grid-template-columns: 1fr; }
@media (min-width: 560px) { .formats { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .formats { grid-template-columns: repeat(4, 1fr); } }
.formats li { background: var(--leader); padding: var(--s4); }
.bill .formats li { padding-left: var(--s4); color: inherit; }
.bill .formats li::before { content: none; }
.formats b { display: block; font: 700 14px/1.25 var(--f-title); letter-spacing: 0.06em; text-transform: uppercase; color: var(--title-white); }
.formats span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--title-muted); }
.formats-cta { margin: 0; }
@media (min-width: 900px) {
  .bill--lead .formats, .bill--lead .formats-cta { grid-column: 1 / -1; }
  .bill--wide { grid-column: span 2; }
}
.bill li strong { color: var(--title-white); font-weight: 600; }

/* stills are film frames: 16:9, square corners, full colour */
.frame { display: block; aspect-ratio: 16 / 9; background: #000; overflow: hidden; max-width: 100%; }
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.formats li { padding: 0; }
.bill .formats li { padding: 0; }
.formats li b, .formats li span:not(.frame) { padding-left: var(--s4); padding-right: var(--s4); }
.formats li b { padding-top: var(--s4); }
.formats li span:not(.frame) { padding-bottom: var(--s4); }
.billing-card .frame.portrait { margin: calc(-1 * var(--s12)) calc(-1 * var(--s6)) var(--s8); width: calc(100% + 2 * var(--s6)); max-width: none; }
.billing-card .cue-dot { z-index: 2; }
@media (max-width: 559px) {
  .formats { grid-template-columns: 1fr 1fr; }
  .formats li b { font-size: 12px; padding: var(--s2) var(--s2) 0; }
  .formats li span:not(.frame) { font-size: 13px; padding: 4px var(--s2) var(--s2); }
}

/* Any era filmstrip */
.eras { margin-top: var(--s12); }
.eras-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s6); margin-bottom: var(--s6); }
.era-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s2); }
@media (min-width: 720px) { .era-strip { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; } }
.era-strip li { scroll-snap-align: start; min-width: 0; }
.era-strip a { display: block; text-decoration: none; color: inherit; }
.era-strip a:hover img { opacity: 0.85; }
.era-meta { display: flex; flex-direction: column; gap: 6px; margin-top: var(--s2); border-top: 1px solid var(--rule); padding-top: var(--s2); }
.era-meta .year { font: 900 22px/1 var(--f-title); letter-spacing: 0.04em; color: var(--title-white); }
.era-meta .era-line { font: 500 11px/1.3 var(--f-billing); letter-spacing: 0.16em; text-transform: uppercase; color: var(--title-muted); }
.eras-note { margin-top: var(--s4); font-size: 12px; }

/* product placement bill */
.bill--placement { padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.bill--placement .frame { aspect-ratio: 16 / 9; }
.placement-copy { padding: var(--s8) var(--s6); display: flex; flex-direction: column; gap: var(--s4); }
.placement-copy p:last-child { margin: 0; }
@media (min-width: 900px) {
  .bill--placement { grid-column: 1 / -1; grid-template-columns: 1.15fr 1fr; align-items: stretch; }
  .bill--placement .frame { aspect-ratio: auto; height: 100%; min-height: 360px; }
  .placement-copy { padding: var(--s12) var(--s8); justify-content: center; }
}

/* ensemble */
.ensemble { margin-top: var(--s12); display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 900px) { .ensemble { grid-template-columns: 1.4fr 1fr; gap: var(--s12); } }

/* proof unmask */
.proof-side { display: grid; gap: var(--s6); }
.unmask { margin: 0; }
.unmask figcaption { margin-top: var(--s2); }

/* co-star with a still: frame | name | copy */
@media (min-width: 900px) {
  .costar { grid-template-columns: 1.1fr 0.9fr 1.4fr; align-items: center; gap: var(--s8); }
}

/* linked names and handles */
a.handle { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: currentColor; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
a.handle:hover { text-decoration-color: currentColor; }