/* TH Trending: static pages for free films (indexable by search engines). Same look as the app. */
:root{
  color-scheme:dark;
  --house:#0a0a0a; --booth:#000000; --velvet:#141414; --velvet-2:#1f1f1f; --velvet-3:#2a2a2a; --seam:#2e2e2e;
  --pearl:#ffffff; --dust:#bdbdbd; --ash:#8c8c8c; --bulb:#e50914; --bulb-hi:#ff2a37; --bulb-ink:#ffffff; --laurel:#e50914;
  --line-soft:rgba(255,255,255,.22); --veil:rgba(255,255,255,.08);
  --f-display:"Archivo","Helvetica Neue",Arial,system-ui,sans-serif;
  --f-card:"Archivo","Helvetica Neue",Arial,system-ui,sans-serif;
  --f-body:"Archivo","Helvetica Neue",Arial,system-ui,sans-serif;
  --f-mono:"Archivo","Helvetica Neue",Arial,system-ui,sans-serif;
  --gl:max(16px, env(safe-area-inset-left, 0px)); --gr:max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width:980px){ :root{ --gl:max(48px, env(safe-area-inset-left, 0px)); --gr:max(48px, env(safe-area-inset-right, 0px)) } }
*,*::before,*::after{ box-sizing:border-box }
html{ background:var(--house); -webkit-text-size-adjust:100% }
body{ margin:0; min-height:100vh; background:var(--house); color:var(--pearl); font:400 16px/1.6 var(--f-body); -webkit-font-smoothing:antialiased; overflow-x:clip }
img{ max-width:100%; display:block }
a{ color:inherit }
:focus-visible{ outline:2px solid var(--bulb); outline-offset:3px; border-radius:4px }
.wrap{ padding-left:var(--gl); padding-right:var(--gr); max-width:1240px; margin:0 auto }

/* header */
.bar{ position:sticky; top:0; z-index:20; background:rgba(10,10,10,.92); -webkit-backdrop-filter:saturate(150%) blur(14px); backdrop-filter:saturate(150%) blur(14px); border-bottom:1px solid var(--seam) }
.bar-in{ display:flex; align-items:center; gap:18px; min-height:62px; padding-top:env(safe-area-inset-top, 0px) }
.logo{ display:inline-flex; align-items:center; margin-right:auto; min-height:44px; text-decoration:none }
.brand{ display:block; height:30px; width:auto }
.bar nav{ display:flex; gap:4px }
.bar nav a{ padding:10px 10px; border-radius:6px; color:var(--dust); font-weight:500; font-size:14.5px; text-decoration:none; white-space:nowrap }
.bar nav a:hover,.bar nav a[aria-current="page"]{ color:var(--pearl) }
.bar nav a[aria-current="page"]{ box-shadow:inset 0 -2px 0 var(--bulb); border-radius:0 }

/* breadcrumb + headings */
.crumbs{ margin:22px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px; font:500 12px/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ash) }
.crumbs li + li::before{ content:"/"; margin-right:6px; color:var(--seam) }
.crumbs a{ color:var(--dust); text-decoration:none }
.crumbs a:hover{ color:var(--pearl); text-decoration:underline }
.eyebrow{ margin:0; font:500 12px/1.4 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--bulb) }
h1,h2,h3{ margin:0 }
.page-title{ font:400 clamp(52px, 12vw, 92px)/.9 var(--f-display); text-transform:uppercase; letter-spacing:.01em; margin-top:8px }
.lede{ margin:14px 0 0; color:var(--dust); font-size:17px; max-width:66ch }
.sec{ margin-top:44px }
.sec > h2{ font:400 30px/1 var(--f-display); text-transform:uppercase; letter-spacing:.03em; margin-bottom:14px }

