@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Nunito:wght@400;600;700&display=swap');

:root {
  --vermilion: #DC4422;
  --cream: #F3EEE0;
  --sage: #AFC3B6;
  --blush: #F2A8C0;
  --sky: #6E9CD2;
  --ink: #5b2420;
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body: 'Nunito', system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--body); color: var(--ink);
  background: repeating-linear-gradient(90deg,
    var(--cream) 0 30px, #e7ddca 30px 32px, var(--sage) 32px 60px, #e7ddca 60px 62px);
  min-height: 100vh;
}
h1, h2, h3, .display {
  font-family: var(--display); font-weight: 800; letter-spacing: .02em;
  text-transform: uppercase; color: var(--vermilion); line-height: .95; margin: 0 0 .3em;
}
a { color: var(--vermilion); }

/* The signature scalloped card: a vermilion scalloped frame around a cream panel. */
.card {
  position: relative; max-width: 720px; margin: 4vh auto; padding: 26px;
  background: var(--vermilion);
  --r: 18px;
  -webkit-mask:
    radial-gradient(var(--r) at 50% 0, #0000 98%, #000) repeat-x 50% 0 / calc(2*var(--r)) var(--r),
    radial-gradient(var(--r) at 50% 100%, #0000 98%, #000) repeat-x 50% 100% / calc(2*var(--r)) var(--r),
    radial-gradient(var(--r) at 0 50%, #0000 98%, #000) repeat-y 0 50% / var(--r) calc(2*var(--r)),
    radial-gradient(var(--r) at 100% 50%, #0000 98%, #000) repeat-y 100% 50% / var(--r) calc(2*var(--r)),
    linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 2*var(--r)) calc(100% - 2*var(--r));
  mask:
    radial-gradient(var(--r) at 50% 0, #0000 98%, #000) repeat-x 50% 0 / calc(2*var(--r)) var(--r),
    radial-gradient(var(--r) at 50% 100%, #0000 98%, #000) repeat-x 50% 100% / calc(2*var(--r)) var(--r),
    radial-gradient(var(--r) at 0 50%, #0000 98%, #000) repeat-y 0 50% / var(--r) calc(2*var(--r)),
    radial-gradient(var(--r) at 100% 50%, #0000 98%, #000) repeat-y 100% 50% / var(--r) calc(2*var(--r)),
    linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 2*var(--r)) calc(100% - 2*var(--r));
}
.card__inner {
  background: var(--cream); border-radius: 8px; padding: 32px 28px; text-align: center;
}
.muted { color: #8a7d6f; font-size: .9rem; }
button, .btn {
  display: inline-block; font-family: var(--display); text-transform: uppercase; letter-spacing: .03em;
  background: var(--vermilion); color: var(--cream); border: 0; border-radius: 999px;
  padding: 12px 26px; font-size: 1rem; cursor: pointer; text-decoration: none;
}
button.ghost, .btn.ghost { background: transparent; color: var(--vermilion); border: 2px solid var(--vermilion); }
select, input, textarea {
  font-family: var(--body); width: 100%; padding: 12px; border: 2px solid var(--sage);
  border-radius: 10px; background: #fff; margin: 6px 0 14px; font-size: 1rem; color: var(--ink);
}
.sealed { opacity: .95; }
.sealed .lock { font-size: 2.4rem; }
.countdown { font-family: var(--display); color: var(--sky); }
.timeline { max-width: 720px; margin: 0 auto; padding: 2vh 12px 8vh; }
.entry__date { font-family: var(--display); color: var(--sky); font-size: .85rem; }
.entry img, .entry video { max-width: 100%; border-radius: 10px; margin-top: 10px; }
.heart { color: var(--vermilion); }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--cream); padding: 10px 18px; border-radius: 999px; }