/* full portfolio pages ------------------------------------------------- */

.nav--static{position:sticky;top:0}
.nav--static .nav__in{height:70px}

.pp{padding-block:46px 120px}
.pp__back{
  display:inline-block;margin-bottom:38px;
  font-size:13.5px;font-weight:500;letter-spacing:.01em;
  color:var(--ink-soft);transition:color .2s ease;
}
.pp__back:hover{color:var(--red)}
.pp h1{margin-bottom:10px}
.pp__lead{font-size:18px;line-height:1.6;color:var(--ink-soft)}

/* category tiles on the index */
.pcats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 30px;margin-top:64px}
.pcat{display:block;color:inherit}
.pcat .tile{border:1px solid transparent;transition:border-color .24s var(--ease),transform .28s var(--ease)}
.pcat:hover .tile{border-color:var(--red);transform:translateY(-4px)}
.pcat:hover .tile img{transform:scale(1.05)}
.pcat__cap{display:block;padding-top:16px}
.pcat__t{display:block;font-size:21px;font-weight:800;letter-spacing:-0.03em;line-height:1.2;color:var(--ink);transition:color .22s ease}
.pcat:hover .pcat__t{color:var(--red)}
.pcat__n{display:block;margin-top:6px;font-size:13px;font-weight:500;letter-spacing:.01em;color:var(--ink-soft)}

/* video grid on a category page */
.pgrid{display:grid;gap:56px 26px;margin-top:58px;align-items:start}
.pgrid--v{grid-template-columns:repeat(3,minmax(0,1fr))}
.pgrid--h{grid-template-columns:repeat(2,minmax(0,1fr))}
.pgrid--v + .pgrid--h{margin-top:56px}
.pcard--v .tile{max-width:392px;margin-inline:auto}
.pcard__cap{padding-top:16px;max-width:60ch}
.pcard--v .pcard__cap{max-width:392px;margin-inline:auto}
.pcard__t{font-size:17px;font-weight:700;letter-spacing:-0.022em;line-height:1.3;transition:color .22s ease}
.pcard:hover .pcard__t{color:var(--red)}
.pcard__d{margin-top:8px;font-size:14.5px;line-height:1.58;color:var(--ink-soft);letter-spacing:0}

/* one line footer */
.pp__foot{
  border-top:1px solid var(--line);padding-block:30px;
  font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}

@media (max-width:980px){
  .pgrid--v{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pgrid--h{grid-template-columns:1fr}
  .pgrid{gap:48px 22px}
}
@media (max-width:640px){
  .pcats{grid-template-columns:1fr;gap:34px}
  .pgrid--v,.pgrid--h{grid-template-columns:1fr}
  .pgrid{gap:44px}
  .pp{padding-block:34px 90px}
  .pp__back{margin-bottom:28px}
}
@media (prefers-reduced-motion:reduce){
  .pcat:hover .tile{transform:none}
  .pcat:hover .tile img{transform:none}
}