/* ==========================================================================
   Moving Parts: motion figures
   Short loops of the real screens, each set beside the paragraph it explains.
   Every figure is drawn on a grid 440 units wide (--u) and scales with the
   post column, so it looks the same on a phone and a laptop. The Memory
   Catcher Hub's own colours and type are used inside its screens; everything
   around them is the Twine site. Sample data only, and prices are always
   blurred placeholders, never real figures. With motion turned off, each
   figure shows its finished picture. Radii stay at 8 units or less (8px at
   full width), so the site's radius check holds.
   ========================================================================== */
/* The Hub's two typefaces, self-hosted (SIL Open Font Licence). Only the
   screens inside the figures use them. */
@font-face{font-family:'Fraunces';src:url(../media/hub-fraunces-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url(../media/hub-instrument-sans-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url(../media/hub-instrument-sans-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url(../media/hub-instrument-sans-600.woff2) format('woff2');font-weight:600 700;font-style:normal;font-display:swap}
.mo{margin:var(--s-7,32px) 0}
.mo__box{max-width:440px;margin:0 auto;container-type:inline-size}
/* On a desktop column (Ryan, 9 Oct: fill the body, not a small box in the middle).
   A figure with data-wide carries a second, landscape arrangement on a wider grid:
   --gw is its width in units, --gar its shape, --wx/--wy move a piece. It switches when
   its column is 880px or wider (a desktop); phones and tablets keep the portrait one. */
@media (min-width:1024px){.mo--wide .mo__box{max-width:none}.mo--wide figcaption{max-width:640px}}
@container (min-width:880px){
  .vig[data-wide]{--W:var(--gw);aspect-ratio:var(--gar)}
  .vig[data-wide] .at{left:calc(var(--u) * var(--wx,var(--x,0)));top:calc(var(--u) * var(--wy,var(--y,0)))}
  /* the type a step larger than the drawing, so it reads at desktop distance */
  .vig[data-wide] .mo-tag{height:calc(var(--u)*25);font-size:calc(var(--u)*12)}
  .vig[data-wide] .lanek{font-size:calc(var(--u)*15)}
  .vig[data-wide] .fchip{font-size:calc(var(--u)*12.5);gap:calc(var(--u)*7)}
  .vig[data-wide] .fchip i{width:calc(var(--u)*9);height:calc(var(--u)*9)}
  .vig[data-wide] .inl{width:calc(var(--u)*320);font-size:calc(var(--u)*11.5)}
  .vig[data-wide] .threadl{width:calc(var(--u)*150);font-size:calc(var(--u)*13)}
  .vig[data-wide] .threadl small{font-size:calc(var(--u)*11)}
}
/* in a blog post the figure fills the text column, but never taller than the screen */
.post-body .mo__box{max-width:min(100%,calc((100svh - 180px) * var(--ar,440/600)))}
.post-body .mo figcaption{max-width:none}
.mo figcaption{max-width:440px;margin:12px auto 0;font-size:var(--t-small,13px);line-height:1.45;color:var(--text-soft,rgba(205,195,173,.7));text-align:center}
.section--light .mo figcaption{color:var(--text-dark-soft,#5E6A6D)}
/* on the orange band the caption takes the same ink as the intro above it (Ryan check, 9 Oct) */
.beyond .mo figcaption{color:rgba(16,26,29,.85)}

.vig{
  --W:440;--u:calc(100cqw / var(--W));
  /* the figure is always dark, so it keeps the dark palette even inside a
     light section, where the page redefines some of these */
  --text:#CDC3AD; --text-bright:#BCAF94; --text-soft:rgba(205,195,173,.7); --sand:#E7D8C2; --orange:#F04E24;
  --line:rgba(233,227,212,.13); --line-strong:rgba(233,227,212,.22);
  --hub-page:#F6F6F4; --hub-ink:#000; --hub-body:rgba(0,0,0,.62); --hub-label:rgba(0,0,0,.55);
  --hub-line:rgba(0,0,0,.12); --hub-well:#EDE7E0; --hub-stone:rgba(190,173,157,.2); --hub-stone-text:#7D6E52;
  --hub-ok:#2F5B33; --hub-ok-bg:#EEF5EC; --hub-warn:#7A5716; --hub-warn-bg:#FCF3E4; --hub-blue:#2C4F70; --hub-blue-bg:#EAF1F7;
  --hub-serif:'Fraunces',Georgia,serif; --hub-sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mo-done:#368C66; --mo-ease:cubic-bezier(.22,1,.36,1);
  position:relative;width:100%;aspect-ratio:var(--ar,440/600);overflow:hidden;border-radius:8px;border:1px solid var(--line,rgba(233,227,212,.13));
  background:radial-gradient(120% 80% at 85% 100%,rgba(240,78,36,.2),rgba(240,78,36,0) 60%),linear-gradient(160deg,#0B1316,#05080A 70%);
  font-family:var(--font-body,sans-serif);color:var(--text,#CDC3AD);line-height:1.4;text-align:left
}
.vig *{box-sizing:border-box}
.vig__in{position:absolute;inset:0;transition:opacity .4s var(--mo-ease)}
.vig.snap,.vig.snap *{transition:none!important}
.vig.fade .vig__in{opacity:0}
.vig .at{position:absolute;left:calc(var(--u) * var(--x,0));top:calc(var(--u) * var(--y,0))}
.vig .sz{width:calc(var(--u) * var(--w));height:calc(var(--u) * var(--h))}

.mo-tag{z-index:10;height:calc(var(--u)*24);padding:0 calc(var(--u)*10);display:flex;align-items:center;border:1px solid var(--line-strong,rgba(233,227,212,.22));border-radius:calc(var(--u)*4);
  /* the site's plain eyebrow: its own case and weight, no capitals (Ryan, 9 Oct) */
  font-size:calc(var(--u)*11);font-weight:500;letter-spacing:.005em;color:var(--text,#CDC3AD);white-space:nowrap}

/* ------------------------------------------------------------ a Hub screen */
.vig .hub{overflow:hidden;border-radius:calc(var(--u)*8);background:var(--hub-page);color:var(--hub-ink);font-family:var(--hub-sans);box-shadow:0 calc(var(--u)*18) calc(var(--u)*40) rgba(0,0,0,.45)}
.vig .hub p,.vig .hub h3,.vig .hub h4{margin:0}
.vig .hub__bar{position:absolute;left:0;right:0;top:0;height:calc(var(--u)*40);border-bottom:1px solid var(--hub-line);background:var(--hub-page);z-index:2}
.vig .hub__logo{position:absolute;left:calc(var(--u)*14);top:calc(var(--u)*8);width:calc(var(--u)*108);height:auto}
.vig .hub__av{position:absolute;right:calc(var(--u)*14);top:calc(var(--u)*8);width:calc(var(--u)*24);height:calc(var(--u)*24);border-radius:50%;background:var(--hub-ink);color:var(--hub-page);
  font:600 calc(var(--u)*9.5)/calc(var(--u)*24) var(--hub-sans);text-align:center}
.vig .hub__steps{position:absolute;left:calc(var(--u)*14);right:calc(var(--u)*14);top:calc(var(--u)*50);height:calc(var(--u)*3);display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*5)}
.vig .hub__steps--flow{position:relative;left:auto;right:auto;top:auto;margin-top:calc(var(--u)*12)}
.vig .hub__steps i{display:block;height:100%;border-radius:2px;background:var(--hub-line);transition:background .4s var(--mo-ease)}
.vig .hub__steps i.on{background:var(--hub-ink)}
.vig .scr{position:absolute;left:calc(var(--u)*14);right:calc(var(--u)*14);top:calc(var(--u)*66);bottom:calc(var(--u)*14);transition:opacity .38s var(--mo-ease),transform .5s var(--mo-ease)}
.vig .scr--top{top:calc(var(--u)*52)}
.vig .scr:not(.on){opacity:0;transform:translateY(calc(var(--u)*10));pointer-events:none}
.vig .scr h3{margin:0 0 calc(var(--u)*10);font:400 calc(var(--u)*19)/1.15 var(--hub-serif);letter-spacing:-.02em;color:var(--hub-ink)}
.vig .scr p{color:var(--hub-body);font-size:calc(var(--u)*10.5);line-height:1.5}
.vig .scr p.c{text-align:center}
.vig .mid{display:flex;flex-direction:column;align-items:center;text-align:center;gap:calc(var(--u)*5)}
.vig .mid h3{margin:calc(var(--u)*4) 0 0}
.vig .row{display:flex;justify-content:space-between;align-items:center;gap:calc(var(--u)*8);padding:calc(var(--u)*8) 0;border-bottom:1px solid var(--hub-line);font-size:calc(var(--u)*11);color:var(--hub-ink)}
.vig .row small{display:block;color:var(--hub-label);font-size:calc(var(--u)*9.5)}
.vig .blur{display:inline-block;filter:blur(calc(var(--u)*3.2));font:500 calc(var(--u)*13) var(--hub-serif);user-select:none}
.vig .hbtn{display:block;height:calc(var(--u)*34);border-radius:calc(var(--u)*6);background:var(--hub-ink);color:var(--hub-page);
  font:600 calc(var(--u)*11.5)/calc(var(--u)*34) var(--hub-sans);text-align:center;white-space:nowrap;transition:transform .15s var(--mo-ease),background .2s}
.vig .hbtn--ghost{background:#fff;color:var(--hub-ink);border:1px solid var(--hub-line);line-height:calc(var(--u)*32)}
.vig .hbtn--sm{display:inline-block;flex:none;height:calc(var(--u)*26);line-height:calc(var(--u)*24);padding:0 calc(var(--u)*10);font-size:calc(var(--u)*9.5);background:#fff;color:var(--hub-ink);border:1px solid var(--hub-ink)}
.vig .hbtn--foot{position:absolute;left:0;right:0;bottom:0}
.vig .hbtns{position:absolute;left:0;right:0;bottom:0;display:grid;gap:calc(var(--u)*7)}
.vig .hbtn.is-press{transform:scale(.95);background:#2a2a2a}
.vig .hbtn--ghost.is-press,.vig .hbtn--sm.is-press{background:var(--hub-well);color:var(--hub-ink)}
.vig .ordno{display:inline-block;min-width:calc(var(--u)*132);height:calc(var(--u)*30);padding:0 calc(var(--u)*12);margin-top:calc(var(--u)*4);border-radius:calc(var(--u)*6);background:var(--hub-well);
  font:500 calc(var(--u)*12)/calc(var(--u)*30) ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;text-align:center;color:var(--hub-ink)}
.vig .ordno::after{content:"";display:inline-block;width:1px;height:1em;margin-left:2px;vertical-align:-.15em;background:currentColor;opacity:0}
.vig.typing .ordno::after{opacity:1;animation:mo-blink .8s step-end infinite}
.vig .waitbox{display:grid;place-items:center;width:calc(var(--u)*92);height:calc(var(--u)*92);margin:calc(var(--u)*22) auto calc(var(--u)*18);border-radius:calc(var(--u)*8);background:#fff;border:1px solid var(--hub-ink);
  animation:mo-wait 1.6s ease-in-out infinite}
.vig .waitbox svg{width:calc(var(--u)*40);height:calc(var(--u)*40)}
.vig .okbox{display:grid;place-items:center;width:calc(var(--u)*64);height:calc(var(--u)*64);border-radius:calc(var(--u)*8);background:#fff;border:1px solid var(--hub-ok);
  transform:scale(.6);opacity:0;transition:transform .55s var(--mo-ease),opacity .3s}
.vig .scr.on .okbox{transform:none;opacity:1}
.vig .okbox svg{width:calc(var(--u)*32);height:calc(var(--u)*32)}
.vig .okbox path{stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset .5s .25s var(--mo-ease)}
.vig .scr.on .okbox path{stroke-dashoffset:0}

/* ----------------------------------------- the card reader and the card */
.vig .reader{border-radius:calc(var(--u)*8);background:linear-gradient(180deg,#1E272B,#141B1E);border:1px solid var(--line-strong,rgba(233,227,212,.22));box-shadow:0 calc(var(--u)*14) calc(var(--u)*30) rgba(0,0,0,.5)}
.vig .reader__scr{position:absolute;left:calc(var(--u)*10);right:calc(var(--u)*10);top:calc(var(--u)*12);height:calc(var(--u)*72);border-radius:calc(var(--u)*4);background:#E9EEEA;color:#16201C;overflow:hidden}
.vig .rs{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*3);padding:0 calc(var(--u)*6);text-align:center;opacity:0;transition:opacity .3s}
.vig .rs b{font:600 calc(var(--u)*10)/1.2 var(--hub-sans)}
.vig .rs span{font-size:calc(var(--u)*9);color:rgba(22,32,28,.6)}
.vig .rs .blur{font-size:calc(var(--u)*12);color:#16201C}
.vig .rs svg{width:calc(var(--u)*22);height:calc(var(--u)*22)}
.vig .rs--ok{background:var(--hub-ok-bg);color:var(--hub-ok)}
.vig .rs--conn span{display:flex;gap:calc(var(--u)*4)}
.vig .rs--conn i{display:block;width:calc(var(--u)*5);height:calc(var(--u)*5);border-radius:50%;background:#16201C;animation:mo-dot 1s infinite}
.vig .rs--conn i:nth-child(2){animation-delay:.15s}
.vig .rs--conn i:nth-child(3){animation-delay:.3s}
.vig[data-r="idle"] .rs--idle,.vig[data-r="pay"] .rs--pay,.vig[data-r="ok"] .rs--ok,.vig[data-r="conn"] .rs--conn,.vig[data-r="chk"] .rs--chk{opacity:1}
.vig .keys{position:absolute;left:calc(var(--u)*22);right:calc(var(--u)*22);top:calc(var(--u)*98);display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*7) calc(var(--u)*10);justify-items:center}
.vig .keys i{display:block;width:calc(var(--u)*13);height:calc(var(--u)*13);border-radius:50%;background:rgba(233,227,212,.13)}
.vig .pcard{border-radius:calc(var(--u)*6);background:linear-gradient(135deg,#3B4C52,#20292D 70%);border:1px solid rgba(233,227,212,.18);box-shadow:0 calc(var(--u)*10) calc(var(--u)*24) rgba(0,0,0,.55);
  transform:translate(calc(var(--u)*150),calc(var(--u)*-90)) rotate(14deg);opacity:0;transition:transform .7s var(--mo-ease),opacity .35s}
.vig.card-in .pcard{transform:rotate(-7deg);opacity:1}
.vig.card-in.card-out .pcard{transform:translate(calc(var(--u)*16),calc(var(--u)*-30)) rotate(-3deg)}
.vig .pcard__chip{position:absolute;left:calc(var(--u)*12);top:calc(var(--u)*20);width:calc(var(--u)*17);height:calc(var(--u)*13);border-radius:calc(var(--u)*2);background:linear-gradient(135deg,#CDB98A,#9C8A5E)}
.vig .pcard__nfc{position:absolute;right:calc(var(--u)*11);top:calc(var(--u)*16);width:calc(var(--u)*18);height:calc(var(--u)*18)}
.vig .pcard__no{position:absolute;left:calc(var(--u)*12);bottom:calc(var(--u)*9);font:500 calc(var(--u)*7.5)/1 var(--font-body,sans-serif);letter-spacing:.18em;color:rgba(233,227,212,.55)}
.vig .ring{width:calc(var(--u)*30);height:calc(var(--u)*30);margin:calc(var(--u)*-15) 0 0 calc(var(--u)*-15);border-radius:50%;border:calc(var(--u)*1.5) solid var(--orange,#F04E24);opacity:0}
.vig.tap .ring{animation:mo-ring .9s var(--mo-ease) forwards}
.vig.tap .ring--2{animation-delay:.18s}

/* ------------------------------------------- what got done, on a rail */
.vig .rail{width:calc(var(--u)*2);height:calc(var(--u)*var(--h));background:var(--line,rgba(233,227,212,.13))}
.vig .rail i{position:absolute;inset:0;background:var(--orange,#F04E24);transform-origin:top;transform:scaleY(var(--fill,1));transition:transform .45s var(--mo-ease)}
.vig .job{height:calc(var(--u)*30);display:flex;align-items:center;gap:calc(var(--u)*9);padding:0 calc(var(--u)*12) 0 calc(var(--u)*6);
  border-radius:calc(var(--u)*6);border:1px solid color-mix(in srgb,var(--mo-done) 55%,transparent);background:#0B1215;color:var(--text,#CDC3AD);
  font:500 calc(var(--u)*12)/1 var(--font-body,sans-serif);white-space:nowrap;transition:border-color .35s,color .35s,background .35s,transform .35s var(--mo-ease)}
.vig .job i{flex:none;width:calc(var(--u)*16);height:calc(var(--u)*16);border-radius:50%;display:grid;place-items:center;background:var(--mo-done);transition:background .35s,box-shadow .35s}
.vig .job i svg{width:calc(var(--u)*10);height:calc(var(--u)*10);transition:opacity .25s}
.vig .job em{font-style:normal;color:var(--text-soft,rgba(205,195,173,.7));font-weight:400}
.vig.run .job:not(.on):not(.done){border-color:var(--line-strong,rgba(233,227,212,.22));background:rgba(233,227,212,.045);color:var(--text-soft,rgba(205,195,173,.7))}
.vig.run .job:not(.on):not(.done) i{background:rgba(233,227,212,.16)}
.vig.run .job:not(.done) i svg{opacity:0}
.vig .job.on{border-color:var(--orange,#F04E24);color:var(--sand,#E7D8C2);background:color-mix(in srgb,var(--orange,#F04E24) 16%,#0B1215);transform:translateX(calc(var(--u)*4))}
.vig .job.on i{background:var(--orange,#F04E24);box-shadow:0 0 0 calc(var(--u)*4) color-mix(in srgb,var(--orange,#F04E24) 28%,transparent)}

.vig .sum{width:calc(var(--u)*120);display:grid;gap:calc(var(--u)*12);text-align:right}
.vig .sum div{transition:opacity .45s var(--mo-ease),transform .45s var(--mo-ease)}
.vig .sum b{display:block;font:500 calc(var(--u)*34)/1 var(--font-display,sans-serif);letter-spacing:-.03em;color:var(--text-bright,#BCAF94)}
.vig .sum span{display:block;margin-top:calc(var(--u)*3);font-size:calc(var(--u)*11);color:var(--text-soft,rgba(205,195,173,.7))}
.vig .sum div:first-child b{color:var(--orange,#F04E24)}
.vig .tally{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:calc(var(--u)*12);width:calc(var(--u)*392)}
.vig .tally div{padding-top:calc(var(--u)*10);border-top:1px solid var(--line,rgba(233,227,212,.13));transition:opacity .45s var(--mo-ease),transform .45s var(--mo-ease)}
.vig .tally b{display:block;font:500 calc(var(--u)*30)/1 var(--font-display,sans-serif);letter-spacing:-.03em;color:var(--orange,#F04E24);font-variant-numeric:tabular-nums}
.vig .tally span{display:block;margin-top:calc(var(--u)*4);font-size:calc(var(--u)*11);color:var(--text-soft,rgba(205,195,173,.7))}
.vig.run:not(.sum-in) .sum div,.vig.run:not(.sum-in) .tally--in div{opacity:0;transform:translateY(calc(var(--u)*8))}
.vig.sum-in .sum div:nth-child(2),.vig.sum-in .tally--in div:nth-child(2){transition-delay:.12s}
.vig.sum-in .sum div:nth-child(3),.vig.sum-in .tally--in div:nth-child(3){transition-delay:.24s}

/* ------------------------- her finger, as the site's named cursor; the
   script moves it onto whatever she presses */
.vig .ptr{position:absolute;left:0;top:0;z-index:9;opacity:0;transition:transform .9s cubic-bezier(.2,.7,.3,1),opacity .3s;pointer-events:none}
.vig .ptr svg{display:block;width:calc(var(--u)*17);height:calc(var(--u)*18);filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.vig .ptr span{position:absolute;left:calc(var(--u)*15);top:calc(var(--u)*12);padding:calc(var(--u)*3) calc(var(--u)*8);border-radius:calc(var(--u)*4);background:var(--orange,#F04E24);color:#fff;
  font:600 calc(var(--u)*10)/1.3 var(--font-body,sans-serif);letter-spacing:.02em;white-space:nowrap}
.vig.ptr-show .ptr{opacity:1}

/* ------------------------------------------------------ the reader check */
.vig .pos-back{display:flex;align-items:center;gap:calc(var(--u)*4);margin-bottom:calc(var(--u)*7);font-size:calc(var(--u)*9.5);color:var(--hub-label)}
.vig .pos-back svg{width:calc(var(--u)*10);height:calc(var(--u)*10)}
.vig .rrow{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u)*8);margin-top:calc(var(--u)*11);padding:calc(var(--u)*8) calc(var(--u)*8) calc(var(--u)*8) calc(var(--u)*9);border:1px solid var(--hub-line);border-radius:calc(var(--u)*8);background:#fff}
.vig .rrow__ic{flex:none;display:grid;place-items:center;width:calc(var(--u)*28);height:calc(var(--u)*28);border-radius:50%;background:var(--hub-stone);color:var(--hub-stone-text);transition:background .35s,color .35s}
.vig .rrow__ic svg{width:calc(var(--u)*14);height:calc(var(--u)*14)}
.vig .rrow__t{flex:1;min-width:0;line-height:1.3}
.vig .rrow__t b{display:block;font-size:calc(var(--u)*10.5);font-weight:600;color:var(--hub-ink)}
.vig .rrow__t small{display:block;margin-top:calc(var(--u)*1);font-size:calc(var(--u)*9);color:var(--hub-label);transition:color .35s}
.vig .rrow .hbtn--sm{flex:1 0 100%;margin-top:calc(var(--u)*1)}
.vig .rrow.checked .rrow__t small{color:var(--hub-ok)}
.vig .rrow.checked .rrow__ic{background:var(--hub-ok-bg);color:var(--hub-ok)}
.vig .steplabel{margin-top:calc(var(--u)*9);font-size:calc(var(--u)*9);color:var(--hub-label)}
.vig .prods{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*7);margin-top:calc(var(--u)*7)}
.vig .prods div{padding:calc(var(--u)*9);border:1px solid var(--hub-line);border-radius:calc(var(--u)*8);background:#fff;font-size:calc(var(--u)*10);font-weight:500;color:var(--hub-ink)}
.vig .prods .blur{display:block;margin-top:calc(var(--u)*3);font-size:calc(var(--u)*13)}
.vig .dim{position:absolute;inset:0;z-index:3;background:rgba(20,18,16,.5);opacity:0;transition:opacity .35s}
.vig .sheet{position:absolute;left:0;right:0;bottom:0;z-index:4;height:calc(var(--u)*196);background:#fff;border-radius:calc(var(--u)*8) calc(var(--u)*8) 0 0;
  transform:translateY(105%);transition:transform .5s var(--mo-ease)}
.vig.sheet-up .dim{opacity:1}
.vig.sheet-up .sheet{transform:none}
.vig .sheet h4{position:absolute;left:calc(var(--u)*16);top:calc(var(--u)*15);font:400 calc(var(--u)*17)/1.2 var(--hub-serif);color:var(--hub-ink)}
.vig .sheet__x{position:absolute;right:calc(var(--u)*15);top:calc(var(--u)*11);font-size:calc(var(--u)*17);line-height:1;color:var(--hub-label)}
.vig .ss{position:absolute;left:calc(var(--u)*16);right:calc(var(--u)*16);top:calc(var(--u)*44);bottom:calc(var(--u)*16);display:flex;flex-direction:column;gap:calc(var(--u)*9);transition:opacity .3s}
.vig .ss:not(.on){opacity:0}
.vig .ss p{font-size:calc(var(--u)*10.5);line-height:1.45;color:var(--hub-label)}
.vig .ss p b{color:var(--hub-ink);font-weight:600}
.vig .ss .hbtn{margin-top:auto}
.vig .chk{display:flex;align-items:flex-start;gap:calc(var(--u)*8);padding:calc(var(--u)*9) calc(var(--u)*10);border:1px solid var(--hub-line);border-radius:calc(var(--u)*8);font-size:calc(var(--u)*10.5);line-height:1.4;color:var(--hub-ink)}
.vig .chk i{flex:none;width:calc(var(--u)*8);height:calc(var(--u)*8);margin-top:calc(var(--u)*4);border-radius:50%;background:rgba(0,0,0,.42)}
.vig .chk b{font-weight:600}
.vig .chk.wait i{animation:mo-blip 1s ease-in-out infinite}
.vig .chk.ok{border-color:var(--hub-ok)}
.vig .chk.ok i{background:var(--hub-ok)}

/* ---------------------------------------------- five franchisees, then fifty */
.vig .net{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vig .net .fd{fill:var(--sand,#E7D8C2);transition:opacity .45s,transform .45s var(--mo-ease);transform-box:fill-box;transform-origin:center}
.vig .net .fd.off{opacity:0;transform:scale(.2)}
.vig .net .ln{fill:none;stroke:rgba(233,227,212,.08);stroke-width:1;transition:opacity .6s}
.vig .net .ln.off{opacity:0}
.vig .net .ws{fill:rgba(240,78,36,.06);stroke:var(--line-strong,rgba(233,227,212,.22));stroke-width:1;transition:stroke .25s,fill .25s}
.vig .net .ws.hit{stroke:var(--orange,#F04E24);fill:rgba(240,78,36,.16)}
.vig .net .wsi{fill:none;stroke:var(--sand,#E7D8C2);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.vig .net .pl{fill:var(--orange,#F04E24)}
.vig .bign b{display:block;font:500 calc(var(--u)*60)/.9 var(--font-display,sans-serif);letter-spacing:-.04em;color:var(--text-bright,#BCAF94);font-variant-numeric:tabular-nums}
.vig .bign span{display:block;margin-top:calc(var(--u)*6);font-size:calc(var(--u)*12);color:var(--text-soft,rgba(205,195,173,.7))}
.vig .wsl{width:calc(var(--u)*112);text-align:center;font-size:calc(var(--u)*11.5);font-weight:500;line-height:1.3;color:var(--text-bright,#BCAF94)}
.vig .wsl small{display:block;font-size:calc(var(--u)*9.5);font-weight:400;color:var(--text-soft,rgba(205,195,173,.7))}

/* ------------------------------------------------------ the paper trail */
.vig .trail .tn{fill:rgba(233,227,212,.04);stroke:var(--line-strong,rgba(233,227,212,.22));stroke-width:1;transition:stroke .2s,fill .2s}
.vig .trail .tn.hit{stroke:var(--orange,#F04E24);fill:rgba(240,78,36,.14)}
.vig .trail .tn--ws{fill:rgba(240,78,36,.06)}
.vig .trail .ti{fill:none;stroke:var(--sand,#E7D8C2);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.vig .trail .tp{fill:none;stroke:rgba(233,227,212,.2);stroke-width:1.2;stroke-dasharray:2 5;stroke-linecap:round}
.vig .trail .tp--direct{stroke:rgba(240,78,36,.4);stroke-dasharray:none}
.vig .trail .od{fill:var(--orange,#F04E24)}
.vig .trail .lost{fill:none;stroke:#A2452D;stroke-width:1.2}
.vig .trail .lane2{transition:opacity .6s var(--mo-ease)}
.vig.run:not(.l2) .trail .lane2,.vig.run:not(.l2) .lane2h{opacity:.28}
.vig .lane2h{transition:opacity .6s var(--mo-ease)}
.vig .trail-div{width:calc(var(--u)*392);height:1px;background:var(--line,rgba(233,227,212,.13))}
.vig .lanek{font:500 calc(var(--u)*13.5)/1.2 var(--font-display,'Familjen Grotesk',sans-serif);letter-spacing:0;word-spacing:.04em;color:var(--text-bright,#BCAF94)}
.vig .lanen{width:calc(var(--u)*110);text-align:right}
.vig .lanen b{display:block;font:500 calc(var(--u)*26)/1 var(--font-display,sans-serif);letter-spacing:-.03em;color:var(--text-bright,#BCAF94)}
.vig .lanen span{display:block;margin-top:calc(var(--u)*2);font-size:calc(var(--u)*10.5);color:var(--text-soft,rgba(205,195,173,.7))}
.vig .lanen--go b{color:var(--orange,#F04E24)}
.vig .stl{width:calc(var(--u)*80);margin-left:calc(var(--u)*-40);text-align:center;font-size:calc(var(--u)*10.5);line-height:1.3;color:var(--text-soft,rgba(205,195,173,.7))}
.vig .stl--end{margin-left:calc(var(--u)*-44);width:calc(var(--u)*66);text-align:right}

/* ------------------------------------------------------- two devices, one gap */
.vig .trail .od--order{fill:var(--sand,#E7D8C2)}
.vig .trail .od.chase{animation:mo-chase 1.2s ease-in-out infinite}
.vig .trail .ring-chase{fill:none;stroke:var(--orange,#F04E24);stroke-width:1;opacity:.5}
.vig .stl--l{margin-left:0;text-align:left;width:calc(var(--u)*120)}
.vig .stl--r{margin-left:calc(var(--u)*-120);text-align:right;width:calc(var(--u)*120)}
.vig .chase-l{opacity:0;transition:opacity .4s}
.vig .chase-l.on{opacity:1}
@keyframes mo-chase{50%{opacity:.3}}

/* ------------------------------------------------- post 2: getting set up */
.vig .gs{border:1px solid var(--hub-line);border-radius:calc(var(--u)*8);background:#fff;overflow:hidden}
.vig .gs__sum{display:flex;align-items:center;gap:calc(var(--u)*7);padding:calc(var(--u)*9) calc(var(--u)*10)}
.vig .gs__sum b{font-size:calc(var(--u)*11);font-weight:600;color:var(--hub-ink);white-space:nowrap}
.vig .gs__sum span{font-size:calc(var(--u)*9);color:var(--hub-label);white-space:nowrap;font-variant-numeric:tabular-nums}
.vig .gs__sum .gs__bar{flex:1;min-width:calc(var(--u)*20);height:calc(var(--u)*3);border-radius:2px;background:#ECEBE7;overflow:hidden}
.vig .gs__bar i{display:block;height:100%;background:var(--hub-ink);transition:width .7s var(--mo-ease)}
.vig .gs__chev{flex:none;width:calc(var(--u)*6);height:calc(var(--u)*6);margin:calc(var(--u)*3) calc(var(--u)*2) 0 0;border-right:1.5px solid rgba(0,0,0,.42);border-bottom:1.5px solid rgba(0,0,0,.42);transform:rotate(-135deg)}
.vig .gs__list{list-style:none;margin:0;padding:calc(var(--u)*2) calc(var(--u)*6) calc(var(--u)*4);border-top:1px solid var(--hub-line)}
.vig .gs__list li{display:flex;align-items:center;gap:calc(var(--u)*8);padding:calc(var(--u)*6) calc(var(--u)*4);border-radius:calc(var(--u)*6);transition:background .9s}
.vig .gs__t{flex:none;display:grid;place-items:center;width:calc(var(--u)*15);height:calc(var(--u)*15);border-radius:50%;border:1px solid var(--hub-line);font-size:calc(var(--u)*8);font-style:normal;color:#fff}
.vig .gs__list span{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(var(--u)*1)}
.vig .gs__list b{overflow:hidden;font-size:calc(var(--u)*10);font-weight:600;color:var(--hub-ink);white-space:nowrap;text-overflow:ellipsis}
.vig .gs__list small{overflow:hidden;font-size:calc(var(--u)*8.5);color:var(--hub-label);white-space:nowrap;text-overflow:ellipsis}
.vig .gs__list em{font-style:normal;font-size:calc(var(--u)*14);line-height:1;color:rgba(0,0,0,.42)}
.vig .gs__list .is-done .gs__t{background:var(--hub-ink);border-color:var(--hub-ink)}
.vig .gs__list .is-done b{font-weight:500;color:rgba(0,0,0,.42);text-decoration:line-through}
.vig .gs__list .is-waiting .gs__t{border-color:var(--hub-ink);background:linear-gradient(90deg,var(--hub-ink) 50%,transparent 50%)}
.vig .gs__list .is-waiting small{color:var(--hub-ink)}
.vig .gs__list li.is-press{background:var(--hub-well);transition:background .1s}
.vig.glow .gs__list li.fresh{background:#FFF4DE;transition:background .2s}
.vig .gs__foot{padding:calc(var(--u)*8) calc(var(--u)*10);border-top:1px solid var(--hub-line);font-size:calc(var(--u)*8.5);color:var(--hub-label)}

/* ----------------------------------------------------- post 2: need help */
.vig .helprow{display:flex;align-items:center;justify-content:space-between;margin-bottom:calc(var(--u)*7)}
.vig .helprow .pos-back{margin:0}
.vig .needhelp{display:inline-flex;align-items:center;gap:calc(var(--u)*4);padding:calc(var(--u)*3) calc(var(--u)*7);border-radius:calc(var(--u)*6);font-size:calc(var(--u)*9.5);font-weight:600;color:var(--hub-ink);transition:background .15s}
.vig .needhelp svg{width:calc(var(--u)*11);height:calc(var(--u)*11)}
.vig .needhelp.is-press{background:var(--hub-well)}
.vig .bask{margin-top:calc(var(--u)*10);padding:calc(var(--u)*10) calc(var(--u)*11);border:1px solid var(--hub-line);border-radius:calc(var(--u)*8);background:#fff;transition:box-shadow .3s,background 1.2s}
.vig .bask h4{margin:0 0 calc(var(--u)*2);font:400 calc(var(--u)*14)/1.2 var(--hub-serif);color:var(--hub-ink)}
.vig .bask .row:last-of-type{border-bottom:0}
.vig .bask .hbtn{margin-top:calc(var(--u)*8);height:calc(var(--u)*30);line-height:calc(var(--u)*30)}
.vig.glow .bask{background:#FFF4DE;box-shadow:0 0 0 calc(var(--u)*2) rgba(240,78,36,.35);transition:box-shadow .3s,background .25s}
.vig .hv{position:absolute;left:calc(var(--u)*10);right:calc(var(--u)*10);top:calc(var(--u)*76);z-index:5;padding:calc(var(--u)*12);border-radius:calc(var(--u)*8);background:#fff;box-shadow:0 calc(var(--u)*16) calc(var(--u)*40) rgba(0,0,0,.3);
  opacity:0;transform:translateY(calc(var(--u)*14)) scale(.97);transition:opacity .35s,transform .45s var(--mo-ease)}
.vig.dlg-up .hv{opacity:1;transform:none}
.vig.dlg-up .dim{opacity:1}
.vig .hv__k{margin:0 0 calc(var(--u)*2);font-size:calc(var(--u)*7.5);letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--hub-stone-text)}
.vig .hv h4{margin:0 0 calc(var(--u)*9);font:400 calc(var(--u)*16)/1.2 var(--hub-serif);color:var(--hub-ink)}
.vig .hv__x{position:absolute;right:calc(var(--u)*8);top:calc(var(--u)*6);display:grid;place-items:center;width:calc(var(--u)*24);height:calc(var(--u)*24);border-radius:50%;font-size:calc(var(--u)*17);line-height:1;color:var(--hub-label);transition:background .15s}
.vig .hv__x.is-press{background:var(--hub-well)}
.vig .hv__v{position:relative;aspect-ratio:16/9;border-radius:calc(var(--u)*6);background:#0E1214;overflow:hidden}
.vig .hv__scene{position:absolute;left:12%;right:12%;top:12%;bottom:24%;padding:calc(var(--u)*7);border-radius:calc(var(--u)*4);background:#F6F6F4;display:flex;align-items:center;gap:calc(var(--u)*6)}
.vig .hv__scene i{flex:none;width:calc(var(--u)*14);height:calc(var(--u)*14);border-radius:50%;background:var(--hub-stone)}
.vig .hv__scene span{flex:1;display:grid;gap:calc(var(--u)*4)}
.vig .hv__scene span em{display:block;height:calc(var(--u)*4);border-radius:2px;background:rgba(0,0,0,.14)}
.vig .hv__scene span em + em{width:70%;background:rgba(0,0,0,.08)}
.vig .hv__scene b{flex:none;padding:calc(var(--u)*3) calc(var(--u)*6);border:1px solid var(--hub-ink);border-radius:calc(var(--u)*4);font-size:calc(var(--u)*6.5);font-weight:600;color:var(--hub-ink)}
.vig.dlg-up .hv__scene b{animation:mo-callout 1.4s ease-in-out infinite}
.vig .hv__bar{position:absolute;left:calc(var(--u)*8);right:calc(var(--u)*8);bottom:calc(var(--u)*7);display:flex;align-items:center;gap:calc(var(--u)*6);font:500 calc(var(--u)*7)/1 var(--hub-sans);color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums}
.vig .hv__bar svg{flex:none;width:calc(var(--u)*8);height:calc(var(--u)*8)}
.vig .hv__track{flex:1;height:calc(var(--u)*2.5);border-radius:2px;background:rgba(255,255,255,.22);overflow:hidden}
.vig .hv__track i{display:block;height:100%;background:#fff;transition:width 1s linear}
.vig .hv__from{margin-top:calc(var(--u)*8);font-size:calc(var(--u)*9);line-height:1.45;color:var(--hub-label)}
.vig .hv__from u{font-weight:600;color:var(--hub-ink);text-underline-offset:2px}
.vig .hv__docs{display:flex;flex-wrap:wrap;gap:calc(var(--u)*6);margin-top:calc(var(--u)*9);padding-top:calc(var(--u)*9);border-top:1px solid var(--hub-line)}
.vig .hv__docs span{display:inline-flex;align-items:center;gap:calc(var(--u)*4);padding:calc(var(--u)*5) calc(var(--u)*9);border:1px solid var(--hub-line);border-radius:calc(var(--u)*8);font-size:calc(var(--u)*8.5);font-weight:600;color:var(--hub-ink)}
.vig .hv__docs small{font-weight:500;color:var(--hub-label)}
@keyframes mo-callout{0%,100%{box-shadow:0 0 0 0 rgba(240,78,36,.6)}50%{box-shadow:0 0 0 calc(var(--u)*3) rgba(240,78,36,0)}}

/* ------------------------------------------------------ post 2: the rule */
.vig .rule .rl{stroke:var(--line-strong,rgba(233,227,212,.22));stroke-width:1}
.vig .rule .today{stroke:var(--orange,#F04E24);stroke-width:1.2}
.vig .rule .rp{fill:var(--sand,#E7D8C2)}
.vig .rule .rs1{fill:var(--orange,#F04E24)}
.vig .rule .rs1r{fill:none;stroke:var(--orange,#F04E24);stroke-width:1;opacity:.5}
.vig .legend{display:flex;flex-wrap:wrap;gap:calc(var(--u)*6) calc(var(--u)*14);font-size:calc(var(--u)*9.5);color:var(--text-soft,rgba(205,195,173,.7))}
.vig .legend i{display:inline-block;width:calc(var(--u)*7);height:calc(var(--u)*7);margin-right:calc(var(--u)*5);border-radius:50%;background:var(--sand,#E7D8C2);vertical-align:-.05em}
.vig .legend i.o{background:var(--orange,#F04E24);box-shadow:0 0 0 calc(var(--u)*2) rgba(240,78,36,.3)}
.vig .todayl{width:calc(var(--u)*60);margin-left:calc(var(--u)*-30);text-align:center;font-size:calc(var(--u)*9.5);color:var(--orange,#F04E24)}
.vig .rlist{width:calc(var(--u)*236);padding:calc(var(--u)*10) calc(var(--u)*12);border:1px solid var(--line-strong,rgba(233,227,212,.22));border-radius:calc(var(--u)*8);background:rgba(233,227,212,.035)}
.vig .rlist__h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:calc(var(--u)*6);font-size:calc(var(--u)*11.5);font-weight:500;color:var(--text-bright,#BCAF94)}
.vig .rlist__h span{font-size:calc(var(--u)*9.5);font-weight:400;color:var(--text-soft,rgba(205,195,173,.7));font-variant-numeric:tabular-nums}
.vig .rlist ol{list-style:none;margin:0;padding:0}
.vig .rlist li{display:flex;align-items:center;gap:calc(var(--u)*8);height:0;overflow:hidden;opacity:0;font-size:calc(var(--u)*10.5);color:var(--text,#CDC3AD);white-space:nowrap;transition:height .5s var(--mo-ease),opacity .4s,background 1s;border-radius:calc(var(--u)*4)}
.vig .rlist li.on{height:calc(var(--u)*24);opacity:1}
.vig .rlist li.fresh{background:rgba(240,78,36,.16);transition:height .5s var(--mo-ease),opacity .4s,background .2s}
.vig .rlist li i{flex:none;width:calc(var(--u)*6);height:calc(var(--u)*6);margin-left:calc(var(--u)*4);border-radius:50%;background:var(--orange,#F04E24)}
.vig .fcard{width:calc(var(--u)*140);padding:calc(var(--u)*10) calc(var(--u)*11);border:1px solid var(--line-strong,rgba(233,227,212,.22));border-radius:calc(var(--u)*8);background:#0B1215;transition:opacity .5s,transform .5s var(--mo-ease)}
.vig .fcard b{display:block;font-size:calc(var(--u)*11);font-weight:500;color:var(--text-bright,#BCAF94)}
.vig .fcard small{display:block;font-size:calc(var(--u)*9);color:var(--text-soft,rgba(205,195,173,.7))}
.vig .fcard__bar{display:flex;gap:calc(var(--u)*3);margin:calc(var(--u)*9) 0 calc(var(--u)*6)}
.vig .fcard__bar i{flex:1;height:calc(var(--u)*5);border-radius:2px;background:rgba(233,227,212,.14);transition:background .35s}
.vig .fcard__bar i.f{background:var(--mo-done)}
.vig .fcard span{font-size:calc(var(--u)*9.5);color:var(--text-soft,rgba(205,195,173,.7));font-variant-numeric:tabular-nums}
.vig .fcard.full{border-color:color-mix(in srgb,var(--mo-done) 60%,transparent)}
.vig.run:not(.b-in) .fcard--b{opacity:0;transform:translateY(calc(var(--u)*8))}

/* ------------------------------------------- post 2: head office at fifty */
.vig .hq{display:grid;grid-template-columns:repeat(5,1fr);column-gap:calc(var(--u)*14);row-gap:calc(var(--u)*15);width:calc(var(--u)*392)}
.vig .hq p{margin:0;display:flex;gap:calc(var(--u)*2);transition:opacity .4s,transform .4s var(--mo-ease)}
.vig .hq p.off{opacity:0;transform:scale(.6)}
.vig .hq i{flex:1;height:calc(var(--u)*6);border-radius:1px;background:rgba(233,227,212,.13);transition:background .35s}
.vig .hq i.f{background:var(--sand,#E7D8C2)}
.vig .hq i.w{background:var(--orange,#F04E24)}
.vig .hq p.ok i{background:var(--mo-done)}
.vig .readyn{width:calc(var(--u)*130);text-align:right}
.vig .readyn b{display:block;font:500 calc(var(--u)*30)/1 var(--font-display,sans-serif);letter-spacing:-.03em;color:var(--mo-done);font-variant-numeric:tabular-nums}
.vig .readyn span{display:block;margin-top:calc(var(--u)*4);font-size:calc(var(--u)*11);color:var(--text-soft,rgba(205,195,173,.7))}
.vig .hqkey{display:flex;gap:calc(var(--u)*14);font-size:calc(var(--u)*9.5);color:var(--text-soft,rgba(205,195,173,.7))}
.vig .hqkey i{display:inline-block;width:calc(var(--u)*12);height:calc(var(--u)*5);margin-right:calc(var(--u)*5);border-radius:1px;vertical-align:.1em;background:var(--sand,#E7D8C2)}
.vig .hqkey i.w{background:var(--orange,#F04E24)}
.vig .hqkey i.ok{background:var(--mo-done)}

/* --------------------------------------------- banked post: two spreadsheets */
.vig .sheetc{width:calc(var(--u)*186);border:1px solid var(--line-strong,rgba(233,227,212,.22));border-radius:calc(var(--u)*8);background:rgba(233,227,212,.035);overflow:hidden;transition:opacity .6s,transform .8s var(--mo-ease)}
.vig .sheetc__h{display:flex;justify-content:space-between;padding:calc(var(--u)*8) calc(var(--u)*10);border-bottom:1px solid var(--line,rgba(233,227,212,.13));font-size:calc(var(--u)*10.5);font-weight:500;color:var(--text-bright,#BCAF94)}
.vig .sheetc__h span{font-weight:400;color:var(--text-soft,rgba(205,195,173,.7))}
.vig .sheetc ol{list-style:none;margin:0;padding:calc(var(--u)*4) calc(var(--u)*8)}
.vig .sheetc li{display:flex;justify-content:space-between;align-items:center;height:calc(var(--u)*26);padding:0 calc(var(--u)*4);border-bottom:1px dashed rgba(233,227,212,.08);font-size:calc(var(--u)*10);color:var(--text,#CDC3AD);transition:background .3s}
.vig .sheetc li span,.vig .sheetc li .blur{opacity:0;transition:opacity .3s}
.vig .sheetc li.on span,.vig .sheetc li.on .blur{opacity:1}
.vig .sheetc li .blur{font:500 calc(var(--u)*10.5) var(--font-body,sans-serif);color:var(--sand,#E7D8C2)}
.vig .sheetc li.miss{background:rgba(240,78,36,.08);box-shadow:inset 0 0 0 1px rgba(240,78,36,.55)}
.vig .sheetc li.diff .blur{color:var(--orange,#F04E24)}
.vig .sheetc li.diff{background:rgba(240,78,36,.08)}
.vig.merged .sheetc--a{opacity:0;transform:translateX(calc(var(--u)*100)) scale(.9)}
.vig.merged .sheetc--b{opacity:0;transform:translateX(calc(var(--u)*-100)) scale(.9)}
.vig .qb{max-width:calc(var(--u)*150);padding:calc(var(--u)*6) calc(var(--u)*9);border-radius:calc(var(--u)*8);background:var(--orange,#F04E24);color:#fff;font-size:calc(var(--u)*9.5);line-height:1.3;
  opacity:0;transform:translateY(calc(var(--u)*6)) scale(.92);transition:opacity .3s,transform .4s var(--mo-ease)}
.vig .qb.on{opacity:1;transform:none}
.vig.merged .qb{opacity:0}
.vig .onerec{width:calc(var(--u)*230);border:1px solid color-mix(in srgb,var(--mo-done) 55%,transparent);border-radius:calc(var(--u)*8);background:#0B1215;overflow:hidden;opacity:0;transform:scale(.94);transition:opacity .6s .25s,transform .8s .25s var(--mo-ease)}
.vig.merged .onerec,.vig:not(.run) .onerec{opacity:1;transform:none}
.vig .onerec .sheetc__h{color:var(--sand,#E7D8C2)}
.vig .onerec li{display:flex;align-items:center;gap:calc(var(--u)*8);height:calc(var(--u)*26);padding:0 calc(var(--u)*12);border-bottom:1px solid rgba(233,227,212,.06);font-size:calc(var(--u)*10);color:var(--text,#CDC3AD)}
.vig .onerec li i{flex:none;display:grid;place-items:center;width:calc(var(--u)*13);height:calc(var(--u)*13);border-radius:50%;background:var(--mo-done)}
.vig .onerec li i svg{width:calc(var(--u)*8);height:calc(var(--u)*8)}
.vig .onerec li .blur{margin-left:auto;font:500 calc(var(--u)*10.5) var(--font-body,sans-serif);color:var(--sand,#E7D8C2)}
.vig .onerec ol{list-style:none;margin:0;padding:0}
.vig .splitd{fill:var(--orange,#F04E24)}
.vig .mswap b,.vig .mswap span{transition:opacity .4s}
.vig .mswap .two{display:inline}.vig .mswap .one{display:none}
.vig.merged .mswap .two,.vig:not(.run) .mswap .two{display:none}
.vig.merged .mswap .one,.vig:not(.run) .mswap .one{display:inline}

/* ---------------------------------------------- banked post: every sale, live */
.vig .ebal{margin-top:calc(var(--u)*8);padding:calc(var(--u)*11) calc(var(--u)*12);border-radius:calc(var(--u)*8);background:#000;color:#F6F6F4}
.vig .ebal p{margin:0;font-size:calc(var(--u)*7.5);letter-spacing:.16em;text-transform:uppercase;color:rgba(246,246,244,.7)}
.vig .ebal .blur{display:block;margin:calc(var(--u)*4) 0 calc(var(--u)*7);font:400 calc(var(--u)*22)/1.1 var(--hub-serif);color:#F6F6F4;transition:transform .3s}
.vig.bump .ebal .blur{transform:scale(1.06)}
.vig .ebal span.open{display:inline-flex;align-items:center;gap:calc(var(--u)*4);padding:calc(var(--u)*2) calc(var(--u)*7);border-radius:calc(var(--u)*8);background:#C9B9A6;color:#241d14;font-size:calc(var(--u)*8)}
.vig .ebal span.open::before{content:"";width:calc(var(--u)*4);height:calc(var(--u)*4);border-radius:50%;background:currentColor}
.vig .monthp{display:inline-flex;align-items:center;gap:calc(var(--u)*10);margin-top:calc(var(--u)*8);padding:calc(var(--u)*4) calc(var(--u)*10);border:1px solid var(--hub-line);border-radius:calc(var(--u)*8);background:#fff;font-size:calc(var(--u)*9.5);font-weight:500;color:var(--hub-ink)}
.vig .tagaf{padding:calc(var(--u)*2) calc(var(--u)*6);border-radius:calc(var(--u)*3);background:#BEAD9D;color:#241d14;font-size:calc(var(--u)*7.5);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.vig .act-new2{display:grid;grid-template-rows:1fr;transition:grid-template-rows .6s var(--mo-ease)}
.vig .act-new2 > .act{overflow:hidden;min-height:0;transition:background 1.6s,padding .6s var(--mo-ease)}
.vig.run:not(.landed2) .act-new2{grid-template-rows:0fr}
.vig.run:not(.landed2) .act-new2 > .act{padding-block:0}
.vig.glow2 .act-new2 > .act{background:#FFF4DE;transition:background .25s,padding .6s var(--mo-ease)}
.vig .anno{width:calc(var(--u)*112);padding-left:calc(var(--u)*10);border-left:2px solid var(--orange,#F04E24);font-size:calc(var(--u)*10.5);line-height:1.35;color:var(--sand,#E7D8C2);opacity:0;transform:translateX(calc(var(--u)*-6));transition:opacity .4s,transform .5s var(--mo-ease)}
.vig .anno small{display:block;font-size:calc(var(--u)*9.5);color:var(--text-soft,rgba(205,195,173,.7))}
.vig.a1 .anno--1,.vig.a2 .anno--2{opacity:1;transform:none}
.vig.a2 .anno--1{opacity:.45;transform:translateY(calc(var(--u)*92))}
.vig .skip{padding:calc(var(--u)*4) calc(var(--u)*10);border-radius:calc(var(--u)*8);background:var(--sand,#E7D8C2);color:#05080A;font-size:calc(var(--u)*10);font-weight:600;opacity:0;transform:translateY(calc(var(--u)*-6));transition:opacity .35s,transform .4s var(--mo-ease);z-index:8}
.vig.skip-on .skip{opacity:1;transform:none}

/* ---------------------------------------------------- banked post: statement */
.vig .stmt{margin-top:calc(var(--u)*6)}
.vig .stmt__th{display:flex;justify-content:space-between;padding-bottom:calc(var(--u)*5);border-bottom:1px solid var(--hub-line);font-size:calc(var(--u)*7.5);letter-spacing:.14em;text-transform:uppercase;color:var(--hub-label)}
.vig .sl{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(var(--u)*8);padding:calc(var(--u)*6) calc(var(--u)*4);border-bottom:1px solid var(--hub-line);font-size:calc(var(--u)*9.5);color:var(--hub-ink);transition:opacity .35s,transform .4s var(--mo-ease),background .4s,box-shadow .4s;border-radius:calc(var(--u)*4)}
.vig .sl small{display:block;font-size:calc(var(--u)*8);color:var(--hub-label)}
.vig .sl .blur{flex:none;font:500 calc(var(--u)*10) var(--hub-sans)}
.vig .sl--tot{border-bottom:2px solid var(--hub-ink)}
.vig .sl--pay{border-bottom:0;font:400 calc(var(--u)*13)/1.2 var(--hub-serif)}
.vig .sl--pay .blur{font:400 calc(var(--u)*13) var(--hub-serif)}
.vig.run .sl:not(.on){opacity:0;transform:translateY(calc(var(--u)*5))}
.vig.hot .sl--stock{background:#FFF4DE;box-shadow:0 0 0 calc(var(--u)*1.5) var(--orange,#F04E24)}
.vig .paidc{display:inline-flex;align-items:center;gap:calc(var(--u)*5);margin-top:calc(var(--u)*10);padding:calc(var(--u)*3) calc(var(--u)*9);border-radius:calc(var(--u)*8);background:var(--hub-ok-bg);color:var(--hub-ok);font-size:calc(var(--u)*9);font-weight:600;transition:opacity .4s,transform .4s var(--mo-ease)}
.vig .paidc::before{content:"";width:calc(var(--u)*5);height:calc(var(--u)*5);border-radius:50%;background:currentColor}
.vig.run:not(.paid) .paidc{opacity:0;transform:scale(.8)}
.vig .cal{width:calc(var(--u)*110);border-radius:calc(var(--u)*8);background:#F6F6F4;color:#000;overflow:hidden;text-align:center;box-shadow:0 calc(var(--u)*12) calc(var(--u)*28) rgba(0,0,0,.45)}
.vig .cal__m{padding:calc(var(--u)*4) 0;background:var(--orange,#F04E24);color:#fff;font-size:calc(var(--u)*9);font-weight:700;letter-spacing:.14em}
.vig .cal__d{font:400 calc(var(--u)*38)/1.1 var(--hub-serif);padding-top:calc(var(--u)*4)}
.vig .cal__l{padding:0 0 calc(var(--u)*8);font-size:calc(var(--u)*9);color:rgba(0,0,0,.6)}
.vig .cal .b{display:none}
.vig.paid .cal .a,.vig:not(.run) .cal .a{display:none}
.vig.paid .cal .b,.vig:not(.run) .cal .b{display:block}
.vig.paid .cal__m,.vig:not(.run) .cal__m{background:var(--mo-done)}

/* ------------------------------------------ banked post: month end at fifty */
.vig .me{display:grid;grid-template-columns:repeat(5,1fr);gap:calc(var(--u)*7);width:calc(var(--u)*208)}
.vig .me i{height:calc(var(--u)*12);border-radius:calc(var(--u)*2);background:rgba(233,227,212,.1);border:1px solid rgba(233,227,212,.16);transition:opacity .4s,transform .4s var(--mo-ease),background .2s,border-color .2s}
.vig .me i.off{opacity:0;transform:scale(.4)}
.vig .me i.work{background:rgba(240,78,36,.35);border-color:var(--orange,#F04E24)}
.vig .me i.done{background:rgba(233,227,212,.28)}
.vig .mebar{height:calc(var(--u)*5);border-radius:2px;background:rgba(233,227,212,.1);overflow:hidden}
.vig .mebar i{display:block;width:0;height:100%;background:var(--orange,#F04E24)}
.vig .mebar--go i{background:var(--mo-done)}
.vig .mel{font-size:calc(var(--u)*9.5);color:var(--text-soft,rgba(205,195,173,.7))}
.vig .mel b{color:var(--text-bright,#BCAF94);font-weight:500}
.vig .onerun{width:calc(var(--u)*160);height:calc(var(--u)*64);display:flex;align-items:center;gap:calc(var(--u)*10);padding:0 calc(var(--u)*14);border:1px solid color-mix(in srgb,var(--mo-done) 55%,transparent);border-radius:calc(var(--u)*8);background:#0B1215;font-size:calc(var(--u)*11);color:var(--sand,#E7D8C2);transition:box-shadow .3s}
.vig .onerun i{flex:none;display:grid;place-items:center;width:calc(var(--u)*22);height:calc(var(--u)*22);border-radius:50%;background:var(--mo-done)}
.vig .onerun i svg{width:calc(var(--u)*12);height:calc(var(--u)*12)}
.vig .onerun.work{box-shadow:0 0 0 calc(var(--u)*3) rgba(54,140,102,.35)}
.vig .mechip{padding:calc(var(--u)*3) calc(var(--u)*9);border-radius:calc(var(--u)*8);border:1px solid var(--orange,#F04E24);color:var(--sand,#E7D8C2);font-size:calc(var(--u)*9.5);opacity:0;transition:opacity .3s}
.vig .mechip.on{opacity:1}

/* ------------------------------------------- Twine site: it amplifies */
.vig .biz{width:calc(var(--u)*128);padding:calc(var(--u)*10);border:1px solid var(--line-strong,rgba(233,227,212,.22));border-radius:calc(var(--u)*8);background:#0B1215}
.vig .biz__g,.vig .amp p{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*4)}
.vig .biz__g i{height:calc(var(--u)*22);border-radius:calc(var(--u)*3);background:rgba(233,227,212,.55)}
.vig .biz__g i.bad,.vig .amp i.bad{background:var(--orange,#F04E24)}
.vig .biz b{display:block;margin-top:calc(var(--u)*8);font-size:calc(var(--u)*11);font-weight:500;color:var(--text-bright,#BCAF94)}
.vig .biz small{display:block;font-size:calc(var(--u)*9.5);color:var(--text-soft,rgba(205,195,173,.7))}
.vig.fixed .biz__g i.bad,.vig:not(.run) .biz__g i.bad{background:rgba(233,227,212,.55);box-shadow:0 0 0 calc(var(--u)*1.5) var(--mo-done)}
.vig .amp{display:grid;grid-template-columns:repeat(10,1fr);gap:calc(var(--u)*12) calc(var(--u)*11);width:calc(var(--u)*392)}
.vig .amp p{margin:0;gap:calc(var(--u)*2);transition:opacity .35s,transform .4s var(--mo-ease)}
.vig .amp p.off{opacity:0;transform:scale(.4)}
.vig .amp i{height:calc(var(--u)*11);border-radius:calc(var(--u)*1.5);background:rgba(233,227,212,.45)}
.vig.pulse .amp i.bad{animation:mo-bad 1s ease-in-out infinite}
.vig.fixed .amp i.bad,.vig:not(.run) .amp i.bad{background:rgba(233,227,212,.45)}
.vig .ph2{display:none}
.vig.fixed .ph1,.vig:not(.run) .ph1{display:none}
.vig.fixed .ph2,.vig:not(.run) .ph2{display:inline}
.vig .ampn b{display:block;font:500 calc(var(--u)*46)/.9 var(--font-display,sans-serif);letter-spacing:-.04em;color:var(--text-bright,#BCAF94);font-variant-numeric:tabular-nums;text-align:right}
.vig .ampn span{display:block;margin-top:calc(var(--u)*5);font-size:calc(var(--u)*11);color:var(--text-soft,rgba(205,195,173,.7));text-align:right}
.vig .ampn{width:calc(var(--u)*150)}
.vig .tally .bad-n{color:var(--orange,#F04E24)}
.vig .tally .good-n{color:var(--mo-done)}
@keyframes mo-bad{50%{opacity:.35}}

/* ------------------------------------------- Twine site: five fibres, one thread */
.vig .braid .lane{stroke-width:2;stroke-linecap:round;fill:none}
.vig .braid .bf{fill:none;stroke-width:2.4;stroke-linecap:round}
.vig .braid .pt{transition:fill .3s}
.vig .fchip{display:inline-flex;align-items:center;gap:calc(var(--u)*6);font-size:calc(var(--u)*10.5);font-weight:500;color:var(--text-bright,#BCAF94);white-space:nowrap}
.vig .fchip i{width:calc(var(--u)*8);height:calc(var(--u)*8);border-radius:50%;background:var(--c)}
.vig .threadl{width:calc(var(--u)*110);text-align:right;font-size:calc(var(--u)*11);font-weight:500;color:var(--sand,#E7D8C2)}
.vig .threadl small{display:block;font-size:calc(var(--u)*9.5);font-weight:400;color:var(--text-soft,rgba(205,195,173,.7))}
.vig .inl{width:calc(var(--u)*110);font-size:calc(var(--u)*10);line-height:1.35;color:var(--text-soft,rgba(205,195,173,.7))}

/* ------------------------------------------------- reports: the 9pm publish */
.vig .ev .ax{stroke:var(--line-strong,rgba(233,227,212,.22));stroke-width:1}
.vig .ev .tk{stroke:rgba(233,227,212,.18);stroke-width:1}
.vig .ev .cur{stroke:var(--sand,#E7D8C2);stroke-width:1;stroke-dasharray:2 3;opacity:.6}
.vig .ev .dep{fill:var(--orange,#F04E24)}
.vig .ev .sv{fill:var(--sand,#E7D8C2)}
.vig .ev .nine{stroke:var(--mo-done);stroke-width:1.2;stroke-dasharray:3 3}
.vig .ev text{font-family:var(--font-body,sans-serif);font-size:10px;fill:var(--text-soft,rgba(205,195,173,.7))}
.vig .ev text.m{fill:var(--orange,#F04E24);font-weight:600;font-size:10.5px}
.vig .ev text.g{fill:var(--mo-done);font-weight:600}
.vig .cost b{color:var(--orange,#F04E24)}
.vig .cost--go b{color:var(--mo-done)}
.vig .wk{display:flex;align-items:center;gap:calc(var(--u)*6);padding:calc(var(--u)*4) calc(var(--u)*9);border-radius:calc(var(--u)*8);border:1px solid var(--line-strong,rgba(233,227,212,.22));font-size:calc(var(--u)*10);color:var(--text-soft,rgba(205,195,173,.7));white-space:nowrap;
  opacity:0;transform:translateY(calc(var(--u)*6));transition:opacity .35s,transform .4s var(--mo-ease)}
.vig .wk.on{opacity:1;transform:none}
.vig .wk.go{border-color:var(--mo-done);color:var(--sand,#E7D8C2)}
.vig .wk.go i{background:var(--mo-done)}
.vig .wk i{width:calc(var(--u)*7);height:calc(var(--u)*7);border-radius:50%;background:rgba(233,227,212,.3)}
.vig:not(.run) .wk{opacity:1;transform:none}
.vig .cbar{width:calc(var(--u)*392);height:calc(var(--u)*16);border-radius:calc(var(--u)*3);background:rgba(233,227,212,.08);overflow:hidden;border:1px solid var(--line,rgba(233,227,212,.13))}
.vig .cbar i{display:block;height:100%;width:0;background:var(--orange,#F04E24);transition:width 1.6s var(--mo-ease)}
.vig .cbar--go i{background:var(--mo-done)}
.vig .cbl{display:flex;justify-content:space-between;width:calc(var(--u)*392);font-size:calc(var(--u)*10.5);color:var(--text-soft,rgba(205,195,173,.7))}
.vig .cbl b{font-weight:500;color:var(--text-bright,#BCAF94)}
.vig .cbl span:last-child{font-variant-numeric:tabular-nums}
.vig .stp{width:calc(var(--u)*392);display:grid;gap:calc(var(--u)*9)}
.vig .stp div{display:flex;align-items:center;gap:calc(var(--u)*11);padding:calc(var(--u)*10) calc(var(--u)*12);border:1px solid var(--line-strong,rgba(233,227,212,.22));border-radius:calc(var(--u)*8);background:rgba(233,227,212,.035);
  font-size:calc(var(--u)*11.5);color:var(--text,#CDC3AD);transition:border-color .35s,background .35s}
.vig .stp em{flex:none;display:grid;place-items:center;width:calc(var(--u)*22);height:calc(var(--u)*22);border-radius:50%;background:rgba(233,227,212,.12);font-style:normal;font-size:calc(var(--u)*10);font-weight:600;color:var(--sand,#E7D8C2);transition:background .35s}
.vig .stp small{display:block;font-size:calc(var(--u)*9.5);color:var(--text-soft,rgba(205,195,173,.7))}
.vig .stp div.on{border-color:var(--orange,#F04E24);background:rgba(240,78,36,.1)}
.vig .stp div.on em{background:var(--orange,#F04E24);color:#05080A}
.vig .stp div.done{border-color:color-mix(in srgb,var(--mo-done) 55%,transparent)}
.vig .stp div.done em{background:var(--mo-done);color:#fff}
.vig .stp .who{margin-left:auto;font-size:calc(var(--u)*9);letter-spacing:.12em;text-transform:uppercase;color:var(--text-soft,rgba(205,195,173,.7))}

/* ---------------------------------------- Twine site: beyond you, audiences, fibres */
.vig .by .fd0{fill:#0B1215;stroke:var(--sand,#E7D8C2);stroke-width:1.4}
.vig .by .ring{fill:none;stroke:var(--mo-done);stroke-width:2;stroke-dasharray:4 5;transition:opacity .6s}
.vig .by .q{fill:var(--sand,#E7D8C2)}
.vig .by .q.ok{fill:var(--mo-done)}
.vig .by .q.nw{fill:var(--orange,#F04E24)}
.vig .by text{font-family:var(--font-body,sans-serif);font-size:11px;fill:var(--sand,#E7D8C2);font-weight:500}
.vig .srcc{padding:calc(var(--u)*4) calc(var(--u)*9);border:1px solid var(--line-strong,rgba(233,227,212,.22));border-radius:calc(var(--u)*8);font-size:calc(var(--u)*10);color:var(--text-soft,rgba(205,195,173,.7));white-space:nowrap;background:#05080A}
.vig .ringl{width:calc(var(--u)*170);margin-left:calc(var(--u)*-85);text-align:center;font-size:calc(var(--u)*10);color:var(--mo-done);transition:opacity .6s}
.vig.run:not(.sys) .ringl{opacity:0}
.vig .au .loc{fill:#0B1215;stroke:var(--line-strong,rgba(233,227,212,.22));stroke-width:1;transition:stroke .3s}
.vig .au .loc.hit{stroke:var(--sand,#E7D8C2);fill:rgba(231,216,194,.18)}
.vig .au .loc.off{opacity:0}
.vig .au .o{fill:var(--orange,#F04E24)}
.vig .au .c{fill:var(--sand,#E7D8C2)}
.vig .au .lk{stroke:rgba(233,227,212,.08);stroke-width:1}
.vig .ft .st{fill:none;stroke-width:2.4;stroke-linecap:round}
.vig .ft .st.dim{opacity:.16}
.vig .ft .st.next{stroke-dasharray:6 6}
.vig .fl{display:flex;align-items:center;gap:calc(var(--u)*6);font-size:calc(var(--u)*10.5);color:var(--text-soft,rgba(205,195,173,.7));white-space:nowrap}
.vig .fl i{width:calc(var(--u)*7);height:calc(var(--u)*7);border-radius:50%;background:var(--c)}
.vig .fl em{font-style:normal;font-size:calc(var(--u)*9);color:rgba(205,195,173,.5)}
.vig .fl.cur{color:var(--sand,#E7D8C2);font-weight:500}
.vig .fl.dimt{opacity:.45}
.vig .nxt{padding:calc(var(--u)*3) calc(var(--u)*8);border-radius:calc(var(--u)*8);border:1px solid var(--c);font-size:calc(var(--u)*9.5);color:var(--sand,#E7D8C2);white-space:nowrap;animation:mo-nxt 1.8s ease-in-out infinite}
@keyframes mo-nxt{50%{box-shadow:0 0 0 calc(var(--u)*3) rgba(233,227,212,.08)}}

/* -------------------------------------------------- her earnings page */
.vig .comm-k{font-size:calc(var(--u)*8.5);letter-spacing:.16em;text-transform:uppercase;color:var(--hub-label)}
.vig .act-h{display:flex;align-items:baseline;justify-content:space-between;gap:calc(var(--u)*8);margin:calc(var(--u)*4) 0 calc(var(--u)*9)}
.vig .scr .act-h h3{margin:0}
.vig .act-h span{font-size:calc(var(--u)*10.5);color:var(--hub-label);font-variant-numeric:tabular-nums}
.vig .srch{height:calc(var(--u)*30);display:flex;align-items:center;gap:calc(var(--u)*7);padding:0 calc(var(--u)*10);border:1px solid var(--hub-line);border-radius:calc(var(--u)*6);background:#fff;
  font-size:calc(var(--u)*10);color:rgba(0,0,0,.42);white-space:nowrap;overflow:hidden}
.vig .srch svg{flex:none;width:calc(var(--u)*12);height:calc(var(--u)*12);color:var(--hub-label)}
.vig .acts{margin-top:calc(var(--u)*10);border-radius:calc(var(--u)*8);background:#fff;overflow:hidden;box-shadow:0 calc(var(--u)*3) calc(var(--u)*12) rgba(0,0,0,.05)}
.vig .act{display:flex;align-items:center;gap:calc(var(--u)*9);padding:calc(var(--u)*10) calc(var(--u)*12);border-top:1px solid var(--hub-line);transition:background 1.6s}
.vig .acts > :first-child,.vig .acts > :first-child .act{border-top:0}
.vig .act__m{flex:1;min-width:0}
.vig .act__d{font-size:calc(var(--u)*9);color:var(--hub-label)}
.vig .act__d span{white-space:nowrap}
.vig .act__n{margin-top:calc(var(--u)*2);font-size:calc(var(--u)*12);font-weight:500;color:var(--hub-ink)}
.vig .act__l{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u)*6);margin-top:calc(var(--u)*5);font-size:calc(var(--u)*10);color:var(--hub-label)}
.vig .tagip{padding:calc(var(--u)*2) calc(var(--u)*6);border-radius:calc(var(--u)*3);background:var(--hub-ink);color:#fff;font-size:calc(var(--u)*7.5);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.vig .chip{display:inline-flex;align-items:center;gap:calc(var(--u)*4);padding:calc(var(--u)*2) calc(var(--u)*7);border-radius:calc(var(--u)*8);background:var(--hub-warn-bg);color:var(--hub-warn);font-size:calc(var(--u)*8.5);font-weight:500;white-space:nowrap}
.vig .chip::before{content:"";width:calc(var(--u)*4);height:calc(var(--u)*4);border-radius:50%;background:currentColor}
.vig .chip--disp{background:var(--hub-blue-bg);color:var(--hub-blue)}
.vig .act__v{flex:none;text-align:right}
.vig .act__v .blur{display:block;font:600 calc(var(--u)*11) var(--hub-sans);color:var(--hub-ink)}
.vig .act__v .blur + .blur{margin-top:calc(var(--u)*4);font-weight:500;color:var(--hub-ok)}
.vig .act-new{display:grid;grid-template-rows:1fr;transition:grid-template-rows .6s var(--mo-ease)}
.vig .act-new > .act{overflow:hidden;min-height:0;transition:background 1.6s,padding .6s var(--mo-ease)}
.vig.run:not(.landed) .act-new{grid-template-rows:0fr}
.vig.run:not(.landed) .act-new > .act{padding-block:0}
.vig.glow .act-new > .act{background:#FFF4DE;transition:background .25s,padding .6s var(--mo-ease)}

@keyframes mo-ring{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(3.4)}}
@keyframes mo-wait{0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,.18)}50%{box-shadow:0 0 0 calc(var(--u)*7) rgba(0,0,0,0)}}
@keyframes mo-blink{50%{opacity:0}}
@keyframes mo-dot{0%,80%,100%{opacity:.25}40%{opacity:1}}
@keyframes mo-blip{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.vig,.vig *{transition:none!important;animation:none!important}}

/* "See visual": the cue in the page and the lightbox it opens (Ryan, 9 Oct) */
.mo-cue-row{margin:var(--s-5,20px) 0 0;display:flex}
.mo-cue-row--c{justify-content:center}
.mo-cue{margin:0;cursor:pointer;font:inherit;font-weight:500}
.mo-cue .btn__arrow svg{display:block;margin-left:1px}
/* on the light and orange sections the cue goes to dark ink, as the site's text buttons do there */
.section--light .mo-cue,.beyond .mo-cue,.section--light .mo-cue:hover,.beyond .mo-cue:hover{color:var(--text-dark,#05080A)}
.section--light .mo-cue .btn__arrow,.beyond .mo-cue .btn__arrow{color:var(--text-dark,#05080A);border-color:rgba(16,26,29,.45)}
.section--light .mo-cue:hover .btn__arrow,.section--light .mo-cue:focus-visible .btn__arrow{background:var(--text-dark,#05080A);border-color:var(--text-dark,#05080A);color:var(--bg-light,#DCD5C2)}
.beyond .mo-cue:hover .btn__arrow,.beyond .mo-cue:focus-visible .btn__arrow{background:var(--text-dark,#05080A);border-color:var(--text-dark,#05080A);color:var(--orange,#F04E24)}
.mo-lb{width:min(1120px,calc(100vw - 32px));max-width:none;max-height:calc(100svh - 32px);margin:auto;padding:0;border:0;background:transparent;color:var(--text,#CDC3AD);overflow:visible}
.mo-lb::backdrop{background:rgba(5,8,10,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mo-lb[open]{animation:mo-lb-in .32s cubic-bezier(.22,1,.36,1)}
@keyframes mo-lb-in{from{opacity:0;transform:translateY(10px) scale(.985)}}
.mo-lb .mo{margin:0}
/* as large as the screen allows, never taller than it */
/* a portrait figure grows to about one and a half times its page size, no more, so the type stays in proportion */
.mo-lb .mo__box{max-width:min(100%,660px,calc((100svh - 150px) * var(--ar,440/600)))}
.mo-lb .mo--wide .mo__box{max-width:min(100%,calc((100svh - 150px) * var(--gar,var(--ar,440/600))))}
.mo-lb .mo figcaption{max-width:640px;margin-top:14px;font-size:15px;color:var(--text,#CDC3AD)}
.mo-lb .mo__box{position:relative}
.mo-lb__x{position:absolute;z-index:2;top:-50px;right:0;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--line-strong,rgba(233,227,212,.22));border-radius:6px;background:rgba(11,18,21,.9);color:var(--sand,#E7D8C2);cursor:pointer}
.mo-lb__x:hover,.mo-lb__x:focus-visible{border-color:var(--orange,#F04E24);color:#fff;background:var(--orange,#F04E24);outline:none}
.mo-lb{padding-top:50px}
html.mo-lb-open,html.mo-lb-open body{overflow:hidden}
@media (prefers-reduced-motion:reduce){.mo-lb[open]{animation:none}}

/* ------------------------------------------------ Moving Parts nos. 3 to 5 (10 Oct) */
/* from folder to front door */
.vig .fdr .tp--direct{stroke:rgba(240,78,36,.6);stroke-width:1.6;stroke-dasharray:none}
.vig .fdr-dot{fill:var(--orange,#F04E24)}
.vig .fdr-br{fill:none;stroke:rgba(233,227,212,.3);stroke-width:1}
.vig .fdr-br--ours{stroke:rgba(240,78,36,.55)}
.vig .fdr-ok{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;transition:opacity .3s,transform .35s var(--mo-ease)}
.vig .fdr-ok.on{opacity:1;transform:none}
.vig .fdr-ok circle{fill:var(--mo-done)}
.vig .fdr-ok path{fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* one studio: the same keepsake, again and again */
.vig .ksrow{display:flex;gap:calc(var(--u)*5)}
.vig .ksrow i{width:calc(var(--u)*14);height:calc(var(--u)*18);border-radius:calc(var(--u)*2);background:linear-gradient(135deg,#BEAD9D,#E7D8C2 45%,#9C8B79);opacity:.85}
.vig.run .ksrow i{animation:mo-shine 2.4s var(--mo-ease) infinite}
.vig.run .ksrow i:nth-child(2){animation-delay:.2s}.vig.run .ksrow i:nth-child(3){animation-delay:.4s}
.vig.run .ksrow i:nth-child(4){animation-delay:.6s}.vig.run .ksrow i:nth-child(5){animation-delay:.8s}
@keyframes mo-shine{0%,100%{opacity:.6}50%{opacity:1}}
/* fifty links: a sale lands on the right territory */
.vig .net .fd{transition:opacity .45s,transform .45s var(--mo-ease),fill .2s}
.vig .net .fd.got{fill:var(--orange,#F04E24)}
/* release after release */
.vig .rl{height:1px;background:rgba(233,227,212,.18)}
.vig .rl i{position:absolute;top:calc(var(--u)*-5.5);width:calc(var(--u)*11);height:calc(var(--u)*11);margin-left:calc(var(--u)*-5.5);border-radius:50%;background:#0B1215;border:1px solid var(--line-strong,rgba(233,227,212,.22));transition:background .25s,border-color .25s,transform .3s var(--mo-ease)}
.vig .rl i.on{background:var(--orange,#F04E24);border-color:var(--orange,#F04E24)}
.vig .rl i.now{transform:scale(1.4)}
.vig .rg{display:grid;grid-template-columns:repeat(8,1fr);gap:calc(var(--u)*6);width:calc(var(--u)*392)}
.vig .rg i{height:calc(var(--u)*16);border-radius:calc(var(--u)*2);background:rgba(233,227,212,.1);border:1px solid rgba(233,227,212,.16);transition:background .3s,border-color .3s,box-shadow .3s}
.vig .rg i.stale{background:rgba(162,69,45,.4);border-color:#A2452D}
.vig .rg--g i.fresh{background:rgba(54,140,102,.45);border-color:var(--mo-done);box-shadow:0 0 0 calc(var(--u)*2) rgba(54,140,102,.25)}
.vig .rflash{font-size:calc(var(--u)*10);color:#6FBF95;opacity:0;transition:opacity .25s}
.vig .rflash.on{opacity:1}