.ffp,
.ffp *,
.ffp *::before,
.ffp *::after{box-sizing:border-box}

.ffp{
  --ffp-bg:#07080a;
  --ffp-text:#f5f2ec;
  --ffp-muted:rgba(245,242,236,.46);
  --ffp-soft:rgba(245,242,236,.12);
  --ffp-line:rgba(245,242,236,.12);
  --ffp-accent:#ff5a1a;
  --ffp-max:1700px;
  position:relative;
  width:100%;
  background:var(--ffp-bg);
  color:var(--ffp-text);
  overflow:hidden;
  isolation:isolate;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.ffp-shell{width:min(100%,var(--ffp-max));margin:0 auto;padding:clamp(34px,5vw,78px) clamp(14px,3vw,44px) clamp(56px,7vw,110px)}

.ffp-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:clamp(22px,3vw,38px)}
.ffp-headline{display:flex;align-items:center;gap:12px;min-width:0}
.ffp-head h2{margin:0;font-size:clamp(1.7rem,3.2vw,3.35rem);line-height:.95;letter-spacing:-.055em;font-weight:760}
.ffp-mark{width:9px;height:9px;flex:0 0 auto;border-radius:50%;background:var(--ffp-accent);box-shadow:0 0 0 7px rgba(255,90,26,.06),0 0 22px rgba(255,90,26,.24)}
.ffp-count{font:700 .63rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,242,236,.38);white-space:nowrap}

.ffp-nav{display:flex;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none;padding:0 0 10px;margin:0 -2px 14px;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
.ffp-nav::-webkit-scrollbar{display:none}
.ffp-nav button{appearance:none;border:1px solid transparent;background:transparent;color:var(--ffp-accent);font:800 .74rem/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;padding:10px 13px;border-radius:999px;white-space:nowrap;cursor:pointer;scroll-snap-align:start;transition:color .25s ease,background .25s ease,border-color .25s ease,transform .25s ease}
.ffp-nav button[aria-selected="true"]{color:var(--ffp-text);background:rgba(245,242,236,.12);border-color:rgba(245,242,236,.06)}
@media (hover:hover) and (pointer:fine){.ffp-nav button:hover{transform:translateY(-1px);background:rgba(255,90,26,.06)}}

.ffp-stage{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);align-items:start;contain:layout paint}

.ffp-item{--ffp-span:4;--ffp-ratio:1.2;--ffp-shift:0px;position:relative;grid-column:span var(--ffp-span);min-width:0;transform:translate3d(0,var(--ffp-shift),0);transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .35s ease,filter .35s ease;content-visibility:auto;contain:paint}
.ffp-item:nth-child(6n+1){--ffp-span:7;--ffp-shift:0px}
.ffp-item:nth-child(6n+2){--ffp-span:5;--ffp-shift:34px}
.ffp-item:nth-child(6n+3){--ffp-span:4;--ffp-shift:-8px}
.ffp-item:nth-child(6n+4){--ffp-span:4;--ffp-shift:24px}
.ffp-item:nth-child(6n+5){--ffp-span:4;--ffp-shift:-20px}
.ffp-item:nth-child(6n+6){--ffp-span:8;--ffp-shift:16px}

