/* Featured project: Bambuu film, looped inside a screen and phone mockup.
   Used by index.html and website-design.html, with assets/js/featured-film.js.
   The devices show the first frame; featured-film.js loops the film over it while the
   section is on screen. */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-400-latin.woff2') format('woff2');}
.ft{--bb-cream:#fdf9f0;--bb-gold:#e8cc88;position:relative;}
.ft-intro{text-align:center;max-width:980px;padding-top:120px;}
.ft-intro .body-lg{max-width:820px;margin:18px auto 0;}
.ft-tag{font-size:14px;letter-spacing:0.02em;border:2px solid var(--jc-teal);color:var(--jc-teal);padding:8px 16px;border-radius:10px;margin-bottom:28px;}
.ft-track{position:relative;}
.ft-stage{padding:64px 0 0;}

/* devices: a browser showing the wide crop and a phone showing the upright crop */
.ft-devices{position:relative;width:100%;max-width:1120px;margin:0 auto;padding-right:9%;}
.ft-browser{padding:7px;border-radius:24px;background:#1a1a1a;border:1px solid var(--jc-line);box-shadow:0 40px 90px rgba(0,0,0,0.6);}
.ft-browser .ft-screen{border-radius:17px;}
.ft-screen{position:relative;overflow:hidden;background:#0f0f0f;}
[data-ft-screen="wide"]{aspect-ratio:16/9;}
.ft-poster,.ft-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.ft-canvas{opacity:0;transition:opacity .4s ease;}
.ft-screen.is-drawn .ft-canvas{opacity:1;}
.ft-phone{position:absolute;right:0;bottom:-8%;width:23%;padding:7px;border-radius:32px;background:#1a1a1a;border:1px solid var(--jc-line);box-shadow:0 30px 70px rgba(0,0,0,0.65);}
.ft-phone .ft-screen{aspect-ratio:9/18;border-radius:25px;}

/* a light sketch of the Bambuu site over the film, in their type and colours */
.ft-site{position:absolute;inset:0;pointer-events:none;color:var(--bb-cream);font-family:Georgia,'Times New Roman',serif;
  background:linear-gradient(to top,rgba(10,6,6,0.82) 0%,rgba(10,6,6,0.25) 42%,rgba(10,6,6,0) 60%),linear-gradient(to bottom,rgba(10,6,6,0.55),rgba(10,6,6,0) 22%);}
.ft-site__hdr{position:absolute;top:4%;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:4.5%;font-size:clamp(7px,0.66vw,11px);letter-spacing:0.18em;text-transform:uppercase;color:rgba(253,249,240,0.8);}
.ft-site__hdr img{width:7%;height:auto;display:block;}
.ft-site__eyebrow{position:absolute;left:5%;top:44%;margin:0;font-size:clamp(7px,0.66vw,11px);letter-spacing:0.24em;text-transform:uppercase;color:var(--bb-gold);}
.ft-caps{position:absolute;left:5%;right:30%;bottom:8%;height:40%;}
.ft-cap{position:absolute;left:0;right:0;bottom:0;opacity:0;will-change:opacity,transform;}
.ft-cap strong{display:block;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(22px,3.2vw,52px);line-height:1.02;letter-spacing:-0.01em;}
.ft-cap span{display:block;margin-top:10px;font-size:clamp(10px,0.95vw,15px);line-height:1.5;color:rgba(253,249,240,0.72);max-width:44ch;}
.ft-site__dots{position:absolute;right:3%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;}
.ft-site__dots i{width:5px;height:5px;border-radius:50%;background:rgba(253,249,240,0.3);transition:background .3s ease,transform .3s ease;}
.ft-site__dots i.on{background:var(--bb-gold);transform:scale(1.4);}
/* the phone shows the film and logo beside the browser, and the captions too once it is the only device */
.ft-phone .ft-site__hdr{top:5%;}
.ft-phone .ft-site__hdr img{width:24%;}
.ft-phone .ft-site__eyebrow,.ft-phone .ft-caps{display:none;}
/* the reveal fade from jc.js would hide the eyebrow inside the mock site */
.ft-stage p.rf{opacity:1;transform:none;}


.ft-outro{text-align:center;padding-top:110px;padding-bottom:30px;}
.ft-ask{font-family:var(--jc-display);text-transform:uppercase;font-size:clamp(30px,3.4vw,54px);line-height:0.96;letter-spacing:-0.02em;color:var(--jc-head);margin:0;}
.ft-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:32px;}

@media (max-width:1024px){
  .ft-site__hdr span{display:none;}
}
/* phones and narrow tablets: the phone is the only device */
@media (max-width:860px){
  .ft-intro{padding-top:80px;}
  .ft-devices{padding-right:0;max-width:none;}
  .ft-browser{display:none;}
  .ft-phone{position:relative;right:auto;bottom:auto;width:auto;height:min(70vh,600px);height:min(70svh,600px);aspect-ratio:9/18;max-width:100%;margin:0 auto;}
  .ft-phone .ft-screen{height:100%;aspect-ratio:auto;}
  .ft-phone .ft-site__eyebrow,.ft-phone .ft-caps{display:block;}
  .ft-phone .ft-site__eyebrow{left:8%;top:auto;bottom:38%;font-size:9px;}
  .ft-phone .ft-caps{right:8%;left:8%;bottom:6%;height:30%;}
  .ft-phone .ft-cap strong{font-size:26px;}
  .ft-phone .ft-cap span{font-size:12px;}
  .ft-stage{padding-top:44px;}
  .ft-outro{padding-top:60px;}
}
@media (max-width:760px){
  .ft-cta{flex-direction:column;align-items:center;}
}
@media (prefers-reduced-motion:reduce){
  .ft-canvas{transition:none!important;}
}