.ms-list .ms-play{border-top:1px solid var(--line);margin-block-start:var(--space-3xs);padding-block-start:var(--space-3xs)}
.vids .mt-tile img{width:9.8rem;height:5.5125rem;max-height:none;object-fit:cover;background:#000}
.vids-intro{font-size:var(--text-lead);color:var(--ink-soft);max-width:38rem}
.vids-intro>*+*{margin-block-start:var(--space-s)}
.v-sec{display:flex;flex-direction:column;gap:var(--space-s)}
.v-sec h3{font-family:var(--font-title);font-weight:400;letter-spacing:-.01em;font-size:var(--text-h4);
  color:var(--h3);margin:0}
.v-grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-l) var(--space-m);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));align-items:start}
.vc{position:relative;display:flex;flex-direction:column;gap:var(--space-2xs);min-width:0;
  scroll-margin-top:var(--space-xl)}   /* relative: keeps the hidden "favorite" word inside the reel */
.vf{position:relative;display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--paper-2);
  line-height:0;border:1px solid var(--line);text-decoration:none;color:#fff}
.vf img{display:block;width:100%;height:100%;object-fit:cover}
.vf iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vf-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:3.75rem;height:2.6rem;
  border-radius:12px;background:rgb(0 0 0 / .62);color:#fff;display:grid;place-items:center;
  transition:background .12s,transform .12s}
.vf-btn svg{width:1.6rem;height:1.6rem}
.vf:is(:hover,:focus-visible) .vf-btn{background:var(--magenta-deep);transform:translate(-50%,-50%) scale(1.06)}
.vf:focus-visible{outline:3px solid var(--azure-light);outline-offset:3px}
.vf-dur{position:absolute;right:.375rem;bottom:.375rem;font-size:var(--text-fine);font-weight:600;
  line-height:1.25;padding:.05rem .4rem;border-radius:5px;background:rgb(0 0 0 / .78);color:#fff}
.vf.out .vf-out{position:absolute;left:0;right:0;bottom:0;padding:var(--space-2xs) var(--space-xs);
  background:rgb(0 0 0 / .78);color:#fff;font-size:var(--text-fine);font-weight:650;line-height:1.3}
.vf.out:is(:hover,:focus-visible) .vf-out{background:var(--magenta-deep)}
.vids .vc .vc-title{font-family:var(--font-body);font-size:var(--text-ui);font-weight:650;line-height:1.35;
  letter-spacing:0;margin:0;color:var(--ink);overflow-wrap:anywhere}
/* A title that links has a page with its story behind it: link color + a soft underline. */
.vids .vc-title a{color:var(--link);text-decoration:underline;text-decoration-color:var(--line);
  text-decoration-thickness:2px;text-underline-offset:3px}
.vids .vc-title a:hover{color:var(--link-hover);text-decoration-color:currentColor}
.vc-n{color:var(--ink-faint);font-weight:600;margin-right:.4em}
.vc-lk{margin:0;font-size:var(--text-fine);color:var(--ink-faint)}
.vid-likes{margin:0;font-size:var(--text-ui);color:var(--ink-faint)}
/* A hairline under every card in a grid, with room around it (2026-11-07 night, Darby: declutter) */
.v-grid>li{padding-bottom:var(--space-l);border-bottom:1px solid var(--line)}
.vc-body{display:flex;flex-direction:column;gap:var(--space-2xs);min-width:0}
/* Cards line up across a row (2026-11-08, Darby): each card's title, likes,
   picture and comments share the row's 4 tracks (subgrid), so the pictures
   sit level, a short title hugs its picture, and the hairlines run straight.
   Same in the gags reel. Old browsers keep the stacked card. */
@supports (grid-template-rows:subgrid){
  .v-reel{grid-template-rows:repeat(4,auto)}
  .v-grid>li.vc,.v-reel>li.vc{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:var(--space-2xs)}
  :is(.v-grid,.v-reel)>li.vc>.vc-title{grid-row:1;align-self:end}
  :is(.v-grid,.v-reel)>li.vc>.vc-lk{grid-row:2}
  :is(.v-grid,.v-reel)>li.vc>.vf{grid-row:3}
  :is(.v-grid,.v-reel)>li.vc>.vc-body{grid-row:4;align-self:start}
}
/* The Best of on /vids shows 12 (6 on a phone), then "Show all 75"
   (2026-11-08, Darby). 12 / 6 = VIDS_CAP / VIDS_CAP_PHONE in build.py. */
.v-cap>li:nth-child(n+13){display:none}
.v-uncap{display:flex;justify-content:center;margin:var(--space-l) 0 0}
.v-uncap[hidden]{display:none}
@media(min-width:34.01rem){.v-uncap.v-few{display:none}}
.vc-fave{color:var(--magenta-deep);margin-left:.35em;font-weight:400}
.vc-line{font-size:var(--text-fine);color:var(--ink-soft);line-height:1.5;margin:0}
.vc-cmt,.vps-cmt{font-size:var(--text-fine);color:var(--ink-soft);line-height:1.5;margin:0;overflow-wrap:anywhere}
.vps-cmt{font-size:var(--text-ui);color:var(--ink)}
.vc-cmt-k{font-weight:650;color:var(--label)}
.vc-likes{color:var(--ink-faint);white-space:nowrap}
/* Best comment(s) (2026-11-07): full length everywhere, cards included */
.bc{display:flex;flex-direction:column;gap:var(--space-2xs);margin:0;font-size:var(--text-fine);line-height:1.5;
  color:var(--ink-soft);overflow-wrap:anywhere}
.bc-h{margin:0}
.bc-h .vc-cmt-k{white-space:nowrap}
.bc-vl{color:var(--ink-faint);white-space:nowrap}
.bc-c{margin:0}
.bc-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2xs)}
.bc-n{display:inline-block;min-width:1.3em;margin-right:.25em;font-weight:650;color:var(--label)}
/* "More comments" drop-down (2026-11-07 night, Darby: 1st comment only, 2 and 3 on tap) */
.bc-more>summary{cursor:pointer;width:max-content;font-weight:650;color:var(--link);list-style-position:inside}
.bc-more>summary:hover{color:var(--link-hover)}
.bc-more>summary:focus-visible{outline:3px solid var(--azure-light);outline-offset:2px;border-radius:4px}
.bc-more[open]>summary{display:none}   /* opened = the drop-down goes away and 2 + 3 line up under 1 (Darby) */
.bc-t{color:var(--ink)}
.bc-tr{display:block;font-style:italic;color:var(--ink-faint)}
.bc-subs{display:flex;margin-top:var(--space-2xs)}
.vp-story .bc,.vid-page .bc{font-size:var(--text-ui)}
.vid-page .bc{font-size:var(--text-lead);line-height:1.55;margin-top:var(--space-m)}
.vid-page .bc-tr,.vid-page .bc-vl,.vid-page .vc-likes{font-size:var(--text-ui)}
.vc-gag{display:inline-block;font-size:var(--text-fine);font-weight:650;line-height:1.3;
  color:var(--label);margin-right:.4em}
