:root { color-scheme: light; --sage: #a0a78e; --olive: #555d35; --ink: #15160f; --paper: #f5f1e6; --beige: #d6c1a2; --beige-deep: #bca583; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--sage); color: var(--ink); font-family: "Times New Roman", Times, serif; }
button, input { font: inherit; }
p, h1, h2 { margin: 0; }
.page-shell { width: min(100%, 600px); min-height: 1200px; margin: 0 auto; padding: 0 0 115px; background: var(--sage) url("assets/floral-frame.png") center / cover no-repeat; text-align: center; }
.hero { padding: 76px 15% 30px; }
h1 { color: var(--olive); font-size: 68px; font-weight: 400; line-height: .98; letter-spacing: -1.8px; margin-bottom: 34px; }
h1 span { white-space: nowrap; font-style: normal; }
.intro { color: #fffdf4; font-size: 23px; line-height: 1.22; }
main { margin: 0 10%; }
.details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.detail-card, .rsvp-card { background: var(--paper); border-radius: 25px; }
.detail-card { min-width: 0; padding: 28px 10px 30px; min-height: 320px; }
.card-label { color: #70735f; font-size: 17px; font-weight: 400; letter-spacing: 1px; }
.day { color: #73785e; font-size: 108px; line-height: .98; font-weight: 400; letter-spacing: -4px; margin-top: 9px; }
.month { font-size: 23px; line-height: 1.2; }
.time { color: #626650; font-size: 20px; line-height: 1.3; margin-top: 22px; }
.info-block p:last-child { font-size: 22px; line-height: 1.22; margin-top: 9px; }
.date-card { display: flex; flex-direction: column; justify-content: center; }
.location-card { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.flower-ornament { width: 68px; margin: 15px auto; }
.flower-ornament svg { display: block; width: 100%; }
.stem, .leaf { fill: none; stroke: var(--beige-deep); stroke-width: 2; stroke-linecap: round; }
.petal { fill: var(--beige); stroke: var(--beige-deep); stroke-width: 1; }
.flower-center { fill: var(--beige-deep); }
.rsvp-card { margin-top: 15px; padding: 27px 20px; }
.rsvp-card h2 { color: var(--olive); font-size: 30px; font-weight: 400; line-height: 1.15; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.rsvp-button { cursor: pointer; border: 0; border-radius: 100px; padding: 11px 5px; min-height: 44px; color: #fffaf0; font-size: 20px; line-height: 1.1; }
.rsvp-button--yes { background: #979e85; }
.rsvp-button--no { background: #b58b87; }
.rsvp-button:hover:not(:disabled) { filter: brightness(.93); }
.rsvp-button:focus-visible { outline: 2px solid var(--olive); outline-offset: 4px; }
.rsvp-button:disabled { cursor: default; }
.form-status { font-size: 16px; line-height: 1.15; margin-top: 10px; color: var(--olive); }
.form-status:empty { display: none; }
.footer-note { margin-top: 28px; color: #fffaf0; font-size: 22px; font-style: italic; line-height: 1.2; }
.footer-note span { display: block; margin-top: 4px; font-size: 36px; }
@media (min-width: 601px) {
  .page-shell {
    width: 100%;
    min-height: max(1200px, 100svh);
    background-size: cover;
  }
  .hero {
    width: 420px;
    margin-inline: auto;
    padding-inline: 0;
  }
  main { width: 480px; margin-inline: auto; }
}
@media (max-width: 600px) {
  .page-shell { min-height: max(200vw, 100vh); min-height: max(200vw, 100dvh); padding-bottom: 19vw; }
  .hero { padding-top: 12.6vw; padding-bottom: 5vw; }
  h1 { font-size: 11.33vw; letter-spacing: -.3vw; margin-bottom: 5.65vw; }
  .intro { font-size: clamp(16px, 3.83vw, 23px); }
  .details-grid { gap: 2.8vw; }
  .detail-card { border-radius: 4.2vw; padding: 4.6vw 1.65vw 5vw; min-height: 53.3vw; }
  .card-label { font-size: clamp(12px, 2.83vw, 17px); }
  .day { font-size: 18vw; letter-spacing: -.66vw; margin-top: 1.5vw; }
  .month { font-size: clamp(16px, 3.83vw, 23px); }
  .time { font-size: clamp(14px, 3.33vw, 20px); margin-top: 3.66vw; }
  .info-block p:last-child { font-size: clamp(15px, 3.66vw, 22px); margin-top: 1.5vw; }
  .flower-ornament { width: 11.3vw; margin: 2.5vw auto; }
  .rsvp-card { border-radius: 4.2vw; margin-top: 2.5vw; padding: 4.5vw 3.33vw; }
  .rsvp-card h2 { font-size: clamp(24px, 5vw, 30px); }
  .choice-grid { gap: 2vw; }
  .rsvp-button { font-size: clamp(15px, 3.5vw, 20px); padding: 1.8vw .8vw; }
  .form-status { font-size: clamp(14px, 3.2vw, 16px); }
  .footer-note { margin-top: 5vw; font-size: clamp(18px, 3.66vw, 22px); }
  .footer-note span { font-size: clamp(28px, 6vw, 36px); }
}