/* Layout: a dark studio console. A portrait monitor plays the class through a
   mosaic that resolves on a slow four-count; giant type drifts beneath it, then
   a playlist rail, a depth collage, and a color shift onto a light booking floor. */
:root{
  --ground:#0b0c0c; --panel:#121415; --rule:#232728; --ink:#eef1f0; --dim:#8b9396;
  --teal:#00a7d3; --teal-ink:#00a7d3; --on-teal:#061013;
  --floor-ground:#f3f4ef; --floor-ink:#1a1a1a; --floor-dim:#55595c;
  --floor-rule:#d6d8d0; --floor-teal-ink:#006a86;
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --pix:"Silkscreen","Geist Mono",ui-monospace,monospace;
  --crt-v:repeating-linear-gradient(90deg,rgba(255,255,255,.024) 0 1px,transparent 1px 3px);
  --crt-h:repeating-linear-gradient(0deg,rgba(0,0,0,.26) 0 1px,transparent 1px 3px);
  --cur-arrow:-webkit-image-set(url("../assets/img/cursors/arrow.png") 1x,url("../assets/img/cursors/arrow@2x.png") 2x) 1 1,url("../assets/img/cursors/arrow.png") 1 1;
  --cur-hand:-webkit-image-set(url("../assets/img/cursors/hand.png") 1x,url("../assets/img/cursors/hand@2x.png") 2x) 5 1,url("../assets/img/cursors/hand.png") 5 1;
  --cur-loupe:-webkit-image-set(url("../assets/img/cursors/loupe.png") 1x,url("../assets/img/cursors/loupe@2x.png") 2x) 6 6,url("../assets/img/cursors/loupe.png") 6 6;
  color-scheme:dark;
}
/* Light mode is the homage: the original jarredmcarter.com's warm off-white. The
   booking floor flips the other way, so the color shift still lands somewhere new. */
:root[data-theme="light"]{
  --ground:#f3f4ef; --panel:#eaebe5; --rule:#d6d8d0; --ink:#1a1a1a; --dim:#55595c;
  --teal-ink:#006a86;
  --floor-ground:#0b0c0c; --floor-ink:#eef1f0; --floor-dim:#8b9396;
  --floor-rule:#232728; --floor-teal-ink:#00a7d3;
  --crt-v:repeating-linear-gradient(90deg,rgba(12,12,15,.045) 0 1px,transparent 1px 3px);
  --crt-h:none;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.55; overflow-x:hidden; cursor:var(--cur-arrow),auto}
a,button,[role="slider"],.quiver{cursor:var(--cur-hand),pointer}
/* the loupe means "this opens large", so it goes only on things that do */
[data-lb],[data-lb] img,[data-lb] video{cursor:var(--cur-loupe),zoom-in}
:focus-visible{outline:2px solid var(--teal-ink); outline-offset:3px}
img,video{max-width:100%; display:block}

.backdrop{position:fixed; inset:0; z-index:-1; background:var(--ground); pointer-events:none}
.crt{position:fixed; inset:0; pointer-events:none; z-index:60}
.crt::before{content:""; position:absolute; inset:0; background:var(--crt-v)}
.crt::after{content:""; position:absolute; inset:0; background:var(--crt-h); opacity:.4}

/* ---------- chrome bar: same family as jcart ---------- */
.bar{position:fixed; top:0; left:0; right:0; z-index:70;
  display:flex; align-items:center; gap:16px;
  padding:env(safe-area-inset-top,0px) clamp(16px,3vw,28px) 0; height:calc(36px + env(safe-area-inset-top,0px));
  font-family:var(--pix); font-size:10px; letter-spacing:.05em; color:var(--dim);
  background:color-mix(in srgb,var(--ground) 86%,transparent); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule)}
.bar a{color:var(--dim); text-decoration:none; transition:color .2s}
.bar a:hover{color:var(--ink)}
.mark{display:flex; color:var(--ink)}
.mark svg{width:12px; height:15px; display:block}
.brand{color:var(--ink)}
.links{display:flex; gap:16px}
.bar .right{margin-left:auto; display:flex; align-items:center; gap:12px}
.clock{font-family:var(--mono); font-size:10px; font-variant-numeric:tabular-nums}
.themetog{display:inline-flex; align-items:center; gap:6px; padding:3px 7px; line-height:1;
  font-family:var(--pix); font-size:9px; letter-spacing:.06em; color:var(--dim);
  background:var(--panel); border:1px solid var(--rule); border-radius:3px}
