:root{
    --bg:#141214;
    --panel:#1c1920;
    --text:#f5f1f6;
    --muted:#b9b1bf;
    --line:rgba(245,241,246,.18);
    --accent:#d97aa6;
    --radius:22px;
  }
  
  *{box-sizing:border-box}
/* Lock the page to a fixed layout width */
body{
  min-width: 1140px; /* prevents reflow on smaller screens */
  overflow-x: auto;  /* allows horizontal scroll instead of rearranging */
}

.wrap{
  width: 1100px;     /* fixed */
  max-width: none;   /* disable shrinking */
  margin: 0 auto;
  padding: 28px 20px 60px;
}

  .topbar{
    position:sticky; top:0;
    backdrop-filter: blur(10px);
    background: rgba(20,18,20,.65);
    border-bottom:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px;
    z-index:10;
  }
  .brand{font-weight:800; letter-spacing:.6px}
  .nav{display:flex; gap:16px; color:var(--muted)}
  .nav a{padding:8px 10px; border-radius:999; hooks: 999px}
  .nav a:hover{background:rgba(245,241,246,.08); color:var(--text)}
  
  .hero{
    display:grid;
    grid-template-columns: 1.15fr .85fr;
    gap:24px;
    padding:26px;
    border:1px solid var(--line);
    border-radius: calc(var(--radius) + 10px);
    background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  }
  .eyebrow{color:var(--muted); letter-spacing:.18em; text-transform:uppercase; font-size:12px; margin:0 0 10px}
  h1{margin:0 0 10px; font-size:56px; line-height:1.0}
  .subhead{margin:0 0 16px; color:var(--muted); max-width:52ch}
  .meta{display:flex; gap:18px; flex-wrap:wrap; margin:0 0 18px; color:var(--muted)}
  .meta span{display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(245,241,246,.7)}
  .cta{display:flex; gap:12px; flex-wrap:wrap}
  .btn{
    padding:12px 16px;
    border-radius:999px;
    background: var(--accent);
    color:#1b0f17;
    font-weight:700;
  }
  .btn.ghost{
    background: transparent;
    color:var(--text);
    border:1px solid var(--line);
  }
  .btn:hover{transform: translateY(-1px)}
  .btn.ghost:hover{background:rgba(245,241,246,.08)}
  
  .hero-poster img{
    width:100%;
    border-radius: var(--radius);
    border:1px solid var(--line);
    display:block;
  }
  .caption{margin:10px 0 0; color:var(--muted); font-size:13px}
  
  .section{margin-top:26px}
  .section-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
  .section h2{margin:0; font-size:22px; letter-spacing:.02em}
  .smalllink{color:var(--muted)}
  .smalllink:hover{color:var(--text); text-decoration:underline}
  
  .grid{display:grid; gap:14px; margin-top:14px}
  .posters-preview{grid-template-columns: repeat(4, 1fr)}
  .process-preview{grid-template-columns: repeat(4, 1fr)}
  
  .card, .panel{
    border:1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255,255,255,.03);
    overflow:hidden;
  }
  .card img{width:100%; height:170px; object-fit:cover; display:block}
  .card:hover{transform: translateY(-2px)}
  .panel{padding:14px}
  .panel h3{margin:0 0 6px; font-size:16px}
  .panel p{margin:0; color:var(--muted); font-size:14px; line-height:1.5}
  
  .bio p{color:var(--muted); max-width:70ch; line-height:1.7}
  
  .footer{
    border-top:1px solid var(--line);
    color:var(--muted);
    padding:22px 20px;
    text-align:center;
  }
  
  /* Responsive */
  @media (max-width: 980px){
    .hero{grid-template-columns:1fr}
    h1{font-size:44px}
    .posters-preview{grid-template-columns: repeat(2, 1fr)}
    .process-preview{grid-template-columns: repeat(2, 1fr)}
  }
  @media (max-width: 520px){
    .posters-preview{grid-template-columns: 1fr}
    .process-preview{grid-template-columns: 1fr}
  }