.vc.vq-now .vf{box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--magenta)}
.vids .vc.vq-now .vc-title{color:var(--link-hover)}
.v-reel{list-style:none;margin:0;padding:0 0 var(--space-xs);display:grid;grid-auto-flow:column;
  grid-auto-columns:15.25rem;gap:var(--space-m);   /* the last card peeks: there's more */overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scrollbar-width:thin}
.v-reel>li{scroll-snap-align:start}
.v-play{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-xs) var(--space-s)}
.v-play .btn{display:inline-flex;align-items:center;gap:var(--space-2xs)}
.v-play .btn svg{width:1.25rem;height:1.25rem}
.v-play p{margin:0;font-size:var(--text-fine);color:var(--ink-faint)}
.vp{display:flex;flex-direction:column;gap:var(--space-xs);scroll-margin-top:var(--space-s)}
.vp[hidden]{display:none}
.vp-frame{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.vp-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vp-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2xs) var(--space-s)}
.vp-now{font-weight:650;font-size:var(--text-ui);color:var(--ink);min-width:0;overflow-wrap:anywhere;margin:0}
/* Over the video: "1 of 108 music vids" / the title / its likes (2026-11-07 night, Darby) */
.vp-head{display:flex;flex-direction:column;gap:var(--space-3xs)}
.vp-pos{margin:0;font-size:var(--text-fine);font-weight:650;color:var(--label)}
.vp-likes{margin:0;font-size:var(--text-fine);color:var(--ink-faint)}
.vp-likes[hidden]{display:none}
/* The control bar: its own color (the site's purple band), one line on a 360px phone */
.vp-ctl{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2xs);flex-wrap:nowrap;
  padding:var(--space-2xs) var(--space-xs);border-radius:12px;background:var(--band);color:var(--band-soft)}
