:root {
  --linen: #2b3325;
  --linen-deep: #20271b;
  --olive: #3d4733;
  --ivory: #f4f0e4;
  --ivory-text: #ece6d4;
  --ivory-muted: #b8b59e;
  --ink: #3a4232;
  --ink-soft: #6b755d;
  --stamp: #4a5a3a;
  --display: 'Cormorant Garamond', 'Cormorant', Garamond, Georgia, serif;
  --paper-shadow: 0 1px 1px rgba(8, 12, 6, .28), 0 10px 22px -8px rgba(8, 12, 6, .55), 0 26px 50px -24px rgba(8, 12, 6, .5);
  --lifted-shadow: 0 2px 3px rgba(8, 12, 6, .2), 0 30px 50px -10px rgba(8, 12, 6, .45), 0 60px 90px -30px rgba(8, 12, 6, .4);
}
* { box-sizing: border-box; }
html { background: var(--linen); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100svh;
  color: var(--ivory-text);
  font-family: var(--display);
  background-color: var(--linen);
  background-image:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 240, .05), transparent 60%),
    url('assets/gen/linen-olive.jpg');
  background-size: 100% 100vh, 384px 384px;
  background-repeat: no-repeat, repeat;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: #aeb99d; color: #1d271b; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid #d9dcc4; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.small-caps { font: 600 .82em/1.2 var(--display); letter-spacing: .16em; text-transform: lowercase; font-variant: small-caps; }

/* ---------- Opening: the envelope, built from its own artwork ---------- */
.opening { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.scene { position: absolute; inset: 0; transform-origin: 0 0; }
.js .opening:not(.is-ready) .scene { visibility: hidden; }
.env { position: absolute; left: 0; top: 0; width: 300px; height: 462px; }
.env > span, .env-flap > span { position: absolute; inset: 0; display: block; }
.env .seal { inset: auto; left: 36.13%; top: 62.62%; width: 26.89%; height: 17.52%; }
.env-inside, .flap-front, .env-pocket, .flap-back {
  background: url('assets/olive-envelope-unsealed.webp') 50% 0 / 100% auto no-repeat;
}
.env-inside { z-index: 0; box-shadow: 0 18px 40px -12px rgba(6, 9, 5, .6); }
.env-inside::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 17, 10, .72), rgba(12, 17, 10, .45) 40%, rgba(12, 17, 10, .25)); }
.env-flap { z-index: 5; transform-origin: 50% 0; transform-style: preserve-3d; transform: perspective(1400px) rotateX(var(--flap-tug, 0deg)); }
.flap-front, .flap-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flap-front { clip-path: polygon(0 0, 100% 0, 100% 31.7%, 50% 65.5%, 0 31.7%); }
.flap-back {
  clip-path: polygon(0 100%, 100% 100%, 100% 68.3%, 50% 34.5%, 0 68.3%);
  transform: rotateX(180deg);
  background-image: linear-gradient(0deg, rgba(14, 19, 11, .5), rgba(14, 19, 11, .2) 60%), url('assets/olive-paper.jpg');
  background-size: 100% 100%, 100% auto;
  background-repeat: no-repeat, repeat-y;
}
.env-pocket { z-index: 3; clip-path: polygon(0 31.7%, 50% 65.5%, 100% 31.7%, 100% 100%, 0 100%); filter: drop-shadow(0 -2px 3px rgba(0, 0, 0, .25)); }

