/* FFPP studio site — one stylesheet for every page.
   Tokens are 03-visual-identity-brief.md section 3, verbatim. Dark mode is the ident's
   palette (OSD white on tape black) and nothing else changes, per the brief.
   Typefaces are the brief's candidates and are pending board 2. */

:root{
  --paper:#F7F5EF;
  --panel:#FFFFFF;
  --ink:#111111;
  --ink-soft:#5C5750;
  --rule:#DDD8CD;
  --rec:#E4322B;
  --stripe-a:#F5B400;
  --stripe-b:#2B7BBF;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(16px,5vw,48px);
  --measure:66ch;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#111111;
    --panel:#191917;
    --ink:#F4F4F0;
    --ink-soft:#A9A39A;
    --rule:#2E2E2B;
    --rec:#FF5A52;
  }
}
:root[data-theme="dark"]{
  --paper:#111111;
  --panel:#191917;
  --ink:#F4F4F0;
  --ink-soft:#A9A39A;
  --rule:#2E2E2B;
  --rec:#FF5A52;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{text-wrap:balance;margin:0;font-weight:600;line-height:1.15}
p{margin:0}
a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible{outline:2px solid var(--rec);outline-offset:3px;border-radius:2px}
img{max-width:100%;display:block}

/* ——— the mark ——— */
.mark{width:36px;height:36px;flex:none}
.mark .btn{fill:var(--ink)}
.mark .tri{fill:var(--paper)}

/* ——— header ——— */
.top{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:10;
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.top-in{
  max-width:1120px;margin:0 auto;padding-block:12px;padding-inline:var(--gutter);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
/* The horizontal lockup, in HTML: mark, then FFPP with PICTURES tracked out beneath it to
   the same width. Mirrors identity/lockup/horizontal.svg in the studio repo. */
.lockup{display:flex;align-items:center;gap:11px;text-decoration:none}
.lockup .wm{display:flex;flex-direction:column;line-height:1}
.lockup b{font-family:var(--mono);font-weight:700;font-size:21px;letter-spacing:-.04em}
.lockup i{
  font-family:var(--mono);font-style:normal;font-size:8.5px;font-weight:600;
  letter-spacing:.335em;color:var(--ink-soft);margin-top:4px;
}
.top nav{margin-left:auto;display:flex;gap:clamp(14px,3vw,26px);font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.top nav a{text-decoration:none;color:var(--ink-soft)}
.top nav a:hover{color:var(--ink)}

main{max-width:1120px;margin:0 auto;padding-inline:var(--gutter)}
section{padding-block:clamp(52px,8vw,88px);border-top:1px solid var(--rule)}
section:first-of-type{border-top:0}
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:18px;
}

/* ——— hero ——— */
.hero{padding-block:clamp(44px,7vw,76px) clamp(40px,6vw,72px)}
.stripes{display:flex;gap:4px;margin-bottom:26px;max-width:220px}
.stripes i{height:6px;flex:1}
.stripes i:first-child{background:var(--stripe-a)}
.stripes i:last-child{background:var(--stripe-b)}
.hero h1{font-size:clamp(31px,5.4vw,52px);max-width:19ch;letter-spacing:-.02em}
.hero p{margin-top:22px;max-width:var(--measure);color:var(--ink-soft);font-size:clamp(17px,2vw,19px)}
.hero .name-note{
  margin-top:30px;font-family:var(--mono);font-size:14px;line-height:1.7;
  max-width:54ch;color:var(--ink);border-left:3px solid var(--stripe-a);padding-left:16px;
}

/* ——— the film, the one object on the page ——— */
.film{
  background:var(--panel);border:1px solid var(--rule);
  display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
}
.film-art{position:relative;background:var(--ink)}
.film-art img{width:100%;height:100%;object-fit:cover}
.osd{
  position:absolute;left:12px;bottom:11px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:#F4F4F0;
  text-shadow:0 1px 3px rgba(0,0,0,.65);
}
.film-body{padding:clamp(22px,3.4vw,34px);display:flex;flex-direction:column;gap:16px}
.film-body h3{font-size:clamp(25px,3.4vw,32px);letter-spacing:-.01em}
.film-body .logline{max-width:46ch;color:var(--ink-soft)}
.specs{
  display:flex;flex-wrap:wrap;gap:6px 22px;font-family:var(--mono);font-size:13px;
  color:var(--ink-soft);font-variant-numeric:tabular-nums;
}
.specs span{white-space:nowrap}
.film-cta{margin-top:auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:6px}
.btn-line{
  font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.02em;
  text-decoration:none;border:1.5px solid var(--ink);padding:10px 20px;display:inline-block;
}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.premiere{font-family:var(--mono);font-size:13px;color:var(--rec)}

/* ——— text blocks ——— */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(28px,4vw,56px)}
.prose p+p{margin-top:16px}
.prose{max-width:var(--measure);color:var(--ink-soft)}
.prose strong{color:var(--ink);font-weight:600}
.rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rules li{
  display:flex;gap:16px;padding-block:13px;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:14.5px;line-height:1.5;
}
.rules li:first-child{border-top:1px solid var(--rule)}
.rules li b{color:var(--ink-soft);font-weight:400;font-variant-numeric:tabular-nums;flex:none}

.lines{display:flex;flex-direction:column;gap:22px;max-width:var(--measure)}
.lines .len{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
.assets{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:2px;font-family:var(--mono);font-size:14px}
.assets li{padding-block:9px;border-bottom:1px solid var(--rule)}
.assets li:first-child{border-top:1px solid var(--rule)}

.contact-mail{font-family:var(--mono);font-size:clamp(19px,3vw,26px);letter-spacing:-.01em;display:inline-block;margin-top:4px}
.contact-note{margin-top:20px;color:var(--ink-soft);max-width:var(--measure)}

/* ——— the film page ——— */
.film-head{padding-block:clamp(40px,6vw,68px) clamp(30px,4vw,44px)}
.film-head h1{font-size:clamp(44px,9vw,92px);letter-spacing:-.03em;line-height:.98}
.film-head .tagline{margin-top:18px;font-family:var(--mono);font-size:clamp(15px,2.2vw,18px);color:var(--ink-soft)}
.poster-frame{position:relative;background:var(--ink);border:1px solid var(--rule);margin-top:clamp(26px,4vw,38px)}
.poster-frame img{width:100%;aspect-ratio:16/9;object-fit:cover;opacity:.92}
.poster-note{
  position:absolute;inset:auto 0 0 0;padding:16px clamp(14px,2.4vw,22px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;
  background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0));
  font-family:var(--mono);font-size:13px;color:#F4F4F0;
}
.poster-note .when{color:#FF8078}
.factsheet{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:14px}
.factsheet li{display:flex;gap:18px;padding-block:11px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.factsheet li:first-child{border-top:1px solid var(--rule)}
.factsheet .k{color:var(--ink-soft);flex:none;min-width:11ch}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:10px;overflow-x:auto;padding-bottom:10px}
.strip img{aspect-ratio:16/9;object-fit:cover;border:1px solid var(--rule)}
.ru{border-left:3px solid var(--stripe-b);padding-left:18px}
.ru h2{font-size:clamp(21px,3vw,26px);margin-bottom:16px}
.teachers{
  margin-top:clamp(30px,4vw,44px);padding:clamp(20px,3vw,28px);
  background:var(--panel);border:1px solid var(--rule);max-width:var(--measure);
}
.teachers .eyebrow{margin-bottom:12px}
.back{font-family:var(--mono);font-size:13px;color:var(--ink-soft);text-decoration:none}
.back:hover{color:var(--ink)}

/* ——— footer, the tape label ——— */
footer{padding-block:clamp(44px,6vw,64px) 64px;padding-inline:var(--gutter);max-width:1120px;margin:0 auto}
.label{background:var(--panel);border:1px solid var(--rule)}
.label .bar{height:7px}
.label .bar.a{background:var(--stripe-a)}
.label .bar.b{background:var(--stripe-b)}
.label-in{display:flex;align-items:center;gap:20px;padding:22px clamp(18px,3vw,28px);flex-wrap:wrap}
.label-in .mark{width:52px;height:52px}
.label-txt b{display:block;font-family:var(--mono);font-weight:700;font-size:clamp(17px,2.6vw,23px);letter-spacing:.02em}
.label-txt span{display:block;font-family:var(--mono);font-size:13px;color:var(--ink-soft);margin-top:3px}
.label-txt .full{color:var(--ink);font-weight:600;letter-spacing:.01em;margin-top:6px}
.label-rec{margin-left:auto;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--rec)}
.colophon{margin-top:20px;font-family:var(--mono);font-size:12px;color:var(--ink-soft);line-height:1.7}

@media (max-width:720px){
  .film{grid-template-columns:1fr}
  .film-art{aspect-ratio:4/3}
  .top nav{width:100%;margin-left:0;order:3;gap:18px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}