:root {
  --bg: #1e2b2c;
  --card: #f6f0e6;
  --ink: #27211d;
  --muted: #6c625a;
  --red: #b3261e;
  --red-dark: #8e1d17;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  padding: 24px 16px 32px;
  background: radial-gradient(120% 60% at 50% 0%, #2f4243 0%, var(--bg) 70%);
  color: var(--ink);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.card {
  width: min(440px, 100%);
  margin: 0 auto;
  overflow: hidden;
  background: var(--card);
  border-radius: 22px;
  box-shadow: 0 18px 50px #0007;
}
.photo { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 22%; }
.body { position: relative; padding: 52px 26px 28px; text-align: center; }
.avatar {
  position: absolute; top: -46px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 92px; border-radius: 50%; border: 4px solid var(--card); object-fit: cover;
}
.eyebrow { margin: 0 0 6px; color: var(--red); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ai { margin: 0 0 10px; color: var(--muted); font-size: 11px; }
h1 { margin: 0 0 12px; font: 400 32px/1.15 Georgia, "Times New Roman", serif; }
.lead { margin: 0 0 22px; color: var(--muted); }
.button {
  display: block; padding: 14px 18px; border-radius: 12px;
  background: var(--red); color: #fff; font-weight: 700; text-decoration: none;
}
.button:hover, .button:focus-visible { background: var(--red-dark); }