@font-face{font-family:"DS Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/serif-400.woff2) format("woff2")}
@font-face{font-family:"DS Garamond";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/serif-700.woff2) format("woff2")}
@font-face{font-family:"DS Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/serif-i400.woff2) format("woff2")}
@font-face{font-family:"DS Sans";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/sans-300.woff2) format("woff2")}
@font-face{font-family:"DS Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/sans-400.woff2) format("woff2")}
:root{
  --burgundy:#3B0A16; --gold:#C89A3D; --gold-2:#E3BC6A;
  --cream:#F4EFE4; --ink:#231018; --ink-soft:#5A4048;
  --serif:"DS Garamond",Cambria,"Times New Roman",serif;
  --sans:"DS Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--burgundy);color:var(--cream);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1000px 760px at 26% 18%,rgba(118,27,62,.62),transparent 66%),
    radial-gradient(1100px 620px at 50% -12%,rgba(200,154,61,.10),transparent 62%),
    radial-gradient(820px 540px at 92% 104%,rgba(28,2,12,.55),transparent 66%);
}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}

body.locked{overflow:hidden}
.stage{position:relative;z-index:1}
/* the envelope sits still, pinned to the screen */
#envLayer{
  position:fixed;inset:0;z-index:1;display:grid;place-items:center;
  padding:clamp(18px,5vw,56px);
}
/* the letter lives in the normal flow, so a long letter simply scrolls */
#letterLayer{
  position:relative;z-index:2;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  min-height:100svh;min-height:100vh;
  padding:clamp(18px,5vw,56px);
}

/* ---------- the sealed envelope ---------- */
.envwrap{position:relative;width:min(680px,94vw);cursor:pointer}
.film{
  display:block;width:100%;height:auto;background:var(--burgundy);
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 5%,#000 95%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-composite:intersect;
  transition:opacity .55s ease;
}
.nameplate{
  position:absolute;left:8.5%;bottom:12.5%;max-width:44%;text-align:left;
  transition:opacity .35s ease;pointer-events:none;
}
.nameplate .for{
  font-size:calc(var(--fw,680px)*.0155);letter-spacing:.3em;text-transform:uppercase;
  color:#8A6837;margin:0 0 .55em;
}
.nameplate .who{
  font-family:var(--serif);font-size:calc(var(--fw,680px)*.052);
  line-height:1.12;margin:0;color:#9A7434;text-wrap:balance;
  text-shadow:0 1px 0 rgba(255,249,236,.5);
}
.hint{
  position:absolute;left:0;right:0;top:calc(100% + 22px);text-align:center;
  margin:0;font-family:var(--sans);font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(244,239,228,.5);transition:opacity .35s ease;
}
.sound{
  position:absolute;left:0;right:0;top:calc(100% + 52px);
  display:flex;justify-content:center;transition:opacity .35s ease;
}
.sound button{
  background:none;border:1px solid rgba(200,154,61,.3);border-radius:999px;
  padding:5px 13px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(244,239,228,.5);
}
.stage.opening .nameplate,.stage.opening .hint,.stage.opening .sound{opacity:0}
.stage.away .film{opacity:0}
/* the front face of the envelope, laid back over the letter so the
   card really does come out from inside the pocket */
#pocket{
  position:fixed;z-index:3;pointer-events:none;opacity:1;
  transition:opacity .5s ease;
  clip-path:polygon(
    0% 28.6%, 24% 28.6%, 38.5% 48.4%, 60% 48.4%, 72% 28.6%, 100% 28.6%,
    100% 100%, 0% 100%);
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 5%,#000 95%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-composite:intersect;
}
#pocket.fade{opacity:0}
#pocket[hidden],#envLayer[hidden]{display:none!important}


/* ---------- keeping a copy ----------
   A floating pill once the letter is open. It is drawn nowhere near the
   card itself, so it never appears in the saved picture. */
.keep{
  position:fixed;left:0;right:0;bottom:0;z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:14px 20px calc(16px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to top,rgba(30,4,12,.92),rgba(30,4,12,.72) 62%,transparent);
  pointer-events:auto;opacity:0;transition:opacity .5s ease;
}
.keep.on{opacity:1}
.keep[hidden]{display:none!important}
.keep button{
  background:var(--gold);border:1px solid var(--gold);border-radius:999px;
  padding:11px 26px;font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:#2A0710;font-weight:700;
}
.keep button:disabled{opacity:.55}
.keep p{
  margin:0;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(244,239,228,.5);text-align:center;
}
.keep a{color:rgba(244,239,228,.62);text-decoration:underline;cursor:pointer}
/* the picture on its own, for anyone who would rather press and hold */
#shot{
  position:fixed;inset:0;z-index:6;background:rgba(12,2,7,.94);
  display:none;align-items:center;justify-content:center;
  padding:28px 18px;overflow:auto;
}
#shot.on{display:flex}
#shot img{
  max-width:min(420px,86vw);max-height:86vh;height:auto;width:auto;
  border-radius:3px;box-shadow:0 18px 48px -18px rgba(0,0,0,.85);
}

