/* HOLIDAY CHANNEL site styles.
   The look follows www.myholidayworld.com: gold Playfair Display headings,
   night-blue to violet gradients, 16px cards and 6px buttons.
   Fonts: Playfair Display Bold, self-hosted under /assets/fonts/ (SIL Open
   Font License, OFL.txt beside it), and system fonts for body text. No
   external resources, no inline styles (the CSP is style-src 'self').
   Decoration is data: SVG in CSS, behind the content, never over the mark,
   the service line or a button. One dark theme everywhere.
   Motion animates transform and opacity only. Nothing fades, moves or
   shimmers by itself on the mark, the service line, the brand bar or a
   Watch now button: those answer only a press and a hover glow, and a film
   card tilts only while the mouse is over it (see "Depth and motion").
   Every animation is off under prefers-reduced-motion. */

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/PlayfairDisplay-Bold.ttf") format("truetype");
}

:root {
  color-scheme: dark;
  /* Palette: Holiday World's navy, blue and violet appear below as rgba(). */
  --night: #04060d;
  --bg: #070b1a;
  --bg-deep: #04060d;
  --navy: #1d4276;
  --blue: #2d6296;
  --violet: #68358a;
  --surface: #0d1631;
  --surface-2: #17224a;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);
  --text: #f4f5fa;
  --muted: #b8c2dc;
  /* The logo's teal. player.css reads --accent, --accent-ink and --focus. */
  --accent: #66c0ce;
  --accent-strong: #9adbe5;
  --accent-ink: #04191d;
  --gold: #ddab3a;
  --gold-hover: #e8c36d;
  --gold-ink: #232323;
  --focus: #7fe7c4;
  --radius: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-btn: 6px;
  --gutter: 16px;
  --max: 1320px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --font-sans: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", Times, serif;
  --svg-dust: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 360' width='360' height='360'%3E%3Ccircle cx='30' cy='44' r='0.8' fill='%23fff' opacity='0.24'/%3E%3Ccircle cx='140' cy='20' r='0.6' fill='%23fff' opacity='0.2'/%3E%3Ccircle cx='250' cy='90' r='0.7' fill='%23fff' opacity='0.18'/%3E%3Ccircle cx='330' cy='170' r='0.6' fill='%23fff' opacity='0.22'/%3E%3Ccircle cx='90' cy='200' r='0.8' fill='%23fff' opacity='0.16'/%3E%3Ccircle cx='200' cy='280' r='0.6' fill='%23fff' opacity='0.2'/%3E%3Ccircle cx='310' cy='330' r='0.7' fill='%23fff' opacity='0.15'/%3E%3Ccircle cx='20' cy='320' r='0.6' fill='%23fff' opacity='0.18'/%3E%3C/svg%3E");
  --svg-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 20' width='280' height='20'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23DDAB3A' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23DDAB3A'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='1' x2='0'%3E%3Cstop offset='0' stop-color='%23DDAB3A' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23DDAB3A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='9.3' width='114' height='1.4' rx='.7' fill='url%28%23a%29'/%3E%3Crect x='166' y='9.3' width='114' height='1.4' rx='.7' fill='url%28%23b%29'/%3E%3Ccircle cx='122' cy='10' r='1.7' fill='%2366C0CE'/%3E%3Ccircle cx='158' cy='10' r='1.7' fill='%2366C0CE'/%3E%3Cpath fill='%23DDAB3A' opacity='1' d='M140 0.5C141.5 8.5 141.5 8.5 149.5 10C141.5 11.5 141.5 11.5 140 19.5C138.5 11.5 138.5 11.5 130.5 10C138.5 8.5 138.5 8.5 140 0.5Z'/%3E%3C/svg%3E");
  --svg-garland: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 48' width='200' height='48'%3E%3Cdefs%3E%3CradialGradient id='h0'%3E%3Cstop offset='0' stop-color='%23E8C36D' stop-opacity='.75'/%3E%3Cstop offset='.45' stop-color='%23E8C36D' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23E8C36D' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='h1'%3E%3Cstop offset='0' stop-color='%2366C0CE' stop-opacity='.75'/%3E%3Cstop offset='.45' stop-color='%2366C0CE' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%2366C0CE' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='h2'%3E%3Cstop offset='0' stop-color='%23F08A6C' stop-opacity='.75'/%3E%3Cstop offset='.45' stop-color='%23F08A6C' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23F08A6C' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='h3'%3E%3Cstop offset='0' stop-color='%237FE7C4' stop-opacity='.75'/%3E%3Cstop offset='.45' stop-color='%237FE7C4' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%237FE7C4' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='h4'%3E%3Cstop offset='0' stop-color='%23A98BEB' stop-opacity='.75'/%3E%3Cstop offset='.45' stop-color='%23A98BEB' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23A98BEB' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M0 8Q100 44 200 8' fill='none' stroke='%23AEB8D6' stroke-opacity='.5' stroke-width='1.1'/%3E%3Ccircle cx='20' cy='21.5' r='11' fill='url%28%23h0%29'/%3E%3Crect x='18.3' y='13.9' width='3.4' height='3.6' rx='.8' fill='%23C9D0E4' fill-opacity='.75'/%3E%3Cellipse cx='20' cy='21.7' rx='3' ry='4.4' fill='%23E8C36D'/%3E%3Cellipse cx='19' cy='20.1' rx='.9' ry='1.5' fill='%23fff' fill-opacity='.55'/%3E%3Ccircle cx='60' cy='30.1' r='11' fill='url%28%23h1%29'/%3E%3Crect x='58.3' y='22.5' width='3.4' height='3.6' rx='.8' fill='%23C9D0E4' fill-opacity='.75'/%3E%3Cellipse cx='60' cy='30.3' rx='3' ry='4.4' fill='%2366C0CE'/%3E%3Cellipse cx='59' cy='28.7' rx='.9' ry='1.5' fill='%23fff' fill-opacity='.55'/%3E%3Ccircle cx='100' cy='33' r='11' fill='url%28%23h2%29'/%3E%3Crect x='98.3' y='25.4' width='3.4' height='3.6' rx='.8' fill='%23C9D0E4' fill-opacity='.75'/%3E%3Cellipse cx='100' cy='33.2' rx='3' ry='4.4' fill='%23F08A6C'/%3E%3Cellipse cx='99' cy='31.6' rx='.9' ry='1.5' fill='%23fff' fill-opacity='.55'/%3E%3Ccircle cx='140' cy='30.1' r='11' fill='url%28%23h3%29'/%3E%3Crect x='138.3' y='22.5' width='3.4' height='3.6' rx='.8' fill='%23C9D0E4' fill-opacity='.75'/%3E%3Cellipse cx='140' cy='30.3' rx='3' ry='4.4' fill='%237FE7C4'/%3E%3Cellipse cx='139' cy='28.7' rx='.9' ry='1.5' fill='%23fff' fill-opacity='.55'/%3E%3Ccircle cx='180' cy='21.5' r='11' fill='url%28%23h4%29'/%3E%3Crect x='178.3' y='13.9' width='3.4' height='3.6' rx='.8' fill='%23C9D0E4' fill-opacity='.75'/%3E%3Cellipse cx='180' cy='21.7' rx='3' ry='4.4' fill='%23A98BEB'/%3E%3Cellipse cx='179' cy='20.1' rx='.9' ry='1.5' fill='%23fff' fill-opacity='.55'/%3E%3C/svg%3E");
  --svg-garland-glow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 48' width='200' height='48'%3E%3Cdefs%3E%3CradialGradient id='h0'%3E%3Cstop offset='0' stop-color='%23E8C36D' stop-opacity='.75'/%3E%3Cstop offset='.45' stop-color='%23E8C36D' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23E8C36D' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='h1'%3E%3Cstop offset='0' stop-color='%2366C0CE' stop-opacity='.75'/%3E%3Cstop offset='.45' stop-color='%2366C0CE' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%2366C0CE' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='h2'%3E%3Cstop offset='0' stop-color='%23F08A6C' stop-opacity='.75'/%3E%3Cstop offset='.45' stop-color='%23F08A6C' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23F08A6C' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='h3'%3E%3Cstop offset='0' stop-color='%237FE7C4' stop-opacity='.75'/%3E%3Cstop offset='.45' stop-color='%237FE7C4' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%237FE7C4' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='h4'%3E%3Cstop offset='0' stop-color='%23A98BEB' stop-opacity='.75'/%3E%3Cstop offset='.45' stop-color='%23A98BEB' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23A98BEB' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='21.5' r='11' fill='url%28%23h0%29'/%3E%3Ccircle cx='100' cy='33' r='11' fill='url%28%23h2%29'/%3E%3Ccircle cx='180' cy='21.5' r='11' fill='url%28%23h4%29'/%3E%3C/svg%3E");
  --svg-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 300' width='420' height='300'%3E%3Ccircle cx='24' cy='40' r='1.2' fill='%23fff' opacity='0.8'/%3E%3Ccircle cx='88' cy='18' r='0.8' fill='%23fff' opacity='0.6'/%3E%3Ccircle cx='150' cy='64' r='1.4' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='210' cy='26' r='0.9' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='262' cy='92' r='1.1' fill='%23fff' opacity='0.75'/%3E%3Ccircle cx='330' cy='40' r='0.8' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='392' cy='120' r='1.3' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='58' cy='150' r='0.9' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='120' cy='210' r='1.2' fill='%23fff' opacity='0.65'/%3E%3Ccircle cx='190' cy='170' r='0.8' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='300' cy='196' r='1' fill='%23fff' opacity='0.6'/%3E%3Ccircle cx='372' cy='250' r='0.9' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='30' cy='262' r='1.3' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='236' cy='270' r='0.8' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='404' cy='30' r='1' fill='%23fff' opacity='0.6'/%3E%3Cpath fill='%23DDAB3A' opacity='0.85' d='M96 81C97.8 90.2 97.8 90.2 107 92C97.8 93.8 97.8 93.8 96 103C94.2 93.8 94.2 93.8 85 92C94.2 90.2 94.2 90.2 96 81Z'/%3E%3Cpath fill='%2366C0CE' opacity='0.8' d='M318 121C319.1 126.9 319.1 126.9 325 128C319.1 129.1 319.1 129.1 318 135C316.9 129.1 316.9 129.1 311 128C316.9 126.9 316.9 126.9 318 121Z'/%3E%3Cpath fill='%23fff' opacity='0.7' d='M184 240C185 245 185 245 190 246C185 247 185 247 184 252C183 247 183 247 178 246C183 245 183 245 184 240Z'/%3E%3Cpath fill='%23E8C36D' opacity='0.6' d='M390 187C391.4 194.6 391.4 194.6 399 196C391.4 197.4 391.4 197.4 390 205C388.6 197.4 388.6 197.4 381 196C388.6 194.6 388.6 194.6 390 187Z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.1' stroke-linecap='round' opacity='0.38' d='M250 150L250 141M250 144.6L252 142.5M250 144.6L248 142.5M250 150L242.2 145.5M245.3 147.3L244.5 144.5M245.3 147.3L242.5 147.9M250 150L242.2 154.5M245.3 152.7L242.5 152.1M245.3 152.7L244.5 155.5M250 150L250 159M250 155.4L248 157.5M250 155.4L252 157.5M250 150L257.8 154.5M254.7 152.7L255.5 155.5M254.7 152.7L257.5 152.1M250 150L257.8 145.5M254.7 147.3L257.5 147.9M254.7 147.3L255.5 144.5'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1' stroke-linecap='round' opacity='0.3' d='M40 206L40 199M40 201.8L41.5 200.2M40 201.8L38.5 200.2M40 206L33.9 202.5M36.4 203.9L35.7 201.8M36.4 203.9L34.2 204.4M40 206L33.9 209.5M36.4 208.1L34.2 207.6M36.4 208.1L35.7 210.2M40 206L40 213M40 210.2L38.5 211.8M40 210.2L41.5 211.8M40 206L46.1 209.5M43.6 208.1L44.3 210.2M43.6 208.1L45.8 207.6M40 206L46.1 202.5M43.6 203.9L45.8 204.4M43.6 203.9L44.3 201.8'/%3E%3C/svg%3E");
  --svg-snow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' width='240' height='240'%3E%3Ccircle cx='18' cy='22' r='1.6' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='70' cy='60' r='1.1' fill='%23fff' opacity='0.45'/%3E%3Ccircle cx='130' cy='14' r='2' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='196' cy='48' r='1.3' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='226' cy='110' r='1.8' fill='%23fff' opacity='0.45'/%3E%3Ccircle cx='40' cy='120' r='2.2' fill='%23fff' opacity='0.4'/%3E%3Ccircle cx='100' cy='150' r='1.2' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='160' cy='96' r='1.5' fill='%23fff' opacity='0.45'/%3E%3Ccircle cx='212' cy='180' r='1.1' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='60' cy='206' r='1.7' fill='%23fff' opacity='0.45'/%3E%3Ccircle cx='140' cy='220' r='1.3' fill='%23fff' opacity='0.5'/%3E%3Ccircle cx='10' cy='176' r='1' fill='%23fff' opacity='0.4'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1' stroke-linecap='round' opacity='0.42' d='M178 150L178 144M178 146.4L179.3 145M178 146.4L176.7 145M178 150L172.8 147M174.9 148.2L174.3 146.4M174.9 148.2L173 148.6M178 150L172.8 153M174.9 151.8L173 151.4M174.9 151.8L174.3 153.6M178 150L178 156M178 153.6L176.7 155M178 153.6L179.3 155M178 150L183.2 153M181.1 151.8L181.7 153.6M181.1 151.8L183 151.4M178 150L183.2 147M181.1 148.2L183 148.6M181.1 148.2L181.7 146.4'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1' stroke-linecap='round' opacity='0.36' d='M86 96L86 91M86 93L87.1 91.8M86 93L84.9 91.8M86 96L81.7 93.5M83.4 94.5L82.9 93M83.4 94.5L81.8 94.9M86 96L81.7 98.5M83.4 97.5L81.8 97.1M83.4 97.5L82.9 99M86 96L86 101M86 99L84.9 100.2M86 99L87.1 100.2M86 96L90.3 98.5M88.6 97.5L89.1 99M88.6 97.5L90.2 97.1M86 96L90.3 93.5M88.6 94.5L90.2 94.9M88.6 94.5L89.1 93'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='0.9' stroke-linecap='round' opacity='0.34' d='M34 52L34 47.5M34 49.3L35 48.2M34 49.3L33 48.2M34 52L30.1 49.8M31.7 50.7L31.2 49.3M31.7 50.7L30.3 51M34 52L30.1 54.3M31.7 53.4L30.3 53M31.7 53.4L31.2 54.7M34 52L34 56.5M34 54.7L33 55.8M34 54.7L35 55.8M34 52L37.9 54.3M36.3 53.4L36.8 54.7M36.3 53.4L37.7 53M34 52L37.9 49.8M36.3 50.7L37.7 51M36.3 50.7L36.8 49.3'/%3E%3C/svg%3E");
  --svg-icon-ticket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cg fill='none' stroke='%23DDAB3A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h24v3.6a2.6 2.6 0 0 0 0 4.8V22H4v-3.6a2.6 2.6 0 0 0 0-4.8z'/%3E%3Cpath d='M11 10v12' stroke-dasharray='1.6 2.2'/%3E%3C/g%3E%3Cpath fill='%23DDAB3A' opacity='1' d='M19.5 11.8C20.2 15.3 20.2 15.3 23.7 16C20.2 16.7 20.2 16.7 19.5 20.2C18.8 16.7 18.8 16.7 15.3 16C18.8 15.3 18.8 15.3 19.5 11.8Z'/%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
  --svg-icon-reel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cg fill='none' stroke='%23DDAB3A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='15' cy='15' r='11'/%3E%3Ccircle cx='15' cy='9' r='2.3'/%3E%3Ccircle cx='20.7' cy='13.2' r='2.3'/%3E%3Ccircle cx='18.5' cy='19.9' r='2.3'/%3E%3Ccircle cx='11.5' cy='19.9' r='2.3'/%3E%3Ccircle cx='9.3' cy='13.2' r='2.3'/%3E%3Cpath d='M23 25c2.5 2.2 4.6 3 7 3'/%3E%3C/g%3E%3C/svg%3E");
  --svg-icon-screen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cg fill='none' stroke='%23DDAB3A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='25' height='17' rx='2.6'/%3E%3Cpath d='M11 27h10M16 22.5V27'/%3E%3C/g%3E%3Cpath d='M13.6 10.2v7.6l6.4-3.8z' fill='%23DDAB3A'/%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
  --svg-tv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 130' width='150' height='130'%3E%3Cg fill='none' stroke='%23DDAB3A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M58 30 40 8M92 30l18-22'/%3E%3Ccircle cx='40' cy='8' r='2.6' fill='%23DDAB3A'/%3E%3Ccircle cx='110' cy='8' r='2.6' fill='%23DDAB3A'/%3E%3Crect x='14' y='30' width='122' height='84' rx='14'/%3E%3Crect x='26' y='42' width='80' height='60' rx='10' stroke='%2366C0CE'/%3E%3Ccircle cx='121' cy='54' r='5'/%3E%3Ccircle cx='121' cy='72' r='5'/%3E%3Cpath d='M115 92h12M115 99h12'/%3E%3Cpath d='M34 114l-6 10M116 114l6 10'/%3E%3C/g%3E%3Cpath fill='%23E8C36D' opacity='1' d='M66 59C68.1 69.9 68.1 69.9 79 72C68.1 74.1 68.1 74.1 66 85C63.9 74.1 63.9 74.1 53 72C63.9 69.9 63.9 69.9 66 59Z'/%3E%3Cpath fill='%23fff' opacity='0.85' d='M86 51C86.8 55.2 86.8 55.2 91 56C86.8 56.8 86.8 56.8 86 61C85.2 56.8 85.2 56.8 81 56C85.2 55.2 85.2 55.2 86 51Z'/%3E%3Cpath fill='%2366C0CE' opacity='0.9' d='M48 86C48.6 89.4 48.6 89.4 52 90C48.6 90.6 48.6 90.6 48 94C47.4 90.6 47.4 90.6 44 90C47.4 89.4 47.4 89.4 48 86Z'/%3E%3C/svg%3E");
}

