/* =========================================================
   4DK SCREEN — TV / MOVIES
   Cinematic editorial identity
   ========================================================= */

:root{
  --screen-black:#09090a;
  --screen-charcoal:#121214;
  --screen-red:#b71f2a;
  --screen-gold:#d7a64a;
  --screen-cream:#eee5d7;
  --screen-blue:#24496c;
  --screen-line:#353235;
}

.screen-page{
  background:#0c0b0c;
  color:#f3eee6;
}

.screen-topline{
  background:#060606;
}
.screen-topline strong{color:#e54b42}

.screen-masthead{
  background:rgba(10,9,10,.97);
  border-color:#2c292b;
}
.screen-masthead .brand,
.screen-masthead .nav a,
.screen-masthead .menu-btn{
  color:#f3eee6;
}
.screen-masthead .brand-mark{
  background:#b71f2a;
}
.screen-masthead .mobile-nav{
  background:#0d0c0d;
  border-color:#2c292b;
}
.screen-masthead .mobile-nav a{
  color:#f3eee6;
}

/* HERO */
.screen-hero{
  position:relative;
  overflow:hidden;
  min-height:720px;
  border-bottom:1px solid #312e30;
  background:
    linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.6)),
    radial-gradient(circle at 75% 18%,rgba(183,31,42,.28),transparent 21rem),
    radial-gradient(circle at 15% 82%,rgba(215,166,74,.09),transparent 22rem),
    #0a090a;
}
.screen-hero:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.14;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg,transparent 0 25px,rgba(255,255,255,.04) 26px 27px),
    repeating-linear-gradient(90deg,transparent 0 52px,rgba(255,255,255,.035) 53px 54px);
}
.projector-glow{
  position:absolute;
  width:760px;
  height:760px;
  right:-310px;
  top:-280px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,225,169,.17),rgba(215,166,74,.04) 42%,transparent 68%);
  filter:blur(3px);
}
.screen-hero-grid{
  position:relative;
  z-index:2;
  min-height:720px;
  display:grid;
  grid-template-columns:1fr .85fr;
  gap:34px;
  align-items:center;
  padding-top:48px;
  padding-bottom:52px;
}
.screen-kicker,
.screen-eyebrow{
  display:block;
  color:#dd5549;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.screen-hero h1{
  margin:12px 0 18px;
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:clamp(72px,9vw,126px);
  line-height:.78;
  letter-spacing:-.018em;
}
.screen-hero-copy>p{
  max-width:620px;
  margin:0;
  color:#bbb3aa;
  font:18px/1.45 Georgia,'Times New Roman',serif;
}
.screen-nav-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:25px;
}
.screen-nav-pills a{
  padding:8px 11px;
  border:1px solid #494447;
  border-radius:999px;
  color:#d9d1c8;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.screen-nav-pills a:hover{
  border-color:#b71f2a;
  color:#fff;
}

