/* Layout: watercolour stationery. Florals bloom from the top-left and bottom-right corners,
   content sits in one calm centred column like the text block of a printed invitation.
   Deliberately a single light "paper" theme, to match the printed suite. */
:root {
  --paper: #ffffff;
  --ink: #1f3352;          /* deep hydrangea navy: headings and text */
  --ink-soft: #55657d;     /* secondary text */
  --petal: #5d82b8;        /* hydrangea blue: accent, focus, selected */
  --mist: #e4ecf6;         /* pale forget-me-not wash */
  --leaf: #7f9c93;         /* eucalyptus green: hairlines, small details */
  --white: #ffffff;
  --yes: #3f7a6a;
  --no: #9a5b5b;

  --f-script: "Pinyon Script", "Snell Roundhand", cursive;
  --f-serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --f-caps: "Jost", "Futura", "Segoe UI", sans-serif;

  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { background: var(--paper); }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--f-serif);
  font-size: 1.1875rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { text-wrap: balance; font-weight: 400; margin: 0; }

button, input { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--petal); outline-offset: 3px; }

.caps {
  font-family: var(--f-caps);
  font-size: .78rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Floral corners cropped from the inspiration artwork */
.corner {
  position: absolute;
  pointer-events: none;
  background-image: url("images/floral-corners.webp");
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  max-width: 100%;
}
.corner-tl {
  top: 0; left: 0;
  width: min(44vw, 400px);
  aspect-ratio: 600 / 820;
  background-size: 175.8% auto;
  background-position: 0 0;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 0 0, #000 62%, transparent 88%);
          mask-image: radial-gradient(ellipse 100% 100% at 0 0, #000 62%, transparent 88%);
}
.corner-br {
  bottom: 0; right: 0;
  width: min(48vw, 440px);
  aspect-ratio: 700 / 770;
  background-size: 150.7% auto;
  background-position: 100% 100%;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 100% 100%, #000 62%, transparent 88%);
          mask-image: radial-gradient(ellipse 100% 100% at 100% 100%, #000 62%, transparent 88%);
}

/* Flag chips */
.flag {
  display: inline-block;
  width: 1.6em;
  aspect-ratio: 3 / 2;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(31, 51, 82, .14);
  flex: none;
}
.flag svg { display: block; width: 100%; height: 100%; }

.ornament {
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  color: var(--leaf);
}
.ornament::before, .ornament::after {
  content: ""; height: 1px; width: 4.5rem; background: currentColor; opacity: .6;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3rem;
  padding: .7rem 1.6rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--f-caps);
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}
.btn:hover { background: var(--petal); border-color: var(--petal); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--mist); color: var(--ink); border-color: var(--ink); }

.field { display: grid; gap: .35rem; min-width: 0; }
.field label { font-family: var(--f-caps); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.input {
  width: 100%;
  padding: .7rem .2rem .5rem;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  background: transparent;
  font-size: 1.2rem;
  border-radius: 0;
}
.input:focus { outline: none; border-bottom-color: var(--petal); box-shadow: 0 1px 0 0 var(--petal); }

.notice {
  font-family: var(--f-caps);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
  background: var(--mist);
  border-radius: 8px;
  padding: .6rem .9rem;
}
.error { color: var(--no); font-size: 1rem; min-height: 1.5em; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}