/* Shared card construction. Tier-specific printed designs live in styles.css. */
.card {
  --card-radius: clamp(8px, 5cqi, 14px);
  --card-accent: #bbc1ca;
  --card-edge: #565e69;
  --card-metal: linear-gradient(125deg, #59606a, #e0e3e5 15%, #737e89 31%, #bec4c9 48%, #454e5b 67%, #d1d6da 85%, #737c87);
  position: relative;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
  box-shadow: none;
  animation: none;
  color: #f4efe5;
}
.card::after { display: none; }
.card-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 63 / 88;
  perspective: 1000px;
  container-type: inline-size;
  touch-action: pan-y pinch-zoom;
}
.card-tilt, .card-turn {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.card-tilt {
  transform: rotateX(0deg) rotateY(0deg);
}
.card-turn { transition: transform 600ms cubic-bezier(.2, .7, .2, 1); }
.card.is-flipped .card-turn { transform: rotateY(180deg); }
.card[role="button"] .card-visual { cursor: pointer; }
.card:focus-visible .card-visual { outline: 2px solid var(--card-accent); outline-offset: 5px; }
.card-face {
  position: absolute;
  inset: 0;
  border: 4px solid transparent;
  border-radius: var(--card-radius);
  background: linear-gradient(145deg, #30343d, #1d222b 55%, #272a30) padding-box, var(--card-metal) border-box;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 0 0 1px #0c1019, inset 0 0 0 2px #ffffff14;
  /* WebKit can paint a mirrored inactive face despite backface-visibility.
     The 600ms cubic-bezier(.2,.7,.2,1) turn passes 90deg at about 87ms. */
  transition: visibility 0s 87ms;
}
.card-face[aria-hidden="true"] { visibility: hidden; }
.card-face::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, #ffffff03 0 1px, transparent 1px 3px), repeating-linear-gradient(117deg, transparent 0 3px, #0000000a 3px 4px);
  pointer-events: none;
  z-index: -1;
}
.card-face-front {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  gap: clamp(3px, 1.6cqi, 6px);
  padding: clamp(6px, 3cqi, 10px);
}
.card-namebar {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: clamp(19px, 10cqi, 30px) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(5px, 2.5cqi, 8px);
  align-content: center;
  /* Ordinary names retain the existing minimum; fitted three-line names may grow. */
  min-height: clamp(34px, 17cqi, 56px);
  padding-bottom: clamp(3px, 1.5cqi, 5px);
  border-bottom: 1px solid #ffffff16;
  min-width: 0;
}
.card-class-icon {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  grid-row: 1 / 3;
  object-fit: contain;
}
.card .card-name {
  font: 500 clamp(12px, 6.3cqi, 22px)/1.15 Georgia, serif;
  letter-spacing: -.02em;
  margin: 0;
  display: block;
  overflow-wrap: anywhere;
  color: #fff5df;
}
.card .card-name[data-long] { font-size: clamp(11px, 5.2cqi, 18px); line-height: 1.08; letter-spacing: -.01em; }
/* Only names that exceed the original two lines use a full-width title row. */
.card[data-name-fit] .card-namebar { padding-inline: clamp(3px, 2cqi, 8px); }
.card[data-name-fit] .card-name { grid-column: 1 / -1; grid-row: 1; }
.card[data-name-fit] .card-class-icon {
  grid-row: 2;
  width: 1em;
  height: 1em;
  font-size: clamp(8px, 3.5cqi, 11px);
  justify-self: end;
}
.card[data-name-fit] .card-class { grid-row: 2; grid-column: 2; }

.card-class {
  font: 600 clamp(8px, 3.5cqi, 11px)/1.4 system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--card-accent);
}
.card-portrait {
  min-height: 0;
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid var(--card-edge);
  outline: 1px solid #ffffff12;
  outline-offset: 2px;
  margin: 2px;
  overflow: hidden;
  /* Preserve the portrait clip while its parent turns in Safari. */
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  background: radial-gradient(ellipse at 50% 35%, #646373, #303641 75%);
  box-shadow: inset 0 0 14px #0008;
}
.card-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 2px #15192260, inset 0 -12px 20px #11151b44;
  pointer-events: none;
}
.card-portrait img.card-portrait-pending { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.card-portrait img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center 20%; }
.card-silhouette { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; container-type: size; z-index: 0; }
.card-portrait img.card-placeholder-art { position: relative; z-index: 1; opacity: 0; }
.card-portrait img.card-placeholder-art.is-ready { opacity: 1; }
/* A tall window must not enlarge the engraving past its left/right edges.
   Fill the remaining space with its own blank paper; portrait photos keep cover. */
