:root{
  --ink:#2C3A46; --wash:#DCE8F0; --mist:#F4F8FB;
  --accent:#8FA9BE; --paper:#FFFFFF;
  --f-script:'Pinyon Script',cursive;
  --f-caps:'Jost',system-ui,sans-serif;
  --f-body:'Cormorant Garamond',serif;
  --f-rtl:'Amiri',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--mist);color:var(--ink);font-family:var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}

.card{position:relative;max-width:480px;margin:0 auto;background:var(--mist);
  box-shadow:0 0 90px rgba(44,58,70,.14);overflow:hidden}

/* ── scenes ─────────────────────────────────────── */
.scene{position:relative;overflow:hidden;padding:74px 30px;text-align:center}
.scene-art{position:absolute;inset:-14% 0;background-size:cover;background-position:center;
  will-change:transform;z-index:0}
.scene-veil{position:absolute;inset:0;z-index:1;pointer-events:none}
.scene-body{position:relative;z-index:2}
.scene:first-child{min-height:100vh;display:flex;flex-direction:column;justify-content:center}

/* ── envelope ───────────────────────────────────── */
.envelope{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:26px;
  background:linear-gradient(160deg,#E8F1F7,#CFE0EC);
  transition:opacity 1s ease .5s,visibility 1s .5s}
.envelope.opened{opacity:0;visibility:hidden;pointer-events:none}
.env-flap{position:absolute;top:0;left:50%;width:150%;height:52%;
  transform:translateX(-50%);transform-origin:top center;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(228,240,247,.75));
  clip-path:polygon(0 0,100% 0,50% 100%);
  transition:transform 1.1s cubic-bezier(.6,0,.2,1)}
.envelope.opened .env-flap{transform:translateX(-50%) rotateX(-160deg)}
.env-seal{position:relative;z-index:2;width:104px;height:104px;border-radius:50%;
  border:1px solid rgba(143,169,190,.7);background:rgba(255,255,255,.72);
  cursor:pointer;display:grid;place-items:center;
  animation:pulse 3.4s ease-in-out infinite;transition:transform .8s,opacity .8s}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.envelope.opened .env-seal{transform:scale(.7);opacity:0;animation:none}
.env-seal:focus-visible{outline:2px solid var(--accent);outline-offset:12px}
.env-initials{font-family:var(--f-script);font-size:2.1rem;color:var(--ink)}
.env-hint{position:relative;z-index:2;font-family:var(--f-caps);font-size:.58rem;
  font-weight:300;letter-spacing:.34em;text-transform:uppercase;color:#6E8598}
.envelope.opened .env-hint{opacity:0;transition:opacity .4s}

/* ── controls ───────────────────────────────────── */
.lang{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:40;display:flex;gap:2px;
  background:rgba(255,255,255,.8);backdrop-filter:blur(10px);
  border:1px solid rgba(143,169,190,.35);border-radius:999px;padding:3px;
  opacity:0;transition:opacity .6s ease 1s}
.lang.show{opacity:1}
.lang button{font-family:var(--f-caps);font-size:.58rem;font-weight:300;letter-spacing:.16em;
  text-transform:uppercase;color:#6E8598;background:none;border:none;
  padding:6px 13px;border-radius:999px;cursor:pointer;transition:.25s}
.lang button[aria-pressed=true]{background:var(--ink);color:#fff}

.sound{position:fixed;bottom:18px;right:calc(50% - 240px + 18px);z-index:40;
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.8);
  backdrop-filter:blur(10px);border:1px solid rgba(143,169,190,.35);
  display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .6s ease 1s}
.sound.show{opacity:1}
.sound svg{width:15px;height:15px;stroke:var(--ink);fill:none;stroke-width:1.4}
@media(max-width:520px){.sound{right:18px}}

/* ── typography ─────────────────────────────────── */
.monogram{position:relative;width:120px;height:150px;margin:0 auto 18px;color:var(--accent)}
.monogram svg{position:absolute;inset:0;width:100%;height:100%}
.mono-letters{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--f-script);font-size:2.6rem;font-weight:400;color:var(--ink)}

.names{font-family:var(--f-script);font-size:clamp(2.4rem,11vw,3.4rem);
  font-weight:400;line-height:1.15;color:var(--ink)}
.names i{display:block;font-family:var(--f-body);font-style:italic;
  font-size:1.05rem;color:var(--accent);margin:2px 0}
[dir=rtl] .names{font-family:var(--f-rtl);font-weight:700;font-size:clamp(1.7rem,8vw,2.4rem)}

