/* ============================================================
   Wedding template styles. Themes are at the top; pick one in config.js.
   ============================================================ */
:root, [data-theme="ivory"] {
  --bg:#F5EFE2; --card:#FFFDF8; --ink:#1C1B1A; --muted:#55504A; --acc:#B8975A; --acc-d:#7A6232;
  --line:rgba(184,151,90,.45); --hero:linear-gradient(180deg,#2A2927,#1F1E1C); --hero-ink:#F5EFE2; --hero-acc:#B8975A; --hero-btn:#1C1B1A;
}
[data-theme="sage"] {
  --bg:#EEF0E7; --card:#FAFBF6; --ink:#1F2A22; --muted:#56614F; --acc:#7C9A55; --acc-d:#4E6638;
  --line:rgba(124,154,85,.45); --hero:linear-gradient(180deg,#2C3E2E,#1E2B20); --hero-ink:#EFEBDD; --hero-acc:#A9C383; --hero-btn:#1E2B20;
}
[data-theme="blush"] {
  --bg:#F8EFEC; --card:#FFFBFA; --ink:#2E2222; --muted:#6E5A57; --acc:#C48B84; --acc-d:#94574F;
  --line:rgba(196,139,132,.45); --hero:linear-gradient(180deg,#EFD9D3,#E4C6BF); --hero-ink:#2E2222; --hero-acc:#94574F; --hero-btn:#FFFBFA;
}
[data-theme="midnight"] {
  --bg:#121A2E; --card:#18223B; --ink:#EDE6D6; --muted:#A9B0C2; --acc:#C9A659; --acc-d:#E2C88A;
  --line:rgba(201,166,89,.4); --hero:linear-gradient(180deg,#0E1426,#0A0F1E); --hero-ink:#F2E8D2; --hero-acc:#C9A659; --hero-btn:#0E1426;
}

:root {
  --display:"Bodoni Moda","Didot",Georgia,serif;
  --script:"Pinyon Script","Snell Roundhand",Georgia,serif;
  --body:"EB Garamond",Garamond,Georgia,serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:400 1.15rem/1.7 var(--body); -webkit-font-smoothing:antialiased; }
a { color:var(--ink); text-decoration-color:var(--acc); text-underline-offset:.2em; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.hidden { display:none; }
:focus-visible { outline:1px solid var(--acc); outline-offset:3px; }

/* tabs */
.tabs { position:sticky; top:0; z-index:20; display:flex; justify-content:center; gap:clamp(.9rem,4vw,2.4rem); overflow-x:auto; scrollbar-width:none;
  padding:.9rem 1rem .75rem; background:color-mix(in srgb,var(--bg) 94%,transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.tabs::-webkit-scrollbar { display:none; }
.tabs a { flex:none; font:500 .72rem var(--display); letter-spacing:.2em; text-transform:uppercase; text-decoration:none; color:var(--muted); padding-bottom:.3rem; border-bottom:1px solid transparent; }
.tabs a[aria-current] { color:var(--ink); border-bottom-color:var(--acc); }
@media (max-width:520px) { .tabs { justify-content:flex-start; } .tabs a { font-size:.66rem; letter-spacing:.12em; } }

/* hero */
.hero { background:var(--hero); color:var(--hero-ink); text-align:center; padding:clamp(3.5rem,11vw,6rem) 1rem clamp(2.8rem,8vw,4.2rem); }
.h-kicker { margin:0 0 .6rem; font:500 .76rem var(--display); letter-spacing:.36em; text-transform:uppercase; color:var(--hero-acc); padding-left:.36em; }
.h-names { margin:0; font:400 clamp(3.4rem,14vw,7rem)/1.05 var(--script); }
.h-names .amp { color:var(--hero-acc); font-size:.65em; padding:0 .1em; }
.h-date { margin:.9rem 0 0; display:flex; justify-content:center; align-items:center; gap:1rem; font:500 clamp(.9rem,3.4vw,1.1rem) var(--display); letter-spacing:.24em; text-transform:uppercase; }
.bar { display:inline-block; width:1px; height:1.1em; background:var(--hero-acc); }
.countdown { margin:.7rem 0 0; font-style:italic; opacity:.75; }
.btn { display:inline-block; font:500 .82rem var(--display); letter-spacing:.18em; text-transform:uppercase; text-decoration:none; color:inherit;
  border:1px solid currentColor; padding:.9rem 1.8rem; cursor:pointer; background:transparent; transition:background .25s,color .25s; }
.btn.solid { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.btn.solid:hover { background:var(--acc); border-color:var(--acc); color:var(--ink); }
.cal { position:relative; display:inline-block; margin-top:1.6rem; }
.cal summary { list-style:none; border-color:var(--hero-acc); }
.cal summary::-webkit-details-marker { display:none; }
.cal summary:hover, .cal[open] summary { background:var(--hero-ink); color:var(--hero-btn); border-color:var(--hero-ink); }
.cal-panel { position:absolute; z-index:30; left:50%; top:calc(100% + .6rem); transform:translateX(-50%); width:min(18rem,86vw); display:grid; gap:.5rem; padding:1.1rem;
  background:var(--card); border:1px solid var(--line); box-shadow:0 20px 40px -14px rgba(0,0,0,.4); }
.cal-panel a { display:block; text-align:center; font:500 .78rem var(--display); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; color:var(--ink); border:1px solid var(--line); padding:.7rem; }
.cal-panel a:hover { background:var(--ink); color:var(--bg); }

/* sections */
main { padding-bottom:1rem; }
section { max-width:42rem; margin:0 auto; padding:3rem 1.4rem; border-top:1px solid var(--line); scroll-margin-top:3.5rem; }
section:first-child { border-top:0; }
.center { text-align:center; }
h2 { font:400 clamp(1.5rem,4.4vw,2rem)/1.2 var(--display); letter-spacing:.12em; text-transform:uppercase; text-align:center; margin:0 0 1.4rem; }
h3 { font:400 1.15rem/1.3 var(--display); letter-spacing:.04em; margin:0 0 .4rem; }
p { margin:0 0 .9rem; }
.intro { text-align:center; font-style:italic; color:var(--muted); }
.muted { color:var(--muted); }
.small-caps { font:500 .76rem var(--display); letter-spacing:.18em; text-transform:uppercase; color:var(--acc-d); margin:0 0 .5rem; }
.flourish { display:block; width:11rem; margin:0 auto 1.4rem; color:var(--acc); }
.rsvp-by { font:500 .84rem var(--display); letter-spacing:.18em; text-transform:uppercase; text-align:center; margin-top:1.2rem; }
.rsvp-by b { font-weight:500; color:var(--acc-d); }
.link { font:500 .76rem var(--display); letter-spacing:.14em; text-transform:uppercase; }

/* cards */
.card { background:var(--card); border:1px solid var(--acc); outline:1px solid var(--line); outline-offset:-7px; padding:1.6rem 1.5rem 1.3rem; }
.grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); }
.grid .card p:last-child { margin-bottom:0; }

/* rsvp */
.reply { text-align:center; padding:2.4rem 1.6rem 1.8rem; }
.script { display:block; font:400 2.6rem/1.1 var(--script); margin:0; }
.reply form { text-align:left; margin-top:1.6rem; }
.field { margin-bottom:1.3rem; }
.field label, .lbl { display:block; font:500 .76rem var(--display); letter-spacing:.16em; text-transform:uppercase; color:var(--acc-d); margin-bottom:.5rem; }
.opt { font:italic 400 .95rem var(--body); letter-spacing:0; text-transform:none; color:var(--muted); }
input[type=text], textarea { width:100%; font:inherit; font-size:1.05rem; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--line); padding:.5rem .1rem; border-radius:0; }
textarea { border:1px solid var(--line); padding:.6rem .7rem; resize:vertical; }
input:focus, textarea:focus { outline:none; border-color:var(--ink); }
::placeholder { font-style:italic; color:var(--muted); opacity:.7; }
.choice { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.choice button { font:italic 400 1.05rem var(--body); color:var(--muted); background:transparent; border:1px solid var(--line); padding:.8rem .5rem; cursor:pointer; transition:background .2s,color .2s; }
.choice button[aria-pressed="true"] { background:var(--ink); color:var(--bg); border-color:var(--ink); }
#b-no[aria-pressed="true"] { background:var(--bg); color:var(--ink); border-color:var(--acc); }
.if-yes { display:none; }
form.is-yes .if-yes { display:block; }
.send { display:block; width:100%; margin-top:1.4rem; background:var(--ink); color:var(--bg); border:1px solid var(--ink); padding:1.05rem; font:500 .84rem var(--display); letter-spacing:.22em; text-transform:uppercase; cursor:pointer; }
.send:hover { background:var(--acc); border-color:var(--acc); color:#1C1B1A; }
.err { color:#A1463F; text-align:center; margin:1rem 0 0; font-size:1rem; }
.thanks p { font-style:italic; color:var(--muted); margin:.4rem 0 0; }
.alt { margin:1.3rem 0 0; font-style:italic; color:var(--muted); font-size:1rem; }

/* timeline */
.timeline { list-style:none; margin:0 auto; padding:0; max-width:30rem; position:relative; }
.timeline::before { content:""; position:absolute; left:6.6rem; top:.7rem; bottom:.7rem; width:1px; background:var(--line); }
.timeline li { display:grid; grid-template-columns:6rem 1fr; gap:1.4rem; padding:.6rem 0; position:relative; }
.timeline li::after { content:""; position:absolute; left:calc(6.6rem - 4px); top:1.1rem; width:7px; height:7px; background:var(--bg); border:1px solid var(--acc); transform:rotate(45deg); }
.timeline time { font:500 .95rem var(--display); letter-spacing:.06em; text-align:right; padding-top:.15rem; }
.timeline b { display:block; font:400 1.1rem var(--display); letter-spacing:.02em; }
.timeline span { display:block; color:var(--muted); font-size:1rem; line-height:1.5; }

/* travel */
ul.info { list-style:none; padding:0; margin:1.6rem 0 0; }
ul.info li { padding:.9rem 0; border-top:1px solid var(--line); }
ul.info li:first-child { border-top:0; }
ul.info b { display:block; font:500 .76rem var(--display); letter-spacing:.16em; text-transform:uppercase; color:var(--acc-d); margin-bottom:.25rem; }
.taxis { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.4rem; }
.taxis a { display:flex; flex-direction:column; text-decoration:none; border:1px solid var(--line); background:var(--card); padding:.55rem .85rem; font-size:1rem; }
.taxis i { font:normal 500 .7rem var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--acc-d); }

/* hotels */
.code-row { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.code-row .small-caps { margin:0; }
button.code { font:500 .84rem var(--display); letter-spacing:.14em; background:var(--ink); color:var(--bg); border:1px dashed var(--acc); padding:.4rem .8rem; cursor:pointer; }
button.code.copied { background:var(--acc); color:#1C1B1A; }
button.code.copied::after { content:"  Copied"; }

/* photos */
.qr { width:10rem; height:10rem; margin:1.2rem auto .3rem; padding:.7rem; background:#fff; border:1px solid var(--line); }
.qr svg { width:100%; height:100%; display:block; }
.qr-cap { font-size:.92rem; font-style:italic; color:var(--muted); margin-bottom:1.2rem; }
@media (hover:none) and (pointer:coarse) { .qr, .qr-cap { display:none; } }

/* faq */
.qa { border-bottom:1px solid var(--line); padding:1rem 0; }
.qa:first-child { border-top:1px solid var(--line); }
.qa summary { font:400 1.05rem var(--display); letter-spacing:.02em; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.qa summary::-webkit-details-marker { display:none; }
.qa summary::after { content:"+"; color:var(--acc); }
.qa[open] summary::after { content:"\2212"; }
.qa p { margin:.6rem 0 0; color:var(--muted); }

/* contacts */
.contacts { display:flex; justify-content:center; gap:.8rem; margin-top:1rem; }
.contact { display:flex; flex-direction:column; align-items:center; flex:0 1 11rem; padding:1rem .8rem .9rem; text-decoration:none; background:var(--card); border:1px solid var(--line); outline:1px solid var(--line); outline-offset:-6px; }
.c-name { font:400 2rem/1 var(--script); }
.c-num { font:500 .92rem var(--display); letter-spacing:.1em; margin-top:.5rem; white-space:nowrap; }

/* footer */
footer { background:var(--hero); color:var(--hero-ink); text-align:center; padding:3.5rem 1rem 4rem; }
.f-names { font:400 3.2rem/1 var(--script); color:var(--hero-acc); margin:0; }
.f-date { font:500 1rem var(--display); letter-spacing:.2em; margin:.8rem 0 0; }

@media (min-width:960px) { html { font-size:106%; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* ============================================================
   Envelope intro
   ============================================================ */
:root, [data-theme="ivory"] { --env:#EFE5D0; --env-d:#E2D5BA; --seal:#7E2A26; --seal-ink:#F1D9B5; }
[data-theme="sage"]     { --env:#E4E8DA; --env-d:#D3DAC4; --seal:#3F5A34; --seal-ink:#E7EDD6; }
[data-theme="blush"]    { --env:#F3E2DD; --env-d:#E8CFC8; --seal:#8E4B45; --seal-ink:#F7E3DE; }
[data-theme="midnight"] { --env:#1D2844; --env-d:#16203A; --seal:#B08A3E; --seal-ink:#1A1408; }

body.intro-on { overflow:hidden; }
.ei { position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.8rem;
  background:radial-gradient(120% 90% at 50% 40%, var(--card), var(--bg)); transition:opacity .9s ease, visibility .9s; }
.ei.gone { opacity:0; visibility:hidden; pointer-events:none; }
.intro-hint { margin:0; font:500 .78rem var(--display); letter-spacing:.26em; text-transform:uppercase; color:var(--muted);
  animation:hint 2.4s ease-in-out infinite; transition:opacity .4s; }
.ei.opening .intro-hint { opacity:0; animation:none; }
@keyframes hint { 0%,100% { opacity:.45; } 50% { opacity:1; } }

.env { position:relative; width:min(86vw,38rem); aspect-ratio:3/2; padding:0; border:0; background:none; cursor:pointer; perspective:1600px;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.18)); transition:transform .35s ease; }
.env:hover { transform:translateY(-3px); }
.env:focus-visible { outline:1px solid var(--acc); outline-offset:10px; }
.env > span { position:absolute; display:block; }
.env-back { inset:0; background:var(--env-d); }
.env-card { left:5%; right:5%; top:6%; height:88%; z-index:2; background:var(--card); border:1px solid var(--acc); outline:1px solid var(--line); outline-offset:-6px;
  display:flex !important; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--ink);
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1) .55s; }
.ec-k { font:500 clamp(.52rem,1.6vw,.66rem) var(--display); letter-spacing:.24em; text-transform:uppercase; color:var(--acc-d); }
.ec-names { font:400 clamp(2rem,8vw,3.6rem)/1.1 var(--script); margin:.4rem 0 .3rem; }
.ec-date { font:500 clamp(.6rem,1.8vw,.78rem) var(--display); letter-spacing:.24em; text-transform:uppercase; }
.env-front { inset:0; z-index:3; background:var(--env);
  clip-path:polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
  box-shadow:inset 0 -1px 0 var(--env-d); }
.env-front::before { content:""; position:absolute; inset:0; background:linear-gradient(160deg, transparent 49.6%, var(--env-d) 50%, transparent 50.4%),
  linear-gradient(-160deg, transparent 49.6%, var(--env-d) 50%, transparent 50.4%); opacity:.7; }
.env-flap { left:0; right:0; top:0; height:58%; z-index:4; background:var(--env); clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform-origin:50% 0; transition:transform .8s cubic-bezier(.4,0,.2,1), z-index 0s .4s;
  background-image:linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.04)); }
.env-seal { left:50%; top:58%; z-index:5; width:4.4rem; height:4.4rem; margin:-2.2rem 0 0 -2.2rem; border-radius:50%;
  display:grid !important; place-items:center; background:radial-gradient(circle at 35% 30%, color-mix(in srgb,var(--seal) 70%,#fff), var(--seal) 55%, color-mix(in srgb,var(--seal) 75%,#000));
  box-shadow:0 3px 8px rgba(0,0,0,.28), inset 0 0 0 4px rgba(255,255,255,.08), inset 0 0 0 6px rgba(0,0,0,.12);
  color:var(--seal-ink); font:400 1.5rem/1 var(--script); transition:transform .5s ease, opacity .4s ease; }

/* opening sequence: seal lifts, flap folds back, card slides up */
.ei.opening .env-seal { transform:scale(1.15) translateY(-6px); opacity:0; }
.ei.opening .env-flap { transform:rotateX(180deg); z-index:1; }
.ei.opening .env-card { transform:translateY(-68%); }
.ei.opening .env { transform:translateY(16%); transition:transform 1.1s cubic-bezier(.2,.8,.2,1) .55s; }

@media (prefers-reduced-motion:reduce) {
  .env-card, .env-flap, .env-seal, .ei { transition-duration:.01s !important; transition-delay:0s !important; }
  .intro-hint { animation:none; opacity:1; }
}

/* ----- Personal invitations ----- */
.env-to { left:0; right:0; bottom:4%; z-index:5; text-align:center; font:400 clamp(1.15rem,4.4vw,2.2rem)/1.1 var(--script); color:var(--ink);
  transition:opacity .4s ease; pointer-events:none; }
.ei.opening .env-to { opacity:0; }
.who { display:flex; flex-wrap:wrap; gap:.5rem; }
.field .who label { font:400 1.15rem var(--body); letter-spacing:0; text-transform:none; color:var(--ink); margin:0; display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--line); padding:.55rem .9rem; cursor:pointer; background:var(--card); }
.who input { accent-color:var(--acc); width:1.05rem; height:1.05rem; }
.demo-bar { position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:90; display:flex; gap:12px; align-items:center;
  background:rgba(20,20,20,.88); color:#f3efe6; font:500 13px/1.3 system-ui,sans-serif; padding:9px 14px; border-radius:999px; white-space:nowrap; }
.demo-bar a { color:#f3d9a4; }
@media print { .demo-bar { display:none; } }