@import "./fonts.css";
/* Layout follows the console prototype. Tokens come from theme contract 1. */
.calling-card { --card-paper:#f7f3ea; --card-bg:#f7f3ea; --card-ink:#1d1b17; --card-accent:#7a2e22; --card-muted:#63605b; --card-border:#cbc8c0; --tile-border:#cbc8c0; --tile-bg:#efebe3; --tile-blur:none; --hero-bg:#7a2e22; --hero-fg:#fff; --name-fg:#fff; --name-bg:#7a2e22; --main-bg:#1d1b17; --main-fg:#fff; --main-glow:none; --mark-fg:#7a2e22; --button-radius:16px; --tile-radius:14px; --display:'Fraunces',Georgia,serif; --display-weight:400; --photo-mask:none;
position:relative;width:370px;max-width:100%;flex:none;min-height:640px;display:flex;flex-direction:column;border-radius:28px;overflow:hidden;background:var(--card-bg);color:var(--card-ink);border:1px solid var(--card-border);box-shadow:0 24px 64px -16px rgba(0,0,0,.45),0 4px 16px rgba(0,0,0,.18);font:15px/1.35 'Instrument Sans',system-ui,sans-serif;box-sizing:border-box; }
.calling-card * {box-sizing:border-box;}
.card-front {display:flex;flex-direction:column;flex:1;min-height:638px;}
.card-nameplate h1 {padding-right:62px;}
.card-flip {position:absolute;right:20px;bottom:20px;display:flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;border:0;background:transparent;color:var(--name-fg);font:600 12.5px/1.35 'Instrument Sans',sans-serif;cursor:pointer;}
.card-flip svg,.back-flip svg {width:14px;height:14px;}
.card-hero {position:relative;height:280px;min-height:280px;overflow:hidden;background:var(--hero-bg);color:var(--hero-fg);margin:0;padding:0;border:0;flex:none;font:15px/1.35 'Instrument Sans',system-ui,sans-serif;letter-spacing:normal;display:block;}
.card-monogram {position:absolute;right:-24px;top:-70px;font-family:var(--display);font-size:390px;line-height:1;opacity:.09;}
.card-nameplate {position:absolute;left:0;right:0;bottom:0;padding:14px 22px 20px;background:var(--name-bg);color:var(--name-fg);}
.card-city {font:500 12.5px/1.35 'Instrument Sans',sans-serif;margin:0 0 6px;min-height:17px;}
.card-hero h1 {font:var(--display-weight) 40px/1.03 var(--display);letter-spacing:-.01em;margin:0;color:var(--name-fg);overflow-wrap:anywhere;}
.card-photo {position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;mask-image:var(--photo-mask);}
/* The selected size applies only to photo headers. Fade retains its separate name area. */
.card-photo-hero {height:var(--photo-height,280px);min-height:var(--photo-height,280px);}
.calling-card[data-blend="fade"] .card-photo-hero {height:calc(var(--photo-height,160px) + 120px);min-height:calc(var(--photo-height,160px) + 120px);}
.calling-card[data-blend="fade"] .card-photo {height:var(--photo-height,160px);}
.calling-card[data-blend="fade"] .card-nameplate {background:transparent;}
.card-body {display:flex;flex-direction:column;padding:22px 22px 24px;flex:1;gap:0;}
.card-headline {font:600 15px/1.35 'Instrument Sans',sans-serif;margin:0;overflow-wrap:anywhere;}
.card-subline {font:400 14px/1.35 'Instrument Sans',sans-serif;color:var(--card-muted);margin:2px 0 0;overflow-wrap:anywhere;}
.card-badges {display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.card-badges span {font-size:12.5px;font-weight:500;padding:5px 11px;border:1px solid var(--tile-border);border-radius:14px;color:var(--card-muted);}
.card-save {display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:12px 16px;border:0;border-radius:var(--button-radius);background:var(--main-bg);box-shadow:var(--main-glow);color:var(--main-fg);font:600 16px/1.35 'Instrument Sans',sans-serif;text-decoration:none;margin:18px 0 0;}
.card-actions {display:flex;gap:10px;margin:10px 0 0;}
.card-action {flex:1;min-width:0;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font:500 12.5px/1.35 'Instrument Sans',sans-serif;text-decoration:none;color:var(--card-ink);background:var(--tile-bg);border:1px solid var(--tile-border);border-radius:var(--tile-radius);backdrop-filter:var(--tile-blur);}
.action-symbol {font:500 18px/1 'Instrument Sans',sans-serif;min-height:18px;}
.card-rule {display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--card-muted);margin:18px 0;}
.card-rule::before,.card-rule::after {content:"";flex:1;height:1px;background:var(--tile-border);}
.card-link {min-height:58px;padding:9px 16px;border-radius:var(--tile-radius);display:flex;align-items:center;gap:14px;border:1px solid var(--tile-border);background:var(--tile-bg);color:var(--card-ink);text-decoration:none;backdrop-filter:var(--tile-blur);margin:0 0 8px;}
.link-mark {width:30px;flex:none;font:italic 19px/1.35 var(--display);color:var(--mark-fg);}
.link-copy {flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.link-copy strong {font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.link-copy small {font-size:12.5px;color:var(--card-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.card-footer {margin:18px 0 0;text-align:center;font-size:12.5px;color:var(--card-muted);overflow-wrap:anywhere;}
.card-brand {text-align:center;margin:auto 0 0;padding-top:18px;}
.card-brand img {display:block;width:76px;height:auto;margin:auto;}
.calling-card a:focus-visible {outline:2px solid var(--card-ink);outline-offset:2px;}
.calling-card [hidden],.card-sheet [hidden] { display:none!important; }
.card-tools { position:absolute;right:16px;top:16px;display:flex;gap:8px;margin:0; }
.card-tools button,.card-sheet button { font:600 14px/1.4 Arial,Helvetica,sans-serif; min-height:44px; padding:10px 16px; border:1px solid #cbc8c0; border-radius:9px; background:#fff; color:#1d1b17; cursor:pointer; }
.card-tools button { width:44px;height:44px;min-height:44px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid color-mix(in srgb,var(--tools-fg,#ffffff) 55%,transparent);background:var(--tools-bg,#173532);color:var(--tools-fg,#ffffff); }
.card-noscript { font-size:13px; text-align:center; }
.card-noscript a { color:#1d1b17; }
.card-sheet { width:360px; max-width:calc(100vw - 32px); max-height:calc(100vh - 48px); box-sizing:border-box; overflow:auto; background:#f7f3ea; color:#1d1b17; border:1px solid #cbc8c0; border-radius:18px; padding:26px; font:14px/1.6 Arial,Helvetica,sans-serif; }
.card-sheet::backdrop { background:rgb(11 30 61 / .6); }
.card-sheet h2 { font:28px/1.2 Georgia,serif; margin:12px 44px 16px 0; }
.card-sheet .sheet-close { position:absolute; top:14px; right:14px; min-width:44px; font-size:24px; padding:0; }
.card-sheet dl { display:grid; grid-template-columns:1fr; margin:20px 0; }
.card-sheet dt { color:#63605b; font-size:12px; margin-top:12px; }
.card-sheet dd { margin:0; overflow-wrap:anywhere; white-space:pre-wrap; }
.card-sheet .card-save { background:#1d1b17; color:#f7f3ea; }
.card-sheet .sheet-status { color:#7a2e22; }
.qr-modes { display:flex; gap:10px; }
.qr-modes button[aria-pressed=true] { background:#1d1b17; color:#f7f3ea; }
.qr-image { width:100%; height:auto; display:block; margin:20px auto; background:#fff; }
.qr-print { font-size:12px; color:#63605b; }
.qr-downloads { display:flex; gap:18px; margin:18px 0; }
.qr-downloads a { color:#1d1b17; min-height:44px; display:inline-flex; align-items:center; }
.share-label { display:block; font-size:12px; margin:24px 0 12px; }
.share-label input { box-sizing:border-box; width:100%; margin-top:6px; border:1px solid #cbc8c0; padding:12px; border-radius:8px; font:12px Arial,sans-serif; }
.card-sheet :focus-visible,.card-tools :focus-visible { outline:3px solid #7a2e22; outline-offset:3px; }
.calling-card > .card-back {position:relative;inset:auto;margin:0;width:100%;max-width:100%;min-height:638px;max-height:none;border:0;border-radius:0;padding:22px;background:var(--card-bg);color:var(--card-ink);font:15px/1.35 'Instrument Sans',sans-serif;}
.card-back h2 {font:600 22px/1.2 'Bricolage Grotesque',sans-serif;margin:0 70px 8px 0;}
.card-back .back-flip {float:right;display:inline-flex;align-items:center;gap:6px;border-radius:22px;min-height:44px;font:600 12.5px/1.35 'Instrument Sans',sans-serif;}
.card-back .qr-modes {clear:both;margin:22px 0 14px;}
.card-back button,.card-back .share-label input {background:var(--tile-bg);border-color:var(--tile-border);color:var(--card-ink);font-family:'Instrument Sans',sans-serif;}
.card-back .qr-modes button {flex:1;}
.card-back .qr-modes button[aria-pressed=true] {background:var(--card-ink);color:var(--card-paper);}
.card-back .qr-image {max-width:270px;padding:16px;border-radius:22px;}
.card-back .qr-print,.card-back .sheet-status {color:var(--card-muted);}
.card-back .qr-downloads a {color:var(--card-ink);}
.card-back .share-label {color:var(--card-muted);}
.card-back :focus-visible {outline:2px solid var(--card-ink);outline-offset:2px;}
body:has(> .calling-card) { margin:0; padding:32px 10px; background:var(--page-bg,#e8e5de); min-height:100vh; display:grid; justify-content:center; align-content:start; }
@media(max-width:389px) { body:has(> .calling-card) { padding:0; display:block; } body > .calling-card { width:100%; border:0; border-radius:0; min-height:100vh; } }
.exchange-sheet {position:fixed;inset:auto 0 0;margin:0 auto;width:370px;max-width:calc(100vw - 20px);max-height:100dvh;padding:22px;border:0;border-radius:26px 26px 0 0;background:var(--card-paper,#f7f3ea);color:var(--card-ink,#1d1b17);font:14px/1.35 'Instrument Sans',sans-serif;}
.exchange-form,.exchange-fields,.exchange-success {display:flex;flex-direction:column;gap:14px;}
.exchange-form[hidden],.exchange-success[hidden] {display:none;}
.exchange-sheet h2 {font:var(--display-weight,400) 23px/1.2 var(--display,Georgia,serif);margin:0 32px 0 0;}
.exchange-intro,.exchange-consent {font-size:12.5px;line-height:1.5;margin:0;color:var(--card-muted,#63605b);}
.exchange-intro {padding-top:20px;}
.exchange-fields input {box-sizing:border-box;width:100%;min-height:46px;border:1px solid var(--tile-border,#cbc8c0);background:var(--tile-bg,#efebe3);color:var(--card-ink,#1d1b17);border-radius:12px;padding:12px;font:14px 'Instrument Sans',sans-serif;}
.exchange-sheet .sheet-close {border-radius:50%;font:24px/1 'Instrument Sans',sans-serif;background:var(--tile-bg,#efebe3);color:var(--card-ink,#1d1b17);border-color:var(--tile-border,#cbc8c0);}
.exchange-sheet .card-save {margin:0;background:var(--main-bg,#1d1b17);color:var(--main-fg,#f7f3ea);border-radius:var(--button-radius,16px);font-family:'Instrument Sans',sans-serif;}
.exchange-sheet .sheet-status:empty {display:none;}
.exchange-sheet .exchange-decline {align-self:center;min-height:44px;border:0;background:transparent;}
.exchange-trap {position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}