.themetog:hover{color:var(--ink)}
.themetog .sw{width:14px; height:7px; position:relative; background:var(--rule); border-radius:1px}
.themetog .sw::after{content:""; position:absolute; top:1px; left:1px; width:5px; height:5px;
  background:var(--ink); transition:transform .2s}
:root[data-theme="light"] .themetog .sw{background:var(--teal-ink)}
:root[data-theme="light"] .themetog .sw::after{transform:translateX(7px)}
@media (max-width:720px){.links,.brand{display:none}}

/* ---------- page frame ---------- */
.wrap{padding-inline:clamp(16px,5vw,56px)}
.inner{max-width:1240px; margin:0 auto}
.eyebrow{margin:0 0 14px; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim)}
.br{font-family:var(--pix); font-size:10px; color:var(--teal-ink); margin-right:6px}

/* ---------- hero ---------- */
.hero{display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(28px,5vw,72px); align-items:center;
  padding-block:clamp(84px,13vh,132px) clamp(36px,7vh,72px)}
.head{margin:0 0 20px; line-height:.84; font-weight:400; text-wrap:balance;
  font-family:var(--display); font-size:clamp(68px,11.5vw,164px); word-spacing:-.02em}
.head .w{display:inline-block; font-family:var(--display); font-weight:800;
  text-transform:uppercase; letter-spacing:-.01em; font-size:1em}
.head .slow{font-family:var(--serif); font-style:italic; font-weight:400; text-transform:none;
  letter-spacing:-.02em; font-size:clamp(84px,14vw,204px); color:var(--teal-ink); line-height:.8}
.w.hit{animation:hit .72s cubic-bezier(.2,.8,.2,1)}
.head .w:not(.slow).hit{animation:hit .72s cubic-bezier(.2,.8,.2,1), flash .72s ease}
@keyframes hit{0%{transform:translateY(-7px)}100%{transform:none}}
@keyframes flash{0%{color:var(--teal-ink)}100%{color:var(--ink)}}
.sub{margin:0 0 26px; max-width:40ch; font-size:clamp(16px,1.5vw,19px); color:var(--dim); line-height:1.6}
.quiver{display:inline-block; color:var(--ink); text-decoration:underline dotted var(--teal-ink);
  text-underline-offset:4px}
.quiver:hover,.quiver:focus-visible,.quiver.on{animation:quiver .085s linear infinite}
@keyframes quiver{0%{transform:translate(0,0)}25%{transform:translate(.7px,-.5px)}
  50%{transform:translate(-.6px,.6px)}75%{transform:translate(.5px,.6px)}100%{transform:translate(0,0)}}

.ctas{display:flex; flex-wrap:wrap; gap:12px; margin:0 0 28px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:13px 20px; text-decoration:none;
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--teal); transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, background .18s}
.btn.fill{background:var(--teal); color:var(--on-teal);
  box-shadow:4px 4px 0 color-mix(in srgb,var(--teal) 32%,transparent)}
.btn.fill:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 color-mix(in srgb,var(--teal) 40%,transparent)}
.btn.fill.hit{animation:pulse .9s ease-out}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--teal) 70%,transparent)}
  100%{box-shadow:0 0 0 14px transparent}}
.btn.line{background:transparent; color:var(--teal-ink); border-color:var(--teal-ink)}
.btn.line:hover{background:color-mix(in srgb,var(--teal) 12%,transparent)}
.btn.sm{padding:10px 15px; font-size:11px}

.facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin:0;
  max-width:500px; background:var(--rule); border:1px solid var(--rule)}
.facts div{background:var(--ground); padding:12px 14px; min-width:0}
.facts dt{font-family:var(--display); font-weight:800; font-size:30px; line-height:1}
.facts dd{margin:5px 0 0; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim); line-height:1.4}

/* the monitor */
.monitor{position:relative; margin:0; justify-self:end; width:100%; max-width:420px;
  aspect-ratio:9/16; max-height:78vh; background:#000; overflow:hidden;
  border:1px solid var(--rule); box-shadow:0 0 0 6px var(--panel), 0 0 0 7px var(--rule),
  0 30px 80px -30px color-mix(in srgb,var(--teal) 45%,transparent)}