@media (min-width: 640px) {
  :root { --gutter: 24px; }
}

@media (min-width: 1024px) {
  :root { --gutter: 32px; }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--night);
  scroll-behavior: smooth;
}

/* The page: night at the top, deep blue through the rows, violet at the foot.
   The two glows sit at fixed spots, so every page opens the same way. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    var(--svg-dust) 0 0 / 360px 360px,
    radial-gradient(closest-side, rgba(104, 53, 138, 0.34), rgba(104, 53, 138, 0)) right -480px top -490px / 1540px 900px no-repeat,
    radial-gradient(closest-side, rgba(45, 98, 150, 0.3), rgba(45, 98, 150, 0)) left -560px top -300px / 1260px 840px no-repeat,
    linear-gradient(180deg, #04060d 0, #070c1e 520px, #0b1838 1250px, #0f1d47 2000px, #1a1446 100%);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-variant-numeric: lining-nums;
  line-height: 1.55;
  overflow-wrap: break-word;
}

main {
  flex: 1 0 auto;
}

main:focus {
  outline: none;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: var(--accent-strong);
  text-underline-offset: 0.18em;
}

a:hover {
  color: #ffffff;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  line-height: 1.15;
}

p {
  margin: 0 0 1em;
}

[hidden] {
  display: none !important;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 20;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-btn);
  background: var(--gold);
  color: var(--gold-ink);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

.icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

/* Header: the logo plus the mark in plain text, on every page. Solid and
   dark (the logo is white), 68px tall on wider screens. */

