/* Downloads. Logical properties throughout -- ar flips document.dir to rtl, so
   physical left/right here would strand the cards against the wrong edge. */
.downloads-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: clamp(4rem, 9vw, 8rem) 0 6rem; }
.downloads-hero { max-width: 700px; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.downloads-kicker { margin: 0 0 1rem; font: 700 .72rem/1.2 Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--leather); }
.downloads-hero h1 { margin: 0 0 1rem; font: 500 clamp(2.4rem, 6vw, 4.4rem)/1.02 var(--serif); letter-spacing: -.02em; }
.downloads-hero p { margin: 0; color: var(--soft); max-width: 54ch; }

.downloads-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(1.2rem, 3vw, 2rem); padding: 0; margin: 0; list-style: none; }
.downloads-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }

/* The badge stands in for a cover image. Catalogue covers are not in the repo,
   and a card that reserves space for a missing image looks broken. */
.downloads-card__badge { display: grid; place-items: center; aspect-ratio: 16/10; background: var(--paper-deep); color: var(--soft); font: 700 1.1rem/1 Arial, sans-serif; letter-spacing: .18em; }
/* contain, not cover: a catalogue cover is portrait and its logo usually sits
   near an edge, so cropping to fill would cut it. The fixed ratio keeps the
   grid even whatever shape the artwork is, and reserves the space so the card
   does not jump when the image loads. */
.downloads-card__cover { aspect-ratio: 3/4; object-fit: contain; background: var(--paper-deep); }
.downloads-card__video { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: #10181d; }

.downloads-card__body { display: grid; gap: .55rem; padding: 1.3rem; }
.downloads-card__body h2 { font: 500 1.25rem/1.2 var(--serif); }
.downloads-card__body p { margin: 0; color: var(--soft); font-size: .92rem; }
.downloads-card__meta { font-size: .78rem !important; letter-spacing: .04em; text-transform: uppercase; }
.downloads-card__cta { justify-self: start; margin-top: .5rem; padding: .68rem 1.15rem; border: 1px solid var(--ink); border-radius: 999px; font-size: .85rem; font-weight: 600; }
.downloads-card__cta:hover { background: var(--ink); color: var(--paper); }
.downloads-card__cta:focus-visible { outline: 3px solid var(--leather); outline-offset: 2px; }

@media (max-width: 560px) { .downloads-grid { grid-template-columns: 1fr; } }