.monitor video,.monitor canvas{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.monitor canvas{image-rendering:pixelated; transition:opacity .7s ease; filter:contrast(1.08) saturate(1.12)}
.monitor canvas.clear{opacity:0}
.monitor .scan{position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px)}
.monitor figcaption{position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between;
  align-items:center; gap:10px; padding:12px 13px;
  font-family:var(--pix); font-size:9px; letter-spacing:.06em; color:#eef1f0;
  background:linear-gradient(0deg,rgba(0,0,0,.82),transparent)}
.count{display:flex; align-items:center; gap:5px}
.count b{font-weight:400; font-size:11px; color:var(--teal); margin-right:4px; font-variant-numeric:tabular-nums}
.pip{width:6px; height:6px; background:rgba(238,241,240,.25); transition:background .15s}
.pip.on{background:var(--teal); box-shadow:0 0 8px var(--teal)}
/* the whole screen is a button that opens the class large; One More Rep sits above it */
.monitor-open{position:absolute; inset:0; z-index:2; padding:0; border:0; background:none}
.monitor-open:focus-visible{outline-offset:-4px}
.rep{position:absolute; z-index:3; top:12px; right:12px; padding:6px 9px;
  font-family:var(--pix); font-size:9px; letter-spacing:.06em; color:#eef1f0;
  background:rgba(0,0,0,.55); border:1px solid rgba(238,241,240,.28); border-radius:2px}
.rep:hover{border-color:var(--teal); color:var(--teal)}

/* ---------- giant drifting type ---------- */
.marquee{overflow:hidden; padding-block:clamp(20px,5vh,56px); border-block:1px solid var(--rule)}
.row{display:flex; width:max-content; white-space:nowrap; will-change:transform; align-items:center}
.row span{display:inline-flex; align-items:center; padding-right:.35em;
  font-family:var(--display); font-weight:800; text-transform:uppercase; line-height:.95;
  font-size:clamp(64px,13vw,190px); letter-spacing:-.01em}
.row em{font-family:var(--serif); font-style:italic; font-weight:400; text-transform:none;
  color:var(--teal-ink); letter-spacing:-.02em}
.row .dot{width:.16em; height:.16em; background:var(--teal); margin-inline:.28em; display:inline-block}
.row.r2 span{color:transparent; -webkit-text-stroke:1.2px var(--ink)}
.row.r2 em{-webkit-text-stroke:0; color:var(--dim)}

/* ---------- sections ---------- */
.sec{padding-block:clamp(64px,11vh,120px)}
.sec h2{margin:0 0 14px; font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(40px,6.4vw,84px); line-height:.9; letter-spacing:-.005em; text-wrap:balance}
.lede{margin:0 0 22px; max-width:56ch; color:var(--dim); font-size:clamp(15px,1.4vw,17px)}
.sec-head{display:grid; gap:0; margin-bottom:clamp(30px,6vh,56px)}

/* playlist rail: Bryan's timeline, re-cut as a week-by-week archive */
.rail{position:relative; padding:34px 6px 42px; margin-bottom:22px; touch-action:pan-y; user-select:none}
.track{position:relative; height:2px; background:var(--rule)}
.fill-line{position:absolute; left:0; top:0; bottom:0; background:var(--teal-ink); transition:width .45s cubic-bezier(.2,.8,.2,1)}
.knob{position:absolute; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px; background:var(--teal);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 25%,transparent), 0 0 16px var(--teal);
  transition:left .45s cubic-bezier(.2,.8,.2,1)}
