#invitation-letter { margin-block: 1.8rem 1rem; }
.kve-invitation-button { appearance: none; display: inline-flex; align-items: center; flex-direction: column; gap: 15px; padding: 18px 14px 12px; border: 0; border-radius: 10px; color: inherit; background: transparent; font: inherit; cursor: pointer; perspective: 650px; -webkit-tap-highlight-color: transparent; }
.kve-invitation-button:focus-visible { outline: 2px solid #b98a45; outline-offset: 5px; }
.kve-invitation-label { font: 500 .8rem/1.5 "DM Sans", sans-serif; letter-spacing: .07em; }
.kve-envelope { position: relative; display: block; width: 160px; height: 104px; border: 1px solid #c6a56b; border-radius: 3px 3px 6px 6px; background: #c8aa73; box-shadow: 0 10px 25px #1e11062b, inset 0 0 14px #6b481c1c; transform: rotate(-5deg); transform-style: preserve-3d; transition: transform .4s ease, box-shadow .4s ease; }
.kve-invitation-button:hover .kve-envelope { transform: rotate(-2deg) translateY(-4px); box-shadow: 0 16px 28px #1e11062b; }
.kve-envelope-note { position: absolute; z-index: 1; top: 7px; left: 13px; width: 132px; height: 86px; box-sizing: border-box; border: 1px solid #dfcda5; border-radius: 2px; background: #f5ead2; box-shadow: 0 1px 4px #55371620; transition: transform .62s cubic-bezier(.2,.6,.25,1); }
.kve-envelope-note::before { content: ""; position: absolute; inset: 18px 17px 22px; opacity: .38; background: repeating-linear-gradient(to bottom, transparent 0 8px, #a28860 8px 9px, transparent 9px 15px); }
.kve-envelope-note::after { content: "KVE"; position: absolute; left: 17px; bottom: 7px; color: #9d7742; font: italic 9px/1 Georgia, serif; letter-spacing: .12em; }
.kve-envelope-pocket { position: absolute; z-index: 2; inset: 0; border-radius: 2px 2px 5px 5px; overflow: hidden; background: linear-gradient(33deg, #e0c493 49.4%, transparent 50%) left / 51% 100% no-repeat, linear-gradient(-33deg, #dcc18e 49.4%, transparent 50%) right / 51% 100% no-repeat; }
.kve-envelope-pocket::after { content: ""; position: absolute; inset: 38% 0 0; background: linear-gradient(0deg, #dcc08e, #e5cca0); clip-path: polygon(0 100%, 0 92%, 50% 0, 100% 92%, 100% 100%); }
.kve-envelope-flap { position: absolute; z-index: 3; inset: 0 0 auto; height: 78px; background: linear-gradient(160deg, #eed9b2, #dac08f); clip-path: polygon(0 0, 100% 0, 50% 82%); transform-origin: center top; transition: transform .45s cubic-bezier(.25,.65,.3,1), filter .45s ease; filter: drop-shadow(0 2px 1px #805b273d); }
.kve-envelope-seal { position: absolute; z-index: 4; left: calc(50% - 19px); top: 40px; display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid #7a8b74; border-radius: 46% 52% 45% 53%; background: radial-gradient(circle at 35% 25%, #597660, #304a3a 73%); color: #f2e7cc; box-shadow: 0 3px 5px #49211350, inset 0 0 0 3px #253c2e55; font: 600 10px/1 Georgia, serif; letter-spacing: .02em; transition: opacity .2s ease, transform .3s ease; }
.kve-invitation-button.is-opening .kve-envelope { transform: rotate(0deg) translateY(-3px); }
.kve-invitation-button.is-opening .kve-envelope-flap { transform: rotateX(-172deg); filter: none; }
.kve-invitation-button.is-opening .kve-envelope-seal { opacity: 0; transform: translateY(6px) scale(.78); }
.kve-invitation-button.is-opening .kve-envelope-note { transform: translateY(-46px) rotate(-2deg); transition-delay: .2s; }

html.invitation-letter-open { overflow: hidden; }
.kve-letter-dialog { position: fixed; inset: 0; width: min(900px, calc(100% - 24px)); max-width: none; max-height: none; height: fit-content; margin: auto; padding: 0; border: 0; background: transparent; color: #30271e; overflow: visible; perspective: 1200px; }
.kve-letter-dialog:not([open]) { display: none; }
.kve-letter-dialog::backdrop { background: #140e08b5; backdrop-filter: blur(5px); }
.kve-letter-paper { position: relative; box-sizing: border-box; max-height: 90vh; max-height: 90svh; padding: 0; overflow: auto; overscroll-behavior: contain; border-radius: 4px; background: #f9f3e6; box-shadow: 0 30px 100px #0007; scrollbar-color: #a5ac98 #f1eadc; scrollbar-width: thin; }
.kve-letter-dialog[open] .kve-letter-paper { animation: kve-letter-unfold .76s cubic-bezier(.16,.72,.25,1) both; }
.kve-letter-toolbar { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f9f3e6f5; border-bottom: 1px solid #d9cdb8; }
.kve-letter-toolbar button { min-height: 44px; padding: 8px 13px; border: 1px solid #a5865145; border-radius: 24px; background: #fffaf0; color: #52614c; font: 500 12px/1.4 'DM Sans', Arial, sans-serif; cursor: pointer; }
.kve-letter-toolbar button:focus-visible, .kve-letter-transcript summary:focus-visible, .kve-letter-image-viewport:focus-visible { outline: 2px solid #3f594b; outline-offset: -3px; }
.kve-letter-toolbar .kve-letter-close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; margin-left: auto; font: 28px/1 Georgia, serif; }
.kve-letter-music-button { display: inline-flex; align-items: center; gap: 8px; }
.kve-letter-music-button[aria-pressed="true"] { background: #e7eadcef; }
.kve-letter-audio-status { margin: 0; padding: 10px 18px; font: 400 12px/1.6 'DM Sans', Arial, sans-serif; color: #715532; }
.kve-letter-audio-status[hidden] { display: none; }
.kve-letter-image-viewport { overflow: auto; }
.kve-letter-original { display: block; width: 100%; height: auto; max-width: none; }
.kve-letter-image-viewport.is-zoomed .kve-letter-original { width: max(100%, 1055px); }
.kve-letter-transcript { border-top: 1px solid #d9cdb8; background: #f9f3e6; }
.kve-letter-transcript summary { padding: 17px 22px; color: #3f594b; font: 500 13px/1.6 'DM Sans', Arial, sans-serif; cursor: pointer; }
.kve-letter-readable { padding: 8px clamp(24px, 6vw, 60px) 38px; }
.kve-letter-title { margin: 0; color: #30271e; font: 400 2rem/1.2 'Playfair Display', Georgia, serif; }
.kve-letter-kicker { margin: 8px 0 24px; font: italic 1.1rem/1.6 Georgia, serif; }
.kve-letter-body p { margin: 0 0 20px; color: #332b22; font: 400 17px/1.8 Georgia, serif; }
.kve-letter-signature { margin: 30px 0 0; font: italic 17px/1.8 Georgia, serif; }
.kve-letter-signature span, .kve-letter-signature strong { display: block; }
.kve-letter-dialog.is-closing .kve-letter-paper { animation: kve-letter-close .18s ease-in both; }
@keyframes kve-letter-unfold {
  0% { opacity: .2; transform: translate(var(--letter-origin-x, 0px), var(--letter-origin-y, 80px)) rotateX(50deg) rotate(-4deg) scale(.18, .1); filter: brightness(.83); }
  42% { opacity: 1; transform: translate(0, 8px) rotateX(-7deg) rotate(.8deg) scale(.94, .65); filter: brightness(1); }
  74% { transform: translate(0, -3px) rotateX(2deg) rotate(-.2deg) scale(1, 1.01); }
  100% { opacity: 1; transform: translate(0, 0) rotateX(0) rotate(0) scale(1); filter: brightness(1); }
}
@keyframes kve-letter-close { to { opacity: 0; transform: translateY(15px) scale(.97); } }
@media (max-width: 480px) {
  .kve-letter-dialog { width: calc(100% - 16px); }
  .kve-letter-toolbar { padding: 8px; gap: 6px; }
  .kve-letter-toolbar button { font-size: 11px; padding: 8px 10px; }
}
html.still .kve-invitation-button *, html.still .kve-letter-dialog * { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .kve-invitation-button *, .kve-letter-dialog * { animation: none !important; transition: none !important; }
}

.kve-letter-transcript[hidden] { display: none !important; }