/*
Theme Name: Film
Theme URI: https://film.erf.studio
Author: Erf Talebi
Description: film.erf.studio. The house language of erf.studio/work carried onto its own surface: black, Kanit display, JetBrains Mono meta, one 4vw gutter, basic animations only. The front page IS the portfolio, rendered from the film CPT. No accent colour, no signature move: restraint is the identity.
Version: 0.1.0
License: GPL2
Text Domain: film
*/

/* ============================================================
   Tokens. Same values as the ratified prototype, which took them
   from erf.studio itself. No phosphor (that is Kit's), no red
   fields (that was signal's).
   ============================================================ */
:root{
  --ink:#ffffff; --soft:#c9c9c9; --muted:#8a8a8a; --faint:#6a6a6a;
  --line:#1e1e1e; --g:4vw;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --disp:'Kanit',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#000;color:var(--ink);font-family:var(--mono);font-weight:400}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:#fff;color:#000}

/* ---------- header ---------- */
.fh{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;justify-content:space-between;align-items:center;
  padding:26px var(--g);
  background:linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,0));
  transition:background .3s ease;
}
.fh.on{background:rgba(0,0,0,.92)}
.fh__mark img{height:20px;width:auto}
.fh__claim{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--soft)}

/* ---------- masthead: the /work/ opening ---------- */
.mast{padding:calc(90px + 3.2rem) var(--g) 4.6rem}
.mast__eyebrow{
  display:flex;align-items:baseline;gap:1.4rem;margin:0 0 1.4rem;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);
}
.mast__eyebrow .r{flex:1;height:1px;background:rgba(255,255,255,.11);transform:translateY(-3px)}
.mast h1{
  margin:0;font-family:var(--disp);font-weight:600;
  font-size:clamp(2.6rem,7vw,6rem);line-height:1;letter-spacing:-.02em;
}
.mast__sub{
  margin:1.6rem 0 0;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);font-variant-numeric:tabular-nums;
}
.mast>*{opacity:0;transform:translateY(18px);animation:up .7s ease forwards}
.mast h1{animation-delay:.08s}
.mast__sub{animation-delay:.16s}
@keyframes up{to{opacity:1;transform:none}}

/* ---------- a film in the index ---------- */
.film{padding:0 var(--g);margin:0 0 9rem}
.film__frame{
  position:relative;width:100%;aspect-ratio:var(--ar,2.39);
  background:#0a0a0a;overflow:hidden;
}
.film__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the index frame CROPS to the film's shape on purpose: it is a poster, one
   chosen image. The FRAMES section on a film page is where nothing is ever
   cropped, because there the shape is the subject. */
.film__frame--empty{display:flex;align-items:flex-end;padding:14px 16px;background:linear-gradient(160deg,#171717,#050505 70%)}
.film__frame--empty span{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:#3d3d3d}
a.film__link:hover .film__frame img{transform:scale(1.012)}
.film__frame img{transition:transform .8s ease}

.film__no{display:block;margin:2.1rem 0 0;font-size:10px;letter-spacing:.3em;color:var(--faint);font-variant-numeric:tabular-nums}
.film h2{
  margin:.55rem 0 0;font-family:var(--disp);font-weight:600;
  font-size:clamp(2.4rem,6.4vw,5.4rem);line-height:.98;letter-spacing:-.02em;
  text-transform:uppercase;
}
a.film__link:hover h2{color:var(--soft)}
.film h2,.film__spine,.film__logline{transition:color .25s ease}
.spine{
  display:flex;flex-wrap:wrap;gap:.55rem 1.6rem;margin:1.35rem 0 0;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.spine .t{font-variant-numeric:tabular-nums}
.film__logline{
  margin:1.5rem 0 0;max-width:46ch;font-family:var(--disp);font-weight:400;
  font-size:clamp(15px,1.7vw,20px);line-height:1.45;color:var(--soft);
}

/* reveal as each block enters. .pre is only ever added by JS, so no-JS shows
   everything immediately rather than a blank page. */
.film,.ff,.single__body{transition:opacity .7s ease,transform .7s ease}
.pre{opacity:0;transform:translateY(26px)}

/* ---------- a single film ---------- */
.single{padding-top:calc(90px + 2.6rem)}
.single__hero{position:relative;width:100%;aspect-ratio:var(--ar,2.39);background:#0a0a0a;overflow:hidden;margin-bottom:2.6rem}
.single__hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.single__head{padding:0 var(--g)}
.single__back{
  display:inline-block;margin-bottom:1.6rem;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);
}
.single__back:hover{color:var(--ink)}
.single h1{
  margin:0;font-family:var(--disp);font-weight:600;
  font-size:clamp(2.4rem,6.4vw,5.4rem);line-height:.98;letter-spacing:-.02em;text-transform:uppercase;
}
/* the fact strip: the masthead widget's spine, ruled, as its own row */
.facts{
  display:grid;grid-template-columns:repeat(5,1fr);
  margin:2.4rem 0 0;border-top:1px solid var(--line);
}
.facts__c{border-left:1px solid var(--line);padding:22px 26px 6px;min-width:0}
.facts__c:first-child{border-left:0;padding-left:0}
.facts__k{margin:0 0 10px;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--faint)}
.facts__v{margin:0;font-size:14px;font-weight:500;line-height:1.5;color:var(--ink)}
.facts__c--time .facts__v{font-variant-numeric:tabular-nums;letter-spacing:.06em}
.single__logline{
  margin:2.4rem 0 0;max-width:46ch;font-family:var(--disp);font-weight:400;
  font-size:clamp(17px,2.1vw,25px);line-height:1.42;color:var(--soft);
}
.single__video{margin:3.2rem 0 0;padding:0 var(--g)}
.single__video .wrap{position:relative;width:100%;aspect-ratio:16/9;background:#0a0a0a}
.single__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* the body is an Elementor free zone: the film widgets live here */
.single__body{padding:3.6rem 0 0}
.single__body p{padding:0 var(--g);max-width:none}
.unlisted-note{
  margin:2.4rem var(--g) 0;padding:10px 14px;border:1px solid #3a2f14;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#c9a24a;
}

/* ---------- footer ---------- */
.ff{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  margin-top:4rem;padding:26px var(--g) 34px;border-top:1px solid var(--line);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
}
.ff a:hover{color:var(--ink)}

/* ---------- empty state ---------- */
.empty{padding:0 var(--g) 6rem;font-size:11px;letter-spacing:.14em;color:var(--faint);line-height:1.9}

@media(max-width:900px){
  .facts{grid-template-columns:repeat(3,1fr)}
  .facts__c:nth-child(5n+1){border-left:1px solid var(--line);padding-left:26px}
  .facts__c:nth-child(3n+1){border-left:0;padding-left:0}
}
@media(max-width:640px){
  .fh{padding:18px var(--g)}
  .fh__mark img{height:16px}
  .fh__claim{font-size:8px;letter-spacing:.18em}
  .mast{padding-top:calc(64px + 2.4rem);padding-bottom:3.2rem}
  .film{margin-bottom:6rem}
  .film__logline{max-width:none}
  .facts{grid-template-columns:repeat(2,1fr)}
  .facts__c{padding:18px 18px 6px}
  .facts__c:nth-child(3n+1){border-left:1px solid var(--line);padding-left:18px}
  .facts__c:nth-child(2n+1){border-left:0;padding-left:0}
  .single__logline{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .mast>*{animation:none;opacity:1;transform:none}
  .film,.ff,.single__body,.film__frame img{transition:none}
  .pre{opacity:1;transform:none}
}