/* Name card faces, shared by the printed card (print.html, 1 --mm = 1 mm, with 3 mm bleed) and the live card (card.html, scales with the card).
   Portrait 54 x 90 mm. Text stays 4 mm inside the trim line. */
.cf{position:relative;overflow:hidden;color:#fff;font-family:"Manrope",system-ui,sans-serif;background:#05060c;--safe:calc(var(--mm) * (4 + var(--bleed, 0)))}
.cf-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* soft shading behind the type so it reads on every gradient variant */
.cf-shade{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(4,5,12,.62) 0%,rgba(4,5,12,.18) 26%,rgba(4,5,12,0) 42%,rgba(4,5,12,0) 64%,rgba(4,5,12,.5) 86%,rgba(4,5,12,.7) 100%),
  linear-gradient(270deg,rgba(4,5,12,.35) 0%,rgba(4,5,12,0) 22%)}
.cf-safe{position:absolute;inset:var(--safe)}
.cf-name{position:absolute;left:0;top:0;line-height:1.02}
.cf-name b{display:block;font-weight:650;font-size:calc(var(--mm) * 4.7);letter-spacing:-.035em}
.cf-name span{display:block;font-weight:300;font-size:calc(var(--mm) * 4.7);letter-spacing:-.03em;opacity:.95}
.cf-name small{display:block;margin-top:calc(var(--mm) * 2);font-size:calc(var(--mm) * 1.85);font-weight:500;letter-spacing:.04em;opacity:.85}
.cf-vert{position:absolute;right:0;top:0;writing-mode:vertical-rl;font-size:calc(var(--mm) * 1.7);letter-spacing:.06em;line-height:1.5;opacity:.82;max-height:calc(var(--mm) * 58)}
.cf-foot{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:calc(var(--mm) * 2)}
.cf-lines{font-size:calc(var(--mm) * 1.75);line-height:1.6;letter-spacing:.02em;font-weight:500}
.cf-lines span{display:block}
.cf-lines a{color:inherit;text-decoration:none}
.cf-mono{flex:none;display:grid;place-items:center;width:calc(var(--mm) * 6.2);height:calc(var(--mm) * 6.2);border:calc(var(--mm) * .2) solid rgba(255,255,255,.75);border-radius:50%;font-size:calc(var(--mm) * 2.1);font-weight:600;letter-spacing:.06em}
/* back */
.cf-back .cf-shade{background:rgba(4,5,12,.72)}
.cf-back .cf-safe{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:calc(var(--mm) * 3.2)}
.cf-back h2{font-size:calc(var(--mm) * 3.1);font-weight:650;letter-spacing:-.02em}
.cf-back h2 + p{margin-top:calc(var(--mm) * -2.2);font-size:calc(var(--mm) * 1.75);letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.cf-qr{width:calc(var(--mm) * 22);height:calc(var(--mm) * 22);padding:calc(var(--mm) * 2);background:#fff;border-radius:calc(var(--mm) * 1.6)}
.cf-qr img{display:block;width:100%;height:100%}
.cf-back .cf-cap{font-size:calc(var(--mm) * 1.75);letter-spacing:.06em;line-height:1.55;opacity:.88}
.cf-back .cf-where{position:absolute;left:0;right:0;bottom:0;font-size:calc(var(--mm) * 1.6);letter-spacing:.2em;text-transform:uppercase;opacity:.7}