:root {
  --ink: #3a3450;
  --muted: #8b84a3;
  --lavender: #cbc3e3;
  --lavender-deep: #9d92c7;
  --line: #e8e4f2;
  --bg: #f7f5fc;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: linear-gradient(160deg, #ffffff 0%, var(--bg) 60%, #efeafb 100%);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.6;
  padding: 2rem;
}

.container {
  position: relative;
  max-width: 460px;
  text-align: center;
  background: #ffffff;
  padding: 3rem 2.5rem;
  border-radius: 28px;
  box-shadow: 0 20px 50px rgba(157, 146, 199, 0.25);
  border: 1px solid var(--line);
}

/* Scalloped lace trim wrapping all four sides of the card */
.container::before {
  content: "";
  position: absolute;
  inset: -15px;
  z-index: -1;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='18'%3E%3Cpath d='M0 18 H26 V11 Q13 -3 0 11 Z' fill='%23ffffff'/%3E%3Ccircle cx='13' cy='11' r='1.8' fill='%23cbc3e3'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='18'%3E%3Cpath d='M0 0 H26 V7 Q13 21 0 7 Z' fill='%23ffffff'/%3E%3Ccircle cx='13' cy='7' r='1.8' fill='%23cbc3e3'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='26'%3E%3Cpath d='M18 0 V26 H7 Q-3 13 7 0 Z' fill='%23ffffff'/%3E%3Ccircle cx='7' cy='13' r='1.8' fill='%23cbc3e3'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='26'%3E%3Cpath d='M0 0 V26 H11 Q21 13 11 0 Z' fill='%23ffffff'/%3E%3Ccircle cx='11' cy='13' r='1.8' fill='%23cbc3e3'/%3E%3C/svg%3E");
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 26px 18px, 26px 18px, 18px 26px, 18px 26px;
}

.avatar {
  width: 110px;
  height: 110px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, var(--lavender) 0%, var(--lavender-deep) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 14px;
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: 1px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29.6'%3E%3Cpath d='M23.6 0c-3.4 0-6.3 2.7-7.6 5.6C14.7 2.7 11.8 0 8.4 0 3.8 0 0 3.8 0 8.4c0 9.4 9.5 11.9 16 21.2 6.1-9.3 16-12.1 16-21.2C32 3.8 28.2 0 23.6 0z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29.6'%3E%3Cpath d='M23.6 0c-3.4 0-6.3 2.7-7.6 5.6C14.7 2.7 11.8 0 8.4 0 3.8 0 0 3.8 0 8.4c0 9.4 9.5 11.9 16 21.2 6.1-9.3 16-12.1 16-21.2C32 3.8 28.2 0 23.6 0z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 8px 14px rgba(157, 146, 199, 0.45));
}

h1 {
  font-family: "Dancing Script", cursive;
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1.1;
  color: #4a3b8f;
}

.role {
  color: var(--lavender-deep);
  font-weight: 600;
  margin-top: 0.25rem;
}

.bio {
  color: var(--muted);
  margin-top: 1.25rem;
  font-size: 1.05rem;
}

footer {
  margin-top: 2.5rem;
  color: var(--muted);
  font-size: 0.85rem;
}