/* Fluid business card layout, including very narrow displays. */
body { overflow-wrap: anywhere; font-size: clamp(13px, calc(12px + .7vw), 16px); }
main, .action > span, nav > * { min-width: 0; }
.content { padding: clamp(10px, 5vw, 30px); }
.brand { padding: clamp(16px, 6vw, 36px) clamp(10px, 5vw, 28px); }
h1 { font-size: clamp(20px, calc(14px + 4vw), 32px); }
small, h2 { letter-spacing: clamp(.02em, .3vw, .12em); }
.action { gap: clamp(6px, 2vw, 15px); padding: clamp(10px, 3vw, 16px) clamp(8px, 3vw, 18px); }
.action b { font-size: clamp(13px, calc(12px + .6vw), 15px); }
.action span.sub { font-size: clamp(12px, calc(11px + .4vw), 13px); }
.icon { width: clamp(28px, 8vw, 38px); height: clamp(28px, 8vw, 38px); }
.arrow { flex-shrink: 0; }
.qr { padding: clamp(10px, 4vw, 22px); }
nav { flex-wrap: wrap; }
nav > a, nav > button { flex: 1 1 130px; overflow-wrap: anywhere; }
@media (max-width: 260px) { .action { flex-wrap: wrap; } .action > span:not(.icon):not(.arrow) { flex: 1 1 90px; } }