/* Portfolio player (pairs with js/portfolio-player.js): Trailers / Brand films switch, like the Listen player. */
#portfolio .pp>.pp-chips{display:flex!important;justify-content:center;margin:0 0 18px!important}
/* the Listen player's buttons sit centred too */
#listen .v2-chips{justify-content:center!important}
#portfolio h2.pp-lbl{display:block!important}
#portfolio .pp-grid>.pf,#portfolio .pp-grid>.card{display:block!important}
#portfolio .pp-grid .pf b,#portfolio .pp-grid .card b{display:block!important}
#portfolio .pp-grid .pp-sub{display:block!important}
#portfolio .pp-panel{display:none}
#portfolio .pp-panel.on{display:block}

/* featured pair: big, with a quiet serif caption */
#portfolio .pp-feat{display:grid;grid-template-columns:1fr;gap:22px;margin:0 0 26px}
#portfolio .pp-hero{margin:0}
#portfolio .pp-hero figcaption,#portfolio .pp-hero .crd{display:none!important}
#portfolio .pp-hero .vw{position:relative;cursor:pointer;aspect-ratio:2.39/1;border-radius:8px;overflow:hidden;background:#000}
#portfolio .pp-hero video{width:100%;height:100%;object-fit:cover;display:block;opacity:1!important}
#portfolio .pp-hero .pl{position:absolute!important;z-index:2;display:grid!important;place-items:center;border-radius:50%;background:rgba(240,238,234,.2)!important;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);pointer-events:none;width:38px!important;height:38px!important;left:12px!important;bottom:12px!important}
#portfolio .pp-hero .pl svg{fill:#f2efe9;width:13px!important}
#portfolio .pp-cap{margin:12px 0 0;cursor:pointer}
#portfolio .pp-cap b{display:block;font:300 21px/1.2 var(--serif);color:var(--fg)}
#portfolio .pp-cap small,#portfolio .pp-sub{display:block;margin-top:5px;font:300 10px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#a9a39a}

/* grids: rows of two on phones */
#portfolio .pp-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px!important;overflow:visible!important;padding:0!important;margin:0!important;scroll-snap-type:none!important}
#portfolio .pp-grid>*{min-width:0;flex:none!important;width:auto!important}
#portfolio .pp-grid .th{display:block;position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden}
#portfolio .pp-grid .th img{width:100%;height:100%;object-fit:cover}
#portfolio .pp-ads .pp-f{grid-column:1/-1}
#portfolio .pp-ads .pp-f b{font:300 19px/1.2 var(--serif)!important;color:var(--fg)!important;margin-top:12px!important}
#portfolio .pp-panel:not(.all) .pp-x{display:none!important}
#portfolio .pp-more{display:block;margin:24px auto 0;padding:12px 20px;font:400 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--fg);background:none;border:1px solid rgba(242,239,233,.24);border-radius:999px;cursor:pointer}
#portfolio .re-strip-nav{display:none!important}

@media (max-width:900px){
  #portfolio .pp-feat{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad))}
  #portfolio .pp-hero .vw{border-radius:0}
  #portfolio .pp-cap{padding:0 var(--pad)}
  #portfolio .pp-panel:not(.all) .pp-xm{display:none!important}
}
@media (min-width:901px){
  #portfolio .pp>.pp-chips{justify-content:center}
  #portfolio .pp-feat{grid-template-columns:1fr 1fr;gap:28px;margin-bottom:36px}
  #portfolio .pp-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  #portfolio .pp-cards~.pp-more{display:none}
  #portfolio .pp-panel:not(.all) .pp-cards .pp-x{display:block!important}
  #portfolio .pp-ads{grid-template-columns:repeat(6,minmax(0,1fr));gap:30px 22px!important}
  #portfolio .pp-ads>*{grid-column:span 2}
  #portfolio .pp-ads>.pp-f{grid-column:span 3}
  #portfolio .pp-ads .pp-f .th{aspect-ratio:2.39/1}
}
/* Bluey (vertical film): on desktop it waits behind "More" and sits last */
@media (min-width:901px){
  #portfolio .pp-panel:not(.all) .pp-ads .pp-xd{display:none!important}
  #portfolio .pp-ads .pp-xd{order:99}
}
/* phones: no "turn your phone" hint on the vertical film */
.fs-row.tall .rot{display:none}