/* ── The Videos section ───────────────────────────────────────────
   The archive, the category pages and the single. Tokens come from
   home.css; the type and chrome come from pages.css, which this
   sheet loads after and only adds to.

   The crop here is 16:9, not the 4:5 the bands use. A still lifted
   from a video is a 16:9 frame, and cropping it to a portrait tile
   throws away the two thirds of the composition the shot was framed
   around.
   ───────────────────────────────────────────────────────────────── */

  .bmp-videos .bmp-vidhead{padding-bottom:clamp(28px,3.4vw,44px)!important}
  .bmp-videos .bmp-vidbody{padding-top:0}

  .bmp-vidcrumb{font-family:var(--bmp-display);font-weight:700;font-size:11px;
    letter-spacing:.2em;text-transform:uppercase;color:var(--bmp-muted);
    margin:0 0 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
  .bmp-vidcrumb a{color:var(--bmp-muted);text-decoration:none}
  .bmp-vidcrumb a:hover{color:var(--bmp-gold-1)}
  .bmp-vidcrumb span{color:var(--bmp-gold-2)}

/* ── the category row ─────────────────────────────────────────────
   Scrolls sideways rather than wrapping to three ragged lines on a
   phone. The scrollbar is hidden but the row is still swipeable and
   still reachable by keyboard, because the links themselves take
   focus and the browser scrolls to them. */

  .bmp-vidnav{display:flex;gap:2px;margin:30px 0 0;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .bmp-vidnav::-webkit-scrollbar{display:none}

  .bmp-vidnav-link{
    flex:0 0 auto;display:block;padding:12px 18px;
    font-family:var(--bmp-display);font-weight:700;font-size:11px;
    letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
    color:var(--bmp-muted);background:var(--bmp-panel);
    border:1px solid var(--bmp-line);transition:color .2s,border-color .2s,background .2s;
  }
  .bmp-vidnav-link:hover{color:var(--bmp-white);border-color:var(--bmp-gold-line)}
  .bmp-vidnav-link.is-on{color:#0A0A0A;background:var(--bmp-gold-1);border-color:var(--bmp-gold-1)}
  .bmp-vidnav-link.is-on:hover{color:#0A0A0A}

/* ── the grid ────────────────────────────────────────────────────
   Same 2px seam as the visual bands, so the two ways this site shows
   a run of pictures are recognisably the same gesture. */

  .bmp-vidgrid{display:grid;gap:2px;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    background:var(--bmp-line);border:1px solid var(--bmp-line);margin-top:2px}

  .bmp-vidcard{display:block;background:var(--bmp-panel);text-decoration:none;
    color:var(--bmp-white);padding-bottom:22px}
  .bmp-vidcard-pic{position:relative;display:block;overflow:hidden;
    aspect-ratio:16/9;background:var(--bmp-ink)}
  .bmp-vidcard-pic img{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;display:block;transition:transform .6s var(--bmp-ease)}
  .bmp-vidcard:hover .bmp-vidcard-pic img{transform:scale(1.03)}

  /* The play badge is the bands' own, shrunk: it is a marker here rather
     than the subject of the tile. */
  .bmp-vidcard .bmp-shot-play{width:46px;height:46px}
  .bmp-vidcard .bmp-shot-play svg{width:28px;height:28px}

  .bmp-vidcard-cat{display:block;margin:18px 20px 8px;
    font-family:var(--bmp-display);font-weight:700;font-size:10px;
    letter-spacing:.2em;text-transform:uppercase;color:var(--bmp-gold-2)}
  .bmp-vidcard-title{display:block;margin:0 20px;
    font-family:var(--bmp-display);font-weight:700;
    font-size:clamp(15px,1.5vw,18px);line-height:1.3;letter-spacing:.01em;
    color:var(--bmp-white);text-wrap:balance;transition:color .2s}
  .bmp-vidcard:hover .bmp-vidcard-title{color:var(--bmp-gold-1)}
  /* Stated rather than inherited: a broad :hover rule written for the light
     sections must never resolve to dark type on this panel. */
  .bmp-vidcard:hover .bmp-vidcard-cat{color:var(--bmp-gold-1)}
  .bmp-vidcard:focus-visible{outline:2px solid var(--bmp-gold-1);outline-offset:-2px}

  .bmp-vidnone{color:var(--bmp-muted);margin:30px 0 0}

/* ── pagination ─────────────────────────────────────────────────── */

  .bmp-vidpages{margin-top:44px}
  .bmp-vidpages .nav-links{display:flex;flex-wrap:wrap;gap:2px}
  .bmp-vidpages a,.bmp-vidpages .current{
    display:block;padding:12px 18px;min-width:46px;text-align:center;
    font-family:var(--bmp-display);font-weight:700;font-size:11px;
    letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
    color:var(--bmp-muted);background:var(--bmp-panel);border:1px solid var(--bmp-line);
  }
  .bmp-vidpages a:hover{color:var(--bmp-white);border-color:var(--bmp-gold-line)}
  .bmp-vidpages .current{color:#0A0A0A;background:var(--bmp-gold-1);border-color:var(--bmp-gold-1)}

/* ── the single ─────────────────────────────────────────────────── */

  .bmp-vidsingle .bmp-vidstage{padding:0 0 clamp(28px,3.4vw,48px)}
  .bmp-vidsingle .bmp-vidstage .bmp-wrap{padding-top:clamp(24px,3vw,44px)}

  .bmp-vidplayer{position:relative;background:var(--bmp-ink);
    border:1px solid var(--bmp-line);aspect-ratio:16/9;overflow:hidden}
  .bmp-vidplayer video,
  .bmp-vidplayer iframe,
  .bmp-vidplayer embed,
  .bmp-vidplayer object{position:absolute;inset:0;width:100%;height:100%;
    border:0;display:block}
  /* Instagram's embed is a portrait card that sets its own height, so the
     16:9 frame is wrong for it and is released. */
  .bmp-vidplayer-embed:has(.instagram-media){aspect-ratio:auto;border:0;background:none}
  .bmp-vidplayer-embed:has(.instagram-media) iframe{position:static;height:auto}

  .bmp-vidsingle h1{font-size:clamp(30px,5vw,60px)}
  .bmp-vidtext{margin-top:24px}
  .bmp-vidtext p{color:var(--bmp-muted)}
  .bmp-vidtext p:last-child{margin-bottom:0}
  .bmp-vidout{margin:0}

  .bmp-vidmore h2{font-size:clamp(20px,2.4vw,30px);margin-bottom:20px}
  .bmp-vidmore{padding-top:0!important}

  @media (max-width:600px){
    .bmp-vidgrid{grid-template-columns:1fr}
    .bmp-vidnav{margin-left:calc(var(--bmp-gut) * -1);margin-right:calc(var(--bmp-gut) * -1);
      padding:0 var(--bmp-gut)}
  }

  @media (prefers-reduced-motion:reduce){
    .bmp-vidcard-pic img{transition:none}
    .bmp-vidcard:hover .bmp-vidcard-pic img{transform:none}
  }