/* ═══════════════════════════════════════════════════════════════
   APEX PERFORMANCE · THE STORY   story/story.css
   The token block is copied from assets/styles.css, which is the
   source of truth. tools/check-story.mjs fails if the two differ.
   Everything after the tokens belongs to this page alone.
   ═══════════════════════════════════════════════════════════ */

:root{
  --void:  oklch(0.145 0.006 45);
  --elev:  oklch(0.190 0.008 45);
  --line:  oklch(0.265 0.010 45);
  --line2: oklch(0.340 0.014 45);
  --edge:  oklch(0.505 0.016 45);

  --text:  oklch(0.962 0.009 60);
  --muted: oklch(0.707 0.012 55);
  --dim:   oklch(0.610 0.014 50);

  --hot:   oklch(0.705 0.191 37.5);
  --acc:   oklch(0.734 0.139 44);
  --warm:  oklch(0.824 0.084 42);

  --dead:  oklch(0.660 0.055 235);

  --disp: "Cabinet Grotesk", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --t-xs: 0.8125rem;
  --t-2xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-md: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);
  --t-lg: clamp(1.3rem, 1.05rem + 1.15vw, 1.95rem);
  --t-xl: clamp(1.9rem, 1.3rem + 2.9vw, 3.6rem);
  --t-2xl: clamp(2.6rem, 1.5rem + 5.4vw, 6.5rem);

  --gutter: clamp(20px, 5vw, 92px);
  --barh: 56px;
  --measure: 62ch;

  --ease: cubic-bezier(.16,1,.3,1);
  --ease2: cubic-bezier(.22,1,.36,1);

  /* the story's own: the beat length (a pin holds for --beat-h minus 100svh), and the display sizes */
  --beat-h: 300svh;
  --hero-h: 220svh;
  --beat-t: clamp(2rem, 5vw, 4.6rem);
  --row-t: clamp(1.6rem, 4vw, 3.6rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scrollbar-color:var(--line2) var(--void); scrollbar-width:thin; }
body{
  margin:0; background:var(--void); color:var(--text);
  font-family:var(--disp); font-weight:400; font-size:var(--t-md); line-height:1.62;
  -webkit-font-smoothing:antialiased; font-feature-settings:'tnum' 1,'ss01' 1;
  overflow-x:clip;
}
body.menu-open{ overflow:hidden; }
::selection{ background:var(--hot); color:var(--void); }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--void); }
::-webkit-scrollbar-thumb{ background:var(--line2); border:3px solid var(--void); }
::-webkit-scrollbar-thumb:hover{ background:var(--edge); }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--hot); outline-offset:4px; border-radius:2px; }
[hidden]{ display:none !important; }
.vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ── ground ── */
.grain{
  position:fixed; inset:-50%; pointer-events:none; z-index:100; opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scene{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.no-js .scene{ display:none; }

/* ── opening: a font wait, capped by the driver; never a loader ── */
.opening{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; background:var(--void); transition:opacity .45s var(--ease); }
.opening.is-done{ opacity:0; pointer-events:none; }
.opening__mark{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--mono); font-size:var(--t-xs); font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
  animation:breathe 1.1s var(--ease2) infinite alternate;
}
.opening__mark svg{ width:22px; height:22px; fill:var(--hot); }
@keyframes breathe{ from{ opacity:.4 } to{ opacity:1 } }
.no-js .opening{ display:none; }

/* ── chrome ── */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:160;
  display:flex; align-items:center; gap:var(--s4); height:var(--barh); padding:0 var(--gutter);
  font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
  pointer-events:none;
}
.topbar > *{ pointer-events:auto; }
/* content scrolls under the bar; a fade of the ground keeps the mark legible without a hard edge on the scene */
.topbar::before{ content:""; position:absolute; left:0; right:0; top:0; height:calc(var(--barh) + 40px); z-index:-1; pointer-events:none; background:linear-gradient(to bottom, var(--void) 50%, transparent); }
.progress{ position:absolute; left:0; right:0; top:0; height:1px; pointer-events:none; }
.progress span{ display:block; height:100%; width:0; background:var(--hot); transform-origin:left; }
.menubtn{ position:relative; width:44px; height:44px; min-height:44px; margin-left:-12px; padding:0; border:0; background:transparent; color:var(--text); cursor:pointer; }
.menubtn__bar{ position:absolute; left:12px; right:12px; height:1px; background:currentColor; transition:transform .35s var(--ease), top .35s var(--ease); }
.menubtn__bar:nth-child(1){ top:18px; }
.menubtn__bar:nth-child(2){ top:25px; }
.menubtn[aria-expanded="true"] .menubtn__bar:nth-child(1){ top:21px; transform:rotate(45deg); }
.menubtn[aria-expanded="true"] .menubtn__bar:nth-child(2){ top:21px; transform:rotate(-45deg); }
.menubtn:hover{ color:var(--hot); }
.no-js .menubtn{ display:none; }
.mark{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); height:var(--barh); min-height:44px; }
.mark__glyph{ width:15px; height:15px; fill:var(--hot); flex:none; }
.mark__word{ letter-spacing:.14em; }