.request{font-family:var(--f-caps);font-size:.63rem;font-weight:300;letter-spacing:.24em;
  text-transform:uppercase;line-height:2.2;color:#5A6E7E;max-width:280px;margin:22px auto 0}
[dir=rtl] .request{font-family:var(--f-rtl);font-size:.92rem;letter-spacing:0;
  text-transform:none;line-height:1.95}

.datewrap{margin-top:30px}
.dt-side{font-family:var(--f-caps);font-size:.6rem;font-weight:300;letter-spacing:.28em;
  text-transform:uppercase;color:#5A6E7E;vertical-align:middle}
.dt-num{font-family:var(--f-body);font-weight:300;font-size:3.2rem;color:var(--ink);
  margin:0 18px;vertical-align:middle;line-height:1}
.dt-day{font-family:var(--f-caps);font-size:.56rem;font-weight:300;letter-spacing:.3em;
  text-transform:uppercase;color:#6E8598;margin-top:6px}

.eyebrow{font-family:var(--f-caps);font-size:.56rem;font-weight:300;letter-spacing:.32em;
  text-transform:uppercase;color:#7C90A0}
.script-head{font-family:var(--f-script);font-size:2rem;color:var(--ink);margin:8px 0 4px}
[dir=rtl] .script-head{font-family:var(--f-rtl);font-weight:700;font-size:1.4rem}
.soft{font-size:.98rem;font-weight:300;line-height:1.9;color:#4E606E;max-width:290px;margin:12px auto 0}
[dir=rtl] .soft{font-family:var(--f-rtl);font-size:.95rem}

.guest-name{font-family:var(--f-script);font-size:2rem;color:var(--ink);margin-top:8px}
[dir=rtl] .guest-name{font-family:var(--f-rtl);font-weight:700;font-size:1.5rem}
.seats-line{font-family:var(--f-caps);font-size:.58rem;font-weight:300;letter-spacing:.2em;
  text-transform:uppercase;color:#7C90A0;margin-top:7px}
[dir=rtl] .seats-line{font-family:var(--f-rtl);letter-spacing:0;text-transform:none;font-size:.85rem}

.count{display:flex;justify-content:center;gap:7px;margin-top:22px}
.unit{flex:1;max-width:76px;padding:13px 4px;background:rgba(255,255,255,.55);
  border:1px solid rgba(143,169,190,.3);border-radius:2px}
.unit b{display:block;font-family:var(--f-body);font-weight:300;font-size:1.5rem;
  color:var(--ink);font-variant-numeric:tabular-nums}
.unit small{display:block;font-family:var(--f-caps);font-size:.48rem;font-weight:300;
  letter-spacing:.2em;text-transform:uppercase;color:#7C90A0;margin-top:5px}
[dir=rtl] .unit small{font-family:var(--f-rtl);letter-spacing:0;text-transform:none;font-size:.68rem}

.prog{margin-top:20px;text-align:start}
.slot{display:flex;gap:16px;padding:15px 0;border-bottom:1px solid rgba(143,169,190,.24)}
.slot:last-child{border:none}
.slot time{font-family:var(--f-caps);font-size:.62rem;font-weight:300;letter-spacing:.14em;
  color:#7C90A0;min-width:60px;padding-top:4px;font-variant-numeric:tabular-nums;direction:ltr}
.slot h3{font-family:var(--f-body);font-size:1.1rem;font-weight:400;color:var(--ink)}
.slot p{font-size:.86rem;font-weight:300;color:#6B7D8B;margin-top:2px;line-height:1.6}
[dir=rtl] .slot h3,[dir=rtl] .slot p{font-family:var(--f-rtl)}

.btn{display:inline-block;margin-top:20px;padding:12px 28px;
  font-family:var(--f-caps);font-size:.58rem;font-weight:300;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  border:1px solid rgba(44,58,70,.35);border-radius:999px;background:rgba(255,255,255,.5);
  cursor:pointer;transition:.3s}
.btn:hover,.btn:focus-visible{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn:disabled{opacity:.4;cursor:default}
.btn-solid{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-solid:hover{background:#42545F}
.btn-link{border:none;background:none;letter-spacing:.18em;color:#7C90A0;padding:8px}
.btn-link:hover{background:none;color:var(--ink)}
[dir=rtl] .btn{font-family:var(--f-rtl);letter-spacing:0;text-transform:none;font-size:.85rem}

.acts{display:flex;flex-direction:column;gap:10px;align-items:center;margin-top:6px}
.note{font-size:.82rem;font-weight:300;font-style:italic;color:#7C90A0;margin-top:18px}
.done{font-family:var(--f-script);font-size:1.5rem;color:var(--ink);margin-top:18px;line-height:1.4}
[dir=rtl] .done,[dir=rtl] .note{font-family:var(--f-rtl);font-style:normal}

.seat-picker{margin-top:20px;font-family:var(--f-caps);font-size:.58rem;font-weight:300;
  letter-spacing:.2em;text-transform:uppercase;color:#7C90A0}
[dir=rtl] .seat-picker{font-family:var(--f-rtl);letter-spacing:0;text-transform:none;font-size:.9rem}
.stepper{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:11px}
.stepper button{width:34px;height:34px;border-radius:50%;border:1px solid rgba(44,58,70,.3);
  background:rgba(255,255,255,.6);color:var(--ink);font-size:1.1rem;line-height:1;cursor:pointer;transition:.25s}
.stepper button:hover:not(:disabled){background:var(--ink);color:#fff}
.stepper button:disabled{opacity:.3;cursor:default}
.stepper b{font-family:var(--f-body);font-weight:300;font-size:1.6rem;min-width:34px;
  font-variant-numeric:tabular-nums}

.closing{font-family:var(--f-body);font-style:italic;font-weight:300;font-size:1rem;
  line-height:1.9;color:#5A6E7E;max-width:280px;margin:26px auto 0}
[dir=rtl] .closing{font-family:var(--f-rtl);font-style:normal}
.mark{display:inline-block;margin-top:30px;font-family:var(--f-caps);font-size:.5rem;
  font-weight:300;letter-spacing:.28em;text-transform:uppercase;color:#9BAEBC;text-decoration:none}

.rise{opacity:0;transform:translateY(22px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.3,1)}
.rise.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .rise{opacity:1;transform:none}
  .scene-art{transform:none!important}
}