/* =============================================================================
   ABRUPT ENTERTAINMENT — responsive.css
   Breakpoints: 1920 / 1440 / 1280 / 1024 / 768 / 480 / 375
   Load this AFTER style.css.
   ========================================================================== */

/* --- 1920 and up: let the layout breathe ---------------------------------- */
@media (min-width:1800px){
  :root{--gut:110px}
  .wrap,.nav__inner,.feature,.hero__foot{max-width:1680px}
  .rail{height:min(50vh,664px)}
  .feature__title{font-size:min(7.6vw,12vh,140px)}
  .head h2{font-size:86px}
}

/* --- 1440 ----------------------------------------------------------------- */
@media (max-width:1500px){
  :root{--gut:56px}
  .head h2{font-size:66px}
  .fd__title{font-size:80px}
  .split{gap:64px}
  .contact{gap:64px}
}

/* --- 1280 ----------------------------------------------------------------- */
@media (max-width:1320px){
  :root{--gut:44px}
  .band{padding-block:112px}
  .split h2{font-size:50px}
  .foot__grid{gap:40px}
}

/* --- 1024 ----------------------------------------------------------------- */
@media (max-width:1120px){
  :root{--gut:36px; --nav-h:92px}
  .band{padding-block:96px}
  .head h2{font-size:54px}
  .feature__sub{font-size:22px}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px}
  .credits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .slots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fd__title{font-size:62px}
  .fd__top{gap:44px}
  .split{gap:44px}
  .foot__grid{grid-template-columns:1fr 1fr}
}

/* --- 768: tablet ---------------------------------------------------------- */
@media (max-width:900px){
  :root{--gut:28px; --nav-h:78px}

  /* nav collapses to a hamburger */
  .nav__set{display:none}
  .nav__burger{display:flex; justify-self:start}
  .nav__spacer{display:block; justify-self:end; width:42px}
  .nav__logo .nav__mark{height:38px}
  .nav__logo .nav__word{height:22px}
  .nav__logo{gap:11px}
  .nav.is-open{background:rgba(8,8,10,.98); backdrop-filter:blur(18px)}
  .nav.is-open .nav__set{
    display:flex; position:fixed; left:0; right:0; top:var(--nav-h); bottom:0;
    background:rgba(8,8,10,.98); backdrop-filter:blur(18px);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:4px; padding:0 var(--gut); animation:menuIn .45s var(--slow) both}
  .nav.is-open .nav__set--r{top:calc(var(--nav-h) + 44vh); justify-content:flex-start;
    animation-delay:.05s}
  .nav.is-open .nav__link{font-size:26px; letter-spacing:.14em; padding:10px 0;
    font-family:var(--f-display); font-weight:700; color:var(--white)}
  @keyframes menuIn{from{opacity:0; transform:translateY(-8px)}
    to{opacity:1; transform:none}}

  .band{padding-block:80px}
  .band--tight{padding-block:64px}
  .head{grid-template-columns:1fr}
  .head h2{font-size:46px}

  /* hero: touch-first, featured poster stays dominant */
  .stage{padding-bottom:44px}
  .rail{height:clamp(230px,38vh,400px)}
  .rail-btn{display:none}
  .feature{grid-template-columns:1fr; gap:18px; padding-bottom:16px}
  .feature__title{font-size:52px}
  .feature__sub{font-size:17px}
  .feature__log{margin-top:12px; font-size:15px}
  .feature__actions{padding-bottom:0; gap:10px}
  .feature__actions .btn{padding:13px 16px; font-size:10px; letter-spacing:.16em}
  .hero__foot{flex-direction:column; align-items:flex-start; gap:16px;
    padding-bottom:26px}
  .hero__foot .scroll-cue{display:none}
  .tagline{font-size:12px; letter-spacing:.24em}

  .grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px}
  .tile h3{font-size:19px}
  .tile__desc{opacity:1; transform:none}

  .logo-row{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .logo{min-height:108px; padding:20px 16px}
  .logo__word{font-size:16px}
  .split{grid-template-columns:1fr; gap:34px}
  .split__media--video{align-self:center; aspect-ratio:4/5; min-height:0}
  .split h2{font-size:40px}
  .split__media{aspect-ratio:3/2}

  .fd{padding-top:calc(var(--nav-h) + 48px)}
  .fd__top{grid-template-columns:1fr}
  .fd__poster{max-width:300px}
  .fd__title{font-size:46px}
  .fd__sub{font-size:19px}
  .fd__tag{font-size:17px}
  .stills{grid-template-columns:repeat(2,minmax(0,1fr))}

  .contact{grid-template-columns:1fr; gap:44px}
  .job{grid-template-columns:1fr; gap:10px; padding:24px 0}
  .job h3{font-size:24px}

  .modal{padding:0 16px}
  .modal__close{top:-40px}

  .cursor{display:none}

  .foot{padding-block:52px 28px}
  .foot__grid{gap:34px}
}

/* --- 480 ------------------------------------------------------------------ */
@media (max-width:560px){
  :root{--gut:20px}
  body{font-size:15px}
  .lede{font-size:17px}
  .band{padding-block:64px}
  .head h2{font-size:38px}

  .rail{height:clamp(210px,34vh,340px)}
  .feature__title{font-size:40px}
  .feature__actions{width:100%}
  .feature__actions .btn{flex:1 1 auto; justify-content:center}

  .grid{grid-template-columns:1fr; gap:26px}

  .credits{grid-template-columns:1fr}
  .slots,.slots--3{grid-template-columns:1fr}
  .stills{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .pager span.display{font-size:26px}
  .foot__base{font-size:10px}
}

/* --- 375 ------------------------------------------------------------------ */
@media (max-width:400px){
  :root{--gut:18px}
  .feature__title{font-size:34px}
  .nav__logo .nav__mark{height:32px}
  .nav__logo .nav__word{height:18px}
  .nav__logo{gap:9px}
  .tagline{font-size:11px; letter-spacing:.2em}
  .tagline i{width:26px}
}

/* --- shorter viewports: shrink the posters so the hero still fits --------- */
@media (max-height:1080px) and (min-width:901px){
  .rail{height:min(41vh,452px)}
}
@media (max-height:960px) and (min-width:901px){
  .rail{height:min(38vh,372px)}
  .feature__title{font-size:min(7vw,10.5vh,96px)}
  .feature{padding-bottom:20px}
}
@media (max-height:820px) and (min-width:901px){
  .rail{height:min(36vh,324px)}
  .feature__title{font-size:min(6.6vw,10vh,88px)}
  .feature__log{font-size:15px; margin-top:12px}
  .feature{padding-bottom:18px}
  .hero__foot{padding-bottom:22px}
}

/* --- short landscape phones ----------------------------------------------- */
@media (max-height:560px) and (orientation:landscape){
  .rail{height:52vh}
  .feature__title{font-size:34px}
  .hero__foot{display:none}
}