:root {
  --paper: #f7f4ec;
  --ink: #28382e;
  --forest: #2e4836;
  --olive: #556648;
  --sage: #c6cdbb;
  --champagne: #e6dcc8;
  --muted: #687369;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #dfe4db; color: var(--ink); font: 400 16px/1.55 'Golos Text', Arial, sans-serif; }
h1, h2, p, figure { margin: 0; }
a { color: inherit; text-underline-offset: 4px; }
button, input, textarea { font: inherit; }
a, button, input, textarea { outline-offset: 3px; }
:focus-visible { outline: 2px solid var(--forest); }
.invitation { width: min(100%, 900px); margin: 0 auto; overflow: hidden; box-shadow: 0 12px 55px #2435291c; background: var(--paper); }
.hero, .date-block, .program, .location, .dress, .rsvp, footer, .photo-stage { padding-left: clamp(28px, 12.2%, 110px); padding-right: clamp(28px, 12.2%, 110px); }
.hero { position: relative; isolation: isolate; overflow: hidden; padding-top: 116px; padding-bottom: 90px; background: var(--paper); text-align: center; }
.hero::before, .hero::after, .dress::after { content: ''; position: absolute; background: url('spruce-branch.png') center/contain no-repeat; pointer-events: none; z-index: -1; }
.hero::before { width: 410px; height: 410px; top: -205px; right: -155px; transform: rotate(14deg); opacity: .88; }
.hero::after { width: 265px; height: 265px; left: -120px; bottom: -105px; transform: rotate(199deg); opacity: .72; }
.recipient { width: fit-content; max-width: 100%; margin: 0 auto 25px; color: var(--forest); font-size: 13px; line-height: 1.4; }
.recipient strong { display: block; margin-top: 4px; font-size: 17px; font-weight: 500; }
.hero h1, .date-block h2, .program h2, .location h2, .dress h2, .rsvp h2 { font-family: 'Forum', Georgia, serif; font-weight: 400; }
.hero h1 { font-size: clamp(67px, 10vw, 100px); line-height: 1.02; letter-spacing: -.035em; }
.hero h1 span { font-size: .62em; font-style: italic; }
.hero-note { margin: 20px auto 45px; max-width: 480px; font-size: 17px; }
.photo-frame { padding: 11px; border: 1px solid #d4d1c5; background: #fffcf5; }
.hero .photo-frame { position: relative; max-width: 560px; margin: 0 auto; border-radius: 280px 280px 16px 16px; }
.photo-space { display: grid; place-items: center; color: #777d70; text-align: center; font-size: 13px; }
.hero-photo { height: 430px; border-radius: 270px 270px 9px 9px; background: #e3e7dc; }
.date-block { position: relative; padding-top: 75px; padding-bottom: 76px; background: var(--champagne); text-align: center; }
.date-block::before, .date-block::after { content: ''; display: block; width: 80px; height: 1px; margin: 0 auto; background: #67725b6e; }
.date-block::before { margin-bottom: 29px; }
.date-block::after { margin-top: 30px; }
.date-block h2 { display: flex; justify-content: center; align-items: center; gap: 22px; line-height: .9; }
.date-number { font-size: 116px; }
.date-words { font-size: 50px; text-align: left; }
.date-block p { margin-top: 24px; color: #586150; font-size: 15px; }
.program { position: relative; margin: 25px 24px 0; padding-top: 73px; padding-bottom: 86px; border-radius: 34px; background: var(--olive); color: #f8f6ed; }
.program h2, .location h2, .dress h2, .rsvp h2 { font-size: 52px; line-height: 1.08; }
.program ol { list-style: none; margin: 37px 0 0; padding: 0; counter-reset: event; }
.program li { counter-increment: event; display: grid; grid-template-columns: 37px 1fr auto; gap: 17px; align-items: baseline; padding: 21px 0; border-bottom: 1px solid #ffffff61; }
.program li:first-child { border-top: 1px solid #ffffff61; }
.program li::before { content: '0' counter(event); color: #d1dac9; font-size: 13px; }
.program li span:first-child { font-size: 18px; font-weight: 500; }
.program li span:last-child { color: #e0e6d9; font-size: 14px; text-align: right; }
.photo-stage { position: relative; padding-top: 74px; padding-bottom: 86px; background: var(--paper); }
.photo-stage .photo-frame { max-width: 590px; margin: 0 auto; transform: rotate(-1.25deg); border-radius: 15px; }
.second-photo { height: 340px; border-radius: 8px; background: #dbe1d5; }
.location { position: relative; padding-top: 81px; padding-bottom: 95px; background: #fffdf8; }
.location::before { content: ''; position: absolute; left: 110px; right: 110px; top: 0; height: 1px; background: #dcd8ca; }
.location h2 { margin-bottom: 31px; }
.location .venue { margin-bottom: 7px; font-size: 25px; font-weight: 500; }
.location-copy > p:not(.venue) { margin-bottom: 22px; }
.location a { color: #3a5c43; font-size: 15px; font-weight: 500; }
.map-frame { height: 355px; margin-top: 39px; overflow: hidden; border: 9px solid #f2f0e7; border-radius: 15px; background: #dce4d8; }
.map-frame iframe { width: 100%; height: 100%; border: 0; }
.dress { position: relative; isolation: isolate; overflow: hidden; padding-top: 76px; padding-bottom: 90px; background: var(--sage); }
.dress::after { width: 360px; height: 360px; right: -115px; bottom: -195px; transform: rotate(-12deg); opacity: .3; }
.dress h2 { margin-bottom: 18px; }
.dress p { max-width: 470px; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 35px; }
.swatches span { display: block; width: 52px; height: 52px; border: 2px solid #f5f3e9; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px #28382e2b; }
.rsvp { padding-top: 81px; padding-bottom: 93px; background: #fffdf8; }
.rsvp h2 { margin-bottom: 29px; }
.form-recipient { padding: 17px 0 20px; margin-bottom: 32px; border-top: 1px solid #d8dbd1; border-bottom: 1px solid #d8dbd1; }
.form-recipient span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 3px; }
.form-recipient strong { font-size: 20px; font-weight: 500; }
.field { margin: 0 0 26px; }
.field label, fieldset legend { display: block; font-size: 14px; font-weight: 500; margin-bottom: 9px; }
.required { color: #a04a3d; }
.field input, .field textarea { display: block; width: 100%; border: 1px solid #c8cec4; border-radius: 7px; background: #fff; padding: 13px 14px; color: var(--ink); resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #899188; }
fieldset { border: 0; margin: 0 0 28px; padding: 0; }
.radio-options { display: flex; gap: 26px; flex-wrap: wrap; }
.radio-options label { display: inline-flex; gap: 9px; align-items: center; cursor: pointer; }
.radio-options input { accent-color: var(--forest); }
.form-hint { max-width: 520px; margin: -1px 0 27px; color: var(--muted); font-size: 13px; }
button[type=submit] { min-height: 49px; border: 0; border-radius: 25px; background: var(--forest); color: #fff; padding: 13px 26px; cursor: pointer; }
button[type=submit]:hover { background: #203a2a; }
button[type=submit]:disabled { opacity: .7; cursor: wait; }
.form-status { min-height: 22px; margin-top: 13px; font-size: 13px; }
.form-status.error { color: #9b3f35; }
.form-status.success { color: #2e6a45; }
.preview-note { color: var(--muted); }
footer { padding-top: 58px; padding-bottom: 67px; background: var(--forest); color: #f8f6ee; text-align: center; }
footer p { font-family: 'Forum', Georgia, serif; font-size: 35px; }
footer span { font-size: 13px; color: #d8e1d3; }
@media (max-width: 700px) {
  .hero, .date-block, .program, .location, .dress, .rsvp, footer, .photo-stage { padding-left: 25px; padding-right: 25px; }
  .hero { padding-top: 102px; padding-bottom: 65px; }
  .hero::before { width: 285px; height: 285px; top: -155px; right: -145px; }
  .hero::after { width: 205px; height: 205px; left: -118px; bottom: -105px; }
  .hero h1 { font-size: clamp(61px, 12vw, 83px); }
  .hero-note { font-size: 16px; margin-bottom: 38px; }
  .hero-photo { height: 350px; }
  .date-block { padding-top: 62px; padding-bottom: 64px; }
  .date-number { font-size: 94px; }
  .date-words { font-size: 41px; }
  .program { margin: 15px 12px 0; padding-top: 59px; padding-bottom: 71px; border-radius: 25px; }
  .program h2, .location h2, .dress h2, .rsvp h2 { font-size: 43px; }
  .program li { grid-template-columns: 28px 1fr auto; gap: 10px; }
  .program li span:first-child { font-size: 16px; }
  .program li span:last-child { max-width: 92px; }
  .photo-stage { padding-top: 63px; padding-bottom: 73px; }
  .second-photo { height: 250px; }
  .location, .dress, .rsvp { padding-top: 64px; padding-bottom: 72px; }
  .location::before { left: 25px; right: 25px; }
  .map-frame { height: 285px; }
  .dress::after { width: 270px; height: 270px; right: -115px; bottom: -145px; }
  .swatches { gap: 7px; }
  .swatches span { width: 47px; height: 47px; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: 57px; }
  .hero-photo { height: 310px; }
  .date-number { font-size: 80px; }
  .date-words { font-size: 35px; }
  .program li { grid-template-columns: 23px 1fr auto; gap: 8px; }
  .swatches span { width: 43px; height: 43px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }