/* card.css — the digital business card at /card.
 *
 * THE CARD IS THE PRINTED BACK, UNIT FOR UNIT. The print file is 360 x 216
 * (3.75 x 2.25 in with bleed) and every number below is copied off it and
 * multiplied by --u, which is one print unit at whatever size the card is
 * drawn. So the card is the same card on a 320px phone and a 27in screen:
 * nothing reflows, it just gets bigger. --u is written in cqw (per cent of
 * the CARD's width, not the window's), which is what lets the face be
 * measured against itself.
 *
 * The page around it is deliberately nothing: just the card, with a share
 * button on the gold band (Alan, Sep 2026). No front face, no row of buttons
 * underneath -- the phone, email and website on the card are the links.
 *
 * The fonts are the card's, not the site's: the site moved to Manrope, the
 * card is still Archivo and IBM Plex because that is what is printed. A card
 * that looks different on screen from the one in someone's wallet is two
 * cards.
 */

:root {
  --black: #0B0B0A;      /* card face */
  --anvil: #131210;      /* page ground, so the black card has an edge */
  --gold: #D6A548;
  --brass: #EFCB85;      /* gold text on the page: 12:1 on anvil */
  --bone: #F3F0E8;
  --muted: #C4BFB4;      /* 10.7:1 on the card */
  --ink: #141208;        /* on gold, 7.3:1 */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--anvil);
  background-image:
    linear-gradient(rgba(214, 165, 72, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214, 165, 72, 0.045) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--bone);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

p { margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The card sits in the middle of the screen, like a card put down on a
   table. The share button is on the card itself, in the gold band. */
.stage {
  max-width: 560px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
}

.card-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.note {
  min-height: 1.4em;
  font-size: 14px;
  text-align: center;
  color: var(--muted);
}

/* ---------- the card ---------- */

.card {
  container-type: inline-size;
  --u: calc(100cqw / 360);
  position: relative;
  width: 100%;
  aspect-ratio: 360 / 216;
  overflow: hidden;
  border-radius: 12px;
  background: var(--black);
  border: 1px solid rgba(214, 165, 72, 0.24);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 18px 40px rgba(0, 0, 0, 0.45);
}

/* back — 04, the gold band, with the QR */
.card-back { display: flex; flex-direction: column; }
.b-band {
  flex: none;
  height: calc(58 * var(--u));
  padding: 0 calc(26 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
  background: var(--gold);
}
.b-mark { width: calc(24 * var(--u)); height: calc(24 * var(--u)); flex: none; }

/* The share button, at the right-hand end of the band. It scales with the
   card like everything else, but never below 44px -- the smallest target a
   thumb reliably hits -- which the band (58 units tall) has room for even on a
   320px phone. The negative margin lines the icon up with the band's padding
   instead of the button's edge. */
.share {
  margin-left: auto;
  margin-right: calc(-8 * var(--u));
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(44px, calc(40 * var(--u)));
  height: max(44px, calc(40 * var(--u)));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 18, 8, 0.1);
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.share svg { width: max(21px, calc(20 * var(--u))); height: max(21px, calc(20 * var(--u))); }
.share:hover { background: rgba(20, 18, 8, 0.18); }
.share:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.b-word {
  font-family: var(--display);
  font-weight: 800;
  font-size: calc(15 * var(--u));
  line-height: 1;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.b-body {
  flex: 1;
  min-height: 0;
  padding: calc(18 * var(--u)) calc(26 * var(--u)) calc(24 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
}
.b-left {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.b-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: calc(23 * var(--u));
  line-height: 1;
  letter-spacing: -0.022em;
  color: var(--bone);
}
.b-role {
  margin-top: calc(4 * var(--u));
  font-family: var(--mono);
  font-weight: 600;
  font-size: calc(9 * var(--u));
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.b-links { display: flex; flex-direction: column; gap: calc(5 * var(--u)); }
.b-links a {
  position: relative;
  display: block;
  font-size: calc(11.5 * var(--u));
  line-height: 1.25;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
/* These three lines are now the only way to call, email or open the site from
   the card, and at card size each is barely a fingertip tall. The invisible
   box behind each one reaches halfway into the gaps either side, so the whole
   row is the target -- without moving a single pixel of the printed layout. */
.b-links a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-2.5 * var(--u));
  bottom: calc(-2.5 * var(--u));
}
.b-links a:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 2px; }
.b-links .b-tel { font-weight: 600; }
.b-links .b-web { font-weight: 700; color: var(--gold); }
.b-qr { width: calc(70 * var(--u)); height: calc(70 * var(--u)); flex: none; display: block; }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }