:root {
  color-scheme: dark;
  --white: #fff8f2;
  --soft-white: #f3e6e0;
  --muted: #e3d3cc;
  --pink: #e9a9aa;
  --blush: #f4c2b7;
  --gold: #edcc98;
  --ink: #392c30;
  --border: rgba(253, 226, 210, .50);
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: "Great Vibes", "Brush Script MT", cursive;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-width: 300px; min-height: 100dvh; font-family: var(--font-sans); color: var(--white); background: #242127; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid #f9d4ac; outline-offset: 3px; }
[hidden] { display: none !important; }
.photo-backdrop, .photo-mobile, .photo-scrim { position: fixed; inset: 0; pointer-events: none; }
.photo-backdrop { z-index: 0; background: url("assets/couple.jpg") center 39% / cover no-repeat; filter: blur(2.8px) saturate(.98); transform: scale(1.018); }
.photo-mobile { z-index: 1; display: none; }
.photo-scrim { z-index: 2; background: linear-gradient(110deg, rgba(12, 14, 20, .32), rgba(17, 14, 17, .13) 45%, rgba(15, 10, 14, .35)), linear-gradient(0deg, rgba(15, 14, 19, .55), transparent 28%); }
.site-shell { position: relative; z-index: 3; min-height: 100dvh; min-height: 100svh; display: grid; grid-template-rows: auto minmax(0,1fr); }
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-inline: clamp(18px, 4vw, 65px); position: relative; z-index: 1; }
.site-header { padding-top: 25px; }
.brand { display: flex; align-items: center; gap: 9px; letter-spacing: .17em; text-transform: uppercase; font-size: 11px; font-weight: 700; text-shadow: 0 1px 9px #0008; }
.brand-mark { color: #ffd3bd; font-size: 27px; line-height: .8; font-weight: 400; }
.header-note { font-size: 10px; letter-spacing: .24em; font-weight: 700; color: #f3e4e0; text-shadow: 0 1px 9px #0008; }
.header-star, .tiny-heart { color: #ffc8b5; }


.stage { min-height: 0; display: flex; justify-content: center; align-items: center; padding: 14px 20px 20px; }
.invite-card { width: min(100%, 625px); max-height: calc(100svh - 103px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d2aba7 #0000; background: linear-gradient(145deg, rgba(40, 33, 41, .53), rgba(28, 23, 32, .61)); border: 1px solid var(--border); border-radius: 25px; box-shadow: 0 28px 80px #08050983, inset 0 1px #fff3; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); padding: clamp(25px, 4.3vw, 45px) clamp(19px, 5vw, 49px) clamp(24px, 4vw, 40px); text-align: center; position: relative; }
.invite-card::before { content: ""; position: absolute; pointer-events: none; inset: 8px; border-radius: 18px; border: 1px solid #fff1; }
.card-decoration { font-size: 32px; line-height: 1; color: #f3c2aa; height: 32px; margin-top: -7px; margin-bottom: 10px; }
.eyebrow { text-transform: uppercase; font-size: 10px; letter-spacing: .29em; font-weight: 700; color: var(--soft-white); }
.progress-dots { display: flex; align-items: center; justify-content: center; gap: 11px; margin: 18px 0 24px; }
.progress-dots::before, .progress-dots::after { content:""; height: 1px; width: 43px; background: #eec9b78a; margin: 0 7px; }
.progress-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #eec8bcb0; background: transparent; }
.progress-dot.active { background: #f1bdb1; border-color: #ffdcd1; box-shadow: 0 0 0 3px #f1bdb124; }
.progress-dot.done { background: #f2d4bc; border-color: #f2d4bc; }
.page-title { font-family: var(--font-serif); font-weight: 400; line-height: 1.25; font-size: clamp(27px, 3.8vw, 39px); letter-spacing: -.025em; margin: 0 auto 10px; max-width: 500px; text-wrap: balance; text-shadow: 0 2px 12px #0006; }
.title-intro { display: block; }
.title-script { display: block; color: #ffd2c6; font-family: var(--font-script); font-weight: 400; font-size: clamp(52px, 7.5vw, 79px); line-height: 1.07; letter-spacing: .005em; margin-top: -2px; }
.title-heart { display: block; font-family: var(--font-sans); font-size: 25px; color: #fac7ae; line-height: 1; margin-top: 8px; }
.question-subtitle { font-size: 11px; letter-spacing: .22em; font-weight: 600; text-transform: uppercase; margin: 25px 0 19px; color: #f2e6e1; }
.question-subtitle::before, .question-subtitle::after { content: ""; display: inline-block; width: 21px; height: 1px; background: #ebcbbb94; vertical-align: middle; margin: 0 12px; }
.answers { display: grid; gap: 11px; width: min(100%, 425px); margin: 22px auto 0; }
.answers.first { grid-template-columns: repeat(3, minmax(0,1fr)); width: 100%; gap: 10px; margin-top: 20px; }
.option-button { position: relative; border: 1px solid #fff2e5c4; background: #f2e1d4; color: #38272c; padding: 13px 18px; border-radius: 99px; min-height: 52px; font-family: var(--font-serif); font-size: clamp(14px, 2vw, 18px); line-height: 1.22; box-shadow: 0 6px 17px #120a1240, inset 0 1px 1px #fff9; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.option-button:hover { transform: translateY(-2px); box-shadow: 0 9px 22px #120a126b; }
.option-button:active { transform: scale(.975); }
.option-button:nth-child(3n + 1) { background: linear-gradient(155deg, #f5c4b7, #e9a6a7); }
.option-button:nth-child(3n + 2) { background: linear-gradient(155deg, #fff1e3, #f0d9be); }
.option-button:nth-child(3n + 3) { background: linear-gradient(155deg, #f5dfb6, #dcb87e); }
.answers.first .option-button { padding-inline: 8px; font-size: clamp(13px, 1.5vw, 17px); }
.no-arena { height: 85px; max-width: 100%; position: relative; margin: 10px auto 0; }
.prank-no { background: linear-gradient(135deg, #827878, #5b5459); border: 1px solid #ffecdd98; border-radius: 99px; color: #fff8f2; font-family: var(--font-serif); min-width: 95px; min-height: 38px; font-size: 17px; padding: 7px 13px; box-shadow: 0 6px 18px #05030547; transition: left .25s ease, top .25s ease, transform .25s ease, opacity .2s ease; touch-action: manipulation; }
.no-arena .prank-no { position: absolute; left: calc(50% - 47px); top: 9px; z-index: 2; }
.no-arena .prank-no:hover { background: #777077; }




.question-footnote { color: #e9d8d2; font-size: 12px; line-height: 1.5; margin: 16px auto 0; max-width: 390px; }
.text-link { appearance: none; border: 0; background: none; color: #fff1e9; text-decoration: underline; text-underline-offset: 3px; font-size: 12px; padding: 7px; }
.question-navigation { display: flex; align-items: center; justify-content: center; margin-top: 20px; }
.back-button { background: transparent; border: 0; padding: 10px 15px; color: #f7ded3; letter-spacing: .03em; font-size: 12px; }
.back-button:hover { color: white; text-decoration: underline; text-underline-offset: 3px; }
.form-intro { margin: 5px auto 20px; font-size: 13px; line-height: 1.6; max-width: 440px; color: #f3e0d8; }
.contact-form { text-align: left; display: grid; gap: 11px; width: min(100%, 440px); margin: 0 auto; }
.field-label { font-size: 12px; font-weight: 600; color: #fff0e6; display: block; margin-bottom: 6px; }
.optional { color: #e4c5b9; font-weight: 400; }
.text-input { display: block; width: 100%; border: 1px solid #f3d9c27e; border-radius: 12px; padding: 11px 13px; background: #1814199c; color: #fff9f4; font-size: 14px; min-height: 46px; }
.text-input::placeholder { color: #b9a7a5; }
.text-input:focus { border-color: #ffd8b6; }
textarea.text-input { min-height: 64px; resize: vertical; }
.submit-button { margin-top: 8px; display: block; width: 100%; padding: 14px 22px; min-height: 52px; color: var(--ink); background: linear-gradient(135deg, #f6d7c8, #e8b0a6); border: 1px solid #fff1e4d9; border-radius: 99px; box-shadow: 0 8px 23px #1a11174a; font-family: var(--font-serif); font-size: 17px; }
.submit-button:hover { filter: brightness(1.08); }

.summary-details { margin: 5px 0 1px; padding: 0; border: 1px solid #ffffff45; border-radius: 12px; }
.summary-details > summary { cursor: pointer; font-size: 13px; padding: 11px; text-align: center; }
.summary-items { padding: 1px 14px 12px; font-size: 12px; color: #e7d3ca; line-height: 1.5; }
.summary-item { padding-block: 7px; border-top: 1px solid #ffffff26; }
.summary-item b { display: block; color: #fff4ed; font-weight: 600; }
.success-icon { width: 64px; height: 64px; margin: 12px auto 18px; border: 1px solid #f7d7c5; background: #ffdec51c; border-radius: 50%; display: grid; place-items: center; color: #f9cbb4; font-size: 30px; }
.success-message { line-height: 1.7; color: #f4e1d8; font-size: 15px; max-width: 400px; margin: 14px auto 27px; }

.toast { position: fixed; z-index: 10; bottom: 75px; left: 50%; transform: translate(-50%, 10px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; padding: 10px 15px; border-radius: 14px; font-size: 13px; color: #fff6ed; background: #221b21ef; border: 1px solid #f4d0bd75; box-shadow: 0 6px 30px #0007; text-align: center; max-width: min(90vw, 420px); }
.toast.visible { opacity: 1; transform: translate(-50%,0); }
@media (max-width: 600px) {
  .photo-backdrop { background-position: 53% center; filter: blur(5px) brightness(.7); }
  .photo-mobile { display: block; z-index: -2; height: min(94vw, 420px); top: 0; bottom: auto; background: url("assets/couple.jpg") center 75px / 100% auto no-repeat; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 54%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 54%, transparent 100%); filter: blur(1.2px); }
  .photo-scrim { background: linear-gradient(to bottom, #08080a26, #16131958 48%, #12101688); }
  .site-header { padding-top: 18px; }
  .brand { font-size: 9px; letter-spacing: .09em; }
  .brand-mark { font-size: 21px; }
  .header-note { font-size: 9px; letter-spacing: .10em; }

  .stage { padding: 10px 12px; }
  .invite-card { max-height: calc(100svh - 85px); padding: 25px 20px 22px; border-radius: 20px; background: linear-gradient(145deg, #211b257e, #17131d9e); backdrop-filter: blur(1.4px); -webkit-backdrop-filter: blur(1.4px); }
  .card-decoration { margin-bottom: 5px; height: 26px; font-size: 26px; }
  .progress-dots { margin: 14px 0 21px; }
  .progress-dots::before, .progress-dots::after { width: 26px; margin: 0 2px; }
  .page-title { font-size: clamp(24px, 7vw, 31px); }
  .title-script { font-size: clamp(49px, 12vw, 65px); }
  .question-subtitle { margin: 14px 0; font-size: 9px; letter-spacing: .11em; }
  .question-subtitle::before, .question-subtitle::after { width: 12px; margin: 0 6px; }
  .answers.first { grid-template-columns: 1fr; max-width: 310px; gap: 9px; }
  .option-button { min-height: 45px; font-size: 15px; padding: 10px 14px; }
  .answers.first .option-button { min-height: 45px; font-size: 16px; }
  .no-arena { height: 70px; }

  .prank-no { min-height: 35px; }
  .question-footnote { margin-top: 8px; }
  .question-navigation { margin-top: 6px; }
}
@media (max-height: 630px) { .site-header { padding-top: 9px; } .stage { padding-block: 6px; } .invite-card { max-height: calc(100svh - 65px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } }

/* Submission UX and spam-trap: the trap is inaccessible to normal guests. */
.honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.submit-button:disabled { cursor: wait; opacity: .68; }
.form-status { min-height: 1.1em; margin: 4px 0 0; font-size: 12px; line-height: 1.5; text-align: center; color: #ffe0c8; }
.form-status:empty { display: none; }
.turnstile-slot { display: flex; justify-content: center; min-height: 0; margin: 2px 0; }
.turnstile-slot:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .prank-no { transition: none; } }