:root{
  --bg:#FFFFFF; --bg-2:#F7F7F7; --ink:#0F0F0F; --ink-2:#5A5A5A; --ink-3:#6F6F6F;
  --hair:#E8E8E8; --rule:#D2D2D2;
  /* YouTube red reads 4.0:1 on white — under AA for body text. Pure red is kept
     for fills and large marks; small text uses the darkened one. */
  --accent:#CC0000; --accent-pure:#FF0000;
  --display:'DM Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --ui:'DM Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --gut:clamp(1.4rem,5vw,3.75rem);
}
/* light ground, channel red, condensed display — one world, no theme switch */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--ui);font-size:15px;line-height:1.78;
  text-rendering:optimizeLegibility}
a{color:inherit}
p{margin:0 0 1.15rem}
.w{max-width:1240px;margin:0 auto;padding:0 var(--gut)}
.rule{height:1px;background:var(--hair)}

/* masthead */
.bar{padding:clamp(1.8rem,3vw,2.3rem) 0;display:flex;gap:1.6rem 2.6rem;align-items:center;flex-wrap:wrap}
.bar .mk{letter-spacing:.42em;font-size:11px;margin-right:auto;color:var(--ink);text-decoration:none}
.bar nav{display:flex;gap:2.4rem;flex-wrap:wrap}
.bar nav a{color:var(--ink-3);text-decoration:none;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;transition:color .2s}
.bar nav a:hover,.bar nav a:focus-visible{color:var(--ink)}
.bar nav a[aria-current="page"]{color:var(--accent)}

/* page head — centred, the title-card moment */
.phead{padding:clamp(5rem,13vw,10rem) 0 clamp(4rem,10vw,8rem);text-align:center}
.eyebrow{font-size:9.5px;letter-spacing:.42em;color:var(--ink-3);text-transform:uppercase;
  margin:0 0 clamp(2.4rem,5vw,3.6rem)}
h1{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.3rem,7vw,5.2rem);line-height:.98;letter-spacing:-.032em;margin:0;text-wrap:balance}
h1 em{font-style:normal;color:#8E8E8E}
.standfirst{max-width:44ch;margin:clamp(2.6rem,5vw,3.6rem) auto 0;color:var(--ink-2);font-size:15px}

/* content sections — left aligned, because dense copy centred is unreadable */
section{padding:clamp(3.4rem,7vw,6rem) 0}
.sechead{text-align:center;margin-bottom:clamp(2.6rem,5vw,4rem)}
h2{font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.1;margin:0;letter-spacing:-.028em}
.sechead p{color:var(--ink-2);max-width:46ch;margin:1rem auto 0;font-size:14px}

.terms{list-style:none;padding:0;margin:0 auto;max-width:760px;counter-reset:t}
.terms li{padding:1.5rem 0 1.5rem 3.2rem;border-bottom:1px solid var(--hair);
  position:relative;color:var(--ink-2);font-size:14.5px}
.terms li:first-child{border-top:1px solid var(--hair)}
.terms li::before{content:counter(t,decimal-leading-zero);counter-increment:t;position:absolute;
  left:0;top:1.9rem;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--accent)}
.terms b{color:var(--ink);font-weight:400}

/* home — the two applications, which are the point of the site */
.apply{display:grid;grid-template-columns:1fr}
@media(min-width:900px){.apply{grid-template-columns:1fr 1fr}}
.apply__card{padding:clamp(3.2rem,6.5vw,6rem) clamp(1.6rem,3vw,3rem);text-decoration:none;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  border-bottom:1px solid var(--hair);transition:background .25s}
@media(min-width:900px){
  .apply__card{border-bottom:0;border-right:1px solid var(--hair)}
  .apply__card:last-child{border-right:0}}
.apply__card:hover,.apply__card:focus-visible{background:var(--bg-2)}
/* the section label is now the card's badge — the first thing the eye lands on.
   Letter-spacing adds a trailing gap after the last character, so the right
   padding is trimmed to keep the text optically centred in the pill. */
.apply__card .tag{display:inline-block;
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:var(--accent);
  padding:.52rem 1.05rem .52rem calc(1.05rem + .18em);
  border-radius:999px;margin:0 0 1.7rem;
  transition:background .25s var(--ease),transform .35s var(--ease),
             box-shadow .35s var(--ease)}
.apply__card:hover .tag,.apply__card:focus-visible .tag{
  background:#A80000;transform:translateY(-2px);
  box-shadow:0 6px 16px -6px rgba(168,0,0,.55)}
