/* UMBRA: Ónix, carbón y champagne. */
:root {
  --bg:#0d0f11; --surface:#171a1e; --raised:#22262b;
  --ivory:#f5f6f7; --muted:#b4bac3; --subtle:#9ba3af;
  --gold:var(--primary); --gold-hover:var(--primary-hover); --line:#373d46;
    --primary-text:#15171a;
  --canvas-rgb:13,15,17; --panel-rgb:21,24,28;
  --field-bg:#101317; --field-border:#68717f; --notice-bg:#26251f;
  --notice-text:#e2d5ba; --error:#f0b5b5; --radius:6px;
  --shadow:0 22px 65px #0006;
}
[hidden] {display:none!important}
body {font-family:var(--font);font-size:15px;background:var(--bg);color:var(--ivory)}
h1,h2 {font-family:var(--display);font-weight:700;font-style:normal;text-transform:uppercase;letter-spacing:.015em;line-height:.98}
h1 {font-size:clamp(46px,5vw,76px)}
h2 {font-size:36px}
h1 em,h2 em {font-style:normal}
h3 {font-weight:600}
.eyebrow {letter-spacing:.12em;font-size:10px;color:var(--gold)}
.button {border-radius:var(--radius);font-size:14px;font-weight:600;letter-spacing:.015em}
.button.primary,.access-card .auth-form>.button {background:var(--primary);border-color:var(--primary);color:var(--primary-text)}
.button.primary:hover,.access-card .auth-form>.button:hover {background:var(--primary-hover);border-color:var(--primary-hover)}
.button.secondary {background:var(--surface);border-color:var(--line)}
.button.secondary:hover {background:var(--raised);border-color:var(--gold)}
.button.glass {background:rgba(var(--panel-rgb),.84);border-color:#ffffff42}
.button.is-active {border-color:var(--gold);color:var(--gold)}
input,select,textarea,.auth-form input {background:var(--field-bg);border-color:var(--field-border)}
input::placeholder,textarea::placeholder {color:var(--subtle)}
input[type=checkbox] {accent-color:var(--primary)}
input:focus,select:focus,textarea:focus,:focus-visible {outline-color:var(--gold)}
small,.field-help,.muted {color:var(--muted)}
.notice {background:var(--notice-bg);border-color:var(--line);color:var(--notice-text)}
.notice.error {color:var(--error);background:#421b2460;border-color:#ac6470}
.notice.success {color:var(--ivory);background:rgba(var(--accent-rgb),.09);border-color:var(--gold)}
.state-tag,.current-session,.choice-pill:has(input:checked) {color:var(--gold);background:rgba(var(--accent-rgb),.08);border-color:var(--gold)}
.main-nav>a,.section-top>.text-link,.genre-pills>a {color:var(--muted)}
.main-nav>a.active,.main-nav>a:hover {color:var(--ivory)}
.main-nav>a.active:after {height:3px;background:var(--primary)}
.site-header {height:78px;padding-inline:42px;background:rgba(var(--canvas-rgb),.98);border-color:var(--line);gap:24px}
.brand,.access-header .brand {font-family:var(--display);font-size:31px;font-weight:700;letter-spacing:.08em;gap:7px}
.brand-symbol,.access-header .brand-symbol {font-family:var(--font);font-size:24px;color:var(--gold)}
.brand-dot {color:var(--gold);margin-left:-5px}
.brand.small {font-size:23px}
.header-actions {gap:12px}
.site-footer {margin-top:54px;padding:28px 42px}
.site-footer p {font:12px/1.5 var(--font);color:var(--muted)}
/* Wider backdrops, condensed title treatment and larger posters. */
.hero {height:clamp(535px,73svh,690px)}
.hero-content {padding-top:78px}
.hero h1 {max-width:780px;font-size:clamp(70px,8vw,116px);font-weight:700;letter-spacing:.005em;line-height:.92;margin-bottom:24px;text-wrap:balance}
.hero-shade {
  background:linear-gradient(90deg,rgba(var(--canvas-rgb),.97),rgba(var(--canvas-rgb),.71) 34%,rgba(var(--canvas-rgb),.06) 76%),
    linear-gradient(0deg,var(--bg),rgba(var(--canvas-rgb),0) 48%,rgba(var(--canvas-rgb),.12));
}
.hero-image {object-position:center 40%}
.hero-meta {font-size:13px;color:#eef0f2;gap:12px;margin-bottom:17px}
.feature-label {font-size:10px;font-weight:700;letter-spacing:.15em}
.hero-tagline {font:400 15px/1.6 var(--font);color:#e0e3e8;max-width:460px;margin-bottom:29px}
.hero-actions .button {min-height:49px;padding:12px 22px}
.hero-caption {font-size:10px;color:var(--muted)}
.home-shell {padding-top:30px}
.discovery-intro {margin-bottom:22px}
.discovery-intro h2 {font-size:32px}
.discovery-intro .eyebrow {display:none}
.search-box {background:var(--surface)}
.genre-pills {gap:8px;margin-bottom:36px}
.genre-pills>a {border-color:var(--line);border-radius:5px;padding:8px 14px}
.genre-pills>a.selected {background:rgba(var(--accent-rgb),.1);border-color:var(--gold);color:var(--gold)}
.catalog-section {margin-bottom:46px}
.section-top {margin-bottom:20px;align-items:center}
.section-top h2 {font-size:34px}
.section-top .eyebrow {font-size:9px;letter-spacing:.1em;margin-bottom:7px}
.film-row {grid-auto-columns:calc((100% - 80px)/5.35);gap:18px;padding-bottom:16px;scrollbar-color:var(--line) transparent}
.poster-link {border-radius:6px;background:var(--raised);border:1px solid #ffffff18;box-shadow:0 8px 24px #0003}
.poster-link:hover {border-color:var(--gold)}
.poster-title {font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:33px}
.poster-badge {left:10px;bottom:10px;transform:none;font:600 9px/1.3 var(--font);padding:5px 7px;letter-spacing:.08em;background:rgba(var(--canvas-rgb),.94);color:var(--ivory);border:1px solid #ffffff3a;border-radius:3px}


.card-caption {padding-top:12px;align-items:flex-start}
.card-caption h3 {font:600 14px/1.35 var(--font);margin-bottom:6px}
.card-caption p {font-size:11px;line-height:1.5}
.rank {font:700 52px/.9 var(--display);letter-spacing:.01em;color:var(--gold);opacity:.8}
.collection-card {border-color:var(--line)}
.collection-card h3 {font-family:var(--display);font-size:35px;font-weight:700;text-transform:uppercase}
.collection-card:after {background:linear-gradient(0deg,var(--bg),rgba(var(--canvas-rgb),.3))}
.collection-card .eyebrow,.collection-card>div>span:last-child {color:var(--ivory)}
.page-heading {padding:38px 0 24px}
.page-heading h1 {margin-bottom:12px}
.page-heading>p:last-child {font-size:14px}
.active-filters>a {background:rgba(var(--accent-rgb),.09);border-color:var(--line);color:var(--gold)}
.suggestions li[aria-selected=true],.suggestions a:hover {background:var(--raised)}
.empty h2,.empty h3 {font-family:var(--display);font-weight:600;text-transform:uppercase}
/* Information remains available, styled as a film detail page. */
.detail-hero {min-height:560px}
.detail-backdrop {opacity:.8}
.detail-shade {background:linear-gradient(0deg,var(--bg),rgba(var(--canvas-rgb),.55) 70%),linear-gradient(90deg,rgba(var(--canvas-rgb),.82),rgba(var(--canvas-rgb),.06))}
.detail-intro {grid-template-columns:225px minmax(0,1fr);gap:36px}
.detail-title h1 {font-size:clamp(48px,5.7vw,88px);line-height:.96;font-weight:700;text-wrap:balance}
.detail-title .feature-label {margin-bottom:16px}
.original-title {font:400 14px/1.5 var(--font);color:var(--muted)}
.detail-tagline {font:400 15px/1.6 var(--font);color:var(--muted);margin-bottom:24px}
.metadata-line {font-size:12px;color:var(--ivory);margin:18px 0}
.synopsis {font:400 15px/1.75 var(--font);color:var(--muted);max-width:720px}
.text-section h2 {font-size:32px;font-weight:600;margin-bottom:19px}
.people-list {gap:14px}
.people-list>a {font-size:13px;padding-bottom:14px}
.person-monogram {font:600 22px/1 var(--display);background:var(--raised);color:var(--gold);border-radius:6px}
.detail-actions .button {font-size:12px;min-height:45px}
.rating-box,.version-panel,.profile-card {background:var(--surface);border-color:var(--line)}
.rating-box strong,.resolution {font-family:var(--display);font-style:normal;font-weight:600}
.manual-rating>strong {font-family:var(--display)}
.library-tabs>a.selected {border-color:var(--primary);color:var(--ivory)}
.library-tabs>a>span {background:var(--raised);color:var(--muted)}
.library-monogram {color:var(--gold)}
.profile-popover,.account-card {background:var(--surface);border-color:var(--line)}
.profile-popover nav a:hover,.profile-popover nav button:hover {background:var(--raised)}
.account-portrait,.avatar {background:var(--raised);border-color:var(--line);color:var(--gold)}
.account-card h2 {font-family:var(--font);font-size:21px;text-transform:none;font-weight:600}
.session-title h3 {font-weight:600}
.session-device-icon {background:var(--raised);color:var(--gold);border-color:var(--line)}
.session-dates dd {color:var(--ivory)}
.form-section h2 {font-size:29px}
.options-heading h1 {font-size:clamp(40px,4vw,60px)}
/* Direct access: the form is the focal point, without decorative slogans. */
.auth-page {--access-paper:var(--ivory);--access-dim:var(--muted);--access-metal:var(--gold);background:var(--bg)}
.access-header {padding:22px 4vw}
.access-header__actions {gap:0}
.access-world {background:var(--bg)}
.cinema-wall {opacity:.74;filter:blur(4px) saturate(.8)}
.cinema-frame {background:var(--raised);border-color:#ffffff1c}
.frame-edge {color:#ffffffb3}
.cinema-vignette {background:linear-gradient(180deg,rgba(var(--canvas-rgb),.72),rgba(var(--canvas-rgb),.14) 30%,rgba(var(--canvas-rgb),.2) 72%,rgba(var(--canvas-rgb),.8)),radial-gradient(ellipse at 50% 50%,transparent 10%,rgba(var(--canvas-rgb),.4) 95%)}
.aperture-halo {background:radial-gradient(ellipse at 70% 35%,rgba(var(--accent-rgb),.08),transparent 50%)}
.access-spotlight {background:radial-gradient(280px circle at var(--light-x,50%) var(--light-y,50%),rgba(var(--accent-rgb),.18),rgba(var(--accent-rgb),.04) 40%,transparent 75%)}
.access-section {padding:92px 22px 28px}
.access-card {max-width:440px;padding:31px 36px;background:rgba(var(--panel-rgb),.96);border:1px solid var(--line);border-top:3px solid var(--primary);border-radius:8px;box-shadow:0 25px 90px #0009;backdrop-filter:blur(20px)}
.access-card:before {display:none}
.access-tabs {margin-bottom:26px;border-color:var(--line)}
.access-tabs a {font-size:12px;color:var(--muted);font-weight:500}
.access-tabs a[aria-current] {color:var(--ivory)}
.access-tabs a:after {background:var(--primary);height:2px}
.access-card h2 {font-family:var(--display);font-weight:700;font-style:normal;font-size:54px;line-height:.98;letter-spacing:.01em;text-transform:uppercase;text-align:left;margin:0 0 13px;text-wrap:balance}
.access-description {text-align:left;font-size:13px;line-height:1.6;margin:0 0 25px;color:var(--muted)}
.access-card .auth-form .field,.access-card .password-label {color:var(--ivory);font-size:12px;font-weight:500}
.access-card .auth-form input:not([type=checkbox]) {min-height:52px;border-color:var(--field-border);background:var(--field-bg);border-radius:5px}
.access-card .auth-form input::placeholder {color:var(--subtle)}
.access-card .auth-form input:hover {border-color:var(--gold)}
.access-card .auth-form input:focus {background:var(--field-bg);border-color:var(--gold);outline-color:var(--gold);box-shadow:none}
.access-card .password-label a,.access-extra a {color:var(--gold)}
.access-card .access-terms {color:var(--muted);font-weight:400}
.access-card .access-terms input[type=checkbox] {accent-color:var(--primary)}
.access-card .auth-form>.button {font-size:14px;font-weight:600;border-radius:5px;height:52px;min-height:52px;margin-top:4px}
.access-extra {color:var(--muted);font-size:12px;margin-top:22px}
.access-extra a {text-decoration-color:currentColor}
.access-extra a:hover,.access-footer a:hover {color:var(--ivory)}
.access-card .password-input {margin-bottom:22px}
.access-footer {margin-top:24px;gap:0;color:var(--muted)}
.access-footer>div {font-size:11px;gap:26px}
.access-legal-dialog,.access-legal-toolbar {background:var(--surface);border-color:var(--line);color:var(--ivory)}
.access-dialog-close {border-color:var(--line);color:var(--ivory);background:var(--raised)}
.access-legal-content h1 {font-size:40px}
.access-legal-content h2 {font-size:28px}
.recovery-flyout {color:var(--primary-text)}
.legal-copy p {font-size:14px;line-height:1.8}
@media(min-width:1500px) {
  .page-shell {padding-inline:60px}
  .film-row {grid-auto-columns:calc((100% - 100px)/6)}
}
@media(max-width:1280px) and (min-width:761px) {
  .site-header {padding-inline:28px;gap:18px}
  .main-nav {gap:18px}
  .main-nav>a {font-size:13px}
  .header-actions {gap:6px}
  .hero-content {padding-top:75px}
}
@media(max-width:1000px) {
  .film-row {grid-auto-columns:calc((100% - 54px)/4.2)}
  .detail-intro {grid-template-columns:180px minmax(0,1fr);gap:28px}
  .detail-title h1 {font-size:66px}
}
@media(max-width:900px) and (min-width:761px) {
  .site-header {height:auto;min-height:76px;flex-wrap:wrap;gap:0;padding-top:14px}
  .site-header>.brand,.site-header>.header-actions {margin-bottom:12px}
  .main-nav {order:3;width:100%;height:44px;justify-content:center;gap:29px}
  .main-nav>a.active:after {bottom:4px}
}
@media(max-width:760px) {
  .site-header {height:auto;min-height:74px;padding:16px 22px 0;gap:0}
  .site-header>.brand {font-size:27px;margin-bottom:15px}
  .header-actions {gap:5px}
  .main-nav {gap:23px}
  .hero {height:565px}
  .hero-content {padding:67px 24px 0}
  .hero h1 {font-size:clamp(65px,12vw,88px);max-width:650px;line-height:.94;margin-bottom:24px}
  .hero-tagline {font-size:14px;max-width:330px;line-height:1.5}
  .hero-meta {flex-wrap:wrap;font-size:11px;gap:9px}
  .hero-shade {background:linear-gradient(90deg,rgba(var(--canvas-rgb),.84),rgba(var(--canvas-rgb),.2)),linear-gradient(0deg,var(--bg),rgba(var(--canvas-rgb),0) 80%)}
  .hero-actions .button {font-size:12px;min-height:46px;padding:12px 15px}
  .home-shell {padding-top:28px}
  .discovery-intro h2,.section-top h2 {font-size:30px}
  .genre-pills {margin-bottom:25px}
  .film-row {grid-auto-columns:calc((100% - 28px)/2.4);gap:14px}
  .catalog-section {margin-bottom:32px}
  .card-caption h3 {font-size:13px}
  .rank {font-size:42px}
  .page-heading h1 {font-size:49px}
  .detail-intro {grid-template-columns:100px minmax(0,1fr);gap:20px}
  .detail-title h1 {font-size:clamp(38px,7.5vw,56px)}
  .detail-tagline {font-size:13px}
  .original-title {font-size:12px}
  .detail-actions {margin-left:-120px}
  .metadata-line {font-size:11px}
  .synopsis {font-size:14px;line-height:1.75}
  .text-section h2,.form-section h2 {font-size:29px}
  .site-footer {padding-inline:22px;gap:18px}
  .site-footer p {font-size:11px}
  .access-header {padding:18px 22px}
  .access-header .brand {font-size:28px}
  .access-card {padding:29px 29px;max-width:430px;backdrop-filter:none}
  .access-card h2 {font-size:51px}
  .access-section {padding:90px 18px 25px;justify-content:center}
  .access-description {font-size:13px}
  .access-card .auth-form input:not([type=checkbox]) {font-size:16px}
}
@media(max-width:380px) {
  .site-header {padding-inline:15px}
  .site-header>.brand {font-size:24px;gap:5px}
  .header-actions {gap:3px}
  .header-actions>.icon-button {width:33px}
  .hero h1 {font-size:60px}
  .access-card {padding:26px 24px}
  .access-card h2 {font-size:47px}
  .detail-intro {grid-template-columns:85px minmax(0,1fr);gap:17px}
  .detail-actions {margin-left:-102px}
}
@media(max-height:720px) {
  .access-section {padding-top:84px;justify-content:flex-start}
  .access-card {padding-top:24px;padding-bottom:24px}
  .access-card h2 {font-size:47px}
  .access-description {display:block;margin-bottom:20px}
}
@media(prefers-reduced-motion:reduce) {
  .poster-link {transition:none}
}
@media(forced-colors:active) {
  .access-card,.button,.poster-link {border-color:CanvasText;box-shadow:none}
  .access-card {background:Canvas;color:CanvasText}
}

.button.primary:is(:disabled,[aria-disabled="true"]):hover,.access-card .auth-form>.button:is(:disabled,[aria-disabled="true"]):hover{background:var(--primary);border-color:var(--primary);color:var(--primary-text)}
.button.secondary:is(:disabled,[aria-disabled="true"]):hover{background:var(--surface);border-color:var(--line)}