.vp-ctl button{font-family:var(--font-body);font-size:var(--text-ui);font-weight:650;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;border:0;border-radius:10px;
  background:transparent;color:inherit;transition:background .15s,color .15s}
.vp-ctl button:hover{background:rgb(255 255 255 / .12);color:var(--azure-light)}
.vp-ctl button:focus-visible{outline:3px solid var(--azure-light);outline-offset:2px}
.vp-ic{width:3rem;padding:0}
.vp-ic svg{width:1.75rem;height:1.75rem}
.vp-ctl [aria-pressed=true]{color:var(--mint)}
.vp-weird{padding-inline:var(--space-2xs);white-space:nowrap}
/* "Weird gags off" (2026-11-08, Darby): "gags" stacked over the on/off pill so
   the button reads as a sentence; a little taller. The icons sit left with a
   small gap and the button takes the right end. */
.vp-ctl.mix{justify-content:flex-start;gap:min(3vw,1.5rem)}
.vp-ctl.mix .vp-weird{margin-left:auto}
.vp-ctl .vp-weird{min-height:3.5rem;gap:.45em;padding-block:.375rem}
.vw-r{display:inline-flex;flex-direction:column;align-items:center;gap:.2em;line-height:1.1}
.vw-g{font-size:var(--text-fine);font-weight:650}
.vp-weird .vpl-state{margin-left:0;font-size:var(--text-fine);line-height:1.3}
.v-fit{text-wrap:balance}
.vp-weird .vpl-state{background:var(--band-soft);color:var(--band)}
.vp-weird[aria-pressed=true] .vpl-state{background:var(--mint);color:var(--band)}
.vp-ctl [hidden]{display:none}
.vp-ctl[hidden]{display:none}
.vp-msg{font-size:var(--text-fine);color:var(--ink-soft);margin:0}
.vp-msg:empty{display:none}
.v-writeup{max-width:var(--max)}
.v-writeup>*+*{margin-block-start:var(--space-s)}
.v-writeup p,.v-writeup li{font-size:var(--text-body);line-height:1.7}
.vid-page{padding-block-start:var(--space-xl)}
.vid-page .vid{--flow-space:var(--space-m)}
.vid-page .vid header{--flow-space:var(--space-2xs)}
.vid-page h1{font-family:var(--font-title);font-weight:400;letter-spacing:-.01em;
  font-size:var(--text-h2);line-height:1.15;color:var(--h1)}
.vid-sub{font-size:var(--text-ui);color:var(--ink-soft);margin:0}
.vid-player .embed{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.vid-player .embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-player .embed-fallback{display:none}
.vid-out .vf{border-radius:12px}
.vid-story{font-size:var(--text-lead);line-height:1.6;color:var(--ink-soft)}   /* the lead */
.vid-long{--flow-space:var(--space-s)}
.vid-long p{font-size:var(--text-body);line-height:1.7;color:var(--ink)}
.vid-h{font-family:var(--font-title);font-weight:400;letter-spacing:-.01em;font-size:var(--text-h4);
  color:var(--h3);margin:0}
.vid-sources{font-size:var(--text-fine);color:var(--ink-soft)}
.vid-in h2{font-family:var(--font-body);font-size:var(--text-fine);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--label);margin:0 0 var(--space-2xs)}
/* Sideways rows (2026-11-06, Darby: each group is one row you scroll
   sideways, Netflix-style). The row scrolls inside itself, never the page;
   the last tile peeks so it's clear there's more. */
.v-scroll{position:relative;min-width:0}
.v-tiles{list-style:none;margin:0;padding:var(--space-3xs) var(--space-3xs) var(--space-xs);display:grid;
  grid-auto-flow:column;grid-auto-columns:13.5rem;gap:var(--space-s);overflow-x:auto;
  overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin}
.v-tiles>li{scroll-snap-align:start;min-width:0}
.vt{display:flex;flex-direction:column;gap:var(--space-2xs)}
.vt .mt-tile:hover{transform:none}   /* no lift: the row would clip it */
.vids .mt-rt{display:block}.vids .mt-dot{display:none}
.v-hero-play p a{white-space:nowrap}
.vplay .vpl-h{font-size:var(--text-h2)}
.vpl-stage,.vpl-tools,.vpl-filter{max-width:46rem}
.vt-play{align-self:flex-start;display:inline-flex;align-items:center;gap:var(--space-3xs);
  font-size:var(--text-fine);font-weight:650;line-height:1.35;text-decoration:none;color:var(--link);
  padding:var(--space-3xs) var(--space-xs) var(--space-3xs) var(--space-2xs);border:1px solid var(--line);
  border-radius:99px;background:var(--paper-2)}