/* film hero */
.film{ display:grid; gap:22px; margin-top:20px }
.film-poster{ width:min(190px, 48vw); border-radius:6px; overflow:hidden; box-shadow:0 22px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.1) }
.film-poster img{ width:100%; height:auto; aspect-ratio:2/3 }
.film-info{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; min-width:0 }
.film-title{ font:italic 600 clamp(40px, 9vw, 72px)/1.02 var(--f-card); letter-spacing:-.01em; text-wrap:balance }
.film-title span{ font-style:normal; font-weight:400; color:var(--dust); font-size:.55em; white-space:nowrap }
.meta{ margin:0; display:flex; flex-wrap:wrap; gap:4px 12px; font:500 13px/1.5 var(--f-mono); color:var(--dust); letter-spacing:.03em }
.award{ margin:0; display:flex; gap:8px; color:var(--laurel); font-weight:500 }
.award svg{ width:17px; height:17px; flex:none; margin-top:3px }
.synopsis{ margin:4px 0 0; font-size:17px; line-height:1.65; max-width:64ch }
.actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 20px; border-radius:7px; font:600 15px/1 var(--f-body);
  text-decoration:none; white-space:nowrap; border:0; cursor:pointer; transition:background .2s, box-shadow .2s }
.btn svg{ width:18px; height:18px; flex:none }
.btn-bulb{ background:var(--bulb); color:var(--bulb-ink) }
.btn-bulb:hover{ background:var(--bulb-hi) }
.btn-ghost{ background:var(--veil); color:var(--pearl); box-shadow:inset 0 0 0 1px var(--line-soft) }
.btn-ghost:hover{ background:rgba(255,255,255,.15) }
@media (min-width:760px){ .film{ grid-template-columns:260px minmax(0,1fr); gap:40px; align-items:start } .film-poster{ width:100% } }

/* player */
.player{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden; box-shadow:0 0 0 1px var(--seam) }
.player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.fine{ margin:10px 0 0; font-size:13px; color:var(--ash); max-width:72ch }
.fine a{ color:var(--dust) }

/* downloads */
.dl{ list-style:none; margin:0; padding:0; display:grid; gap:8px; max-width:560px }
.dl a{ display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:52px; padding:10px 14px; border-radius:10px; background:var(--velvet-2);
  box-shadow:inset 0 0 0 1px var(--seam); text-decoration:none; font-weight:600 }
.dl a:hover{ box-shadow:inset 0 0 0 1.5px var(--bulb) }
.dl a span{ font:500 12.5px/1 var(--f-mono); color:var(--ash); letter-spacing:.04em }
.dl a.main span{ color:var(--bulb) }

/* facts */
.facts{ margin:0; display:grid; gap:10px; max-width:760px }
.facts > div{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:14px }
.facts dt{ font:500 11px/1.9 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ash) }
.facts dd{ margin:0; color:var(--dust) }

/* grids of films */
.grid{ list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:22px 14px }
@media (min-width:600px){ .grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:28px 18px } }
.card{ display:flex; flex-direction:column; gap:7px; text-decoration:none; min-width:0 }
.card .pic{ position:relative; border-radius:6px; overflow:hidden; aspect-ratio:2/3; background:var(--velvet-2); box-shadow:0 10px 24px -16px #000; transition:transform .25s, box-shadow .25s }
.card .pic img{ width:100%; height:100%; object-fit:cover }
.card:hover .pic{ transform:translateY(-3px); box-shadow:0 0 0 1px rgba(229,9,20,.6), 0 16px 28px -14px #000 }
.tag{ position:absolute; top:9px; right:0; background:var(--bulb); color:var(--bulb-ink); font:600 10.5px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; padding:5px 6px 4px 8px }
.card b{ font-weight:600; font-size:14px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.card small{ font:500 11.5px/1.3 var(--f-mono); color:var(--ash); letter-spacing:.03em; margin-top:-3px }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px }
.chip{ display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:20px; color:var(--dust); box-shadow:inset 0 0 0 1px var(--seam);
  text-decoration:none; font-weight:500; font-size:14px }
.chip:hover{ color:var(--pearl); box-shadow:inset 0 0 0 1px var(--ash) }
.chip[aria-current="page"]{ background:var(--pearl); color:var(--house); box-shadow:none }
.prose{ max-width:68ch; color:var(--dust) }
.prose p{ margin:0 0 12px }

/* footer */
.foot{ margin-top:64px; padding:30px 0 40px; border-top:1px solid var(--seam); color:var(--dust); font-size:14px }
.foot-grid{ display:grid; gap:22px }
.foot h2{ font:400 22px/1 var(--f-display); letter-spacing:.05em; text-transform:uppercase; color:var(--pearl); margin-bottom:8px }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px }
.foot a{ color:var(--dust) }
.foot a:hover{ color:var(--pearl) }
.foot-sign{ margin-top:26px; font:500 11.5px/1.4 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ash) }
@media (min-width:760px){ .foot-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:36px } }
@media (prefers-reduced-motion:reduce){ .card .pic{ transition:none } .card:hover .pic{ transform:none } }

