:root {
  color-scheme: light;
  font-family: system-ui, sans-serif;
  color: #312522;
  background: #f7efe6;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 5vw, 3rem);
  background: radial-gradient(ellipse at top, #fffaf1 0%, #f7efe6 75%);
}

.invitation {
  width: min(100%, 35rem);
  padding: clamp(2rem, 8vw, 4.5rem) clamp(1.25rem, 6vw, 4rem);
  text-align: center;
  background: #fffcf7;
  border: 1px solid #d9c9b9;
  border-radius: 2px;
  box-shadow: inset 0 0 0 5px #fffcf7, inset 0 0 0 6px #e9ded2, 0 16px 55px #49302212;
}

.sprig { width: 5.8rem; color: #72795d; }

.kicker {
  margin: 1rem 0 1.1rem;
  font-size: .71rem;
  font-weight: 650;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #714d46;
}

h1 {
  margin: 0;
  font: 400 clamp(2rem, 7vw, 3.6rem) / 1.12 Georgia, serif;
  letter-spacing: -.045em;
  text-wrap: balance;
}

h1 > span {
  display: block;
  margin-top: .35rem;
  font-size: .52em;
  font-style: italic;
  letter-spacing: 0;
  color: #714d46;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.intro {
  margin: 1.3rem auto 1.65rem;
  max-width: 25ch;
  color: #66564e;
  font-size: .95rem;
  line-height: 1.6;
}

form { max-width: 22rem; margin: 0 auto; text-align: left; }
label { display: block; margin-bottom: .5rem; font-size: .875rem; font-weight: 650; }

input, button {
  width: 100%;
  min-height: 3.15rem;
  border-radius: .3rem;
  padding: .7rem .85rem;
  font: inherit;
}

input { border: 1px solid #9b8475; color: inherit; background: #fff; }
input[aria-invalid="true"] { border-color: #a1372c; }

button {
  margin-top: .8rem;
  border: 1px solid transparent;
  background: #603b3b;
  color: #fff;
  font-weight: 650;
  cursor: pointer;
}

button:hover { background: #492c2c; }
button span { margin-left: .45rem; }

:focus-visible { outline: 2px solid #603b3b; outline-offset: 3px; }
.form-error { margin: .55rem 0 0; color: #923228; font-size: .875rem; line-height: 1.45; }
.album-link { color: #603b3b; font-weight: 650; text-underline-offset: .2em; }