:root {
  --ink: #090909;
  --ink-soft: #101010;
  --panel: #191919;
  --panel-light: #262626;
  --cream: #f4f3ee;
  --muted: #8f8f8b;
  --line: rgba(244, 243, 238, .14);
  --gold: #f5a623;
  --red: #bb3d20;
  --cyan: #17333b;
  --max: 1420px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--cream); font-family: Arial, Helvetica, sans-serif; font-size: 16px; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.site-shell { min-height: 100vh; overflow: hidden; }
.site-header { align-items: center; background: linear-gradient(180deg, rgba(10, 10, 10, .92), rgba(10, 10, 10, .2)); display: flex; gap: 28px; height: 146px; justify-content: space-between; left: 0; padding: 0 4.5vw; position: absolute; right: 0; top: 0; z-index: 10; transition: background .3s ease, backdrop-filter .3s ease; }
.site-header.scrolled { background: rgba(10, 10, 10, .96); backdrop-filter: blur(18px); position: fixed; }
.brand { align-items: center; display: inline-flex; flex: 0 0 auto; gap: 8px; }
.ifn-logo { display: block; height: 129px; object-fit: contain; object-position: left center; width: 129px; }
.brand-name { color: var(--cream); font-family: Impact, "Arial Narrow", Arial, sans-serif; font-size: 19px; letter-spacing: .06em; line-height: .95; max-width: none; white-space: nowrap; text-transform: uppercase; }
.logo-frame { fill: none; stroke: var(--cream); stroke-width: 4; }
.logo-inner { fill: none; stroke: var(--cream); stroke-width: 2; }
.logo-holes { fill: var(--ink); stroke: var(--cream); stroke-width: 2; }
.logo-ifn { fill: var(--cream); font-family: Arial Black, Arial, sans-serif; font-size: 32px; font-weight: 900; letter-spacing: 0; }
.logo-wordmark { fill: var(--cream); font-family: Impact, "Arial Narrow", Arial, sans-serif; font-size: 19px; font-weight: 900; letter-spacing: 0; }
.ifn-logo-box { align-items: center; background: repeating-linear-gradient(90deg, var(--cream) 0 4px, transparent 4px 8px) top / 100% 3px no-repeat, repeating-linear-gradient(90deg, var(--cream) 0 4px, transparent 4px 8px) bottom / 100% 3px no-repeat; border: 2px solid var(--cream); color: var(--cream); display: inline-flex; font-family: Arial Black, Arial, sans-serif; font-size: 16px; font-weight: 900; height: 29px; justify-content: center; letter-spacing: -.17em; line-height: 1; padding: 0 3px 1px 0; position: relative; text-shadow: 0 0 1px var(--cream); width: 44px; z-index: 1; }
.ifn-logo-box::after { border: 1px solid rgba(244,243,238,.62); content: ""; inset: 4px; pointer-events: none; position: absolute; }
.ifn-logo-type { color: var(--cream); font-family: Impact, "Arial Narrow", Arial, sans-serif; font-size: 7px; font-weight: 900; letter-spacing: .04em; line-height: 1; white-space: nowrap; }
.main-nav { display: flex; flex: 1; gap: clamp(15px, 2.25vw, 38px); justify-content: flex-end; margin-left: 0; }
.main-nav a, .text-action { color: #f1f4f5; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transition: color .2s ease; }
.main-nav a:hover, .main-nav a.active, .text-action:hover { color: var(--gold); }
.header-actions { align-items: center; display: flex; gap: 18px; }
.header-watch { align-items: center; background: var(--gold); border-radius: 999px; color: var(--ink); display: inline-flex; font-size: 11px; font-weight: 800; gap: 10px; height: 46px; justify-content: center; letter-spacing: .12em; padding: 0 22px; text-transform: uppercase; white-space: nowrap; width: 156px; }
.header-watch:hover { background: var(--cream); }
.menu-toggle { background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--cream); cursor: pointer; display: none; font-size: 11px; letter-spacing: .1em; padding: 10px 16px; text-transform: uppercase; }
main { min-height: 60vh; }
.hero { align-items: center; background: radial-gradient(circle at 78% 32%, rgba(151, 151, 143, .2), transparent 18%), radial-gradient(circle at 68% 58%, rgba(91, 98, 96, .28), transparent 32%), linear-gradient(90deg, rgba(8, 8, 8, .99) 0%, rgba(30, 31, 30, .94) 43%, rgba(72, 73, 69, .72) 72%, rgba(18, 18, 18, .9) 100%); display: flex; gap: 5vw; justify-content: space-between; min-height: min(760px, 94vh); padding: 150px 9vw 94px 13vw; position: relative; }
.hero::after { background: linear-gradient(transparent 53%, var(--ink) 100%); content: ""; inset: 0; pointer-events: none; position: absolute; }
.hero-art { background: linear-gradient(116deg, transparent 0 56%, rgba(220, 220, 214, .12) 56.2% 56.8%, transparent 57%), linear-gradient(158deg, transparent 0 64%, rgba(0, 0, 0, .28) 64% 81%, transparent 81%), repeating-linear-gradient(92deg, transparent 0 72px, rgba(255,255,255,.035) 73px 74px); background-size: auto, auto, 190px 100%; inset: 0; opacity: .9; position: absolute; }
.hero-content { flex: 1 1 58%; max-width: 710px; position: relative; z-index: 1; }
.kicker, .eyebrow { color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .2em; margin: 0 0 18px; text-transform: uppercase; }
.hero h1 { font-family: Impact, "Arial Narrow", Arial, sans-serif; font-size: clamp(50px, 7vw, 104px); font-weight: 900; letter-spacing: .005em; line-height: .83; margin: 0; max-width: 700px; text-transform: uppercase; }
.hero h1 span { color: var(--gold); display: block; }
.hero-tagline { color: #d9d9d4; font-size: clamp(17px, 2vw, 23px); letter-spacing: .01em; margin: 24px 0 12px; }
.hero-note { color: var(--muted); font-size: 12px; letter-spacing: .06em; margin-bottom: 30px; text-transform: uppercase; }
.hero-gallery { align-items: center; display: flex; flex: 0 1 470px; gap: 10px; max-width: 44%; min-width: 0; position: relative; z-index: 1; }
.hero-gallery-arrow { align-items: center; aspect-ratio: 1; background: rgba(9,9,9,.62); border: 1px solid var(--line); border-radius: 50%; color: var(--cream); cursor: pointer; display: flex; flex: 0 0 38px; font-size: 18px; height: 38px; justify-content: center; padding: 0; transition: background .2s ease, border-color .2s ease, color .2s ease; width: 38px; }
.hero-gallery-arrow:hover:not(:disabled) { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.hero-gallery-arrow:disabled { cursor: default; opacity: .35; }
.hero-film-strip { display: flex; flex: 1 1 auto; gap: 14px; min-width: 0; overflow-x: auto; padding: 16px 3px 24px; position: relative; scrollbar-width: none; scroll-snap-type: x mandatory; }
.hero-film-strip::-webkit-scrollbar { display: none; }
.hero-film-card { aspect-ratio: 2 / 3; border: 1px solid rgba(244,243,238,.35); flex: 0 0 clamp(150px, 16vw, 210px); overflow: hidden; position: relative; scroll-snap-align: start; transition: border-color .2s ease, transform .2s ease; }
.hero-film-card:hover { border-color: var(--gold); transform: translateY(-5px); }
.hero-film-card::after { background: linear-gradient(transparent 48%, rgba(0,0,0,.9)); content: ""; inset: 0; position: absolute; }
.hero-film-card img { height: 100%; object-fit: cover; object-position: center; position: absolute; width: 100%; }
.hero-film-card:nth-child(2) img { filter: saturate(.72) contrast(1.12); object-position: 68% center; }
.hero-film-card:nth-child(3) img { filter: sepia(.16) brightness(.82); object-position: 30% center; }
.hero-film-card span { bottom: 16px; color: var(--cream); font-family: Impact, "Arial Narrow", Arial, sans-serif; font-size: 17px; left: 13px; position: absolute; text-transform: uppercase; z-index: 1; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { align-items: center; border: 1px solid var(--gold); border-radius: 999px; cursor: pointer; display: inline-flex; font-size: 10px; font-weight: 800; gap: 19px; justify-content: space-between; letter-spacing: .07em; min-height: 48px; padding: 0 21px; text-transform: uppercase; transition: background .2s ease, color .2s ease, transform .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--gold); color: var(--ink); }
.button-primary:hover { background: var(--cream); border-color: var(--cream); }
.button-ghost { background: rgba(9,11,14,.22); color: var(--cream); }
.button-ghost:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.button-light { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.section { margin: 0 auto; max-width: var(--max); padding: 54px 5vw 0; }
.section-heading { align-items: flex-end; display: flex; justify-content: space-between; margin-bottom: 24px; }
.section-heading h2, .page-title h1 { font-family: Impact, "Arial Narrow", Arial, sans-serif; font-size: clamp(25px, 3vw, 39px); font-weight: 900; letter-spacing: .02em; line-height: 1; margin: 0; text-transform: uppercase; }
.section-heading p { color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .12em; margin: 0; max-width: 350px; text-align: right; text-transform: uppercase; }
.rule { border-top: 1px solid var(--line); margin: 0 0 24px; }
.poster-row { display: grid; gap: 10px; grid-auto-columns: minmax(145px, 1fr); grid-auto-flow: column; overflow-x: auto; padding-bottom: 12px; scrollbar-color: var(--gold) var(--panel); }
.poster { aspect-ratio: 1.43 / 2; background-color: var(--panel); border: 1px solid rgba(242,239,231,.12); display: flex; flex-direction: column; justify-content: flex-end; min-width: 145px; overflow: hidden; padding: 11px; position: relative; transition: border-color .2s ease, transform .2s ease; }
.poster:hover { border-color: var(--gold); transform: translateY(-5px); }
.poster::before { background: linear-gradient(transparent 35%, rgba(0,0,0,.85)); content: ""; inset: 0; position: absolute; }
.poster-art { inset: 0; opacity: .9; position: absolute; }
.poster:nth-child(1) .poster-art { background: linear-gradient(145deg, #a8714b, #1b2021 52%, #c5a76a); }
.poster:nth-child(2) .poster-art { background: linear-gradient(145deg, #203b47, #151a25 54%, #bc5e48); }
.poster:nth-child(3) .poster-art { background: linear-gradient(145deg, #796e53, #151816 46%, #8e3933); }
.poster:nth-child(4) .poster-art { background: linear-gradient(145deg, #3d6367, #101419 48%, #b19a59); }
.poster:nth-child(5) .poster-art { background: linear-gradient(145deg, #8b3c3a, #1d1316 52%, #49636d); }
.poster:nth-child(6) .poster-art { background: linear-gradient(145deg, #c17b4b, #292026 47%, #586f65); }
.poster-info { position: relative; z-index: 1; }
.poster-label { color: var(--gold); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.poster h3 { font-family: Impact, "Arial Narrow", Arial, sans-serif; font-size: 17px; font-weight: 900; letter-spacing: .02em; line-height: .95; margin: 8px 0 0; text-transform: uppercase; }
.poster p { color: #c2c0b9; font-size: 10px; line-height: 1.4; margin: 7px 0 0; }
.feature-band { background: linear-gradient(110deg, #1b1b1b, #111 70%); margin-top: 70px; padding: 60px 5vw; }
.feature-inner { align-items: center; display: grid; gap: 60px; grid-template-columns: 1fr 1fr; margin: 0 auto; max-width: var(--max); }
.feature-copy h2 { font-family: Impact, "Arial Narrow", Arial, sans-serif; font-size: clamp(35px, 4vw, 62px); font-weight: 900; letter-spacing: .01em; line-height: .9; margin: 0 0 22px; text-transform: uppercase; }
.feature-copy p { color: var(--muted); line-height: 1.75; max-width: 480px; }
.feature-frame { aspect-ratio: 16 / 9; background: radial-gradient(circle at 72% 28%, rgba(245,166,35,.85) 0 1px, transparent 2px), linear-gradient(118deg, #0b1315, #203d42 48%, #4a261b 100%); border: 1px solid var(--line); overflow: hidden; padding: 20px; position: relative; }
.feature-frame::before { border: 1px solid rgba(230,182,92,.55); content: ""; inset: 20px; position: absolute; }
.feature-frame span { bottom: 35px; color: var(--gold); font-size: 10px; left: 35px; letter-spacing: .15em; position: absolute; text-transform: uppercase; }
.page-wrap { background: linear-gradient(180deg, #151515, var(--ink) 28%); min-height: 70vh; padding: 132px 5vw 80px; }
.page-container { margin: 0 auto; max-width: var(--max); }
.page-title { max-width: 760px; padding-bottom: 54px; }
.page-title h1 { font-size: clamp(47px, 7vw, 92px); line-height: .84; margin-bottom: 22px; }
.page-title p { color: var(--muted); font-size: 17px; line-height: 1.7; margin: 0; max-width: 610px; }
.content-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.info-card { background: #171717; border: 1px solid var(--line); padding: 24px; }
.info-card h3 { font-family: Impact, "Arial Narrow", Arial, sans-serif; font-size: 25px; font-weight: 900; letter-spacing: .02em; margin: 0 0 12px; text-transform: uppercase; }
.info-card p { color: var(--muted); line-height: 1.7; margin: 0; }
.watch-layout { display: grid; gap: 24px; grid-template-columns: 1.65fr 1fr; }
.player { align-items: center; aspect-ratio: 16 / 9; background: #050607; border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; padding: 30px; text-align: center; }
.live-player { display: block; overflow: hidden; padding: 0; position: relative; }
.live-player video { background: #050607; display: block; height: 100%; object-fit: contain; position: absolute; width: 100%; }
.live-badge { align-items: center; background: rgba(9,9,9,.8); color: var(--cream); display: inline-flex; font-size: 10px; font-weight: 800; gap: 7px; left: 14px; letter-spacing: .12em; padding: 8px 10px; position: absolute; text-transform: uppercase; top: 14px; }
.live-badge span { color: #e34832; font-size: 9px; }
.live-player-status { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 10px 0 16px; }
.player-icon { align-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); display: flex; font-size: 25px; height: 66px; justify-content: center; margin-bottom: 18px; width: 66px; }
.player strong { font-family: Impact, "Arial Narrow", Arial, sans-serif; font-size: 24px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
.player small { color: var(--muted); display: block; font-size: 11px; line-height: 1.5; margin-top: 9px; max-width: 350px; }
.schedule-list { border-top: 1px solid var(--line); }
.schedule-item { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 18px; grid-template-columns: 110px 1fr auto; padding: 22px 0; }
.schedule-time { color: var(--gold); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.schedule-item h3 { font-family: Impact, "Arial Narrow", Arial, sans-serif; font-size: 22px; font-weight: 900; letter-spacing: .02em; margin: 0 0 5px; text-transform: uppercase; }
.schedule-item p { color: var(--muted); font-size: 12px; margin: 0; }
.pill { border: 1px solid var(--line); color: var(--muted); font-size: 9px; letter-spacing: .12em; padding: 7px 9px; text-transform: uppercase; }
.callout { background: linear-gradient(110deg, #252525, #151515 52%, #351c15); border-left: 3px solid var(--gold); margin-top: 55px; padding: 32px 36px; }
.callout h2 { font-family: Impact, "Arial Narrow", Arial, sans-serif; font-size: clamp(28px, 4vw, 48px); font-weight: 900; letter-spacing: .02em; margin: 0 0 13px; text-transform: uppercase; }
.callout p { color: #d0d1cb; line-height: 1.7; margin: 0 0 22px; max-width: 640px; }
.form-placeholder { background: var(--panel); border: 1px dashed rgba(230,182,92,.5); margin-top: 35px; padding: 44px; text-align: center; }
.form-placeholder p { color: var(--muted); line-height: 1.6; margin: 10px auto 22px; max-width: 480px; }
.footer-signup h2 { font-family: Impact, "Arial Narrow", Arial, sans-serif; font-size: 29px; font-weight: 900; letter-spacing: .02em; margin: 0 0 7px; text-transform: uppercase; }
.site-footer { background: #0b0b0b; margin-top: 85px; padding: 46px 5vw 25px; }
.footer-main { align-items: start; display: grid; gap: 40px; grid-template-columns: 1fr auto; margin: 0 auto; max-width: var(--max); padding-bottom: 34px; }
.footer-brand-block { align-self: start; }
.footer-tagline { color: #777; font-size: 10px; font-style: italic; margin: 11px 0 0; }
.footer-signup { display: none; }
.footer-social { justify-self: end; }
.footer-signup p, .footer-social .small-copy { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0 0 14px; }
.signup-form { display: flex; margin-top: 20px; max-width: 480px; }
.signup-form input { background: transparent; border: 1px solid var(--line); color: var(--cream); min-width: 0; padding: 0 15px; width: 100%; }
.signup-form input::placeholder { color: #777d80; }
.signup-form .button { flex: 0 0 auto; }
.form-note { font-size: 10px !important; margin-top: 9px !important; }
.social-links { display: flex; gap: 8px; margin-bottom: 14px; }
.social-links a { align-items: center; border: 1px solid var(--line); color: var(--gold); display: flex; font-size: 10px; height: 35px; justify-content: center; width: 35px; }
.footer-nav-grid { border-top: 1px solid var(--line); display: grid; gap: 30px; grid-template-columns: repeat(4, 1fr); margin: 0 auto; max-width: var(--max); padding: 25px 0 30px; }
.footer-nav-grid > div { display: flex; flex-direction: column; gap: 10px; }
.footer-nav-grid a { color: #8a8a86; font-size: 11px; }
.footer-nav-grid a:hover { color: var(--cream); }
.footer-nav-title { color: var(--gold); font-size: 9px; font-weight: 900; letter-spacing: .12em; margin: 0 0 2px; text-transform: uppercase; }
.footer-bottom { border-top: 1px solid var(--line); color: #6f7578; display: flex; font-size: 10px; gap: 30px; justify-content: space-between; margin: 0 auto; max-width: var(--max); padding-top: 22px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 19px; justify-content: flex-end; }
.footer-links a:hover { color: var(--cream); }
.sr-only { height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; clip: rect(0,0,0,0); }
.reveal { animation: reveal .7s both; }
@keyframes reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1080px) { .main-nav { gap: 12px; } .main-nav a { font-size: 9px; } .text-action { font-size: 9px; } }
@media (max-width: 820px) { .site-header { height: 104px; padding: 0 5vw; } .brand { gap: 4px; } .ifn-logo { height: 93px; width: 93px; } .brand-name { font-size: 13px; max-width: none; } .menu-toggle { display: block; } .main-nav { background: rgba(9,9,9,.98); border-bottom: 1px solid var(--line); display: none; flex-direction: column; gap: 0; left: 0; padding: 15px 5vw 23px; position: absolute; right: 0; top: 104px; } .main-nav.open { display: flex; } .main-nav a { font-size: 11px; padding: 13px 0; } .header-watch { display: none; } .hero { min-height: 700px; padding: 135px 7vw 75px; } .feature-inner, .watch-layout { grid-template-columns: 1fr; } .footer-main { gap: 40px; grid-template-columns: 1fr 1fr; } .footer-brand-block { grid-column: 1 / -1; } .footer-bottom { align-items: flex-start; flex-direction: column; } .footer-links { justify-content: flex-start; } }
@media (max-width: 820px) { .hero { align-items: flex-start; flex-direction: column; gap: 14px; justify-content: center; padding: 135px 7vw 50px; } .hero-content { flex: 0 0 auto; width: 100%; } .hero-gallery { flex: 0 0 auto; max-width: 100%; width: 100%; } .hero-film-strip { flex: 1 1 auto; max-width: none; padding: 8px 3px 18px; width: auto; } }
@media (max-width: 560px) { .hero { min-height: 670px; } .hero h1 { font-size: 54px; } .section { padding-top: 58px; } .section-heading { align-items: flex-start; flex-direction: column; gap: 12px; } .section-heading p { text-align: left; } .poster-row { grid-auto-columns: 146px; } .page-wrap { padding: 128px 6vw 55px; } .page-title { padding-bottom: 40px; } .content-grid { grid-template-columns: 1fr; } .schedule-item { align-items: start; grid-template-columns: 85px 1fr; } .schedule-item .pill { grid-column: 2; justify-self: start; } .callout, .form-placeholder { padding: 28px 24px; } .footer-main { grid-template-columns: 1fr; } .footer-brand-block { grid-column: auto; } .footer-nav-grid { grid-template-columns: repeat(2, 1fr); } .signup-form { flex-direction: column; gap: 10px; } .signup-form input { min-height: 45px; } }
@media (max-width: 560px) { .hero { padding: 125px 6vw 42px; } .hero-film-card { flex-basis: 122px; } }