/* ============================================================
   TOM GERA — "Cinema" theme
   Fonts
   - Not So Grotesk Condensed (Jeffrey N. Levine): titles only. Needs a webfont licence (MyFonts).
   - Helvetica Neue: everything else (small caps labels + body).
   ============================================================ */
@font-face{font-family:"Not So Grotesk";src:url("media/fonts/notsogroteskcondensed.otf") format("opentype");font-display:swap}

:root{
  --bg:#0e0e0e;
  --fg:#ededed;
  --mute:#8c8c8c;
  --line:rgba(255,255,255,.12);
  --rust:#C73E03;           /* the only accent */
  --g:clamp(16px,2.2vw,32px);
  --max:1600px;                                             /* content width cap for big screens */
  --px:max(var(--g), calc((100vw - var(--max)) / 2));       /* side padding: grows on wide screens */
  --gap:6px;
  --sec:clamp(96px,8vw,150px);   /* space between sections: fixed range, not screen height */
  --t-read:16px;                 /* the two text sizes */
  --t-small:13px;
  --title:"Not So Grotesk","Not So Grotesk Condensed JNL","Arial Narrow",Impact,sans-serif;
  --body:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font:400 14px/1.55 var(--body);letter-spacing:.01em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,video{display:block;width:100%;height:100%;object-fit:cover}

/* small caps label used everywhere */
.cap,header nav a,.filters button{font-family:var(--body);font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.14em}
.mute{color:var(--mute)}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--rust);margin-right:9px;vertical-align:2px}
h1,h2,h3{font-family:var(--title);font-weight:400;text-transform:uppercase;line-height:.88;letter-spacing:.005em}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;
  padding:22px var(--px);background:var(--bg);transition:background .4s}
body.has-hero header{position:fixed;left:0;right:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0))}
body.has-hero header.solid{background:rgba(14,14,14,.94);backdrop-filter:blur(8px)}
.brand img{height:20px;width:auto}
header nav{display:flex;gap:28px}
header nav a{color:var(--fg);opacity:.75;transition:opacity .2s}
header nav a:hover,header nav a.on{opacity:1}
header nav a.on::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--rust);margin-right:8px;vertical-align:2px}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;cursor:pointer;background:#000}
.hero img,.hero video{position:absolute;inset:0;transition:transform 2s cubic-bezier(.2,.7,.2,1)}
.hero:hover img{transform:scale(1.02)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--bg) 0,rgba(14,14,14,0) 38%)}
.hero .t{position:absolute;left:var(--px);right:var(--px);bottom:7vh;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:var(--g)}
.hero .t .cap{display:block;color:#bdbdbd;margin-bottom:14px}
.hero h1{font-size:clamp(72px,11vw,190px)}
.hero .side{max-width:34ch;color:#cfcfcf;text-align:right;padding-bottom:10px}

/* ---------- section rows ---------- */
.row{display:flex;justify-content:space-between;align-items:baseline;padding:var(--sec) var(--px) 18px}
.row .cap{color:var(--mute)}
.row .cap.on{color:var(--fg)}
.row a.cap:hover{color:var(--fg)}

/* ---------- films (homepage) ---------- */
.films{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);padding:0 var(--px)}
.tile{position:relative;aspect-ratio:16/10;overflow:hidden;cursor:pointer;background:#000}
.tile img,.tile video{position:absolute;inset:0;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),opacity .5s}
.tile video{opacity:0}
.tile video.ready{opacity:1}
.tile:hover img,.tile:hover video{transform:scale(1.03)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.62),rgba(0,0,0,0) 45%);pointer-events:none}
.tile .m{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.tile h2{font-size:clamp(34px,3.4vw,52px)}
.tile .cap{color:#c4c4c4;white-space:nowrap}

/* ---------- covers (commissioned) ---------- */
.covers{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);padding:0 var(--px)}
.cv{position:relative;aspect-ratio:2/3;overflow:hidden;cursor:pointer;background:#000}
.cv img{position:absolute;inset:0;transition:transform 1s cubic-bezier(.2,.7,.2,1),filter .4s}
.cv:hover img{transform:scale(1.04)}
.cv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.cv:hover video.ready{opacity:1}
.cv::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,0) 42%);pointer-events:none}
.cv .m{position:absolute;left:14px;right:14px;bottom:13px;z-index:2}
.cv h3{font-size:clamp(24px,2vw,32px);line-height:.95}
.cv .cap{display:block;margin-top:6px;color:#c4c4c4;font-size:10px}
.cv.hide{display:none}

/* ---------- inner page top ---------- */
.page-top{padding:calc(var(--sec) + 80px) var(--px) 0}
.page-top h1{font-family:var(--body);font-size:11px;font-weight:400;letter-spacing:.14em;line-height:1;color:var(--mute);margin-bottom:22px}
.page-top p{font-size:clamp(24px,2.4vw,38px);line-height:1.2;color:var(--fg);max-width:26ch}

/* ---------- filters ---------- */
.filters{display:flex;gap:26px;flex-wrap:wrap;padding:48px var(--px) 0}
.filters button{all:unset;cursor:pointer;color:var(--mute);transition:color .2s}
.filters button:hover{color:var(--fg)}
.filters button.on{color:var(--fg)}
.filters button.on::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--rust);margin-right:8px;vertical-align:2px}
.filters sup{font-size:.8em;margin-left:3px;opacity:.6}
.group.hide{display:none}

