/* ------------------------------------------------------------------
   The live pieces. Every window on this page is the real page running
   in an iframe, not a screenshot of it.
   ------------------------------------------------------------------ */

/* a page designed at 1440, scaled into whatever box it is given */
.live{position:relative;overflow:hidden;background:#FAFAF8 center top / cover no-repeat}
.live iframe{position:absolute;left:0;top:0;width:1440px;height:900px;border:0;
  transform-origin:0 0;opacity:0;transition:opacity .5s var(--e);pointer-events:none}
.live.ready iframe{opacity:1}
.live.hot iframe{pointer-events:auto}
.live .idle{position:absolute;left:14px;bottom:12px;z-index:2;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  color:var(--ink);opacity:.4;transition:opacity .4s var(--e)}
.live.ready .idle{opacity:0}

/* an animation that sizes itself to its box */
.fill{position:relative;overflow:hidden}
.fill iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  opacity:0;transition:opacity .5s var(--e)}
.fill.ready iframe{opacity:1}

/* the hero strip is the live landing, clipped to a band */
.strip.live{height:clamp(340px,43vw,620px)}

/* the slider cards hold live pages */
.rcard .f.live{aspect-ratio:1.6}

/* the walk, right hand side is one live page the scroll drives */
.wright{background:#FAFAF8;position:relative}
.wview{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.wview .live{width:100%;height:auto;aspect-ratio:1.6}
.wrun{height:620vh}
.wtag{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:center;
  pointer-events:none;z-index:3}
.wtag span{background:var(--ink);color:var(--eyetx);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:500;padding:4px 9px 3px}

/* the assets, live animations on the dark band */
.aset{margin-top:48px}
.abig{height:clamp(300px,34vw,520px);background:#F4F3F0}
.arow{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px}
.arow .fill{height:clamp(200px,20vw,300px);background:#FAFAF8}
.acap{display:flex;gap:14px;align-items:baseline;margin-top:14px}
.aftr{height:clamp(200px,22vw,330px);background:#15130F;margin-top:24px}
.mach .acap .t{font-size:17px;line-height:21px;font-weight:500;letter-spacing:-.01em;color:var(--cream)}
.mach .acap .s{color:var(--cream);opacity:.45}
.drawhead{display:flex;gap:16px;align-items:center;margin-top:86px;
  border-top:1px solid rgba(205,227,232,.16);padding-top:26px}

/* the films, the real cut */
.film .f{aspect-ratio:16/9;background:var(--dark);overflow:hidden}
.film video{width:100%;height:100%;display:block;object-fit:cover;background:var(--dark)}

@media (max-width:1100px){
  .wrun{height:420vh}
  .wview{height:auto;top:14vh;padding:0}
  .arow{grid-template-columns:1fr}
  .abig{height:clamp(240px,52vw,420px)}
}

/* ---------- a direction, opened large ---------- */
#cfx{position:fixed;inset:0;z-index:430;display:none;background:rgba(16,14,11,.93);align-items:center;justify-content:center}
#cfx.on{display:flex}
#cfx .cfsheet{position:relative;overflow:hidden;background:#0b0d0e}
#cfx iframe{position:absolute;left:0;top:0;width:1440px;height:900px;border:0;transform-origin:0 0}
#cfx .cfn,#cfx .cfshut{position:fixed;width:46px;height:46px;background:none;padding:0;cursor:pointer;
  border:1px solid rgba(255,250,216,.26);display:grid;place-items:center;
  transition:border-color .18s var(--e,ease),background .18s var(--e,ease)}
#cfx .cfn{top:50%;margin-top:-23px}
#cfx .cfn:hover,#cfx .cfshut:hover{border-color:rgba(255,250,216,.7);background:rgba(255,250,216,.08)}
#cfx .prev{left:60px}
#cfx .next{right:60px}
#cfx .cfshut{top:28px;right:28px}
#cfx .cfbar{position:fixed;left:0;right:0;bottom:0;height:78px;display:flex;align-items:center;justify-content:space-between;
  padding:0 40px;pointer-events:none}
#cfx .cap,#cfx .count{color:#CDE3E8;font-size:11px;font-weight:500;letter-spacing:.18em;line-height:14px;text-transform:uppercase}
#cfx .cap{opacity:.74}
#cfx .count{opacity:.5}