*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#1b1d22;background:#eef0f4;min-height:100vh}
.ic{width:22px;height:22px;flex:none}
.card{max-width:480px;margin:0 auto;background:#fff;min-height:100vh;padding-bottom:24px;display:flex;flex-direction:column}
@media(min-width:600px){body{padding:40px 16px;background:linear-gradient(135deg,color-mix(in srgb,var(--p) 18%,#eef0f4),#eef0f4)}.card{min-height:auto;border-radius:22px;overflow:hidden;box-shadow:0 20px 50px rgba(20,30,60,.18)}}
.hero{text-align:center;padding:36px 20px 22px;background:var(--p);color:var(--on-p)}
.hero h1{margin:12px 0 2px;font-size:1.6rem;line-height:1.2;letter-spacing:-.01em}
.hero .title{margin:0;opacity:.9}.hero .company{margin:2px 0 0;font-weight:600;opacity:.95}
.photo{width:112px;height:112px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 6px 18px rgba(0,0,0,.18);background:#fff;display:inline-block}
.initials{display:inline-flex;align-items:center;justify-content:center;font-size:44px;font-weight:700;color:var(--p)}
.logo{display:block;max-width:180px;max-height:64px;margin:0 auto 14px;object-fit:contain}
.actions{display:flex;justify-content:center;gap:10px;padding:16px 16px 4px;flex-wrap:wrap}
.actions a{flex:1 1 0;min-width:64px;max-width:96px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:14px;background:color-mix(in srgb,var(--p) 9%,#fff);color:var(--p);text-decoration:none;font-size:.82rem;font-weight:600}
.save{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 16px 4px;padding:15px;border-radius:14px;background:var(--a);color:var(--on-a);font-weight:700;font-size:1.05rem;text-decoration:none;box-shadow:0 4px 12px color-mix(in srgb,var(--a) 40%,transparent)}
.bio{margin:14px 22px 0;color:#454a55;text-align:center}
.links{list-style:none;margin:14px 16px 0;padding:0;display:grid;gap:10px}
.links a{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;border:1.5px solid color-mix(in srgb,var(--p) 25%,#fff);color:#1b1d22;text-decoration:none;font-weight:600;background:#fff}
.links a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.links a .ic{color:var(--p)}
.addr{display:flex;gap:6px;justify-content:center;align-items:center;margin:16px 22px 0;color:#5a606c;font-size:.92rem;text-align:center}.addr .ic{width:16px;height:16px}
.socials{display:flex;justify-content:center;gap:12px;margin:18px 16px 0;flex-wrap:wrap}
.socials a{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--p);color:var(--on-p)}
.made{margin-top:auto;padding:26px 16px 4px;text-align:center;font-size:.85rem}
.made a{color:#7a808c;text-decoration:none}.made strong{color:#1b1d22}
/* bold: full colour page */
.tpl-bold .card{background:var(--p);color:var(--on-p)}
.tpl-bold .hero{padding-top:44px}
.tpl-bold .actions a{background:color-mix(in srgb,var(--on-p) 14%,transparent);color:var(--on-p)}
.tpl-bold .links a{background:color-mix(in srgb,var(--on-p) 10%,transparent);border-color:color-mix(in srgb,var(--on-p) 35%,transparent);color:var(--on-p)}
.tpl-bold .links a .ic{color:var(--a)}.tpl-bold .bio,.tpl-bold .addr{color:var(--on-p);opacity:.9}
.tpl-bold .socials a{background:var(--a);color:var(--on-a)}.tpl-bold .made a{color:var(--on-p);opacity:.8}.tpl-bold .made strong{color:var(--on-p)}
/* minimal: white, accent lines */
.tpl-minimal .hero{background:#fff;color:#1b1d22;border-bottom:4px solid var(--a)}
.tpl-minimal .photo{border-color:color-mix(in srgb,var(--p) 20%,#fff)}
.tpl-minimal .initials{background:var(--p);color:var(--on-p)}
.inactive .hero h1{font-size:1.35rem}