:root { --paper: #fffcf7; --desk: #efe5d8; --ink: #4a3f3a; --soft: #8c7d74; --rose: #d9a5a0; --sage: #a9b8a0; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 20% 10%, #f7efe6, var(--desk));
  font-family: 'DM Sans', system-ui, sans-serif; color: var(--ink);
}
.card {
  position: relative; width: min(360px, 100%); background: var(--paper); border-radius: 6px 18px 18px 6px;
  padding: 48px 32px 36px 44px; text-align: center;
  box-shadow: 0 1px 0 #e9dfd2, 0 20px 40px -18px rgba(90, 60, 40, .35), inset 6px 0 0 #f1e6da;
  background-image: radial-gradient(#e8ddd0 1px, transparent 1px); background-size: 18px 18px;
}
.ring { position: absolute; left: 10px; top: 24px; bottom: 24px; width: 14px;
  background: repeating-linear-gradient(to bottom, transparent 0 22px, #cbbcae 22px 28px, transparent 28px 40px); border-radius: 8px; }
.script { font-family: 'Caveat', cursive; font-size: 26px; color: var(--rose); margin: 0 0 -10px; }
h1 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 52px; margin: 0; letter-spacing: .5px; }
.who { margin: 0 0 28px; color: var(--soft); letter-spacing: 3px; text-transform: uppercase; font-size: 12px; }
input { width: 100%; padding: 13px 16px; border: 1px solid #e3d6c8; border-radius: 999px; background: #fff; font: inherit; color: var(--ink); text-align: center; }
input:focus { outline: 2px solid var(--rose); outline-offset: 1px; }
button { margin-top: 12px; width: 100%; padding: 13px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
button:hover { background: #2f2825; }
.err { color: #b4554b; font-size: 14px; margin: 14px 0 0; }