.site-header {
  position: relative;
  background: var(--bg-deep);
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(221, 171, 58, 0), rgba(221, 171, 58, 0.7) 22%, rgba(102, 192, 206, 0.7) 50%, rgba(169, 139, 235, 0.7) 78%, rgba(169, 139, 235, 0));
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding-block: 13px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.brand:hover {
  color: var(--text);
}

.brand__logo {
  flex: none;
  width: auto;
  height: 42px;
}

.brand__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-left: 14px;
  border-left: 1px solid var(--line-strong);
}

.brand__name {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.brand__tagline {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.3;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Menu links: capitals like the main site; a gold rule grows in on hover
   and stays under the current page. */
.site-nav a {
  position: relative;
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-btn);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.28rem;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease);
}

.site-nav a:hover {
  color: var(--gold-hover);
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-nav a[aria-current="page"] {
  color: var(--gold);
}

@media (max-width: 639px) {
  .brand {
    gap: 10px;
  }

  .brand__logo {
    height: 32px;
  }

  .brand__text {
    padding-left: 10px;
  }

  .brand__name {
    font-size: 1rem;
    letter-spacing: 0.04em;
  }

  .brand__tagline {
    font-size: 0.78rem;
    text-wrap: balance;
  }

  .site-nav {
    width: 100%;
  }

  .site-nav a {
    padding: 0.45rem 0.7rem;
    font-size: 0.78rem;
  }
}

@media (max-width: 359px) {
  .brand__logo {
    height: 26px;
  }
}

/* Buttons: the main site's 6px corners. Watch now is solid gold with dark
   text and changes colour at once on hover: no fade, glow or movement. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 44px;
  padding: 0.6rem 1.25rem;
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  font: inherit;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
}

.btn--primary {
  background: var(--gold);
  color: var(--gold-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 6px 18px -10px rgba(0, 0, 0, 0.9);
}

.btn--primary:hover {
  background: var(--gold-hover);
  color: var(--gold-ink);
}

.btn--primary:active {
  background: #c9982c;
}

.btn--ghost {
  border-color: rgba(221, 171, 58, 0.85);
  background: rgba(221, 171, 58, 0.06);
  color: var(--gold-hover);
}

.btn--ghost:hover {
  border-color: var(--gold-hover);
  background: rgba(221, 171, 58, 0.16);
  color: #ffffff;
}

/* The shimmer: a band of light passes once behind the label on hover. Only
   on secondary buttons and the 404 page's library button, never Watch now.
   The band stays faint, so the white hover label keeps at least 5.7:1 even
   where the band is brightest. */
.btn--ghost,
.not-found__actions .btn--primary {
  position: relative;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}

.btn--ghost::after,
.not-found__actions .btn--primary::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(105deg, rgba(255, 240, 205, 0) 15%, rgba(255, 240, 205, 0.22) 50%, rgba(255, 240, 205, 0) 85%);
  transform: translateX(-110%);
  pointer-events: none;
}

.btn--ghost:hover::after,
.not-found__actions .btn--primary:hover::after {
  animation: hc-shimmer 0.95s var(--ease) both;
}

.btn--large {
  min-height: 52px;
  padding: 0.75rem 1.7rem;
  font-size: 1.1rem;
}

.btn--small {
  min-height: 42px;
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
}

/* Home: the first screen fills the viewport below the 68px header, so the
   rows after the featured row always start below the fold. */

.first-screen {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 68px);
}

@supports (min-height: 100svh) {
  .first-screen {
    min-height: calc(100svh - 68px);
  }
}

/* Blue light on the left, violet on the right and a soft pool in the middle,
   all behind the hero. Plain gradients (no masks), so the first paint is
   cheap even without a GPU. */
.first-screen::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(closest-side, rgba(45, 98, 150, 0.34), rgba(45, 98, 150, 0)) left -22vw top 12% / 50vw 64% no-repeat,
    radial-gradient(closest-side, rgba(104, 53, 138, 0.34), rgba(104, 53, 138, 0)) right -22vw top 10% / 50vw 64% no-repeat,
    radial-gradient(closest-side, rgba(45, 98, 150, 0.22), rgba(45, 98, 150, 0)) center top 8% / 80vw 66% no-repeat;
  pointer-events: none;
}

/* Stars, right side: a box that stops short of the centre column, so they
   never sit behind the mark or the buttons. */
.first-screen::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 166px;
  right: 0;
  width: max(0px, calc(50% - 400px));
  height: 300px;
  background: var(--svg-stars) right 2% top 0 / 420px 300px no-repeat;
  pointer-events: none;
}

.highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 14px 20px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.highlight {
  position: relative;
  padding: 15px 18px 15px 66px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--muted);
  font-size: 0.95rem;
}

.highlight::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 17px;
  width: 34px;
  height: 34px;
  background: var(--svg-icon-ticket) center / contain no-repeat;
}

.highlight:nth-child(2)::before {
  background-image: var(--svg-icon-reel);
}

.highlight:nth-child(3)::before {
  background-image: var(--svg-icon-screen);
}

.highlight p {
  margin: 0;
}

.highlight .highlight__title {
  margin-bottom: 2px;
  color: var(--text);
  font-weight: 700;
}

.browse {
  padding-block: 22px 26px;
}

.browse__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
}

