/* ============================================================
   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}

.vh{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border: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);
}


/* ============================================================
   THE STRIP — full-bleed call to the door
   ============================================================ */

.strip{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px 18px;
  padding:16px var(--pad);
  background:var(--accent);color:var(--ink);
  border-bottom:var(--bd) solid var(--ink);
  text-decoration:none;
  font-weight:700;font-size:.76rem;
  letter-spacing:.12em;text-transform:uppercase;
  transition:background .12s,color .12s;
}
.strip:hover,.strip:focus-visible{background:var(--ink);color:var(--bg)}
.strip .strip-r{white-space:nowrap}
@media(max-width:640px){
  .strip{font-size:.64rem;letter-spacing:.08em;line-height:1.6}
}


/* ============================================================
   SOCIETY — the join block
   ============================================================ */

.split + .tiles{border-top:var(--bd) solid var(--ink)}

.join{
  padding:clamp(34px,5vw,62px) var(--pad);
  border-top:var(--bd) solid var(--ink);
}
.join .ask{
  font-family:var(--black);
  font-size:clamp(1.5rem,3.6vw,2.4rem);
  line-height:1.06;letter-spacing:-.01em;text-transform:uppercase;
  margin-bottom:clamp(20px,3vw,28px);
}
.join .ask .hot{color:var(--accent)}

.join-form{
  display:grid;grid-template-columns:1fr auto;
  border:var(--bd) solid var(--ink);
  max-width:720px;
}
.join-form input[type=email]{
  background:transparent;color:var(--ink);border:none;
  font-family:var(--mono);font-weight:700;
  font-size:clamp(.85rem,1.6vw,1rem);
  letter-spacing:.06em;
  padding:18px var(--pad);
  min-width:0;
}
.join-form input[type=email]::placeholder{
  color:rgba(236,231,222,.38);
  text-transform:uppercase;letter-spacing:.12em;
}
.join-form input[type=email]:focus{
  outline:none;background:rgba(236,231,222,.06);
}
.join-form button{
  background:var(--accent);color:var(--ink);
  border:none;border-left:var(--bd) solid var(--ink);
  font-family:var(--mono);font-weight:700;
  font-size:clamp(.72rem,1.4vw,.85rem);
  letter-spacing:.14em;text-transform:uppercase;
  padding:18px clamp(18px,2.6vw,30px);
  cursor:pointer;white-space:nowrap;
  transition:background .12s,color .12s;
}
.join-form button:hover,.join-form button:focus-visible{
  background:var(--ink);color:var(--bg);
}
@media(max-width:560px){
  .join-form{grid-template-columns:1fr}
  .join-form button{border-left:none;border-top:var(--bd) solid var(--ink)}
}

/* wide variant — carries a role picker above the field */
.join-form.wide{display:block;border:none;max-width:720px}
.join-form.wide .join-row{
  display:grid;grid-template-columns:1fr auto;
  border:var(--bd) solid var(--ink);
}
@media(max-width:560px){
  .join-form.wide .join-row{grid-template-columns:1fr}
}

.close .join-form,
.close .join-card{margin-top:clamp(26px,4vw,40px)}

/* unboxed wrapper — for a join block already sitting inside .close */
.join.bare{border-top:none;padding:0}

.join-form fieldset{border:0;padding:0;margin:0;min-width:0}

.fine{
  margin-top:16px;max-width:62ch;
  font-weight:700;font-size:.7rem;line-height:1.8;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);
}

/* the member card — success state */
.join-card{display:none;border:var(--bd) solid var(--ink);max-width:720px}
.join-card.on{display:block}
.join-card .card-top{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;
  padding:15px var(--pad);
  background:var(--ink);color:var(--bg);
  font-family:var(--black);font-size:.76rem;
  letter-spacing:.14em;text-transform:uppercase;
}
.join-card .card-mid{
  padding:20px var(--pad);
  border-bottom:1px dashed rgba(236,231,222,.32);
  font-weight:700;font-size:clamp(.85rem,1.8vw,1.05rem);
  letter-spacing:.06em;line-height:1.6;
  overflow-wrap:anywhere;
}
.join-card .card-mid .who{color:var(--accent)}
.join-card .card-bot{
  padding:16px var(--pad);
  font-weight:700;font-size:.7rem;line-height:1.8;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
}


/* ============================================================
   SCREENING ROOM — long hero, role picker, report mock
   ============================================================ */

.hero h1.long{
  font-size:clamp(2.3rem,8.4vw,6.6rem);
  line-height:.9;
}

