/* Site artwork placements (assets/art/*-2610-*.webp, built by `node build-images.js site-art`)
   that v3.css and the article styles don't already cover. Linked only on the pages that use it.
   /assets/** is cached immutable: bump ?v= on every page that links this file when it changes. */

/* A landscape product visual standing in for a split hero's character art. */
.v3 .art-hero{display:block;width:100%;height:auto;border-radius:var(--radius-lg);border:2px solid rgba(255,255,255,.18);box-shadow:0 24px 48px rgba(0,0,0,.35)}

/* An image at the top of a .v3-card, matched to the card's own recap image. */
.v3 .art-card-img{display:block;width:100%;height:auto;border-radius:14px;margin:0 0 20px}

/* Two portrait illustrations side by side in an article figure, each labelled. Stays two-up on phones. */
.art-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.art-pair>div{min-width:0}
.art-pair .art-label{display:block;margin:0 0 8px;text-align:center;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--v3-blue,#2f5fe0)}
.art-pair img{display:block;width:100%;height:auto;border-radius:var(--radius-sm)}

/* A video card with landscape artwork: it takes the whole row of .vid-cards and
   shows the 16:9 thumbnail at full shape instead of cropping it into the 9:16 box. */
.vid-cards{container-type:inline-size}
.vid-card.vid-wide{grid-column:1/-1}
.vid-card.vid-wide img{width:240px;aspect-ratio:16/9}
@container (max-width:520px){
  .vid-card.vid-wide{flex-direction:column;align-items:stretch;gap:14px}
  .vid-card.vid-wide img{width:100%}
}