:root{
  --bg:#000;
  --text:#f5f2ea;
  --muted:rgba(245,242,234,.74);
  --line:rgba(255,255,255,.28);
  --gold:#f5b63a;
  --red:#e11733;
}
*{box-sizing:border-box}
html,body{
  margin:0;width:100%;height:100%;overflow:hidden;background:#000;color:var(--text);
  font-family:"Times New Roman",Times,serif;
}
a{text-decoration:none;color:inherit}
button{font:inherit}
.stage{
  position:fixed;inset:0;width:100vw;height:100dvh;overflow:hidden;background:#000;
}
.bg,.bg-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
}
.overlay{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.64) 0%,rgba(0,0,0,.15) 45%,rgba(0,0,0,.12) 100%),
    linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.10) 38%,rgba(0,0,0,.18) 100%);
}
.nav{
  position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:28px 34px;
  font-family:Arial,Helvetica,sans-serif;
}
.nav-left{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.nav a{
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.78);transition:.25s;
}
.nav a:hover,.nav a.active{color:#fff}
.brand-mini{
  font-size:11px!important;font-weight:700;color:#fff!important;
  padding-right:26px;border-right:1px solid rgba(255,255,255,.24);
}
.film-link{
  border:1px solid rgba(255,255,255,.48);
  padding:12px 18px;font-size:10px!important;letter-spacing:.22em!important;
  background:rgba(0,0,0,.20);backdrop-filter:blur(8px);
}
.film-link:hover{border-color:#fff}
.hero-copy{
  position:absolute;left:34px;bottom:34px;z-index:10;
  max-width:min(760px,80vw);
}
.kicker{
  font-family:Arial,Helvetica,sans-serif;
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
  margin-bottom:10px;
}
.hero-title{
  margin:0;font-size:clamp(58px,8.5vw,136px);line-height:.78;font-weight:400;letter-spacing:-.045em;
  text-shadow:0 10px 40px rgba(0,0,0,.35);
}
.hero-sub{
  margin-top:20px;font-family:Arial,Helvetica,sans-serif;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.78);
}

/* Inner pages */
.page-content{
  position:absolute;left:34px;right:34px;top:108px;bottom:34px;z-index:10;
  display:grid;align-items:end;
}
.info-wrap{
  width:min(920px,76vw);
  background:linear-gradient(180deg,rgba(0,0,0,.40),rgba(0,0,0,.68));
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(9px);
  padding:28px 30px 26px;
}
.page-title{
  margin:0 0 10px;font-size:clamp(42px,5.2vw,78px);font-weight:400;letter-spacing:-.035em;
}
.page-lede{
  margin:0;color:rgba(255,255,255,.76);font-family:Arial,Helvetica,sans-serif;
  font-size:13px;line-height:1.6;max-width:760px;
}
.stats{
  margin-top:22px;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.18);
}
.stat{padding:18px 16px 0 0}
.stat-num{font-size:34px;color:var(--gold);line-height:1}
.stat-label{
  margin-top:6px;font-family:Arial,Helvetica,sans-serif;font-size:9px;line-height:1.45;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62);
}
.detail-grid{
  margin-top:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(255,255,255,.14);
}
.detail{
  background:rgba(4,4,4,.72);padding:14px 16px;
  font-family:Arial,Helvetica,sans-serif;
}
.detail b{display:block;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#fff;margin-bottom:4px}
.detail span{font-size:11px;color:rgba(255,255,255,.68)}

/* Gallery */
.gallery{
  position:absolute;left:34px;right:34px;top:96px;bottom:34px;z-index:10;
  display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(2,1fr);gap:10px;
}
.tile{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.12);cursor:pointer}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease,filter .55s ease}
.tile:hover img{transform:scale(1.025);filter:brightness(.82)}
.tile:nth-child(1){grid-column:span 5}
.tile:nth-child(2){grid-column:span 4}
.tile:nth-child(3){grid-column:span 3}
.tile:nth-child(4){grid-column:span 3}
.tile:nth-child(5){grid-column:span 5}
.tile:nth-child(6){grid-column:span 4}
.tile-label{
  position:absolute;left:12px;bottom:10px;font-family:Arial,Helvetica,sans-serif;
  font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:#fff;
  text-shadow:0 2px 12px #000;
}

/* Developer */
.developer-content{
  position:absolute;left:34px;bottom:34px;z-index:10;width:min(900px,78vw);
}
.dev-logo{width:min(620px,70vw);max-height:190px;object-fit:contain;object-position:left center;margin-bottom:18px}
.dev-copy{
  width:min(820px,76vw);
  padding:20px 22px;border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.52);backdrop-filter:blur(8px);
  font-family:Arial,Helvetica,sans-serif;color:rgba(255,255,255,.72);
  font-size:12px;line-height:1.65;
}
.dev-points{
  margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.dev-point{
  border-top:1px solid rgba(255,255,255,.22);padding-top:10px;
}
.dev-point b{
  display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:4px
}
.dev-point span{font-size:10px;color:rgba(255,255,255,.60);line-height:1.45}

/* Film modal */
.modal{
  position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.97);
  display:none;align-items:center;justify-content:center;
}
.modal.open{display:flex}
.modal video{width:100vw;height:100vh;object-fit:contain;background:#000}
.close{
  position:fixed;right:24px;top:20px;z-index:110;background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.45);color:#fff;width:44px;height:44px;border-radius:50%;
  font-family:Arial,Helvetica,sans-serif;font-size:26px;cursor:pointer;
}
.lightbox{
  position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.96);
  display:none;align-items:center;justify-content:center;padding:26px;
}
.lightbox.open{display:flex}
.lightbox img{max-width:96vw;max-height:92vh;object-fit:contain}

@media(max-width:850px){
  .nav{padding:20px;align-items:flex-start}
  .nav-left{gap:14px;max-width:78vw}
  .brand-mini{width:100%;border-right:0;padding-right:0;margin-bottom:4px}
  .film-link{padding:10px 12px}
  .hero-copy{left:20px;bottom:24px}
  .page-content{left:20px;right:20px;top:118px;bottom:24px}
  .info-wrap{width:100%;padding:20px}
  .stats{grid-template-columns:1fr 1fr}
  .detail-grid{grid-template-columns:1fr 1fr}
  .gallery{left:20px;right:20px;top:126px;bottom:20px;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr)}
  .tile:nth-child(n){grid-column:span 1}
  .developer-content{left:20px;bottom:24px;width:calc(100vw - 40px)}
  .dev-copy{width:100%}
  .dev-points{grid-template-columns:1fr}
}