/* ============================================================
   NITE FLIGHTS CINEMA SOCIETY
   Neo-brutalist. Near-black ground, bone rules, one hot accent.
   Every image sits in an academy gate (1.375:1).
   Loaded by index.html and benny.html.
   ============================================================ */

:root{
  --bg:#0a0a0a;
  --ink:#ece7de;
  --accent:#ff3b1f;
  --ink-2:rgba(236,231,222,.72);

  --black:'Archivo Black',Impact,'Haettenschweiler',sans-serif;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --bd:3px;
  --pad:clamp(18px,3.2vw,34px);
  --academy:11 / 8;              /* 1.375:1 */
}

*{margin:0;padding:0;box-sizing:border-box}

html{
  background:var(--bg);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit}
img{display:block;max-width:100%}

::selection{background:var(--accent);color:var(--ink)}
:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}

.skip{
  position:absolute;left:-9999px;
  background:var(--accent);color:var(--ink);
  font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  padding:14px 20px;z-index:300;
}
.skip:focus{left:0;top:0}


/* ============================================================
   TOPBAR
   ============================================================ */

.nav{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:stretch;justify-content:space-between;
  background:var(--bg);
  border-bottom:var(--bd) solid var(--ink);
}
.nav .mark{
  font-family:var(--black);
  font-size:clamp(.8rem,1.5vw,1.05rem);
  letter-spacing:.02em;text-transform:uppercase;
  padding:18px var(--pad);
  border-right:var(--bd) solid var(--ink);
  text-decoration:none;white-space:nowrap;
  display:flex;align-items:center;
}
.nav ul{display:flex;list-style:none}
.nav ul a{
  display:flex;align-items:center;
  height:100%;
  padding:0 clamp(14px,2.2vw,28px);
  border-left:var(--bd) solid var(--ink);
  font-weight:700;font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;
  transition:background .1s,color .1s;
}
.nav ul a:hover,.nav ul a:focus-visible{background:var(--ink);color:var(--bg)}
.nav ul a.here{background:var(--accent);color:var(--ink)}

@media(max-width:640px){
  .nav{flex-direction:column}
  .nav .mark{
    border-right:none;border-bottom:var(--bd) solid var(--ink);
    padding:15px var(--pad);font-size:.8rem;
  }
  .nav ul{width:100%}
  .nav ul li{flex:1}
  .nav ul a{
    justify-content:center;padding:13px 6px;font-size:.62rem;letter-spacing:.08em;
  }
  .nav ul li:first-child a{border-left:none}
}


/* ============================================================
   HERO
   ============================================================ */

.hero{border-bottom:var(--bd) solid var(--ink)}

.hero h1{
  font-family:var(--black);
  font-size:clamp(3.2rem,15.5vw,13rem);
  line-height:.82;
  letter-spacing:-.03em;
  text-transform:uppercase;
  padding:clamp(38px,7vw,80px) var(--pad) 0;
}
.hero h1 .stroke{
  -webkit-text-stroke:clamp(2px,.32vw,4px) var(--ink);
  color:transparent;
}
.hero h1 .hot{color:var(--accent)}

.hero .label{
  display:block;
  padding:0 var(--pad) clamp(20px,3vw,34px);
  padding-top:clamp(30px,4.5vw,52px);
  font-weight:700;font-size:.74rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);
}

.meta{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:var(--bd) solid var(--ink);
  margin-top:clamp(34px,5vw,58px);
}
.meta > div{padding:20px var(--pad)}
.meta > div + div{border-left:var(--bd) solid var(--ink)}
.meta dt{
  font-weight:700;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:9px;
}
.meta dd{
  font-weight:700;font-size:.76rem;letter-spacing:.08em;
  text-transform:uppercase;line-height:1.55;
}
@media(max-width:760px){
  .meta{grid-template-columns:1fr}
  .meta > div + div{border-left:none;border-top:var(--bd) solid var(--ink)}
}


/* ============================================================
   SECTIONS
   ============================================================ */

.section{border-bottom:var(--bd) solid var(--ink)}
.section:last-of-type{border-bottom:none}

