:root {
  color-scheme: dark;
  --ink: #171714;
  --paper: #eae6dc;
  --muted: #99958b;
  --glow: #ffc15a;
  --ember: #ef5632;
  --blue: #96bad8;
  font-family: Arial, sans-serif;
  background: var(--ink);
  color: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--glow); outline-offset: 4px; }

.card-screen {
  min-height: 100svh;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 12% 0%, rgba(239, 86, 50, .13), transparent 36%),
              radial-gradient(ellipse at 100% 90%, rgba(37, 74, 105, .33), transparent 42%), var(--ink);
}

.digital-card {
  width: min(100%, 440px);
  min-height: min(780px, calc(100svh - 24px));
  padding: clamp(22px, 6vw, 34px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(14px, 3.1vh, 26px);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(234, 230, 220, .24);
  background: linear-gradient(145deg, rgba(34, 31, 27, .96), rgba(23, 23, 20, .97) 58%, rgba(27, 38, 46, .92));
  box-shadow: 0 24px 80px rgba(0, 0, 0, .34);
}

.digital-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(var(--glow), var(--ember) 54%, var(--blue));
}

.card-brand, .card-person, .card-contact, .card-qr, .card-footer { position: relative; z-index: 1; }
.card-wordmark { display: inline-block; font: 700 clamp(29px, 8vw, 39px)/1 Georgia, serif; letter-spacing: -.07em; white-space: nowrap; }
.card-wordmark span { color: var(--glow); }
.card-wordmark i { margin-left: 5px; color: var(--blue); font-style: normal; font-weight: 400; }
.card-brand > p { margin: 9px 0 0; color: var(--ember); font: 11px 'Courier New', monospace; letter-spacing: .13em; text-transform: uppercase; }

.card-person { padding-top: 16px; border-top: 1px solid rgba(234, 230, 220, .18); }
.card-eyebrow { margin: 0 0 9px; color: var(--blue); font: 10px 'Courier New', monospace; letter-spacing: .12em; text-transform: uppercase; }
.card-person h1 { margin: 0; font-size: clamp(30px, 8vw, 42px); line-height: 1; letter-spacing: -.055em; }
.card-person > p:last-child { margin: 9px 0 0; color: #c2beb4; font-size: 14px; }

.card-contact { display: grid; gap: 10px; }
.card-contact a { display: flex; align-items: baseline; gap: 13px; font-size: 13px; }
.card-contact a span { width: 61px; flex: 0 0 61px; color: var(--muted); font: 9px 'Courier New', monospace; letter-spacing: .08em; text-transform: uppercase; }
.card-contact a:hover { color: var(--glow); }

.card-qr { display: flex; align-items: center; gap: 16px; padding: 14px; border: 1px solid rgba(150, 186, 216, .3); background: linear-gradient(100deg, rgba(37, 74, 105, .25), rgba(37, 74, 105, .07)); }
.card-qr img { display: block; width: clamp(116px, 34vw, 148px); height: auto; flex: 0 0 auto; background: white; }
.card-qr .card-eyebrow { margin-bottom: 8px; font-size: 9px; letter-spacing: .07em; }
.card-url { display: inline-block; color: var(--glow); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.card-scan { margin: 7px 0 0; color: var(--muted); font: 9px 'Courier New', monospace; }

.card-footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-top: 12px; border-top: 1px solid rgba(234, 230, 220, .18); color: var(--muted); font: 9px 'Courier New', monospace; letter-spacing: .08em; text-transform: uppercase; }
.card-footer a { color: var(--paper); }
.card-footer b { padding-left: 5px; color: var(--glow); }

@media (max-height: 680px) {
  .digital-card { gap: 12px; padding: 20px; }
  .card-person { padding-top: 11px; }
  .card-qr { padding: 10px; }
  .card-qr img { width: clamp(104px, 28vw, 122px); }
  .card-contact { gap: 7px; }
}

@media (max-width: 350px) {
  .card-qr { gap: 11px; padding: 9px; }
  .card-qr img { width: 108px; }
  .card-contact a { font-size: 12px; gap: 8px; }
  .card-contact a span { width: 55px; flex-basis: 55px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}