.stops{list-style:none; margin:0; padding:0; position:absolute; left:6px; right:6px; top:0; bottom:0}
.stop{position:absolute; top:0; bottom:0; width:0}
.stop .tk{position:absolute; top:26px; left:0; width:1px; height:12px; background:var(--dim); transform:translateX(-50%)}
.stop.fav .tk{top:29px; width:6px; height:6px; transform:translateX(-50%) rotate(45deg)}
.stop .lbl{position:absolute; top:50px; left:0; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; font-variant-numeric:tabular-nums; color:var(--dim)}
.stop.edge-l .lbl{transform:none}
.stop.edge-r .lbl{transform:translateX(-100%)}
.stop.sel .lbl{color:var(--teal-ink)}
.stop.sel .tk{background:var(--teal-ink)}
.gap{position:absolute; top:32px; width:1px; height:6px; background:var(--rule); transform:translateX(-50%)}
/* the week on the left, its player on the right */
.pl-stage{display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(22px,3vw,40px); align-items:stretch}
.pl-card{display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:18px; min-width:0;
  padding:24px; border:1px solid var(--rule); background:var(--panel)}
.pl-num{font-family:var(--display); font-weight:800; font-size:clamp(64px,8vw,104px); line-height:.82;
  color:var(--ink); font-variant-numeric:tabular-nums}
.pl-num small{display:block; font-family:var(--pix); font-size:10px; font-weight:400; letter-spacing:.08em;
  color:var(--dim); margin-bottom:8px}
.pl-mid{min-width:0}
.pl-title{margin:0 0 4px; font-family:var(--display); font-weight:800; font-size:clamp(26px,2.6vw,34px);
  line-height:1; color:var(--ink)}
.pl-when{margin:0 0 12px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--dim)}
.tags{display:flex; flex-wrap:wrap; gap:6px}
.tag{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; padding:4px 8px;
  border:1px solid var(--rule); color:var(--dim)}
.tag.hot{color:var(--teal-ink); border-color:color-mix(in srgb,var(--teal-ink) 60%,transparent)}

/* the player, in the same bezel as the hero monitor */
.player{margin:0; min-width:0; background:var(--panel); border:1px solid var(--rule);
  box-shadow:0 0 0 6px var(--panel), 0 0 0 7px var(--rule), 0 30px 80px -34px color-mix(in srgb,var(--teal) 45%,transparent)}
.player-bar{display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--rule);
  font-family:var(--pix); font-size:9px; letter-spacing:.08em; color:var(--dim)}
.pdot{width:6px; height:6px; flex:0 0 auto; background:var(--teal); opacity:.5}
.pdot.tick{animation:ptick .9s ease-out}
@keyframes ptick{0%{opacity:1; box-shadow:0 0 10px var(--teal)}100%{opacity:.5; box-shadow:none}}
.player-meta{margin-left:auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.02em; color:var(--ink)}
.player-screen{position:relative; padding:12px; background:var(--ground)}
/* sits behind the iframe; Apple's player covers it once it paints */
.player-screen::before{content:"LOADING APPLE MUSIC\2026"; position:absolute; inset:12px; display:grid; place-items:center;
  font-family:var(--pix); font-size:9px; letter-spacing:.12em; color:var(--dim)}
.pl-frame{position:relative; display:block; width:100%; height:450px; border:0; border-radius:10px; overflow:hidden; background:transparent}

@media (max-width:900px){
  .pl-stage{grid-template-columns:1fr}
  .pl-card{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:18px}
  .pl-card .btn{grid-column:1 / -1; justify-content:center}
}
@media (prefers-reduced-motion:reduce){.pdot.tick{animation:none}}

/* collage: Lando's scattered depth, holding your clips. It runs wider than the
   text column (up to 1480px) and its rows are sized from its own width, so each
   tile keeps its shape at any screen size. */
.collage{--cw:min(1480px, 100vw - 2 * clamp(16px,5vw,56px));
  width:var(--cw); margin-left:calc((100% - var(--cw)) / 2);
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:20px;
  grid-auto-rows:calc((var(--cw) - 220px) / 12 * .62)}
.tile{position:relative; margin:0; overflow:hidden; border:1px solid var(--rule); background:var(--panel);
  will-change:transform; transition:border-color .25s}
