:root{
  /* === FRIDA Autorretrato palette — sourced from /index.html (canonical) === */
  --ink:     #0e0503;          /* copal smoke near-black */
  --ink2:    #1a0808;          /* deep chili-dark */
  --ink-2:   #1a0808;          /* dashed alias */
  --ink-soft:#5a3e30;
  --paper:   #f5ead4;          /* aged huipil ivory */
  --paper-2: #ede0c2;
  --dust:    #d4b896;
  --ghost:   #8a6858;
  --muted:   #8a6858;
  --seam:    rgba(212,139,60,.15);
  --line:    rgba(122,48,24,.16);
  --line-2:  rgba(122,48,24,.3);

  /* Marigold (cempasúchil) */
  --marigold:  #e8890a;
  --marigold2: #f5a623;
  --marigold3: #fcc440;
  --marigold-2:#f5a623;        /* dashed aliases */
  --marigold-3:#fcc440;

  /* Rojo (her lips, rebozo) */
  --rojo:    #8b1a0e;
  --rojo2:   #b52212;
  --rojo3:   #d4321f;
  --rojo-2:  #b52212;
  --rojo-3:  #d4321f;

  /* Terra (Oaxacan walls) */
  --terra:   #7a3018;
  --terra2:  #a04020;
  --terra-2: #a04020;

  /* Teal (Casa Azul) */
  --teal:    #0d4a4a;
  --teal2:   #1b6b6b;
  --teal3:   #2a9090;

  /* Verde (Coyoacán) */
  --verde:   #2d5a27;
  --verde2:  #3d7a35;
  --verde-2: #3d7a35;
  --sage:    #3d7a35;

  /* Legacy aliases — keep code that uses --ember/--wine/--gold/--moss/--chili working */
  --ember:   #e8890a;
  --ember2:  #f5a623;
  --wine:    #8b1a0e;
  --wine2:   #b52212;
  --wine3:   #d4321f;
  --wine-2:  #b52212;
  --gold:    #e8890a;
  --gold2:   #f5ead4;
  --gold3:   #fcc440;
  --gold-2:  #f5a623;
  --gold-3:  #b8780a;
  --gold-4:  #fcc440;
  --moss:    #2d5a27;
  --moss2:   #3d7a35;
  --chili:   #8b1a0e;

  --shadow:    0 1px 2px rgba(20,8,4,.06), 0 8px 30px rgba(20,8,4,.10);
  --shadow-lg: 0 30px 80px rgba(20,8,4,.22);

  /* Typography — same as /index.html */
  --mono:    'Unbounded', monospace;
  --display: 'Playfair Display', Georgia, serif;
  --serif:   'Crimson Pro', Georgia, serif;
  --sans:    'Unbounded', monospace;
  --script:  'Pinyon Script', cursive;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font-family:var(--serif);font-weight:300;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit}
input,textarea,select{font:inherit;color:inherit}
.eyebrow{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);display:inline-block}
.script{font-family:var(--script);color:var(--gold)}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-.01em;line-height:1.05;color:var(--paper)}
h1{font-size:clamp(44px,9vw,108px);font-style:italic;font-weight:300}
h2{font-size:clamp(28px,5vw,56px);font-style:italic;font-weight:400}
h3{font-size:clamp(22px,3vw,32px);font-weight:500}
h4{font-size:18px;font-weight:500}
p{font-size:clamp(14px,1.2vw,17px);color:var(--dust)}

/* ===== Edit bar ===== */
/* ===== Edit bar (refined, elegant) ===== */
.editbar{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(14,5,3,.96);backdrop-filter:saturate(160%) blur(14px);color:var(--paper);padding:12px 24px;display:none;align-items:center;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;box-shadow:0 1px 0 var(--seam);flex-wrap:wrap}
body.edit .editbar{display:flex}
body.edit{padding-top:52px}
.editbar-l{display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:var(--dust)}
.eb-mode{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 10px;background:transparent;color:var(--gold-2);border:1px solid var(--gold-2);border-radius:0;font-weight:300;letter-spacing:.4em;text-transform:uppercase;font-size:9px}
.eb-mode .dot{width:5px;height:5px;border-radius:50%;background:var(--gold-2);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.4}}
.editbar-l > span:not(.eb-mode){font-family:var(--serif);font-style:italic;font-size:13px;font-weight:300;color:var(--dust);letter-spacing:0;text-transform:none}
.eb-btn{padding:8px 14px;border:1px solid transparent;color:var(--dust);background:transparent;border-radius:0;font-family:var(--mono);font-size:9px;letter-spacing:.4em;text-transform:uppercase;font-weight:300;transition:color .2s,border-color .2s;display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.eb-btn:hover{color:var(--gold-2);border-color:var(--seam)}
.eb-btn.upload{color:var(--paper)}
.eb-btn.upload:hover{color:var(--gold-2)}
.eb-btn.primary{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:400}
.eb-btn.primary:hover{background:var(--gold-2);color:var(--ink);border-color:var(--gold-2)}

/* ===== Editable elements (subtle, no aggressive overlay) ===== */
body.edit [data-edit]{outline:1px dashed transparent;outline-offset:6px;cursor:text;transition:outline-color .15s;position:relative}
body.edit [data-edit]:hover{outline-color:var(--gold-2)}
body.edit [data-edit]:focus{outline:1px solid var(--gold-2);outline-offset:6px;background:rgba(232,137,10,.04)}
body.edit [data-img]{cursor:pointer}
body.edit [data-img]::after{content:"📷 Change photo";position:absolute;right:14px;top:14px;transform:none;background:rgba(14,5,3,.85);color:var(--gold-2);padding:7px 14px;border-radius:0;border:1px solid var(--gold-2);font-family:var(--mono);font-size:9px;font-weight:300;letter-spacing:.3em;text-transform:uppercase;opacity:0;transition:opacity .2s;pointer-events:none;z-index:5;backdrop-filter:blur(4px)}
body.edit [data-img]:hover::after{opacity:1}
body.edit [data-img]:hover{outline:1px solid var(--gold-2);outline-offset:-2px}
.edit-only{display:none}
body.edit .edit-only{display:block}

/* ===== Personalized banner (?i= invitee) — small banner shown after opening ===== */
.invitee-banner{background:var(--ink);color:var(--paper);border-bottom:1px solid var(--seam);padding:32px 24px;text-align:center;position:relative;overflow:hidden}
.invitee-banner::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 90% 70% at 50% 50%,rgba(232,137,10,.10) 0%,rgba(139,26,14,.06) 40%,transparent 80%);pointer-events:none}
.invitee-banner-inner{position:relative;max-width:760px;margin:0 auto}
.invitee-banner .eyebrow{color:var(--gold-2);margin-bottom:8px;font-size:10px}
.invitee-banner-script{font-family:var(--script);font-size:clamp(32px,5vw,52px);color:var(--gold-2);line-height:1;margin-bottom:4px}
.invitee-banner p{display:none}
.invitee-banner .stat{margin-top:8px;font-family:var(--sans);font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--dust)}

/* ===== Opening letter card (first thing invitees see) ===== */
.invitee-letter{position:fixed;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;padding:30px;background:var(--ink);overflow:hidden;transition:opacity .9s ease,visibility .9s}
.invitee-letter.opened{opacity:0;visibility:hidden;pointer-events:none}
.invitee-letter::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(232,137,10,.12) 0%,rgba(139,26,14,.07) 40%,transparent 75%);pointer-events:none;animation:letterGlow 5s ease-in-out infinite}
@keyframes letterGlow{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
.letter-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.letter-particle{position:absolute;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle,#fcc440,transparent);box-shadow:0 0 8px rgba(252,196,64,.5);opacity:0;animation:letterPart linear infinite}
@keyframes letterPart{
  0%{transform:translateY(110vh) translateX(0) scale(.4);opacity:0}
  10%{opacity:.7}
  100%{transform:translateY(-10vh) translateX(40px) scale(.6);opacity:0}
}
.letter-card{position:relative;width:100%;max-width:480px;text-align:center;padding:48px clamp(22px,5vw,44px);border:1px solid var(--seam);background:rgba(0,0,0,.25);backdrop-filter:blur(2px);animation:letterIn 1.2s cubic-bezier(.2,.8,.2,1) both;z-index:2}
@keyframes letterIn{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}
.letter-frame{position:absolute;inset:14px;border:1px solid rgba(232,137,10,.18);pointer-events:none}
.letter-corner{position:absolute;width:18px;height:18px;color:var(--gold-2);font-size:14px;display:flex;align-items:center;justify-content:center;line-height:1}
.letter-corner.tl{top:6px;left:6px}.letter-corner.tr{top:6px;right:6px}
.letter-corner.bl{bottom:6px;left:6px}.letter-corner.br{bottom:6px;right:6px}
.letter-eyebrow{font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.45em;text-transform:uppercase;color:var(--gold-2);line-height:1.6}
.letter-amp{font-family:var(--display);font-style:italic;font-size:14px;color:var(--gold-2);text-transform:none;letter-spacing:.05em;margin:0 .15em;font-weight:400}
.letter-to{font-family:var(--display);font-style:italic;font-size:15px;color:var(--dust);margin:30px 0 6px;letter-spacing:.02em;font-weight:300}
.letter-name{font-family:var(--script);font-size:clamp(46px,8vw,76px);line-height:.95;background:linear-gradient(120deg,#fcc440 0%,#f5a623 35%,#e8890a 60%,#fcc440 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:letterShimmer 4s ease-in-out infinite;text-shadow:0 0 50px rgba(232,137,10,.3);filter:drop-shadow(0 4px 30px rgba(232,137,10,.18));margin-bottom:6px}
@keyframes letterShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.letter-rule{display:flex;align-items:center;gap:18px;justify-content:center;margin:28px auto;color:rgba(232,137,10,.4);max-width:280px}
.letter-rule .l{flex:1;height:1px;background:currentColor}
.letter-rule .o{font-size:18px;color:var(--gold-2)}
.letter-from{font-family:var(--display);font-style:italic;font-size:15px;color:var(--paper);font-weight:300;margin-bottom:36px}
.letter-from strong{font-style:normal;color:var(--gold-2);font-weight:500}
.letter-btn{padding:18px 36px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.4em;text-transform:uppercase;cursor:pointer;background:var(--gold);color:var(--ink);border:none;transition:all .25s;box-shadow:0 8px 30px rgba(232,137,10,.25)}
.letter-btn:hover{background:var(--gold-2);transform:translateY(-2px);box-shadow:0 12px 40px rgba(232,137,10,.4)}
.letter-hint{margin-top:18px;font-family:var(--sans);font-size:10px;letter-spacing:.35em;text-transform:uppercase;color:rgba(212,184,150,.5)}

body.invitee-letter-active{overflow:hidden}
body.invitee-letter-active #app,body.invitee-letter-active .share-fab,body.invitee-letter-active .login-fab{display:none}

/* ===== Hero ===== */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 24px;overflow:hidden;color:#faf6ee}
.hero-bg{position:absolute;inset:0;z-index:0;background:linear-gradient(135deg,#2a1f18 0%,#1a1410 60%,#0a0604 100%)}
.hero-bg.has-img{background-size:cover;background-position:center}
/* Two-layer overlay: a subtle full-image darken + a strong radial vignette centered behind the text */
.hero-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 55%,rgba(10,6,4,.35) 0%,rgba(10,6,4,.18) 55%,rgba(10,6,4,.08) 85%,transparent 100%),linear-gradient(180deg,rgba(10,6,4,.30) 0%,rgba(10,6,4,.05) 35%,rgba(10,6,4,.45) 100%)}
.hero-inner{position:relative;z-index:1;max-width:1100px;animation:rise 1.4s cubic-bezier(.2,.7,.2,1) both}
.hero-inner > * + *{margin-top:14px}
.hero .eyebrow{color:#fff;letter-spacing:.55em;font-size:12px;text-shadow:0 1px 2px rgba(0,0,0,.6),0 2px 12px rgba(0,0,0,.4)}
.hero-script{font-family:var(--script);font-size:clamp(58px,12vw,150px);color:#fff;line-height:.95;text-shadow:0 2px 6px rgba(0,0,0,.5),0 4px 30px rgba(0,0,0,.55),0 8px 50px rgba(0,0,0,.4);font-weight:400}
.hero-and{display:inline-block;font-size:.85em;color:var(--gold-2);transform:translateY(-.05em);margin:0 .05em;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.hero-sub{font-family:var(--serif);font-style:italic;font-size:clamp(17px,2vw,24px);font-weight:300;letter-spacing:.02em;color:#fff;margin-top:18px;text-shadow:0 1px 3px rgba(0,0,0,.6),0 2px 12px rgba(0,0,0,.4)}
.hero-meta{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:22px;font-family:var(--sans);font-size:10px;letter-spacing:.45em;text-transform:uppercase;color:#fff;font-weight:500;flex-wrap:wrap;text-shadow:0 1px 2px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.5)}
.hero-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--gold-2)}
.hero-rule{display:flex;align-items:center;gap:18px;justify-content:center;margin:30px auto 0;max-width:300px;color:rgba(250,246,238,.4)}
.hero-rule .l{flex:1;height:1px;background:currentColor}
.hero-rule .o{font-size:14px}
.hero-scroll{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9px;letter-spacing:.5em;text-transform:uppercase;color:rgba(250,246,238,.6);z-index:1;animation:scrollPulse 2.5s ease-in-out infinite;text-shadow:0 1px 4px rgba(0,0,0,.5)}
@keyframes scrollPulse{0%,100%{opacity:.4;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,5px)}}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

/* ===== Countdown ===== */
.count{padding:80px 24px 100px;background:var(--ink-2);text-align:center;border-top:1px solid var(--seam);border-bottom:1px solid var(--seam)}
.count-grid{display:flex;justify-content:center;gap:clamp(20px,5vw,60px);margin-top:36px;flex-wrap:wrap}
.count-cell{min-width:90px}
.count-num{font-family:var(--display);font-style:italic;font-size:clamp(42px,7vw,84px);font-weight:300;color:var(--marigold-2);line-height:1;letter-spacing:-.02em}
.count-label{font-family:var(--sans);font-size:10px;letter-spacing:.5em;text-transform:uppercase;color:var(--muted);margin-top:14px;font-weight:500}

/* ===== Section base ===== */
.section{padding:120px 24px;position:relative}
.section-narrow{max-width:780px;margin:0 auto;text-align:center}
.section-wide{max-width:1280px;margin:0 auto}
.section + .section{border-top:1px solid var(--seam)}
.section-head{text-align:center;margin-bottom:64px}
.section-head .eyebrow{margin-bottom:18px}
.section-head h2{margin-bottom:18px;color:var(--paper)}
.section-head .lead{max-width:600px;margin:0 auto;color:var(--dust);font-style:italic}

/* ===== Story / Schedule / Venue / Gallery / RSVP / Wall ===== */
.story{background:var(--ink-2);border-top:1px solid var(--seam)}
.story-quote{font-family:var(--display);font-style:italic;font-size:clamp(24px,3vw,32px);font-weight:300;line-height:1.5;color:var(--paper);margin:30px auto 0;max-width:680px}
.story-sig{font-family:var(--script);font-size:42px;color:var(--gold);margin-top:32px}

.sched-wrap{max-width:780px;margin:0 auto;position:relative}
.sched-wrap::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line);transform:translateX(-50%)}
@media(max-width:700px){.sched-wrap::before{left:30px}}
.sched-item{display:grid;grid-template-columns:1fr 80px 1fr;gap:0;align-items:center;margin-bottom:50px;position:relative}
@media(max-width:700px){.sched-item{grid-template-columns:60px 1fr;gap:14px}}
.sched-item .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);justify-self:center;box-shadow:0 0 12px rgba(232,137,10,.5)}
.sched-time{font-family:var(--serif);font-style:italic;font-size:36px;color:var(--ink);font-weight:400;text-align:right;padding-right:14px}
.sched-time small{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--muted);font-style:normal;margin-top:4px}
.sched-content{padding-left:14px}
.sched-content h4{margin-bottom:6px;font-style:italic;font-weight:500;color:var(--paper)}
.sched-content p{font-size:15px;color:var(--dust)}
.sched-content .loc{font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-top:8px;font-weight:500}
.sched-map{margin-top:14px;border:1px solid var(--seam);background:rgba(232,137,10,.05);overflow:hidden;position:relative}
.sched-map iframe{width:100%;height:180px;border:0;display:block}
.sched-dir{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:10px 16px;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;text-decoration:none;transition:all .2s;border:1px solid var(--ink)}
.sched-dir:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
.sched-addr{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--ink-soft);margin-top:8px}
.sched-item:nth-child(even) .sched-map,.sched-item:nth-child(even) .sched-dir,.sched-item:nth-child(even) .sched-addr{margin-left:auto}
@media(max-width:700px){.sched-item:nth-child(even) .sched-map,.sched-item:nth-child(even) .sched-dir,.sched-item:nth-child(even) .sched-addr{margin-left:0}}
.sched-item:nth-child(even){direction:rtl}
.sched-item:nth-child(even) > *{direction:ltr}
.sched-item:nth-child(even) .sched-time{text-align:left;padding-right:0;padding-left:14px}
.sched-item:nth-child(even) .sched-content{padding-left:0;padding-right:14px;text-align:right}
@media(max-width:700px){
  .sched-item,.sched-item:nth-child(even){direction:ltr;grid-template-columns:60px 1fr}
  .sched-item .dot{justify-self:start;margin-left:23px}
  .sched-time,.sched-item:nth-child(even) .sched-time{text-align:left;padding:0;font-size:24px;grid-column:2}
  .sched-content,.sched-item:nth-child(even) .sched-content{padding:0;text-align:left;grid-column:2}
}
.sched-edit-row{display:flex;gap:8px;justify-content:center;margin-top:20px}