.vt-play svg{width:1.1rem;height:1.1rem}
.vt-play:hover{background:var(--hover-fill);border-color:var(--hover-fill);color:var(--hover-ink)}
.vt-play:focus-visible{outline:3px solid var(--azure-light);outline-offset:2px}
.v-arrow{position:absolute;top:calc(50% - 2.75rem);width:2.75rem;height:2.75rem;border-radius:50%;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;
  font-size:var(--text-h4);line-height:1;display:grid;place-items:center;
  box-shadow:0 6px 18px rgb(58 47 94 / .22);z-index:5}
/* Fat, easy-to-grab scroll bars under the rows on mouse screens (Darby,
   2026-11-06: the thin ones were hard to click). Chrome/Edge/Safari use the
   ::-webkit-scrollbar rules, which only work while scrollbar-width is auto;
   Firefox can't go fatter than its normal bar, so it gets that plus colors.
   Phones and tablets keep the thin bar: they swipe. */
@media (hover:hover) and (pointer:fine){
  .v-tiles,.v-reel{scrollbar-width:auto;padding-bottom:var(--space-s)}
  .v-tiles::-webkit-scrollbar,.v-reel::-webkit-scrollbar{height:18px}
  .v-tiles::-webkit-scrollbar-track,.v-reel::-webkit-scrollbar-track{background:var(--paper-2);
    border-radius:99px;box-shadow:inset 0 0 0 1px var(--line)}
  .v-tiles::-webkit-scrollbar-thumb,.v-reel::-webkit-scrollbar-thumb{background:var(--ink-faint);
    border-radius:99px;border:3px solid var(--paper-2);background-clip:padding-box;min-width:3rem}
  .v-tiles::-webkit-scrollbar-thumb:hover,.v-reel::-webkit-scrollbar-thumb:hover{background-color:var(--azure)}
  .v-tiles::-webkit-scrollbar-thumb:active,.v-reel::-webkit-scrollbar-thumb:active{background-color:var(--azure-deep)}
  .v-tiles::-webkit-scrollbar-button,.v-reel::-webkit-scrollbar-button{display:none}
  @supports (-moz-appearance:none){
    .v-tiles,.v-reel{scrollbar-color:var(--ink-faint) var(--paper-2)}
  }
}
.v-arrow.prev{left:calc(-1 * var(--space-xs))}.v-arrow.next{right:calc(-1 * var(--space-xs))}
.v-arrow:hover{background:var(--hover-fill);border-color:var(--hover-fill);color:var(--hover-ink)}
.v-arrow[hidden]{display:none}
@media not ((hover:hover) and (pointer:fine)){.v-arrow{display:none}}
.v-reel+.v-arrow{top:calc(50% - 3.5rem)}
/* ▶ Play the Best of, at the top of /vids */
.v-hero-play{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-xs) var(--space-s)}
.v-hero-play p{margin:0;font-size:var(--text-fine);color:var(--ink-soft)}
.btn.v-big{display:inline-flex;align-items:center;gap:var(--space-2xs);font-size:var(--text-lead);
  padding:var(--space-xs) var(--space-l) var(--space-xs) var(--space-m);border-radius:12px}
.btn.v-big svg{width:1.6rem;height:1.6rem}
/* The story under the player */
.vp-story{display:flex;flex-direction:column;gap:var(--space-2xs);padding:var(--space-s) var(--space-m);
  border:1px solid var(--line);border-radius:12px;background:var(--paper-2);max-width:var(--max)}
.vp-story[hidden]{display:none}
.vps-text{margin:0;font-size:var(--text-ui);line-height:1.6;color:var(--ink)}
.vps-more{align-self:flex-start;font-size:var(--text-fine)}
/* The play-all page */
.vpl-stage{display:flex;flex-direction:column;gap:var(--space-xs)}
.vpl-poster{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;border-radius:12px;
  overflow:hidden;background:#000;cursor:pointer;color:#fff}
.vpl-poster[hidden]{display:none}
.vpl-poster img{display:block;width:100%;height:100%;object-fit:cover;opacity:.72}
.vpl-big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;
  gap:var(--space-2xs);padding:var(--space-s) var(--space-l) var(--space-s) var(--space-m);border-radius:14px;
  background:var(--magenta-deep);font-family:var(--font-body);font-size:var(--text-lead);font-weight:700;
  box-shadow:0 10px 30px rgb(0 0 0 / .45);transition:transform .12s,background .12s}