.browse__label {
  margin: 0;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.browse__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Chips: a wash of gold slides in on hover. */
.browse__list a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  display: block;
  padding: 0.4rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
}

.browse__list a::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(221, 171, 58, 0.34), rgba(221, 171, 58, 0.16));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease);
}

.browse__list a:hover {
  border-color: var(--gold);
  color: #ffffff;
}

.browse__list a:hover::before {
  transform: scaleX(1);
}

/* Home: hero. A string of lights hangs below the header, and stars fill the
   sides; both sit behind the text and stay still. */

.hero {
  position: relative;
  isolation: isolate;
  padding-block: 62px 4px;
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--svg-garland) 50% 0 / 250px 60px repeat-x;
  pointer-events: none;
}

/* Stars, left side (the right side is .first-screen::after). */
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 70px;
  left: 0;
  width: max(0px, calc(50% - 400px));
  height: 300px;
  background: var(--svg-stars) left 2% top 0 / 420px 300px no-repeat;
  pointer-events: none;
}

.hero__title {
  margin: 0 auto;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 0.9rem + 3.3vw, 4.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.02em;
}

/* The gold rule under the mark (part of the heading's box, below the text). */
.hero__title::after {
  content: "";
  display: block;
  width: 280px;
  max-width: 72%;
  height: 20px;
  margin: 0.2em auto 0;
  background: var(--svg-divider) center / contain no-repeat;
}

@media (max-width: 639px) {
  .hero__title {
    letter-spacing: 0.01em;
  }
}

.hero__lede {
  max-width: 760px;
  margin: 16px auto 0;
  color: #ffffff;
  font-size: clamp(1.06rem, 0.96rem + 0.5vw, 1.45rem);
  line-height: 1.45;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 22px;
  margin-top: 22px;
}

.hero__feature {
  margin: 0;
  color: var(--muted);
}

.hero__feature span {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
}

/* Wider screens: Watch now sits on the centre line under the mark and the
   service line, with the featured-film note beside it. A note too long for
   its half takes the room it needs and nudges the button left, so it never
   wraps. Same row height, so nothing moves up or down. */
@media (min-width: 1024px) {
  .hero__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr);
  }

  .hero__actions > .btn {
    grid-column: 2;
  }

  .hero__feature {
    grid-column: 3;
    justify-self: start;
    text-align: left;
  }
}

/* Catalog rows and cards. Headings are centred over centred grids, like the
   main site's sections. */

.row {
  padding-block: 44px 8px;
  scroll-margin-top: 12px;
}

.row__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 22px;
  text-align: center;
}

.row__title {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
  line-height: 1.15;
}

.row__head::after {
  content: "";
  order: 1;
  width: 180px;
  height: 13px;
  margin-top: 8px;
  background: var(--svg-divider) center / contain no-repeat;
}

.row__blurb {
  order: 2;
  margin: 6px 0 0;
  color: var(--muted);
}

/* The featured row shares the first screen with the hero, so it is tighter. */
#row-featured {
  padding-block: 26px 4px;
}

#row-featured .row__head {
  margin-bottom: 18px;
}

#row-featured .row__title {
  font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.9rem);
}

#row-featured .row__head::after {
  display: none;
}

#row-featured .row__blurb {
  margin-top: 2px;
}

/* Under the player, the More row stays compact. */
.page-watch .row {
  padding-top: 30px;
}

.page-watch .row__head {
  margin-bottom: 16px;
}

.page-watch .row__head::after {
  display: none;
}

.page-watch .row__title {
  font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.9rem);
}

.grid {
  --card: 222px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 196px), var(--card)));
  justify-content: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 639px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* A row with an odd number of films centres its last card. */
  .grid > .card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 6px);
  }
}

/* The featured grid keeps the five-up card width with three, four or five
   live specimen titles, centred, so the first screen keeps its layout. */
.grid--featured,
.grid--featured-4,
.grid--featured-3 {
  justify-content: center;
}

/* Glass cards. The 2px padding is the frame: a quiet light-to-gold edge at
   rest, and on hover or keyboard focus a turning ring of gold, mint, teal
   and violet (a large conic layer rotated behind the card, clipped to its
   corners, so only transform and opacity animate). */
.card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  overflow: clip;
  padding: 2px;
  border-radius: var(--radius);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.07) 30%, rgba(255, 255, 255, 0.04) 64%, rgba(221, 171, 58, 0.36));
  box-shadow: 0 22px 40px -26px rgba(0, 0, 0, 0.95);
}

.card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: -65%;
  width: 230%;
  aspect-ratio: 1;
  translate: 0 -50%;
  background: var(--ring);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
  pointer-events: none;
}

.card:hover,
.card:focus-within {
  box-shadow: 0 22px 40px -26px rgba(0, 0, 0, 0.95), 0 0 36px -10px var(--row-glow);
}

.card:hover::before,
.card:focus-within::before {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s var(--ease), visibility 0s;
  animation: hc-turn 5s linear infinite;
}

/* Every card's picture is 4:3, the films' own shape. min-height: 0 and the
   clip keep the box at that ratio whatever the poster's shape; a 16:9 poster
   whose source carries black side bars is cropped to its 4:3 picture. */
.card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  min-height: 0;
  overflow: hidden;
  overflow: clip;
  background: #000000;
  border-radius: 14px 14px 0 0;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.card:hover .card__media img,
.card:focus-within .card__media img {
  transform: scale(1.06);
}

/* The poster melts into the card; the veil lifts a little on hover. */
.card__media::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 22, 49, 0.92) 0, rgba(13, 22, 49, 0.28) 34%, rgba(13, 22, 49, 0) 58%);
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}

.card:hover .card__media::before,
.card:focus-within .card__media::before {
  opacity: 0.5;
}

.card__play {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(232, 195, 109, 0.65);
  border-radius: 50%;
  background: rgba(4, 6, 13, 0.74);
  color: var(--gold-hover);
  transition: transform 0.3s var(--ease);
}

.card:hover .card__play,
.card:focus-within .card__play {
  transform: scale(1.12);
  border-color: var(--gold);
  background: var(--gold);
  color: var(--gold-ink);
}

.card__play .icon {
  width: 18px;
  height: 18px;
  margin-left: 2px;
}

.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 13px 14px 14px;
  background: linear-gradient(180deg, #121e42 0, var(--surface) 100%);
  border-radius: 0 0 14px 14px;
}

/* Two lines are always kept for the title, so the buttons line up across a
   row and a late-loading font can't move them. */
.card__title {
  margin: 0;
  min-height: 2.5em;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.25;
}

.card:hover .card__title,
.card:focus-within .card__title {
  color: var(--gold-hover);
}

/* Dots sit in the gaps between facts. One that would start a wrapped line
   falls outside the box and is clipped, so no line starts with a dot. */
.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 15px;
  margin: 0 0 8px;
  overflow: hidden;
  overflow: clip;
  color: var(--muted);
  font-size: 0.86rem;
}

.card__meta span {
  position: relative;
}

.card__meta span + span::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-top: -1px;
  border-radius: 50%;
  background: var(--muted);
}

/* The category label (Short film, Documentary, Biographical film, Feature
   film or Original) on every card and title page. */
.card__category,
.watch__category {
  color: var(--accent-strong);
  font-weight: 600;
}

.card__category::before {
  color: var(--muted);
  font-weight: 400;
}

/* Badges ride on the poster's top-left corner. */
.card__badges {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100% - 24px);
  margin: 0;
  pointer-events: none;
}

.card__cta {
  align-self: stretch;
  margin-top: auto;
}

@media (max-width: 639px) {
  .card__body {
    padding: 10px 10px 12px;
  }

  .card__title {
    font-size: 1rem;
  }

  .card__meta {
    font-size: 0.8rem;
  }

  .card__badges {
    top: 8px;
    left: 8px;
  }
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.6rem;
  border: 1px solid rgba(232, 195, 109, 0.6);
  border-radius: 999px;
  background: rgba(4, 6, 13, 0.8);
  color: #f0d48a;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

.badge--dev {
  border-color: rgba(255, 150, 150, 0.65);
  background: rgba(40, 6, 10, 0.88);
  color: #ffc2c2;
}

/* Home: 24/7 Channel card (no video on the home page). Snow drifts down the
   right part behind a gold television; the copy stays still. */

.channel-teaser {
  padding-block: 56px 8px;
}

.channel-teaser__box {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  max-width: 980px;
  margin-inline: auto;
  padding: 34px 300px 34px 40px;
  background: linear-gradient(120deg, rgba(45, 98, 150, 0.3), rgba(104, 53, 138, 0.26)), #0c1533;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -32px rgba(0, 0, 0, 0.9);
}

.channel-teaser__box::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -240px;
  right: 0;
  bottom: 0;
  left: 56%;
  background: var(--svg-snow) 0 0 / 240px 240px repeat;
  opacity: 0.6;
  animation: hc-snow 30s linear infinite;
  pointer-events: none;
}