.tile:hover{border-color:var(--teal-ink)}
.tile-open{display:block; width:100%; height:100%}
.tile-open:focus-visible{outline-offset:-4px}
.tile img,.tile video{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.tile:hover img,.tile:hover video{transform:scale(1.035)}
.tile figcaption{position:absolute; left:0; bottom:0; right:0; padding:10px 12px; pointer-events:none;
  font-family:var(--pix); font-size:9px; letter-spacing:.06em; color:#eef1f0;
  background:linear-gradient(0deg,rgba(0,0,0,.72),transparent)}
.t1{grid-column:1 / span 5; grid-row:1 / span 15; z-index:3}
.t5{grid-column:6 / span 4; grid-row:3 / span 8; z-index:4}
.t2{grid-column:10 / span 3; grid-row:1 / span 10; z-index:2}
.t3{grid-column:6 / span 3; grid-row:12 / span 7; z-index:1}
.t4{grid-column:9 / span 4; grid-row:12 / span 5; z-index:5}
@media (max-width:820px){
  .hero{grid-template-columns:1fr}
  .monitor{justify-self:stretch; max-width:none; aspect-ratio:4/5; max-height:none}
  .collage{width:auto; margin-left:0; grid-template-columns:1fr 1fr; grid-auto-rows:auto; gap:14px}
  .tile{grid-column:auto !important; grid-row:auto !important; aspect-ratio:4/5}
  .t1{grid-column:1 / -1 !important; aspect-ratio:4/5}
  .t5{grid-column:1 / -1 !important; aspect-ratio:1/1}
  .t4{grid-column:1 / -1 !important; aspect-ratio:3/2}
}
@media (prefers-reduced-motion:reduce){.tile img,.tile video{transition:none}.tile:hover img,.tile:hover video{transform:none}}

/* ---------- the viewer: every photo and clip opens large ----------
   It arrives as a coarse mosaic and sharpens on a quick four-count, the hero
   monitor's move played fast. Dark in both themes, like the main site's
   lightbox: a picture reads best against black. */
.lb{--ink:#eef1f0; --dim:#8b9396; --rule:#232728; --panel:#121415; --teal-ink:#00a7d3;
  position:fixed; inset:0; z-index:90; display:grid; place-items:center;
  padding:calc(58px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px));
  background:rgba(5,6,6,.93); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--ink); touch-action:pinch-zoom; animation:lbIn .24s ease both}
.lb[hidden]{display:none}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb-fig{margin:0; display:flex; flex-direction:column; gap:14px; animation:lbPop .34s cubic-bezier(.2,.9,.25,1) both}
@keyframes lbPop{from{transform:scale(.965); opacity:0}to{transform:none; opacity:1}}
.lb-screen{position:relative; overflow:hidden; background:#000; border:1px solid var(--rule); touch-action:pinch-zoom;
  box-shadow:0 0 0 6px var(--panel), 0 0 0 7px var(--rule), 0 30px 90px -30px color-mix(in srgb,var(--teal) 50%,transparent)}
.lb-media{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.lb-mosaic{position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated;
  filter:contrast(1.08) saturate(1.12); transition:opacity .45s ease}
.lb-mosaic.clear{opacity:0}
.lb-screen .scan{position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px)}
.lb-bar{display:flex; justify-content:space-between; align-items:center; gap:14px; min-width:0;
  font-family:var(--pix); font-size:9px; letter-spacing:.07em; color:var(--dim)}
.lb-bar #lbCap{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lb-right{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.lb-bar b{font-weight:400; font-family:var(--mono); font-size:10px; color:var(--teal-ink); font-variant-numeric:tabular-nums}
.lb-play{font-family:var(--pix); font-size:9px; letter-spacing:.06em; padding:5px 8px; color:var(--dim);
  background:none; border:1px solid var(--rule)}
.lb-play:hover{color:var(--ink); border-color:var(--dim)}
.lb-x,.lb-nav{position:absolute; display:grid; place-items:center; color:var(--dim);
  background:var(--panel); border:1px solid var(--rule); transition:color .2s, border-color .2s}
.lb-x:hover,.lb-nav:hover{color:var(--ink); border-color:var(--dim)}
.lb-x{top:calc(12px + env(safe-area-inset-top,0px)); right:clamp(12px,2vw,26px); width:38px; height:38px;
  font-family:var(--sans); font-size:22px; line-height:1}
