/* ============================================================
   Silver Jubilee Invitation Studio
   Unified warm-blush palette (derived from Page 1 / the cover scene)
   ============================================================ */
:root{
  /* page geometry (2:3, matches original card) */
  --pw: 680px;
  --ph: 1020px;

  /* ---- unified palette : Page-1 warm blush applied to BOTH pages ---- */
  --cream:      #FCF3ED;   /* lightest interior */
  --blush:      #F7E2D7;   /* main page background */
  --blush-deep: #EFCBBB;   /* edges / side bands / arcs */
  --blush-mid:  #F3D6C8;
  --rose:       #E1A48E;   /* warm coral-rose accents / borders */
  --rose-line:  #D98C73;   /* line work */
  --rose-soft:  #ECC2B2;
  --ink:        #7E2230;   /* deep wine — primary text (from Page-1 text) */
  --ink-2:      #9B3A44;   /* secondary wine */
  --ink-soft:   #B25A60;
  --gold:       #C98A3C;   /* marigold accent (beads / dots) */
  --green:      #2F6B3B;   /* foliage */

  /* fonts */
  --f-display: "Playfair Display", Georgia, serif;
  --f-body:    "Cormorant Garamond", Georgia, serif;
  --f-caps:    "Marcellus", Georgia, serif;
  --f-script:  "Great Vibes", cursive;
  --f-om:      "Noto Serif Devanagari", serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:#cdbfb6;
  background-image:
     radial-gradient(120% 80% at 50% -10%, #e7dcd4 0%, #cdbfb6 60%);
  font-family:var(--f-body);
  color:var(--ink);
  min-height:100vh;
}

/* ============================================================
   APP LAYOUT  — editor rail + preview stage
   ============================================================ */
.app{ display:flex; min-height:100vh; }

/* ---- editor rail ---- */
.rail{
  width:380px; flex:0 0 380px;
  background:#fffaf6;
  border-right:1px solid #e7d4c8;
  padding:30px 30px 60px;
  overflow-y:auto;
  height:100vh;
  position:sticky; top:0;
}
.rail__brand{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.rail__mark{
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--ink); color:var(--cream);
  font-family:var(--f-om); font-size:22px; line-height:1; padding-bottom:2px;
}
.rail__title{ font-family:var(--f-display); font-weight:700; font-size:20px; color:var(--ink); margin:0; letter-spacing:.2px; }
.rail__sub{ font-family:var(--f-body); font-size:15px; color:#9a8178; margin:2px 0 0; }
.rail__hr{ border:none; border-top:1px solid #ecd9cd; margin:24px 0; }

.field{ margin-bottom:22px; }
.field__label{
  display:block; font-family:var(--f-caps); text-transform:uppercase;
  letter-spacing:.16em; font-size:12px; color:var(--ink-2); margin-bottom:9px;
}
.field__hint{ font-family:var(--f-body); font-size:13.5px; color:#a8908; color:#a89086; margin-top:7px; line-height:1.35; }

/* segmented salutation */
.seg{ display:flex; flex-wrap:wrap; gap:7px; }
.seg button{
  flex:1 1 auto; min-width:62px;
  font-family:var(--f-body); font-size:16px; font-weight:600;
  padding:9px 6px; border-radius:9px; cursor:pointer;
  border:1.5px solid #e3cdbf; background:#fff; color:var(--ink-2);
  transition:all .15s ease;
}
.seg button:hover{ border-color:var(--rose); }
.seg button[aria-pressed="true"]{
  background:var(--ink); border-color:var(--ink); color:var(--cream);
}

/* text input */
.input{
  width:100%; font-family:var(--f-body); font-size:19px; color:var(--ink);
  padding:11px 14px; border-radius:10px; border:1.5px solid #e3cdbf;
  background:#fff; outline:none; transition:border-color .15s ease;
}
.input:focus{ border-color:var(--rose); }
.input::placeholder{ color:#cbb3a7; }

/* toggle */
.toggle{ display:flex; align-items:center; gap:13px; cursor:pointer; user-select:none; }
.toggle__track{
  width:46px;height:26px;border-radius:20px;background:#e3cdbf;position:relative;
  transition:background .18s ease; flex:0 0 auto;
}
.toggle__track::after{
  content:""; position:absolute; top:3px; left:3px; width:20px;height:20px;border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .18s ease;
}
.toggle input{ display:none; }
.toggle input:checked + .toggle__track{ background:var(--ink); }
.toggle input:checked + .toggle__track::after{ transform:translateX(20px); }
.toggle__label{ font-family:var(--f-body); font-size:17px; color:var(--ink); }

/* preview-as line */
.previewline{
  background:var(--cream); border:1px solid #ecd6c9; border-radius:12px;
  padding:14px 16px; text-align:center; margin-top:4px;
}
.previewline__cap{ font-family:var(--f-caps); text-transform:uppercase; letter-spacing:.14em; font-size:10.5px; color:var(--ink-soft); }
.previewline__name{ font-family:var(--f-display); font-weight:700; font-size:21px; color:var(--ink); margin-top:5px; line-height:1.2; }

/* action buttons */
.actions{ display:flex; flex-direction:column; gap:11px; margin-top:8px; }
.btn{
  font-family:var(--f-caps); text-transform:uppercase; letter-spacing:.12em; font-size:13.5px;
  padding:14px 18px; border-radius:11px; cursor:pointer; border:none; transition:all .15s ease;
  display:flex; align-items:center; justify-content:center; gap:9px;
}
.btn--primary{ background:var(--ink); color:var(--cream); }
.btn--primary:hover{ background:#6a1827; }
.btn--ghost{ background:#fff; color:var(--ink); border:1.5px solid #e3cdbf; }
.btn--ghost:hover{ border-color:var(--rose); }
.btn[disabled]{ opacity:.55; cursor:default; }
.btn svg{ width:17px;height:17px; }

/* ---- preview stage ---- */
.stage{
  flex:1 1 auto; padding:46px 30px 80px; overflow-y:auto; height:100vh;
  display:flex; flex-direction:column; align-items:center; gap:42px;
}
.stage__hd{ text-align:center; color:#6a5a52; font-family:var(--f-body); font-size:16px; margin:0 0 -6px; }
.pagewrap{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.pagewrap__cap{ font-family:var(--f-caps); text-transform:uppercase; letter-spacing:.2em; font-size:12px; color:#7d6a60; }

/* ============================================================
   PAGE (shared frame)
   ============================================================ */
.page{
  width:var(--pw); height:var(--ph);
  position:relative; overflow:hidden;
  background:var(--blush);
  box-shadow:0 24px 60px -18px rgba(80,30,30,.45), 0 4px 14px rgba(80,30,30,.12);
}
/* soft pale corner arcs + vertical edge bands shared by both pages */
.page__bg{ position:absolute; inset:0; z-index:0; }
.page__bg::before{  /* radial sheen */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(150% 70% at 50% 0%, var(--cream) 0%, var(--blush) 46%, var(--blush-deep) 100%);
}
.edgeband{ position:absolute; top:0; bottom:0; width:34px; z-index:2; }
.edgeband--l{ left:0; }
.edgeband--r{ right:0; }
.edgeband::before{ /* darker band */
  content:""; position:absolute; inset:0; background:var(--blush-deep); opacity:.6;
}
.edgeband::after{ /* twin hairlines */
  content:""; position:absolute; top:0; bottom:0; width:0;
  border-left:1.5px solid var(--rose-line); border-right:1px solid var(--rose);
  left:34px;
}
.edgeband--r::after{ left:auto; right:34px; }

/* ============================================================
   PAGE 1  — cover scene (arch + couple + garlands + bouquet + text)
   inner .scene is the native 561x779 layout, uniformly scaled to fit
   ============================================================ */
/* scene fills the page natively (coords = original 561x779 * 1.2121) — no transform, for crisp PDF capture */
.scene{ position:absolute; inset:0; z-index:1; }
.scene img{ position:absolute; display:block; }
.scene .arch{   left:19px;  top:-30px; width:642px; height:1028px; z-index:1; }
.scene .couple{ left:187px; top:248px; width:323px; height:841px; z-index:2; }
/* 3 hanging strands per side — each hangs from a common top point and
   drops to its NATURAL length (height:auto keeps the art's aspect ratio).
   z-index:0 places them behind the arch so the tops tuck under the
   scalloped top border and read as "hung" from it. */
.scene .hang{ z-index:0; top:12px; height:auto; }
.scene .hang--marigold{  width:34px; }
.scene .hang--medallion{ width:46px; }
.scene .hang--beads{     width:22px; }
.scene .hang--l.hang--marigold{  left:62px;  }
.scene .hang--l.hang--medallion{ left:88px; }
.scene .hang--l.hang--beads{     left:116px; }
.scene .hang--r{ transform:scaleX(-1); }
.scene .hang--r.hang--marigold{  right:62px;  }
.scene .hang--r.hang--medallion{ right:88px; }
.scene .hang--r.hang--beads{     right:116px; }
.scene .bouq{ z-index:4; }
.scene .bouq--l{ left:-12px; bottom:0; width:250px; height:264px; }
.scene .bouq--r{ right:-12px; bottom:0; width:196px; height:208px; transform:scaleX(-1); }

.scene__deity{
  position:absolute; left:50%; top:30px; transform:translateX(-50%); z-index:5;
  width:70px; height:auto;
  filter:drop-shadow(0 2px 7px rgba(252,243,237,.95)) drop-shadow(0 0 4px rgba(252,243,237,.9));
}
.scene__text{
  position:absolute; left:46px; right:46px; top:120px; z-index:5;
  text-align:center; color:var(--ink);
}
.scene__invite{ font-family:var(--f-body); font-size:18px; font-style:italic; line-height:1.32; color:var(--ink-2); letter-spacing:.01em; }
.scene__names{ font-family:var(--f-script); color:var(--ink); line-height:.9; margin:14px 0 4px; }
.scene__name{ font-size:52px; display:block; }
.scene__amp{ font-size:46px; display:block; margin:2px 0 0; color:var(--ink-2); }
.scene__date{ font-family:var(--f-display); font-weight:600; font-size:27px; margin-top:14px; letter-spacing:.01em; }
.scene__venue{ font-family:var(--f-body); font-size:16px; line-height:1.3; margin-top:8px; color:var(--ink-2); }

/* ============================================================
   PAGE 2  — the detailed card  (fully recreated, dynamic name)
   ============================================================ */
.card{
  position:absolute; inset:0; z-index:3;
  padding:8px 46px 0;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
.card__inner{ width:100%; display:flex; flex-direction:column; align-items:center; transform-origin:top center; }

/* --- top canopy swag --- */
.swag{ width:100%; margin-top:2px; }
.swag svg{ display:block; width:100%; height:auto; }

/* corner bead strands */
.beadstrand{ position:absolute; top:8px; width:14px; z-index:5; }
.beadstrand--l{ left:14px; }
.beadstrand--r{ right:14px; }

/* generic small diamond accent */
.dia{ color:var(--rose); font-size:11px; vertical-align:middle; }

/* ornamental frame box */
.frame{
  position:relative; width:88%; margin:2px auto 0;
  padding:13px 26px 12px;
}
.frame::before, .frame::after{
  content:""; position:absolute; pointer-events:none;
}
.frame::before{ inset:0; border:1.5px solid var(--rose); border-radius:3px; }
.frame::after{ inset:5px; border:1px solid var(--rose-soft); border-radius:2px; }
.frame__corner{ position:absolute; width:9px;height:9px; border:1.5px solid var(--ink-2); z-index:2; }

.reserved{
  font-family:var(--f-caps); text-transform:uppercase; letter-spacing:.26em;
  font-size:12.5px; color:var(--ink-2); display:flex; align-items:center; justify-content:center; gap:11px; white-space:nowrap;
}
.reserved .flo{ color:var(--rose); font-size:13px; }
.guestname{
  font-family:var(--f-display); font-weight:700; color:var(--ink);
  font-size:29px; line-height:1.1; margin:7px 0 0; letter-spacing:.01em;
  text-wrap:balance;
}
.guestfam{
  font-family:var(--f-display); font-weight:700; color:var(--ink);
  font-size:29px; line-height:1.1; margin-top:0;
}
.frame__rule{ width:120px; height:1px; background:var(--rose); margin:9px auto 8px; position:relative; }
.frame__rule::before{ content:"\2666"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:var(--rose); font-size:9px; background:var(--cream); padding:0 6px; }
.honoured{ font-family:var(--f-body); font-style:italic; font-size:16px; line-height:1.26; color:var(--ink-2); width:100%; }

/* tagline */
.tagline{
  font-family:var(--f-display); font-style:italic; font-weight:500;
  font-size:25px; color:var(--ink); margin:13px 0 0; letter-spacing:.01em; width:100%;
}
.dia-row{ margin:5px 0 0; color:var(--rose); font-size:11px; letter-spacing:.5em; }
.verse{ font-family:var(--f-body); font-style:italic; font-size:16px; line-height:1.28; color:var(--ink-2); margin:8px auto 0; width:96%; max-width:96%; }
.verse--sm{ font-size:15.5px; }

.softrule{ display:flex; align-items:center; justify-content:center; gap:12px; margin:9px 0; width:62%; }
.softrule__l{ height:1px; background:linear-gradient(90deg,transparent,var(--rose)); flex:1; }
.softrule__r{ height:1px; background:linear-gradient(90deg,var(--rose),transparent); flex:1; }
.softrule__d{ color:var(--rose); font-size:10px; }

/* section heading with leaf flourishes */
.sec-h{ display:flex; align-items:center; justify-content:center; gap:14px; margin:13px 0 2px; }
.sec-h__t{ font-family:var(--f-caps); text-transform:uppercase; letter-spacing:.22em; font-size:16.5px; color:var(--ink); white-space:nowrap; border-bottom:1px solid var(--rose); padding-bottom:4px; }
.sec-h__leaf{ width:34px;height:17px; color:var(--ink); }
.sec-h__leaf svg{ display:block;width:100%;height:100%; }

/* event details — 3 columns */
.events{ display:flex; width:100%; margin-top:8px; }
.events__col{ flex:1; padding:0 6px; display:flex; flex-direction:column; align-items:center; }
.events__div{ width:1px; align-self:stretch; background:linear-gradient(180deg,transparent,var(--rose),transparent); position:relative; flex:0 0 1px; margin:6px 0; }
.events__div::before{ content:"\2666"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:var(--rose); font-size:9px; }
.evicon{
  width:43px;height:43px;border-radius:50%; display:grid;place-items:center;
  background:var(--cream); border:1.5px solid var(--rose);
  box-shadow:0 0 0 4px rgba(225,164,142,.18);
}
.evicon svg{ width:21px;height:21px; color:var(--ink); }
.events__lab{ font-family:var(--f-caps); text-transform:uppercase; letter-spacing:.18em; font-size:12px; color:var(--ink-2); margin-top:8px; }
.events__val{ font-family:var(--f-body); font-size:14.5px; line-height:1.24; color:var(--ink); margin-top:4px; }

/* dress code box */
.dress{
  position:relative; width:80%; margin:11px auto 0; padding:10px 18px 11px;
}
.dress::before{ content:""; position:absolute; inset:0; border:1.5px solid var(--rose); border-radius:3px; }
.dress::after{ content:""; position:absolute; inset:4px; border:1px solid var(--rose-soft); border-radius:2px; }
.dress__h{ font-family:var(--f-caps); text-transform:uppercase; letter-spacing:.2em; font-size:13px; color:var(--ink); position:relative; display:inline-block; background:var(--cream); padding:0 12px; margin-top:-20px; white-space:nowrap; }
.dress__row{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:8px; }
.dress__group{ flex:1; }
.dress__title{ font-family:var(--f-display); font-weight:600; font-size:16px; color:var(--ink-2); }
.dots{ display:flex; justify-content:center; gap:7px; margin:6px 0 5px; }
.dot{ width:15px;height:15px;border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.dress__cap{ font-family:var(--f-body); font-style:italic; font-size:13.5px; color:var(--ink); }
.dress__sep{ width:1px; align-self:stretch; background:linear-gradient(180deg,transparent,var(--rose),transparent); position:relative; }
.dress__sep::before{ content:"\2666"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:var(--rose); font-size:9px; }

/* gratitude footer */
.grat-h{ display:flex; align-items:center; justify-content:center; gap:13px; margin-top:3px; }
.grat-h__t{ font-family:var(--f-script); font-size:28px; color:var(--ink); line-height:1; white-space:nowrap; }
.grat-h__v{ width:30px;height:17px;color:var(--ink); }
.grat-h__v svg{display:block;width:100%;height:100%;}
.hosts{ font-family:var(--f-display); font-weight:700; font-size:17.5px; color:var(--ink); margin-top:5px; width:100%; white-space:nowrap; }
.family{ font-family:var(--f-body); font-style:italic; font-size:14.5px; color:var(--ink-2); margin-top:2px; width:100%; white-space:nowrap; }
.together{ font-family:var(--f-body); font-style:italic; font-size:14px; color:var(--ink-soft); margin-top:5px; letter-spacing:.04em; width:100%; }

/* contact line */
.contact{
  display:inline-flex; align-items:center; gap:8px; margin-top:9px; white-space:nowrap;
  font-family:var(--f-caps); text-transform:uppercase; letter-spacing:.12em;
  font-size:12px; color:var(--ink);
  border:1px solid var(--rose); border-radius:30px; padding:6px 16px; background:var(--cream);
}
.contact svg{ width:14px;height:14px;color:var(--ink-2); }
.contact b{ font-family:var(--f-body); font-weight:600; letter-spacing:.03em; font-size:15.5px; text-transform:none; }

/* bottom florals */
.card__sprig{ position:absolute; bottom:30px; width:138px; z-index:4; }
.card__sprig--l{ left:24px; }
.card__sprig--r{ right:24px; transform:scaleX(-1); }
.card__bottomrule{ position:absolute; left:46px; right:46px; bottom:22px; height:1.5px; background:var(--rose); z-index:3; }
.card__bottomrule::before{ content:"\2766"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:var(--rose); background:var(--blush); padding:0 10px; font-size:13px; }

/* ============================================================
   PDF preview modal
   ============================================================ */
.modal{
  position:fixed; inset:0; z-index:50; display:none;
  background:rgba(40,18,18,.6); backdrop-filter:blur(3px);
  align-items:center; justify-content:center; padding:30px;
}
.modal.open{ display:flex; }
.modal__box{ background:#fff; border-radius:16px; width:min(760px,94vw); height:min(92vh,1000px); display:flex; flex-direction:column; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.4); }
.modal__bar{ display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid #eee; }
.modal__title{ font-family:var(--f-display); font-weight:700; font-size:18px; color:var(--ink); }
.modal__actions{ display:flex; gap:10px; }
.modal__x{ background:none;border:none;cursor:pointer;color:#999;font-size:24px;line-height:1; padding:0 4px;}
.modal iframe{ flex:1; border:none; width:100%; background:#525659; }
.modal .btn{ padding:10px 16px; }

/* spinner */
.spin{ width:16px;height:16px;border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:sp .7s linear infinite; }
@keyframes sp{ to{ transform:rotate(360deg); } }

/* responsive: collapse rail on narrow screens */
@media (max-width:980px){
  .app{ flex-direction:column; }
  .rail{ width:100%; flex:none; height:auto; position:static; border-right:none; border-bottom:1px solid #e7d4c8; }
  .stage{ height:auto; }
}