/*
 * AgentTech business card. Shared by the static brand kit renders
 * (tools/brand/src/cards.html) and the in-browser generator (/brand/business-card).
 * Card is US standard 3.5 x 2 in at 300 dpi = 1050 x 600 css px, trim size, no bleed.
 * Relies on the site tokens (--navy, --cream, --grad, --font-*) from site.css or tokens.css.
 */
.bcard {
    position: relative;
    width: 1050px;
    height: 600px;
    overflow: hidden;
    padding: 72px;
    box-sizing: border-box;
    font: 400 1rem/1.5 var(--font-sans);
    -webkit-font-smoothing: antialiased;
}
.bcard *, .bcard *::before, .bcard *::after { box-sizing: border-box; margin: 0; }
.bcard img { display: block; }
.bcard ul { list-style: none; padding: 0; }

/* Front: navy, stacked lockup, gradient edge */
.bcard.is-front { background: var(--navy); color: var(--text-on-navy); display: grid; place-items: center; }
.bcard.is-front .lockup { width: 316px; height: auto; margin-top: -8px; }
.bcard.is-front::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: var(--grad); }

/* Back: cream, name + contact */
.bcard.is-back { background: var(--cream); color: var(--text-on-cream); display: flex; flex-direction: column; justify-content: space-between; }
.bcard .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--navy); text-decoration: none; }
.bcard .brand img { height: 34px; width: auto; }
.bcard .brand span { font: 700 15px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; }

.bcard .name { font: 400 66px/1 var(--font-display); letter-spacing: -0.005em; white-space: nowrap; }
.bcard .title { margin-top: 14px; font: 700 14px/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-on-cream); }
.bcard .rule { width: 64px; height: 5px; background: var(--grad); border-radius: 3px; margin-top: 22px; }

.bcard .contact { display: flex; gap: 48px; align-items: flex-end; justify-content: space-between; }
.bcard .contact ul { display: grid; gap: 8px; font: 500 21px/1.2 var(--font-sans); }
.bcard .contact li:empty, .bcard .contact li[hidden] { display: none; }
.bcard .contact li.is-social { color: var(--muted-on-cream); font-weight: 400; }
.bcard .company {
    font: 600 12px/1.7 var(--font-sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted-on-cream);
    text-align: right;
    white-space: pre-line;
    flex: none;
}