/* The wax seal is lifted out of the artwork and split along a crack. */
.seal {
  background: url('assets/olive-envelope-closed.webp') 49.42% 64.03% / 371.94% auto no-repeat;
  -webkit-mask: radial-gradient(closest-side, #000 93%, transparent 99%);
  mask: radial-gradient(closest-side, #000 93%, transparent 99%);
}
.seal-top { z-index: 2; transform: translateZ(1px); backface-visibility: hidden; -webkit-backface-visibility: hidden; clip-path: polygon(0 0, 100% 0, 100% 47%, 86% 52%, 74% 45%, 61% 56%, 49% 46%, 37% 57%, 24% 49%, 11% 54%, 0 47%); }
.seal-bottom { z-index: 4; clip-path: polygon(0 47%, 11% 54%, 24% 49%, 37% 57%, 49% 46%, 61% 56%, 74% 45%, 86% 52%, 100% 47%, 100% 100%, 0 100%); }

/* Written on the flap, but drawn outside the zoomed scene so it stays sharp.
   JS sets --ew (on-screen envelope width) and --et (text top) from the close-up camera. */
.flap-writing { position: absolute; z-index: 25; left: 0; right: 0; top: var(--et, 8svh); margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; color: #ece7d6; text-shadow: 0 1px 2px rgba(10, 14, 8, .45); pointer-events: none; }
.flap-from { font: italic 400 calc(var(--ew, 560px) * .052) / 1.2 var(--display); letter-spacing: .02em; opacity: .9; }
.flap-name { font: 500 calc(var(--ew, 560px) * .1) / 1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.flap-from + .flap-name { margin-top: calc(var(--ew, 560px) * .03); font-size: calc(var(--ew, 560px) * .078); letter-spacing: .06em; }
.flap-amp { font: italic 400 calc(var(--ew, 560px) * .075) / 1 var(--display); margin: calc(var(--ew, 560px) * .018) 0 calc(var(--ew, 560px) * .006); color: #c9ceb6; }
.js .opening:not(.is-ready) .flap-writing { visibility: hidden; }

/* The card: laid out at its final size, JS maps it into the envelope. */
.card {
  position: absolute; left: 0; top: 0; width: 360px; aspect-ratio: 853 / 1283; z-index: 2;
  transform-origin: 0 0; color: var(--ink); outline: none;
  background: url('assets/invitation-card.webp') 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 1px 1px rgba(8, 12, 6, .25)) drop-shadow(0 16px 20px rgba(8, 12, 6, .38));
  container-type: inline-size;
}
.card-print { position: absolute; inset: 12% 10.5% 18.5%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #2c3326; }
.card-print p { margin: 0; }
.card-verse { display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; margin-bottom: 3cqw !important; font-family: 'Amiri Quran', 'Amiri', serif; color: #4a5a3a; }
.verse-basmala { font-size: 4.6cqw; line-height: 1.4; }
.verse-ayah { font-size: 5.8cqw; line-height: 1.4; color: #2c3326; }
.card-head { display: flex; align-items: center; justify-content: center; gap: 4cqw; width: 100%; margin-bottom: 4.5cqw; padding-right: 3cqw; }
.card-photo { flex: none; display: block; width: 23cqw; padding: 1.2cqw; background: #fbfaf5; transform: rotate(-3deg); box-shadow: 0 .4cqw .8cqw rgba(30, 36, 24, .25), 0 2cqw 4cqw -1.5cqw rgba(30, 36, 24, .35); }
.card-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.card-names { margin: 0; font: 600 7.3cqw/.95 var(--display); letter-spacing: -.01em; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.card-names i { font: italic 500 .8em/1 var(--display); color: #6d7b5c; margin: .12em 0 .08em .1em; }
.card-names span:last-child { font-size: 1.22em; }
.card-request { max-width: 72cqw; font: italic 500 4.45cqw/1.32 var(--display); color: #3a4232; }
.card-date { margin-top: 4.2cqw !important; font: 700 4.3cqw/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.card-time { margin-top: 1.2cqw !important; font: italic 500 4.75cqw/1.3 var(--display); color: #3a4232; }
.card-place { margin-top: 3.2cqw !important; font: 600 5cqw/1.3 var(--display); }
.card-place::before { content: ''; display: block; width: 9cqw; height: 1px; margin: 0 auto 3cqw; background: #98a283; }

.open-trigger {
  position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px;
  padding: 0 24px max(7svh, 40px); border: 0; background: transparent; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent;
  color: #efe9d8; text-shadow: 0 1px 3px rgba(8, 12, 6, .6);
}
.open-trigger:focus-visible { outline-offset: -10px; }
.open-label { font: 500 21px/1.2 var(--display); letter-spacing: .2em; text-transform: uppercase; }
.js .opening:not(.is-ready) .open-label { font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; }
.js .opening:not(.is-ready) .open-sub { visibility: hidden; }
.open-sub { font: italic 400 17px/1.3 var(--display); opacity: .82; }
.open-label::before { content: ''; display: block; width: 1px; height: 34px; margin: 0 auto 14px; background: linear-gradient(transparent, currentColor); animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: translateY(6px); opacity: .3; } 50% { transform: translateY(-4px); opacity: 1; } }
.opening.is-opening .open-trigger, .opening.is-open .open-trigger { opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.opening.is-open .open-trigger { visibility: hidden; }
.scroll-cue { position: absolute; z-index: 20; left: 50%; bottom: max(3.2svh, 18px); display: flex; align-items: center; gap: 14px; padding: 6px 8px; color: var(--ivory); text-decoration: none; text-shadow: 0 1px 2px #10150d, 0 0 14px #10150d, 0 0 26px #10150d; font: italic 500 20px/1.2 var(--display); white-space: nowrap; opacity: 0; visibility: hidden; transform: translate(-50%, 10px); transition: opacity .8s ease, transform .8s ease, visibility 0s .8s; -webkit-tap-highlight-color: transparent; }
/* A round "liquid glass" button: frosted, see-through, with a bright rim and a soft top highlight. */
.cue-btn { position: relative; flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(255, 255, 255, .38); background: linear-gradient(160deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .06) 55%, rgba(255, 255, 255, .14)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .55), inset 0 -8px 16px rgba(255, 255, 255, .08), 0 8px 24px rgba(8, 12, 6, .45); -webkit-backdrop-filter: blur(10px) saturate(1.6); backdrop-filter: blur(10px) saturate(1.6); text-shadow: none; }
.cue-btn::before { content: ''; position: absolute; left: 14%; right: 14%; top: 5%; height: 42%; border-radius: 50%; background: linear-gradient(rgba(255, 255, 255, .42), rgba(255, 255, 255, 0)); pointer-events: none; }
.cue-btn svg { position: relative; width: 24px; height: 24px; filter: drop-shadow(0 1px 1px rgba(8, 12, 6, .5)); animation: cue-bob 1.6s ease-in-out infinite; }
@keyframes cue-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
.scroll-cue:active .cue-btn { transform: scale(.94); }
.opening.is-open .scroll-cue { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .8s ease, transform .8s ease, visibility 0s; }
.scroll-cue:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; }
.sound-toggle { position: fixed; z-index: 40; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px; border: 1px solid rgba(236, 230, 212, .45); border-radius: 22px; background: rgba(32, 39, 27, .86); color: var(--ivory-text); cursor: pointer; font: italic 500 16px/1 var(--display); -webkit-tap-highlight-color: transparent; }
.sound-toggle[hidden] { display: none; }
.sound-toggle svg { width: 20px; height: 20px; flex: none; }
.sound-toggle[aria-pressed="true"] .sound-slash, .sound-toggle[aria-pressed="false"] .sound-wave { display: none; }

/* ---------- The table ---------- */
.table { position: relative; max-width: 1120px; margin: 0 auto; padding: clamp(80px, 13vh, 150px) 20px 0; display: flex; flex-direction: column; gap: clamp(96px, 15vh, 180px); }
.stop { position: relative; }
.settle { transform: rotate(var(--r, 0deg)); }
.js .settle { opacity: 0; transform: translateY(-18px) rotate(calc(var(--r, 0deg) - 2.5deg)) scale(1.04); transition: opacity .5s ease, transform 1.1s cubic-bezier(.2, .8, .2, 1), box-shadow 1.1s ease; }
.js .settle.is-set { opacity: 1; transform: rotate(var(--r, 0deg)); }

.paper { position: relative; color: var(--ink); background: var(--ivory) url('assets/invitation-card.webp') 50% 48% / 520% auto; box-shadow: var(--paper-shadow); }
.paper p { margin: 0; }

.print { margin: 0; padding: 3.2%; background: #fbfaf5; box-shadow: var(--paper-shadow); }
.print img { display: block; width: 100%; height: auto; }
.print::after { content: ''; position: absolute; inset: 3.2%; background: linear-gradient(125deg, rgba(255, 255, 255, .16), transparent 38%); pointer-events: none; }
.print { position: relative; }
.js .print.settle:not(.is-set), .js .paper.settle:not(.is-set) { box-shadow: var(--lifted-shadow); }

.print-candid { width: 82%; max-width: 480px; }
.note { z-index: 2; width: 80%; max-width: 400px; margin: -20% 0 0 auto; padding: 30px 26px 26px; font: 400 21px/1.42 var(--display); }
.note p + p { margin-top: .7em; }
.note-sign { margin-top: 1.1em !important; text-align: right; font: italic 500 22px/1.2 var(--display); color: var(--ink-soft); }

.stop-evening { padding-top: 34px; }
.vellum { position: absolute; left: 12%; top: 0; width: 80%; height: 88%; background: rgba(246, 244, 234, .2); box-shadow: 0 8px 22px -10px rgba(8, 12, 6, .35), inset 0 0 0 1px rgba(255, 255, 250, .14); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); }
.vellum { background: rgba(246, 244, 234, .16) url('assets/gen/vellum-sheet.webp') center / 100% 100% no-repeat; }
.details { z-index: 2; width: 88%; max-width: 480px; padding: 34px 28px 36px; text-align: left; }
.details h2 { margin: 0 0 14px; color: var(--ink-soft); font-size: 17px; }
.details-day { font: italic 400 24px/1 var(--display); color: var(--ink-soft); }
.details-date { display: flex; align-items: flex-end; gap: 14px; margin-top: 2px !important; }
.details-num { font: 400 clamp(112px, 34vw, 150px)/.78 var(--display); letter-spacing: -.04em; color: var(--ink); }
.details-month { padding-bottom: 6px; font: 500 26px/1.05 var(--display); letter-spacing: .02em; }
.details-time { margin-top: 18px !important; font: 500 22px/1.3 var(--display); }
.details-rule { display: block; width: 56px; height: 1px; margin: 26px 0 24px; background: #a9b196; }
.details-place { font: 500 25px/1.3 var(--display); }

.postmark { position: absolute; z-index: 3; top: -4px; right: -6px; width: 136px; height: 136px; color: var(--stamp); opacity: .8; mix-blend-mode: multiply; pointer-events: none; }
.postmark circle { fill: none; stroke: currentColor; stroke-width: 2.4; }
.postmark text { fill: currentColor; font: 600 13.5px var(--display); letter-spacing: 2.2px; }
.postmark .pm-day { font-size: 25px; letter-spacing: 1px; }
.postmark .pm-year { font-size: 14px; letter-spacing: 1.5px; }

.map-card {
  position: relative; z-index: 3; display: flex; flex-direction: column; gap: 6px; width: 66%; max-width: 300px; margin: -30px 0 0 auto; padding: 22px 22px 20px;
  text-decoration: none; color: #eee8d6;
  background: #3f4a35 url('assets/olive-paper.jpg') 0 0 / 160% auto;
  box-shadow: var(--paper-shadow);
}
.map-card .small-caps { color: #bfc4a8; font-size: 16px; }
.map-name { font: 500 23px/1.2 var(--display); }
.map-go { margin-top: 6px; font: italic 500 19px/1.2 var(--display); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.map-card:hover .map-go { text-decoration-thickness: 2px; }

.stop-portrait { display: flex; justify-content: flex-end; }
.print-portrait { width: 78%; max-width: 440px; }

.sprig { position: absolute; z-index: 2; left: -8%; top: 12%; width: 38%; max-width: 330px; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(8, 12, 6, .4)); }

.stop-reply { display: flex; justify-content: center; padding-top: 20px; }
.tag {
  position: relative; width: 70%; max-width: 290px; aspect-ratio: 560 / 1300; margin-top: -40px;
  text-align: center; color: var(--ink);
  background: url('assets/gen/rsvp-tag.webp') 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 12px 16px rgba(8, 12, 6, .45));
}
.tag-print { position: absolute; inset: 46% 13% 16%; display: flex; flex-direction: column; justify-content: center; }
.tag h2 { margin: 0 0 14px; font: 500 32px/1.05 var(--display); text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.tag p { margin: 0; font: italic 400 21px/1.4 var(--display); color: #4d5644; }

.stop-reply { flex-direction: column; align-items: center; }
.reply { z-index: 3; width: 92%; max-width: 460px; margin-top: 28px; padding: 30px 24px 28px; font-size: 20px; }
.reply .field { margin: 0 0 22px; padding: 0; border: 0; }
.reply .field[hidden], .reply .field-error[hidden] { display: none; }
.reply label, .reply legend { display: block; padding: 0; font: 500 20px/1.3 var(--display); color: var(--ink); }
.reply .optional { font-style: italic; font-weight: 400; color: var(--ink-soft); }
.reply input[type="text"], .reply input[type="number"], .reply textarea {
  display: block; width: 100%; margin-top: 8px; padding: 10px 12px; border: 1px solid #a9b196; border-radius: 3px;
  background: rgba(255, 255, 250, .72); color: var(--ink); font: 400 20px/1.35 var(--display);
}
.reply input[type="number"] { width: 7em; }
.reply textarea { resize: vertical; min-height: 5.4em; }
.reply input:focus-visible, .reply textarea:focus-visible, .reply-send:focus-visible { outline: 2px solid var(--stamp); outline-offset: 2px; }
.reply [aria-invalid="true"] { border-color: #8a3b2e; }
.choice label { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 400; cursor: pointer; }
.choice legend { margin-bottom: 4px; }
.choice input { width: 22px; height: 22px; margin: 0; accent-color: var(--stamp); flex: none; }
.field-error { margin: 6px 0 0 !important; font: italic 500 17px/1.3 var(--display); color: #8a3b2e; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.reply-send {
  display: block; width: 100%; min-height: 50px; padding: 12px 20px; border: 0; border-radius: 3px; cursor: pointer;
  background: #3f4a35 url('assets/olive-paper.jpg') 0 0 / 160% auto; color: #eee8d6; font: italic 500 22px/1.2 var(--display);
  box-shadow: 0 6px 14px -8px rgba(8, 12, 6, .6);
}
.reply-send:hover { color: #fff; }
.reply-send[disabled] { opacity: .65; cursor: progress; }
.reply-status { margin-top: 14px !important; min-height: 1.3em; font: italic 500 19px/1.35 var(--display); color: var(--ink); text-align: center; }
.reply-status.is-error { color: #8a3b2e; }
.reply.is-sent .field, .reply.is-sent .reply-send { display: none; }
.reply.is-sent .reply-status { margin-top: 0 !important; font-size: 23px; }

.close { display: flex; flex-direction: column; align-items: center; padding: clamp(30px, 8vh, 80px) 0 max(64px, 10vh); text-align: center; }
.close-mark { margin: 0; font: 400 64px/1 var(--display); letter-spacing: .04em; color: var(--ivory-text); }
.close-mark i { color: #8f9c7c; }
.close-date { margin: 12px 0 34px; font: 500 16px/1 var(--display); letter-spacing: .3em; color: var(--ivory-muted); }
.reseal { padding: 10px 6px; border: 0; background: none; cursor: pointer; font: italic 400 20px/1.3 var(--display); color: var(--ivory-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.reseal:hover { text-decoration-thickness: 2px; }

@media (min-width: 860px) {
  .table { padding-left: 40px; padding-right: 40px; gap: 200px; }
  .stop-note { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; }
  .print-candid { grid-column: 2 / 7; grid-row: 1; width: auto; max-width: none; }
  .note { grid-column: 6 / 11; grid-row: 1; width: auto; max-width: none; margin: 16% 0 0; padding: 44px 44px 40px; font-size: 25px; }
  .stop-evening { display: grid; grid-template-columns: repeat(12, 1fr); padding-top: 50px; }
  .vellum { left: 20%; width: 46%; }
  .details { grid-column: 3 / 8; grid-row: 1; width: auto; max-width: none; padding: 48px 48px 50px; }
  .postmark { top: 6px; right: auto; left: 56%; width: 170px; height: 170px; }
  .map-card { grid-column: 8 / 11; grid-row: 1; align-self: end; width: auto; margin: 0 0 40px -30px; }
  .stop-portrait { display: grid; grid-template-columns: repeat(12, 1fr); }
  .print-portrait { grid-column: 7 / 11; width: auto; max-width: none; }
  .stop-reply { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; }
  .stop-reply .tag { grid-column: 3 / 6; grid-row: 1; width: auto; }
  .reply { grid-column: 6 / 11; grid-row: 1; width: auto; max-width: none; margin: 0 0 0 32px; padding: 40px 40px 36px; }
  .sprig { left: 30%; top: 8%; width: 17%; max-width: 380px; }
}

@media (max-width: 380px) {
  .scroll-cue { gap: 10px; font-size: 18px; }
  .note { font-size: 19px; padding: 24px 20px 22px; }
  .details { padding: 28px 22px 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .settle { transition: opacity .3s ease; transform: rotate(var(--r, 0deg)); }
  .open-label::before { animation: none; }
  .scroll-cue, .opening.is-open .scroll-cue { transition: opacity .3s ease, visibility 0s; transform: translateX(-50%); }
  .cue-btn svg { animation: none; }
}