/* SPEARFISHER desktop layout (901px and up). The phone layout is untouched: everything here is inside min-width queries
   or keyed on html.dk, which js/desktop.js only sets on desktop widths. */
.dk-h{display:none}
html:not(.vz-on) .vz-fs{display:none!important}
@media (max-width:900px){.vz-fs{display:none!important}}

@media (min-width:901px){
  /* ---- overall rhythm ---- */
  main>section:not(.hero){padding-top:clamp(84px,8vw,128px)!important;padding-bottom:clamp(84px,8vw,128px)!important}
  main>section>h2.lbl,#portfolio .pg>h2.lbl{margin-bottom:clamp(36px,3.4vw,52px)!important}
  #about .wrap.about{max-width:1160px;margin-left:auto;margin-right:auto}
  #contact{max-width:860px;margin-left:auto;margin-right:auto}
  html.mp-on footer{padding-bottom:110px!important}

  /* ---- portfolio: everything visible, two highlighted ---- */
  #portfolio .pg{max-width:1240px;margin-left:auto;margin-right:auto}
  .v2-port{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
  .v2-port>.v2-chips,.v2-port>.v2-more{display:none!important}
  #portfolio .v2-port .v2-grid,#portfolio .v2-port .v2-grid.on{display:contents!important}
  .v2-port .dk-h{display:block;grid-column:1/-1;margin:0 0 18px!important}
  .v2-port .dk-h:first-child{grid-row:1}
  .v2-port .v2-hero{grid-column:1;grid-row:2}
  #portfolio .v2-port .v2-grid>figure{grid-column:2;grid-row:2}
  .v2-port .v2-hero .vw,#portfolio .v2-port .v2-grid>figure .vw{aspect-ratio:2.39/1!important;max-height:40vh;width:100%;border-radius:8px;overflow:hidden}
  #portfolio .v2-port .v2-grid>figure video{object-fit:cover;opacity:1!important}
  #portfolio .v2-port .v2-grid>figure figcaption{margin:10px 0 0!important;font:300 20px/1.2 var(--serif)!important;color:var(--fg)!important;white-space:normal}
  #portfolio .v2-port .v2-grid>figure figcaption:after{content:"Focus Features · Trailer";display:block;margin-top:4px;font:300 10px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
  #portfolio .v2-port .v2-grid [data-cards],#portfolio .v2-port .v2-grid [data-ads]{display:grid!important;grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 22px}
  #portfolio .v2-port .v2-grid [data-cards]{grid-row:3;margin-top:44px}
  #portfolio .v2-port .dk-bf{grid-row:4;margin-top:64px!important}
  #portfolio .v2-port .v2-grid [data-ads]{grid-row:5}
  #portfolio .v2-port .v2-grid .card,#portfolio .v2-port .v2-grid .pf{display:block!important}
  #portfolio .v2-port .v2-grid .pf b,#portfolio .v2-port .v2-grid .card b{font-size:12px!important;margin-top:8px!important}

  /* ---- listen: player on the left, albums (with their tracks) on the right ---- */
  #listen>*:not(h2){max-width:1240px!important}
  #listen .listen{display:block}
  #listen [data-pl]{display:grid;grid-template-columns:minmax(0,760px);justify-content:center;gap:0 clamp(40px,5vw,80px);align-items:start}
  #listen .v2-albums{margin-top:0}
  #listen .v2-albums>.v2-lbl{margin-top:4px}
  #listen .v2-albums .albums{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px!important}
  #listen .v2-albums .alb b{font-size:12px!important;margin-top:8px!important}
  #listen .v2-feature.pt>img{width:104px!important;height:104px!important}
  #listen .pt{cursor:pointer}

  /* ---- mini player: one slim centred bar ---- */
  html.dk.mp-on:not(.vz-on) .vz-dock.on{left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:min(1040px,calc(100vw - 48px));
    grid-template-columns:minmax(0,1fr) auto auto auto auto minmax(0,1.15fr)!important;grid-template-rows:auto!important;align-items:center;column-gap:12px!important;padding:12px 20px!important;bottom:16px!important}
  html.dk.mp-on:not(.vz-on) .vz-dock.on>*{grid-row:1!important}
  html.dk.mp-on:not(.vz-on) .vz-now{grid-column:1!important;text-align:left!important;grid-template-columns:minmax(0,1fr)!important}
  html.dk.mp-on:not(.vz-on) .vz-dock>.vz-skip:nth-child(4){grid-column:2!important}
  html.dk.mp-on:not(.vz-on) .vz-stop{grid-column:3!important}
  html.dk.mp-on:not(.vz-on) .vz-dock>.vz-skip:nth-child(7){grid-column:4!important}
  html.dk.mp-on:not(.vz-on) .vz-pill{grid-column:5!important}
  html.dk.mp-on:not(.vz-on) .vz-scrub{grid-column:6!important;position:static!important;display:flex!important;align-items:center;gap:10px!important}
  html.dk.mp-on:not(.vz-on) .vz-scrub .a,html.dk.mp-on:not(.vz-on) .vz-scrub .b{display:block!important;font:300 10px/1 var(--sans);color:var(--mut);min-width:34px}
  html.dk.mp-on:not(.vz-on) .vz-scrub .b{text-align:right}
  html.dk.mp-on:not(.vz-on) .vz-scrub .tr{flex:1;height:3px!important;border-radius:2px!important;cursor:pointer}
  html.dk.mp-on:not(.vz-on) .vz-now b{font-size:16px!important}
}