/* role picker — segmented, styled like the topbar */
.pick{
  display:flex;flex-wrap:wrap;
  border:var(--bd) solid var(--ink);
  max-width:720px;margin-bottom:18px;
}
.pick label{flex:1 1 auto;position:relative;display:flex}
.pick input{
  position:absolute;opacity:0;width:100%;height:100%;
  margin:0;cursor:pointer;
}
.pick span{
  flex:1;display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:14px 16px;
  font-weight:700;font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;
  transition:background .12s,color .12s;
}
.pick label + label span{border-left:var(--bd) solid var(--ink)}
.pick input:checked + span{background:var(--accent);color:var(--ink)}
.pick input:focus-visible + span{outline:3px solid var(--accent);outline-offset:-3px}
.pick input:hover + span{background:rgba(236,231,222,.08)}
.pick input:checked:hover + span{background:var(--accent)}
@media(max-width:560px){
  .pick label{flex:1 1 100%}
  .pick label + label span{
    border-left:none;border-top:var(--bd) solid var(--ink);
  }
}

/* the report mock */
.report{border:var(--bd) solid var(--ink);margin:clamp(28px,4vw,44px) var(--pad)}
.report-head{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;
  padding:16px var(--pad);
  background:var(--ink);color:var(--bg);
  font-family:var(--black);font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;
}
.report-sub{
  padding:14px var(--pad);
  border-bottom:var(--bd) solid var(--ink);
  font-weight:700;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
.report-row{padding:clamp(22px,3vw,30px) var(--pad)}
.report-row + .report-row{border-top:var(--bd) solid var(--ink)}
.report-row h4{
  font-weight:700;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.score{
  font-family:var(--black);
  font-size:clamp(2.2rem,7vw,4rem);
  line-height:1;letter-spacing:-.02em;
}
.score small{
  font-family:var(--mono);font-weight:700;
  font-size:.8rem;letter-spacing:.14em;color:var(--ink-2);
  margin-left:10px;
}

.stats-row{display:grid;grid-template-columns:repeat(3,1fr)}
.stats-row .stat + .stat{padding-left:20px;border-left:var(--bd) solid var(--ink)}
.stats-row .stat:not(:first-child){padding-left:20px}
.stats-row .score{font-size:clamp(1.7rem,4.5vw,2.8rem)}
@media(max-width:640px){
  .stats-row{grid-template-columns:1fr;gap:20px}
  .stats-row .stat + .stat{padding-left:0;border-left:none;border-top:var(--bd) solid var(--ink);padding-top:20px}
}

/* how it made them feel */
.feel-tags{display:flex;flex-wrap:wrap;gap:10px}
.feel-tags span{
  display:inline-flex;align-items:center;gap:6px;
  border:var(--bd) solid var(--ink);
  padding:7px 12px;
  font-weight:700;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);
}
.feel-tags span b{color:var(--accent);font-family:var(--mono);font-weight:700}

/* attention graph */
.bars{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:3px;align-items:end;
  height:clamp(90px,14vw,150px);
}
.bars i{display:block;background:var(--accent);width:100%}
.bars i.dip{background:rgba(236,231,222,.28)}
.axis{
  display:flex;justify-content:space-between;
  margin-top:10px;
  font-weight:700;font-size:.62rem;
  letter-spacing:.12em;color:var(--ink-2);
}
.read{
  margin-top:18px;max-width:60ch;
  font-size:.9rem;line-height:1.75;color:var(--ink-2);
}
.read b{color:var(--accent);font-weight:700}

/* viewer cards bleed to the report's own rules */
.report-row .cards{
  margin:0 calc(-1 * var(--pad)) calc(-1 * clamp(22px,3vw,30px));
}

/* quoted viewer cards */
.cards{display:grid;grid-template-columns:repeat(2,1fr)}
.cards .card{
  padding:clamp(22px,3vw,30px) var(--pad);
  border-right:var(--bd) solid var(--ink);
  border-top:var(--bd) solid var(--ink);
}
.cards .card:nth-child(2n){border-right:none}
.cards .card .who{
  display:block;
  font-weight:700;font-size:.64rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px;
}
.cards .card p{font-size:.92rem;line-height:1.7;color:var(--ink-2)}
@media(max-width:640px){
  .cards{grid-template-columns:1fr}
  .cards .card{border-right:none}
}

/* numbered how-it-works steps */
.steps{border-top:var(--bd) solid var(--ink)}
.steps .step{
  display:grid;grid-template-columns:clamp(80px,8vw,120px) 1fr;
}
.steps .step + .step{border-top:var(--bd) solid var(--ink)}
.steps .step .n{
  font-family:var(--black);
  font-size:clamp(1.4rem,2.6vw,2.1rem);
  padding:clamp(24px,3.2vw,34px) 0 0 var(--pad);
  border-right:var(--bd) solid var(--ink);
  color:var(--accent);
}
.steps .step .body{padding:clamp(24px,3.2vw,34px) var(--pad)}
.steps .step h3{
  font-family:var(--black);
  font-size:clamp(1.15rem,2.4vw,1.7rem);
  line-height:1.05;text-transform:uppercase;margin-bottom:12px;
}
.steps .step p{font-size:.95rem;line-height:1.75;max-width:62ch;color:var(--ink-2)}


/* ============================================================
   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}
}