.sec-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:18px;
  padding:20px var(--pad);
  background:var(--ink);color:var(--bg);
  border-bottom:var(--bd) solid var(--ink);
}
.sec-head h2{
  font-family:var(--black);
  font-size:clamp(1.15rem,3vw,1.9rem);
  letter-spacing:0;text-transform:uppercase;line-height:1;
}
.sec-head .idx{
  font-weight:700;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;white-space:nowrap;
}


/* ============================================================
   SPLIT — statement | copy
   ============================================================ */

.split{display:grid;grid-template-columns:1fr 1fr}
.split .statement{
  padding:clamp(34px,5vw,62px) var(--pad);
  font-family:var(--black);
  font-size:clamp(1.5rem,3.6vw,2.9rem);
  line-height:1.06;text-transform:uppercase;
  border-right:var(--bd) solid var(--ink);
}
.split .statement .hot{color:var(--accent)}
.split .copy{padding:clamp(34px,5vw,62px) var(--pad)}
.copy{font-size:.95rem;line-height:1.75;color:var(--ink-2)}
.copy p + p{margin-top:18px}

@media(max-width:820px){
  .split{grid-template-columns:1fr}
  .split .statement{border-right:none;border-bottom:var(--bd) solid var(--ink)}
  .split .copy + .copy{border-top:var(--bd) solid var(--ink)}
}


/* ============================================================
   THE GATE — academy 1.375:1
   ============================================================ */

.frame{
  display:block;
  aspect-ratio:var(--academy);
  overflow:hidden;
  background:#000;
  border-bottom:var(--bd) solid var(--ink);
}
.frame img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:brightness(.88);
  transition:filter .18s,transform .5s cubic-bezier(.2,.7,.2,1);
}
a.frame:hover img,a.frame:focus-visible img{
  filter:brightness(1.05) contrast(1.04);
  transform:scale(1.03);
}


/* ============================================================
   FILMS
   ============================================================ */

.film{border-bottom:var(--bd) solid var(--ink)}
.film:last-child{border-bottom:none}

.film-body{display:grid;grid-template-columns:clamp(80px,8vw,120px) 1fr 260px}
.film-body .no{
  font-family:var(--black);
  font-size:clamp(1.4rem,2.6vw,2.1rem);
  padding:clamp(26px,3.5vw,38px) 0 0 var(--pad);
  border-right:var(--bd) solid var(--ink);
  color:var(--accent);
}
.film-body .main{
  padding:clamp(26px,3.5vw,38px) var(--pad);
  border-right:var(--bd) solid var(--ink);
}
.film-title{
  font-family:var(--black);
  font-size:clamp(2.2rem,7vw,5rem);
  line-height:.9;letter-spacing:-.02em;text-transform:uppercase;
  margin-bottom:clamp(14px,2vw,22px);
}
.film-title a{text-decoration:none;transition:color .12s}
.film-title a:hover,.film-title a:focus-visible{color:var(--accent)}

.film-log{font-size:.95rem;line-height:1.7;max-width:56ch;color:var(--ink-2)}

.tag{
  display:inline-block;margin-top:clamp(18px,2.5vw,26px);
  background:var(--accent);color:var(--ink);
  font-weight:700;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;padding:9px 14px;
  text-decoration:none;
  transition:background .12s,color .12s;
}
a.tag:hover,a.tag:focus-visible{background:var(--ink);color:var(--bg)}

.spec{padding:clamp(26px,3.5vw,38px) var(--pad)}
.spec > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:9px 0;
  border-bottom:1px dashed rgba(236,231,222,.28);
}
.spec > div:last-child{border-bottom:none}
.spec dt{
  font-weight:700;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);
}
.spec dd{
  font-weight:700;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;text-align:right;
}

@media(max-width:880px){
  .film-body{grid-template-columns:1fr}
  .film-body .no{
    border-right:none;border-bottom:var(--bd) solid var(--ink);
    padding:16px var(--pad);
  }
  .film-body .main{border-right:none;border-bottom:var(--bd) solid var(--ink)}
}


/* ============================================================
   TILES
   ============================================================ */

