/* cards.css: the membership card faces (.mem-card, .mc-*), shared by /membership/ (P5) and the home page (P1).
   A printed object, not interface: the bank-card ratio, the inner keyline, a diagonal sheen, the arch outline with the
   8-point star in its window, the tier as a wordmark in tracked capitals (the lint's card-face exception) and the AJ
   monogram. Three materials: pearl (Member), deep jade (Jade), graphite with the vermilion star (Vermilion).
   Faces only: placement, tilt and motion belong to the page that shows them (never set transform or translate here). */
.mem-card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 100%;
  aspect-ratio: 1.586; padding: 7% 6.4% 5.6%; border-radius: 3.6% / 5.7%; overflow: hidden; isolation: isolate;
  container-type: inline-size;
  color: var(--ink); background-color: var(--paper);
  background-image: linear-gradient(118deg, var(--paper) 0%, color-mix(in srgb, var(--hair) 60%, transparent) 100%);
  box-shadow: 0 0 0 1px var(--hair), 0 1px 2px color-mix(in srgb, var(--pine) 18%, transparent), 0 28px 56px -28px color-mix(in srgb, var(--pine) 55%, transparent);
}
/* the inner keyline, like a foil border */
.mem-card::after { content: ""; position: absolute; inset: 2.6%; z-index: 0; border: 1px solid currentColor; border-radius: 2.4% / 3.9%; opacity: .14; pointer-events: none; }
/* a soft sheen across the face; it slides a little when the card is lifted */
.mem-card::before {
  content: ""; position: absolute; inset: -40% -60%; z-index: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--paper) 22%, transparent) 48%, transparent 58%);
  translate: -18% 0; transition: translate 1200ms var(--ease-out);
}
.mem-card[data-tier="jade"] {
  color: var(--mist); background-color: var(--brand);
  background-image: linear-gradient(118deg, color-mix(in srgb, var(--mist) 10%, transparent) 0%, transparent 46%, color-mix(in srgb, var(--brand-deep) 85%, transparent) 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mist) 8%, transparent), 0 1px 2px color-mix(in srgb, var(--pine) 30%, transparent), 0 28px 56px -28px color-mix(in srgb, var(--pine) 80%, transparent);
}
.mem-card[data-tier="vermilion"] {
  color: var(--mist); background-color: var(--green);
  background-image: linear-gradient(118deg, color-mix(in srgb, var(--mist) 9%, transparent) 0%, transparent 46%, color-mix(in srgb, var(--pine) 92%, transparent) 100%);
  box-shadow: 0 0 0 1px var(--hair-d), 0 1px 2px color-mix(in srgb, var(--pine) 30%, transparent), 0 28px 56px -28px color-mix(in srgb, var(--pine) 80%, transparent);
}
.mem-card[data-tier="jade"]::before, .mem-card[data-tier="vermilion"]::before {
  background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--mist) 9%, transparent) 48%, transparent 58%);
}
.mc-arch { position: absolute; z-index: 0; right: -4%; bottom: -26%; height: 112%; width: auto; overflow: visible; }
.mc-line { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-opacity: .16; vector-effect: non-scaling-stroke; }
.mc-star { fill: currentColor; fill-opacity: .28; }
.mem-card[data-tier="vermilion"] .mc-star { fill: var(--vermilion); fill-opacity: 1; }
.mc-top, .mc-bottom { position: relative; z-index: 1; display: flex; }
.mc-top { flex-direction: column; gap: 0.6em; }
.mc-bottom { align-items: flex-end; justify-content: space-between; gap: 12px; }
.mem-card .mem-card-tier {
  padding: 0; border: 0; font-size: clamp(13px, 4.6cqi, 20px); font-style: normal; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.26em; line-height: 1; text-shadow: 0 1px 0 color-mix(in srgb, var(--pine) 30%, transparent);
}
.mem-card[data-tier="member"] .mem-card-tier { text-shadow: 0 1px 0 color-mix(in srgb, var(--paper) 90%, transparent); }
.mem-card .mem-card-fee { font-size: clamp(11px, 3.4cqi, 14px); font-weight: 400; letter-spacing: 0.02em; opacity: .72; font-variant-numeric: tabular-nums; }
.mc-perk { font-size: clamp(11px, 3.3cqi, 14px); font-weight: 400; letter-spacing: 0.02em; line-height: 1.35; max-width: 62%; opacity: .9; }
.mc-mark { width: auto; height: clamp(20px, 8.5cqi, 36px); opacity: .92; }
@media (prefers-reduced-motion: reduce) { .mem-card::before { transition: none; } }