/* Fly-through showcase + project detail pages. Height is fixed here (never by JS) so nothing shifts. */
.ft{position:relative;height:calc(var(--ft-len,280) * 1vh);margin:0}
@supports (height:1svh){.ft{height:calc(var(--ft-len,280) * 1svh)}}
.ft-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#050509;contain:paint}
@supports (height:1svh){.ft-stage{height:100svh}}
.ft-poster,.ft-poster img,.ft-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ft-video{opacity:0;transition:opacity .35s ease}
.ft-ready .ft-video{opacity:1}
.ft-cap{position:absolute;left:clamp(16px,4vw,48px);bottom:clamp(18px,6vh,56px);z-index:2;margin:0;padding:10px 16px;border-radius:999px;
  font:500 12px/1.2 var(--font-mono,ui-monospace,monospace);letter-spacing:.14em;text-transform:uppercase;color:#f6efd8;
  background:rgba(5,5,9,.72);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.ft-cap.on{opacity:1;transform:none}
.ft-cap.right{left:auto;right:clamp(16px,4vw,48px)}
.ft-hint{position:absolute;right:clamp(16px,4vw,48px);top:clamp(80px,12vh,120px);z-index:2;margin:0;font:500 11px/1 var(--font-mono,ui-monospace,monospace);
  letter-spacing:.24em;text-transform:uppercase;color:rgba(246,239,216,.7)}
.ft-list{display:none}
/* reduced motion or no JS-video: a still of the final frame, then the screens listed */
.ft-static.ft{height:auto}
.ft-static .ft-stage{position:relative;height:auto;aspect-ratio:16/9}
.ft-static .ft-video,.ft-static .ft-cap,.ft-static .ft-hint{display:none}
.ft-static .ft-list{display:block}
@media (prefers-reduced-motion:reduce){.ft{height:auto}.ft-stage{position:relative;height:auto;aspect-ratio:16/9}.ft-video,.ft-cap,.ft-hint{display:none}.ft-list{display:block}}
@media (max-aspect-ratio:4/5){.ft-static .ft-stage{aspect-ratio:9/16}}
@media (max-aspect-ratio:4/5) and (prefers-reduced-motion:reduce){.ft-stage{aspect-ratio:9/16}}

/* detail page bits */
.wd-shots{display:grid;gap:clamp(20px,3vw,36px);margin:clamp(32px,6vh,64px) 0}
.wd-shot{margin:0}
.wd-shot img{width:100%;height:auto;display:block;border-radius:12px;box-shadow:0 30px 80px -30px rgba(0,0,0,.6),0 0 0 1px rgba(127,127,127,.18)}
.wd-shot figcaption{margin-top:10px;font-size:.9rem;opacity:.75}
.wd-shot.phone{max-width:360px}
.wd-shot.phone img{border-radius:28px}
@media (min-width:900px){.wd-shots.two{grid-template-columns:2fr 1fr;align-items:start}}
.wd-live{font-size:.95rem;opacity:.85}
.wd-live a{white-space:nowrap}

/* mattebersole: showcase length per project (no inline styles on static pages) */
.ft-len-a{--ft-len:250}.ft-len-b{--ft-len:290}.ft-len-c{--ft-len:330}
.ft-cap{font-family:"JetBrains Mono",ui-monospace,monospace}