*{box-sizing:border-box}
:root{--bg:#F7EFE7;--terracotta:#A94F32;--navy:#263B4A;--gold:#B9904D}
html,body{margin:0;min-height:100%;background:var(--bg)}
body{font-family:Arial,sans-serif;color:var(--navy)}
.landing{min-height:100svh;display:grid;place-items:center;padding:18px 16px;background:var(--bg)}
.card{width:100%;max-width:430px;display:flex;flex-direction:column;align-items:center;text-align:center}
.monogram{display:block;width:min(92vw,380px);max-height:62svh;height:auto;object-fit:contain;margin:0 auto 12px}
.names{font-family:Georgia,"Times New Roman",serif;font-size:clamp(15px,4vw,22px);letter-spacing:.12em;color:var(--terracotta);line-height:1.3}
.names span{font-style:italic;letter-spacing:0;margin:0 5px}
.date{margin-top:9px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(17px,4vw,25px);color:var(--gold)}
button{margin-top:20px;border:1px solid var(--gold);background:var(--gold);color:var(--navy);padding:13px 22px;font-size:10px;font-weight:600;letter-spacing:.13em;cursor:pointer}
.closing{animation:fadeOut .45s ease forwards}
@keyframes fadeOut{to{opacity:0;transform:scale(.985)}}
.after{min-height:100svh;display:grid;place-items:center;padding:30px;background:var(--navy);color:var(--bg);text-align:center}
@media (max-width:390px){.landing{padding:12px}.monogram{width:88vw;max-height:58svh;margin-bottom:8px}.names{font-size:14px}.date{font-size:18px}button{margin-top:15px;padding:12px 18px}}
@media (min-width:600px){.monogram{width:min(72vw,440px);max-height:68svh}}

.master-wrap{width:100%;max-width:900px;margin:auto;background:var(--bg)}
.master-invitation{display:block;width:100%;height:auto}
.interactive{background:#263B4A;color:#F3EBDD}
.countdown{padding:24px 12px;text-align:center;font:28px "Cormorant Garamond",serif;color:#B9904D}
.actions{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:0}
.actions button{width:100%;min-height:88px;background:#263B4A;color:#B9904D;border:1px solid #526674;padding:10px;font-size:9px;letter-spacing:.08em;cursor:pointer}
.actions .rsvp-action{grid-column:2;grid-row:2}
.actions button:hover{background:#304A5C}
dialog{border:1px solid #B9904D;background:transparent;padding:0;max-width:520px;width:92%}
dialog::backdrop{background:#10161bbb}
.modal{background:#F3EBDD;color:#263B4A;padding:30px;position:relative}
.modal h2{font:500 34px "Cormorant Garamond",serif;color:#A94F32;margin:0 0 10px}
.modal p{line-height:1.6}
.modal button,.modal a{background:#B9904D;color:#263B4A;border:0;padding:13px 18px;font:600 10px Montserrat;letter-spacing:.1em;text-decoration:none;cursor:pointer;margin:6px 5px 0 0}
.modal .x{position:absolute;right:8px;top:8px;background:none;color:#263B4A;font-size:25px;padding:0}
form{display:grid;gap:10px}
input,select,textarea{padding:11px;border:1px solid #9b8b75;background:#fffaf0;font:13px Montserrat}
textarea{min-height:80px}
@media(max-width:600px){.actions{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.actions button{min-height:78px}.actions .rsvp-action{grid-column:2;grid-row:2}}

.rsvp-intro{font-family:"Cormorant Garamond",serif;font-size:18px;line-height:1.45;text-align:center}
form label{font-size:11px;letter-spacing:.1em;font-weight:600}
.attendance{border:0;padding:0;margin:8px 0 0;display:grid;gap:10px}
.attendance legend{font-size:11px;letter-spacing:.1em;font-weight:600;margin-bottom:4px}
.choice{display:flex!important;align-items:center;gap:12px;border:1px solid #B9904D;background:#fffaf0;padding:14px;border-radius:8px;color:#A94F32;cursor:pointer}
.choice input{width:20px;height:20px;margin:0;accent-color:#A94F32}
.choice span{font-size:12px;letter-spacing:.08em}
.deadline{margin:8px 0 4px;padding:16px;background:rgba(185,144,77,.12);text-align:center}
.deadline p{margin:0;font-family:"Cormorant Garamond",serif;font-size:18px;line-height:1.35}
.deadline strong{color:#A94F32}

/* PHASE 4 — STEP 2: MOBILE VISUAL OPTIMIZATION */
html,body{overflow-x:hidden}
.master-wrap{width:100%;max-width:900px;margin:0 auto}
.master-invitation{display:block;width:100%;max-width:100%;height:auto;object-fit:contain}
.interactive{width:100%;background:#263B4A}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:0;width:100%}
.actions button{width:100%;min-height:82px;margin:0;border:1px solid #526674;background:#263B4A;color:#B9904D}
.actions .rsvp-action{grid-column:1 / -1;min-height:72px;background:#B9904D;color:#263B4A;border-color:#B9904D;font-weight:600}
@media(max-width:600px){
  .master-wrap{width:100%}
  .master-invitation{width:100%;height:auto}
  .countdown{padding:22px 8px;font-size:25px;letter-spacing:.01em}
  .actions{grid-template-columns:1fr 1fr}
  .actions button{min-height:74px;padding:12px 8px;font-size:9px}
  .actions .rsvp-action{grid-column:1 / -1;min-height:70px;font-size:10px}
}
@media(max-width:390px){
  .countdown{font-size:21px}
  .actions button{min-height:68px}
  .actions .rsvp-action{min-height:68px}
}

/* PHASE 4 — STEP 3: DESKTOP OPTIMIZATION */
@media(min-width:601px){
  .landing{min-height:100vh;padding:40px 30px}
  .card{max-width:560px}
  .monogram{width:min(70vw,440px);max-height:62vh;margin-bottom:18px}
  .names{font-size:22px}
  .date{font-size:26px}
  .master-wrap{max-width:820px}
  .master-invitation{width:100%;max-width:820px;margin:0 auto}
  .interactive{max-width:820px;margin:0 auto}
  .countdown{padding:26px 12px;font-size:30px}
  .actions button{min-height:82px}
  .actions .rsvp-action{min-height:76px;font-size:10px}
}

@media(min-width:1200px){
  .master-wrap,.interactive{max-width:860px}
  .master-invitation{max-width:860px}
}

/* PHASE 4 — STEP 4: RSVP PRODUCTION HARDENING */
.modal form button[type="submit"]:disabled{opacity:.6;cursor:wait}
#status{min-height:20px;margin-top:10px;text-align:center;font-size:12px;line-height:1.4}

/* PHASE 6 — STEP 2: APPROVED INVITATION CONTENT */
.invitation-opening{
  max-width:820px;
  margin:0 auto 22px;
  text-align:center;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(20px,3vw,32px);
  line-height:1.25;
  letter-spacing:.06em;
  color:#263B4A;
}
.invitation-opening div{margin:2px 0}
@media(max-width:600px){
  .invitation-opening{
    margin:0 auto 14px;
    padding:0 12px;
    font-size:clamp(17px,5vw,24px);
    line-height:1.2;
  }
}

/* Dress code and RSVP are the bottom row of the 2 x 2 action grid. */
.actions .dresscode-action{grid-column:1;grid-row:2}
.actions .rsvp-action{grid-column:2;grid-row:2}
@media(max-width:600px){
  .actions{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
  .actions .dresscode-action{grid-column:1;grid-row:2}
  .actions .rsvp-action{grid-column:2;grid-row:2}
}

/* PHASE 6 — MASTER-BASED WEDDING WEBSITE */
:root{
  --site-ivory:#F3EBDD;
  --site-navy:#263B4A;
  --site-rust:#A65A43;
  --site-gold:#B9904D;
  --site-cream:#FBF6EA;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--site-ivory);
  color:var(--site-navy);
  font-family:Georgia,"Times New Roman",serif;
  overflow-x:hidden;
}
.site{width:100%;background:var(--site-ivory)}
.hero{
  min-height:100svh;
  display:grid;
  place-items:center;
  position:relative;
  background:
    radial-gradient(circle at 18% 12%,rgba(185,144,77,.10),transparent 26%),
    radial-gradient(circle at 84% 86%,rgba(166,90,67,.08),transparent 28%),
    var(--site-ivory);
  text-align:center;
  box-sizing:border-box;
  padding:32px 20px;
}
.hero-inner{
  width:min(92vw,520px);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero-monogram{
  width:min(76vw,340px);
  max-height:55svh;
  object-fit:contain;
  margin-bottom:22px;
}
.eyebrow{
  margin:0;
  color:var(--site-rust);
  font-size:clamp(15px,3.5vw,21px);
  letter-spacing:.16em;
}
.hero-date{
  margin:10px 0 0;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(19px,4.5vw,27px);
  letter-spacing:.18em;
}
.hero-cta{
  margin-top:30px;
  padding:14px 28px;
  border:1px solid var(--site-gold);
  border-radius:999px;
  background:var(--site-gold);
  color:var(--site-cream);
  font-family:Georgia,"Times New Roman",serif;
  font-size:11px;
  letter-spacing:.16em;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(38,59,74,.12);
}
.invitation-section{
  background:var(--site-ivory);
  padding:54px 16px 70px;
}
.section-frame{width:min(100%,1040px);margin:0 auto}
.section-frame.narrow{width:min(100%,860px)}
.section-heading{
  display:flex;
  align-items:center;
  gap:18px;
  justify-content:center;
  margin:0 auto 30px;
  text-align:center;
}
.section-heading p{
  margin:0;
  color:var(--site-navy);
  font-size:clamp(13px,2vw,18px);
  line-height:1.5;
  letter-spacing:.10em;
}
.ornament-line{
  height:1px;
  flex:1;
  max-width:150px;
  background:linear-gradient(to right,transparent,var(--site-gold),transparent);
}
.master-card{
  width:min(100%,760px);
  margin:0 auto;
  background:var(--site-cream);
  box-shadow:0 18px 45px rgba(38,59,74,.12);
}
.master-invitation{
  display:block;
  width:100%;
  height:auto;
  margin:0 auto;
}
.details-section{
  background:var(--site-navy);
  color:var(--site-cream);
  padding:62px 18px;
  text-align:center;
}
.section-kicker{
  margin:0 0 10px;
  color:#D5B77A;
  font-size:11px;
  letter-spacing:.20em;
}
.details-section h2{
  margin:0;
  font-size:clamp(24px,5vw,38px);
  font-weight:normal;
  letter-spacing:.08em;
}
.details-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin:34px auto;
  max-width:560px;
}
.details-grid div{
  padding:8px 20px;
}
.details-grid div+div{border-left:1px solid rgba(213,183,122,.55)}
.details-grid strong{
  display:block;
  color:#D5B77A;
  font-size:clamp(23px,4vw,32px);
  font-weight:normal;
}
.details-grid span{
  display:block;
  margin-top:5px;
  font-size:10px;
  letter-spacing:.18em;
}
.venue{
  margin:0;
  line-height:1.7;
  letter-spacing:.10em;
  font-size:14px;
}
.venue span{font-size:11px;letter-spacing:.14em}
.actions-section{
  background:var(--site-ivory);
  padding:56px 18px 80px;
}
.actions-section .countdown{
  padding:0 0 22px!important;
  font-size:18px!important;
  line-height:1.2;
  text-align:center;
  color:var(--site-navy);
}
.actions-section .actions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  grid-template-rows:1fr 1fr!important;
  max-width:760px;
  margin:0 auto!important;
  gap:10px!important;
}
.actions-section .actions button{
  width:100%!important;
  min-height:72px;
  margin:0!important;
  border:1px solid var(--site-gold);
  border-radius:0;
  background:transparent;
  color:var(--site-navy);
  font-family:Georgia,"Times New Roman",serif;
  font-size:10px;
  letter-spacing:.12em;
  cursor:pointer;
}
.actions-section .actions button:hover{
  background:var(--site-gold);
  color:var(--site-cream);
}
.actions-section .actions .dresscode-action{grid-column:1;grid-row:2}
.actions-section .actions .rsvp-action{grid-column:2;grid-row:2;background:var(--site-navy);color:var(--site-cream)}
@media(max-width:600px){
  .hero{padding:24px 16px}
  .hero-monogram{width:78vw;max-height:52svh}
  .invitation-section{padding:42px 10px 54px}
  .section-heading{gap:8px}
  .section-heading p{font-size:11px}
  .master-card{box-shadow:0 10px 28px rgba(38,59,74,.10)}
  .details-section{padding:48px 16px}
  .details-grid{margin:26px auto}
  .actions-section{padding:44px 12px 64px}
  .actions-section .actions{gap:8px!important}
  .actions-section .actions button{min-height:70px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* MASTER-BASED DESIGN UPDATE */
:root {
  --master-cream: #F3EBDD;
}
body,
.site-hero,
.master-section,
.master-container {
  background: var(--master-cream) !important;
}
/* Monogram panel matches the Master Invitation background exactly. */
.hero-inner,
.hero-monogram-wrap {
  background: var(--master-cream) !important;
}
.hero-monogram {
  display:block;
  width:min(78vw, 320px);
  height:auto;
  aspect-ratio: 1 / 1;
  object-fit:contain;
  background: var(--master-cream) !important;
  mix-blend-mode:multiply;
}
/* Keep the new Master Invitation full site width and preserve its proportions. */
.master-container,
.master-container .master-invitation {
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}
.master-container .master-invitation {
  display:block;
  height:auto;
}

.invitation-intro {
  width:100%;
  background:var(--master-cream);
  padding:34px 24px 28px;
  box-sizing:border-box;
}
.invitation-intro-inner {
  width:min(94vw, 1100px);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(80px,1fr) auto minmax(80px,1fr);
  align-items:center;
  gap:26px;
}
.invitation-intro-text {
  color:#263B4A;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(15px,2.1vw,24px);
  line-height:1.45;
  letter-spacing:.08em;
  text-align:center;
  text-transform:uppercase;
  white-space:nowrap;
}
.intro-rule {
  height:1px;
  background:#D9C9AC;
}
@media(max-width:600px) {
  .invitation-intro { padding:28px 14px 22px; }
  .invitation-intro-inner {
    display:block;
  }
  .invitation-intro-text {
    white-space:normal;
    font-size:15px;
    line-height:1.55;
    letter-spacing:.06em;
  }
  .intro-rule {
    display:block;
    width:72px;
    margin:0 auto 16px;
  }
  .intro-rule:last-child {
    margin:16px auto 0;
  }
  .hero-monogram {
    width:min(72vw,280px);
  }
}

/* Exact Master Invitation cream for monogram background */
.site-hero,
.hero-inner,
.hero-monogram-wrap,
.hero-monogram {
  background-color: #F3EBDD !important;
}

/* NEW MONOGRAM — transparent artwork on existing site background */
.site-hero,
.hero-inner {
  background-color: #F3EBDD !important;
}
.hero-monogram {
  background: transparent !important;
  mix-blend-mode: normal !important;
}