.lb-nav{top:50%; width:46px; height:46px; margin-top:-23px; font-family:var(--mono); font-size:16px}
.lb-nav.prev{left:clamp(12px,2vw,26px)}
.lb-nav.next{right:clamp(12px,2vw,26px)}
/* on a phone the arrows move under the picture, where a thumb can reach them */
@media (max-width:700px){
  .lb{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .lb-nav{top:auto; bottom:calc(20px + env(safe-area-inset-bottom,0px)); margin-top:0}
  .lb-nav.prev{left:calc(50% - 56px)}
  .lb-nav.next{right:calc(50% - 56px)}
}
body.lb-lock{overflow:hidden}
@media (prefers-reduced-motion:reduce){.lb,.lb-fig{animation:none}.lb-mosaic{display:none}}

/* ---------- Mega Move Monday: a scrollable shelf of weekly Instagram drops ---------- */
.mmm-wrap{position:relative}
.mmm{list-style:none; margin:0; padding:0 0 16px; display:flex; gap:14px; overflow-x:auto;
  scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:thin;
  scrollbar-color:var(--rule) transparent}
.mm{flex:0 0 auto; width:clamp(190px,54vw,248px); scroll-snap-align:start}
.mm-card{position:relative; display:flex; flex-direction:column; justify-content:flex-end; gap:8px;
  aspect-ratio:9/16; padding:18px; overflow:hidden; text-decoration:none; color:var(--ink);
  border:1px solid var(--rule);
  background:radial-gradient(circle,color-mix(in srgb,var(--ink) 9%,transparent) 1px,transparent 1.6px) 0 0/12px 12px,var(--panel)}
.mm-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* a scrim so the move name stays legible over the footage */
.mm.live .mm-card::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.2) 42%,transparent 62%)}
.mm.live .mm-card:has(.mm-img) .mm-date{color:#6fd3ee}
.mm.live .mm-card:has(.mm-img) .mm-move{color:#eef1f0}
.mm.live .mm-card:has(.mm-img) .mm-cta{color:rgba(238,241,240,.72)}
.mm-card > span{position:relative; z-index:2}
.mm-date{font-family:var(--pix); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-ink)}
.mm-move{font-family:var(--display); font-weight:800; text-transform:uppercase; line-height:.9;
  font-size:clamp(32px,4vw,44px); text-wrap:balance}
.mm-cta{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}
.mm.live .mm-card{transition:border-color .25s, transform .25s cubic-bezier(.2,.8,.2,1)}
.mm.live .mm-card:hover{border-color:var(--teal-ink); transform:translateY(-3px)}
.mm.live .mm-card:hover .mm-cta{color:var(--teal-ink)}
.mm.soon .mm-card{border-style:dashed; border-color:color-mix(in srgb,var(--teal-ink) 45%,transparent)}
.mm.soon .mm-move{color:var(--dim)}
.mmm-nav{display:flex; gap:8px; margin-top:6px}
.mmm-btn{width:38px; height:34px; display:grid; place-items:center; font-family:var(--mono); font-size:14px;
  color:var(--dim); background:var(--panel); border:1px solid var(--rule)}
.mmm-btn:hover{color:var(--ink); border-color:var(--dim)}

/* ---------- the floor: where the color shift lands ---------- */
.floor{--ground:var(--floor-ground); --ink:var(--floor-ink); --dim:var(--floor-dim);
  --rule:var(--floor-rule); --teal-ink:var(--floor-teal-ink); --panel:color-mix(in srgb,var(--floor-ground) 92%,var(--floor-ink));
  background:var(--ground); color:var(--ink)}
.private{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:26px;
  padding-top:22px; border-top:1px solid var(--rule); font-family:var(--mono); font-size:12px; color:var(--dim)}
.private code{font-family:var(--mono); font-size:13px; color:var(--ink); user-select:all;
  padding:4px 8px; border:1px solid var(--rule); background:var(--panel)}
.copy{font-family:var(--pix); font-size:9px; letter-spacing:.06em; padding:6px 9px; color:var(--dim);
  background:none; border:1px solid var(--rule)}
.copy:hover{color:var(--ink); border-color:var(--dim)}
.foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; align-items:baseline;
  padding-block:30px calc(40px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--rule);
  font-family:var(--pix); font-size:10px; letter-spacing:.05em; color:var(--dim)}
.foot-links{display:flex; flex-wrap:wrap; gap:18px}
.foot a{color:var(--ink); text-decoration:none}
.foot a:hover{color:var(--teal-ink)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .quiver,.w.hit,.btn.fill.hit{animation:none!important}
  .monitor canvas{display:none}
}