/* ── envelope (shared mechanics) ── */
.mk-env { position: relative; width: calc(var(--u)*560); margin: calc(var(--u)*270) auto 0; transition: margin-top 1.4s cubic-bezier(.65, 0, .35, 1); min-height: calc(var(--u)*370);
  display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: calc(var(--u)*28); perspective: 1400px; }
.mk-env > svg { position: absolute; left: 0; width: 100%; overflow: visible; }
.mk-env[data-state="open"] { margin-top: calc(var(--u)*56); }
.mk-env-back { bottom: 0; height: calc(var(--u)*370); z-index: 1; filter: drop-shadow(0 calc(var(--u)*18) calc(var(--u)*26) rgba(40, 6, 14, .35)); }
.mk-env-front { bottom: 0; height: calc(var(--u)*370); z-index: 3; pointer-events: none; }
.mk-env-flap { bottom: calc(var(--u)*148); height: calc(var(--u)*222); z-index: 4; transform-origin: 50% 0; transition: transform .75s cubic-bezier(.45, 0, .2, 1); pointer-events: none; }
.mk-env-front path, .mk-env-flap path { stroke-width: 1; vector-effect: non-scaling-stroke; }
.mk-env.flap-behind .mk-env-flap { z-index: 1; }
.mk-env:not([data-state="closed"]) .mk-env-flap { transform: rotateX(180deg); }

.mk-paper { box-sizing: border-box; position: relative; z-index: 2; width: calc(var(--u)*500); margin: 0 auto; max-height: calc(var(--u)*300); overflow: hidden;
  transition: transform .85s cubic-bezier(.16, 1, .3, 1), max-height 1.4s cubic-bezier(.65, 0, .35, 1); }
/* the story ends above the pocket once it is out; while inside, the paper stays short enough to hide */
.mk-env[data-state="open"] .mk-paper { padding-bottom: calc(var(--u)*380); }
.mk-env[data-state="peek"] .mk-paper { transform: translateY(calc(var(--u)*-190)); }