/* ---------- films page ---------- */
.film{padding:var(--sec) var(--px) 0}
.film:first-child{padding-top:48px}
.film .frame{position:relative;aspect-ratio:239/100;overflow:hidden;cursor:pointer;background:#000}
.film .frame img,.film .frame video{position:absolute;inset:0;transition:transform 1.4s cubic-bezier(.2,.7,.2,1),opacity .5s}
.film .frame video{opacity:0}
.film .frame video.ready{opacity:1}
.film .frame:hover img,.film .frame:hover video{transform:scale(1.02)}
.film .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,0) 45%);pointer-events:none}
.film .frame .ph{position:absolute;inset:0;background:#141414}
.film .frame.noimg{aspect-ratio:auto;height:clamp(140px,16vw,220px);border-top:1px solid var(--line)}
.film .frame.noimg::after{display:none}
.film .frame .m{position:absolute;left:clamp(16px,2vw,28px);right:clamp(16px,2vw,28px);bottom:clamp(14px,1.8vw,24px);z-index:2}
.film .frame h2{font-size:clamp(36px,4vw,64px);color:#fff}
.film .frame .cap{display:block;margin-top:8px;color:#cfcfcf}
.film .info{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--g);padding-top:22px}
.film .info .logline{grid-column:1 / span 6;font-size:var(--t-read);line-height:1.45;max-width:46ch}
.film .info .credits{grid-column:1 / span 6;color:var(--mute);margin-top:-8px}
.film .info .laurels{grid-column:8 / span 5;grid-row:1 / span 2;list-style:none;columns:2;column-gap:var(--g)}
.film .info .laurels li{break-inside:avoid;padding:6px 0;border-top:1px solid var(--line);color:#b8b8b8}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--g);padding:calc(var(--sec) * 1.2) var(--px) var(--sec)}
.about .cap{grid-column:1 / span 3;color:var(--mute)}
.about .lead{grid-column:4 / span 6;font-size:clamp(18px,1.5vw,22px);line-height:1.45}
.about .lead p+p{margin-top:1em}
.about .side{grid-column:11 / span 2;display:grid;gap:26px;align-content:start}
.about .side .cap{display:block;color:var(--mute);margin-bottom:4px}
.about .side ul{list-style:none}
.about a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:22px var(--px);border-top:1px solid var(--line);color:var(--mute)}

/* ---------- player ---------- */
.player{position:fixed;inset:0;z-index:60;background:rgba(8,8,8,.97);display:none;flex-direction:column;overflow:auto}
.player.open{display:flex}
.player .bar{display:flex;justify-content:space-between;align-items:center;padding:22px var(--px)}
.player .bar button{all:unset;cursor:pointer}
.player .stage{flex:1;display:grid;place-items:center;padding:0 var(--px)}
.player .frame2{width:min(100%,calc((100vh - 220px) * 16 / 9));aspect-ratio:16/9;background:#000}
.player iframe{width:100%;height:100%;border:0}
.player .desc{display:grid;grid-template-columns:1fr 1fr;gap:var(--g);padding:22px var(--px) 30px}
.player .desc h3{font-size:40px}
.player .desc .cap{display:block;color:var(--mute);margin-top:8px}
.player .desc p{color:#c8c8c8;max-width:58ch}

@media (max-width:1000px){
  .covers{grid-template-columns:repeat(3,1fr)}
  .about .cap{grid-column:1 / -1}.about .lead{grid-column:1 / span 8}.about .side{grid-column:9 / span 4}
}
@media (max-width:760px){
  header{padding:18px var(--g)}
  header nav{gap:14px}
  header nav a{font-size:10px;letter-spacing:.1em}
  header nav a.on::before{display:none}
  .brand img{height:16px}
  .hero .t{flex-direction:column;align-items:flex-start}
  .hero .side{text-align:left}
  .films{grid-template-columns:1fr}
  .covers{grid-template-columns:repeat(2,1fr)}
  .film .frame{aspect-ratio:16/10}
  .film .info .logline,.film .info .credits,.film .info .laurels,.about .lead,.about .side{grid-column:1 / -1;grid-row:auto}
  .player .desc{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ============================================================
   PROJECT PAGE
   ============================================================ */
.phero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#000}
.phero video,.phero>img{position:absolute;inset:0}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--bg) 0,rgba(14,14,14,.15) 45%,rgba(0,0,0,.35) 100%)}
.phero .t{position:absolute;left:var(--px);right:var(--px);bottom:8vh;z-index:2}
.ptitle{width:min(560px,62vw);height:auto;display:block}
.prelease{margin:10px 0 0;color:#cfcfcf}
.prelease a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px;transition:color .2s,border-color .2s}
.prelease a:hover{color:#fff;border-color:var(--rust)}
.phero h1{font-size:clamp(72px,11vw,190px)}
.pmeta{margin-top:22px;color:#cfcfcf;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.pmeta i{width:4px;height:4px;border-radius:50%;background:#777;display:inline-block}
.watch,.playbtn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding:12px 18px;background:var(--fg);color:#000;transition:background .2s}
.watch:hover,.playbtn:hover{background:#fff}
.tri{width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}

.psec{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--g);padding:var(--sec) var(--px) 0}
.psec .plabel{grid-column:1 / span 3;color:var(--mute);padding-top:6px}
.psec .pbody{grid-column:4 / span 9}
.psec.wide .pbody{grid-column:1 / -1}
.psec.wide .plabel{grid-column:1 / -1}
.big{font-size:clamp(22px,2.2vw,34px);line-height:1.3;letter-spacing:0;text-wrap:pretty}
.kw{margin-top:26px}
.plaurels{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:24px;align-items:center;margin-bottom:56px}
@media (max-width:900px){.plaurels{flex-wrap:wrap;justify-content:flex-start;gap:22px 30px}}
/* festival logos, white. height is set per logo in project.js so every logo carries the same visual weight */
.plaurels img{height:40px;width:auto;opacity:.82;display:block}
/* logos that link to the festival's page about the film: a small lift on hover */
.plaurels a{display:block;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.plaurels a img{transition:opacity .35s}
.plaurels a:hover{transform:scale(1.08)}
.plaurels a:hover img{opacity:1}
.lead{font-size:var(--t-read);line-height:1.65;color:#d6d6d6;max-width:58ch}
.lead p+p{margin-top:1em}
.two{display:grid;grid-template-columns:1.4fr 1fr;gap:calc(var(--g)*2);align-items:start}
.plist{list-style:none;margin-top:12px}
.plist li{padding:9px 0;border-top:1px solid var(--line);font-size:var(--t-small);color:#d0d0d0}
.partners{display:flex;gap:28px;align-items:center;margin-top:14px}
.partners img{height:26px;width:auto;opacity:.75;filter:brightness(0) invert(1)}

.pwide{padding:var(--sec) var(--px) 0}
.pframe{position:relative;aspect-ratio:var(--fa,16/9);background:#000;cursor:pointer;overflow:hidden}
.pframe img{position:absolute;inset:0;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),opacity .3s}
.pframe:hover img{transform:scale(1.02)}
.pframe .playbtn{position:absolute;left:20px;bottom:20px;margin:0}
.pframe iframe,.pframe video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain;background:#000}
.pframe.on{cursor:default}

.teasercast{display:grid;grid-template-columns:var(--tc,8fr 3fr 3fr);gap:var(--gap);align-items:stretch}
.cast{display:contents}
.cast figure{position:relative;overflow:hidden;background:#000}
.cast figure{margin:0}
.cast img{position:absolute;inset:0;height:100%}
.cast figcaption{position:absolute;left:12px;bottom:10px;right:12px;font-family:var(--title);text-transform:uppercase;font-size:24px;line-height:1}
.cast figcaption .cap{display:block;font-family:var(--body);margin-bottom:6px;color:#ddd}
.cast figure::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,0) 40%)}
.cast figcaption{z-index:2}

.pquote{position:relative;margin-top:var(--sec);height:min(64vh,640px);min-height:400px;display:grid;place-items:center;overflow:hidden;background:#000}
.pquote video{position:absolute;inset:0;opacity:.4}
.qwrap{position:relative;z-index:2;width:100%;max-width:980px;padding:0 var(--g);text-align:center;display:grid;justify-items:center;gap:28px}
.qlead{font-size:clamp(18px,1.6vw,24px);line-height:1.5;color:#e2e2e2;max-width:48ch;font-style:italic}
.pquote blockquote{font-family:var(--title);text-transform:uppercase;font-size:clamp(40px,5.2vw,92px);line-height:.92;max-width:16ch}
.qwrap figcaption{color:#bdbdbd;margin-top:4px}

.stills{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap);margin-top:16px}
.stills a{display:block;overflow:hidden;background:#000;cursor:zoom-in}
.stills img{aspect-ratio:var(--sa,185/100);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.stills a:hover img{transform:scale(1.03)}
/* stills + process sit at 70% and come up to full on hover */
.stills a>img,.stills a>video,.process a>img,.process a>video{opacity:.7;transition:opacity .35s ease,filter .5s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
/* process pictures (behind the scenes): black & white until hover */
.process.bw a>img,.process.bw a>video{filter:grayscale(1)}
.process.bw a:hover>img,.process.bw a:hover>video{filter:none}
.stills a:hover>img,.stills a:hover>video,.process a:hover>img,.process a:hover>video{opacity:1}
.stills .st0{grid-column:span 6}
.stills .st0 img{aspect-ratio:var(--sa,185/100)}
.stills .st1,.stills .st2{grid-column:span 3}
.stills .st3,.stills .st4{grid-column:span 3}

.process{columns:4;column-gap:var(--gap);margin-top:16px}
.process a{display:block;break-inside:avoid;margin-bottom:var(--gap);cursor:zoom-in;background:#000}
.process img,.process video{height:auto}

.essay{font-size:var(--t-read);line-height:1.65;color:#d6d6d6}
.essay p+p{margin-top:1em}
.essay p:first-child::first-line{color:#fff}

.credits{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--g)*1.5) var(--g);margin-top:44px}
.credits>div>.cap{display:block;color:var(--fg);padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:10px}
.credits dl{display:grid;grid-template-columns:1fr;gap:0}
.credits dt{color:var(--mute);font-size:var(--t-small);margin-top:10px}
.credits dd{font-size:var(--t-small)}
.credits ul{list-style:none;font-size:var(--t-small);line-height:1.8}

.pnext{position:relative;display:block;margin-top:calc(var(--sec) * 1.2);height:56vh;min-height:360px;overflow:hidden;background:#000}
.pnext img{position:absolute;inset:0;opacity:.55;transition:opacity .5s,transform 1.4s cubic-bezier(.2,.7,.2,1)}
.pnext:hover img{opacity:.85;transform:scale(1.03)}
/* "Next" panel: thin line arrow pointing right as the cursor */
.pnext{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='24' viewBox='0 0 56 24'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h49M43 4l9 8-9 8' stroke='%23000' stroke-opacity='.35' stroke-width='4'/%3E%3Cpath d='M3 12h49M43 4l9 8-9 8' stroke='%23fff' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E") 28 12,e-resize}

.pnext .cap{position:absolute;right:var(--px);bottom:calc(8vh + clamp(60px,8vw,130px));z-index:2;color:#cfcfcf;text-align:right}
.pnext h2{position:absolute;right:var(--px);left:var(--px);bottom:8vh;z-index:2;font-size:clamp(60px,9vw,150px);text-align:right}

.lb{position:fixed;inset:0;z-index:70;background:rgba(6,6,6,.97);display:none;place-items:center;padding:5vh 5vw}
.lb.open{display:grid;cursor:zoom-out}
.lb .lbimg img,.lb .lbimg video{max-width:90vw;max-height:88vh;width:auto;height:auto;object-fit:contain}
.lb.next{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='24' viewBox='0 0 56 24'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h49M43 4l9 8-9 8' stroke='%23000' stroke-opacity='.35' stroke-width='4'/%3E%3Cpath d='M3 12h49M43 4l9 8-9 8' stroke='%23fff' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E") 28 12,e-resize}
.lb.prev{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='24' viewBox='0 0 56 24'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M53 12H4M13 4l-9 8 9 8' stroke='%23000' stroke-opacity='.35' stroke-width='4'/%3E%3Cpath d='M53 12H4M13 4l-9 8 9 8' stroke='%23fff' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E") 28 12,w-resize}
.lb .lbx{cursor:pointer}
.lb .lbn{position:absolute;top:22px;left:var(--g);color:var(--mute)}
.lb .lbx{all:unset;position:absolute;top:22px;right:var(--g);cursor:pointer}

@media (max-width:900px){
  .psec .plabel,.psec .pbody{grid-column:1 / -1}
  .two{grid-template-columns:1fr}
  .teasercast{grid-template-columns:repeat(var(--nc,2),1fr)}
  .teasercast .pframe{grid-column:1 / -1}
  .cast figure{aspect-ratio:2/3}
  .credits{grid-template-columns:1fr 1fr}
  .process{columns:2}
  .stills .st1,.stills .st2,.stills .st3,.stills .st4{grid-column:span 6}
}

.vlb{position:fixed;inset:0;z-index:70;background:rgba(6,6,6,.97);display:none;place-items:center;padding:6vh var(--g)}
.vlb.open{display:grid}
.vlb .vframe{width:min(100%,calc(86vh * 16 / 9));aspect-ratio:16/9;background:#000}
.vlb iframe{width:100%;height:100%;border:0}
.vlb .lbx{all:unset;position:absolute;top:22px;right:var(--g);cursor:pointer}

.awards{width:100%;border-collapse:collapse;font-size:var(--t-small)}
.awards td{padding:13px 0;border-top:1px solid var(--line);vertical-align:top}
.awards tr:last-child td{border-bottom:1px solid var(--line)}
.awards td:first-child{width:34%;color:var(--fg);padding-right:var(--g)}
.awards td:nth-child(2){color:#bdbdbd;padding-right:var(--g)}
.awards td:nth-child(3){width:20%;color:var(--mute)}
.awards td:last-child{width:70px;text-align:right;color:var(--mute);font-variant-numeric:tabular-nums}
@media (max-width:700px){.awards td:first-child{width:auto}.awards tr{display:grid;grid-template-columns:1fr auto;border-top:1px solid var(--line)}.awards td{border:0;padding:4px 0}.awards td:nth-child(2){grid-row:2;grid-column:1;padding-bottom:12px}.awards td:nth-child(3){grid-row:2;grid-column:2;width:auto;text-align:right;padding-bottom:12px}}
.agroup{margin-top:10px}
.agroup+.agroup{margin-top:44px}
.agroup>.cap{display:block;margin-bottom:12px}

/* self-hosted video in the video lightbox */
.vlb .vframe video{width:100%;height:100%;background:#000}

/* a set of stills where the last one has no partner: show it wide */
.stills a:last-child:nth-child(even){grid-column:span 6}
/* process as one neat row (e.g. toy-camera tests) */
.process.row{columns:auto;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:var(--gap)}
.process.row a{margin:0}
.process.row img,.process.row video{aspect-ratio:var(--ra,4/3);object-fit:cover;height:auto;width:100%}
@media (max-width:700px){.process.row{grid-template-columns:repeat(2,1fr)}}

/* ---------- commissioned project pages ---------- */
.facts{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:4px 0 0;font-size:var(--t-small)}
.facts dt{white-space:nowrap;padding-top:2px}
.facts dd{margin:0;color:var(--fg)}
.bkicker{display:block;margin-bottom:10px}
.bsongs{list-style:none;margin:0 0 32px;padding:0;counter-reset:s}
.bsongs li{font-family:var(--title);text-transform:uppercase;font-size:clamp(26px,2.6vw,42px);line-height:1.02;padding:7px 0;border-top:1px solid var(--line);display:flex;gap:18px;align-items:baseline}
.bsongs li:last-child{border-bottom:1px solid var(--line)}
.bsongs li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--body);font-size:11px;letter-spacing:.14em;color:var(--mute);min-width:22px}
.btitle{font-family:var(--title);text-transform:uppercase;font-weight:400;font-size:clamp(40px,4.6vw,76px);line-height:.92;margin:0 0 28px;letter-spacing:.005em}
.bfilm{margin-top:8px}
.bfilm + .stills, .bfilm + .process, .bfilms + .stills, .two + .stills, .two + .bfilms, .two + .bfilm, .two + .process{margin-top:var(--gap)}
.psec .two + .bfilm, .psec .two + .stills, .psec .two + .bfilms{margin-top:36px}
.bfilms{display:grid;gap:var(--gap)}
.bfilms.n2{grid-template-columns:1fr 1fr}
.bfilms.n3{grid-template-columns:repeat(3,1fr)}
.bfilms figure{margin:0}
.bfilms figcaption{margin-top:10px}
.loops.thirds{grid-template-columns:repeat(3,1fr)}
.loops.thirds a{grid-column:auto!important}
.loops video{pointer-events:none}
@media (max-width:700px){.bfilms.n2,.bfilms.n3,.loops.thirds{grid-template-columns:1fr}}
.psec.wide .bhead{margin-left:calc((100% - 11 * var(--g)) / 12 * 3 + 3 * var(--g))}
.bhead + .bfilm,.bhead + .bfilms,.bhead + .stills,.bhead + .process{margin-top:36px}
@media (max-width:900px){.psec.wide .bhead{margin-left:0}}
/* wide sections: a small kicker at the top of the block sits on the same line as the section label (e.g. "Act II") */
@media (min-width:901px){.psec.wide .bhead > :first-child{margin-top:calc(-17px - var(--g))}}

/* loop layouts */
.loops.pairs a{grid-column:span 3!important}
.loops.stack{grid-template-columns:1fr}
.loops.stack a{grid-column:auto!important}
.loops.stack img,.loops.stack video{aspect-ratio:auto;height:auto}
.loops.natural{display:flex;gap:var(--gap);align-items:flex-start}
.loops.natural a{flex:var(--ar,1.78) 1 0;min-width:0}
.loops.natural img,.loops.natural video{aspect-ratio:var(--ar,16/9);height:auto}
.process.c3{columns:3}
@media (max-width:700px){.loops.natural{flex-wrap:wrap}.loops.natural a{flex:1 1 100%}.process.c3{columns:2}}
.loops img,.loops video{aspect-ratio:var(--sa,16/9);object-fit:cover;width:100%;display:block}
.loops{--sa:16/9}
.process.c1{columns:1}.process.c2{columns:2}



/* hover byline on commissioned covers: "● Directed by Tom" */
.cv .by{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:11px;letter-spacing:.06em;color:#fff;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s cubic-bezier(.2,.7,.2,1)}
.cv .by i{width:7px;height:7px;border-radius:50%;background:var(--rust);flex:none}
.cv:hover .by{opacity:1;transform:none}
@media (hover:none){.cv .by{opacity:1;transform:none}}
#allcovers{margin-top:clamp(40px,4vw,64px)}

/* ---------- homepage: film panels — first one wide (scope), the rest in pairs; caption stacked under the frame ---------- */
.wides{display:grid;grid-template-columns:1fr 1fr;gap:clamp(56px,6vw,96px) var(--gap);padding:0 var(--px)}
.rw{display:block;min-width:0}
.rw:first-child{grid-column:1 / -1}
.rw .im{position:relative;aspect-ratio:16/9;overflow:hidden;background:#151515}
.rw:first-child .im{aspect-ratio:2.39/1}
.rw img,.rw video{position:absolute;inset:0;transition:transform 1.4s cubic-bezier(.2,.7,.2,1),opacity .6s}
.rw video{opacity:0}
.rw video.ready{opacity:1}
.rw .t{padding-top:16px}
.rw h2{font-size:clamp(28px,2.6vw,42px);color:#9a9a9a;transition:color .35s}
.rw .cap{display:block;margin-top:8px;color:var(--mute)}
.rw:hover video,.rw:hover img{transform:scale(1.02)}
.rw:hover h2{color:#fff}

/* recent commissioned work uses the same panels, all in pairs */
.wides.pairs .rw:first-child{grid-column:auto}
.wides.pairs .rw:first-child .im{aspect-ratio:16/9}
/* commissioned page: first one wide, the rest in pairs; when a filter is on, everything in pairs */
.wides.filtered .rw:first-child{grid-column:auto}
.wides.filtered .rw:first-child .im{aspect-ratio:16/9}
.titles-in .wides.filtered .rw:first-child h2{font-size:clamp(28px,2.6vw,42px)}
.rw.hide{display:none}
/* commissioned page: if the last one would sit alone, it goes wide too */
#allcovers:not(.filtered) .rw:last-child:nth-child(even){grid-column:1 / -1}
#allcovers:not(.filtered) .rw:last-child:nth-child(even) .im{aspect-ratio:2.39/1}
.titles-in #allcovers:not(.filtered) .rw:last-child:nth-child(even) h2{font-size:clamp(36px,4vw,64px)}

/* variant: titles in white INSIDE the frame (add class "titles-in" to <main> in index.html) */
.titles-in .rw{position:relative}
.titles-in .rw .im::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,0) 45%);pointer-events:none}
.titles-in .rw .t{position:absolute;left:clamp(16px,2vw,28px);right:clamp(16px,2vw,28px);bottom:clamp(14px,1.8vw,24px);padding:0;z-index:2}
.titles-in .rw h2{color:#fff}
.titles-in .rw .cap{color:#cfcfcf}
.titles-in .rw:first-child h2{font-size:clamp(36px,4vw,64px)}
.titles-in .wides.pairs .rw:first-child h2{font-size:clamp(28px,2.6vw,42px)}

@media (max-width:900px){
  .wides{grid-template-columns:1fr}
  .rw .im,.rw:first-child .im{aspect-ratio:4/3}
}

/* scroll cue: thin line arrow at the bottom of the top video, fades out once you scroll */
.scrollcue{position:absolute;left:var(--px);bottom:16px;z-index:3;width:18px;height:34px;margin-left:-5px;pointer-events:none;opacity:.7;transition:opacity .6s ease}
.scrollcue svg{display:block;width:100%;height:100%;animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
body.scrolled .scrollcue{opacity:0}
@media (prefers-reduced-motion:reduce){.scrollcue svg{animation:none}}

/* a new part of a project page (e.g. Booking Part 01/02/03): thin line + extra space above */
.psec.part{position:relative;margin-top:calc(var(--sec) * .6)}
.psec.part::before{content:"";position:absolute;left:var(--px);right:var(--px);top:0;border-top:1px solid var(--line)}

/* block video that just plays (muted loop, no controls) — e.g. Booking films */
.bvideo{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;margin-bottom:clamp(48px,6vw,96px)}
.bvideo video,.bvideo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bhead + .bvideo{margin-top:36px}
.bvideo:last-child{margin-bottom:0}
.bfilm + .stills,.bfilm + .process{margin-top:clamp(48px,6vw,96px)}

/* image grids (on set, process, acts): rows of equal height, images cropped to fill,
   last row stretches so the bottom edge is one straight line */
.process:not(.row){columns:auto;display:flex;flex-wrap:wrap;gap:var(--gap)}
.process:not(.row) a{margin:0;min-width:0;flex:1 1 calc((100% - 3 * var(--gap)) / 4);height:clamp(140px,16vw,270px)}
.process.c3:not(.row) a{flex-basis:calc((100% - 2 * var(--gap)) / 3);height:clamp(160px,21vw,360px)}
.process.c2:not(.row) a{flex-basis:calc((100% - var(--gap)) / 2);height:clamp(180px,30vw,520px)}
.process.c1:not(.row) a{flex-basis:100%;height:auto}
.process:not(.row)[style*="--ra"] a{height:auto;aspect-ratio:var(--ra)}
.process:not(.row) img,.process:not(.row) video{width:100%;height:100%;object-fit:cover}
.process.c1:not(.row) img,.process.c1:not(.row) video{height:auto}
@media (max-width:700px){.process:not(.row) a,.process.c3:not(.row) a{flex-basis:calc((100% - var(--gap)) / 2);height:clamp(120px,32vw,220px)}}