/* ===== Ratio Visuals — film library (homepage Films section + /our-work/films/) =====
   Cards, the mixed-format grid, filter chips and the lightbox player. Self-contained: it only reads
   the shared tokens (--acid, --bg, --line…) with fallbacks, so it works on the hand-built homepage
   (inline CSS) and on the generated pages (site.css) alike.

   Grid trick: 6 columns on desktop. A vertical (9:16) film spans 1 column, a horizontal (16:9) film
   spans 3 — three columns of 16:9 are within 1% of the height of one column of 9:16, so mixed rows
   line up without cropping either format. 4 columns on tablets (same 1:3 rule), 2 on phones. */
.fsec h2 .it,.fpage .it{font-family:'Fraunces',serif;font-style:italic;font-weight:300;text-transform:none;color:var(--acid,#d8ff36);letter-spacing:-.01em}
.flead{color:var(--muted,#8b8e92);font-size:17px;line-height:1.65;max-width:60ch;margin-top:22px}
.fgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;grid-auto-flow:row dense;margin-top:46px}
.fcard{position:relative;display:block;align-self:stretch;overflow:hidden;border-radius:4px;background:var(--bg2,#0d0f12);
  color:var(--white,#f5f6f3);isolation:isolate;cursor:pointer;-webkit-tap-highlight-color:transparent;
  border:1px solid rgba(255,255,255,.06);transition:border-color .4s}
.fcard.v{grid-column:span 1;aspect-ratio:9/16}
.fcard.w{grid-column:span 3;aspect-ratio:16/9}
.fcard[hidden]{display:none}
.fcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.001);color:transparent;
  transition:transform 1s cubic-bezier(.2,.7,.2,1),filter .6s;filter:saturate(1.02) brightness(.9)}
.fcard::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,9,11,.34) 0%,rgba(8,9,11,0) 22%,rgba(8,9,11,0) 50%,rgba(8,9,11,.9) 100%)}
.fcard:hover,.fcard:focus-visible{border-color:rgba(216,255,54,.45)}
.fcard:hover img,.fcard:focus-visible img{transform:scale(1.05);filter:saturate(1.06) brightness(1)}
.fcard:focus-visible{outline:2px solid var(--acid,#d8ff36);outline-offset:3px}
.fcard__play{position:absolute;left:50%;top:50%;z-index:2;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(8,9,11,.38);border:1px solid rgba(245,246,243,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .45s cubic-bezier(.2,.7,.2,1),background .3s,border-color .3s}
.fcard__play svg{width:18px;height:18px;margin-left:3px;fill:var(--white,#f5f6f3);transition:fill .3s}
.fcard:hover .fcard__play,.fcard:focus-visible .fcard__play{transform:scale(1.1);background:var(--acid,#d8ff36);border-color:var(--acid,#d8ff36)}
.fcard:hover .fcard__play svg,.fcard:focus-visible .fcard__play svg{fill:#08090b}
.fcard__dur{position:absolute;top:12px;right:12px;z-index:2;font-family:'Archivo',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.08em;padding:5px 9px;border-radius:100px;background:rgba(8,9,11,.62);color:#e9ebe7;font-variant-numeric:tabular-nums}
.fcard__txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 18px 16px;display:flex;flex-direction:column;gap:7px}
.fcard__t{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(14px,1.15vw,18px);line-height:1.08;text-transform:uppercase;letter-spacing:-.005em;
  text-shadow:0 1px 14px rgba(0,0,0,.45)}
.fcard__m{font-family:'Archivo',sans-serif;font-weight:700;font-size:10.5px;line-height:1.35;letter-spacing:.14em;text-transform:uppercase;color:var(--acid,#d8ff36)}
.fcard.w .fcard__t{font-size:clamp(16px,1.5vw,22px)}
.fsec__foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:34px;color:var(--muted,#8b8e92);font-size:14px}

/* filter chips (films page) */
.fchips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.fchip{font-family:'Archivo',sans-serif;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#cdcfcb;
  background:transparent;border:1px solid rgba(255,255,255,.16);border-radius:100px;padding:12px 18px;min-height:44px;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;transition:border-color .25s,color .25s,background .25s;-webkit-appearance:none;appearance:none}
.fchip .n{color:var(--muted,#8b8e92);font-variant-numeric:tabular-nums;transition:color .25s}
.fchip:hover{border-color:rgba(216,255,54,.55);color:var(--white,#f5f6f3)}
.fchip[aria-pressed="true"]{background:var(--acid,#d8ff36);border-color:var(--acid,#d8ff36);color:#08090b}
.fchip[aria-pressed="true"] .n{color:rgba(8,9,11,.6)}
.fchip:focus-visible{outline:2px solid var(--acid,#d8ff36);outline-offset:3px}
.fstatus,.fsr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fnote{color:var(--muted,#8b8e92);font-size:13px;margin-top:26px;line-height:1.6}

@media(max-width:1099px){
  .fgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .fcard__play{width:50px;height:50px;margin:-25px 0 0 -25px}
}
@media(max-width:699px){
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:34px}
  .fcard.w{grid-column:span 2}
  .fcard__txt{padding:14px 12px 12px;gap:5px}
  .fcard__t{font-size:13.5px}
  .fcard.w .fcard__t{font-size:16px}
  .fcard__m{font-size:9.5px;letter-spacing:.12em}
  .fcard__dur{top:9px;right:9px;font-size:10px;padding:4px 8px}
  .fcard__play{width:46px;height:46px;margin:-23px 0 0 -23px}
  .fcard__play svg{width:15px;height:15px}
  .flead{font-size:16px}
  /* one swipeable row of chips instead of five stacked rows */
  .fchips{flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin:0 calc(-1 * var(--gutter,22px));padding:6px var(--gutter,22px);scroll-padding:0 var(--gutter,22px)}
  .fchips::-webkit-scrollbar{display:none}
  .fchip{flex:none;padding:10px 13px;font-size:10.5px;letter-spacing:.08em;gap:7px}
  .fpage{padding-top:44px}
}

/* ---------- lightbox player ---------- */
html.flb-open{overflow:hidden}
.flb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:rgba(6,7,9,.97);color:var(--white,#f5f6f3);overflow-y:auto;overscroll-behavior:contain}
.flb::backdrop{background:rgba(6,7,9,.7)}
.flb[open]{display:flex;animation:flbIn .35s cubic-bezier(.2,.7,.2,1)}
@keyframes flbIn{from{opacity:0}to{opacity:1}}
.flb__in{margin:auto;width:100%;display:flex;align-items:center;justify-content:center;gap:40px;padding:64px 28px 28px}
.flb__stage{position:relative;flex:none;background:#000;border-radius:4px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.flb__stage video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.flb.is-w .flb__in{flex-direction:column;gap:22px}
.flb.is-w .flb__stage{aspect-ratio:16/9;width:min(100%,1280px,calc((100vh - 270px) * 16 / 9));width:min(100%,1280px,calc((100svh - 270px) * 16 / 9))}
.flb.is-v .flb__stage{aspect-ratio:9/16;height:min(calc(100vh - 130px),1280px);height:min(calc(100svh - 130px),1280px)}
.flb__info{width:100%;max-width:380px}
.flb.is-w .flb__info{max-width:none;width:min(100%,1280px,calc((100vh - 270px) * 16 / 9));display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 40px;align-items:end}
.flb__meta{font-family:'Archivo',sans-serif;font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--acid,#d8ff36)}
.flb__title{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(24px,2.6vw,40px);line-height:.98;letter-spacing:-.02em;text-transform:uppercase;margin:10px 0 14px}
.flb.is-w .flb__title{margin:8px 0 10px}
.flb__desc{color:#cdcfcb;font-size:16px;line-height:1.65;max-width:62ch}
.flb__app{display:inline-flex;align-items:center;gap:8px;margin-top:18px;min-height:44px;font-family:'Archivo',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--acid,#d8ff36);border-bottom:1px solid var(--acid,#d8ff36);padding:12px 0 4px}
.flb__app[hidden]{display:none}
.flb__app:hover{color:var(--white,#f5f6f3)}
.flb__nav{display:flex;align-items:center;gap:12px;margin-top:26px}
.flb.is-w .flb__nav{margin-top:0;grid-column:2;grid-row:1 / span 3;align-self:end}
.flb__count{font-family:'Archivo',sans-serif;font-weight:700;font-size:12px;letter-spacing:.12em;color:var(--muted,#8b8e92);min-width:56px;text-align:center;font-variant-numeric:tabular-nums}
.flb__btn{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.03);color:var(--white,#f5f6f3);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;line-height:1;transition:background .25s,border-color .25s,color .25s;-webkit-appearance:none;appearance:none}
.flb__btn:hover{background:var(--acid,#d8ff36);border-color:var(--acid,#d8ff36);color:#08090b}
.flb__btn:focus-visible{outline:2px solid var(--acid,#d8ff36);outline-offset:3px}
.flb__close{position:fixed;top:16px;right:16px;z-index:3;width:52px;height:52px;font-size:26px;background:rgba(8,9,11,.6)}
.flb__brand{position:fixed;top:30px;left:28px;font-family:'Archivo',sans-serif;font-weight:900;font-size:15px;text-transform:uppercase;opacity:.9}
.flb__brand b{color:var(--acid,#d8ff36)}
@media(max-width:860px){
  .flb__in{flex-direction:column;gap:20px;padding:76px 16px 28px}
  .flb.is-v .flb__stage{height:auto;width:min(100%,calc((100vh - 250px) * 9 / 16),420px);width:min(100%,calc((100svh - 250px) * 9 / 16),420px)}
  .flb.is-v .flb__info{max-width:none;width:min(100%,520px)}
  .flb.is-w .flb__stage,.flb.is-w .flb__info{width:100%}
  .flb.is-w .flb__info{display:block}
  .flb.is-w .flb__nav{margin-top:20px}
  .flb__title{font-size:26px}
  .flb__desc{font-size:15px}
  .flb__brand{top:30px;left:20px}
}
@media (prefers-reduced-motion:reduce){
  .flb[open]{animation:none}
  .fcard img,.fcard__play{transition:none}
}