.apply__card h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
.apply__card p{color:var(--ink-2);font-size:14px;max-width:32ch;margin:1.3rem 0 0}
/* margin-top:auto pins both CTAs to the same baseline whatever the copy length */
.apply__cta{margin-top:auto;padding-top:clamp(2.2rem,4vw,3rem);
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);
  transition:color .2s}
.apply__card:hover .apply__cta,.apply__card:focus-visible .apply__cta{color:var(--accent)}

/* a quiet secondary line — everything that isn't an application */
.aside{text-align:center;color:var(--ink-3);font-size:12.5px;letter-spacing:.04em}
.aside a{color:var(--ink-2);text-underline-offset:4px}
.aside a:hover{color:var(--accent)}

/* application pages — supporting copy beside the form, never in front of it */
.applygrid{display:grid;gap:clamp(2.8rem,5vw,4rem);align-items:start}
@media(min-width:980px){.applygrid{grid-template-columns:1fr 1fr;gap:clamp(3rem,5vw,6rem)}}
/* the form leads on narrow screens; on desktop it sits to the right */
.applygrid__form{order:-1}
@media(min-width:980px){.applygrid__form{order:0}}
.panel{border:1px solid var(--rule);background:var(--bg-2);padding:clamp(1.8rem,3.4vw,2.8rem)}
.panel h2{font-size:clamp(1.35rem,2.4vw,1.75rem)}
.panel .note{color:var(--ink-2);font-size:13px;margin:.9rem 0 2.4rem}
.panel .enquiry{max-width:none}
.colhead{margin-bottom:clamp(1.8rem,3.5vw,2.6rem)}
.colhead h2{font-size:clamp(1.25rem,2.2vw,1.6rem)}
.colhead p{color:var(--ink-2);font-size:13.5px;margin:.9rem 0 0}
.applygrid .terms{max-width:none}
.applygrid .terms li{padding:1.15rem 0 1.15rem 2.8rem;font-size:13.5px}
.applygrid .terms li::before{top:1.5rem}
.applygrid .data{max-width:none}
.applygrid .data dd{font-size:1.2rem}
.applygrid .formats{max-width:none;margin-top:2.6rem}
.applygrid .formats td{font-size:13px;padding:.95rem 1.2rem .95rem 0}
.applygrid .formats td:first-child{font-size:14px;white-space:normal}

/* data */
.data{margin:0 auto;max-width:620px;border-top:1px solid var(--rule)}
.data div{display:grid;grid-template-columns:1fr auto;gap:1rem;padding:1rem 0;
  border-bottom:1px solid var(--hair);align-items:baseline}
.data dt{color:var(--ink-2);font-size:13.5px}
.data dd{margin:0;font-family:var(--display);font-weight:700;font-size:1.3rem;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
table.formats{width:100%;max-width:860px;margin:3rem auto 0;border-collapse:collapse}
.formats th{font-family:var(--mono);font-size:9px;letter-spacing:.2em;font-weight:400;
  text-transform:uppercase;color:var(--ink-3);text-align:left;
  border-bottom:1px solid var(--rule);padding:0 1.6rem .8rem 0}
.formats td{padding:1.1rem 1.6rem 1.1rem 0;border-bottom:1px solid var(--hair);
  vertical-align:baseline;color:var(--ink-2);font-size:13.5px}
  .formats td:first-child{font-family:var(--display);font-weight:700;
  font-size:14.5px;color:var(--ink);white-space:nowrap;letter-spacing:-.01em}

.roster{text-align:center;max-width:720px;margin:0 auto;color:var(--ink-2);
  font-size:15px;line-height:2.4}
.roster b{color:var(--ink);font-weight:600}
.roster .sep{color:var(--accent);padding:0 .6rem}

/* form */
.enquiry{max-width:620px;margin:0 auto}
.field{display:grid;gap:.5rem;margin-bottom:1.6rem}
.field--pair{display:grid;gap:.5rem 1.2rem;margin-bottom:1.6rem}
@media(min-width:520px){.field--pair{grid-template-columns:1fr 1fr}}
.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field label{font-family:var(--mono);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3)}
.field input,.field select,.field textarea{
  font-family:var(--ui);font-size:15px;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--rule);padding:.6rem 0;width:100%;border-radius:0}
