/* ============================================================
   six eighty block — the mark, and the way it arrives.
   The wordmark is stacked and overlapping, so it builds in
   vertical slices rather than line by line.
   ============================================================ */

.lg{display:block;width:100%;height:auto;color:var(--ink)}
.lg .lg-dotfill{fill:#EE6122}

/* slices rise into a fixed clip; the dots land last */
.lg .lg-sl{transform-box:view-box;transform-origin:center;transform:translateY(0)}
.lg .lg-dots{transform-box:view-box;transform-origin:center;transform:translateY(0);opacity:1}

.lg.arm .lg-sl{transform:translateY(1500px)}
.lg.arm .lg-dots{transform:translateY(-560px);opacity:0}

.lg.go .lg-sl{transform:translateY(0);
  transition:transform .86s cubic-bezier(.16,.9,.24,1);
  transition-delay:calc(var(--i) * 62ms)}
.lg.go .lg-dots{transform:translateY(0);opacity:1;
  transition:transform .62s cubic-bezier(.34,1.56,.44,1) .72s,opacity .3s linear .72s}

/* ---------------- the curtain ----------------
   The block is built out of bays, so the mark is too. Five bays drop in to
   form the box; a volt strip flashes across one of them, which is exactly
   what that strip means everywhere else in the system; the wordmark rises in
   vertical slices; the bracket closes the corner last. --ease on the stagger,
   not on the whole thing, so it reads as assembly rather than a fade. */
.curtain{position:fixed;inset:0;z-index:90;background:#F8F6F2;
  display:grid;place-items:center;padding:0 8vw}
html:not(.js) .curtain{display:none}        /* never strand a scripts-off visitor */
.curtain.lift{transform:translateY(-101%);transition:transform .86s cubic-bezier(.76,0,.24,1)}
.curtain .cline{position:absolute;left:0;right:0;bottom:8vh;text-align:center;
  font-size:.72rem;letter-spacing:.24em;color:rgba(6,6,6,.42);font-weight:600;
  opacity:0;transform:translateY(6px);
  transition:opacity .5s ease 1.62s,transform .5s ease 1.62s}
.curtain.go .cline{opacity:1;transform:none}
html.curtained{overflow:hidden}

.lkr{position:relative;width:min(400px,62vw);aspect-ratio:1/1}
.lkr > *{position:absolute}

/* --- the box, assembled from five bays --- */
.lkr-boxwrap{inset:0;display:flex;overflow:hidden;background:#060606}
/* the outer wrap is already black, so a hairline seam between bays cannot show */
.lkr-bay{position:relative;flex:1 1 0;background:#060606;margin-right:-1px;
  transform:translateY(-101%)}
.lkr-bay:last-child{margin-right:0}
.curtain.go .lkr-bay{transform:translateY(0);
  transition:transform .52s cubic-bezier(.76,0,.24,1);
  transition-delay:calc(var(--i) * 62ms)}

/* --- the wordmark, rising in vertical slices --- */
.lkr-wmwrap{left:3.8%;bottom:5.1%;width:85%;aspect-ratio:2814/2229}
.lkr-wm{position:absolute;inset:0;overflow:hidden;transform:translateY(26%);opacity:0;
  clip-path:inset(0 calc((7 - var(--i)) * 12.5%) 0 calc(var(--i) * 12.5%))}
.lkr-wm img{position:absolute;inset:0;width:100%;height:100%;display:block}
.curtain.go .lkr-wm{transform:translateY(0);opacity:1;
  transition:transform .66s cubic-bezier(.16,.9,.24,1),opacity .34s ease;
  transition-delay:calc(.58s + var(--i) * 52ms)}

/* --- the bracket closes the corner --- */
.lkr-arm-h{left:75.9%;top:0;width:24.1%;height:5%;background:#EE6122;
  transform-origin:0% 50%;transform:scaleX(0)}
.lkr-arm-v{right:0;top:0;width:5%;height:21.8%;background:#EE6122;
  transform-origin:50% 0%;transform:scaleY(0)}
.curtain.go .lkr-arm-h{transform:scaleX(1);
  transition:transform .32s cubic-bezier(.76,0,.24,1) 1.24s}
.curtain.go .lkr-arm-v{transform:scaleY(1);
  transition:transform .32s cubic-bezier(.76,0,.24,1) 1.44s}

/* ---------------- the lockup in the bar ----------------
   The boxed lockup has its own ground, so it cannot inherit the bar's colour
   the way the bare wordmark did. Two files instead: the white-box version over
   a hero photograph, the black-box version once the bar goes solid. */
.nav .word{display:flex;align-items:center;mix-blend-mode:normal}
.nav .word .lk{width:56px;height:56px;display:block}
.nav .word .on-solid{display:none}
.nav .word .on-photo{display:block;filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
.nav.solid .word .on-photo{display:none}
.nav.solid .word .on-solid{display:block}
/* the menu is dark, so the white box comes back */
.nav.menuopen .word .on-solid{display:none}
.nav.menuopen .word .on-photo{display:block;filter:none}

/* ---------------- the lockup in the footer ---------------- */
.foot-mark{width:112px;margin-bottom:18px}
.foot-mark img{width:100%;height:auto;display:block}

@media (prefers-reduced-motion:reduce){
  .lkr-bay,.lkr-wm{transform:none;opacity:1}
  .lkr-arm-h,.lkr-arm-v{transform:none}
  .curtain.go .lkr-bay,.curtain.go .lkr-wm,
  .curtain.go .lkr-arm-h,.curtain.go .lkr-arm-v{transition:none}
  .curtain.lift{transition:none}
}