.ffp-media{position:relative;display:block;width:100%;aspect-ratio:var(--ffp-ratio);overflow:hidden;border:0;background:#0d0e11;cursor:pointer;text-align:left;padding:0}
.ffp-media::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.72));z-index:1;pointer-events:none;opacity:.7}
.ffp-media::after{content:"";position:absolute;inset:0;border:1px solid rgba(245,242,236,.13);opacity:.65;z-index:2;pointer-events:none;mix-blend-mode:screen}
.ffp-media img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .9s cubic-bezier(.16,.8,.18,1),filter .6s ease;filter:saturate(.82) contrast(1.02);will-change:transform}
.ffp-media .ffp-project-code{position:absolute;left:12px;top:11px;z-index:3;font:700 .54rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.11em;color:rgba(245,242,236,.62);text-transform:uppercase}
.ffp-media .ffp-play{position:absolute;right:12px;top:11px;z-index:3;width:32px;height:32px;border:1px solid rgba(245,242,236,.35);background:rgba(7,8,10,.35);backdrop-filter:blur(7px);border-radius:50%;display:grid;place-items:center;color:#fff;font-size:11px;line-height:1}
.ffp-media .ffp-copy{position:absolute;left:13px;right:13px;bottom:12px;z-index:3;display:flex;justify-content:space-between;align-items:end;gap:16px}
.ffp-media .ffp-title{margin:0;font-size:clamp(.94rem,1.35vw,1.45rem);line-height:.98;letter-spacing:-.035em;font-weight:700;color:#fff;max-width:80%}
.ffp-media .ffp-meta{font:700 .54rem/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.11em;text-transform:uppercase;color:rgba(245,242,236,.5);text-align:right;white-space:nowrap}

@media (hover:hover) and (pointer:fine){
  .ffp-stage:has(.ffp-media:hover) .ffp-item{filter:saturate(.6);opacity:.52}
  .ffp-stage:has(.ffp-media:hover) .ffp-item:hover{filter:none;opacity:1;z-index:5;transform:translate3d(0,calc(var(--ffp-shift) - 5px),0) scale(1.012)}
  .ffp-media:hover img{transform:scale(1.055);filter:saturate(1.05) contrast(1.04)}
  .ffp-media:hover::after{border-color:rgba(255,90,26,.34)}
}

.ffp-empty{padding:40px 20px;color:#fff;background:#07080a}

.ffp-modal{width:min(1180px,calc(100vw - 24px));max-width:none;border:0;padding:0;background:#090a0c;color:#fff;border-radius:0;box-shadow:0 30px 100px rgba(0,0,0,.55)}
.ffp-modal::backdrop{background:rgba(3,4,5,.84);backdrop-filter:blur(12px)}
.ffp-modal-inner{position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.5fr);min-height:min(78vh,820px)}
.ffp-modal-media{background:#050608;display:grid;place-items:center;min-width:0;overflow:hidden}
.ffp-modal-media img,.ffp-modal-media video,.ffp-modal-media iframe{width:100%;height:100%;min-height:100%;display:block;border:0;object-fit:contain}
.ffp-modal-media iframe{aspect-ratio:16/9;align-self:center;height:auto;min-height:0}
.ffp-modal-close{position:absolute;z-index:10;top:12px;right:12px;width:42px;height:42px;border:1px solid rgba(255,255,255,.18);background:rgba(7,8,10,.58);color:#fff;border-radius:50%;font-size:27px;line-height:1;cursor:pointer}
.ffp-modal-info{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,3vw,42px);border-left:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg,#0b0c0f,#07080a)}
.ffp-modal-kicker{display:block;margin-bottom:14px;color:var(--ffp-accent);font:800 .6rem/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.16em;text-transform:uppercase}
.ffp-modal-info h3{margin:0;font-size:clamp(2rem,4.6vw,4.6rem);line-height:.92;letter-spacing:-.065em;max-width:9ch}
.ffp-modal-meta{display:grid;gap:10px;color:rgba(245,242,236,.56);font-size:.82rem;line-height:1.55}
.ffp-modal-meta span{display:block}
.ffp-modal-meta strong{color:#fff;font-weight:650}

@media (max-width:980px){
  .ffp-item{grid-column:span 6!important;--ffp-shift:0px!important}
  .ffp-item:nth-child(3n+1){grid-column:span 8!important}
  .ffp-item:nth-child(3n+2){grid-column:span 4!important}
  .ffp-modal-inner{grid-template-columns:1fr}
  .ffp-modal-media{min-height:54vh}
  .ffp-modal-info{border-left:0;border-top:1px solid rgba(255,255,255,.09)}
}

@media (max-width:640px){
  .ffp-shell{padding:34px 12px 58px}
  .ffp-head{margin-bottom:20px}
  .ffp-head h2{font-size:2rem}
  .ffp-stage{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .ffp-item,.ffp-item:nth-child(3n+1),.ffp-item:nth-child(3n+2){grid-column:span 1!important;--ffp-shift:0px!important}
  .ffp-item:nth-child(5n+1){grid-column:span 2!important}
  .ffp-item:nth-child(5n+4){grid-column:span 2!important}
  .ffp-media .ffp-copy{left:10px;right:10px;bottom:10px}
  .ffp-media .ffp-title{font-size:1rem}
  .ffp-media .ffp-meta{display:none}
  .ffp-media .ffp-project-code{left:10px;top:10px}
  .ffp-media .ffp-play{right:10px;top:10px}
  .ffp-modal{width:calc(100vw - 10px);max-height:calc(100dvh - 10px)}
  .ffp-modal-media{min-height:43vh}
  .ffp-modal-info{padding:20px}
  .ffp-modal-info h3{font-size:2.7rem}
}

@media (prefers-reduced-motion:reduce){
  .ffp-nav button,.ffp-item,.ffp-media img{transition:none!important}
}