.tiles{display:grid;grid-template-columns:repeat(3,1fr)}
.tiles.cols-2{grid-template-columns:repeat(2,1fr)}
.tiles .tile{
  padding:clamp(28px,3.5vw,40px) var(--pad);
  border-right:var(--bd) solid var(--ink);
}
.tiles .tile:last-child{border-right:none}
.tiles .tile .no{
  display:block;font-family:var(--black);font-size:.9rem;
  letter-spacing:.14em;color:var(--accent);margin-bottom:14px;
}
.tiles .tile h3{
  font-family:var(--black);
  font-size:clamp(1.1rem,2vw,1.45rem);
  line-height:1.08;text-transform:uppercase;margin-bottom:12px;
}
.tiles .tile p{font-size:.92rem;line-height:1.7;color:var(--ink-2)}

@media(max-width:880px){
  .tiles,.tiles.cols-2{grid-template-columns:1fr}
  .tiles .tile{
    border-right:none;border-bottom:var(--bd) solid var(--ink);
  }
  .tiles .tile:last-child{border-bottom:none}
}


/* ============================================================
   STILLS — a wall of gates
   ============================================================ */

.stills{display:grid;grid-template-columns:repeat(2,1fr)}
.stills .frame{
  border-right:var(--bd) solid var(--ink);
  border-bottom:var(--bd) solid var(--ink);
}
.stills .frame:nth-child(2n){border-right:none}
.stills .frame:nth-last-child(-n+2){border-bottom:none}
@media(max-width:560px){
  .stills{grid-template-columns:1fr}
  .stills .frame{border-right:none;border-bottom:var(--bd) solid var(--ink)}
  .stills .frame:last-child{border-bottom:none}
}


/* ============================================================
   DETAILS BLOCK
   ============================================================ */

.details{display:grid;grid-template-columns:repeat(4,1fr)}
.details > div{
  padding:clamp(26px,3.5vw,38px) var(--pad);
  border-right:var(--bd) solid var(--ink);
}
.details > div:last-child{border-right:none}
.details dt{
  font-weight:700;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:11px;
}
.details dd{
  font-family:var(--black);
  font-size:clamp(1rem,1.6vw,1.2rem);
  line-height:1.1;text-transform:uppercase;
}
@media(max-width:880px){
  .details{grid-template-columns:repeat(2,1fr)}
  .details > div:nth-child(2n){border-right:none}
  .details > div:nth-child(-n+2){border-bottom:var(--bd) solid var(--ink)}
}
@media(max-width:480px){
  .details{grid-template-columns:1fr}
  .details > div{border-right:none;border-bottom:var(--bd) solid var(--ink)}
  .details > div:last-child{border-bottom:none}
}


/* ============================================================
   CLOSING
   ============================================================ */

.close{padding:clamp(48px,7vw,90px) var(--pad)}
.close .big{
  font-family:var(--black);
  font-size:clamp(2.4rem,9.5vw,7rem);
  line-height:.88;letter-spacing:-.025em;text-transform:uppercase;
}
.close .big .hot{color:var(--accent)}
.close .lede{
  max-width:58ch;margin-top:clamp(20px,3vw,30px);
  font-size:.95rem;line-height:1.7;color:var(--ink-2);
}
.mail{
  display:inline-block;margin-top:clamp(26px,4vw,40px);
  background:var(--ink);color:var(--bg);
  text-decoration:none;
  font-weight:700;font-size:clamp(.85rem,1.6vw,1.05rem);
  letter-spacing:.06em;text-transform:uppercase;
  padding:17px 24px;
  transition:background .12s,color .12s;
}
.mail:hover,.mail:focus-visible{background:var(--accent);color:var(--ink)}
.close .after{
  margin-top:clamp(20px,3vw,28px);
  font-weight:700;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;
}
.close .after a{
  color:var(--accent);text-decoration:none;
  border-bottom:2px solid var(--accent);padding-bottom:2px;
  transition:color .12s,border-color .12s;
}
.close .after a:hover,.close .after a:focus-visible{
  color:var(--ink);border-color:var(--ink);
}


/* ============================================================
   FOOTER
   ============================================================ */

.foot{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding:22px var(--pad);
  border-top:var(--bd) solid var(--ink);
  font-weight:700;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;
}


@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  a.frame:hover img{transform:none}
}