.channel-teaser__box::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 62px;
  width: 180px;
  height: 156px;
  margin-top: -78px;
  background: var(--svg-tv) center / contain no-repeat;
  pointer-events: none;
}

.channel-teaser__box p:last-child {
  margin-bottom: 0;
}

.channel-teaser__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.25rem + 1vw, 2.3rem);
}

.channel-teaser__now {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
}

@media (max-width: 759px) {
  .channel-teaser__box {
    padding: 26px 22px;
  }

  .channel-teaser__box::after {
    display: none;
  }

  .channel-teaser__box::before {
    left: 0;
    opacity: 0.35;
  }
}

.eyebrow,
.now-label {
  color: var(--gold-hover);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0 0 6px;
}

/* Player frame: the mark sits directly above every player, on a solid bar. */

.player-frame {
  overflow: hidden;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  box-shadow: 0 32px 70px -34px rgba(0, 0, 0, 0.95);
}

.brand-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 9px 16px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}

.brand-bar__logo {
  width: auto;
  height: 24px;
}

.brand-bar__name {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.brand-bar__label {
  margin-left: auto;
  color: var(--accent-strong);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 639px) {
  .brand-bar {
    gap: 4px 8px;
    padding: 7px 10px;
    font-size: 0.8rem;
  }

  .brand-bar__logo {
    height: 20px;
  }

  .brand-bar__name {
    font-size: 0.88rem;
  }

  .brand-bar__label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
  }
}

/* The player mounts. player.js and channel.js replace their contents and
   size themselves (player.css); until then, hold a 16:9 box. */
.watch-player,
.channel-stage {
  position: relative;
  background: #000000;
}

.watch-player:not(:has(.hcp)),
.channel-stage:not(:has(.hcc)) {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* With scripts on (no fallback inside), the 24/7 mount keeps a minimum
   height of the player plus the Now / Next bar channel.js builds under it,
   through every step of mounting, so the schedule below doesn't jump. A
   zero-width float with percentage padding sets that minimum. */
.channel-stage:not(:has(.player-fallback)) {
  aspect-ratio: auto;
}

.channel-stage:not(:has(.player-fallback))::before {
  content: "";
  float: left;
  padding-bottom: calc(56.25% + 129px);
}

.channel-stage:not(:has(.player-fallback))::after {
  content: "";
  display: block;
  clear: both;
}

/* channel.js builds its shell first and player.js mounts into it a moment
   later; the host keeps the player's 16:9 box meanwhile, so the bar under
   it never jumps. */
.hcc-player:not(:has(.hcp)) {
  aspect-ratio: 16 / 9;
  background: #000000;
}

/* The Now and Next slots keep one line for the title and one for the time
   while channel.js fills them in, so the bar doesn't shift as text arrives
   (filled, each line is at least that tall anyway). */
.hcc-slot .hcc-title,
.hcc-slot .hcc-when {
  min-height: 1.55em;
  min-height: 1lh;
}

/* Narrower, the bar wraps: the back button takes a second row, then each
   slot takes its own. */
@media (max-width: 722px) {
  .channel-stage:not(:has(.player-fallback))::before {
    padding-bottom: calc(56.25% + 189px);
  }
}

@media (max-width: 536px) {
  .channel-stage:not(:has(.player-fallback))::before {
    padding-bottom: calc(56.25% + 271px);
  }
}

.player-fallback {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000000;
}

.player-fallback__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.player-fallback__note {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 0.5rem 0.9rem;
  transform: translateX(-50%);
  background: rgba(4, 6, 13, 0.9);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.95rem;
  text-align: center;
}

/* Watch page */

.back-link {
  margin: 22px 0 16px;
}

.back-link a {
  font-weight: 600;
  text-decoration: none;
}

.back-link a:hover {
  text-decoration: underline;
}

.watch__layout {
  display: grid;
  gap: 24px;
}

@media (min-width: 1100px) {
  .watch__layout {
    grid-template-columns: minmax(0, 2.15fr) minmax(300px, 1fr);
    align-items: stretch;
    gap: 32px;
  }
}

/* A violet glow behind the player (never on it). It reaches into the page
   gutter and no further, so the page never gets wider than the screen. */
.watch__player {
  position: relative;
  isolation: isolate;
}

.watch__player::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -48px calc(-1 * var(--gutter));
  background: radial-gradient(closest-side, rgba(104, 53, 138, 0.34), rgba(104, 53, 138, 0));
  pointer-events: none;
}

.watch__details {
  padding: 24px 26px 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 50%), rgba(12, 21, 51, 0.6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.watch__details::before {
  content: "";
  display: block;
  width: 168px;
  height: 12px;
  margin: 0 0 14px -6px;
  background: var(--svg-divider) left center / contain no-repeat;
}

.watch__title {
  margin-bottom: 0.3em;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.35rem + 1.3vw, 2.5rem);
  line-height: 1.12;
}

.watch__year {
  display: block;
  margin-top: 0.2em;
  color: var(--muted);
  font-size: 0.62em;
  letter-spacing: 0.04em;
}

.watch__meta {
  margin-bottom: 0.8em;
  color: var(--muted);
}

.watch__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.watch__synopsis {
  max-width: 65ch;
  font-size: 1.05rem;
}

.watch__note {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

/* 24/7 Channel page */

.channel__intro {
  padding-block: 36px 6px;
  text-align: center;
}

.channel__title {
  margin-bottom: 0.25em;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.35rem + 2vw, 3.2rem);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.channel__title::after {
  content: "";
  display: block;
  width: 240px;
  max-width: 70%;
  height: 18px;
  margin: 0.2em auto 0;
  background: var(--svg-divider) center / contain no-repeat;
}

.channel__lede {
  max-width: 62ch;
  margin-inline: auto;
  font-size: 1.05rem;
}

.channel__stage {
  max-width: 1040px;
  margin: 10px auto 0;
}

.schedule {
  max-width: 1040px;
  margin-inline: auto;
  padding-block: 40px 4px;
}

.schedule h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
}

.schedule__list {
  display: grid;
  gap: 10px;
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: program;
}

.schedule__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  padding: 11px 18px 11px 14px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  counter-increment: program;
}

/* The list already numbers the rows for screen readers, so the disc's number
   is hidden from them (the empty alternative text after the slash). The first
   line is for browsers without that syntax. */
.schedule__item::before {
  content: counter(program);
  content: counter(program) / "";
  display: grid;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  border: 1px solid rgba(221, 171, 58, 0.55);
  border-radius: 50%;
  color: var(--gold-hover);
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.schedule__item.is-now {
  border-color: rgba(221, 171, 58, 0.75);
  background: linear-gradient(90deg, rgba(221, 171, 58, 0.18), rgba(255, 255, 255, 0.03));
  box-shadow: inset 3px 0 0 var(--gold);
}

.schedule__item.is-now::before {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--gold-ink);
}

.schedule__name {
  flex: 1 1 14rem;
  font-family: var(--font-display);
  font-weight: 700;
}

.schedule__length {
  color: var(--muted);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.schedule__link {
  font-size: 0.92rem;
  font-weight: 600;
}

.dev-note {
  color: #ffb8b8;
}

/* About, Privacy, Terms: a glass page, centred, at a reading measure of
   about 80 characters a line. */

.prose {
  max-width: 760px;
  margin: 36px auto 0;
  padding: 40px clamp(20px, 4vw, 56px) 30px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015) 45%), rgba(10, 18, 44, 0.55);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.prose h1 {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 3rem);
  text-align: center;
}

.prose h1::after {
  content: "";
  display: block;
  width: 240px;
  max-width: 70%;
  height: 18px;
  margin: 0.25em auto 0;
  background: var(--svg-divider) center / contain no-repeat;
}

.prose h2 {
  margin-top: 1.7em;
  font-family: var(--font-display);
  font-size: 1.45rem;
}

.prose ul {
  margin: 0 0 1em;
  padding-left: 1.25em;
}

