/* The studio section: /studio/ and /studio/albayan/ (build/studio_page.py).
   Loaded by those pages only; everything else comes from style.css. */

/* ---- the film player: a poster and a button; no <video> exists before the click ---- */
.sfilm{position:relative;margin:0;border:1px solid var(--line);border-radius:calc(var(--r) + 6px);
  overflow:hidden;background:#000;aspect-ratio:16/9;isolation:isolate}
.sfilm img,.sfilm video{display:block;width:100%;height:100%;object-fit:cover}
.sfilm video{object-fit:contain;background:#000}
.sf-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:var(--s2);border:0;cursor:pointer;color:#F4DCC4;font:inherit;
  background:radial-gradient(ellipse at center,rgba(8,11,15,.18),rgba(8,11,15,.62))}
.sf-play i{width:clamp(64px,8vw,96px);aspect-ratio:1;border-radius:50%;border:1.5px solid #F5B231;
  display:grid;place-items:center;transition:transform .35s var(--ease),background .35s var(--ease)}
.sf-play i::before{content:"";border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #F5B231;margin-inline-start:5px;transition:border-color .35s}
.sf-play:hover i,.sf-play:focus-visible i{transform:scale(1.07);background:#F5B231}
.sf-play:hover i::before,.sf-play:focus-visible i::before{border-left-color:#0F151C}
.sf-play span{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase}
html[lang="ar"] .sf-play span{letter-spacing:0;text-transform:none;font-size:.9rem}
.sf-bar{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);flex-wrap:wrap;
  margin-top:var(--s2);color:var(--dim);font-size:.82rem}
.sf-hd{border:1px solid var(--line2);border-radius:100px;background:none;color:var(--ink);
  font:inherit;font-size:.78rem;padding:.45em 1.1em;cursor:pointer}
.sf-hd.on{border-color:var(--fire);color:var(--fire)}
.sf-hd[hidden]{display:none}

/* ---- the featured film on /studio/ ---- */
.sfeat{display:block;position:relative;border:1px solid var(--line);border-radius:calc(var(--r) + 6px);
  overflow:hidden;background:#000;color:#F4DCC4;isolation:isolate}
.sfeat img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  transition:transform 1.2s var(--ease)}
.sfeat:hover img{transform:scale(1.03)}
.sfeat .lb{position:absolute;inset-inline:0;bottom:0;padding:clamp(18px,3.4vw,44px);
  background:linear-gradient(to top,rgba(8,11,15,.9),rgba(8,11,15,0));
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s3);flex-wrap:wrap}
.sfeat .lb b{display:block;font-family:"Bebas Neue",sans-serif;font-weight:400;line-height:.95;
  font-size:clamp(2.2rem,5.6vw,4.6rem);letter-spacing:.01em}
html[lang="ar"] .sfeat .lb b{font-family:"Cairo";font-weight:900;line-height:1.3;font-size:clamp(1.7rem,4.4vw,3.4rem)}
.sfeat .lb small{display:block;color:#F5B231;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;margin-bottom:10px}
html[lang="ar"] .sfeat .lb small{letter-spacing:0;text-transform:none;font-size:.86rem}
.sfeat .lb em{font-style:normal;font-size:.86rem;border-bottom:1px solid #F5B231;padding-bottom:3px;white-space:nowrap}
@media(max-width:640px){.sfeat .lb{position:static;background:#0B1015}}

.sfilms{display:grid;gap:var(--s4)}

/* ---- the unrendered frames: one row of mode buttons over the seven scenes ---- */
.sraw-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s3)}
.sraw-tabs button{border:1px solid var(--line2);border-radius:100px;background:none;color:var(--muted);
  font:inherit;font-size:.82rem;padding:.5em 1.15em;cursor:pointer}
.sraw-tabs button[aria-pressed="true"]{border-color:var(--fire);color:var(--fire)}
.sraw .sshot figcaption b{margin:0}
/* the raw-to-final clips: the film's player at the film's width, one under another
   (Amjad, 2026-10-04: bigger, close to the film itself) */
.sclips{display:grid;gap:var(--s5)}
.sclips-lede{color:var(--muted);max-width:66ch;margin:0 0 var(--s4);line-height:1.8}
.sclip p{margin:14px 0 0;font-size:1rem;font-weight:600}
.sclip p i{font-style:normal;color:var(--fire);font-size:.72rem;letter-spacing:.2em;margin-inline-end:.7em}

/* ---- grids of stills ---- */
.sgrid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.sgrid.three{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.sshot{margin:0}
.sshot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg2)}
.sshot figcaption{margin-top:12px;font-size:.9rem;color:var(--muted);line-height:1.6}
.sshot figcaption b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
.sshot figcaption i{font-style:normal;color:var(--fire);font-size:.72rem;letter-spacing:.2em;margin-inline-end:.7em}

/* the close of the film, version by version: one row that scrolls on a phone */
.sver{display:grid;grid-template-columns:repeat(5,minmax(180px,1fr));gap:var(--s2);
  overflow-x:auto;padding-bottom:var(--s1);scrollbar-width:thin}
.sver .sshot figcaption{font-size:.8rem;margin-top:8px}

.scmp{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media(max-width:640px){.scmp{grid-template-columns:1fr}}

/* ---- text blocks ---- */
.s2col{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s5) var(--s6);align-items:start}
@media(max-width:900px){.s2col{grid-template-columns:1fr}}
.s2col p{color:var(--muted);line-height:1.8;margin:0 0 var(--s3);max-width:62ch}
.ssub{margin:var(--s6) 0 var(--s3);font-size:1.05rem;font-weight:600}
.ssub+p{color:var(--muted);max-width:66ch;margin:0 0 var(--s4);line-height:1.8}
.ssteps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:var(--s3)}
.ssteps li{counter-increment:s;display:grid;grid-template-columns:3.2ch 1fr;gap:var(--s2);
  padding-top:var(--s3);border-top:1px solid var(--line)}
.ssteps li::before{content:counter(s,decimal-leading-zero);color:var(--fire);font-size:.78rem;
  letter-spacing:.14em;padding-top:.25em}
.ssteps b{display:block;font-weight:600;margin-bottom:4px}
.ssteps li>div>span{color:var(--muted);line-height:1.75}
.snums{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.snums div{background:var(--bg);padding:var(--s3)}
.snums b{display:block;font-family:"Bebas Neue",sans-serif;font-weight:400;line-height:1;
  font-size:clamp(2.2rem,4.4vw,3.4rem);color:var(--ink)}
.snums span{display:block;margin-top:8px;color:var(--dim);font-size:.82rem;line-height:1.5}
.snote{color:var(--dim);font-size:.82rem;margin-top:var(--s3);max-width:70ch;line-height:1.7}
.scta{border:1px solid var(--line);border-radius:calc(var(--r) + 6px);background:var(--bg2);
  padding:clamp(24px,5vw,64px);display:grid;gap:var(--s4)}
.scta .btn{justify-self:start}
/* the buttons that reach him: under the film and in the closing block */
.sask span{display:flex;flex-wrap:wrap;gap:12px}
.sask span[hidden]{display:none}
.sask-row{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line)}
.sask-row p{margin:0;font-weight:600;font-size:1.05rem}