/* ── the chapter rail ── */
.rail{
  position:fixed; right:calc(var(--gutter) - 12px); top:50%; z-index:40; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:flex-end; gap:var(--s2);
  font-family:var(--mono); font-size:var(--t-xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
.rail a{ display:inline-flex; align-items:center; justify-content:flex-end; gap:var(--s3); min-height:44px; min-width:44px; padding:0 12px; text-decoration:none; color:var(--dim); }
.rail a span{ opacity:0; transform:translateX(6px); transition:opacity .3s var(--ease), transform .3s var(--ease); }
.rail a i{ width:7px; height:7px; border:1px solid var(--edge); background:transparent; transition:background-color .3s var(--ease), border-color .3s var(--ease); }
.rail a:hover span, .rail a:focus-visible span, .rail a.is-here span{ opacity:1; transform:none; }
.rail a:hover{ color:var(--muted); }
.rail a.is-here{ color:var(--hot); }
.rail a.is-here i{ background:var(--hot); border-color:var(--hot); }

/* ── beats ──
   Each pinned beat is 300svh tall and the next one starts 100svh before it
   ends, so a pin holds for 200svh and the next pin arrives over it in place.
   (It was 170svh until 8 September 2026; Aristo found the scroll too fast.)
   Copy crossfades; nothing slides. The driver marks every beat but the
   current one `is-off`, which is what keeps an arriving pin's copy out of
   sight until its turn. The pin itself takes no pointer events, so an
   invisible arriving pin never sits over the current beat's controls. */
main{ position:relative; z-index:1; }
.beat{ position:relative; min-height:var(--beat-h); }
.beat--hero{ min-height:var(--hero-h); }
.beat + .beat{ margin-top:-100svh; }
.beat__pin{
  position:sticky; top:0; height:100svh; pointer-events:none;
  display:grid; grid-template-columns:minmax(0,52ch) minmax(0,1fr); align-items:center; column-gap:var(--s8);
  padding:var(--barh) var(--gutter) var(--s8);
}
.beat__copy{
  grid-column:1; pointer-events:auto;
  opacity:var(--textin,1);
  /* --textin fades the copy in; --drift rides it up through the beat, so a
     scroll always moves it; --lift, on a phone, slides it up out of the way once read */
  transform:translateY(calc((0.5 - var(--drift,0.5)) * 90px + (1 - var(--textin,1)) * 24px - var(--lift,0px)));
  will-change:opacity, transform;
}
.beat.is-off .beat__copy, .beat.is-off .fig, .beat.is-off .cue{ visibility:hidden; }
.beat__copy--hero{ grid-column:1 / -1; }
.no-js .beat{ min-height:0; margin-top:0; }
.no-js .beat__pin{ position:static; height:auto; pointer-events:auto; }
.no-js .beat__copy{ opacity:1; transform:none; filter:none; visibility:visible; }

.eyebrow{ display:flex; flex-wrap:wrap; gap:0 .2em; margin:0 0 var(--s5); font-family:var(--mono); font-size:var(--t-xs); font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--hot); }
.eyebrow i{ font-style:normal; color:var(--dim); padding:0 .55em; }
.eyebrow span{ white-space:nowrap; }

/* Display lines are set as the instrument page sets them: sentence case,
   the claim's own size and tracking. Uppercase was tried on 7 September
   2026 and struck the next day; it read as a different face. */
.hero__line{ margin:0; max-width:15ch; font-family:var(--disp); font-weight:800; font-size:var(--t-2xl); line-height:.95; letter-spacing:-.045em; }
.hero__line em{ font-style:normal; color:var(--hot); }
.lede{ margin:var(--s6) 0 0; max-width:52ch; color:var(--muted); font-size:var(--t-lg); line-height:1.42; }

.beat__h{ margin:0 0 var(--s5); max-width:17ch; font-family:var(--disp); font-weight:800; font-size:var(--beat-t); line-height:1.02; letter-spacing:-.038em; text-wrap:balance; }
.beat__p{ margin:0; max-width:48ch; color:var(--muted); }

.marks{ margin:var(--s4) 0 var(--s6); font-family:var(--mono); font-size:var(--t-xs); font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--dim); line-height:2.1; }
.marks i{ font-style:normal; padding:0 .75em; }
.ledger{ margin:0; padding:0; max-width:48ch; border-top:1px solid var(--line); }
.ledger dt{ padding:var(--s3) 0; border-bottom:1px solid var(--line); font-weight:700; color:var(--text); }