.prose li {
  margin-bottom: 0.4em;
}

.prose li::marker {
  color: var(--gold);
}

.prose__lede {
  font-size: 1.12rem;
}

.prose__effective {
  color: var(--muted);
  text-align: center;
}

/* 404 */

.not-found {
  padding-block: 44px 4px;
  text-align: center;
}

.not-found h1 {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 3rem);
}

.not-found__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* Footer: a string of lights along its top edge; the second, glowing set of
   bulbs breathes slowly (well under one cycle a second). */

.site-footer {
  position: relative;
  margin-top: 72px;
  padding-top: 26px;
  background: linear-gradient(180deg, rgba(4, 6, 13, 0) 0, #04060d 52px);
  color: var(--muted);
  font-size: 0.92rem;
}

.site-footer::before,
.site-footer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: var(--svg-garland) 50% 0 / 200px 48px repeat-x;
  pointer-events: none;
}

.site-footer::after {
  background-image: var(--svg-garland-glow);
  opacity: 0.3;
  animation: hc-twinkle 5s ease-in-out infinite alternate;
}

.site-footer__inner {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding-block: 32px 36px;
  text-align: center;
}

.site-footer p {
  margin: 0;
}

.site-footer__mark {
  color: var(--text);
  font-weight: 600;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.site-footer a {
  color: var(--muted);
}

.site-footer a:hover {
  color: #ffffff;
}

/* Keyframes: transform and opacity only. */

@keyframes hc-turn {
  to {
    transform: rotate(1turn);
  }
}

@keyframes hc-shimmer {
  from {
    transform: translateX(-110%);
  }

  to {
    transform: translateX(260%);
  }
}

@keyframes hc-snow {
  to {
    transform: translateY(240px);
  }
}

@keyframes hc-twinkle {
  to {
    opacity: 0.95;
  }
}

/* Seasonal accents. Each row id sets the colours of its hover ring and glow,
   its emblem, its string of lights and the faint wash behind the row. Only
   the row lights below the first screen move: a slow glow, set further down. */

:root {
  --ring: conic-gradient(#ddab3a, #7fe7c4, #66c0ce, #a98beb, #e8c36d, #ddab3a);
  --row-glow: rgba(102, 192, 206, 0.4);
  --b1: #ffe29a;
  --b2: #ddab3a;
  --b3: #fff1c1;
  --svg-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ddab3a' d='M12 0C12.9 9 15 11.1 24 12C15 12.9 12.9 15 12 24C11.1 15 9 12.9 0 12C9 11.1 11.1 9 12 0Z'/%3E%3C/svg%3E");
  --svg-wire: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14'%3E%3Cpath d='M0 2.5Q14 9 28 2.5' fill='none' stroke='%238a6a1f' stroke-width='1.2'/%3E%3C/svg%3E");
}

#row-halloween {
  --ring: conic-gradient(#ff8a3d, #b98cff, #ffc46b, #ff8a3d);
  --row-glow: rgba(255, 122, 47, 0.42);
  --row-wash: rgba(255, 122, 47, 0.13);
  --b1: #ff8a3d;
  --b2: #b98cff;
  --b3: #ffc46b;
  --row-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235f9a3c' d='M11 2.6c1.7-.7 3.3-.2 4 .5l-1.3 1.2c-.5-.4-1.1-.4-1.7-.1L12 6.2h-1.5z'/%3E%3Cellipse cx='7.6' cy='14' rx='5.4' ry='7' fill='%23f07a2c'/%3E%3Cellipse cx='16.4' cy='14' rx='5.4' ry='7' fill='%23f07a2c'/%3E%3Cellipse cx='12' cy='14' rx='4.6' ry='7.6' fill='%23ff9a4d'/%3E%3C/svg%3E");
}

#row-christmas {
  --ring: conic-gradient(#e5484d, #f3d58a, #3fb27f, #e5484d);
  --row-glow: rgba(229, 72, 77, 0.38);
  --row-wash: rgba(229, 72, 77, 0.12);
  --b1: #ff5a5f;
  --b2: #3fd08f;
  --b3: #ffd36e;
  --row-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6a2.2 2.2 0 0 0-2.2 2.2' fill='none' stroke='%23f3d58a' stroke-width='1.4'/%3E%3Cpath d='M12 1.6a2.2 2.2 0 0 1 2.2 2.2' fill='none' stroke='%23f3d58a' stroke-width='1.4'/%3E%3Crect x='9.4' y='3.6' width='5.2' height='3' rx='.8' fill='%23ddab3a'/%3E%3Ccircle cx='12' cy='14.6' r='8.4' fill='%23e5484d'/%3E%3Cpath d='M4.2 12.6c5.2 2.2 10.4 2.2 15.6 0' fill='none' stroke='%23f3d58a' stroke-width='1.3'/%3E%3Ccircle cx='9' cy='11.6' r='1.6' fill='%23ff9a9d'/%3E%3C/svg%3E");
}

#row-easter-christmas {
  --ring: conic-gradient(#f4c2d7, #cdb8f0, #f3d58a, #f4c2d7);
  --row-glow: rgba(205, 184, 240, 0.4);
  --row-wash: rgba(205, 184, 240, 0.13);
  --b1: #f7c6da;
  --b2: #cdb8f0;
  --b3: #f3d58a;
  --row-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23cdb8f0' d='M12 0l2 8.5L22.5 6 16 12l6.5 6-8.5-2.5L12 24l-2-8.5L1.5 18 8 12 1.5 6 10 8.5z'/%3E%3Ccircle cx='12' cy='12' r='3.2' fill='%23f3d58a'/%3E%3C/svg%3E");
}

#row-documentary {
  --ring: conic-gradient(#f2f5f9, #aeb8c6, #6c7685, #f2f5f9);
  --row-glow: rgba(201, 209, 220, 0.34);
  --row-wash: rgba(201, 209, 220, 0.08);
  --row-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c9d1dc' fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm0 3a2.4 2.4 0 1 1 0 4.8A2.4 2.4 0 0 1 12 4zm0 11.2a2.4 2.4 0 1 1 0 4.8 2.4 2.4 0 0 1 0-4.8zM6.4 9.6a2.4 2.4 0 1 1 0 4.8 2.4 2.4 0 0 1 0-4.8zm11.2 0a2.4 2.4 0 1 1 0 4.8 2.4 2.4 0 0 1 0-4.8zM12 10.9a1.1 1.1 0 1 1 0 2.2 1.1 1.1 0 0 1 0-2.2z'/%3E%3C/svg%3E");
}

#row-originals {
  --ring: conic-gradient(#ddab3a, #f3d58a, #8a6a1f, #ddab3a);
  --row-glow: rgba(221, 171, 58, 0.4);
  --row-wash: rgba(221, 171, 58, 0.12);
  --row-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ddab3a' stroke-width='1.7' stroke-linejoin='round' d='M2.5 6.5h19v3.2a2.3 2.3 0 0 0 0 4.6v3.2h-19v-3.2a2.3 2.3 0 0 0 0-4.6z'/%3E%3Cpath d='M15.5 7.5v9' stroke='%23ddab3a' stroke-width='1.5' stroke-dasharray='1.6 1.6'/%3E%3C/svg%3E");
}

/* The emblem sits centred above each seasonal row's title. */
:is(#row-halloween, #row-christmas, #row-easter-christmas, #row-documentary, #row-originals) .row__title::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto 8px;
  background: var(--row-icon) center / contain no-repeat;
}

/* Below the first screen, each season's row sits on a still wash of its own
   light, so the long page reads as separate sections. */
.first-screen ~ .row {
  position: relative;
  isolation: isolate;
}

.first-screen ~ .row::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(closest-side, var(--row-wash, rgba(45, 98, 150, 0.12)), rgba(0, 0, 0, 0)) center / min(1500px, 100%) 100% no-repeat;
  pointer-events: none;
}

/* Under the title, a short string of lights in the season's colours takes
   the place of the gold rule (documentaries get a strip of film). */
:is(#row-halloween, #row-christmas, #row-easter-christmas, #row-originals) .row__head::after {
  width: 168px;
  height: 14px;
  background:
    radial-gradient(circle at 14px 9px, #fffaf0 0 0.7px, var(--b1) 1.6px 3px, rgba(0, 0, 0, 0) 5.5px) 0 0 / 84px 14px repeat-x,
    radial-gradient(circle at 42px 9px, #fffaf0 0 0.7px, var(--b2) 1.6px 3px, rgba(0, 0, 0, 0) 5.5px) 0 0 / 84px 14px repeat-x,
    radial-gradient(circle at 70px 9px, #fffaf0 0 0.7px, var(--b3) 1.6px 3px, rgba(0, 0, 0, 0) 5.5px) 0 0 / 84px 14px repeat-x,
    var(--svg-wire) 0 0 / 28px 14px repeat-x;
}

#row-documentary .row__head::after {
  width: 168px;
  height: 14px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, rgba(201, 209, 220, 0.62) 0 7px, rgba(201, 209, 220, 0) 7px 13px) 0 2px / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, rgba(201, 209, 220, 0.62) 0 7px, rgba(201, 209, 220, 0) 7px 13px) 0 9px / 100% 3px no-repeat,
    linear-gradient(rgba(201, 209, 220, 0.12), rgba(201, 209, 220, 0.12));
}

/* The featured row's title sits between two gold flourishes (a fading line
   and a sparkle), inline, so the first screen keeps its height. */
@media (min-width: 640px) {
  #row-featured .row__title::before,
  #row-featured .row__title::after {
    content: "";
    display: inline-block;
    width: 72px;
    height: 14px;
    margin: 0 14px;
    vertical-align: 0.12em;
    background:
      var(--svg-sparkle) right center / 12px 12px no-repeat,
      linear-gradient(90deg, rgba(221, 171, 58, 0), var(--gold)) left center / 56px 1.5px no-repeat;
  }

  #row-featured .row__title::after {
    transform: scaleX(-1);
  }
}