.venue{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;max-width:1180px;margin:0 auto}
@media(max-width:880px){.venue{grid-template-columns:1fr;gap:48px}}
.venue-img{aspect-ratio:4/5;background:linear-gradient(135deg,var(--paper-2),var(--line));overflow:hidden;position:relative}
.venue-img .img-fill{position:absolute;inset:0;background-size:cover;background-position:center}
.venue-text h2{margin-bottom:18px}
.venue-addr{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.venue-addr p{font-style:italic;color:var(--ink-soft);font-size:18px;line-height:1.6}
.venue-cta{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-family:var(--sans);font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);font-weight:600;padding:14px 24px;border:1px solid var(--gold);text-decoration:none;transition:all .2s}
.venue-cta:hover{background:var(--gold);color:#fff}

.gallery{background:var(--ink-2);border-top:1px solid var(--seam)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:1280px;margin:0 auto}
@media(max-width:880px){.gallery-grid{grid-template-columns:repeat(2,1fr);gap:6px}}
.g-item{aspect-ratio:1;background:var(--line);overflow:hidden;position:relative;cursor:pointer;transition:transform .4s ease,filter .4s ease}
.g-item:nth-child(7n+1){aspect-ratio:1/1.4}
.g-item:nth-child(5n+3){aspect-ratio:1/1.4}
.g-item .img-fill{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1s ease}
.g-item:hover .img-fill{transform:scale(1.05)}
.g-add{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:transparent;border:2px dashed var(--seam);color:var(--dust);font-family:var(--sans);font-size:11px;letter-spacing:.3em;text-transform:uppercase;cursor:pointer;transition:all .2s}
.g-add:hover{border-color:var(--gold);color:var(--gold);background:rgba(184,146,79,.04)}
.g-add .plus{font-size:36px;font-weight:300}
.g-remove{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;background:rgba(26,20,16,.85);color:#fff;display:none;align-items:center;justify-content:center;font-size:16px;z-index:3}
body.edit .g-item .g-remove{display:flex}
body.edit .g-item:hover{outline:2px solid var(--gold);outline-offset:-2px}

.lightbox{position:fixed;inset:0;z-index:200;background:rgba(10,6,4,.96);display:none;align-items:center;justify-content:center;padding:30px}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:90vh;box-shadow:0 30px 100px rgba(0,0,0,.6)}
.lightbox-close{position:absolute;top:24px;right:24px;width:42px;height:42px;background:rgba(255,255,255,.1);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;background:rgba(255,255,255,.08);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;transition:background .2s}
.lightbox-nav:hover{background:rgba(255,255,255,.2)}
.lightbox-nav.prev{left:24px}
.lightbox-nav.next{right:24px}

.rsvp-wrap{max-width:520px;margin:0 auto}
.rsvp-card{background:transparent;color:var(--paper);border:1px solid var(--seam);padding:48px clamp(28px,5vw,56px);box-shadow:var(--shadow)}
.rsvp-card h3{font-family:var(--serif);font-style:italic;font-size:34px;font-weight:400;color:var(--ink);margin-bottom:8px;text-align:center}
.rsvp-card .sub{font-style:italic;color:var(--ink-soft);text-align:center;margin-bottom:28px;font-size:16px}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;padding:14px 16px;background:transparent;border:none;border-bottom:1px solid var(--seam);outline:none;font-size:18px;font-family:var(--serif);color:var(--paper);transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold)}
.field input::placeholder,.field textarea::placeholder{color:var(--ghost)}
.field textarea{min-height:90px;resize:vertical;border:1px solid var(--seam);padding:14px 16px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.row2{grid-template-columns:1fr;gap:0}}
.rsvp-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.pick-btn{padding:18px 14px;border:1px solid var(--seam);background:transparent;font-family:var(--display);font-style:italic;font-size:18px;color:var(--dust);cursor:pointer;transition:all .25s;text-align:center}
.pick-btn:hover{border-color:var(--gold)}
.pick-btn.sel{background:var(--ink-2);color:var(--gold);border-color:var(--gold)}
.pick-btn.sel.yes{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px 32px;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.35em;text-transform:uppercase;cursor:pointer;transition:all .2s;border:1px solid var(--ink)}
.btn:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.btn-block{width:100%;padding:18px}
.btn-ghost{background:transparent;color:var(--gold-2);border-color:var(--gold-2)}
.btn-ghost:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn-gold{background:var(--gold);border-color:var(--gold);color:#fff}
.btn-gold:hover{background:var(--gold-3);border-color:var(--gold-3)}
.btn-sm{padding:10px 18px;font-size:10px}
.btn-danger{background:var(--wine);border-color:var(--wine);color:#fff}
.rsvp-sent{text-align:center;padding:30px 0}
.rsvp-sent .check{width:64px;height:64px;border-radius:50%;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 18px}

.wall{background:var(--ink-2);border-top:1px solid var(--seam)}
.wall-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;max-width:1180px;margin:40px auto 0}
.wall-card{background:transparent;color:var(--paper);border:1px solid var(--seam);padding:28px 26px;box-shadow:var(--shadow);position:relative;transform:rotate(-.4deg)}
.wall-card:nth-child(2n){transform:rotate(.5deg)}
.wall-card:nth-child(3n){transform:rotate(-.2deg)}
.wall-card .text{font-family:var(--display);font-style:italic;font-size:18px;line-height:1.5;color:var(--paper)}
.wall-card .author{font-family:var(--script);font-size:24px;color:var(--gold);margin-top:14px}
.wall-card .time{font-family:var(--sans);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.wall-form{max-width:520px;margin:50px auto 0;background:transparent;border:1px solid var(--seam);color:var(--paper);padding:32px;box-shadow:var(--shadow)}

/* ===== Footer ===== */
.footer{background:var(--ink);color:var(--paper);text-align:center;padding:100px 24px 40px;position:relative}
.footer .script{font-family:var(--script);font-size:96px;color:var(--gold-2);line-height:1;margin-bottom:14px}
.footer p{color:rgba(250,246,238,.5);font-family:var(--sans);font-size:11px;letter-spacing:.4em;text-transform:uppercase}
.footer .heart{color:var(--gold-2);margin:0 4px}

/* ===== Invitee admin ===== */
.invitees-section{background:var(--ink-2);padding:80px 24px;border-top:1px solid var(--seam)}
.invitees-wrap{max-width:1180px;margin:0 auto}
.invitees-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-bottom:30px}
.invitees-head h2{font-style:italic;margin-top:6px}
.invitee-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
@media(max-width:760px){.invitee-stats{grid-template-columns:repeat(2,1fr)}}
.istat{background:transparent;color:var(--paper);border:1px solid var(--line);border-left:3px solid var(--gold);padding:18px 22px}
.istat-label{font-family:var(--sans);font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--muted);font-weight:500}
.istat-val{font-family:var(--serif);font-style:italic;font-size:34px;font-weight:400;color:var(--ink);margin-top:6px;line-height:1}
.invitees-toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap}
.invitees-search{flex:1;min-width:240px;padding:12px 16px;background:transparent;border:1px solid var(--seam);outline:none;font-family:var(--serif);font-size:16px;color:var(--paper)}
.invitees-search:focus{border-color:var(--gold)}
.invitee-table{background:transparent;color:var(--paper);border:1px solid var(--line)}
.inv-row{display:grid;grid-template-columns:28px 38px 2fr 1.4fr 1fr auto;gap:14px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line)}
.inv-row:last-child{border-bottom:none}
.inv-row.head{background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:9px;letter-spacing:.35em;text-transform:uppercase;font-weight:500;padding:14px 20px}
.inv-row.sel{background:rgba(184,146,79,.08)}
.inv-check{width:18px;height:18px;cursor:pointer;accent-color:var(--gold)}
.inv-avatar{width:38px;height:38px;background:linear-gradient(135deg,var(--gold-2),var(--gold-3));color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:600;font-size:14px;border-radius:50%}
.inv-name{font-family:var(--serif);font-size:18px;color:var(--ink)}
.inv-meta{font-family:var(--sans);font-size:11px;color:var(--muted);margin-top:2px}
.inv-status{font-family:var(--sans);font-size:9px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;padding:5px 10px;display:inline-block}
.inv-status.pending{color:var(--muted);background:rgba(153,136,120,.1)}
.inv-status.attending{color:var(--gold-3);background:rgba(184,146,79,.15)}
.inv-status.declined{color:var(--wine);background:rgba(107,26,20,.1)}
.inv-actions{display:flex;gap:6px}
.inv-icon-btn{width:36px;height:36px;border:1px solid var(--seam);background:transparent;color:var(--dust);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:all .2s}
.inv-icon-btn:hover{border-color:var(--gold);color:var(--gold)}
@media(max-width:760px){
  .inv-row,.inv-row.head{grid-template-columns:24px 38px 1fr auto;gap:10px;padding:12px 14px}
  .inv-row > .hide-m,.inv-row.head > .hide-m{display:none}
}
.bulk-bar{display:none;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;background:var(--ink);color:var(--paper);margin-bottom:0;flex-wrap:wrap}
.bulk-bar.show{display:flex}
.bulk-bar .count{font-family:var(--sans);font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--gold-2)}
.bulk-bar .actions{display:flex;gap:8px;flex-wrap:wrap}
.bulk-btn{padding:8px 14px;background:transparent;border:1px solid var(--gold-2);color:var(--gold-2);font-family:var(--sans);font-size:10px;letter-spacing:.25em;text-transform:uppercase;font-weight:600;cursor:pointer;transition:all .2s}
.bulk-btn:hover{background:var(--gold);color:#1a1410;border-color:var(--gold)}
.mass-list{max-height:50vh;overflow-y:auto;border:1px solid var(--seam);background:transparent;color:var(--paper);margin-top:14px}
.mass-row{display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px}
.mass-row:last-child{border-bottom:none}
.mass-row .nm{font-family:var(--serif);font-size:16px;color:var(--ink)}
.mass-row .ph{font-family:'SF Mono',Menlo,monospace;font-size:12px;color:var(--muted)}
.mass-row a{padding:6px 10px;border:1px solid var(--line-2);font-family:var(--sans);font-size:9px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;text-decoration:none;color:var(--ink-soft);transition:all .2s}
.mass-row a:hover{border-color:var(--gold);color:var(--gold)}
.mass-row a.wa{background:#25D366;color:#fff;border-color:#25D366}
.mass-row a.wa:hover{background:#1EAA52;color:#fff}
.mass-row.sent a.wa{opacity:.5}
.mass-template{margin-bottom:14px;padding:14px;background:rgba(232,137,10,.05);border:1px solid var(--seam);color:var(--paper)}
.mass-template label{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-weight:600}
.mass-template textarea{width:100%;border:1px solid var(--seam);padding:10px;font-family:var(--serif);font-size:14px;background:transparent;color:var(--paper);min-height:80px;resize:vertical}
.mass-template .hint{font-size:12px;color:var(--ink-soft);font-style:italic;margin-top:6px}

/* ===== Setup landing page ===== */
.landing{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:60px 24px;background:linear-gradient(135deg,#2a1f18 0%,#1a1410 70%,#0a0604 100%);color:var(--paper);position:relative;overflow:hidden}
.landing::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(184,146,79,.18),transparent 50%),radial-gradient(circle at 80% 70%,rgba(107,26,20,.3),transparent 55%);pointer-events:none}
.landing-inner{position:relative;max-width:600px;width:100%;text-align:center;z-index:1}
.landing .script{font-family:var(--script);font-size:clamp(72px,12vw,140px);color:var(--gold-2);line-height:1;margin-bottom:14px;text-shadow:0 4px 40px rgba(0,0,0,.4)}
.landing h1{font-size:clamp(38px,6vw,64px);font-style:italic;font-weight:300;color:var(--paper);margin-bottom:18px}
.landing p{color:rgba(250,246,238,.78);font-style:italic;font-size:20px;margin-bottom:36px}
.landing-rule{display:flex;align-items:center;gap:18px;justify-content:center;color:rgba(184,146,79,.5);margin:30px auto 36px;max-width:300px}
.landing-rule .l{flex:1;height:1px;background:currentColor}
.landing .features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:50px 0;text-align:left}
@media(max-width:600px){.landing .features{grid-template-columns:1fr}}
.landing .feat{padding:20px;background:rgba(250,246,238,.04);border:1px solid rgba(250,246,238,.1)}
.landing .feat-icon{font-size:24px;margin-bottom:8px;color:var(--gold-2)}
.landing .feat-title{font-family:var(--serif);font-style:italic;font-size:20px;font-weight:500;color:var(--paper);margin-bottom:4px}
.landing .feat-desc{font-family:var(--sans);font-size:13px;color:rgba(250,246,238,.6);line-height:1.5}
.landing .returning{margin-top:40px;padding-top:30px;border-top:1px solid rgba(250,246,238,.15);font-family:var(--sans);font-size:13px;color:rgba(250,246,238,.6);letter-spacing:.04em}
.landing .returning a{color:var(--gold-2);text-decoration:none;font-weight:500;letter-spacing:.04em;border-bottom:1px solid var(--gold-2)}

/* ===== Setup wizard ===== */
.setup-wrap{position:fixed;inset:0;background:linear-gradient(135deg,#1a0808 0%,#0e0503 60%,#000 100%);color:var(--paper);z-index:300;display:none;align-items:center;justify-content:center;padding:30px;overflow-y:auto}
.setup-wrap.open{display:flex}
.setup{max-width:560px;width:100%;text-align:center;padding:40px 0;position:relative}
.setup .script{font-family:var(--script);font-size:72px;color:var(--gold);margin-bottom:8px}
.setup h2{margin-bottom:12px;font-style:italic}
.setup-lead{margin-bottom:32px;color:var(--ink-soft);font-style:italic;font-size:18px}
.setup-step{display:none}
.setup-step.active{display:block;animation:rise .4s ease both}
.setup .field{text-align:left}
.setup-progress{display:flex;justify-content:center;gap:8px;margin-bottom:30px}
.setup-progress span{width:30px;height:3px;background:var(--line)}
.setup-progress span.on{background:var(--gold)}
.setup-share{background:rgba(232,137,10,.06);padding:20px;margin-top:18px;border:1px solid var(--seam);color:var(--paper);text-align:left;border-radius:0}
.setup-share-url{font-family:'SF Mono',Menlo,monospace;font-size:13px;color:var(--gold-3);word-break:break-all;margin-top:6px;line-height:1.5}
.setup-actions{display:flex;gap:10px;justify-content:space-between;margin-top:24px;flex-wrap:wrap}
.setup-back{background:transparent;color:var(--ink-soft);border:1px solid var(--line);padding:14px 20px;font-family:var(--sans);font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;cursor:pointer}

/* ===== Modals ===== */
.modal{position:fixed;inset:0;z-index:250;background:rgba(26,20,16,.5);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:24px}
.modal.open{display:flex}
.modal-card{background:var(--paper);border:1px solid var(--line);padding:36px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg)}
.modal-card h3{margin-bottom:6px;font-style:italic}
.modal-card .sub{color:var(--ink-soft);margin-bottom:20px;font-style:italic;font-size:15px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}

/* ===== Share modal ===== */
.share-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
@media(max-width:480px){.share-options{grid-template-columns:1fr}}
.share-btn{padding:14px;border:1px solid var(--seam);background:transparent;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;cursor:pointer;text-align:center;transition:all .2s;text-decoration:none;color:var(--paper);display:flex;align-items:center;justify-content:center;gap:8px}
.share-btn:hover{border-color:var(--gold);color:var(--gold)}
.share-btn.wa{background:#25D366;color:#fff;border-color:#25D366}
.share-btn.wa:hover{background:#1EAA52;color:#fff}
.share-link{background:rgba(232,137,10,.06);padding:14px;font-family:'SF Mono',Menlo,monospace;font-size:12px;color:var(--gold-3);word-break:break-all;margin-top:10px;border:1px solid var(--line)}

/* ===== Toast ===== */
.toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(120%);background:var(--ink);color:var(--paper);padding:12px 24px;font-family:var(--sans);font-size:11px;letter-spacing:.3em;text-transform:uppercase;z-index:400;transition:transform .3s ease;font-weight:500}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ===== Reveal on scroll ===== */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}

/* ===== Floating share FAB ===== */
.share-fab{position:fixed;bottom:20px;right:20px;z-index:80;width:42px;height:42px;border-radius:50%;background:rgba(232,137,10,.15);color:var(--gold-2);border:1px solid var(--gold-2);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);cursor:pointer;transition:all .25s}
.share-fab:hover{background:var(--gold);transform:translateY(-2px)}
body.edit .share-fab,body.landing-mode .share-fab,body.invitee-pending .share-fab,body.invitee-attending .share-fab,body.invitee-declined .share-fab{display:none}

/* ===== Floating LOGIN key (top right) — visible to all ===== */
.login-fab{position:fixed;top:16px;right:16px;z-index:90;width:44px;height:44px;border-radius:50%;background:rgba(26,20,16,.85);color:var(--gold-2);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.3);cursor:pointer;transition:all .25s;font-size:18px;backdrop-filter:blur(8px)}
.login-fab:hover{background:var(--gold);color:#1a1410;transform:scale(1.05)}
body.edit .login-fab,body.landing-mode .login-fab{display:none}

/* ===== Hero "click to upload" placeholder (edit mode, no bg) ===== */
.hero-upload-cta{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);background:var(--gold);color:#1a1410;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.25em;text-transform:uppercase;padding:18px 32px;border:none;cursor:pointer;display:none;align-items:center;gap:10px;box-shadow:0 10px 30px rgba(0,0,0,.4);z-index:3;animation:bounce 2.2s ease-in-out infinite;transition:transform .2s}
.hero-upload-cta:hover{background:var(--gold-2);transform:translateX(-50%) translateY(-2px)}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}
body.edit .hero-bg:not(.has-img) ~ .hero-upload-cta,
body.edit .hero-upload-cta.show{display:inline-flex}

/* ===== CONFIRM GATE (shown to pending invitees after countdown) ===== */
.confirm-gate{display:none;padding:100px 24px;background:linear-gradient(135deg,#1a0808 0%,#0e0503 70%,#000 100%);color:var(--paper);text-align:center;position:relative;overflow:hidden}
.confirm-gate::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(232,137,10,.14),transparent 60%);pointer-events:none}
body.invitee-pending .confirm-gate{display:block}
body.invitee-pending #app > section:not(.invitee-banner):not(.hero):not(.count):not(.confirm-gate),
body.invitee-pending #app > footer{display:none}

/* ===== THANK-YOU SCREEN (declined invitees — full takeover) ===== */
.thank-you-screen{display:none;min-height:100vh;align-items:center;justify-content:center;padding:60px 24px;background:linear-gradient(135deg,#1a0808 0%,#0e0503 70%,#000 100%);color:var(--paper);text-align:center;position:relative;overflow:hidden}
.thank-you-screen::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(232,137,10,.12),transparent 60%);pointer-events:none}
body.invitee-declined .thank-you-screen{display:flex}
body.invitee-declined #app > *:not(.thank-you-screen){display:none}

/* Edit mode bypasses all gating */
body.edit .confirm-gate,body.edit .thank-you-screen{display:none !important}
body.edit.invitee-pending #app > *,body.edit.invitee-declined #app > *{display:revert !important}
.gate-inner{position:relative;z-index:1;max-width:560px;width:100%;margin:0 auto;text-align:center;animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
.gate-actions{justify-content:center}
.gate-eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.55em;text-transform:uppercase;color:var(--gold-2);margin-bottom:14px;display:inline-block}
.gate-script{font-family:var(--script);font-size:clamp(56px,10vw,108px);color:#fff;line-height:1;margin-bottom:8px;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.gate-and{font-size:.85em;color:var(--gold-2);margin:0 .04em}
.gate-name{font-family:var(--script);font-size:clamp(38px,5vw,58px);color:var(--gold-2);margin:18px 0 6px;line-height:1}
.gate-greeting{font-family:var(--serif);font-style:italic;font-size:20px;color:rgba(250,246,238,.92);font-weight:300;line-height:1.5;margin:0 auto 30px;max-width:480px}
.gate-meta{display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:32px;font-family:var(--sans);font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:rgba(250,246,238,.85);font-weight:400;flex-wrap:wrap}
.gate-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--gold-2)}
.gate-rule{display:flex;align-items:center;gap:18px;justify-content:center;color:rgba(212,172,108,.4);max-width:280px;margin:24px auto}
.gate-rule .l{flex:1;height:1px;background:currentColor}
.gate-q{font-family:var(--serif);font-style:italic;font-size:clamp(28px,4vw,40px);color:#fff;font-weight:300;margin:30px 0 24px}
.gate-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.gate-btn{padding:18px 32px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.35em;text-transform:uppercase;cursor:pointer;border:1px solid var(--gold-2);background:transparent;color:var(--gold-2);transition:all .25s;min-width:200px}
.gate-btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(184,146,79,.3)}
.gate-btn.yes{background:var(--gold);color:#1a1410;border-color:var(--gold)}
.gate-btn.yes:hover{background:var(--gold-2);border-color:var(--gold-2)}
.gate-btn.no{background:transparent;color:rgba(250,246,238,.7);border-color:rgba(250,246,238,.3)}
.gate-btn.no:hover{background:rgba(250,246,238,.08);color:rgba(250,246,238,.95)}
.gate-extra{margin-top:20px;display:none;text-align:left;background:rgba(250,246,238,.06);border:1px solid rgba(250,246,238,.12);padding:24px;backdrop-filter:blur(4px)}
.gate-extra.show{display:block}
.gate-extra .field label{color:rgba(250,246,238,.7)}
.gate-extra .field input,.gate-extra .field textarea{color:#fff;border-color:rgba(250,246,238,.3)}
.gate-extra .field input:focus,.gate-extra .field textarea:focus{border-color:var(--gold-2)}
.gate-thanks{padding:50px 30px;background:rgba(250,246,238,.06);border:1px solid rgba(212,172,108,.25);backdrop-filter:blur(4px)}
.gate-thanks .check{width:72px;height:72px;border-radius:50%;background:var(--gold);color:#1a1410;display:flex;align-items:center;justify-content:center;font-size:34px;margin:0 auto 18px}
.gate-thanks h3{font-family:var(--serif);font-style:italic;font-size:32px;color:#fff;margin-bottom:10px;font-weight:400}
.gate-thanks p{color:rgba(250,246,238,.8);font-style:italic;font-size:17px;line-height:1.5;max-width:440px;margin:0 auto}
.gift-card{margin-top:24px;padding:22px;background:rgba(212,172,108,.12);border:1px solid var(--gold-2);text-align:center}
.gift-card .eyebrow{color:var(--gold-2);margin-bottom:10px}
.gift-card .gift-text{font-family:var(--serif);font-style:italic;font-size:16px;color:rgba(250,246,238,.9);line-height:1.5;margin-bottom:14px}
.gift-card .gift-num{font-family:'SF Mono',Menlo,monospace;font-size:22px;color:var(--gold-2);font-weight:600;letter-spacing:.05em}
.gift-card .gift-actions{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.gift-card .gift-btn{padding:10px 18px;font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;background:var(--gold);color:#1a1410;border:none;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:background .2s}
.gift-card .gift-btn:hover{background:var(--gold-2)}
.gift-card .gift-btn.ghost{background:transparent;color:var(--gold-2);border:1px solid var(--gold-2)}
.gift-card .gift-btn.ghost:hover{background:var(--gold);color:#1a1410}
.gate-back{display:block;margin-top:18px;font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(250,246,238,.6);text-decoration:none;background:none;border:none;cursor:pointer}
.gate-back:hover{color:var(--gold-2)}

/* ===== Romantic loader ===== */
.loader{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#1a0808 0%,#0e0503 60%,#000 100%);overflow:hidden;transition:opacity .8s ease,visibility .8s}
.loader::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(232,137,10,.18),transparent 65%);pointer-events:none;animation:loaderGlow 4s ease-in-out infinite}
@keyframes loaderGlow{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.loader.fade{opacity:0;visibility:hidden}
.loader.hidden{display:none}
.loader-inner{position:relative;text-align:center;z-index:2}
.loader-orn{font-size:22px;color:rgba(232,137,10,.55);margin-bottom:14px;letter-spacing:.6em;animation:loaderOrn 3s ease-in-out infinite}
@keyframes loaderOrn{0%,100%{opacity:.5;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.loader-script{font-family:var(--script);font-size:clamp(56px,9vw,108px);line-height:1;background:linear-gradient(120deg,#fcc440 0%,#f5a623 30%,#e8890a 55%,#b8780a 80%,#fcc440 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:loaderShimmer 3.4s ease-in-out infinite;text-shadow:0 0 60px rgba(232,137,10,.3);filter:drop-shadow(0 4px 30px rgba(232,137,10,.25))}
@keyframes loaderShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.loader-line{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:24px auto 0;width:0;animation:loaderLine 1.8s .4s cubic-bezier(.5,0,.3,1) forwards}
@keyframes loaderLine{to{width:280px}}
.loader-sub{font-family:var(--serif);font-style:italic;font-size:15px;color:rgba(212,184,150,.7);letter-spacing:.45em;text-transform:uppercase;margin-top:24px;opacity:0;transform:translateY(8px);animation:loaderSub 1.4s 1s ease-out forwards}
@keyframes loaderSub{to{opacity:.7;transform:none}}
.loader-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.loader-particle{position:absolute;border-radius:50%;background:radial-gradient(circle,#fcc440 0%,#e8890a 60%,transparent 100%);box-shadow:0 0 6px rgba(252,196,64,.5);opacity:0;animation:loaderRise linear infinite}
@keyframes loaderRise{
  0%{transform:translateY(110vh) translateX(0) scale(.4);opacity:0}
  10%{opacity:.9}
  50%{transform:translateY(50vh) translateX(20px) scale(1)}
  90%{opacity:.7}
  100%{transform:translateY(-10vh) translateX(-20px) scale(.5);opacity:0}
}
.loader-heart{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(232,137,10,.2) 0%,transparent 70%);animation:loaderHeart 1.6s ease-in-out infinite;pointer-events:none;z-index:1}
@keyframes loaderHeart{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.5}50%{transform:translate(-50%,-50%) scale(1.15);opacity:.8}}

/* ====================================================================
   COLOR THEMES — 9 presets users can pick in settings
   Default = Frida (Autorretrato). Others override key palette tokens.
   ==================================================================== */
body.theme-casa-azul{
  --paper:#eef4f8;--paper-2:#dde6ed;
  --ink:#0a2e4d;--ink-2:#152436;
  --gold:#d4a850;--gold-2:#e8c47c;--gold-3:#9d7d3a;--gold-4:#f5dca0;
  --marigold:#d4a850;--marigold-2:#e8c47c;--marigold-3:#f5dca0;
  --wine:#c44e3d;--wine-2:#8e2d20;
  --terra:#8e5d3d;--terra-2:#a87850;
  --sage:#5c8b6a;
  --dust:#a8c0d6;--ghost:#7a8c9a;--muted:#7a8c9a;
}
body.theme-coyoacan{
  --paper:#f4f1e8;--paper-2:#e6e0c8;
  --ink:#1c2e22;--ink-2:#0e1810;
  --gold:#c8a04c;--gold-2:#dcc070;--gold-3:#a07830;--gold-4:#e8d088;
  --marigold:#c8a04c;--marigold-2:#dcc070;--marigold-3:#e8d088;
  --wine:#8b3a2a;--wine-2:#6b2818;
  --terra:#7a4a30;--terra-2:#946048;
  --sage:#6b8c5a;
  --dust:#c0b890;--ghost:#8a8060;--muted:#8a8060;
}
body.theme-oaxaca{
  --paper:#fdf2e6;--paper-2:#f0e0c8;
  --ink:#4a2418;--ink-2:#2a1408;
  --gold:#e8950a;--gold-2:#f5b840;--gold-3:#b87010;--gold-4:#fcc960;
  --marigold:#e8950a;--marigold-2:#f5b840;--marigold-3:#fcc960;
  --wine:#c4391a;--wine-2:#8b2818;
  --terra:#9a4828;--terra-2:#bc6038;
  --sage:#688058;
  --dust:#d8b890;--ghost:#9a7858;--muted:#9a7858;
}
body.theme-muertos{
  --paper:#f5ead4;--paper-2:#e8d4b0;
  --ink:#0a0408;--ink-2:#1a0810;
  --gold:#fcc440;--gold-2:#fde060;--gold-3:#c89028;--gold-4:#fde890;
  --marigold:#fcc440;--marigold-2:#fde060;--marigold-3:#fde890;
  --wine:#c41e7a;--wine-2:#8e1858;
  --terra:#7a2848;--terra-2:#9c3860;
  --sage:#4a7048;
  --dust:#d4b896;--ghost:#8a6858;--muted:#8a6858;
}
body.theme-riviera{
  --paper:#f0f4ed;--paper-2:#dde4d6;
  --ink:#0e3838;--ink-2:#062828;
  --gold:#d4a04c;--gold-2:#e8b870;--gold-3:#a07828;--gold-4:#f0cc88;
  --marigold:#d4a04c;--marigold-2:#e8b870;--marigold-3:#f0cc88;
  --wine:#d04830;--wine-2:#9c3018;
  --terra:#a85838;--terra-2:#c47048;
  --sage:#5c8870;
  --dust:#a8bca0;--ghost:#708070;--muted:#708070;
}
body.theme-provence{
  --paper:#f4f0ee;--paper-2:#e8e0dc;
  --ink:#3a2c4a;--ink-2:#241828;
  --gold:#c4a878;--gold-2:#dcc098;--gold-3:#9a7c50;--gold-4:#e8d2b0;
  --marigold:#c4a878;--marigold-2:#dcc098;--marigold-3:#e8d2b0;
  --wine:#8e6080;--wine-2:#684060;
  --terra:#806060;--terra-2:#9c7878;
  --sage:#7c8c70;
  --dust:#c0b8c0;--ghost:#8a8090;--muted:#8a8090;
}
body.theme-tuscan{
  --paper:#fbf2ee;--paper-2:#ede0d8;
  --ink:#3a2828;--ink-2:#241818;
  --gold:#c8a55c;--gold-2:#dcc080;--gold-3:#a07c40;--gold-4:#e8d098;
  --marigold:#c8a55c;--marigold-2:#dcc080;--marigold-3:#e8d098;
  --wine:#b04848;--wine-2:#7c2828;
  --terra:#9c5840;--terra-2:#bc7058;
  --sage:#788870;
  --dust:#c8b0a0;--ghost:#8a7878;--muted:#8a7878;
}
body.theme-midnight{
  --paper:#f0e8d8;--paper-2:#e0d4be;
  --ink:#0c1a14;--ink-2:#040c08;
  --gold:#d4ad65;--gold-2:#e8c488;--gold-3:#a0832c;--gold-4:#f0d8a0;
  --marigold:#d4ad65;--marigold-2:#e8c488;--marigold-3:#f0d8a0;
  --wine:#8b4830;--wine-2:#5c2818;
  --terra:#7a5238;--terra-2:#94684c;
  --sage:#4a6850;
  --dust:#b8a878;--ghost:#80785c;--muted:#80785c;
}

/* === Theme picker UI (in settings modal) === */
.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
@media(max-width:520px){.theme-grid{grid-template-columns:repeat(2,1fr)}}
.theme-card{padding:14px 12px;background:rgba(232,137,10,.05);border:1px solid var(--seam);color:var(--paper);text-align:left;cursor:pointer;transition:all .2s;font:inherit;color:inherit}
.theme-card:hover{border-color:var(--gold);transform:translateY(-1px)}
.theme-card.sel{border-color:var(--gold);background:rgba(232,137,10,.12);box-shadow:0 0 0 2px rgba(232,137,10,.35)}
.theme-swatch{display:flex;height:26px;margin-bottom:10px;border:1px solid var(--line);overflow:hidden}
.theme-swatch span{flex:1;display:block}
.theme-name{font-family:var(--display);font-style:italic;font-size:17px;font-weight:500;color:var(--paper);line-height:1}
.theme-desc{font-family:var(--serif);font-style:italic;font-size:12px;color:var(--dust);margin-top:4px;line-height:1.3}

/* ====================================================================
   MOBILE OPTIMIZATIONS (≤ 600px)
   ==================================================================== */
@media (max-width: 600px) {
  body { font-size: 15px; }
  /* Tighter padding throughout */
  .section { padding: 64px 18px; }
  .section + .section { border-top: 1px solid var(--seam); }
  .section-head { margin-bottom: 36px; }
  .section-head .eyebrow { letter-spacing: .35em; font-size: 10px }
  .count { padding: 56px 18px 64px; }
  .count-grid { gap: 16px; margin-top: 24px; }
  .count-cell { min-width: 64px; }
  .count-num { font-size: 38px; }
  .count-label { font-size: 8px; letter-spacing: .35em; margin-top: 8px; }
  /* Hero — keep impactful but no overflow */
  .hero { min-height: 90vh; padding: 40px 18px; }
  .hero-inner > * + * { margin-top: 10px; }
  .hero-script { font-size: clamp(54px, 16vw, 96px); }
  .hero-sub { font-size: 16px; margin-top: 12px; }
  .hero-meta { font-size: 9px; letter-spacing: .35em; gap: 12px; margin-top: 18px; }
  .hero-meta .dot { width: 3px; height: 3px; }
  .hero-rule { max-width: 200px; margin-top: 22px; }
  .hero-scroll { font-size: 9px; bottom: 22px; }
  .hero-scroll { font-size: 8px; bottom: 20px; }
  /* Story */
  .story-quote { font-size: 19px; line-height: 1.45; margin-top: 22px; }
  .story-sig { font-size: 32px; margin-top: 22px; }
  /* Schedule */
  .sched-time { font-size: 22px; }
  .sched-content h4 { font-size: 18px; }
  .sched-content p { font-size: 14px; }
  .sched-content .loc { font-size: 9px; letter-spacing: .25em; }
  .sched-map iframe { height: 140px; }
  .sched-dir { padding: 9px 14px; font-size: 9px; letter-spacing: .25em; }
  .sched-addr { font-size: 13px; }
  /* Venue */
  .venue { gap: 28px; }
  .venue-img { aspect-ratio: 4/3.6; }
  .venue-cta { padding: 12px 18px; font-size: 9px; letter-spacing: .3em; }
  /* RSVP card */
  .rsvp-card { padding: 32px 22px; }
  .rsvp-card h3 { font-size: 26px; }
  .rsvp-card .sub { font-size: 14px; margin-bottom: 22px; }
  .field { margin-bottom: 14px; }
  .field label { font-size: 9px; letter-spacing: .25em; margin-bottom: 6px; }
  .field input, .field select, .field textarea { font-size: 16px; padding: 12px 12px; }
  .pick-btn { padding: 14px 10px; font-size: 16px; }
  /* Buttons everywhere — larger tap area */
  .btn { padding: 14px 22px; font-size: 10px; letter-spacing: .3em; min-height: 44px; }
  .btn-block { padding: 16px; }
  .btn-sm { padding: 10px 14px; font-size: 9px; }
  /* Wall */
  .wall-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
  .wall-card { padding: 22px 20px; }
  .wall-card .text { font-size: 16px; }
  .wall-card .author { font-size: 22px; }
  .wall-form { padding: 22px; margin-top: 32px; }
  /* Footer */
  .footer { padding: 64px 18px 28px; }
  .footer .script { font-size: 56px; }
  .footer p { font-size: 9px; letter-spacing: .3em; }
  /* Invitee banner */
  .invitee-banner { padding: 24px 16px; }
  .invitee-banner-script { font-size: 28px; }
  .invitee-banner .eyebrow { font-size: 9px; letter-spacing: .3em; }
  .invitee-banner .stat { font-size: 9px; letter-spacing: .3em; }
  /* Opening letter */
  .invitee-letter { padding: 18px; }
  .letter-card { padding: 36px 22px; }
  .letter-eyebrow { font-size: 9px; letter-spacing: .35em; }
  .letter-name { font-size: clamp(40px, 12vw, 64px); }
  .letter-to { font-size: 13px; margin: 22px 0 4px; }
  .letter-from { font-size: 14px; margin-bottom: 28px; }
  .letter-btn { padding: 14px 22px; font-size: 10px; letter-spacing: .3em; }
  /* Edit bar — wraps nicely */
  body.edit { padding-top: 0; }
  .editbar { position: relative; padding: 8px 12px; gap: 8px; }
  .eb-btn { padding: 6px 10px; font-size: 10px; letter-spacing: .04em; }
  .eb-mode { padding: 4px 8px; font-size: 9px; }
  /* Confirm gate */
  .confirm-gate { padding: 60px 18px; }
  .gate-q { font-size: 24px; margin: 18px 0 16px; }
  .gate-actions { flex-direction: column; gap: 8px; }
  .gate-btn { width: 100%; min-width: 0; padding: 14px 20px; font-size: 10px; letter-spacing: .3em; }
  .gate-extra { padding: 18px; }
  /* Modal cards */
  .modal { padding: 14px; }
  .modal-card { padding: 24px 20px; }
  .modal-card h3 { font-size: 22px; }
  /* Settings & invitees admin */
  .invitees-section { padding: 60px 16px; }
  .invitees-head h2 { font-size: 26px; }
  .istat { padding: 14px; }
  .istat-val { font-size: 24px; }
  .istat-label { font-size: 9px; letter-spacing: .3em; }
  .invitees-toolbar { gap: 8px; }
  .inv-row, .inv-row.head { padding: 10px 12px; gap: 8px; }
  .inv-name { font-size: 16px; }
  .inv-icon-btn { width: 32px; height: 32px; font-size: 12px; }
  .inv-status { font-size: 8px; letter-spacing: .25em; padding: 3px 6px; }
  .inv-avatar { width: 32px; height: 32px; font-size: 12px; }
  /* Setup wizard */
  .setup { padding: 24px 0; }
  .setup .script { font-size: 48px; }
  .setup h2 { font-size: 26px; }
  .setup-lead { font-size: 15px; margin-bottom: 24px; }
  .setup-share-url { font-size: 11px; }
  .setup-actions { gap: 8px; }
  .setup-back { padding: 10px 14px; font-size: 9px; letter-spacing: .25em; }
  /* Landing */
  .landing { padding: 40px 18px; }
  .landing .script { font-size: clamp(54px, 16vw, 96px); }
  .landing h1 { font-size: 28px; margin-bottom: 14px; }
  .landing p { font-size: 16px; margin-bottom: 24px; }
  .landing .features { gap: 12px; margin: 32px 0; }
  .landing .feat { padding: 16px; }
  .landing .feat-title { font-size: 17px; }
  .landing .feat-desc { font-size: 12px; }
  .landing .returning { font-size: 12px; margin-top: 28px; padding-top: 20px; }
  /* FABs — tap-friendly + out of the way */
  .login-fab { width: 38px; height: 38px; top: 12px; right: 12px; font-size: 16px; }
  .share-fab { width: 38px; height: 38px; bottom: 14px; right: 14px; }
  .share-fab svg { width: 16px; height: 16px; }
  /* Lightbox */
  .lightbox { padding: 16px; }
  .lightbox-close { width: 36px; height: 36px; top: 14px; right: 14px; font-size: 20px; }
  .lightbox-nav { width: 42px; height: 42px; font-size: 20px; }
  .lightbox-nav.prev { left: 12px; }
  .lightbox-nav.next { right: 12px; }
  /* Toast */
  .toast { padding: 10px 18px; font-size: 9px; letter-spacing: .25em; }
}

/* ====================================================================
   TEMPLATE LIGHT MODE — used by all light-palette templates
   Applied as second class alongside body.theme-X (e.g. body.theme-light.theme-classic-ivory)
   ==================================================================== */
body.theme-light{background:var(--paper);color:var(--ink)}
body.theme-light h1,body.theme-light h2,body.theme-light h3,body.theme-light h4{color:var(--ink)}
body.theme-light p{color:var(--ink-soft)}
body.theme-light .invitee-banner{background:var(--paper-2);color:var(--ink);border-bottom:1px solid var(--seam)}
body.theme-light .invitee-banner .stat{color:var(--ink-soft)}
body.theme-light .count{background:var(--paper);border-color:var(--seam)}
body.theme-light .count-num{color:var(--gold-3)}
body.theme-light .count-label{color:var(--ink-soft)}
body.theme-light .story{background:var(--paper-2);color:var(--ink)}
body.theme-light .story-quote{color:var(--ink-2)}
body.theme-light .story-sig{color:var(--gold-3)}
body.theme-light .gallery{background:var(--paper-2)}
body.theme-light .wall{background:var(--paper-2)}
body.theme-light .invitees-section{background:var(--paper-2)}
body.theme-light .section-head .lead{color:var(--ink-soft)}
body.theme-light .card,body.theme-light .panel,body.theme-light .stat,
body.theme-light .rsvp-card,body.theme-light .wall-card,
body.theme-light .invitee-table,body.theme-light .istat,
body.theme-light .composer,body.theme-light .checklist,
body.theme-light .wall-form{background:#fff;color:var(--ink);border-color:var(--line)}
body.theme-light .invitee-table .inv-row.head{background:var(--ink);color:var(--paper)}
body.theme-light .invitee-table .inv-row{color:var(--ink)}
body.theme-light .inv-name,body.theme-light .guest-name{color:var(--ink)}
body.theme-light .inv-meta,body.theme-light .guest-meta{color:var(--ink-soft)}
body.theme-light .istat-val,body.theme-light .stat-value{color:var(--gold-3)}
body.theme-light .field input,body.theme-light .field select,body.theme-light .field textarea{color:var(--ink);background:transparent;border-color:var(--line-2)}
body.theme-light .field input::placeholder,body.theme-light .field textarea::placeholder{color:var(--ghost)}
body.theme-light .field label{color:var(--ink-soft)}
body.theme-light .pick-btn{color:var(--ink-soft);border-color:var(--line-2);background:#fff}
body.theme-light .pick-btn.sel{background:var(--ink);color:var(--paper);border-color:var(--ink)}
body.theme-light .pick-btn.sel.yes{background:var(--gold);color:#fff;border-color:var(--gold)}
body.theme-light .sched-time{color:var(--gold-3)}
body.theme-light .sched-content h4{color:var(--ink)}
body.theme-light .sched-content p{color:var(--ink-soft)}
body.theme-light .sched-addr{color:var(--ink-soft)}
body.theme-light .sched-map{background:var(--paper-2);border-color:var(--line)}
body.theme-light .wall-card .text{color:var(--ink-2)}
body.theme-light .wall-card .author{color:var(--gold-3)}
body.theme-light .invitees-search{background:#fff;color:var(--ink);border-color:var(--line)}
body.theme-light .inv-icon-btn{background:#fff;color:var(--ink-soft);border-color:var(--line)}
body.theme-light .footer{background:var(--ink);color:var(--paper);border-top:none}
body.theme-light .footer p{color:rgba(250,246,238,.5)}
body.theme-light .upcoming-title{color:var(--ink)}
body.theme-light .btn{background:var(--ink);color:var(--paper);border-color:var(--ink)}
body.theme-light .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
body.theme-light .btn-ghost:hover{background:var(--ink);color:var(--paper)}
body.theme-light .venue-cta{color:var(--gold-3);border-color:var(--gold-3)}
body.theme-light .venue-cta:hover{background:var(--gold);color:#fff}

/* ============= NEW FULL TEMPLATES ============= */

/* Classic Ivory — light, formal, gold accents */
body.theme-classic-ivory{
  --paper:#FBF7F0;--paper-2:#F2EBDD;
  --ink:#2D2018;--ink-2:#4A382C;--ink-soft:#6B5544;
  --dust:#9B8473;--ghost:#B8A48F;--muted:#B8A48F;
  --line:rgba(45,32,24,.10);--line-2:rgba(45,32,24,.18);
  --seam:rgba(196,165,98,.22);
  --gold:#C4A562;--gold-2:#D4B97D;--gold-3:#9C8244;--gold-4:#E8D8A8;
  --marigold:#C4A562;--marigold-2:#D4B97D;--marigold-3:#E8D8A8;
  --wine:#7C2828;--wine-2:#5C1818;
  --sage:#9CAE9C;--terra:#B08068;
}

/* Garden Romance — sage green + soft cream */
body.theme-garden-romance{
  --paper:#F5F2EB;--paper-2:#E8E4D6;
  --ink:#2A3225;--ink-2:#3A4232;--ink-soft:#5A6852;
  --dust:#A8B0A0;--ghost:#7C8870;--muted:#7C8870;
  --line:rgba(42,50,37,.10);--line-2:rgba(42,50,37,.18);
  --seam:rgba(124,144,120,.22);
  --gold:#A89968;--gold-2:#C0B080;--gold-3:#7C7048;--gold-4:#D8CCA0;
  --marigold:#A89968;--marigold-2:#C0B080;--marigold-3:#D8CCA0;
  --wine:#9C5A5A;--wine-2:#7A4040;
  --sage:#7C9078;--verde:#7C9078;
  --terra:#9C8068;
}

/* Vintage Romance — dusty rose + champagne */
body.theme-vintage-romance{
  --paper:#FBF4F0;--paper-2:#F0E4DC;
  --ink:#3A2A2A;--ink-2:#4A3636;--ink-soft:#6B4E4E;
  --dust:#B0907F;--ghost:#C8A898;--muted:#C8A898;
  --line:rgba(58,42,42,.10);--line-2:rgba(58,42,42,.18);
  --seam:rgba(196,144,138,.25);
  --gold:#B0926C;--gold-2:#C8AC88;--gold-3:#8C6E48;--gold-4:#DCC4A0;
  --marigold:#B0926C;--marigold-2:#C8AC88;--marigold-3:#DCC4A0;
  --wine:#A86060;--wine-2:#7C3838;
  --sage:#A8A088;
  --terra:#B89070;
}

/* Modern Minimal — white + charcoal + sans */
body.theme-modern-minimal{
  --paper:#FFFFFF;--paper-2:#F5F4F0;
  --ink:#1A1A1A;--ink-2:#2A2A2A;--ink-soft:#5A5A5A;
  --dust:#9A9A9A;--ghost:#B0B0B0;--muted:#B0B0B0;
  --line:rgba(0,0,0,.08);--line-2:rgba(0,0,0,.18);
  --seam:rgba(0,0,0,.10);
  --gold:#1A1A1A;--gold-2:#3A3A3A;--gold-3:#000000;--gold-4:#5A5A5A;
  --marigold:#1A1A1A;--marigold-2:#3A3A3A;--marigold-3:#5A5A5A;
  --wine:#8A2828;--wine-2:#6A1818;
  --sage:#7A8A7A;
  --terra:#8A6A5A;
  --display:'Playfair Display',Georgia,serif;
  --serif:'Crimson Pro',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --mono:'Inter',system-ui,sans-serif;
}

/* Tuscan Sunset — warm terracotta + cream */
body.theme-tuscan-sunset{
  --paper:#FDF5EC;--paper-2:#F2E5D2;
  --ink:#3A1F10;--ink-2:#4A2818;--ink-soft:#7A4A30;
  --dust:#C49880;--ghost:#A88068;--muted:#A88068;
  --line:rgba(58,31,16,.10);--line-2:rgba(58,31,16,.18);
  --seam:rgba(176,128,104,.30);
  --gold:#C4742C;--gold-2:#DA9050;--gold-3:#9C5818;--gold-4:#F0B888;
  --marigold:#C4742C;--marigold-2:#DA9050;--marigold-3:#F0B888;
  --wine:#A03828;--wine-2:#7C2018;
  --sage:#88A078;
  --terra:#9C5828;--terra-2:#B07040;
}

/* Black Tie — dark + gold elegant formal */
body.theme-black-tie{
  --paper:#F0EBDC;--paper-2:#D8D0BC;
  --ink:#0A0A0A;--ink-2:#1A1A18;--ink-soft:#5A5042;
  --dust:#C8B488;--ghost:#A0906C;--muted:#A0906C;
  --line:rgba(196,165,98,.18);--line-2:rgba(196,165,98,.30);
  --seam:rgba(196,165,98,.20);
  --gold:#C4A562;--gold-2:#E8C880;--gold-3:#A08442;--gold-4:#F5DCA0;
  --marigold:#C4A562;--marigold-2:#E8C880;--marigold-3:#F5DCA0;
  --wine:#8E2828;--wine-2:#6E1818;
  --sage:#7A8870;
  --terra:#8C6240;
}

/* ============= 9 KNOT-INSPIRED TEMPLATES ============= */

/* Romantic Calligraphy — soft grey + cream + script (light) */
body.theme-romantic-calligraphy{
  --paper:#FAF7F2;--paper-2:#EDE7DD;
  --ink:#3A3530;--ink-2:#5A5249;--ink-soft:#7A716A;
  --dust:#A89E94;--ghost:#CFC5BB;--muted:#A89E94;
  --line:rgba(58,53,48,.08);--line-2:rgba(58,53,48,.18);
  --seam:rgba(58,53,48,.12);
  --gold:#5A5249;--gold-2:#7A716A;--gold-3:#3A3530;--gold-4:#A89E94;
  --marigold:#5A5249;--marigold-2:#7A716A;--marigold-3:#A89E94;
  --wine:#8E5A55;--wine-2:#6E3A35;
  --sage:#9CAE9C;--terra:#A88068;
}

/* Elegant Glow — deep navy + cream + warm light (dark) */
body.theme-elegant-glow{
  --paper:#F2EBDD;--paper-2:#E2D8C2;
  --ink:#0E1A2A;--ink-2:#1A2842;--ink-soft:#3A4A6A;
  --dust:#B8B5A8;--ghost:#888578;--muted:#888578;
  --line:rgba(196,165,98,.18);--line-2:rgba(196,165,98,.30);
  --seam:rgba(196,165,98,.20);
  --gold:#D4B97D;--gold-2:#E8CC9A;--gold-3:#A88B58;--gold-4:#F0DCB0;
  --marigold:#D4B97D;--marigold-2:#E8CC9A;--marigold-3:#F0DCB0;
  --wine:#A85A40;--wine-2:#7C3828;
  --sage:#7A8870;--terra:#A87850;
}

/* Beloved Floral — cream + crimson + florals (light) */
body.theme-beloved-floral{
  --paper:#FBF6EE;--paper-2:#F0E6D6;
  --ink:#3A1818;--ink-2:#4A2020;--ink-soft:#7A4040;
  --dust:#C8A090;--ghost:#A88078;--muted:#A88078;
  --line:rgba(58,24,24,.08);--line-2:rgba(58,24,24,.18);
  --seam:rgba(180,40,40,.20);
  --gold:#B0826C;--gold-2:#C8A088;--gold-3:#8C5C40;--gold-4:#DCC0A0;
  --marigold:#B0826C;--marigold-2:#C8A088;--marigold-3:#DCC0A0;
  --wine:#A8302C;--wine-2:#7C1818;
  --sage:#9CAE9C;--terra:#B07050;
}

/* Marble & Gold — dark forest green + gold (dark) */
body.theme-marble-gold{
  --paper:#F0EBDC;--paper-2:#D8D0BC;
  --ink:#0E1A14;--ink-2:#1A2820;--ink-soft:#3A4A40;
  --dust:#C8B488;--ghost:#A0906C;--muted:#A0906C;
  --line:rgba(196,165,98,.18);--line-2:rgba(196,165,98,.30);
  --seam:rgba(196,165,98,.20);
  --gold:#C4A562;--gold-2:#E8C880;--gold-3:#A08442;--gold-4:#F5DCA0;
  --marigold:#C4A562;--marigold-2:#E8C880;--marigold-3:#F5DCA0;
  --wine:#7C3828;--wine-2:#5A2018;
  --sage:#5A7050;--terra:#8C6240;
}

/* Black Tie Initial — pure white + black + script (light) */
body.theme-black-tie-initial{
  --paper:#FFFFFF;--paper-2:#F5F4F0;
  --ink:#0A0A0A;--ink-2:#1A1A1A;--ink-soft:#3A3A3A;
  --dust:#9A9A9A;--ghost:#B8B8B8;--muted:#B8B8B8;
  --line:rgba(0,0,0,.08);--line-2:rgba(0,0,0,.20);
  --seam:rgba(0,0,0,.10);
  --gold:#1A1A1A;--gold-2:#3A3A3A;--gold-3:#000000;--gold-4:#5A5A5A;
  --marigold:#1A1A1A;--marigold-2:#3A3A3A;--marigold-3:#5A5A5A;
  --wine:#7C2828;--wine-2:#5A1818;
  --sage:#7A8A7A;--terra:#7A6B5A;
}

/* Painted Beach — soft watercolor teal + cream (light) */
body.theme-painted-beach{
  --paper:#F4F2EC;--paper-2:#DCE2DE;
  --ink:#1A3038;--ink-2:#284048;--ink-soft:#4A6068;
  --dust:#A8BCBA;--ghost:#8AA0A0;--muted:#8AA0A0;
  --line:rgba(26,48,56,.08);--line-2:rgba(26,48,56,.18);
  --seam:rgba(108,160,168,.25);
  --gold:#7AA0A8;--gold-2:#98BCC0;--gold-3:#5A7C84;--gold-4:#B8D4D8;
  --marigold:#7AA0A8;--marigold-2:#98BCC0;--marigold-3:#B8D4D8;
  --wine:#A8604C;--wine-2:#7C4030;
  --sage:#7C9088;--terra:#A87A60;
}

/* Retro Spotlight — peach cream + dusty pink (light) */
body.theme-retro-spotlight{
  --paper:#FBF0E4;--paper-2:#F0DCC8;
  --ink:#3A2828;--ink-2:#4A3434;--ink-soft:#7A5454;
  --dust:#C8A098;--ghost:#A88880;--muted:#A88880;
  --line:rgba(58,40,40,.08);--line-2:rgba(58,40,40,.18);
  --seam:rgba(196,128,118,.22);
  --gold:#B0786C;--gold-2:#C89488;--gold-3:#8C5448;--gold-4:#DCB0A4;
  --marigold:#B0786C;--marigold-2:#C89488;--marigold-3:#DCB0A4;
  --wine:#A05858;--wine-2:#7C3838;
  --sage:#9CAE9C;--terra:#B07050;
}

/* Cotton Greenery — pure white + sage + greenery (light) */
body.theme-cotton-greenery{
  --paper:#FCFBF6;--paper-2:#EFEDE0;
  --ink:#2A3825;--ink-2:#3A4832;--ink-soft:#5A6852;
  --dust:#B0BCA8;--ghost:#90A088;--muted:#90A088;
  --line:rgba(42,56,37,.08);--line-2:rgba(42,56,37,.18);
  --seam:rgba(124,144,120,.22);
  --gold:#7C9078;--gold-2:#94A890;--gold-3:#5C7058;--gold-4:#B0C4AC;
  --marigold:#7C9078;--marigold-2:#94A890;--marigold-3:#B0C4AC;
  --wine:#9C5A5A;--wine-2:#7C3838;
  --sage:#7C9078;--terra:#A88068;
}

/* Vintage Mountain — sepia + deep teal (light) */
body.theme-vintage-mountain{
  --paper:#F4ECDC;--paper-2:#E0D4BC;
  --ink:#1A3838;--ink-2:#284848;--ink-soft:#4A6868;
  --dust:#B8B098;--ghost:#988C70;--muted:#988C70;
  --line:rgba(26,56,56,.10);--line-2:rgba(26,56,56,.20);
  --seam:rgba(108,148,148,.25);
  --gold:#5A8888;--gold-2:#7CA8A8;--gold-3:#406868;--gold-4:#9CC4C4;
  --marigold:#5A8888;--marigold-2:#7CA8A8;--marigold-3:#9CC4C4;
  --wine:#A85838;--wine-2:#7C3820;
  --sage:#7A9080;--terra:#A87850;
}

/* ====================================================================
   FIXES per user request — applied in order
   ==================================================================== */

/* 1. Remove invitee banner completely (no "A personal invitation for...") */
.invitee-banner{display:none !important}

/* 2. Show hero bg image as-is — no filter, no overlay tint */
.hero-bg::after{display:none !important}

/* 3. The "&" between names — same color as names (white), not gold */
.hero-and{color:#fff !important;text-shadow:0 2px 6px rgba(0,0,0,.5),0 4px 30px rgba(0,0,0,.55)}

/* 4. Remove SCROLL marker entirely (was the small dark box at bottom) */
.hero-scroll{display:none !important}

/* ============= FRIDA KAHLO — authentic self-portrait palette ============= */
/* Casa Azul cobalt + rojo lips + marigold cempasúchil + verde garden + black ink */
body.theme-frida-kahlo{
  --paper:#F5EAD4;          /* huipil ivory */
  --paper-2:#E8D8B8;
  --ink:#0F2A4A;            /* deep Casa Azul cobalt */
  --ink-2:#1A3A5C;
  --ink-soft:#3A5878;
  --dust:#B8A48F;
  --ghost:#8A7858;
  --muted:#8A7858;
  --line:rgba(232,137,10,.18);
  --line-2:rgba(232,137,10,.30);
  --seam:rgba(232,137,10,.20);
  --gold:#E8890A;            /* marigold cempasúchil */
  --gold-2:#FCC440;
  --gold-3:#B86810;
  --gold-4:#FDD878;
  --marigold:#E8890A;
  --marigold-2:#FCC440;
  --marigold-3:#FDD878;
  --wine:#C42820;            /* rojo lips */
  --wine-2:#8B1A0E;
  --rojo:#8B1A0E;
  --rojo-2:#C42820;
  --rojo-3:#E8442C;
  --sage:#3D7A35;            /* verde Coyoacán */
  --verde:#3D7A35;
  --verde-2:#5C9A50;
  --terra:#A04020;
  --terra-2:#C45838;
  --teal:#1B6B6B;
}

/* Hide the EDITING pill + helper text in the edit bar — user request */
.eb-mode,.editbar-l span:not(.eb-mode){display:none !important}
.editbar-l{flex:0;padding-left:0}

/* ===== Liste de mariage button + Whish modal ===== */
.liste-mariage-btn{margin:32px auto 0;background:transparent;border:1px solid var(--gold-2);color:var(--gold-2);padding:16px 32px;font-family:var(--mono);font-size:11px;letter-spacing:.45em;text-transform:uppercase;font-weight:300;cursor:pointer;display:inline-flex;align-items:center;gap:14px;transition:all .25s}
.liste-mariage-btn:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.lm-eyebrow{font-size:14px;line-height:1;opacity:.7}
.lm-label{font-weight:400}
.whish-modal .modal-card{background:#0e0503;border:1px solid var(--gold-2);max-width:440px;color:var(--paper)}
.whish-card .whish-num{font-family:var(--display);font-style:italic;font-size:42px;font-weight:500;color:var(--gold-2);text-align:center;letter-spacing:.06em;padding:18px 20px;background:rgba(232,137,10,.06);border:1px solid var(--seam);text-shadow:0 0 30px rgba(232,137,10,.3)}

/* ====================================================================
   FORCED CONTRAST — text always readable against bg
   ==================================================================== */

/* Confirm gate (dark bg) — all text light/cream */
.confirm-gate,.confirm-gate *{color:var(--paper) !important}
.confirm-gate .gate-q{color:#fff !important;font-weight:300}
.confirm-gate .gate-eyebrow,.confirm-gate .eyebrow{color:var(--gold-2) !important}
.confirm-gate p{color:rgba(245,234,212,.78) !important}
.confirm-gate .gate-extra{background:rgba(245,234,212,.06) !important;border-color:rgba(245,234,212,.18) !important}
.confirm-gate .gate-extra .field label{color:rgba(245,234,212,.78) !important;font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase}
.confirm-gate .gate-extra .field input,
.confirm-gate .gate-extra .field select,
.confirm-gate .gate-extra .field textarea{color:#fff !important;background:transparent !important;border-color:rgba(245,234,212,.30) !important;font-family:var(--serif);font-style:italic;font-size:18px}
.confirm-gate .gate-extra .field input::placeholder,
.confirm-gate .gate-extra .field textarea::placeholder{color:rgba(245,234,212,.45) !important}
.confirm-gate .gate-extra .field input:focus,
.confirm-gate .gate-extra .field textarea:focus,
.confirm-gate .gate-extra .field select:focus{border-color:var(--gold-2) !important}
.confirm-gate .gate-btn{color:var(--paper) !important}
.confirm-gate .gate-btn.yes{background:var(--gold) !important;color:var(--ink) !important}
.confirm-gate .gate-btn.yes:hover{background:var(--gold-2) !important}

/* Thank-you screen — same force */
.thank-you-screen,.thank-you-screen *{color:var(--paper) !important}
.thank-you-screen .check{color:var(--ink) !important}
.thank-you-screen .gate-thanks h3{color:#fff !important}
.thank-you-screen .gate-thanks p{color:rgba(245,234,212,.78) !important}
.thank-you-screen .liste-mariage-btn{color:var(--gold-2) !important}
.thank-you-screen .liste-mariage-btn:hover{color:var(--ink) !important}

/* Whish modal — dark, force light text */
.whish-modal .modal-card,.whish-modal .modal-card *{color:var(--paper) !important}
.whish-modal .whish-num{color:var(--gold-2) !important}
.whish-modal .btn-gold{color:var(--ink) !important}
.whish-modal .btn-ghost{color:var(--gold-2) !important}

/* Manage section (rsvpSection) — make sure form fields visible */
#rsvpSection .field label{color:var(--dust) !important}
#rsvpSection .field input,#rsvpSection .field textarea{color:var(--paper) !important;border-color:var(--seam) !important}
#rsvpSection .field input::placeholder,#rsvpSection .field textarea::placeholder{color:var(--ghost) !important}
#rsvpSection h2{color:var(--paper) !important}
#rsvpSection .lead{color:var(--dust) !important}

/* Light themes override the dark forced colors */
body.theme-light .confirm-gate,body.theme-light .confirm-gate *{color:var(--ink) !important}
body.theme-light .confirm-gate .gate-q{color:var(--ink) !important}
body.theme-light .confirm-gate p{color:var(--ink-soft) !important}
body.theme-light #rsvpSection .field label{color:var(--ink-soft) !important}
body.theme-light #rsvpSection .field input,body.theme-light #rsvpSection .field textarea{color:var(--ink) !important}

/* Re-confirm: editing pill is gone */
.eb-mode{display:none !important}
.editbar-l > span:not(.eb-mode){display:none !important}

/* Personalized hero welcome note (above eyebrow, only for invitees) */
.hero-welcome{font-family:var(--script);font-size:clamp(28px,4.5vw,48px);color:var(--gold-2);line-height:1.05;margin-bottom:18px;text-shadow:0 2px 14px rgba(0,0,0,.55),0 0 30px rgba(232,137,10,.25);font-weight:400;animation:welcomeIn 1.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes welcomeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ====================================================================
   INVITATION LETTER — modern, cheerful, theme-aware (overrides earlier)
   ==================================================================== */
.invitee-letter{background:var(--ink) !important}
.invitee-letter::before{background:radial-gradient(ellipse 70% 55% at 50% 45%,rgba(232,137,10,.20) 0%,rgba(245,166,35,.12) 35%,rgba(139,26,14,.08) 65%,transparent 90%) !important;animation:letterGlow 6s ease-in-out infinite}
body.theme-light .invitee-letter{background:var(--paper-2) !important}
body.theme-light .invitee-letter::before{background:radial-gradient(ellipse 70% 55% at 50% 45%,rgba(196,165,98,.25) 0%,rgba(196,165,98,.12) 40%,transparent 80%) !important}

.letter-card{position:relative;width:100%;max-width:520px;text-align:center;padding:64px clamp(28px,5vw,56px) 56px;border:none !important;background:transparent !important;backdrop-filter:none !important;border-radius:8px;animation:letterIn 1.2s cubic-bezier(.2,.8,.2,1) both}

.letter-frame,.letter-corner{display:none !important}

.letter-eyebrow{font-family:var(--mono);font-size:10px;font-weight:300;letter-spacing:.6em;text-transform:uppercase;color:var(--gold-2);line-height:1.6;margin-bottom:8px;display:inline-block;padding:8px 18px;background:rgba(232,137,10,.10);border:1px solid rgba(232,137,10,.30);border-radius:999px;backdrop-filter:blur(4px)}
.letter-amp{font-family:var(--display);font-style:italic;font-size:13px;color:var(--gold-2);margin:0 .15em}

.letter-to{font-family:var(--display);font-style:italic;font-size:16px;color:var(--dust);margin:34px 0 8px;letter-spacing:.04em;font-weight:300;opacity:.85}

.letter-name{font-family:var(--script);font-size:clamp(56px,11vw,100px);line-height:.95;background:linear-gradient(135deg,#fde890 0%,#fcc440 25%,#f5a623 50%,#e8890a 75%,#fcc440 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:letterShimmer 5s ease-in-out infinite;filter:drop-shadow(0 6px 30px rgba(232,137,10,.35)) drop-shadow(0 2px 8px rgba(252,196,64,.15));margin-bottom:8px;font-weight:400}

.letter-rule{display:flex;align-items:center;gap:14px;justify-content:center;margin:28px auto;color:rgba(232,137,10,.5);max-width:200px}
.letter-rule .l{flex:1;height:1px;background:linear-gradient(90deg,transparent,currentColor,transparent)}
.letter-rule .o{font-size:12px;color:var(--gold-2)}

.letter-from{font-family:var(--display);font-style:italic;font-size:17px;color:var(--paper);font-weight:300;margin-bottom:36px;letter-spacing:.02em}
.letter-from strong{font-style:normal;color:var(--gold-2);font-weight:500;letter-spacing:.03em}

.letter-btn{padding:18px 42px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.4em;text-transform:uppercase;cursor:pointer;background:linear-gradient(135deg,var(--gold-2) 0%,var(--gold) 50%,var(--gold-2) 100%);background-size:200% 100%;color:var(--ink);border:none;border-radius:999px;transition:all .3s;box-shadow:0 8px 30px rgba(232,137,10,.35),0 2px 8px rgba(252,196,64,.20);display:inline-flex;align-items:center;gap:10px;animation:letterBtnPulse 3s ease-in-out infinite}
@keyframes letterBtnPulse{0%,100%{box-shadow:0 8px 30px rgba(232,137,10,.35),0 2px 8px rgba(252,196,64,.20)}50%{box-shadow:0 12px 40px rgba(232,137,10,.55),0 4px 14px rgba(252,196,64,.35)}}
.letter-btn:hover{background-position:100% 50%;transform:translateY(-2px)}

.letter-hint{margin-top:22px;font-family:var(--mono);font-size:9px;letter-spacing:.4em;text-transform:uppercase;color:rgba(212,184,150,.5)}

/* Light theme version of the letter */
body.theme-light .letter-eyebrow{background:rgba(196,165,98,.12);border-color:var(--gold-3);color:var(--gold-3)}
body.theme-light .letter-to{color:var(--ink-soft)}
body.theme-light .letter-name{filter:drop-shadow(0 4px 14px rgba(196,165,98,.25))}
body.theme-light .letter-from{color:var(--ink)}
body.theme-light .letter-from strong{color:var(--gold-3)}
body.theme-light .letter-rule{color:rgba(196,165,98,.4)}
body.theme-light .letter-hint{color:var(--ghost)}
body.theme-light .letter-btn{color:#fff;background:linear-gradient(135deg,var(--ink-2) 0%,var(--ink) 50%,var(--ink-2) 100%);box-shadow:0 8px 30px rgba(45,32,24,.20)}

/* More celebratory particles — golden + slight color variety */
.letter-particle:nth-child(3n){background:radial-gradient(circle,#fde890,transparent);box-shadow:0 0 12px rgba(253,232,144,.6)}
.letter-particle:nth-child(5n){width:3px !important;height:3px !important;background:radial-gradient(circle,#ffffff,transparent)}

/* ============= FLORAL WATERCOLOR TEMPLATE — soft white, burgundy peonies, blush, sage ============= */
body.theme-floral-watercolor{
  --paper:#FFFEFB;--paper-2:#F8F4ED;
  --ink:#3A3530;--ink-2:#4A4540;--ink-soft:#6A655C;
  --dust:#A89E94;--ghost:#C8BEB4;--muted:#A89E94;
  --line:rgba(58,53,48,.08);--line-2:rgba(58,53,48,.16);
  --seam:rgba(156,174,156,.25);
  /* Burgundy peonies as primary "rojo" accent */
  --gold:#9C7A8E;--gold-2:#B89AAA;--gold-3:#7A5C70;--gold-4:#D4BACB;
  --marigold:#9C7A8E;--marigold-2:#B89AAA;--marigold-3:#D4BACB;
  --wine:#6B1E2C;--wine-2:#4A1420;
  --rojo:#6B1E2C;--rojo-2:#8E2D40;--rojo-3:#A84258;
  --sage:#9CAE9C;--verde:#9CAE9C;--verde-2:#7C9078;
  --terra:#C49A8E;--terra-2:#A87870;
  --teal:#8AA0A0;
  /* Blush soft accent for buttons */
  --blush:#E8B0B8;--blush-2:#D89AA2;
}
/* Watercolor floral corner blobs (top-right) — CSS approximation */
body.theme-floral-watercolor::before{
  content:"";position:fixed;top:-40px;right:-60px;width:min(420px,55vw);height:min(420px,55vw);pointer-events:none;z-index:5;opacity:.92;
  background:
    radial-gradient(ellipse 38% 28% at 65% 30%,rgba(107,30,44,.85) 0%,rgba(142,45,64,.55) 35%,transparent 65%),
    radial-gradient(ellipse 32% 22% at 80% 55%,rgba(232,176,184,.75) 0%,rgba(216,154,162,.45) 40%,transparent 70%),
    radial-gradient(ellipse 30% 22% at 45% 50%,rgba(156,174,156,.65) 0%,rgba(124,144,120,.35) 45%,transparent 75%),
    radial-gradient(ellipse 26% 18% at 55% 75%,rgba(232,176,184,.55) 0%,transparent 65%),
    radial-gradient(ellipse 24% 18% at 75% 80%,rgba(156,174,156,.45) 0%,transparent 70%);
  filter:blur(2px) saturate(1.05);
  border-bottom-left-radius:60% 75%;
}
@media(max-width:600px){
  body.theme-floral-watercolor::before{display:none}
  /* Mobile: floral cluster appears between photo and names instead — handled by adding to hero ::after */
  body.theme-floral-watercolor .hero::after{
    content:"";display:block;height:160px;background:
      radial-gradient(ellipse 38% 50% at 50% 40%,rgba(107,30,44,.85) 0%,rgba(142,45,64,.5) 35%,transparent 70%),
      radial-gradient(ellipse 30% 40% at 70% 55%,rgba(232,176,184,.7) 0%,transparent 70%),
      radial-gradient(ellipse 35% 45% at 30% 65%,rgba(156,174,156,.55) 0%,transparent 70%);
    filter:blur(2px);position:absolute;bottom:0;left:0;right:0;
  }
}

/* Floral Watercolor uses light theme defaults but with relaxed script + softer borders */
body.theme-floral-watercolor.theme-light .hero-script,
body.theme-floral-watercolor .hero-script{font-family:var(--script);color:var(--ink-2);text-shadow:none;font-weight:400}
body.theme-floral-watercolor .hero-and{color:var(--wine) !important}
body.theme-floral-watercolor .hero-sub,body.theme-floral-watercolor .hero-meta{color:var(--ink-soft);text-shadow:none;letter-spacing:.35em}
body.theme-floral-watercolor .hero-meta{font-size:11px}
body.theme-floral-watercolor .hero .eyebrow{color:var(--wine);text-shadow:none;letter-spacing:.4em}
body.theme-floral-watercolor .hero-bg::after{display:none !important}
body.theme-floral-watercolor .hero-welcome{color:var(--wine)}
body.theme-floral-watercolor .letter-name{background:linear-gradient(135deg,#8E2D40 0%,#6B1E2C 50%,#A84258 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 8px rgba(107,30,44,.15))}
body.theme-floral-watercolor .letter-eyebrow{color:var(--wine);background:rgba(107,30,44,.06);border-color:rgba(107,30,44,.20)}

/* ====================================================================
   CORNER DECORATION — uploadable PNG (e.g. watercolor florals)
   ==================================================================== */
.hero-corner{position:absolute;top:0;right:0;width:min(420px,55vw);height:min(420px,55vw);background:transparent no-repeat top right;background-size:contain;pointer-events:none;z-index:4;transition:filter .25s}
body.edit .hero-corner{pointer-events:auto;cursor:pointer}
body.edit .hero-corner:hover{outline:1px dashed var(--gold-2);outline-offset:-12px}
body.edit .hero-corner.empty{display:flex;align-items:flex-start;justify-content:flex-end;padding:20px}
body.edit .hero-corner.empty::before{content:"🌸 Add corner decoration";display:inline-block;padding:10px 16px;background:rgba(14,5,3,.85);color:var(--gold-2);font-family:var(--mono);font-size:9px;font-weight:300;letter-spacing:.3em;text-transform:uppercase;border:1px solid var(--gold-2);border-radius:0;backdrop-filter:blur(4px)}
body:not(.edit) .hero-corner.empty{display:none}
@media(max-width:600px){
  .hero-corner{width:60vw;height:60vw}
  body.edit .hero-corner.empty::before{font-size:8px;letter-spacing:.2em;padding:8px 12px}
}

/* Override floral-watercolor — remove the fake gradient blobs, keep palette */
body.theme-floral-watercolor::before{display:none !important}
body.theme-floral-watercolor .hero::after{display:none !important}

/* ====================================================================
   HERO TEXT VISIBILITY — strong shadows so text reads on ANY background
   without filtering/darkening the image
   ==================================================================== */
.hero-welcome{
  font-size:clamp(34px,5.5vw,58px) !important;
  text-shadow:0 2px 4px rgba(0,0,0,.85),0 4px 18px rgba(0,0,0,.7),0 0 30px rgba(0,0,0,.4) !important;
  font-weight:500 !important;
}
.hero .eyebrow{
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 10px rgba(0,0,0,.6),0 4px 20px rgba(0,0,0,.4) !important;
  font-weight:600 !important;
  color:#fff !important;
}
.hero-script{
  text-shadow:0 2px 6px rgba(0,0,0,.7),0 4px 30px rgba(0,0,0,.55),0 8px 50px rgba(0,0,0,.4),0 0 80px rgba(0,0,0,.3) !important;
}
.hero-and{text-shadow:0 2px 6px rgba(0,0,0,.7),0 4px 16px rgba(0,0,0,.5) !important}
.hero-sub{
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 12px rgba(0,0,0,.7),0 4px 18px rgba(0,0,0,.4) !important;
  font-weight:400 !important;
  color:#fff !important;
}
.hero-meta{
  text-shadow:0 1px 3px rgba(0,0,0,.95),0 2px 8px rgba(0,0,0,.75),0 4px 14px rgba(0,0,0,.45) !important;
  font-weight:600 !important;
  color:#fff !important;
}
.hero-meta .dot{box-shadow:0 0 6px rgba(0,0,0,.6) !important}
.hero-rule{filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.hero-scroll{
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 10px rgba(0,0,0,.6) !important;
  color:#fff !important;
  font-weight:500 !important;
}

/* ====================================================================
   HERO RSVP BUTTONS — inline accept/decline (replaces scroll-down gate)
   ==================================================================== */
.hero-rsvp{display:flex;gap:14px;justify-content:center;margin-top:36px;flex-wrap:wrap;animation:rise 1.2s .3s cubic-bezier(.2,.7,.2,1) both}
.hero-rsvp-btn{padding:16px 32px;font-family:var(--mono);font-size:11px;letter-spacing:.4em;text-transform:uppercase;cursor:pointer;border-radius:999px;transition:all .25s;backdrop-filter:blur(8px);font-weight:500;min-width:200px;border:1px solid transparent}
.hero-rsvp-btn.yes{background:rgba(232,137,10,.92);color:#fff;border-color:var(--gold-2);box-shadow:0 8px 30px rgba(232,137,10,.45),0 2px 8px rgba(252,196,64,.20);text-shadow:0 1px 2px rgba(0,0,0,.3)}
.hero-rsvp-btn.yes:hover{background:var(--gold);transform:translateY(-2px);box-shadow:0 12px 40px rgba(232,137,10,.6)}
.hero-rsvp-btn.no{background:rgba(20,8,4,.55);color:#fff;border-color:rgba(255,255,255,.4);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.hero-rsvp-btn.no:hover{background:rgba(20,8,4,.85);border-color:#fff;transform:translateY(-2px)}
@media(max-width:600px){
  .hero-rsvp{flex-direction:column;gap:10px;width:100%;padding:0 18px}
  .hero-rsvp-btn{width:100%;min-width:0;padding:14px 22px;font-size:10px;letter-spacing:.3em}
}
.hero-meta #heroTime:empty{display:none}
.hero-meta #heroTime:empty + .dot{display:none}

/* ====================================================================
   HERO RESTRUCTURE — clean vertical rhythm + soft text scrim
   Image stays visible, text gets a focused readable column
   ==================================================================== */
.hero{position:relative}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* central column scrim (vertical) */
    linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.30) 22%,rgba(0,0,0,.42) 50%,rgba(0,0,0,.30) 78%,rgba(0,0,0,0) 100%),
    /* horizontal narrowing — only scrim where text is */
    radial-gradient(ellipse 70% 80% at 50% 50%,rgba(0,0,0,.20) 0%,transparent 70%);
  mix-blend-mode:multiply;
}
.hero-inner{position:relative;z-index:2}
.hero-inner > *{margin-top:18px}
.hero-inner > *:first-child{margin-top:0}

/* Welcome — sits as a clean tagline, not big script */
.hero-welcome{
  font-family:var(--mono) !important;
  font-size:clamp(11px,1.4vw,13px) !important;
  font-weight:500 !important;
  letter-spacing:.5em !important;
  text-transform:uppercase !important;
  background:linear-gradient(135deg,var(--gold-2),var(--gold)) !important;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent !important;
  color:transparent !important;
  display:inline-block;padding:7px 18px;
  border:1px solid rgba(232,137,10,.55);
  border-radius:999px;
  text-shadow:none !important;
  margin-bottom:18px !important;
  position:relative;
}
.hero-welcome::before{content:"✣ ";color:var(--gold-2);-webkit-text-fill-color:var(--gold-2);margin-right:6px}

/* Eyebrow — larger letter-spacing for hierarchy */
.hero .eyebrow{
  font-size:clamp(10px,1.2vw,12px) !important;
  letter-spacing:.6em !important;
  display:inline-block;
}

/* Names — slight tighten, better line height */
.hero-script{
  font-size:clamp(64px,13vw,160px) !important;
  line-height:.92 !important;
  font-weight:400 !important;
  margin:6px 0 !important;
}

/* Sub — italic Crimson */
.hero-sub{
  font-family:var(--display) !important;
  font-style:italic;
  font-size:clamp(18px,2.2vw,26px) !important;
  font-weight:300 !important;
  letter-spacing:.04em !important;
  margin-top:6px !important;
  opacity:.95;
}

/* Meta line — compact, single row, centered */
.hero-meta{
  font-size:clamp(10px,1.2vw,12px) !important;
  letter-spacing:.45em !important;
  gap:14px !important;
  margin-top:24px !important;
  font-weight:600 !important;
  flex-wrap:wrap;
}
.hero-meta .dot{width:3px !important;height:3px !important;background:var(--gold-2) !important;flex:none}
#heroTime:empty{display:none}
#heroTime:empty + .dot{display:none}

/* Rule — tighter */
.hero-rule{margin-top:26px !important;max-width:240px !important}
.hero-rule .o{font-size:11px !important;color:var(--gold-2);opacity:.9}

/* RSVP buttons — gentler visual weight, not screaming */
.hero-rsvp{margin-top:34px !important;gap:12px !important}
.hero-rsvp-btn{
  font-size:10px !important;
  letter-spacing:.45em !important;
  padding:14px 28px !important;
  min-width:180px !important;
  font-weight:500 !important;
}
.hero-rsvp-btn.yes{box-shadow:0 6px 24px rgba(232,137,10,.4),0 1px 4px rgba(0,0,0,.3) !important}
.hero-rsvp-btn.no{background:rgba(20,8,4,.4) !important}

@media(max-width:600px){
  .hero-inner > *{margin-top:14px}
  .hero-welcome{font-size:10px !important;letter-spacing:.4em !important;padding:6px 14px !important;margin-bottom:14px !important}
  .hero-script{font-size:clamp(48px,14vw,90px) !important}
  .hero-sub{font-size:16px !important}
  .hero-meta{font-size:9px !important;letter-spacing:.35em !important;gap:10px !important;margin-top:18px !important}
  .hero-rsvp{margin-top:28px !important}
}

/* ====================================================================
   LAYOUT: CLASSIC (Knot-inspired) — light cream hero, soft script names
   Activated via body.layout-classic class
   ==================================================================== */
.classic-monogram-bar{display:none;position:sticky;top:0;z-index:60;padding:18px 24px;background:rgba(251,247,240,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);text-align:center;font-family:var(--display);font-style:italic;font-size:24px;font-weight:500;letter-spacing:.15em;color:var(--ink)}
.classic-monogram-bar .menu-toggle{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:24px;height:18px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;background:none;border:none;padding:0}
.classic-monogram-bar .menu-toggle span{display:block;width:100%;height:2px;background:var(--ink);border-radius:1px}
body.layout-classic .classic-monogram-bar{display:block}

/* Hero transforms to light, no full-bleed photo */
body.layout-classic .hero{min-height:auto !important;padding:60px 24px !important;background:var(--paper) !important;color:var(--ink) !important;display:block !important;text-align:center}
body.layout-classic .hero::before{display:none !important}
body.layout-classic .hero-bg{display:none !important}
body.layout-classic .hero-bg::after{display:none !important}
body.layout-classic .hero-corner{position:absolute;top:0;right:0;width:min(420px,50vw);height:min(420px,50vw);z-index:5;display:block !important}
body.layout-classic .hero-inner{max-width:760px;margin:0 auto;padding-top:80px;position:relative;z-index:6}
body.layout-classic .hero-welcome{background:transparent !important;border:none !important;color:var(--ink-soft) !important;-webkit-text-fill-color:var(--ink-soft) !important;font-size:11px !important}
body.layout-classic .hero-welcome::before{color:var(--gold-3)}
body.layout-classic .hero .eyebrow{color:var(--gold-3) !important;text-shadow:none !important}
body.layout-classic .hero-script{font-family:var(--script) !important;color:var(--ink-2) !important;text-shadow:none !important;font-size:clamp(46px,8vw,84px) !important;font-weight:400 !important;line-height:1.05 !important;filter:none !important}
body.layout-classic .hero-and{font-family:var(--script) !important;color:var(--ink-2) !important;-webkit-text-fill-color:var(--ink-2) !important;background:none !important;text-shadow:none !important;font-size:.95em !important}
body.layout-classic .hero-sub{display:none !important}
body.layout-classic .hero-meta{color:var(--ink-soft) !important;text-shadow:none !important;font-size:11px !important;letter-spacing:.25em !important;margin-top:20px !important;font-weight:600 !important;flex-direction:row;flex-wrap:wrap}
body.layout-classic .hero-meta .dot{background:var(--ink-soft) !important;width:4px !important;height:4px !important}
body.layout-classic .hero-rule{display:none !important}
body.layout-classic .hero-scroll{display:none !important}
body.layout-classic .hero-rsvp-btn.yes{background:var(--ink) !important;color:var(--paper) !important;border-color:var(--ink) !important;text-shadow:none !important;box-shadow:0 4px 18px rgba(20,8,4,.20) !important}
body.layout-classic .hero-rsvp-btn.no{background:transparent !important;color:var(--ink) !important;border-color:var(--line-2) !important;text-shadow:none !important}

/* "Wedding Day" callout section after hero */
.classic-day-block{display:none;text-align:center;padding:60px 24px;background:var(--paper)}
.classic-day-block .label{font-family:var(--display);font-weight:500;font-size:clamp(28px,4vw,42px);letter-spacing:.18em;color:var(--ink);text-transform:uppercase;margin-bottom:14px}
.classic-day-block .date{font-family:var(--display);font-style:italic;font-size:clamp(22px,2.4vw,30px);color:var(--ink-soft);font-weight:400}
.classic-day-block .countdown-line{font-family:var(--mono);font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-3);margin-top:12px;font-weight:600}
body.layout-classic .classic-day-block{display:block}

/* Nav strip (mobile-style horizontal links) */
.classic-nav{display:none;justify-content:center;gap:0;flex-wrap:wrap;padding:30px 24px 60px;background:var(--paper);border-top:1px solid var(--line)}
.classic-nav a{font-family:var(--display);font-style:italic;font-size:18px;font-weight:400;color:var(--ink);padding:14px 22px;text-decoration:none;border-bottom:2px solid transparent;transition:border-color .2s}
.classic-nav a:hover,.classic-nav a.active{border-bottom-color:var(--gold)}
body.layout-classic .classic-nav{display:flex}

/* Hide modal-corner badge in classic layout */
body.layout-classic .hero-corner.empty::before{font-size:9px}

/* Force light theme look for classic regardless of theme */
body.layout-classic{background:var(--paper);color:var(--ink)}
body.layout-classic .countdown,body.layout-classic .count{background:var(--paper) !important;border-color:var(--line) !important}
body.layout-classic .count-num{color:var(--gold-3) !important}
body.layout-classic .count-label{color:var(--ink-soft) !important}

@media(max-width:600px){
  body.layout-classic .hero-inner{padding-top:200px}
  body.layout-classic .hero-corner{width:90vw;height:60vw}
  body.layout-classic .classic-day-block .label{font-size:26px;letter-spacing:.12em}
  body.layout-classic .classic-nav{flex-direction:column;gap:0;padding:20px 24px 40px}
  body.layout-classic .classic-nav a{border-bottom:1px solid var(--line);width:100%;text-align:center}
}

/* ====================================================================
   WELCOME CHIP FIX + REAL GOLD BUTTON + GOLD REFERENCE IMAGE
   ==================================================================== */

/* Welcome chip — centered block, readable text */
.hero-welcome{
  display:block !important;
  margin:0 auto 22px !important;
  width:max-content !important;
  max-width:90% !important;
  background:rgba(20,8,4,.55) !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:initial !important;
  color:#fde890 !important;
  border:1px solid rgba(252,196,64,.55) !important;
  padding:8px 22px !important;
  border-radius:999px !important;
  font-family:var(--mono) !important;
  font-size:11px !important;
  letter-spacing:.5em !important;
  text-transform:uppercase !important;
  font-weight:500 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4) !important;
  backdrop-filter:blur(6px);
}
.hero-welcome::before{content:"✣";color:#fde890;-webkit-text-fill-color:#fde890;margin-right:10px;opacity:.85}

/* REAL GOLD — metallic gradient (5-stop true gold) for the accept button */
.hero-rsvp-btn.yes{
  background:linear-gradient(135deg,#BF953F 0%,#FCF6BA 25%,#D4AF37 50%,#FBF5B7 75%,#AA771C 100%) !important;
  background-size:200% 100% !important;
  color:#3A1F00 !important;
  border:1px solid #D4AF37 !important;
  text-shadow:0 1px 1px rgba(252,246,186,.6) !important;
  box-shadow:0 4px 18px rgba(212,175,55,.45),0 1px 4px rgba(0,0,0,.3),inset 0 1px 0 rgba(252,246,186,.6),inset 0 -1px 0 rgba(170,119,28,.3) !important;
  font-weight:700 !important;
  transition:background-position .35s ease,transform .25s ease,box-shadow .25s ease !important;
}
.hero-rsvp-btn.yes:hover{
  background-position:100% 50% !important;
  box-shadow:0 8px 28px rgba(212,175,55,.6),0 2px 6px rgba(0,0,0,.35),inset 0 1px 0 rgba(252,246,186,.7) !important;
  transform:translateY(-2px) !important;
}

/* When the host uploads a real gold reference image, use it as the button background */
body[data-gold-ref="1"] .hero-rsvp-btn.yes{
  background-image:var(--gold-ref-img) !important;
  background-size:cover !important;
  background-position:center !important;
}

/* Letter-card "Open Invitation" button — use same true gold */
.letter-btn{
  background:linear-gradient(135deg,#BF953F 0%,#FCF6BA 25%,#D4AF37 50%,#FBF5B7 75%,#AA771C 100%) !important;
  background-size:200% 100% !important;
  color:#3A1F00 !important;
  text-shadow:0 1px 1px rgba(252,246,186,.6) !important;
  font-weight:700 !important;
}
.letter-btn:hover{background-position:100% 50% !important}
body[data-gold-ref="1"] .letter-btn{background-image:var(--gold-ref-img) !important;background-size:cover !important;background-position:center !important}

/* ====================================================================
   AI CHAT WIDGET — answers strictly from page state
   ==================================================================== */
.chat-fab{position:fixed;bottom:80px;right:20px;z-index:75;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#BF953F,#D4AF37);color:#1a0808;border:1px solid #D4AF37;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(212,175,55,.45),0 2px 6px rgba(0,0,0,.3);font-size:20px;transition:transform .25s}
.chat-fab:hover{transform:translateY(-2px) scale(1.05)}
body.invitee-pending .chat-fab,body.invitee-letter-active .chat-fab{display:none}
.chat-panel{position:fixed;bottom:140px;right:20px;z-index:76;width:min(360px,calc(100vw - 40px));max-height:min(560px,75vh);background:rgba(14,5,3,.97);border:1px solid var(--gold-2);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.5);display:none;flex-direction:column;overflow:hidden;backdrop-filter:blur(20px)}
.chat-panel.open{display:flex;animation:chatIn .3s cubic-bezier(.2,.8,.2,1)}
@keyframes chatIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.chat-head{padding:14px 18px;background:rgba(232,137,10,.10);border-bottom:1px solid var(--seam);display:flex;align-items:center;justify-content:space-between;color:var(--paper);font-family:var(--mono);font-size:10px;letter-spacing:.4em;text-transform:uppercase;font-weight:500}
.chat-head .close{background:none;border:none;color:var(--gold-2);cursor:pointer;font-size:18px;padding:0;line-height:1}
.chat-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.chat-msg{padding:10px 14px;border-radius:14px;font-family:var(--serif);font-size:14px;line-height:1.5;max-width:85%}
.chat-msg.bot{background:rgba(245,234,212,.08);color:var(--paper);align-self:flex-start;border:1px solid var(--seam)}
.chat-msg.user{background:linear-gradient(135deg,#BF953F,#D4AF37);color:#1a0808;align-self:flex-end;font-weight:500}
.chat-msg.bot.thinking{font-style:italic;color:var(--dust)}
.chat-input-row{padding:12px;border-top:1px solid var(--seam);display:flex;gap:8px;background:rgba(14,5,3,.6)}
.chat-input-row input{flex:1;padding:10px 14px;border:1px solid var(--seam);background:rgba(245,234,212,.06);color:var(--paper);border-radius:999px;outline:none;font-family:var(--serif);font-size:14px}
.chat-input-row input:focus{border-color:var(--gold-2)}
.chat-input-row button{padding:10px 18px;background:var(--gold-2);color:#1a0808;border:none;border-radius:999px;cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:600}
.chat-input-row button:disabled{opacity:.5;cursor:wait}
.chat-suggest{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 6px}
.chat-suggest button{padding:6px 12px;background:rgba(245,234,212,.05);border:1px solid var(--seam);color:var(--gold-2);border-radius:999px;font-family:var(--serif);font-style:italic;font-size:12px;cursor:pointer}
.chat-suggest button:hover{background:rgba(232,137,10,.15)}
@media(max-width:600px){
  .chat-panel{right:10px;left:10px;width:auto;bottom:80px;max-height:70vh}
  .chat-fab{bottom:70px;right:14px;width:42px;height:42px;font-size:17px}
}
body.edit .chat-fab,body.edit .chat-panel{display:none !important}

/* ====================================================================
   MODERN ENVELOPE — letter-card looks like a real envelope with flap + seal
   ==================================================================== */
.letter-card{
  position:relative !important;
  width:100% !important;
  max-width:440px !important;
  background:linear-gradient(180deg,#FBF7F0 0%,#F2E8D6 50%,#EAD9BC 100%) !important;
  border:none !important;
  border-radius:6px !important;
  padding:130px 36px 48px !important;
  box-shadow:
    0 60px 100px rgba(0,0,0,.30),
    0 24px 40px rgba(0,0,0,.18),
    0 8px 16px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(0,0,0,.05) !important;
  overflow:visible !important;
  text-align:center;
}

/* Subtle paper texture */
.letter-card::before{
  content:"" !important;
  position:absolute !important;
  top:-1px;left:0;right:0;
  height:110px;
  background:
    linear-gradient(180deg,#F8EFD8 0%,#EAD8B8 100%);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  border-radius:6px 6px 0 0;
  filter:drop-shadow(0 6px 4px rgba(0,0,0,.10));
  z-index:1;
  display:block !important;
}

/* Wax seal at flap apex */
.letter-card::after{
  content:"" !important;
  position:absolute !important;
  top:84px;
  left:50%;
  transform:translateX(-50%) !important;
  width:62px;height:62px;
  background:
    radial-gradient(circle at 30% 25%,#E8442C 0%,#C42820 35%,#8B1A0E 70%,#4A0808 100%);
  border-radius:50%;
  display:block;
  box-shadow:
    0 6px 14px rgba(0,0,0,.45),
    inset -3px -3px 8px rgba(0,0,0,.35),
    inset 3px 3px 8px rgba(255,255,255,.12);
  z-index:3;
}

/* Monogram on the seal */
.letter-card .letter-seal-mono{
  position:absolute;
  top:84px;
  left:50%;
  transform:translateX(-50%);
  width:62px;height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--script);
  font-size:24px;
  color:#FDD878;
  text-shadow:0 1px 1px rgba(0,0,0,.6),0 0 4px rgba(252,196,64,.3);
  z-index:4;
  pointer-events:none;
  letter-spacing:-.02em;
}

/* Restyle content for envelope context */
.letter-frame,.letter-corner{display:none !important}
.letter-eyebrow{
  display:inline-block !important;
  background:transparent !important;
  border:none !important;
  border-bottom:1px solid rgba(196,40,32,.25) !important;
  border-radius:0 !important;
  padding:0 0 8px !important;
  color:#7A2828 !important;
  font-size:9px !important;
  letter-spacing:.5em !important;
  margin-bottom:24px !important;
  backdrop-filter:none !important;
}
.letter-to{
  font-family:var(--display) !important;
  font-style:italic !important;
  color:#9A7858 !important;
  font-size:14px !important;
  margin:14px 0 4px !important;
  letter-spacing:.04em !important;
}
.letter-name{
  background:linear-gradient(135deg,#BF953F 0%,#FCF6BA 25%,#D4AF37 50%,#FBF5B7 75%,#AA771C 100%) !important;
  background-size:200% 100% !important;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent !important;
  font-size:clamp(48px,9vw,78px) !important;
  filter:drop-shadow(0 2px 4px rgba(170,119,28,.2)) !important;
  margin:6px 0 18px !important;
  font-weight:400 !important;
  animation:letterShimmer 5s ease-in-out infinite !important;
}
.letter-rule{
  margin:18px auto !important;
  max-width:160px !important;
  color:rgba(196,40,32,.4) !important;
}
.letter-rule .o{color:#7A2828 !important;font-size:10px !important}
.letter-from{
  font-family:var(--display) !important;
  font-style:italic !important;
  color:#5A3A2A !important;
  font-size:15px !important;
  margin-bottom:30px !important;
  font-weight:400 !important;
}
.letter-from strong{
  font-style:normal !important;
  color:#7A2828 !important;
  font-weight:600 !important;
  letter-spacing:.02em;
}
.letter-btn{
  background:linear-gradient(135deg,#1a0808 0%,#3a1818 50%,#1a0808 100%) !important;
  background-size:200% 100% !important;
  color:#FDD878 !important;
  border:1px solid #5A1818 !important;
  text-shadow:none !important;
  box-shadow:0 6px 20px rgba(26,8,8,.45),inset 0 1px 0 rgba(252,216,120,.2) !important;
  padding:16px 36px !important;
  font-weight:600 !important;
}
.letter-btn:hover{background-position:100% 50% !important;transform:translateY(-2px) !important}
.letter-hint{color:#9A7858 !important;font-size:9px !important;margin-top:18px !important}

/* Envelope opens animation when user clicks */
.invitee-letter.opened .letter-card{transform:translateY(-30px) scale(.98);transition:transform .8s cubic-bezier(.7,.05,.4,.95)}
.invitee-letter.opened .letter-card::before{transform:rotateX(-180deg);transform-origin:top center;transition:transform 1s cubic-bezier(.7,.05,.4,.95);opacity:0}

/* Body of letter takes priority over light themes */
body.theme-light .letter-card{background:linear-gradient(180deg,#FBF7F0 0%,#F2E8D6 50%,#EAD9BC 100%) !important}

/* Ensure envelope shows even when invitee-letter has dark backdrop */
.invitee-letter{background:radial-gradient(ellipse at 50% 40%,#1a0808 0%,#0a0408 60%,#000 100%) !important}

/* ====================================================================
   HERO LOCATIONS — compact strip of schedule items in the hero so
   guests can see church/dinner/etc. (with time + address) before RSVPing
   ==================================================================== */
.hero-locations{display:flex;flex-direction:column;gap:10px;max-width:540px;margin:30px auto 0;padding:0 12px}
.hero-locations:empty{display:none}
.hero-loc-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px;background:rgba(20,8,4,.45);backdrop-filter:blur(8px);border:1px solid rgba(252,196,64,.30);border-radius:8px;text-align:left}
.hero-loc-item .lt-time{font-family:var(--display);font-style:italic;font-size:18px;color:var(--gold-2);font-weight:500;flex:none;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.hero-loc-item .lt-info{flex:1;min-width:0}
.hero-loc-item .lt-title{font-family:var(--mono);font-size:9px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-2);font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.hero-loc-item .lt-place{font-family:var(--serif);font-style:italic;font-size:14px;color:#fff;margin-top:2px;text-shadow:0 1px 2px rgba(0,0,0,.7);font-weight:300;line-height:1.3}
.hero-loc-item .lt-dir{flex:none;font-family:var(--mono);font-size:8px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-2);text-decoration:none;padding:6px 10px;border:1px solid var(--gold-2);border-radius:999px;font-weight:500;white-space:nowrap}
.hero-loc-item .lt-dir:hover{background:var(--gold-2);color:var(--ink)}
@media(max-width:600px){
  .hero-loc-item{flex-direction:column;align-items:flex-start;gap:6px;padding:12px 14px;text-align:center;align-items:center}
  .hero-loc-item .lt-time{font-size:16px}
  .hero-loc-item .lt-place{font-size:13px;text-align:center}
}

/* Light theme adjustments */
body.theme-light .hero-loc-item{background:rgba(255,255,255,.7);border-color:var(--line);backdrop-filter:blur(4px)}
body.theme-light .hero-loc-item .lt-time{color:var(--gold-3);text-shadow:none}
body.theme-light .hero-loc-item .lt-title{color:var(--gold-3);text-shadow:none}
body.theme-light .hero-loc-item .lt-place{color:var(--ink);text-shadow:none}
body.theme-light .hero-loc-item .lt-dir{color:var(--gold-3);border-color:var(--gold-3)}
body.theme-light .hero-loc-item .lt-dir:hover{background:var(--gold-3);color:#fff}

/* Schedule photo (replaces or supplements the embedded map) */
.sched-photo{width:100%;height:180px;background-size:cover;background-position:center;border:1px solid var(--seam)}
@media(max-width:600px){.sched-photo{height:140px}}

/* ====================================================================
   PREMIUM WEDDING HERO REFINEMENT — luxury editorial layout
   Adds icon meta rows, OUR CELEBRATION timeline title, Khalil Gibran
   quote block, refined gold buttons, stronger cinematic overlay.
   These rules are appended last so they win the cascade.
   ==================================================================== */

/* ---- Cinematic overlay removed per user request — background image shows as-is.
       Text legibility now relies solely on per-element text-shadows. ---- */
.hero::before{background:transparent !important;mix-blend-mode:normal !important}

/* ---- Sub-eyebrow (second small uppercase line beneath the gold eyebrow) ---- */
.hero-eyebrow-sub{
  font-family:var(--mono);
  font-size:clamp(9px,1vw,11px);
  letter-spacing:.5em;
  text-transform:uppercase;
  color:#fff;
  font-weight:500;
  margin-top:10px !important;
  text-shadow:0 1px 2px rgba(0,0,0,.85),0 2px 10px rgba(0,0,0,.7),0 0 24px rgba(0,0,0,.5);
}

/* ---- Meta block: 3 stacked rows with circular gold icons ---- */
.hero-meta{
  flex-direction:column !important;
  gap:10px !important;
  margin-top:34px !important;
  letter-spacing:.4em !important;
  font-size:clamp(11px,1.3vw,13px) !important;
  font-weight:500 !important;
}
.hero-meta-row{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 2px 10px rgba(0,0,0,.75),0 0 18px rgba(0,0,0,.5);
}
.hero-meta-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;height:34px;
  border-radius:50%;
  background:rgba(20,8,4,.55);
  border:1px solid rgba(252,196,64,.7);
  font-size:14px;
  flex:none;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.7));
  letter-spacing:0;
  backdrop-filter:blur(4px);
}
.hero-meta-row:has(#heroTime:empty){display:none}

/* ---- "OUR CELEBRATION" section title + auto-hide if no items ---- */
.hero-celebration{margin-top:46px}
.hero-celebration:has(#heroLocations:empty){display:none}
.hero-section-title{
  font-family:var(--mono);
  font-size:clamp(11px,1.3vw,13px);
  letter-spacing:.55em;
  text-transform:uppercase;
  color:#fcc440;
  font-weight:600;
  text-align:center;
  margin-bottom:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:0 4px;
  text-shadow:0 1px 2px rgba(0,0,0,.9),0 2px 12px rgba(0,0,0,.7),0 0 20px rgba(0,0,0,.5);
}
.hero-section-title::before,
.hero-section-title::after{
  content:"";
  display:inline-block;
  width:36px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-2),transparent);
  opacity:.7;
}

/* ---- Timeline restyle: no boxes, gold dividers, gold dot ---- */
.hero-locations{
  gap:0 !important;
  padding:0 !important;
  margin:0 auto !important;
  max-width:560px;
}
.hero-loc-item{
  background:transparent !important;
  backdrop-filter:none !important;
  border:none !important;
  border-bottom:1px solid rgba(252,196,64,.18) !important;
  border-radius:0 !important;
  padding:18px 8px 18px 32px !important;
  text-align:left !important;
  align-items:center !important;
  position:relative;
  gap:16px !important;
}
.hero-loc-item:last-child{border-bottom:none !important}
.hero-loc-item::before{
  content:"";
  position:absolute;
  left:6px;top:50%;transform:translateY(-50%);
  width:10px;height:10px;border-radius:50%;
  background:#fcc440;
  box-shadow:0 0 0 3px rgba(20,8,4,.55),0 0 0 4px rgba(252,196,64,.6),0 0 14px rgba(252,196,64,.55),0 1px 3px rgba(0,0,0,.7);
}
.hero-loc-item{border-bottom-color:rgba(252,196,64,.3) !important}
.hero-loc-item .lt-time{
  font-family:var(--display) !important;
  font-style:italic;
  font-size:clamp(16px,2vw,20px) !important;
  color:#fcc440 !important;
  font-weight:600;
  flex:none;
  min-width:84px;
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 2px 10px rgba(0,0,0,.75),0 0 16px rgba(0,0,0,.55);
}
.hero-loc-item .lt-info{flex:1;min-width:0}
.hero-loc-item .lt-title{
  font-family:var(--mono);
  font-size:9px;letter-spacing:.45em;text-transform:uppercase;
  color:#fcc440;
  font-weight:600;
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 2px 8px rgba(0,0,0,.7);
}
.hero-loc-item .lt-place{
  font-family:var(--serif);
  font-style:italic;
  font-size:14px;color:#fff;
  margin-top:3px;
  font-weight:400;line-height:1.35;
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 2px 10px rgba(0,0,0,.75),0 0 18px rgba(0,0,0,.55);
}
.hero-loc-item .lt-dir{
  flex:none;
  font-family:var(--mono);
  font-size:8px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold-2);text-decoration:none;
  padding:6px 12px;
  border:1px solid rgba(252,196,64,.5);
  border-radius:999px;
  font-weight:500;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s;
}
.hero-loc-item .lt-dir:hover{
  background:var(--gold-2);
  color:var(--ink) !important;
  border-color:var(--gold-2);
}

/* ---- Khalil Gibran quote block ---- */
.hero-quote{
  margin-top:46px !important;
  max-width:600px;
  padding:0 24px;
  position:relative;
  text-align:center;
}
.hero-quote::before{
  content:"\201C";
  display:block;
  font-family:var(--display);
  font-size:60px;line-height:.5;
  color:var(--gold-2);
  opacity:.55;
  margin-bottom:18px;
}
.hero-quote p{
  font-family:var(--display) !important;
  font-style:italic;
  font-size:clamp(15px,1.7vw,20px);
  font-weight:400;
  color:#fff;
  line-height:1.6;
  letter-spacing:.01em;
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 2px 12px rgba(0,0,0,.75),0 0 24px rgba(0,0,0,.55);
}
.hero-quote cite{
  display:block;
  margin-top:14px;
  font-family:var(--mono);
  font-style:normal;
  font-size:10px;
  letter-spacing:.45em;
  text-transform:uppercase;
  color:#fcc440;
  font-weight:600;
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 2px 8px rgba(0,0,0,.7);
}

/* ---- RSVP buttons: premium gold gradient + thin gold-outline variant ---- */
.hero-rsvp{margin-top:42px !important;gap:14px !important}
.hero-rsvp-btn{
  border-radius:999px !important;
  font-family:var(--mono) !important;
  font-size:11px !important;
  letter-spacing:.4em !important;
  font-weight:600 !important;
  padding:16px 34px !important;
  min-width:200px !important;
  transition:transform .25s,box-shadow .25s,background .25s,border-color .25s,color .25s !important;
  backdrop-filter:blur(6px) !important;
}
.hero-rsvp-btn.yes{
  background:linear-gradient(135deg,#fcc440 0%,#f5a623 45%,#e8890a 100%) !important;
  color:#1a1410 !important;
  border:1px solid rgba(252,196,64,.6) !important;
  text-shadow:none !important;
  box-shadow:0 12px 30px rgba(232,137,10,.38),0 2px 6px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.hero-rsvp-btn.yes:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 42px rgba(232,137,10,.55),0 4px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.5) !important;
  background:linear-gradient(135deg,#fcc440 0%,#fcc440 35%,#f5a623 100%) !important;
}
.hero-rsvp-btn.no{
  background:transparent !important;
  color:#f5ead4 !important;
  border:1px solid rgba(252,196,64,.5) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.7) !important;
  box-shadow:0 4px 18px rgba(0,0,0,.25) !important;
}
.hero-rsvp-btn.no:hover{
  border-color:var(--gold-3) !important;
  color:var(--gold-3) !important;
  background:rgba(252,196,64,.06) !important;
  transform:translateY(-2px);
}

/* ---- Mobile refinements ---- */
@media(max-width:600px){
  .hero-eyebrow-sub{font-size:9px !important;letter-spacing:.4em !important;margin-top:8px !important}
  .hero-meta{gap:8px !important;margin-top:26px !important}
  .hero-meta-row{gap:11px}
  .hero-meta-icon{width:28px;height:28px;font-size:12px}
  .hero-celebration{margin-top:34px}
  .hero-section-title{font-size:10px;letter-spacing:.45em;margin-bottom:18px}
  .hero-section-title::before,.hero-section-title::after{width:24px}
  .hero-locations{max-width:100%}
  .hero-loc-item{flex-direction:column !important;align-items:flex-start !important;gap:6px !important;padding:16px 8px 16px 28px !important;text-align:left !important}
  .hero-loc-item::before{top:24px;transform:none;left:4px;width:8px;height:8px}
  .hero-loc-item .lt-time{font-size:15px !important;min-width:0}
  .hero-loc-item .lt-place{font-size:13px}
  .hero-loc-item .lt-dir{align-self:flex-start;margin-top:4px}
  .hero-quote{margin-top:34px !important;padding:0 14px}
  .hero-quote::before{font-size:46px;margin-bottom:12px}
  .hero-quote p{font-size:15px;line-height:1.55}
  .hero-quote cite{font-size:9px;letter-spacing:.4em;margin-top:10px}
  .hero-rsvp{margin-top:32px !important;flex-direction:column !important;gap:10px !important;width:100%;padding:0 18px}
  .hero-rsvp-btn{width:100% !important;min-width:0 !important;padding:15px 22px !important;font-size:10px !important;letter-spacing:.32em !important}
}

/* ---- Light theme adjustments for new elements ---- */
body.theme-light .hero-eyebrow-sub{color:rgba(58,42,32,.75);text-shadow:none}
body.theme-light .hero-meta-icon{background:rgba(232,137,10,.06);border-color:rgba(232,137,10,.45);filter:none}
body.theme-light .hero-section-title{color:var(--gold-3);text-shadow:none}
body.theme-light .hero-section-title::before,
body.theme-light .hero-section-title::after{background:linear-gradient(90deg,transparent,var(--gold-3),transparent)}
body.theme-light .hero-loc-item{border-bottom-color:rgba(184,120,10,.22) !important}
body.theme-light .hero-loc-item::before{background:var(--gold-3);box-shadow:0 0 0 4px rgba(184,120,10,.10)}
body.theme-light .hero-loc-item .lt-time{color:var(--gold-3) !important;text-shadow:none}
body.theme-light .hero-loc-item .lt-title{color:var(--gold-3);text-shadow:none}
body.theme-light .hero-loc-item .lt-place{color:var(--ink);text-shadow:none}
body.theme-light .hero-loc-item .lt-dir{color:var(--gold-3);border-color:var(--gold-3)}
body.theme-light .hero-loc-item .lt-dir:hover{background:var(--gold-3);color:#fff !important}
body.theme-light .hero-quote::before{color:var(--gold-3)}
body.theme-light .hero-quote p{color:var(--ink);text-shadow:none}
body.theme-light .hero-quote cite{color:var(--gold-3);text-shadow:none}

/* ---- Layout-classic compatibility (light cream hero variant) ---- */
body.layout-classic .hero::before{display:none !important}
body.layout-classic .hero-eyebrow-sub{color:var(--ink-soft);text-shadow:none}
body.layout-classic .hero-meta{flex-direction:column !important;align-items:center}
body.layout-classic .hero-meta-icon{background:transparent;border-color:rgba(58,42,32,.25);filter:none}
body.layout-classic .hero-section-title{color:var(--gold-3);text-shadow:none}
body.layout-classic .hero-quote::before{color:var(--gold-3)}
body.layout-classic .hero-quote p{color:var(--ink);text-shadow:none}
body.layout-classic .hero-quote cite{color:var(--gold-3);text-shadow:none}
body.layout-classic .hero-loc-item{border-bottom-color:var(--line) !important}
body.layout-classic .hero-loc-item::before{background:var(--gold-3);box-shadow:none}
body.layout-classic .hero-loc-item .lt-time,
body.layout-classic .hero-loc-item .lt-title{color:var(--gold-3) !important;text-shadow:none}
body.layout-classic .hero-loc-item .lt-place{color:var(--ink);text-shadow:none}