/* A card on the site, drawn at the lab's size (70 × 120 mm at 1.5×, smaller on narrow screens), front and back on the two faces of one card that turns over. The faces are the lab's .lab-card designs (components/pages/lab.css). */
:root { --lab-display: "Cinzel", serif; --lab-body: "Lab Source Sans 3", sans-serif; --lab-body-size: 7.5pt; --card-zoom: 1.5; }
@media (max-width: 480px) { :root { --card-zoom: 1.15; } }
@media (max-width: 360px) { :root { --card-zoom: 1.05; } }

.deck-card { position: relative; flex: none; width: 70mm; height: 120mm; zoom: var(--card-zoom); perspective: 400mm; cursor: pointer; border-radius: 3mm; }
.deck-card__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.3, 0.1, 0.2, 1); }
.deck-card.is-flipped .deck-card__inner { transform: rotateY(180deg); }
.deck-card__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.deck-card__face--back { transform: rotateY(180deg); }
.deck-card:has(.deck-card__turn:focus-visible) { outline: 0.6mm solid var(--border-brand); outline-offset: 1mm; }
.deck-card__turn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; }
.deck-card__open { position: absolute; top: 2.5mm; right: 2.5mm; width: 6mm; height: 6mm; border-radius: 50%; display: grid; place-items: center; color: #f3ecd8; background: rgb(8 8 12 / 0.55); opacity: 0.55; transition: opacity 0.2s; z-index: 2; }
.deck-card__open svg { width: 4mm; height: 4mm; }
.deck-card:hover .deck-card__open, .deck-card__open:focus-visible { opacity: 1; }

.deck-card--stub { display: grid; align-content: center; justify-items: center; gap: 2mm; padding: 6mm; box-sizing: border-box; border: 0.3mm dashed var(--border-subtle); cursor: default; }
a:has(> .deck-card--stub) { text-decoration: none; color: inherit; flex: none; }
.deck-card__stub-name { color: var(--text-disabled); }
.deck-card__stub-note { font-family: "Lab DM Sans", sans-serif; font-size: 1.8mm; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-disabled); }

/* Card galleries: as many cards as fit across, wrapping. */
.card-grid { display: flex; flex-wrap: wrap; gap: 32px; }

/* Three cards to a row from 960px up: below the full 1.5× width the cards scale down in steps so three still fit (padding 32px, gaps 24px, room for a scrollbar). Generated; the zoom for each band is the one that fits at the band's narrowest width. */
@media (min-width: 768px) and (max-width: 1359px) { .container { padding-inline: 32px; } .card-grid, .draw { gap: 24px; } }
@media (min-width: 1320px) and (max-width: 1359px) { :root { --card-zoom: 1.5; } }
@media (min-width: 1280px) and (max-width: 1319px) { :root { --card-zoom: 1.45; } }
@media (min-width: 1240px) and (max-width: 1279px) { :root { --card-zoom: 1.4; } }
@media (min-width: 1200px) and (max-width: 1239px) { :root { --card-zoom: 1.35; } }
@media (min-width: 1160px) and (max-width: 1199px) { :root { --card-zoom: 1.3; } }
@media (min-width: 1120px) and (max-width: 1159px) { :root { --card-zoom: 1.25; } }
@media (min-width: 1080px) and (max-width: 1119px) { :root { --card-zoom: 1.2; } }
@media (min-width: 1040px) and (max-width: 1079px) { :root { --card-zoom: 1.15; } }
@media (min-width: 1000px) and (max-width: 1039px) { :root { --card-zoom: 1.09; } }
@media (min-width: 960px) and (max-width: 999px) { :root { --card-zoom: 1.04; } }
@media (min-width: 860px) and (max-width: 959px) { :root { --card-zoom: 1.43; } }
@media (min-width: 780px) and (max-width: 859px) { :root { --card-zoom: 1.27; } }
@media (min-width: 700px) and (max-width: 779px) { :root { --card-zoom: 1.12; } }