/* Overlay card: photo, gradient and copy pinned bottom-left (.ocard). The
   pinned card in Fifty, and Editors' picks.
*/

/* overlay card: image, gradient, copy pinned bottom-left */
.ocard{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--radius); background:var(--paper-deep);
}
.ocard__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.4s var(--ease-out), filter 1.4s var(--ease-out);
}
.ocard:hover .ocard__img{ transform:scale(1.05); }
.ocard::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg,rgba(10,10,10,.94) 0%,rgba(10,10,10,.5) 34%,rgba(10,10,10,.16) 62%,rgba(10,10,10,0) 100%);
}
.ocard__body{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:30px 30px 26px; display:flex; flex-direction:column; gap:11px;
}
.ocard__rubric{
  font:600 10px/1 var(--sans); letter-spacing:.24em;
  text-transform:uppercase; color:var(--white);
}
.ocard__hed{
  font-family:var(--serif); font-weight:400; font-size:clamp(28px,2.4vw,38px);
  line-height:1.14; letter-spacing:-.01em; color:#fff; text-wrap:balance;
}
.ocard__dek{ font:400 var(--fs-body)/var(--lh-body) var(--sans); color:var(--white); max-width:50ch; letter-spacing:var(--ls-body); }
.ocard__meta{ font:400 11px/1 var(--sans); letter-spacing:.03em; color:var(--white); }
@media (max-width:720px){
  .ocard__body{ padding:24px 20px 20px; }
}