@container (max-aspect-ratio: 4 / 3) {
  .card-portrait img.card-placeholder-art { object-fit: contain; }
  .card-portrait img.card-placeholder-paper {
    display: block;
    position: absolute;
    inset: 0;
    opacity: 0;
    object-fit: fill;
    z-index: 0;
    transform-origin: center bottom;
    transform: scale(8);
    filter: blur(2px);
  }
  .card-portrait .card-silhouette.is-ready img.card-placeholder-paper { opacity: 1; }
}
/* A reveal card cannot grow when its name and credit leave a shallow window.
   Fit the complete engraving inside that fixed window, above the plaque. */
.opening-card-front .card-portrait img.card-placeholder-art {
  display: block;
  width: auto;
  max-width: 100%;
  /* Keep a paper margin in the shallow landscape window. */
  height: calc(100% - 4px);
  margin-inline: auto;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.opening-card-front .card-portrait img.card-placeholder-paper {
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0;
  object-fit: fill;
  z-index: 0;
  transform-origin: center bottom;
  transform: scale(8);
  filter: blur(2px);
}
.opening-card-front .card-portrait .card-silhouette.is-ready img.card-placeholder-paper { opacity: 1; }
/* The square crop uses the artwork's own blank lower paper, not a flat band. */
.card-placeholder-paper { display: none; }
@media (max-width: 600px) {
  #collection-cards .card .card-portrait img.card-placeholder-paper {
    display: block;
    opacity: 0;
    object-fit: fill;
    z-index: 0;
    transform-origin: center bottom;
    transform: scale(8);
    filter: blur(2px);
  }
  #collection-cards .card .card-silhouette.is-ready img.card-placeholder-paper { opacity: 1; }
  #collection-cards .card .card-portrait img.card-placeholder-art {
    inset: 4% 0 auto;
    height: auto;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(transparent, #000 5%, #000 94%, transparent);
    mask-image: linear-gradient(transparent, #000 5%, #000 94%, transparent);
  }
}
.card-portrait-note {
  position: absolute;
  z-index: 1;
  bottom: 3%;
  max-width: calc(100% - 8px);
  box-sizing: border-box;
  padding: .15em .4em;
  border: 1px solid #927446;
  background: #eddfbf;
  box-shadow: 0 2px 5px #392a252e, inset 0 0 0 1px #fff3d3;
  text-align: center;
  font: 600 clamp(8px, 3cqi, 10px)/1.25 system-ui, sans-serif;
  letter-spacing: .01em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  color: #483823;
}
/* Measured wrapping and the three revised engravings may grow their card.
   Fitted names keep that space when the real portrait replaces the fallback. */
.card[data-class="Ruler"] { --subject-bottom: 766; }
.card[data-class="Warrior"] { --subject-bottom: 815; }
.card[data-class="Religious"] { --subject-bottom: 735; }
.card[data-class="Artist"] { --subject-bottom: 800; }
.card[data-class="Scholar"] { --subject-bottom: 765; }
.card[data-class="Sports"] { --subject-bottom: 775; }
.card[data-class="Civic"], .card[data-class="Business"] { --subject-bottom: 825; }
.card[data-class="Other"] { --subject-bottom: 805; }

/* Preserve the earlier short-card clearance as a floor, never a fixed ratio. */
.opening-grid > .card[data-class="Sports"] { --fallback-ratio: 89; }
html[lang="ru"] .opening-grid > .card[data-class="Religious"] { --fallback-ratio: 92; }
/* Without an observer, retain the previous fallback layout. */
.opening-grid .card[data-class="Sports"]:not([data-name-observed]):has(.card-placeholder-art) .card-visual { aspect-ratio: 63 / 89; }
html[lang="ru"] .opening-grid .card[data-class="Religious"]:not([data-name-observed]):has(.card-placeholder-art) .card-visual { aspect-ratio: 63 / 92; }

/* The front supplies intrinsic height; the absolute reverse follows it, as in
   collection cards. Keep both 3D wrappers and their existing clipping layers. */
:is(.opening-grid, .cards:not(#collection-cards)) > .card[data-name-lines]:is(:not([data-name-lines="1"]), [data-name-fit], [data-class="Ruler"], [data-class="Religious"], [data-class="Sports"]):is([data-name-fit], :has(.card-portrait:is([data-portrait-state="missing"], [data-portrait-state="load-failed"], [data-portrait-state="timed-out"]), .card-placeholder-art.is-ready)) .card-visual {
  aspect-ratio: auto;
}
:is(.opening-grid, .cards:not(#collection-cards)) > .card[data-name-lines]:is(:not([data-name-lines="1"]), [data-name-fit], [data-class="Ruler"], [data-class="Religious"], [data-class="Sports"]):is([data-name-fit], :has(.card-portrait:is([data-portrait-state="missing"], [data-portrait-state="load-failed"], [data-portrait-state="timed-out"]), .card-placeholder-art.is-ready)) :is(.card-tilt, .card-turn) {
  height: auto;
}
:is(.opening-grid, .cards:not(#collection-cards)) > .card[data-name-lines]:is(:not([data-name-lines="1"]), [data-name-fit], [data-class="Ruler"], [data-class="Religious"], [data-class="Sports"]):is([data-name-fit], :has(.card-portrait:is([data-portrait-state="missing"], [data-portrait-state="load-failed"], [data-portrait-state="timed-out"]), .card-placeholder-art.is-ready)) .card-face-front {
  position: relative;
  min-height: calc(100cqi * var(--fallback-ratio, 88) / 63);
  grid-template-rows: auto minmax(min-content, 1fr) auto auto auto;
}
:where(:is(.opening-grid, .cards:not(#collection-cards)) > .card[data-name-lines]:is(:not([data-name-lines="1"]), [data-name-fit], [data-class="Ruler"], [data-class="Religious"], [data-class="Sports"]):is([data-name-fit], :has(.card-portrait:is([data-portrait-state="missing"], [data-portrait-state="load-failed"], [data-portrait-state="timed-out"]), .card-placeholder-art.is-ready))) .card-portrait {
  /* Actual image width: card frame, face padding, margins and portrait border. */
  --art-width: calc(100cqi - 16px - 2 * clamp(6px, 3cqi, 10px));
  --plaque-height: calc(1.55 * clamp(8px, 3cqi, 10px) + 2px);
  /* The engraving is always width-scaled, anchored at center 20%.
     Leave its full subject above the caption, including a two-line caption. */
  min-height: calc((.75 * var(--art-width) * (var(--subject-bottom) / 1086 - .2) + var(--plaque-height)) / .77 + 4px);
}
/* Loading copy can wrap to two lines even above the narrow-card breakpoint.
   Leave 2px above the caption; fitted names keep this floor after loading. */
.card[data-name-fit] .card-portrait,
.card-portrait[data-portrait-state="loading"] {
  --plaque-height: calc(2.8 * clamp(8px, 3cqi, 10px) + 4px);
}
/* A decoded image fills the fitted card's existing window; its intrinsic
   dimensions must not enlarge the auto-height grid after loading. */
:is(.opening-grid, .cards:not(#collection-cards)) > .card[data-name-fit] .card-portrait[data-portrait-state="loaded"] > img {
  position: absolute;
  inset: 0;
}
.card[data-rarity="R"] .card-portrait,
.card[data-rarity="SR"] .card-portrait { --art-width: calc(100cqi - 18px - 2 * clamp(6px, 3cqi, 10px)); }
.card[data-rarity="SSR"] .card-portrait,
.card[data-rarity="UR"] .card-portrait { --art-width: calc(100cqi - 20px - 2 * clamp(9px, 4.8cqi, 16px)); }
@container (max-width: 172px) {
  :is(.opening-grid, .cards:not(#collection-cards)) > .card[data-name-lines]:is(:not([data-name-lines="1"]), [data-name-fit], [data-class="Ruler"], [data-class="Religious"], [data-class="Sports"]):is([data-name-fit], :has(.card-portrait:is([data-portrait-state="missing"], [data-portrait-state="load-failed"], [data-portrait-state="timed-out"]), .card-placeholder-art.is-ready)) .card-portrait {
    --plaque-height: calc(2.8 * clamp(8px, 3cqi, 10px) + 2px);
  }
}

/* No portrait: an engraved, class-tinted plate rather than a grey placeholder. */
.card-portrait[data-portrait-state]:not([data-portrait-state="loaded"]) {
  background: repeating-linear-gradient(115deg, #ffffff0a 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 50% 32%, color-mix(in srgb, var(--plate, #6b6252) 88%, #fff 12%), color-mix(in srgb, var(--plate, #6b6252) 62%, #0b0d14) 78%);
}
.card-portrait[data-placeholder-class="Ruler"] { --plate: #84453f; }
.card-portrait[data-placeholder-class="Warrior"] { --plate: #7c5233; }
.card-portrait[data-placeholder-class="Religious"] { --plate: #3f6b67; }
.card-portrait[data-placeholder-class="Scholar"] { --plate: #47578c; }
.card-portrait[data-placeholder-class="Artist"] { --plate: #76497b; }
.card-portrait[data-placeholder-class="Sports"] { --plate: #4c7350; }
.card-portrait[data-placeholder-class="Civic"] { --plate: #3f6685; }
.card-portrait[data-placeholder-class="Business"] { --plate: #86703a; }
.card-portrait[data-placeholder-class="Other"] { --plate: #66605a; }
.card-stats {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: clamp(3px, 1.6cqi, 6px) 0;
  border-block: 1px solid #ffffff15;
  background: linear-gradient(90deg, transparent, #00000020, transparent);
}
.card-stats > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  border-right: 1px solid #ffffff12;
  font: 600 clamp(8px, 3.6cqi, 10px)/1.3 system-ui, sans-serif;
  letter-spacing: .08em;
  color: #c5c5cd;
}
.card-stats > span:last-child { border: 0; }
.card-stats strong { font: 650 clamp(12px, 6.2cqi, 20px)/1.15 system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: #fff1da; }
.card-blurb {
  position: relative;
  z-index: 4;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font: italic clamp(9px, 3.8cqi, 12px)/1.35 Georgia, serif;
  color: #dcd7cc;
}
/* Narrow two-column cards keep one line; the reverse always has the full text. */
@container (min-width: 200px) {
  .card-blurb { -webkit-line-clamp: 2; min-height: 2.7em; }
}
.card-footer {
  position: relative;
  z-index: 4;
  display: grid;
  /* One row on every rarity: mark, serial, then the source link at the far edge. */
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(4px, 2.2cqi, 8px);
  min-width: 0;
  padding-top: clamp(3px, 1.3cqi, 5px);
  border-top: 1px solid #ffffff1c;
}
.card-edition { display: contents; }
.card-rarity {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--card-accent);
  font: 700 clamp(9px, 4.1cqi, 12px)/1.5 system-ui, sans-serif;
  letter-spacing: .04em;
  white-space: nowrap;
}
.card-badge { grid-area: 1 / 1; width: clamp(22px, 11.5cqi, 36px); height: clamp(25px, 13cqi, 41px); fill: var(--card-badge-fill, #142941); stroke: var(--card-accent); }
.card-badge-label { grid-area: 1 / 1; z-index: 1; align-self: center; font-size: clamp(7px, 3.4cqi, 11px); letter-spacing: -.04em; color: #fff6df; text-shadow: 0 1px 2px #000; }
.card-badge-engraving { fill: none; opacity: .65; stroke-width: .65; }
.card-badge-laurel { fill: none; stroke-width: 1.6; }
.card-number { color: #d3cfc7; font: clamp(8px, 3.5cqi, 11px)/1.5 ui-monospace, monospace; white-space: nowrap; }
.card-credit {
  display: contents;
  font: 9px/1.35 system-ui, sans-serif;
  color: #c8c9ce;
}
.card-credit-text { display: flex; grid-row: 2; grid-column: 1 / -1; align-items: baseline; gap: .25em; min-width: 0; margin-top: 1px; white-space: nowrap; overflow: hidden; font: 9px/1.35 system-ui, sans-serif; color: #c8c9ce; }
.card-credit-ai { display: block; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.card-credit-author { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-credit-license { flex: 0 0 auto; white-space: nowrap; }
.card .card-credit a { display: block; grid-row: 1; grid-column: 3; justify-self: end; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: clamp(8px, 3.5cqi, 11px)/1.4 system-ui, sans-serif; color: #eee4cc; text-underline-offset: 2px; }
/* The whole footer sits inside the premium lower corners on both sides. */
.card[data-rarity="SSR"] .card-footer,
.card[data-rarity="UR"] .card-footer { padding-inline: clamp(8px, 6cqi, 20px); }
.card-effects {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  /* Keep oversized foil and glare clipped during Safari's 3D flips. */
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  pointer-events: none;
  z-index: 2;
}
.card-foil, .card-glare {
  position: absolute;
  inset: -60%;
  pointer-events: none;
  z-index: 3;
}
.card-foil {
  display: none;
  background: repeating-linear-gradient(113deg, transparent 0 8%, #b9c6ff55 10%, #edbdff55 13%, #f5dfbb55 16%, transparent 21%), conic-gradient(from 38deg, #ee9eaf, #e8cc83, #9edbc6, #9aa8f2, #d8b6ee, #ee9eaf);
  mix-blend-mode: color-dodge;
  opacity: .13;
  transform: translate3d(0, 0, 0);
}
.card-glare {
  background: linear-gradient(118deg, transparent 35%, #ffffff05 42%, #fff9e888 49%, #ffffff0a 56%, transparent 63%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(0, 0, 0);
}
.card-face-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  padding: clamp(10px, 5cqi, 18px);
  overflow: auto;
  scrollbar-width: thin;
  font-size: clamp(11px, 4.4cqi, 14px);
  line-height: 1.45;
}
.card .card-back-heading { flex: none; font: 500 clamp(15px, 7cqi, 24px)/1.15 Georgia, serif; color: var(--card-accent); margin: 0 0 .45em; }
.card-face-back p { flex: none; margin: 0; color: #ddd8cf; overflow-wrap: anywhere; }
.card-face-back .card-back-blurb { margin-bottom: .7em; font: italic clamp(11px, 4.6cqi, 14px)/1.4 Georgia, serif; }
.card-face-back .card-back-meta, .card-face-back .card-rule-version, .card-face-back .card-skill-hint {
  padding: .38em 0;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  font-size: clamp(10px, 3.9cqi, 12px);
  line-height: 1.35;
}
.card-face-back .card-rule-version { opacity: .72; }
.card-back-links { flex: none; display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: auto; padding-top: .6em; }
.card .card-back-links a { font-size: clamp(10px, 4cqi, 13px); line-height: 1.6; color: var(--card-accent); text-underline-offset: 2px; }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 6px; }
.card .card-actions button { flex: 1 1 0; min-width: max-content; min-height: 34px; padding: 5px 9px; margin: 0; border-color: transparent; background: #ffffff0a; color: #cfd2db; font-size: 12px; line-height: 1.3; }
.card .card-actions button[aria-pressed="true"] { border-color: #e7c88a80; color: #f4dba8; }
.card-actions small { font-size: 12px; color: #c8c9ce; }
@media (hover: hover) {
  .card .card-actions button:hover { background: #ffffff18; color: #fff; transform: none; }
}
@media (pointer: coarse) {
  .card .card-actions button { min-height: 44px; }
}
.card-face-only .card-actions { display: none; }

/* Collection metadata must not squeeze framed portraits into a shallow strip. */
#collection-cards .card .card-visual {
  aspect-ratio: auto;
}
#collection-cards .card .card-tilt,
#collection-cards .card .card-turn {
  height: auto;
}
#collection-cards .card .card-face-front {
  position: relative;
  grid-template-rows: auto auto auto auto auto;
}
#collection-cards .card .card-portrait {
  aspect-ratio: 4 / 3;
}
#collection-cards .card .card-portrait img {
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center 25%;
}

.card-stock-back {
  --card-radius: 12px;
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 63 / 88;
  border: 1px solid #e7c88a;
  border-radius: 12px;
  background: repeating-linear-gradient(45deg, #e7c88a08 0 1px, transparent 1px 16px),
    repeating-linear-gradient(-45deg, #e7c88a08 0 1px, transparent 1px 16px), #10121b;
  box-shadow: inset 0 0 25px #0008;
  color: #e7c88a;
}
/* Rarity light surrounds the stock; none of the printed gold inherits its hue. */
.card-stock-back::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 9px var(--opening-color, #e7c88a), 0 0 27px color-mix(in srgb, var(--opening-color, #e7c88a) 60%, transparent);
  opacity: .35;
  pointer-events: none;
  animation: card-stock-edge-breathe 3.6s ease-in-out infinite;
}
.card-stock-frame { position: absolute; inset: 0; width: 100%; height: 100%; color: #e7c88a; pointer-events: none; }
.card-stock-mark { position: relative; width: 43%; height: auto; margin-bottom: 5%; }
.card-stock-wordmark { position: relative; color: #e7c88a; text-align: center; font: 500 clamp(12px, 7cqi, 24px)/1.2 Georgia, serif; letter-spacing: .06em; }
.card-stock-edition { position: relative; color: #e7c88a; opacity: .6; font: clamp(5px, 2.4cqi, 8px)/1.5 system-ui, sans-serif; letter-spacing: .22em; }
@keyframes card-stock-edge-breathe {
  0%, 100% { opacity: .25; }
  50% { opacity: .65; }
}

@media (min-width: 700px) {
  .card-credit { font-size: clamp(9px, 3.8cqi, 11px); }
}
@media (max-width: 600px) {
  #collection-cards .card .card-portrait { aspect-ratio: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .card-face { transition: none; }
  .card-tilt { transform: none; transition: none; }
  .card-turn { transition: none; }
  .card-foil, .card-glare { transform: none; transition: none; }
  .card-glare { opacity: 0; }
  .card-stock-back::before { animation: none; opacity: .35; }
}