.cue{
  position:absolute; left:var(--gutter); bottom:calc(var(--s7) - 13px); pointer-events:auto;
  display:inline-flex; align-items:center; gap:12px; padding:13px 0; min-height:44px;
  font-family:var(--mono); font-size:var(--t-xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); text-decoration:none;
  transition:color .4s var(--ease);
}
.cue svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; }
.cue svg path{ animation:nudge 2.6s var(--ease2) infinite; }
.cue:hover{ color:var(--hot); }
@keyframes nudge{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(3px) } }

/* ── the explore control: a square, with a reticle that steps out on hover.
      Square because the system is square; the brackets read as an
      instrument's viewfinder rather than a button. ── */
.explore{
  position:relative; display:inline-grid; place-items:center;
  width:120px; height:120px; min-height:44px; margin-top:var(--s6); padding:var(--s3) 6px;
  /* the label is three short words; a narrow side pad keeps them on one line inside the square */
  white-space:nowrap;
  border:1px solid var(--edge);
  font-family:var(--mono); font-size:var(--t-xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase; text-align:center; line-height:1.5;
  color:var(--text); text-decoration:none;
  transition:border-color .35s var(--ease), color .35s var(--ease);
}
.explore::before{
  content:""; position:absolute; inset:-8px; pointer-events:none; opacity:0;
  background:
    linear-gradient(var(--hot),var(--hot)) top left/14px 1px no-repeat,
    linear-gradient(var(--hot),var(--hot)) top left/1px 14px no-repeat,
    linear-gradient(var(--hot),var(--hot)) top right/14px 1px no-repeat,
    linear-gradient(var(--hot),var(--hot)) top right/1px 14px no-repeat,
    linear-gradient(var(--hot),var(--hot)) bottom left/14px 1px no-repeat,
    linear-gradient(var(--hot),var(--hot)) bottom left/1px 14px no-repeat,
    linear-gradient(var(--hot),var(--hot)) bottom right/14px 1px no-repeat,
    linear-gradient(var(--hot),var(--hot)) bottom right/1px 14px no-repeat;
  transition:inset .35s var(--ease), opacity .35s var(--ease);
}
.explore:hover, .explore:focus-visible{ border-color:var(--hot); color:var(--hot); }
.explore:hover::before, .explore:focus-visible::before{ opacity:1; inset:-14px; }

/* ── figures: HTML text over the canvas. The markup default is the completed state. ── */
.fig{ grid-column:2; justify-self:center; align-self:end; margin:0; font-family:var(--mono); text-align:center; pointer-events:none; opacity:var(--textin,1); transform:translateY(calc((0.5 - var(--drift,0.5)) * 90px - var(--lift,0px))); }
/* the hand-over blurs: the copy softens as it leaves and sharpens as it lands.
   Only while it is actually fading (the driver sets is-fading), only where a
   fine pointer implies a desktop GPU, and never more than 4px, because a
   filter re-rasterises the whole block every frame its radius changes. */
@media (pointer:fine){
  .beat.is-fading .beat__copy, .beat.is-fading .fig{ filter:blur(calc((1 - var(--textin,1)) * 4px)); }
}
.fig p{ margin:0; }
.fig small{ display:block; margin-bottom:var(--s2); font-size:var(--t-xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.fig--split{ display:grid; }
.fig--split > *{ grid-area:1 / 1; transition:opacity .5s var(--ease); }
.fig__one{ align-self:center; font-size:var(--t-xl); font-weight:500; color:var(--text); }
.fig__two{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end; gap:var(--s5) var(--s7); font-size:var(--t-lg); font-weight:500; color:var(--text); }
.fig__gap{ flex-basis:100%; font-size:var(--t-xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--warm); }
.js .fig--split[data-js-hidden]{ display:none; }
.fig--split[data-split="one"] .fig__two{ opacity:0; }
.fig--split[data-split="two"] .fig__one{ opacity:0; }
.fig--sweep{ display:grid; gap:var(--s5); }
.fig__ro{ font-size:var(--t-xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.fig__ro b{ margin-left:var(--s3); color:var(--text); font-weight:500; }
.fig__two b.is-hot{ color:var(--hot); font-weight:500; }

/* ── the finale: not pinned and not overlapped, since its rows may open ── */
.beat--finale{ min-height:100svh; }
.beat + .beat--finale{ margin-top:0; }
.beat__pin--flow{ position:static; height:auto; min-height:100svh; display:block; padding-top:calc(var(--barh) + var(--s9)); pointer-events:auto; }
.beat__copy--wide{ max-width:1180px; }
@media (min-width:1024px){ .beat__copy--wide{ max-width:min(1180px, calc(100vw - 2 * var(--gutter) - 200px)); } } /* clear of the chapter rail */
/* the seven questions: the instrument page's gauge, styled by assets/gauge.css
   (generated from assets/styles.css, scoped under #gauge); the lede keeps the
   story's measure, the gauge below runs the full width of the wide copy */
.beat--gauge .beat__p--lede{ margin-bottom:var(--s7); }
.beat--gauge .beat__pin--flow{ min-height:0; }
.closer{ margin:0 0 var(--s8); max-width:17ch; font-family:var(--disp); font-weight:800; font-size:var(--t-xl); line-height:1.06; letter-spacing:-.034em; }
.closer em{ font-style:normal; color:var(--muted); }

.rows{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.row__t{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s5);
  min-height:64px; padding:var(--s5) 0; border-bottom:1px solid var(--line);
  font-family:var(--disp); font-weight:800; font-size:var(--row-t); line-height:1.02; letter-spacing:-.034em;
  color:var(--text); text-decoration:none; cursor:pointer; list-style:none;
  transition:color .3s var(--ease);
}
.row__t::-webkit-details-marker{ display:none; }
.row__t i{ font-style:normal; font-family:var(--mono); font-size:var(--t-sm); color:var(--hot); transition:transform .35s var(--ease); }
.row__w{ display:flex; flex-direction:column; gap:var(--s2); min-width:0; }
.row__d{ font-family:var(--disp); font-weight:400; font-size:var(--t-md); line-height:1.4; letter-spacing:0; color:var(--muted); }
.row__t:hover, .row__t:focus-visible{ color:var(--hot); }
.row[open] .row__t{ border-bottom-color:transparent; }
.row[open] .row__t i{ transform:rotate(90deg); }
.row__panel{ padding:0 0 var(--s7); max-width:52ch; border-bottom:1px solid var(--line); }
.row__panel p{ margin:0 0 var(--s4); color:var(--muted); }
.row__note{ font-family:var(--mono); font-size:var(--t-xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.mailto{
  display:inline-flex; align-items:center; min-height:44px; text-decoration:none;
  font-family:var(--mono); font-weight:500; font-size:clamp(1rem,.75rem + .95vw,1.5rem); color:var(--hot); letter-spacing:.01em;
  padding:10px 0 6px; border-bottom:1px solid oklch(0.705 0.191 37.5 / .35);
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.mailto:hover{ color:var(--warm); border-bottom-color:var(--warm); }

.foot{ margin:var(--s9) 0 var(--s7); display:flex; flex-direction:column; gap:var(--s2); border-top:1px solid var(--line); padding-top:var(--s4); font-family:var(--mono); font-size:var(--t-xs); font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.foot__row{ display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; }
.foot a{ display:inline-flex; align-items:center; min-height:44px; text-decoration:none; color:var(--dim); transition:color .3s var(--ease); }
.foot a:hover{ color:var(--hot); }

/* ── the menu ── */
.menu{ position:fixed; inset:0; z-index:150; overflow:auto; background:var(--void); }
.menu__inner{
  min-height:100%;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,360px); grid-template-rows:1fr auto; column-gap:var(--s8);
  padding:calc(var(--barh) + var(--s8)) var(--gutter) var(--s7);
}
.menu__left{ grid-column:1; }
.menu__right{ grid-column:2; display:flex; flex-direction:column; gap:var(--s3); align-self:center; }
.menu__foot{
  grid-column:1 / -1; display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s2) var(--s4);
  padding-top:var(--s4); border-top:1px solid var(--line);
  font-family:var(--mono); font-size:var(--t-2xs); font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.menu__foot a{ display:inline-flex; align-items:center; min-height:44px; text-decoration:none; color:var(--dim); }
.menu__foot a:hover{ color:var(--hot); }
.menu__chapters{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s5); }
.menu__chapters a{
  display:block; min-height:44px; text-decoration:none; color:var(--text);
  font-family:var(--disp); font-weight:800; font-size:clamp(2.2rem, 6vw, 5.6rem); line-height:.98; letter-spacing:-.04em;
  transition:color .3s var(--ease);
}
.menu__chapters a small{ display:block; margin-bottom:var(--s2); font-family:var(--mono); font-size:var(--t-xs); font-weight:600; letter-spacing:.2em; color:var(--dim); }
.menu__chapters a:hover, .menu__chapters a:focus-visible{ color:var(--hot); }
.btn{
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  padding:var(--s3) var(--s5); border:1px solid var(--edge); color:var(--text);
  font-family:var(--mono); font-size:var(--t-xs); font-weight:600; min-height:44px; letter-spacing:.14em; text-transform:uppercase;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.btn:hover{ border-color:var(--hot); color:var(--hot); }
.menu__link{
  display:inline-flex; align-items:center; align-self:flex-start; min-height:44px; margin-top:var(--s3);
  font-family:var(--mono); font-size:var(--t-xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--hot); text-decoration:none;
  border-bottom:1px solid oklch(0.705 0.191 37.5 / .35);
}
.menu__link:hover{ color:var(--warm); border-bottom-color:var(--warm); }

/* ── responsive ── */
@media (hover:none){ :root{ --beat-h:260svh; --hero-h:200svh; } }
@media (max-width:1023px){
  .beat__pin{ grid-template-columns:minmax(0,1fr); align-content:start; row-gap:var(--s6); padding-top:calc(var(--barh) + var(--s6)); }
  .beat--hero .beat__pin{ align-content:center; }
  .beat__copy{ grid-column:1; }
  .fig{ grid-column:1; justify-self:start; align-self:start; text-align:left; }
  .fig__two{ justify-content:flex-start; gap:var(--s3) var(--s6); }
  .menu__inner{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; row-gap:var(--s7); }
  .menu__left, .menu__right, .menu__foot{ grid-column:1; }
  .menu__right{ align-self:start; }
}
@media (max-width:760px){
  .rail{ display:none; }
  .beat__p, .row__panel p{ font-size:var(--t-md); }
  .beat__h{ max-width:none; }
  /* the square control costs a third of a phone screen; a row keeps the reticle and gives the scene the room */
  .explore{ display:flex; align-items:center; justify-content:space-between; width:100%; height:auto; min-height:52px; margin-top:var(--s5); padding:14px 16px; text-align:left; }
  .explore::after{ content:"\2192"; font-family:var(--mono); color:var(--hot); }
  /* two hot lines above a hot headline compete on a phone; the overline goes quiet and the headline keeps the colour */
  .beat__copy--hero .eyebrow{ color:var(--muted); letter-spacing:.16em; }
  .beat__copy--hero .eyebrow i{ display:none; }
  .beat__copy--hero .eyebrow span{ display:block; }
}
@media (max-width:620px){
  .beat__h{ font-size:clamp(1.8rem, 8.5vw, 2.5rem); }
  .row__t{ min-height:56px; padding:var(--s4) 0; }
  .menu__chapters a{ font-size:clamp(2rem, 11vw, 3rem); }
  .foot__row{ flex-direction:column; gap:0; }
  .fig__one{ font-size:var(--t-lg); }
  .fig__two{ font-size:var(--t-md); }
}

/* ── reduced motion: the finished state, held ── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .beat.is-fading .beat__copy, .beat.is-fading .fig{ filter:none; }
  .opening{ display:none; }
  .cue svg path, .opening__mark{ animation:none; }
  .beat__copy, .fig{ opacity:1 !important; transform:none !important; }
  .fig--split > *, .rail a span, .rail a i, .explore, .explore::before, .row__t, .row__t i, .menubtn__bar, .opening{ transition:none; }
}