/* Card faces (.cc) and the locked embossed card (.lk). Inner parts are sized in cqw
   (percent of the card's width), so one design renders from 48px to 400px. */
.cc { --w: 340px; width: var(--w); aspect-ratio: 1.586; border-radius: calc(var(--w) * .046); position: relative; overflow: hidden;
      container-type: inline-size; isolation: isolate; font-family: 'Geist', sans-serif; line-height: 1; color: #fff;
      box-shadow: 0 1px 2px rgba(0,0,0,.16), 0 22px 36px -22px rgba(0,0,0,.5); }
.cc > *, .cc .vin > * { position: absolute; }
.cc svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cc .full { inset: 0; }
.cc .gloss { inset: 0; z-index: 9; pointer-events: none;
             background: linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.10) 48%, rgba(255,255,255,0) 62%); }
.cc .edge { inset: 0; z-index: 10; border-radius: inherit; box-shadow: inset 0 0 0 .25cqw rgba(255,255,255,.10); pointer-events: none; }

/* chip: contact pads drawn with gradients */
.cc .emv { width: 12.2cqw; height: 9.4cqw; border-radius: 1.6cqw; overflow: hidden;
            background: linear-gradient(90deg, transparent 30%, rgba(70,50,10,.38) 30% 32%, transparent 32% 68%, rgba(70,50,10,.38) 68% 70%, transparent 70%),
                        linear-gradient(0deg, transparent 32%, rgba(70,50,10,.3) 32% 35%, transparent 35% 65%, rgba(70,50,10,.3) 65% 68%, transparent 68%),
                        linear-gradient(135deg, #f6e7ad 0%, #d1b062 45%, #b8954a 60%, #ead28c 100%);
            box-shadow: inset 0 0 0 .25cqw rgba(70,50,10,.35), 0 .2cqw .4cqw rgba(0,0,0,.25); }
.cc .emv.silver { background: linear-gradient(90deg, transparent 30%, rgba(30,34,40,.38) 30% 32%, transparent 32% 68%, rgba(30,34,40,.38) 68% 70%, transparent 70%),
                               linear-gradient(0deg, transparent 32%, rgba(30,34,40,.3) 32% 35%, transparent 35% 65%, rgba(30,34,40,.3) 65% 68%, transparent 68%),
                               linear-gradient(135deg, #f2f3f5 0%, #c3c7cd 45%, #9ea3aa 60%, #dfe2e6 100%);
                   box-shadow: inset 0 0 0 .25cqw rgba(30,34,40,.35), 0 .2cqw .4cqw rgba(0,0,0,.25); }
.cc .emv::before { content: ''; position: absolute; left: 32%; right: 32%; top: 22%; bottom: 22%; border: .25cqw solid rgba(0,0,0,.28); border-radius: .9cqw; }
.cc .emv.v { width: 9.4cqw; height: 12.2cqw;
              background: linear-gradient(0deg, transparent 30%, rgba(30,34,40,.38) 30% 32%, transparent 32% 68%, rgba(30,34,40,.38) 68% 70%, transparent 70%),
                          linear-gradient(90deg, transparent 32%, rgba(30,34,40,.3) 32% 35%, transparent 35% 65%, rgba(30,34,40,.3) 65% 68%, transparent 68%),
                          linear-gradient(135deg, #f2f3f5 0%, #c3c7cd 45%, #9ea3aa 60%, #dfe2e6 100%); }
.cc .emv.v::before { left: 22%; right: 22%; top: 32%; bottom: 32%; }
.cc .nfc { width: 3.6cqw; height: 4.6cqw; }

/* networks */
.cc .visa { right: 6.5%; bottom: 7%; text-align: right; font: italic 900 9cqw/0.8 'Archivo', sans-serif; font-stretch: 112%; letter-spacing: -.02em; }
.cc .visa small { display: block; font: 400 2.3cqw/1 'Geist', sans-serif; letter-spacing: .02em; margin-top: 1cqw; opacity: .85; }
.cc .mc { right: 6%; bottom: 6%; width: 14cqw; text-align: center; }
.cc .mc svg { height: 8.9cqw; }
.cc .mc small { display: block; font: 500 2.1cqw 'Geist', sans-serif; letter-spacing: .01em; margin-top: .5cqw; opacity: .85; }
.cc .mc .tier { display: block; font: 400 2.3cqw 'Geist', sans-serif; margin-bottom: .6cqw; opacity: .85; }

/* type helpers */
.cc .t { white-space: nowrap; }
.cc .serif { font-family: 'Libre Caslon Text', serif; }
.cc .thin { font-family: 'Cormorant Garamond', serif; }
.cc .script { font-family: 'Allura', cursive; }
.cc .wide { font-family: 'Archivo', sans-serif; }
.cc .ital { font-family: 'Montserrat', sans-serif; font-style: italic; }
.cc .mono { font-family: 'Geist Mono', monospace; }

/* portrait cards (US Bank prints these vertically): drawn upright, then turned on their side */
.cc .vin { left: 50%; top: 50%; width: 63.05cqw; height: 100cqw; transform: translate(-50%, -50%) rotate(-90deg); container-type: inline-size; }

/* tiny sizes keep colour, motif and wordmark; drop fine print */
@container (max-width: 100px) { .cc .fine, .cc .visa small, .cc .mc small, .cc .mc .tier { display: none; } }

/* ---- Locked card: embossed value on a neutral card ---- */
.lk { --w: 340px; width: var(--w); aspect-ratio: 1.586; border-radius: calc(var(--w) * .052); position: relative; overflow: hidden;
      container-type: inline-size; font-family: 'Geist', sans-serif; line-height: 1; font-variant-numeric: tabular-nums;
      box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 22px 36px -22px rgba(0,0,0,.45); }
.lk > * { position: absolute; }
.lk.ink      { background: #161514; color: #f4f2ec; }
.lk.white    { background: #fbfaf7; color: #161514; box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 22px 36px -22px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.07); }
.lk.stone    { background: #d3d0c8; color: #161514; }
.lk.graphite { background: #3b3a37; color: #f4f2ec; }
.lk.cream    { background: #f2ecdf; color: #161514; }
.lk .emv { left: 8%; top: 31%; width: 12.5%; height: 16%; border-radius: 1.6cqw; background: linear-gradient(135deg, #e3d08f, #b89b4e); box-shadow: inset 0 0 0 .3cqw rgba(0,0,0,.15); }
.lk .emv::before { content: ''; position: absolute; left: 33%; right: 33%; top: 0; bottom: 0; border-left: .3cqw solid rgba(0,0,0,.18); border-right: .3cqw solid rgba(0,0,0,.18); }
.lk .emv::after { content: ''; position: absolute; left: 0; right: 0; top: 48%; height: .3cqw; background: rgba(0,0,0,.18); }
.lk .brand { left: 8%; top: 10%; font-size: 4.2cqw; font-weight: 500; letter-spacing: .32em; opacity: .62; }
.lk .rank { right: 8%; top: 9%; font-size: 4.6cqw; font-weight: 400; opacity: .62; }
.lk .val { left: 8%; top: 54%; font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500; font-size: 13.5cqw; line-height: 1; letter-spacing: .02em; white-space: nowrap; }
.lk .val small { font-size: 4.2cqw; letter-spacing: .12em; margin-left: 2.2cqw; opacity: .7; font-weight: 500; }
.lk .nm { left: 8%; bottom: 9%; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 3.8cqw; letter-spacing: .16em; opacity: .55; }
.lk .lock { right: 8%; bottom: 9%; width: 5.2cqw; height: 6.4cqw; }
.lk .lock::before { content: ''; position: absolute; left: 18%; right: 18%; top: 0; height: 55%; border: .75cqw solid currentColor; border-bottom: 0; border-radius: 3cqw 3cqw 0 0; opacity: .7; }
.lk .lock::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; border-radius: .9cqw; background: currentColor; opacity: .7; }
.lk.ink .val, .lk.graphite .val { color: #e9e6de; text-shadow: -.25cqw -.25cqw 0 rgba(255,255,255,.18), .3cqw .35cqw .3cqw rgba(0,0,0,.6); }
.lk.white .val, .lk.stone .val, .lk.cream .val { color: #2a2825; text-shadow: -.25cqw -.25cqw 0 rgba(255,255,255,.9), .3cqw .35cqw .35cqw rgba(0,0,0,.28); }
@container (max-width: 90px) { .lk .brand, .lk .nm, .lk .emv, .lk .val small, .lk .rank { display: none; } .lk .val { top: 50%; transform: translateY(-50%); font-size: 15cqw; } .lk .lock { bottom: 12%; } }