/* Hidden-until-revealed states apply only when JS runs and motion is allowed */
html.js:not(.no-motion) [data-reveal]{opacity:0;transform:translateY(24px)}
html.js:not(.no-motion) [data-split] .ln>span{display:inline-block;transform:translateY(140%)}
/* the reveal mask is padded well past the glyphs, so descenders (y g j) and shadows are never clipped */
[data-split] .ln{display:block;overflow:hidden;padding:.3em .5em .4em;margin:-.3em -.5em -.4em}
/* flex stacking so the lines' negative margins add up instead of collapsing (keeps the original line spacing) */
[data-split]:has(> .ln){display:flex;flex-direction:column;align-items:flex-start}

/* Page-transition layer: motion.js fills it with the pieces of one of seven wipes */
.curtain{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden}
.curtain i{position:absolute;display:block;will-change:transform;backface-visibility:hidden}
html.arriving .curtain{background:#E8752A;pointer-events:auto}

/* ---------- intro (first page of a new tab) ----------
   A paper screen with a faint blueprint grid; four blocks drift in and are set as the logo,
   then the whole lockup flies into the header. The stage is the header lockup at --k times
   its size, so the hand-off is a pure scale + move. motion.js (matchHeader) sizes the mark, gap
   and type from the real header at run time; the sizes below are only the starting values. */
.intro{display:none}
html.intro-on .intro{display:flex;position:fixed;inset:0;z-index:95;align-items:center;justify-content:center;overflow:hidden}
html.intro-on .intro::before{content:"";position:absolute;inset:0;background:var(--ink)}
html.intro-on .hdr__logo{opacity:0}
/* the page's animated text waits for the hand-off, so the headline rises in instead of flickering */
html.intro-on [data-split],html.intro-on [data-reveal]{visibility:hidden}
.intro__grid{position:absolute;inset:0;opacity:0;background-position:center;background-size:36px 36px;
  background-image:linear-gradient(to right,rgba(246,244,240,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(246,244,240,.06) 1px,transparent 1px)}
/* the lockup stays hidden until motion.js has every piece at its starting place (.is-live): until then the
   pieces sit assembled, and a painted frame of that reads as a finished animation that jumps back to the start */
.intro__stage{--k:2.6;position:relative;display:flex;align-items:center;gap:calc(16px*var(--k));visibility:hidden}
.intro__stage.is-live{visibility:visible}
.intro__mark{position:relative;flex:none;height:calc(58px*var(--k))}
.intro__mark i{position:absolute;display:block}
/* the box and its four pieces follow the brand mark: written by tools/brand/build-brand.js, do not edit by hand */
.intro__mark{aspect-ratio:750/750}
.ip-stem{left:0%;top:0%;width:32%;height:100%}
.ip-bar{left:32%;top:34%;width:32%;height:32%}
.ip-i{left:68%;top:34%;width:32%;height:66%}
.ip-dot{left:68%;top:0%;width:32%;height:30%}
.intro__tx{display:flex;flex-direction:column}.intro__wm{font:800 calc(21px*var(--k))/1 var(--f-brand);letter-spacing:.19em;color:var(--paper);white-space:nowrap}.intro__rule{display:block;height:calc(1px*var(--k));background:rgba(246,244,240,.5);margin:calc(7px*var(--k)) 0 calc(6px*var(--k))}.intro__est{font:600 calc(10px*var(--k))/1 var(--f-mono);letter-spacing:.3em;padding-left:.3em;text-align:center;white-space:nowrap;color:var(--orange)}
.intro__wm span{display:inline-block}
@media (max-width:900px){.intro__stage{--k:1.7}.intro__mark{height:calc(46px*var(--k))}.intro__wm{font-size:calc(16px*var(--k))}}
@media (max-width:480px){.intro__stage{--k:1.2}}

/* Floating squares: the outer <i> drifts with scroll, the inner <b> floats on its own */
.squares{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.squares i{position:absolute;width:18px;height:18px;--c:var(--orange);will-change:transform}
.squares i b{display:block;width:100%;height:100%;background:var(--c);opacity:.9;border-radius:1px}
/* squares live in the side gutters, never over content */
.squares i:nth-child(1){left:14px;top:30%}
.squares i:nth-child(2){right:17px;top:48%;--c:var(--steel);width:12px;height:12px}
.squares i:nth-child(3){left:17px;top:78%;width:12px;height:12px}
.squares i:nth-child(4){right:14px;top:16%;--c:var(--steel)}
@media (max-width:1100px){.squares{display:none}}
/* a square in flight toward the band logo */

.cursor-tag{position:fixed;left:12px;top:12px;z-index:70;pointer-events:none;padding:10px 14px;background:var(--orange);color:var(--ink);font:600 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;scale:0;transition:scale .25s var(--ease);margin:0;will-change:transform}
.cursor-tag.on{scale:1}

@media (prefers-reduced-motion:reduce){
  html.js [data-reveal]{transform:none}
  html.js [data-split] .ln>span{transform:none}
  .squares{display:none}
  .curtain{display:block;background:#E8752A;opacity:0}
  .curtain i{display:none}
  html.arriving .curtain{opacity:1}
}

/* moving images get their own compositor layer, so parallax never repaints the page */
[data-parallax] img,[data-hero-frame],[data-hero-frame] img,.feat__cards{will-change:transform}

/* Logo pieces cut from the finished beveled mark (750 x 750): wherever the pieces assemble
   (opening animation, quote band) they already look exactly like the logo, so nothing swaps at the end */
.hi-part{background:url("../img/brand/hi-mark.svg?v=05b5401d") no-repeat}
.hi-part--stem{background-size:312.5% 100%;background-position:0% 0%}
.hi-part--bar{background-size:312.5% 312.5%;background-position:47.06% 50%}
.hi-part--i{background-size:312.5% 151.52%;background-position:100% 100%}
.hi-part--dot{background-size:312.5% 333.33%;background-position:100% 0%}
/* floating squares: small chiseled blocks in the logo's colours */
.squares i b{background:linear-gradient(160deg,color-mix(in srgb,var(--c) 78%,#fff),var(--c) 45%,color-mix(in srgb,var(--c) 80%,#000));opacity:1;border-radius:0;
  box-shadow:inset 1.5px 1.5px 0 rgba(255,255,255,.38),inset -1.5px -1.5px 0 rgba(0,0,0,.34)}
.flyer{position:fixed;left:0;top:0;z-index:80;pointer-events:none;transform-origin:50% 50%;will-change:transform}
.flyer i{position:absolute;inset:0;display:block}
.flyer__sq{box-shadow:inset 1.5px 1.5px 0 rgba(255,255,255,.38),inset -1.5px -1.5px 0 rgba(0,0,0,.34)}