:root{
  --ink:#121212;
  --text:#e8e4dc;
  --muted:#8c867c;
  --soft:#b7b0a6;
  --line:#3a3734;
  --card:#2a2725;
  --nav-h:88px;
  --pad:56px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--ink);color:var(--text);font-family:'Space Mono',monospace;overflow:hidden;-webkit-font-smoothing:antialiased}
a{color:var(--text)}
a:hover{color:#fff}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--text);outline-offset:3px}

/* Nav */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:20;background:var(--ink);display:flex;align-items:center;justify-content:center;padding:0 var(--pad)}
.logo{position:absolute;left:var(--pad);font-size:13px;letter-spacing:.1em;text-decoration:none}
.menu{list-style:none;margin:0;padding:0;display:flex;gap:36px}
.menu button{background:none;border:0;border-bottom:2px solid transparent;color:var(--text);padding:10px 2px;font-size:14px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s}
.menu button:hover{color:#fff}
.menu button[aria-current="page"]{border-bottom-color:var(--text)}

/* Home */
.home{position:fixed;inset:0;overflow:hidden}
.bg{position:absolute;inset:0;background-size:cover;background-position:center right;background-repeat:no-repeat}
.home-inner{position:relative;height:100%;padding:calc(var(--nav-h) + 32px) var(--pad) 40px;display:flex;flex-direction:column;justify-content:space-between}
.spacer{height:40px}
.socials{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:12px}
.social{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:2px solid var(--text);color:var(--text);transition:color .2s,border-color .2s,transform .2s}
.social:hover{color:#fff;border-color:#fff;transform:translateY(-2px)}
.strip{display:flex;justify-content:center;align-items:center;min-height:48px;border-top:2px solid var(--text);padding-top:20px;margin-top:32px}
.namewrap{align-self:flex-end;display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:20px}
.tagline{width:0;min-width:100%;margin:0;font-size:14px;font-weight:700;letter-spacing:.06em;line-height:1.5;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.9)}
.name{margin:0;font-family:Anton,sans-serif;font-weight:400;font-size:clamp(72px,11vw,141px);line-height:.85;text-transform:uppercase}
.outline{-webkit-text-fill-color:transparent;-webkit-text-stroke:2px var(--text)}

/* Curtain pages */
.curtain{position:fixed;left:0;right:0;top:var(--nav-h);bottom:0;z-index:10;background:var(--ink);border-top:2px solid var(--text);overflow-y:auto;clip-path:inset(0 0 100% 0);pointer-events:none;transition:clip-path .75s cubic-bezier(.76,0,.24,1)}
.curtain.open{clip-path:inset(0 0 0 0);pointer-events:auto}
.curtain.fast{transition-duration:.35s;transition-timing-function:cubic-bezier(.6,0,.9,.4)}
.curtain-inner{padding:48px var(--pad) 64px;display:flex;flex-direction:column;gap:28px;max-width:1400px;margin:0 auto}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.page-title{margin:0;font-family:Anton,sans-serif;font-weight:400;font-size:clamp(56px,9vw,112px);line-height:.9;text-transform:uppercase}
.iconbtn{flex:0 0 auto;width:56px;height:56px;background:transparent;border:2px solid var(--text);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.iconbtn:hover{background:var(--text);color:var(--ink)}
.empty{margin:0;font-size:18px;color:var(--soft)}

/* Films */
.films{list-style:none;margin:0;padding:0;border-bottom:2px solid var(--line)}
.filmrow{display:flex;justify-content:space-between;gap:24px;width:100%;background:transparent;border:0;border-top:2px solid var(--line);padding:10px 0;color:var(--text);font-size:18px;text-transform:uppercase;text-align:left;cursor:pointer;transition:background .2s,padding .2s}
.filmrow:hover{background:#1c1b1a;padding-left:12px;padding-right:12px}
.filmrow .meta{color:var(--muted);text-align:right;flex:0 0 auto}
.filmrow .tag{font-size:12px;color:var(--soft);margin-left:8px}

/* Film modal */
.modal{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;padding:24px}
.modal[hidden]{display:none}
.modal-box{position:relative;width:min(900px,100%);max-height:100%;overflow-y:auto;background:var(--ink);border:2px solid var(--text);padding:40px;display:flex;gap:40px}
.modal-close{position:absolute;top:20px;right:20px;width:48px;height:48px}
.poster{flex:0 0 260px;aspect-ratio:2/3;background:var(--card);border:2px solid var(--line);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:20px}
.poster.has-img{padding:0}
.poster img{width:100%;height:100%;object-fit:cover;display:block}
.poster .card-title{font-family:Anton,sans-serif;font-size:40px;line-height:.95;text-transform:uppercase;overflow-wrap:anywhere}
.poster .card-year{font-size:13px;color:var(--muted);margin-top:10px;letter-spacing:.1em}
.film-info{flex:1 1 0;display:flex;flex-direction:column;gap:22px;padding-right:56px;min-width:0}
.film-title{margin:0;font-family:Anton,sans-serif;font-weight:400;font-size:56px;line-height:.95;text-transform:uppercase}
.facts{margin:0;font-size:15px;border-bottom:2px solid var(--line)}
.facts div{display:flex;justify-content:space-between;gap:24px;border-top:2px solid var(--line);padding:12px 0}
.facts dt{color:var(--muted);text-transform:uppercase;flex:0 0 auto}
.facts dd{margin:0;text-align:right}
.film-note{margin:0;font-size:15px;line-height:1.6;color:var(--soft)}
.film-note:empty{display:none}

/* Ads */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ad{display:flex;flex-direction:column;gap:10px}
.ad .frame{aspect-ratio:16/9;background:var(--card)}
.ad iframe,.ad video{width:100%;height:100%;border:0;display:block}
.ad span{font-size:14px;text-transform:uppercase}

/* Behind the music */
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.shot{margin:0;display:flex;flex-direction:column;gap:10px}
.shot img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;border:2px solid var(--line)}
.shot figcaption{font-size:14px;color:var(--soft)}
.shot figcaption:empty{display:none}

/* About */
.about{display:flex;gap:56px;align-items:flex-start;justify-content:space-between}
.bio{max-width:640px;display:flex;flex-direction:column;gap:20px}
.bio p{margin:0;font-size:22px;line-height:1.6}
.about img{flex:0 0 340px;width:340px;aspect-ratio:340/440;object-fit:cover;object-position:center 42%;border:2px solid var(--line);display:block}

/* Contact */
.contact{display:flex;flex-direction:column;gap:14px;font-size:22px}
.contact a{text-decoration:none;border-bottom:2px solid var(--line)}
.contact a:hover{border-color:var(--text)}
.contact .label{display:block;font-size:12px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}

/* Tablet */
@media (max-width:1024px){
  :root{--pad:32px}
  .menu{gap:22px}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  :root{--nav-h:104px}
  .nav{flex-direction:column;justify-content:center;gap:10px;padding:0}
  .logo{position:static}
  .menu{max-width:100%;overflow-x:auto;padding:0 16px;gap:22px;scrollbar-width:none}
  .menu::-webkit-scrollbar{display:none}
}
/* Phone */
@media (max-width:640px){
  :root{--pad:16px}
  .menu button{font-size:12px}
  .bg{background-position:62% center}
  .home-inner{padding-top:calc(var(--nav-h) + 20px);padding-bottom:24px}
  .curtain-inner{padding:32px var(--pad) 48px}
  .iconbtn{width:44px;height:44px}
  .filmrow{flex-direction:column;gap:4px;font-size:16px}
  .filmrow .meta{text-align:left;font-size:13px}
  .modal{padding:12px;align-items:flex-start}
  .modal-box{flex-direction:column;padding:24px;gap:24px}
  .poster{flex:none;width:60%;align-self:flex-start;padding:14px}
  .poster .card-title{font-size:26px}
  .film-info{padding-right:0}
  .film-title{font-size:40px;padding-right:56px}
  .facts div{flex-direction:column;gap:4px}
  .facts dd{text-align:left}
  .grid3,.grid4{grid-template-columns:minmax(0,1fr)}
  .about{flex-direction:column-reverse;gap:28px}
  .about img{width:100%;flex:none}
  .bio p{font-size:18px}
  .contact{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .curtain{transition-duration:.01s}
}