@media (min-width: 900px) and (max-height: 820px) {
  #row-featured .row__title::before,
  #row-featured .row__title::after {
    content: none;
  }
}

/* Below the first screen the row lights glow slowly, each row a little out
   of step with the next (opacity only, a 9s cycle; off with reduced motion). */
.first-screen ~ .row .row__head::after {
  animation: hc-glow 4.5s ease-in-out infinite alternate;
}

#row-christmas .row__head::after {
  animation-delay: -1.5s;
}

#row-easter-christmas .row__head::after {
  animation-delay: -3s;
}

#row-originals .row__head::after {
  animation-delay: -2.2s;
}

#row-documentary .row__head::after {
  animation: none;
}

@keyframes hc-glow {
  from {
    opacity: 0.45;
  }

  to {
    opacity: 1;
  }
}

/* The player frame takes a gold hairline. */
.player-frame {
  border-color: rgba(221, 171, 58, 0.45);
}

/* The player's own panels in the site's style: gold buttons with 6px
   corners, and the 24/7 station card in night blue with the mark in gold
   Playfair, like the brand bar's. The small mark over the picture keeps the
   logo's white and teal (player.css), since it shows over the film itself.
   player.css loads after this file, so each rule carries .player-frame for
   the extra weight. If the mark goes back to white sans, change
   .hcp-card-mark with it. */
.player-frame .hcp-card {
  background: radial-gradient(circle at 50% 40%, #1d2a5c 0%, var(--night) 75%);
}

.player-frame .hcp-card-mark {
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.player-frame .hcp-card-mark .hcp-mark-accent {
  color: inherit;
}

.player-frame .hcp-card-kicker {
  color: var(--gold-hover);
}

.player-frame .hcp-action {
  border-radius: var(--radius-btn);
  background: var(--gold);
  color: var(--gold-ink);
}

.player-frame .hcp-action:hover {
  background: var(--gold-hover);
}

.player-frame .hcc-back {
  border-color: rgba(221, 171, 58, 0.85);
  border-radius: var(--radius-btn);
  color: var(--gold-hover);
}

.player-frame .hcc-back:hover {
  background: rgba(221, 171, 58, 0.16);
  color: #ffffff;
}

/* Short laptop screens (1366x768 and the like): a tighter hero and smaller
   featured cards, so every featured Watch now fits the first screen. */
@media (min-width: 900px) and (max-height: 820px) {
  .hero {
    padding-top: 45px;
  }

  .hero::before {
    height: 48px;
    background-size: 200px 48px;
  }

  .hero::after {
    top: 52px;
  }

  .hero__title {
    font-size: clamp(1.75rem, 0.9rem + 3.3vw, 3.1rem);
  }

  .hero__title::after {
    height: 13px;
    margin-top: 0.1em;
  }

  .hero__lede {
    margin-top: 8px;
    font-size: 1.18rem;
  }

  .hero__actions {
    margin-top: 12px;
  }

  .hero .btn--large {
    min-height: 48px;
  }

  #row-featured {
    padding-top: 12px;
  }

  #row-featured .row__head {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 2px 14px;
    margin-bottom: 12px;
  }

  #row-featured .row__blurb {
    margin: 0;
  }

  .grid--featured {
    --card: 210px;
  }

  .grid--featured .card__body {
    padding: 11px 11px 12px;
  }

  .grid--featured .card__meta {
    margin-bottom: 4px;
    font-size: 0.82rem;
  }

  .grid--featured .btn--small {
    min-height: 40px;
  }

  .card__media::before {
    background: linear-gradient(to top, rgba(13, 22, 49, 0.92) 0, rgba(13, 22, 49, 0.28) 30%, rgba(13, 22, 49, 0) 52%);
  }
}

/* Phones: the mark on one line, a full-width Watch now. */
@media (max-width: 639px) {
  .hero {
    padding-top: 50px;
  }

  .hero::before {
    height: 48px;
    background-size: 200px 48px;
  }

  .hero__actions {
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
  }

  .hero__actions .btn {
    width: 100%;
  }

  #row-featured {
    padding-top: 22px;
  }

  .row {
    padding-top: 34px;
  }

  .prose {
    margin-top: 20px;
  }
}

/* Depth and motion. /assets/js/fx.mjs sets the custom properties used here
   (--px and --py on the first screen's lights; --rx, --ry, --mx and --my on
   a tilting card) and adds .fx to <html> only when motion is allowed.
   Without it nothing below moves, and every section shows as it is. The
   mark, the service line and the Watch now buttons never move by themselves,
   and nothing follows the scroll: at rest the first screen is still, so
   every capture of it looks the same. */

/* The mark in gold relief: a still, stepped shadow under the letters. */
.hero__title {
  text-shadow:
    0 1px 0 #c0912a,
    0 2px 0 #a97d22,
    0 3px 0 #8f681c,
    0 4px 0 #735315,
    0 12px 24px rgba(0, 0, 0, 0.6);
}

/* Soft lights at the sides of the first screen, at three depths. */
.depth {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  overflow: clip;
  pointer-events: none;
}

.depth__light {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--light, rgba(221, 171, 58, 0.32)), rgba(0, 0, 0, 0));
  transform: translate3d(calc(var(--px, 0) * var(--d, 20px)), calc(var(--py, 0) * var(--d, 20px) * 0.7), 0);
  will-change: transform;
}

.depth__light--1 {
  --light: rgba(221, 171, 58, 0.3);
  --d: 34px;
  top: 12%;
  left: -6%;
  width: 26vw;
  height: 26vw;
}

.depth__light--2 {
  --light: rgba(102, 192, 206, 0.24);
  --d: -22px;
  top: 46%;
  left: 2%;
  width: 16vw;
  height: 16vw;
}

.depth__light--3 {
  --light: rgba(169, 139, 235, 0.3);
  --d: -38px;
  top: 8%;
  right: -8%;
  width: 30vw;
  height: 30vw;
}

.depth__light--4 {
  --light: rgba(232, 195, 109, 0.22);
  --d: 18px;
  top: 52%;
  right: 4%;
  width: 12vw;
  height: 12vw;
}

/* Kept clear of the first screen's bottom edge, even at its furthest drift,
   so the layer's clip never cuts its glow off in a straight line. */
.depth__light--5 {
  --light: rgba(240, 138, 108, 0.16);
  --d: 30px;
  bottom: 40px;
  left: 38%;
  width: 24vw;
  height: 12vw;
}

/* Cards: they tilt toward the mouse while it's over them, with a light
   sheen on the poster that follows it, and settle flat when it leaves. The
   tilt and the slight scale only grow the card under the pointer, so it
   never slips out from under it; touch screens get neither. */
.card {
  transition: transform 0.6s var(--ease), box-shadow 0.3s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .fx .card:hover {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.02);
  }
}

.fx .card.is-tilting {
  transition: transform 0.12s linear, box-shadow 0.3s var(--ease);
}