/* ---------- the letter ---------- */
/*LETTER-CSS-START*/
.letter{
  width:min(600px,92vw);
  background:linear-gradient(168deg,#F8F5EC,var(--cream) 46%,#EDE5D3);
  color:var(--ink);border-radius:3px;
  box-shadow:0 26px 60px -24px rgba(0,0,0,.75);
  padding:clamp(26px,5.5vw,46px) clamp(20px,5.5vw,52px) clamp(24px,5vw,40px);
  position:relative;visibility:hidden;pointer-events:auto;
  transform-origin:top left;will-change:transform;
}
.letter::before{
  content:"";position:absolute;inset:10px;border:1px solid rgba(200,154,61,.4);
  border-radius:2px;pointer-events:none;
}
.letter-inner{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.ds-logo{display:block;width:66px;height:auto}
.wordmark{
  font-family:var(--serif);font-weight:700;font-size:clamp(17px,4.2vw,23px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--burgundy);margin:6px 0 0;
}
.tagline{font-size:8.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-soft);margin:0}
.rule{display:flex;align-items:center;justify-content:center;gap:12px;width:100%}
.rule i{display:block;height:1px;width:min(80px,18vw);background:linear-gradient(90deg,transparent,var(--gold))}
.rule i+i{background:linear-gradient(90deg,var(--gold),transparent)}
.rule b{width:6px;height:6px;background:var(--gold);transform:rotate(45deg);flex:none}
.salutation{
  font-family:var(--serif);font-style:italic;font-size:clamp(15px,3.6vw,18px);
  color:var(--ink-soft);margin:0;max-width:34ch;line-height:1.5;
}
.occasion{
  font-family:var(--serif);font-weight:700;font-size:clamp(16px,4vw,21px);
  letter-spacing:.13em;text-transform:uppercase;color:var(--burgundy);margin:0;
}
.guest{
  font-family:var(--serif);font-size:clamp(30px,7.6vw,46px);
  line-height:1.06;margin:2px 0 0;color:var(--burgundy);text-wrap:balance;
}
.for-line{
  font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-soft);margin:0;
}
.guest-title{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);margin:0}
.name-rule{width:min(150px,42%);height:1px;flex:none;
  background:linear-gradient(90deg,transparent,rgba(200,154,61,.75),transparent)}
.copy{
  font-weight:300;font-size:14px;line-height:1.75;color:var(--ink);
  margin:0;max-width:44ch;white-space:pre-line;
}
/* two columns, hairline between them; a lone last item takes the whole row
   and centres itself rather than being stranded on the left */
.details{
  display:grid;grid-template-columns:1fr 1fr;
  gap:20px 0;width:100%;margin:0;text-align:center;
}
.details>div{
  display:flex;flex-direction:column;align-items:center;gap:5px;padding:0 14px;
}
.details>div:nth-child(even){border-left:1px solid rgba(200,154,61,.28)}
.details>div:last-child:nth-child(odd){grid-column:1/-1;border-left:0}
.details .ic{display:block;line-height:0;color:var(--gold);opacity:.9}
.details .ic svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.details dt{font-size:8px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.details dd{margin:0;font-family:var(--serif);font-size:16px;line-height:1.35;color:var(--ink)}
/* Arabic is a joined script: letter-spacing pulls it apart and uppercasing
   does nothing, so both are dropped wherever Arabic text appears. */
.arabic{letter-spacing:normal!important;text-transform:none!important}
/* the line that must not be missed: heavier, darker and a touch larger
   than the body copy, so the eye stops on it */
.closing{
  font-family:var(--serif);font-weight:700;font-size:clamp(15px,3.8vw,18px);
  letter-spacing:.06em;color:var(--burgundy);margin:0;max-width:34ch;line-height:1.5;
}
/* the warm word at the very end, under the flourish */
.signoff{
  font-family:var(--serif);font-style:italic;font-size:clamp(14px,3.4vw,17px);
  color:var(--ink-soft);margin:0;max-width:34ch;line-height:1.5;
}
.rsvp{
  display:inline-block;text-decoration:none;margin-top:2px;
  border:1px solid rgba(59,10,22,.28);border-radius:999px;
  padding:9px 20px;font-family:var(--sans);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--burgundy);transition:border-color .2s,background .2s;
}
.rsvp:hover{border-color:var(--gold);background:rgba(200,154,61,.08)}
.foot{font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);margin:0}
/*LETTER-CSS-END*/

@media (prefers-reduced-motion:reduce){
  .letter,.film,#pocket,.nameplate,.hint,.sound{transition-duration:.3s!important}
}