.screen-hero-board{
  min-height:560px;
  border:1px solid #3b3639;
  background:#101012;
  box-shadow:0 30px 70px rgba(0,0,0,.38);
}
.screen-marquee{
  min-height:88px;
  padding:17px 18px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  border-bottom:1px solid #3b3639;
  background:
    radial-gradient(circle at 50% 50%,rgba(215,166,74,.13),transparent 13rem),
    #151315;
}
.screen-marquee span,
.screen-marquee small{
  font-size:7px;
  font-weight:1000;
  letter-spacing:.14em;
  color:#877f79;
}
.screen-marquee small{text-align:right}
.screen-marquee strong{
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:26px;
  letter-spacing:.03em;
}
.screen-poster-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:#3b3639;
}
.screen-poster{
  min-height:235px;
  padding:17px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  position:relative;
  overflow:hidden;
}
.screen-poster:after{
  position:absolute;
  right:-12px;
  top:-16px;
  font:1000 110px/.9 Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  color:#fff;
  opacity:.035;
}
.screen-poster:nth-child(1):after{content:"HIT?"}
.screen-poster:nth-child(2):after{content:"OLD"}
.screen-poster:nth-child(3):after{content:"RW"}
.screen-poster:nth-child(4):after{content:"VS"}
.screen-poster.red{background:linear-gradient(145deg,#5d1118,#171113 72%)}
.screen-poster.gold{background:linear-gradient(145deg,#6e5226,#171411 72%)}
.screen-poster.blue{background:linear-gradient(145deg,#173653,#111417 72%)}
.screen-poster.cream{background:linear-gradient(145deg,#4b4339,#161413 72%)}
.screen-poster span,
.screen-poster strong,
.screen-poster small{
  position:relative;
  z-index:2;
}
.screen-poster span{
  color:#c9c0b8;
  font-size:8px;
  font-weight:1000;
}
.screen-poster strong{
  margin:5px 0 8px;
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:35px;
  line-height:.83;
}
.screen-poster small{
  color:#918982;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.09em;
}

/* CATEGORY STRIP */
.screen-strip{
  overflow:hidden;
  border-bottom:1px solid #312e30;
  background:#151315;
}
.screen-strip .shell{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  overflow:auto;
  white-space:nowrap;
}
.screen-strip span{
  color:#aea69f;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.12em;
}
.screen-strip i{
  color:#b71f2a;
  font-style:normal;
}

/* SHARED SECTION */
.screen-section{
  padding:62px 0;
  border-bottom:1px solid #302d2f;
}
.screen-section-head{
  display:flex;
  justify-content:space-between;
  gap:28px;
  align-items:end;
  margin-bottom:27px;
}
.screen-section-head h2{
  margin:5px 0 0;
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:58px;
  line-height:.85;
}
.screen-section-head>p{
  max-width:360px;
  margin:0;
  color:#706a66;
  font-size:12px;
  line-height:1.45;
}
.screen-section-head.inverse h2{color:#f1eae2}
.screen-section-head.inverse>p{color:#8f8983}

/* NOW SHOWING */
.now-showing{
  color:#191718;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.016) 0 1px,transparent 1px 5px),
    #eee7dc;
}
.now-showing-grid{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:18px;
}
.screen-lead-card{
  border:1px solid #cfc4b7;
  background:#f7f1e7;
}
.screen-lead-art{
  position:relative;
  overflow:hidden;
  min-height:430px;
  padding:27px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  color:#fff;
  background:
    radial-gradient(circle at 75% 16%,rgba(215,166,74,.22),transparent 12rem),
    linear-gradient(145deg,#76151e,#131114 70%);
}
.screen-lead-art:before{
  content:"";
  position:absolute;
  left:27px;
  top:27px;
  right:27px;
  bottom:27px;
  border:1px solid rgba(255,255,255,.13);
}
.film-frame-number{
  position:absolute;
  right:19px;
  top:4px;
  color:#fff;
  opacity:.04;
  font:1000 160px/1 Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
}
.lead-category{
  position:relative;
  z-index:2;
  color:#e8ae65;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.14em;
}
.screen-lead-art strong{
  position:relative;
  z-index:2;
  margin:8px 0 11px;
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:58px;
  line-height:.82;
}
.screen-lead-art small{
  position:relative;
  z-index:2;
  color:#b8afa8;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.1em;
}
.screen-lead-copy{
  padding:22px;
}
.screen-lead-copy>span{
  color:#b71f2a;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.13em;
}
.screen-lead-copy h3{
  margin:7px 0 8px;
  font:700 31px/1 Georgia,'Times New Roman',serif;
}
.screen-lead-copy p{
  margin:0;
  color:#6f6862;
  font-size:12px;
  line-height:1.45;
}
.screen-lead-copy b{
  display:inline-block;
  margin-top:15px;
  color:#b71f2a;
  font-size:8px;
  letter-spacing:.1em;
}
.screen-side-stack{
  display:grid;
  gap:12px;
}
.screen-mini-card{
  min-height:205px;
  padding:21px;
  border-top:5px solid #b71f2a;
  background:#faf5ed;
}
.screen-mini-card.dark{
  color:#fff;
  border-color:#314a61;
  background:#171719;
}
.screen-mini-card.gold{
  border-color:#d7a64a;
  background:#e4d5b8;
}
.mini-code{
  color:#b71f2a;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.13em;
}
.screen-mini-card.dark .mini-code{color:#77a5ca}
.screen-mini-card h3{
  margin:8px 0;
  font:700 27px/1 Georgia,serif;
}
.screen-mini-card p{
  margin:0;
  color:#726b65;
  font-size:11px;
  line-height:1.45;
}
.screen-mini-card.dark p{color:#aaa39c}
.screen-mini-card small{
  display:block;
  margin-top:17px;
  color:#8e8780;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.1em;
}

/* SCREENING ROOM */
.screening-room{
  background:#0d0c0d;
}
.screen-desk-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.desk-card{
  min-height:280px;
  padding:21px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid #343034;
  background:
    radial-gradient(circle at 83% 15%,rgba(183,31,42,.17),transparent 9rem),
    #151416;
}
.desk-card:nth-child(2),
.desk-card:nth-child(5){
  background:
    radial-gradient(circle at 83% 15%,rgba(215,166,74,.14),transparent 9rem),
    #151416;
}
.desk-card:nth-child(4){
  background:
    radial-gradient(circle at 83% 15%,rgba(42,79,111,.24),transparent 9rem),
    #151416;
}
.desk-card span{
  color:#d55349;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.13em;
}
.desk-card strong{
  margin:8px 0 9px;
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:36px;
  line-height:.84;
}
.desk-card p{
  margin:0;
  color:#938c85;
  font-size:11px;
  line-height:1.45;
}

/* FRANCHISE LIST */
.franchises-section{
  color:#171515;
  background:#e9e1d5;
}
.franchise-list{
  border-top:4px solid #171515;
}
.franchise-row{
  display:grid;
  grid-template-columns:95px 1fr 130px;
  gap:20px;
  align-items:center;
  padding:21px 0;
  border-bottom:1px solid #c9bfb2;
}
.franchise-num{
  color:#b7aea3;
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:48px;
}
.franchise-row span{
  color:#b71f2a;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.13em;
}
.franchise-row h3{
  margin:4px 0;
  font:700 29px/1 Georgia,serif;
}
.franchise-row p{
  margin:0;
  color:#706962;
  font-size:11px;
}
.franchise-row>b{
  justify-self:end;
  color:#6c655e;
  font-size:8px;
  letter-spacing:.11em;
}

/* VAULT / STARTER STORIES */
.vault-board{
  background:
    radial-gradient(circle at 84% 15%,rgba(183,31,42,.18),transparent 20rem),
    #111013;
}
.vault-head{
  max-width:750px;
  margin-bottom:26px;
}
.vault-head>span{
  color:#d55349;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.14em;
}
.vault-head h2{
  margin:6px 0 9px;
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:58px;
  line-height:.86;
}
.vault-head p{
  margin:0;
  color:#98918a;
  font-size:12px;
  line-height:1.45;
}
.vault-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.vault-card{
  min-height:270px;
  padding:19px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid #393438;
  background:
    linear-gradient(180deg,transparent,rgba(0,0,0,.48)),
    linear-gradient(145deg,#452027,#151316 70%);
}
.vault-card:nth-child(2),
.vault-card:nth-child(5){
  background:
    linear-gradient(180deg,transparent,rgba(0,0,0,.48)),
    linear-gradient(145deg,#263e51,#151316 70%);
}
.vault-card:nth-child(3),
.vault-card:nth-child(6){
  background:
    linear-gradient(180deg,transparent,rgba(0,0,0,.48)),
    linear-gradient(145deg,#55431f,#151316 70%);
}
.vault-card span{
  color:#d9a35f;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.13em;
}
.vault-card strong{
  margin:7px 0;
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:39px;
  line-height:.85;
}
.vault-card small{
  color:#8d8680;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.1em;
}

/* WATCHLIST */
.watchlist{
  color:#171515;
  background:#e8dfd2;
}
.watchlist-grid{
  display:grid;
  grid-template-columns:1fr .8fr;
  gap:34px;
  align-items:center;
}
.watchlist h2{
  margin:6px 0 10px;
  max-width:630px;
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:62px;
  line-height:.85;
}
.watchlist p{
  margin:0;
  max-width:540px;
  color:#706860;
  font:15px/1.45 Georgia,serif;
}
.ticket-stack{
  display:grid;
  gap:10px;
}
.screen-ticket{
  position:relative;
  min-height:104px;
  padding:17px 21px;
  display:grid;
  grid-template-columns:90px 1fr auto;
  align-items:center;
  gap:16px;
  border:1px dashed #a39788;
  background:#f5ead8;
}
.screen-ticket:before,
.screen-ticket:after{
  content:"";
  position:absolute;
  width:22px;height:22px;
  top:50%;
  margin-top:-11px;
  border-radius:50%;
  background:#e8dfd2;
}
.screen-ticket:before{left:-12px}
.screen-ticket:after{right:-12px}
.screen-ticket span{
  color:#b71f2a;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.12em;
}
.screen-ticket strong{
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:26px;
}
.screen-ticket small{
  color:#7b746c;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.1em;
}

/* MOBILE */
@media(max-width:950px){
  .screen-hero-grid{grid-template-columns:1fr}
  .screen-hero-board{min-height:auto}
  .now-showing-grid{grid-template-columns:1fr}
  .screen-desk-grid{grid-template-columns:repeat(2,1fr)}
  .vault-grid{grid-template-columns:repeat(2,1fr)}
  .watchlist-grid{grid-template-columns:1fr}
}

@media(max-width:620px){
  .screen-hero{min-height:auto}
  .screen-hero-grid{
    min-height:auto;
    padding-top:34px;
    padding-bottom:36px;
  }
  .screen-hero h1{
    font-size:61px;
  }
  .screen-hero-copy>p{font-size:15px}
  .screen-hero-board{margin-top:8px}
  .screen-marquee{
    grid-template-columns:1fr auto;
  }
  .screen-marquee small{display:none}
  .screen-poster{min-height:190px;padding:13px}
  .screen-poster strong{font-size:29px}
  .screen-section{padding:46px 0}
  .screen-section-head{
    display:block;
  }
  .screen-section-head h2,
  .vault-head h2{
    font-size:44px;
  }
  .screen-section-head>p{margin-top:10px}
  .screen-lead-art{min-height:330px;padding:20px}
  .screen-lead-art:before{inset:20px}
  .screen-lead-art strong{font-size:47px}
  .screen-desk-grid,
  .vault-grid{
    grid-template-columns:1fr;
  }
  .desk-card{min-height:220px}
  .franchise-row{
    grid-template-columns:55px 1fr;
    gap:12px;
  }
  .franchise-row>b{
    grid-column:2;
    justify-self:start;
  }
  .franchise-num{font-size:38px}
  .watchlist h2{font-size:48px}
  .screen-ticket{
    grid-template-columns:75px 1fr;
  }
  .screen-ticket small{
    grid-column:2;
  }
}