.card__media::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255, 244, 214, 0.26), rgba(255, 244, 214, 0) 46%);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}

.fx .card:hover .card__media::after {
  opacity: 1;
}

/* The play badge sends out a ring while its card is hovered. */
.card__play::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.fx .card:hover .card__play::after,
.fx .card:focus-within .card__play::after {
  animation: hc-ping 1.4s var(--ease) infinite;
}

/* Buttons: a press you can feel, and a warm glow on hover. */
.btn {
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.25s var(--ease), transform 0.12s var(--ease);
}

.btn:active {
  transform: translateY(1px) scale(0.98);
}

.btn--primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 0 0 3px rgba(221, 171, 58, 0.22), 0 14px 30px -12px rgba(221, 171, 58, 0.75);
}

/* Footer links: an underline sweeps in from the left. */
.site-footer nav a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.3s var(--ease), color 0.2s var(--ease);
}

.site-footer nav a:hover,
.site-footer nav a:focus-visible {
  background-size: 100% 1px;
}

/* The first screen's three icons give a small nod on hover. */
.highlight::before {
  transition: transform 0.35s var(--ease);
}

.fx .highlight:hover::before {
  transform: translateY(-3px) rotate(-8deg) scale(1.08);
}

/* Sections below the first screen rise into view once; their steps follow
   one after another. */
.fx [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.fx [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

.fx [data-reveal] [data-reveal-item] {
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(0.97);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: calc(var(--i, 0) * 120ms + 180ms);
}

.fx [data-reveal].is-in [data-reveal-item] {
  opacity: 1;
  transform: none;
}

/* The film spotlight. */
.spotlight {
  position: relative;
  isolation: isolate;
  padding-block: 72px 32px;
}

.spotlight::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(closest-side, rgba(104, 53, 138, 0.22), rgba(0, 0, 0, 0)) center / min(1400px, 100%) 100% no-repeat;
  pointer-events: none;
}

.spotlight__head,
.how__head {
  margin-bottom: 22px;
  text-align: center;
}

.spotlight__title,
.how__title {
  margin: 4px 0 0;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1rem + 2vw, 2.6rem);
  line-height: 1.15;
}

.spotlight__title::after,
.how__title::after {
  content: "";
  display: block;
  width: 220px;
  max-width: 60%;
  height: 16px;
  margin: 0.3em auto 0;
  background: var(--svg-divider) center / contain no-repeat;
}

.spotlight__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  margin-bottom: 30px;
}

.spotlight__bar[hidden] {
  display: none;
}

.spotlight__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.spotlight__tab,
.spotlight__pause {
  min-height: 42px;
  padding: 0.45rem 1.05rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.12s var(--ease);
}

.spotlight__tab:hover,
.spotlight__pause:hover {
  border-color: rgba(221, 171, 58, 0.7);
  color: #ffffff;
}

.spotlight__tab:active,
.spotlight__pause:active {
  transform: scale(0.97);
}

.spotlight__tab[aria-selected="true"] {
  border-color: var(--gold);
  background: rgba(221, 171, 58, 0.18);
  color: #ffffff;
  box-shadow: 0 0 22px -8px rgba(221, 171, 58, 0.7);
}

.spotlight__pause {
  font-weight: 600;
  font-size: 0.92rem;
}

.spotlight__pause[hidden] {
  display: none;
}

.spotlight__slides {
  display: grid;
  gap: 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.spotlight__slide {
  display: grid;
  gap: 28px;
  align-items: center;
}

.spotlight__slide[hidden] {
  display: none;
}

/* Once the script runs, the films share one grid cell: the section keeps the
   tallest film's height, so nothing below it moves when the film changes.
   The films not shown keep their place but are invisible, out of the tab
   order and hidden from screen readers (the !important outranks the global
   [hidden] rule, for these slides only). */
.spotlight.is-ready .spotlight__slides {
  grid-template-areas: "slide";
}

.spotlight.is-ready .spotlight__slide {
  grid-area: slide;
}

.spotlight.is-ready .spotlight__slide[hidden] {
  display: grid !important;
  visibility: hidden;
}

.spotlight.is-ready .spotlight__slide:not([hidden]) {
  animation: hc-rise 0.7s var(--ease) both;
}

@media (min-width: 900px) {
  .spotlight__slide {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 60px;
  }
}

.spotlight__art {
  position: relative;
  perspective: 1200px;
}

/* A warm glow behind the poster, like light off a screen. On a phone the
   poster spans the column, so the glow stays inside it (wider, it would
   push the page past the screen's edge). */
.spotlight__art::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 6% 0 -8%;
  background: radial-gradient(closest-side, rgba(221, 171, 58, 0.34), rgba(221, 171, 58, 0));
  pointer-events: none;
}

@media (min-width: 900px) {
  .spotlight__art::before {
    inset: 6% -6% -8%;
  }
}

.spotlight__frame {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  overflow: clip;
  border-radius: var(--radius);
  background: #000000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 44px 70px -30px rgba(0, 0, 0, 0.95);
  transform: rotateY(calc(-9deg + var(--ry, 0deg))) rotateX(calc(4deg + var(--rx, 0deg)));
  transition: transform 0.7s var(--ease);
}

/* The tilt follows the mouse over the poster's still box (.spotlight__art),
   so the turned frame can't slip out from under it. */
.spotlight__art.is-tilting .spotlight__frame {
  transition: transform 0.12s linear;
}

.spotlight__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spotlight__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(255, 244, 214, 0.22), rgba(255, 244, 214, 0) 50%),
    linear-gradient(to top, rgba(4, 6, 13, 0.45), rgba(4, 6, 13, 0) 40%);
  pointer-events: none;
}

.spotlight__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0;
  color: var(--accent-strong);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.spotlight__facts span + span::before {
  content: "•";
  margin-right: 14px;
  color: var(--gold);
}

.spotlight__name {
  margin: 8px 0 12px;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1rem + 2.6vw, 3.2rem);
  line-height: 1.1;
}

.spotlight__story {
  max-width: 58ch;
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.65;
}

/* How it works: three steps on glass cards. */
.how {
  padding-block: 40px 28px;
}

.how__steps {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 820px) {
  .how__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
}

.how__card {
  position: relative;
  height: 100%;
  padding: 26px 24px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(23, 34, 74, 0.92), rgba(13, 22, 49, 0.92));
  box-shadow: 0 22px 40px -28px rgba(0, 0, 0, 0.95);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.how__card::after {
  content: "";
  position: absolute;
  top: 22px;
  right: 22px;
  width: 32px;
  height: 32px;
  background: var(--svg-icon-reel) center / contain no-repeat;
  opacity: 0.5;
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}

.how__step:nth-child(2) .how__card::after {
  background-image: var(--svg-icon-screen);
}

.how__step:nth-child(3) .how__card::after {
  background-image: var(--svg-icon-ticket);
}

.fx .how__card:hover {
  transform: translateY(-6px);
  border-color: rgba(221, 171, 58, 0.5);
  box-shadow: 0 28px 44px -26px rgba(0, 0, 0, 0.95), 0 0 32px -12px rgba(221, 171, 58, 0.5);
}

.fx .how__card:hover::after {
  opacity: 0.9;
  transform: rotate(-10deg) scale(1.1);
}

.how__num {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f6dc9a, var(--gold) 58%, #8a6a1f);
  box-shadow: 0 10px 20px -10px rgba(221, 171, 58, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  color: var(--gold-ink);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
}

.how__name {
  margin: 0 0 6px;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 1.3rem;
}

.how__card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

@keyframes hc-ping {
  from {
    opacity: 0.85;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(1.75);
  }
}

@keyframes hc-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Preferences and special modes */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }

  .card:hover .card__media img,
  .card:focus-within .card__media img,
  .card:hover .card__play,
  .card:focus-within .card__play,
  .card,
  .btn:active,
  .spotlight__tab:active,
  .spotlight__pause:active,
  .depth__light {
    transform: none;
  }
}

@media (forced-colors: active) {
  .site-header,
  .brand-bar {
    forced-color-adjust: none;
  }

  .card {
    border: 1px solid CanvasText;
  }
}

/* Print and "Save as PDF" keep the on-screen look, so the white logo and the
   mark stay visible on paper. */
@media print {
  html {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .skip-link {
    display: none;
  }

  .card::before,
  .site-footer::after,
  .channel-teaser__box::before {
    animation: none;
  }
}