/* Live TV link added 2026-10-22: keep the four menu links on one line on phones */
.logo{ min-width:0; flex:0 1 auto }
.bar nav{ flex:none }
@media (max-width:520px){
  .bar-in{ gap:8px }
  .brand{ height:22px }
  .bar nav{ gap:0 }
  .bar nav a{ padding:10px 6px; font-size:13px }
}
@media (max-width:360px){ .brand{ height:18px } .bar nav a{ padding:10px 4px; font-size:12.5px } }

/* =====================================================================
   2026 redesign: streaming-app look, same colors as before.
   ===================================================================== */
:root{ --r:10px; --r-lg:16px }
body{ font-size:16px }
.bar{ background:rgba(10,10,10,.82) }
.bar-in{ min-height:66px }
.bar nav{ gap:4px }
.bar nav a{ padding:8px 13px; border-radius:20px; font-weight:600 }
.bar nav a:hover{ background:rgba(255,255,255,.08) }
.bar nav a[aria-current="page"]{ background:rgba(255,255,255,.15); box-shadow:none; border-radius:20px; color:var(--pearl) }
.bar nav a[href*="live"]{ display:inline-flex; align-items:center; gap:7px }
.bar nav a[href*="live"]::before{ content:""; width:7px; height:7px; border-radius:50%; background:#e50914; box-shadow:0 0 0 3px rgba(229,9,20,.25) }
@media (max-width:520px){ .bar nav a{ padding:8px 7px; font-size:13px } .bar nav a[href*="live"]::before{ width:6px; height:6px; box-shadow:none } }
.crumbs{ font:600 12.5px/1.5 var(--f-body); letter-spacing:0; text-transform:none }
.eyebrow{ display:inline-flex; width:max-content; max-width:100%; padding:5px 9px 4px; border-radius:5px; background:rgba(229,9,20,.14); color:var(--bulb-hi); font-size:11px; letter-spacing:.12em }
.page-title{ font:800 clamp(38px, 7vw, 68px)/1 var(--f-body); text-transform:none; letter-spacing:-.03em }
.sec > h2{ font:700 22px/1.2 var(--f-body); text-transform:none; letter-spacing:-.01em }
.foot h2{ font:700 15px/1.2 var(--f-body); text-transform:none; letter-spacing:0 }

/* film page: a backdrop hero like a streaming title page */
main.wrap:has(.film){ max-width:none; padding:0 }
main.wrap:has(.film) > .crumbs,main.wrap:has(.film) article > .sec{ max-width:1240px; margin-left:auto; margin-right:auto; padding-left:var(--gl); padding-right:var(--gr) }
main.wrap:has(.film) > .crumbs{ position:relative; z-index:2; margin-top:18px }
.film{ position:relative; isolation:isolate; overflow:hidden; margin-top:-48px; padding:76px var(--gr) 44px var(--gl) }
.film::before{ content:""; position:absolute; inset:-15%; z-index:-2; background:var(--bg, none) center / cover no-repeat; filter:blur(70px) saturate(1.4); opacity:.7; transform:scale(1.1) }
.film::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, var(--house) 0%, rgba(10,10,10,.75) 34%, rgba(10,10,10,.25) 70%, rgba(10,10,10,.65) 100%), linear-gradient(to right, rgba(10,10,10,.9), rgba(10,10,10,.2) 70%) }
@media (min-width:760px){ .film{ grid-template-columns:220px minmax(0,1fr); gap:40px; align-items:end; padding-left:max(var(--gl), calc((100vw - 1240px) / 2 + var(--gl))); padding-right:max(var(--gr), calc((100vw - 1240px) / 2 + var(--gr))) } }
.film-poster{ border-radius:var(--r); box-shadow:0 30px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.12) }
.film-title{ font-size:clamp(40px, 7vw, 76px) }
.meta{ font:600 14px/1.5 var(--f-body); letter-spacing:0; color:var(--pearl) }
.synopsis{ color:var(--pearl); opacity:.9 }
.btn{ border-radius:8px; min-height:48px; font-weight:700 }
.btn-ghost{ background:rgba(255,255,255,.16); box-shadow:none }
.btn-ghost:hover{ background:rgba(255,255,255,.26) }