.mk-env-btn { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u)*370); z-index: 6; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mk-env-btn:disabled { pointer-events: none; }
.mk-env-btn:focus-visible { outline: 2px solid #cba162; outline-offset: 4px; border-radius: 8px; }
.mk-seal { position: absolute; left: 50%; top: calc(var(--u)*172); width: calc(var(--u)*104); translate: -50% 0; filter: drop-shadow(0 calc(var(--u)*4) calc(var(--u)*6) rgba(40, 6, 14, .4));
  transition: opacity .35s ease, scale .35s ease; animation: mk-breathe 2.8s ease-in-out infinite; }
@keyframes mk-breathe { 50% { scale: 1.06; } }
.mk-env:not([data-state="closed"]) .mk-seal { opacity: 0; scale: .7; animation: none; }
.mk-hint { margin: calc(var(--u)*30) 0 0; text-align: center; transition: opacity .4s ease; }
.mk-env:not([data-state="closed"]) + .mk-hint { opacity: 0; }

/* one-line event dates, a size smaller */
@media (prefers-reduced-motion: reduce) {
  .mk-env, .mk-env-flap, .mk-paper, .mk-seal, .mk-hint { transition: none !important; animation: none !important; }
}

/* Love Story — Golden Burgundy: dark paper, gold line flowers, a burgundy envelope with a gold seal */
.mk-story { --u: calc(100cqw / 720); position: relative; z-index: 96; overflow: hidden; padding: calc(var(--u)*90) 0 calc(var(--u)*140);
  background: #3a0d18 url("../assets/luxury-burgundy/dresscode-bg.jpg") center top / 100% auto repeat-y; }
.mk-story .mk-orn-l { position: absolute; left: calc(var(--u)*-60); top: calc(var(--u)*30); width: calc(var(--u)*230); opacity: .9; pointer-events: none; }
.mk-story .mk-orn-r { position: absolute; right: calc(var(--u)*-110); bottom: calc(var(--u)*-40); width: calc(var(--u)*230); opacity: .55; pointer-events: none; }
.mk-story .mk-head { position: relative; width: calc(var(--u)*560); margin: 0 auto; }
.mk-story .mk-h { margin: 0; line-height: 1; }
.mk-story .mk-h b { display: block; font: 600 calc(var(--u)*56)/1 var(--lb-sans); color: #cba162; }
.mk-story .mk-h i { display: block; margin: calc(var(--u)*-22) 0 0 calc(var(--u)*6); font: 400 calc(var(--u)*96)/1.05 var(--lb-script); font-style: normal; color: #fff; }
.mk-story .mk-intro { margin: calc(var(--u)*18) 0 0; font: 300 max(12.5px, calc(var(--u)*22))/1.55 var(--lb-sans); color: rgba(255, 255, 255, .85); }
.mk-story .mk-hint { font: 400 calc(var(--u)*46)/1.2 var(--lb-script); color: #cba162; }

.mk-story .mk-env-back rect { fill: #4e0f1d; }
.mk-story .mk-env-front .l { fill: #7a1d33; stroke: rgba(203, 161, 98, .55); }
.mk-story .mk-env-front .r { fill: #741b30; stroke: rgba(203, 161, 98, .55); }
.mk-story .mk-env-front .b { fill: #812238; stroke: rgba(203, 161, 98, .55); }
.mk-story .mk-env-flap path { fill: #8a263d; stroke: rgba(203, 161, 98, .75); }

.mk-story .mk-paper { background: #f4ecdf; color: #360d17; box-shadow: 0 calc(var(--u)*6) calc(var(--u)*18) rgba(20, 2, 8, .35); padding: calc(var(--u)*54) calc(var(--u)*46) calc(var(--u)*70); text-align: left; }
.mk-story .mk-paper::before { content: ""; position: absolute; inset: calc(var(--u)*14); border: 1px solid rgba(203, 161, 98, .55); pointer-events: none; }
.mk-story .mk-paper-to { margin: 0 0 calc(var(--u)*30); text-align: center; font: 400 calc(var(--u)*70)/1 var(--lb-script); color: #7a1d33; }
.mk-story ol { position: relative; list-style: none; margin: 0; padding: 0 0 0 calc(var(--u)*40); }
.mk-story ol::before { content: ""; position: absolute; left: calc(var(--u)*6); top: calc(var(--u)*26); bottom: calc(var(--u)*20); width: 1px; background: linear-gradient(#b08850, rgba(176, 136, 80, .25)); }
.mk-story li { position: relative; padding-bottom: calc(var(--u)*38); }
.mk-story li:last-child { padding-bottom: 0; }
.mk-story li::before { content: ""; position: absolute; left: calc(var(--u)*-40); top: calc(var(--u)*24); width: calc(var(--u)*13); height: calc(var(--u)*13); transform: rotate(45deg); border: 1px solid #b08850; background: #f4ecdf; }
.mk-story li:last-child::before { background: #b08850; }
.mk-story h3 { margin: 0; font: 400 calc(var(--u)*66)/1 var(--lb-script); color: #7a1d33; }
.mk-story li p { margin: calc(var(--u)*6) 0 0; font: 300 max(12.5px, calc(var(--u)*22))/1.65 var(--lb-sans); color: #360d17; text-wrap: pretty; }
.mk-story .mk-sign { margin: calc(var(--u)*40) 0 0; text-align: center; font: 400 calc(var(--u)*76)/1 var(--lb-script); color: #b08850; }

.lb2-t.mk-date1 { --size: 26 !important; }
.mk-story .mk-when { margin: 0 0 calc(var(--u)*4); font: 500 max(10px, calc(var(--u)*17))/1.4 'Google Sans Flex', 'Google Sans', system-ui, sans-serif; letter-spacing: .18em; color: #b08850; }
.mk-story li p:not(.mk-when) { white-space: pre-line; }

/* Couple portraits — Golden Burgundy: arched frames in gold line on the dark paper */
.mk-couple { --u: calc(100cqw / 720); position: relative; z-index: 99; overflow: hidden; padding: calc(var(--u)*170) 0 calc(var(--u)*120); text-align: center;
  background: #3a0d18 url("../assets/luxury-burgundy/dresscode-bg.jpg") center top / 100% auto repeat-y; }
.mk-couple .mk-orn-l { position: absolute; left: calc(var(--u)*-70); top: calc(var(--u)*-20); width: calc(var(--u)*220); opacity: .85; pointer-events: none; }
.mk-couple .mk-h { margin: 0 0 calc(var(--u)*50); line-height: 1; text-align: left; width: calc(var(--u)*600); margin-left: auto; margin-right: auto; }
.mk-couple .mk-h b { display: block; font: 600 calc(var(--u)*52)/1 var(--lb-sans); color: #cba162; }
.mk-couple .mk-h i { display: block; margin: calc(var(--u)*-18) 0 0 calc(var(--u)*6); font: 400 calc(var(--u)*92)/1.05 var(--lb-script); font-style: normal; color: #fff; }
.mk-couple .mk-pp-row { display: flex; justify-content: center; gap: calc(var(--u)*34); }
.mk-couple .mk-pp { margin: 0; width: calc(var(--u)*290); }
.mk-couple .mk-pp-r { transform: translateY(calc(var(--u)*60)); }
.mk-couple .mk-pp-photo { position: relative; aspect-ratio: 3 / 4; border-radius: calc(var(--u)*145) calc(var(--u)*145) calc(var(--u)*6) calc(var(--u)*6); overflow: hidden;
  border: 1px solid #cba162; box-shadow: 0 0 0 calc(var(--u)*8) rgba(42, 5, 14, .6), 0 0 0 calc(var(--u)*9) rgba(203, 161, 98, .55), 0 calc(var(--u)*20) calc(var(--u)*40) rgba(10, 0, 4, .45); }
.mk-couple .mk-pp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-couple figcaption { display: flex; flex-direction: column; gap: calc(var(--u)*2); margin-top: calc(var(--u)*24); }
.mk-couple .mk-pp-role { font: 300 max(10px, calc(var(--u)*18))/1.3 var(--lb-sans); color: rgba(255, 255, 255, .8); }
.mk-couple .mk-pp-name { font: 400 calc(var(--u)*80)/1 var(--lb-script); color: #cba162; }