:root {
  color-scheme: light;
  --paper: #f8f5ee;
  --ink: #573c35;
  --accent: #994c39;
  --muted: #79665c;
  --line: #cfb99b;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 280px;
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 38%, #fffdf8 0%, transparent 65%);
  z-index: -1;
}
.page-frame { position: absolute; inset: 16px; border: 1px solid var(--line); pointer-events: none; min-height: calc(100svh - 32px); }
.masthead { display: flex; align-items: center; justify-content: space-between; padding: 43px 64px 0; gap: 24px; }
.monogram { color: var(--accent); font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.5rem; text-decoration: none; letter-spacing: .12em; }
.monogram:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.masthead-note { font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
main { padding: 40px 24px 24px; }
.invitation { position: relative; max-width: 720px; margin: 0 auto; }
.arch { position: absolute; inset: 0; border: 1px solid var(--line); border-radius: 360px 360px 0 0; pointer-events: none; }
.arch-inner { inset: 10px; border-color: #e2d5c1; }
.invitation-content { position: relative; text-align: center; padding: 69px 48px 25px; }
.ornament { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--accent); font-size: 1.5rem; margin-bottom: 38px; }
.ornament span { width: 33px; height: 1px; background: var(--line); }
.eyebrow, .event-kicker { font-size: .75rem; font-weight: 400; line-height: 1.8; letter-spacing: .19em; text-transform: uppercase; }
.eyebrow { margin: 0 0 18px; }
h1 { font-family: "Italianno", "Brush Script MT", cursive; font-size: clamp(4.4rem, 9vw, 7.8rem); font-weight: 400; line-height: 1.18; margin: 0 0 14px; color: var(--accent); overflow-wrap: anywhere; }
.message { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.4rem; line-height: 1.5; white-space: pre-line; margin: 0; }
.divider { width: 1px; height: 43px; background: var(--line); margin: 30px auto 26px; }
.event-kicker { color: var(--muted); margin: 0 0 8px; }
h2 { font-family: "Cormorant Garamond", Georgia, serif; font-size: 2.25rem; font-weight: 400; margin: 0 0 5px; }
.location { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.2rem; margin: 0; }
.event-note { color: var(--muted); font-size: .875rem; line-height: 1.6; margin: 20px 0 0; }
.bottom-ornament { color: var(--accent); font-size: 1.8rem; margin-top: 26px; }
footer { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 13px 24px 38px; color: var(--muted); font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.1rem; font-style: italic; }
.footer-mark { font-style: normal; color: var(--accent); font-size: .7rem; }
@media (min-width: 900px) and (min-height: 900px) { main { padding-top: 65px; } .invitation-content { padding-top: 90px; padding-bottom: 36px; } .divider { margin-top: 40px; margin-bottom: 36px; } footer { padding-top: 27px; } }
@media (max-width: 600px) {
  .page-frame { inset: 10px; min-height: calc(100svh - 20px); }
  .masthead { padding: 30px 30px 0; }
  .monogram { font-size: 1.2rem; }
  .masthead-note { font-size: .75rem; letter-spacing: .08em; max-width: 130px; text-align: right; line-height: 1.6; }
  main { padding: 35px 25px 18px; }
  .invitation-content { padding: 60px 20px 24px; }
  .ornament { margin-bottom: 28px; }
  .eyebrow { font-size: .75rem; letter-spacing: .1em; }
  h1 { font-size: clamp(3.6rem, 13vw, 5.2rem); }
  .message { font-size: 1.2rem; }
  h2 { font-size: 2rem; }
  .divider { height: 32px; margin: 25px auto; }
  footer { padding-bottom: 30px; }
}
@media (prefers-reduced-motion: no-preference) {
  .invitation-content { animation: arrive 900ms ease-out both; }
  @keyframes arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
}