/* Home: each project's award logos on the card image, straight on the picture (no strip behind them; Leo "不要这个框
   logo大点"); they appear on hover (Leo 10/16), larger on larger cards: --k grows with the image width — 1.65 on the
   320 px tiles of All, 2.2 on the 735 px storyline tiles. The card images are light, so the dark-text art reads on all of
   them in both themes; a white fade under them keeps them clear of the product. Phones: a row under the picture (below).
   card-awards.js */
.wcard .img,.xcard .img{container-type:inline-size}
.wcard .img .ca,.xcard .img .ca{--k:1.7px;position:absolute;left:calc(var(--k) * 8);bottom:calc(var(--k) * 7);right:calc(var(--k) * 8);z-index:1;
  display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--k) * 5) calc(var(--k) * 8);pointer-events:none;
  opacity:0;transform:translateY(6px);transition:opacity .28s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
/* a white fade up from the bottom of the picture, shown with the logos, so they read where a product reaches the edge */
.wcard .img.has-ca::after,.xcard .img.has-ca::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;pointer-events:none;
  background:linear-gradient(to top,rgba(255,255,255,.96) 0%,rgba(255,255,255,.9) 40%,rgba(255,255,255,.55) 70%,rgba(255,255,255,0) 100%);opacity:0;transition:opacity .28s ease}
a.wcard:hover .img.has-ca::after,a.wcard:focus-visible .img.has-ca::after,.wcard.has-link:hover .img.has-ca::after,.wcard.has-link:focus-within .img.has-ca::after,a.xcard:hover .img.has-ca::after,a.xcard:focus-visible .img.has-ca::after{opacity:1}
@supports (width:1cqw){.wcard .img .ca,.xcard .img .ca{--k:clamp(1.5px,calc(.1325cqw + 1.226px),2.3px)}}
.wcard .img .ca img.l,.xcard .img .ca img.l{display:block;width:auto;height:calc(var(--h,18) * var(--k));max-width:none;object-fit:contain;transform:none;transition:none}
a.wcard:hover .ca,a.wcard:focus-visible .ca,.wcard.has-link:hover .ca,.wcard.has-link:focus-within .ca,a.xcard:hover .ca,a.xcard:focus-visible .ca{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.wcard .img .ca,.xcard .img .ca{transform:none;transition:opacity .2s ease}}
/* phones (no hover): a row under the picture, on the page; the theme-aware art switches with the theme */
.wcard .ca--row,.xcard .ca--row{--k:1.5px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:12px 0 2px}
.wcard .ca--row img.l,.xcard .ca--row img.l{display:block;width:auto;max-width:none;height:calc(var(--h,18) * var(--k))}
.ca--row .dk,[data-theme="dark"] .ca--row .lt{display:none!important}
[data-theme="dark"] .ca--row .dk{display:block!important}

/* 10/17 (Leo, on the hover state): "一个logo这种就可以大一点" — a card with a single award shows that logo larger;
   "白色区域有点覆盖的太多了" — the white fade belongs to the logo row now (.ca::before, shown with it) and only reaches a
   little above the logos, instead of covering the lower half of the picture */
.wcard .img.has-ca::after,.xcard .img.has-ca::after{display:none}
.wcard .img .ca--one img.l,.xcard .img .ca--one img.l{height:calc(var(--h,18) * var(--k) * 1.7)}
.wcard .ca--row.ca--one img.l,.xcard .ca--row.ca--one img.l{height:calc(var(--h,18) * var(--k) * 1.5)}

/* 10/17, later (CIHANG's card now shows both chairs, and the fade above still ran across the whole picture and greyed every
   wheel on hover): the white sits only right behind the logos, a soft halo with no edges; the rest of the picture is untouched */
.wcard .img .ca,.xcard .img .ca{right:auto;max-width:calc(100% - var(--k) * 16)}
/* 10/21 (Leo "不要弄一块模糊地 难看"): no backdrop at all. Every card picture is a light render and the logos
   use the dark-text art on them in both themes, so they read on the picture itself. If a dark card image is ever
   added, give that card its own treatment — do not bring the patch back. */
.wcard .img .ca::before,.xcard .img .ca::before{display:none}

/* 10/17 (Leo "加unitree的logo", on RD95's card): the company a project was done at, as its logo in the card's meta row,
   right after the year; black art, white in the dark theme */
.wcard .meta .org,.xcard .meta .org{display:inline-flex;align-items:center}
.wcard .meta .org img,.xcard .meta .org img{display:block;width:auto;height:13px;max-width:none}
[data-theme="dark"] .wcard .meta .org img,[data-theme="dark"] .xcard .meta .org img{filter:invert(1)}