@font-face{font-family:Quicksand;src:url('/fonts/quicksand-latin.woff2') format('woff2');font-weight:300 700;font-display:swap}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/cinzel-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/cinzel-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/cinzel-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

  /* Colour tokens. Ratios measured with scripts/contrast.mjs against --window,
     the arch's cream-pink interior, which sits behind every line of text. */
  :root {
    --ground: #f4dde0;      /* powder-pink paper outside the arch */
    --window: #fdf6f1;      /* arch interior */
    --cream: #fffaf3;       /* button text on --ink, 9.13:1 */
    --ink: #5b3e43;         /* 8.86:1 on --window; 8.37:1 on the warm glow at the top */
    --rose-ink: #8a5560;    /* labels, 5.53:1 on --window */
    --gold-light: #e6cb83;  /* decoration only */
    --gold: #c9a24a;        /* decoration only */
    --line: 1.25px;
    --gut: 12px;            /* arch inset from the screen edge on a phone */
    --aw: calc(100vw - 2 * var(--gut));  /* arch width */
    --leaf-fill: #fbf1dc;
    --olive-fill: #ecd596;
  }
  html { font-size: clamp(15px, 13px + 0.3vw, 17px); -webkit-text-size-adjust: 100%; background: var(--ground); }
  *, *::before, *::after { box-sizing: border-box; }
  body {
    margin: 0;
    min-height: 100vh;
    background: var(--ground);
    color: var(--ink);
    font-family: "Cormorant Garamond", Garamond, "Times New Roman", serif;
    font-variant-numeric: lining-nums; /* old-style figures made 11:30 read as "ıı:3o" */
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* Paper grain on the ground, behind the arch. */
  .grain { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

  .stage {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(var(--gut) + env(safe-area-inset-top)) var(--gut) calc(var(--gut) + 6px + env(safe-area-inset-bottom));
    display: flex;
    justify-content: center;
    overflow: hidden;
  }

  /* ---------- the arch ---------- */
  .arch {
    position: relative;
    width: var(--aw);
    min-height: calc(100svh - 2 * var(--gut) - 6px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1.75rem 2.25rem;
    text-align: center;
  }
  /* outer and inner gold lines: a semicircular head on straight jambs */
  .arch::before, .arch::after {
    content: "";
    position: absolute;
    border: var(--line) solid var(--gold);
    border-radius: 100vw 100vw 0 0;
    pointer-events: none;
  }
  .arch::before {
    inset: 0;
    background:
      radial-gradient(ellipse 70% 38% at 50% 0%, rgba(247, 232, 180, 0.42), rgba(247, 232, 180, 0) 70%),
      var(--window);
    z-index: -1;
  }
  .arch::after { inset: 6px; border-width: 0.75px; border-color: var(--gold-light); }
  /* imposts where the head springs from the jambs, and a sill under the opening */
  .impost { position: absolute; top: calc(var(--aw) / 2); width: 14px; height: 4px; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
  .impost--l { left: -4px; }
  .impost--r { right: -4px; }
  .sill { position: absolute; left: -6px; right: -6px; bottom: -6px; height: 4px; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
  .keystone { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg); background: var(--window); border: 1px solid var(--gold); }

  .lunette {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: calc(var(--aw) * 0.14);
  }
  .dove { display: block; width: min(74%, 260px); height: auto; overflow: visible; transform: translateX(7%); }
  /* free height on tall phones: a little above the dove, more above the details */
  .gap-top { flex: 1 1 0; max-height: 2rem; }
  .gap { flex: 2 1 0; min-height: 1.5rem; max-height: 4.5rem; }
  .dove-wrap { animation: hover 7s ease-in-out infinite alternate; transform-origin: 50% 60%; }
  @keyframes hover { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-4px) rotate(-1deg); } }

  .arch h1 {
    margin: 0.9rem 0 0;
    font-family: "Cinzel", "Trajan Pro", serif;
    font-weight: 400;
    line-height: 1;
  }
  .arch h1 .pre {
    display: block;
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.2em;
    color: var(--rose-ink);
    margin: 0 0 0.6rem 0.2em;
  }
  .arch h1 .main {
    display: block;
    font-size: clamp(2rem, 8.6vw, 3.6rem);
    letter-spacing: 0.06em;
    margin-left: 0.06em;
    color: var(--ink);
  }

  .rule { display: flex; align-items: center; gap: 0.75rem; width: 9.5rem; margin: 1.1rem auto 1rem; color: var(--gold); }
  .rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.7; }
  .rule svg { width: 26px; height: 14px; flex: none; }

  .message {
    margin: 0;
    max-width: 19em;
    font-size: 1.28rem;
    line-height: 1.45;
    font-weight: 500;
    text-wrap: balance;
  }

  /* details: label on the left edge, value on the right edge */
  .details { width: 100%; margin: 0; padding: 0; }
  .details .row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.72rem 0.15rem;
    border-top: 1px solid rgba(201, 162, 74, 0.45);
  }
  .details .row:last-child { border-bottom: 1px solid rgba(201, 162, 74, 0.45); }
  .details dt {
    font-family: "Cinzel", serif;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    color: var(--rose-ink);
    text-align: left;
    flex: none;
  }
  .details dd { margin: 0; font-size: 1.2rem; font-weight: 600; line-height: 1.3; text-align: right; }
  .details dd span { display: inline-block; }

  .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; width: 100%; margin-top: 1.6rem; }
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.4rem 0.6rem;
    font-family: "Cormorant Garamond", serif;
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-align: center;
    line-height: 1.15;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--gold);
    box-shadow: inset 0 0 0 3px var(--window), inset 0 0 0 4px rgba(201, 162, 74, 0.55);
    transition: background-color 0.2s ease;
  }
  .btn--solid { background: var(--ink); color: var(--cream); border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 4px rgba(230, 203, 131, 0.75); }
  .btn:hover { background: rgba(247, 232, 180, 0.35); }
  .btn--solid:hover { background: #4d3338; }
  .btn:focus-visible { outline: 2px solid var(--rose-ink); outline-offset: 3px; }
  @media (pointer: coarse) { .btn { min-height: 52px; } }

  .branch { display: none; }

  /* ---------- narrow phones ---------- */
  @media (max-width: 380px) {
    .btn { font-size: 1.02rem; letter-spacing: 0.02em; padding-inline: 0.3rem; }
  }
  @media (max-width: 599px) and (min-height: 900px) {
    .dove { width: min(76%, 292px); }
    .gap-top { max-height: 2.5rem; }
  }
  @media (max-width: 599px) and (max-height: 760px) {
    .dove { width: min(60%, 220px); }
    .lunette { padding-top: calc(var(--aw) * 0.13); }
    .gap { min-height: 1.1rem; }
  }

  /* ---------- tablet: the arch becomes a framed card on the ground ---------- */
  @media (min-width: 600px) {
    :root { --gut: 0px; --aw: min(31rem, 100vw - 4rem); }
    .stage { padding: 2.5rem 2rem 2.75rem; align-items: flex-start; }
    .arch { min-height: 0; margin: auto 0; padding: 0 2.6rem 2.2rem; }
    .lunette { padding-top: calc(var(--aw) * 0.085); }
    .dove { width: calc(var(--aw) * 0.5); transform: translateX(5%); }
    .arch h1 { margin-top: 0.6rem; }
    .arch h1 .main { font-size: 3.2rem; }
    .rule { margin: 0.95rem auto 0.85rem; }
    .gap-top { display: none; }
    .gap { flex: none; min-height: 0; height: 1.4rem; }
    .details .row { padding: 0.62rem 0.15rem; }
    .actions { margin-top: 1.4rem; }
  }

  /* ---------- desktop: olive sprays flank the window ---------- */
  @media (min-width: 1024px) {
    :root { --aw: clamp(30rem, min(100vh - 22rem, 100vw - 34rem), 38rem); }
    .stage { padding: 1.9rem 2rem 2.4rem; }
    .branch { display: block; position: absolute; bottom: -6px; height: 76%; width: auto; color: var(--gold); opacity: 0.8; }
    .branch--l { right: calc(100% + 1.4rem); }
    .branch--r { left: calc(100% + 1.4rem); transform: scaleX(-1); }
  }

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

.bell-shower{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1;color:#a17a31}.falling-bell{position:absolute;left:var(--x);top:-60px;width:var(--size);height:calc(var(--size)*1.2);opacity:.48;animation:fall var(--duration) linear var(--delay) infinite;will-change:transform}@keyframes fall{0%{transform:translate3d(-12px,-40px,0) rotate(var(--tilt))}50%{transform:translate3d(12px,50svh,0) rotate(calc(var(--tilt)*-1))}100%{transform:translate3d(-8px,calc(100svh + 70px),0) rotate(var(--tilt))}}

/* RSVP is one question at a time; the navigation remains outside the scrolling area. */
body:has(dialog[open]){overflow:hidden}dialog{border:1px solid var(--rule);border-radius:20px;width:min(36rem,calc(100% - 2rem));padding:0;color:var(--ink);background:var(--cream);max-height:calc(100dvh - 2rem);box-shadow:0 24px 100px #3f252e33}dialog::backdrop{background:#4e303d66;backdrop-filter:blur(5px)}.dialog-shell{display:flex;flex-direction:column;height:min(650px,calc(100dvh - 2rem))}.dialog-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e8d9d0}.step-count{display:block;color:var(--rose);font-size:.875rem;margin-bottom:.5rem;letter-spacing:.1em}h2{margin:0;font-size:1.6rem;line-height:1.3;font-weight:600}.icon-button{flex:none;display:grid;place-items:center;width:48px;height:48px;border:1px solid #dfc6c7;border-radius:50%;background:transparent;color:var(--ink);font-size:1.6rem;line-height:1}#rsvp-form,.dialog-form{display:flex;flex:1;min-height:0;flex-direction:column}.dialog-content{padding:1.5rem;overflow-y:auto;flex:1}.dialog-footer{border-top:1px solid #e8d9d0;padding:1rem 1.5rem;display:flex;justify-content:space-between;gap:1rem;background:var(--cream);flex:none}.dialog-footer .btn{min-width:7rem}.choices{display:grid;gap:1rem;margin:1rem 0}.choice{display:flex;align-items:center;gap:1rem;text-align:left;width:100%;min-height:90px;padding:1rem;border:1px solid #cfa5ae;border-radius:12px;background:var(--card);color:var(--ink);font-weight:600}.choice:hover,.choice[aria-pressed=true]{border-color:var(--rose);background:var(--paper)}.choice>span:last-child{margin-left:auto}.choice-icon{font-size:1.8rem;color:var(--rose)}.field{display:flex;flex-direction:column;gap:.75rem;font-weight:600;margin-bottom:1.5rem}.field input,.field textarea{width:100%;min-height:52px;background:#fffdf9;border:1px solid #b9959b;border-radius:8px;padding:.85rem 1rem;color:var(--ink);font-size:16px;line-height:1.5}.field input::placeholder,.field textarea::placeholder{color:#836b6e;opacity:1}.field textarea{resize:vertical;min-height:150px;max-height:260px}.field-note{font-size:.875rem;color:var(--rose);font-weight:500}.character-count{text-align:right;font-size:.875rem;color:var(--rose);margin-top:-.75rem}.form-error{padding:.85rem 1rem;border-radius:8px;border:1px solid #d6a1a9;color:var(--error);background:#fae8eb;font-size:1rem;line-height:1.5}.honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.review{margin:0}.review-row{display:grid;grid-template-columns:1fr auto;gap:.35rem 1rem;padding:.85rem 0;border-bottom:1px solid #e8d9d0}.review-row dt{font-size:max(13px,.8rem);letter-spacing:.09em}.review-row dd{grid-column:1;text-align:left;font-weight:500;white-space:pre-wrap;overflow-wrap:anywhere}.change-button{grid-column:2;grid-row:1/3;background:transparent;border:0;color:var(--rose);text-decoration:underline;min-height:48px;min-width:48px;font-size:.875rem}.success{padding:1.5rem;overflow:auto;text-align:center}.success img{display:block;margin:0 auto .5rem}.success h3{font-weight:500;font-size:2rem;margin:.5rem 0}.success p{line-height:1.7;margin:.5rem auto 1.5rem;max-width:25em}.success .btn{display:flex;margin:.75rem auto;max-width:24rem;width:100%}#rsvp-verification,.verification:not(:empty){margin-top:1rem;min-height:0}

@media(max-width:480px){dialog{width:100%;max-width:100%;max-height:100dvh;height:100dvh;border:0;border-radius:0;margin:0}.dialog-shell{height:100dvh}.dialog-header{padding:calc(1rem + env(safe-area-inset-top)) 1.25rem 1rem}.dialog-content{padding:1.25rem}.dialog-footer{padding:1rem 1.25rem calc(1rem + env(safe-area-inset-bottom))}h2{font-size:1.5rem}}


:root{--rose:var(--rose-ink);--paper:#f7e3e4;--card:#fbf1ef;--rule:#dcc48a;--error:#972f44}
button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.6}[hidden]{display:none!important}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--rose);outline-offset:4px}.svg-defs{position:absolute;pointer-events:none}
.arch{isolation:isolate}.arch::before{z-index:-2}.arch .dove-wrap{animation:dove-arrive 1.8s ease-out both}@keyframes dove-arrive{from{transform:translate(8px,-7px)}to{transform:none}}
.arch h1{margin-top:.8rem;width:100%}.arch h1 .baby-name{display:block;font-size:clamp(2.2rem,9.8vw,3.4rem);line-height:1.12;letter-spacing:.015em;color:var(--ink);font-weight:400}.arch h1 .possessive{font-size:.62em}.arch h1 .event-name{display:block;font-size:1.15rem;letter-spacing:.1em;color:var(--rose-ink);margin-top:.75rem}
.arch .rule{margin:.85rem auto}.arch .gap{min-height:1.5rem;max-height:2.5rem}.arch .actions{margin-top:1.2rem}.arch #open-rsvp{grid-column:1/-1;font-size:1.25rem;letter-spacing:.14em}.arch .lunette{padding-top:calc(var(--aw)*.14)}
@media(min-width:600px){.arch .lunette{padding-top:calc(var(--aw)*.085)}.arch h1 .baby-name{font-size:3.4rem}.arch .dove{width:calc(var(--aw)*.46)}.arch .message{font-size:1.28rem}.arch .gap{height:1.3rem;min-height:1.3rem}}
@media(max-width:380px){.arch{padding-inline:1.4rem}.arch h1 .baby-name{font-size:2.2rem}.arch .message{font-size:1.2rem}}
dialog{font-family:Quicksand,system-ui,sans-serif}dialog .btn{border:1px solid var(--rose);border-radius:999px;box-shadow:none;font:700 .9rem/1.25 Quicksand,system-ui,sans-serif;padding:.85rem 1.25rem;letter-spacing:.04em;gap:.7rem}dialog .btn-primary{background:var(--rose);color:var(--cream)}dialog .btn-calendar{border-color:transparent;text-decoration:underline;text-underline-offset:4px}dialog .btn-primary:hover{background:#75414e}.review-row dt{color:var(--rose);text-transform:uppercase;font-weight:700}.review-row dd{margin:0;font-size:1rem;line-height:1.5}#rsvp-heading:focus,#message-heading:focus{outline:none}
.noscript{text-align:center;padding:1rem;background:var(--cream)}
@media(pointer:coarse){.btn,.icon-button,.change-button{min-height:52px}.icon-button{width:52px}.change-button{min-width:52px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.falling-bell{top:var(--x);transform:rotate(var(--tilt));will-change:auto}}
@media(max-width:599px){.arch{padding-bottom:1.25rem}.arch .gap{min-height:1.2rem}.arch .actions{margin-top:1rem}.arch .rule{margin:.75rem auto}}
@media(min-width:1024px) and (max-height:950px){.stage{padding-top:1rem;padding-bottom:1.25rem}.arch{padding-bottom:1.5rem}.arch .dove{width:200px}.arch h1 .baby-name{font-size:2.75rem}.arch .gap{height:.8rem;min-height:.8rem}.arch .message{font-size:1.22rem}.arch .lunette{padding-top:2rem}}

#send-message{margin-left:auto}