.vpl-big svg{width:2rem;height:2rem}
.vpl-poster:is(:hover,:focus-visible) .vpl-big{background:var(--cosmic-deep);transform:translate(-50%,-50%) scale(1.05)}
.vpl-poster:focus-visible{outline:3px solid var(--azure-light);outline-offset:3px}
.vplay .hero .vpl-sub{font-size:calc(var(--text-ui) * var(--fit, 1));color:var(--ink-soft);margin:0;
  white-space:nowrap;max-width:none}
.vplay .hero .vpl-sub.vpl-wrap{white-space:normal}
@media(min-width:34.01rem){.vplay .hero .vpl-sub{white-space:normal}}
.vpl-love{margin:0;font-size:var(--text-ui);font-weight:650;color:var(--ink-soft)}
.vpl-tools{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2xs)}
.vpl-tools{gap:var(--space-xs)}
.vpl-tools .mt-hbtn{white-space:nowrap;font-size:var(--text-ui)}
.vpl-hr{--flow-space:var(--space-s)}
.vplay .v-grid>li[hidden]{display:none}
.vpl-none{margin:0;font-size:var(--text-ui);color:var(--ink-soft)}
.vpl-none[hidden]{display:none}
.vpl-tools[hidden],.vpl-filter[hidden],.vpl-chips[hidden]{display:none}
.vpl-tg[aria-pressed=true]{background:var(--cosmic-deep);border-color:var(--cosmic-deep);color:#fff}
.vpl-state{display:inline-block;margin-left:.3em;padding:0 .45em;border-radius:6px;font-weight:700;
  background:var(--line);color:var(--ink)}
.vpl-tg[aria-pressed=true] .vpl-state{background:var(--mint);color:var(--cosmic-deep)}
.vpl-tools .vpl-msg{flex-basis:100%;margin:0;font-size:var(--text-fine);color:var(--ink-soft);overflow-wrap:anywhere}
.vpl-tools .vpl-msg:empty{display:none}
.vpl-filter{display:flex;flex-direction:column;gap:var(--space-xs);padding:var(--space-s) var(--space-m);
  border:1px solid var(--line);border-radius:12px;background:var(--paper-2)}
.vpl-fh{font-family:var(--font-body);font-size:var(--text-fine);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--label);margin:0}
.vpl-chips{display:flex;flex-wrap:wrap;gap:var(--space-2xs)}
.vpl-chip{font-family:var(--font-body);font-size:var(--text-fine);font-weight:650;cursor:pointer;
  padding:var(--space-3xs) var(--space-xs);border:1px solid var(--cosmic-deep);border-radius:99px;
  background:var(--cosmic-deep);color:#fff}
.vpl-chip:hover{background:var(--hover-fill);border-color:var(--hover-fill);color:var(--hover-ink)}
.vpl-fields{display:flex;flex-wrap:wrap;gap:var(--space-2xs)}
.vpl-add,.vpl-q{font-family:var(--font-body);font-size:var(--text-ui);padding:var(--space-2xs) var(--space-xs);
  border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);min-width:0}
.vpl-add{flex:0 1 16rem}.vpl-q{flex:1 1 14rem}
.vpl-add:focus-visible,.vpl-q:focus-visible,.vpl-chip:focus-visible,.v-arrow:focus-visible{outline:3px solid var(--azure-light);outline-offset:2px}
.vpl-nojs{font-size:var(--text-ui)}
@media(max-width:34rem){
  .vids .mt-tile img{width:7rem;height:3.9375rem}
  .v-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-l)}
  .v-cap>li:nth-child(n+7){display:none}
  .v-reel{grid-auto-columns:78%}
  .v-tiles{grid-auto-columns:46%;gap:var(--space-xs)}
  .vids .mt-rt{display:inline}.vids .mt-dot{display:inline}
  .vp-ctl .btn{padding-inline:var(--space-xs)}
  .vp-weird .vpl-state{margin-left:0;padding:0 .35em}
  .btn.v-big{font-size:var(--text-ui)}
  .vpl-big{font-size:var(--text-ui);padding:var(--space-xs) var(--space-m) var(--space-xs) var(--space-s)}
  .vpl-big svg{width:1.5rem;height:1.5rem}
  .vpl-filter,.vp-story{padding:var(--space-xs) var(--space-s)}
  .vpl-add,.vpl-q{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){.vf-btn,.vpl-big{transition:none}}