.field select{color:var(--ink)}
.field option{background:#fff;color:var(--ink)}
.field textarea{min-height:84px;resize:vertical;line-height:1.65}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-bottom-color:var(--accent);box-shadow:0 1px 0 0 var(--accent)}
.field input::placeholder,.field textarea::placeholder{color:#AFAFAF}
button.go{width:100%;font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.24em;
  font-size:10px;background:var(--accent);color:#fff;border:1px solid var(--accent);
  padding:1.15rem 2.8rem;cursor:pointer;margin-top:1.2rem;border-radius:999px;transition:border-color .2s,color .2s}
button.go:hover{background:#A80000;border-color:#A80000;color:#fff}
button.go:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button.go:disabled{opacity:.35;cursor:default}
.out{font-size:13px;margin:1.3rem 0 0;min-height:1.2em;color:var(--ink-2)}
.out.ok{color:var(--accent)}
.out.err{color:#B3261E}
.fallback{font-size:12.5px;color:var(--ink-3);margin:.9rem 0 0}
.fallback a{color:var(--accent)}

.links{display:flex;flex-wrap:wrap;gap:2.6rem;justify-content:center;align-items:baseline}
.links a{font-family:var(--display);font-weight:700;
  font-size:clamp(1.3rem,2.4vw,1.8rem);text-decoration:none;letter-spacing:.05em;
  border-bottom:1px solid var(--rule);padding-bottom:.25rem;transition:color .2s,border-color .2s}
.links a:hover{color:var(--accent);border-bottom-color:var(--accent)}

footer{padding:clamp(3rem,6vw,4.5rem) 0 clamp(2.2rem,4vw,3rem);text-align:center}
footer .mk{letter-spacing:.42em;font-size:11px;display:block;margin-bottom:1.6rem;color:var(--ink)}
footer p{color:var(--ink-3);font-size:12.5px;max-width:52ch;margin:0 auto 1rem;line-height:1.85}
.foot__nav{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}
.foot__nav a{color:var(--ink-2);text-decoration:none;font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.foot__nav a:hover{color:var(--ink)}
.colophon{margin-top:2.6rem;font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:#B0B0B0}


/* ---------------------------------------------------------------------------
   Motion. One easing curve throughout (a long expo-out), nothing bounces, and
   nothing travels far — the restraint is the point. Everything is disabled
   under prefers-reduced-motion.
--------------------------------------------------------------------------- */
:root{--ease:cubic-bezier(.16,1,.3,1)}

/* a line that rises out from behind its own edge */
.rv{display:block;overflow:hidden;
  padding-bottom:.09em;margin-bottom:-.09em}   /* keeps descenders off the mask */
.rv > span{display:block;transform:translateY(108%);
  animation:rv-rise 1.15s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes rv-rise{to{transform:none}}

.fade{opacity:0;transform:translateY(12px);
  animation:fade-up .95s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes fade-up{to{opacity:1;transform:none}}

/* a hairline that draws itself out from the centre */
.draw{height:1px;background:var(--accent);width:clamp(40px,6vw,64px);
  margin:clamp(2.2rem,4.5vw,3rem) auto 0;
  transform:scaleX(0);animation:draw-out .9s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes draw-out{to{transform:none}}

/* below-the-fold reveals; only hidden when the script is actually running */
.js .sr{opacity:0;transform:translateY(16px);
  transition:opacity .95s var(--ease),transform .95s var(--ease);
  transition-delay:var(--d,0ms)}
.js .sr.in{opacity:1;transform:none}
/* last-resort reveal, set by the inline script — if motion.js never loads or
   throws, nothing stays invisible */
.sr-all .sr{opacity:1 !important;transform:none !important}

/* the arrow leans toward the click */
.apply__cta{display:inline-block;transition:color .2s,transform .35s var(--ease)}
.apply__card:hover .apply__cta,.apply__card:focus-visible .apply__cta{transform:translateX(5px)}

@media (prefers-reduced-motion:reduce){
  .rv > span,.fade,.draw{animation:none;opacity:1;transform:none}
  .js .sr{opacity:1;transform:none;transition:none}
  .apply__card:hover .apply__cta{transform:none}
}


/* ---------------------------------------------------------------------------
   Home lockup: play mark over the wordmark, revealed letter by letter.
   A plain play symbol, not YouTube's badge — see the note in the handover.
--------------------------------------------------------------------------- */
.phead--home{padding-top:clamp(3.6rem,9vw,7rem)}
.phead--home .eyebrow{margin:clamp(1.6rem,3vw,2.2rem) 0 0}

.playlink{display:block;width:fit-content;margin:clamp(.9rem,2vw,1.5rem) auto 0;
  -webkit-tap-highlight-color:transparent}
.playlink:focus-visible{outline:2px solid var(--accent);outline-offset:8px;border-radius:50%}
.play{width:clamp(42px,4.7vw,61px);height:auto;display:block;overflow:visible}
.play circle,.play path{transform-box:fill-box;transform-origin:center}

/* Load reveal. All three use `backwards`, never `both` — with `both` the end
   state outranks the declared transform and kills every hover. */
.play__ring{stroke-dashoffset:0;transform:rotate(-90deg);stroke-dasharray:289;
  animation:ring-draw .7s var(--ease) backwards;animation-delay:900ms}
@keyframes ring-draw{from{stroke-dashoffset:289}}

.play__fill{transform:scale(1);transition:transform .4s var(--ease);
  animation:fill-in .48s var(--ease) backwards;animation-delay:1180ms}
@keyframes fill-in{from{transform:scale(0)}}

.play__tri{opacity:1;transform:none;transition:transform .4s var(--ease);
  animation:tri-in .42s var(--ease) backwards;animation-delay:1340ms}
@keyframes tri-in{from{opacity:0;transform:translateX(-5%) scale(.86)}}

/* idle: a ring leaves the mark every few seconds, the way a player pulses */
.play__ripple{opacity:0;transform:scale(1);
  animation:ripple 3.6s var(--ease) infinite;animation-delay:2200ms}
.play__ripple--2{animation-delay:4000ms}
@keyframes ripple{
  0%{opacity:.5;transform:scale(1)}
  70%,100%{opacity:0;transform:scale(1.55)}}

/* hover: the disc swells and the triangle leans into the click */
.playlink:hover .play__fill,.playlink:focus-visible .play__fill{transform:scale(1.07)}
.playlink:hover .play__tri,.playlink:focus-visible .play__tri{transform:translateX(6%)}
.playlink:active .play__fill{transform:scale(.98)}

@media (prefers-reduced-motion:reduce){
  .play__ripple{animation:none;opacity:0}
  .play__ring,.play__fill,.play__tri{animation:none}
  .playlink:hover .play__fill,.playlink:hover .play__tri{transform:none}
}

.wm{display:flex;justify-content:center;flex-wrap:wrap;
  gap:0 clamp(.5rem,1.6vw,1.1rem);margin:0;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.2rem,7.2vw,6.2rem);line-height:1;letter-spacing:-.034em}
.wm__w{display:flex}
.wm .rv > span{animation-duration:.8s}


/* ---------------------------------------------------------------------------
   Who we ride with. Equipment only — no badges, shields or seals, and nothing
   that could be mistaken for official identification.
--------------------------------------------------------------------------- */
.disciplines{display:flex;justify-content:center;flex-wrap:wrap;
  gap:clamp(1.5rem,4vw,3.2rem);max-width:840px;
  margin:clamp(2.8rem,5.5vw,4rem) auto 0}
.disc{display:flex;flex-direction:column;align-items:center;gap:.75rem}
.disc svg{width:clamp(32px,3.4vw,42px);height:auto;display:block;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;color:var(--ink);
  transition:color .25s var(--ease)}
.disc span{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);transition:color .25s var(--ease)}
.disciplines:hover .disc svg,.disciplines:hover .disc span{color:var(--ink-3)}
.disciplines .disc:hover svg{color:var(--accent)}
.disciplines .disc:hover span{color:var(--ink)}

@media (max-width:520px){
  .disciplines{gap:1.4rem 1.9rem}
  .disc svg{width:28px}
  .disc span{font-size:8px;letter-spacing:.16em}
}


/* idle motion — only on the three icons where movement means something.
   Slow cycles, low contrast, nothing that could read as a strobe. */
.lamp{animation:lamp 2.4s linear infinite}
.lamp--l{fill:#CC0000;opacity:0}
.lamp--r{fill:#1D34D6;opacity:0;animation-delay:1.2s}
@keyframes lamp{0%{opacity:.24}39.5%{opacity:.24}40%{opacity:0}100%{opacity:0}}

.trace-bed{opacity:.2}
.trace{stroke-dasharray:62;stroke-dashoffset:62;animation:trace 3.2s var(--ease) infinite}
@keyframes trace{0%{stroke-dashoffset:62}45%,70%{stroke-dashoffset:0}100%{stroke-dashoffset:-62}}

.wave{opacity:0;animation:wave 2.6s ease-out infinite}
.wave--2{animation-delay:.42s}
@keyframes wave{0%{opacity:0}18%{opacity:.75}55%,100%{opacity:0}}

/* the whole mark lifts a touch under the cursor */
.disc{transition:transform .35s var(--ease)}
.disciplines .disc:hover{transform:translateY(-3px)}

@media (prefers-reduced-motion:reduce){
  .lamp,.trace,.wave{animation:none}
  .trace-bed{opacity:0}
  .lamp{opacity:.16}
  .trace{stroke-dashoffset:0}
  .wave{opacity:.5}
  .disciplines .disc:hover{transform:none}
}


/* ---------------------------------------------------------------------------
   The lockup row: a thumbnail either side of the play mark and wordmark.

   The cards are flex:1 1 0 with min-width:0, so they absorb whatever space the
   wordmark leaves and simply get narrower as the viewport does. That means no
   breakpoint decides whether they flank — they just always do, right down to
   phone width, where they finally drop beneath.
--------------------------------------------------------------------------- */
.lockup{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;
  gap:clamp(1.4rem,5vw,6rem);
  max-width:1520px;margin:0 auto;padding:0 var(--gut)}
.lockup__mid{flex:0 0 auto}

.th{--rot:0deg;--dy:clamp(10px,2.2vw,30px);margin:0;overflow:hidden;border-radius:14px;
  flex:1 1 0;min-width:0;max-width:clamp(110px,19vw,290px);
  transform:translateY(var(--dy)) rotate(var(--rot));
  box-shadow:0 2px 4px rgba(15,15,15,.08),0 16px 36px -14px rgba(15,15,15,.34);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
  /* `backwards`, not `both`: the keyframes hold the start state through the
     delay, then the element returns to its own declared transform. With `both`
     the animation's end state outranked the rotation and the hover, and the
     cards rendered dead flat. */
  animation:th-in .95s var(--ease) backwards;animation-delay:var(--d,0ms);
  /* two images stacked, so the card needs its own ratio */
  position:relative;aspect-ratio:1040/585}
@keyframes th-in{from{opacity:0;transform:translateY(calc(var(--dy) + 14px)) rotate(var(--rot))}}
.th img{position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:cover;border-radius:inherit}

/* Each card cross-fades between two episodes — four thumbnails of work instead
   of two, and the motion means something rather than decorating. */
.th__a{animation:xfade-a 9s ease-in-out infinite}
.th__b{animation:xfade-b 9s ease-in-out infinite}
.th--r .th__a,.th--r .th__b{animation-delay:-4.5s}
@keyframes xfade-a{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
@keyframes xfade-b{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}

/* inner corner raised, so the pair leans in toward the wordmark */
.th--l{--rot:-4deg}
.th--r{--rot:4deg}
/* hover straightens the card rather than tilting it further */
.th:hover{transform:translateY(calc(var(--dy) - 6px)) rotate(0deg) scale(1.03);
  box-shadow:0 3px 6px rgba(15,15,15,.1),0 26px 50px -16px rgba(15,15,15,.4)}

/* only on a phone, where a card beside the wordmark would be a postage stamp,
   do they move beneath it — side by side, never hidden */
@media (max-width:680px){
  .lockup{flex-wrap:wrap;gap:clamp(.6rem,2.4vw,1.2rem)}
  .lockup__mid{flex:1 0 100%;order:0;margin-bottom:clamp(1.4rem,4vw,2rem)}
  .th{order:1;flex:0 0 auto;width:clamp(138px,40vw,240px);max-width:none}
  .th--r{order:2}
  .wm{font-size:clamp(2.6rem,11vw,4.6rem)}
}

/* the lockup carries its own breathing room now that it is outside .w */
.phead--home{padding:clamp(3.6rem,9vw,7rem) 0 clamp(4rem,10vw,8rem);text-align:center}
.phead--home .w{padding-top:0}

@media (prefers-reduced-motion:reduce){
  .th{animation:none}
  .th:hover{transform:translateY(var(--dy)) rotate(var(--rot))}
  .th__a,.th__b{animation:none}
  .th__b{opacity:0}
}


/* ---------------------------------------------------------------------------
   Channel figures. Rendered straight into the HTML so they are right with no
   key, no network and no JavaScript; stats.js only refreshes them.
--------------------------------------------------------------------------- */
.statband{padding:clamp(2.4rem,5vw,3.6rem) 0}
.stats{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:clamp(2rem,7vw,6rem);margin:0}
.stat{text-align:center}
.stat dd{margin:0;font-family:var(--display);font-weight:700;
  font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums}
.stat dt{margin-top:.7rem;font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}

/* a quiet cue that the figures respond, without implying they are links */
@media (hover:hover){
  .stat{cursor:default}
  .stat dt{transition:color .25s var(--ease)}
  .stat:hover dt{color:var(--accent)}
}