/* the player: artwork with a big play button until it starts */
.player{ border-radius:var(--r-lg); box-shadow:0 30px 70px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08) }
.player .thp{ position:absolute; inset:0 }
.thp-start{ position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; cursor:pointer; color:var(--pearl); font:inherit; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:#000; overflow:hidden; isolation:isolate }
.thp-start::before{ content:""; position:absolute; inset:-20%; z-index:-1; background:var(--poster, none) center / cover no-repeat; filter:blur(48px) saturate(1.35) brightness(.7); transform:scale(1.1) }
.thp-start::after{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 70% at 50% 50%, transparent, rgba(0,0,0,.55)) }
.thp-start-ic{ width:84px; height:84px; border-radius:50%; display:grid; place-items:center; background:var(--bulb); color:var(--bulb-ink); box-shadow:0 14px 40px rgba(0,0,0,.55), 0 0 0 10px rgba(229,9,20,.18); transition:transform .2s, box-shadow .2s }
.thp-start-ic svg{ width:36px; height:36px; margin-left:4px }
.thp-start:hover .thp-start-ic,.thp-start:focus-visible .thp-start-ic{ transform:scale(1.07); box-shadow:0 14px 40px rgba(0,0,0,.55), 0 0 0 14px rgba(229,9,20,.24) }
.thp-start-t{ margin-top:8px; font-weight:800; font-size:clamp(18px, 2.4vw, 24px); letter-spacing:-.01em; text-shadow:0 2px 12px rgba(0,0,0,.6) }
.thp-start-s{ font-size:14px; color:var(--dust) }
@media (max-width:520px){ .thp-start-ic{ width:64px; height:64px } .thp-start-ic svg{ width:28px; height:28px } }

/* tiles */
.card .pic{ border-radius:var(--r) }
.card:hover .pic{ transform:scale(1.05); box-shadow:0 0 0 2px var(--bulb), 0 22px 40px -18px #000 }
.tag{ top:8px; left:8px; right:auto; border-radius:5px; padding:5px 7px 4px; font-size:10px }
.card b{ margin-top:4px }
.card small{ font:500 12.5px/1.3 var(--f-body); letter-spacing:0 }
.chip{ font-weight:600; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16) }
.dl a{ border-radius:12px; background:rgba(255,255,255,.06); box-shadow:none }
.dl a:hover{ background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1.5px var(--bulb) }

/* Red & black makeover */
.film-title,.page-title{ font-style:normal; font-weight:800; letter-spacing:-.03em }
.film-title span{ font-weight:500 }
.eyebrow{ background:none; padding:0; color:var(--bulb); font-weight:700; font-size:12px; letter-spacing:.08em }
.bar nav a[href*="live"]{ background:var(--bulb); color:#fff; padding:8px 14px }
.bar nav a[href*="live"]:hover{ background:var(--bulb-hi) }
.bar nav a[href*="live"]::before{ background:#fff; box-shadow:none }
.tag{ color:#fff }
.thp-start-ic{ color:#fff }
@media (max-width:520px){ .bar nav a[href$="#tv"]{ display:none } .brand{ height:22px } }