:root {
  --porcelain: #faf7f0;
  --ivory: #f4eee3;
  --parchment: #e7dbc7;
  --champagne: #c4a06d;
  --antique-gold: #9a7447;
  --ink: #332d28;
  --muted: #74695f;
  --olive: #41473c;
  --deep-olive: #30352d;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Montserrat", Arial, sans-serif;
  --accent-font: "Cormorant Garamond", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--porcelain); color: var(--ink); font-family: var(--sans); font-weight: 300; }
body.locked { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
.grain { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .13; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E"); }
.music-player { position: fixed; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.music-player iframe { width: 1px; height: 1px; border: 0; }
.music-control { position: fixed; z-index: 110; right: max(16px,env(safe-area-inset-right)); bottom: max(16px,env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 9px; min-width: 108px; height: 46px; padding: 0 16px; border: 1px solid color-mix(in srgb,var(--champagne) 58%,transparent); border-radius: 30px; background: color-mix(in srgb,var(--deep-olive) 91%,transparent); color: var(--ivory); box-shadow: 0 10px 28px rgba(0,0,0,.2); backdrop-filter: blur(10px); cursor: pointer; transition: transform .25s,opacity .25s; }
.music-control[hidden] { display: none; }
.music-control:hover { transform: translateY(-2px); }
.music-control svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.music-control span { font: 500 8px var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.music-control .music-off-icon { display: none; }
.music-control.paused { opacity: .72; }
.music-control.paused .music-on-icon { display: none; }
.music-control.paused .music-off-icon { display: block; }
.eyebrow, .kicker { margin: 0 0 16px; font-family: var(--accent-font); font-size: 9px; font-weight: 400; letter-spacing: .42em; text-transform: uppercase; }

/* Bespoke name treatment — intentionally uses “ve”, not an ampersand. */
.name-lockup { display: flex; align-items: center; justify-content: center; color: var(--ink); font-family: var(--serif); font-weight: 500; letter-spacing: -.055em; }
.name-join { display: flex; align-items: center; gap: 8px; margin: .15em .22em 0; color: var(--antique-gold); }
.name-join i { width: clamp(10px,2vw,22px); height: 1px; background: currentColor; opacity: .75; }
.name-join em { font: italic 400 .3em/1 var(--serif); letter-spacing: 0; }

/* Full-screen envelope opening */
.opening { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; overflow: hidden; perspective: 1800px; background: #d8d3c8; cursor: pointer; }
.opening::after { content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none; background: rgba(31,27,22,.18); transition: opacity .45s ease; }
.envelope-stage { position: absolute; inset: -6%; overflow: hidden; transform-style: preserve-3d; filter: drop-shadow(0 18px 25px rgba(45,39,31,.22)); }
.envelope-paper { position: absolute; inset: 0; background: linear-gradient(115deg,#dedbd1 0,#f1eee5 48%,#d2cec2 100%); }
.envelope-paper::after { content: ""; position: absolute; inset: 0; opacity: .2; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); }
.envelope-flap { position: absolute; z-index: 4; left: 0; top: 0; width: 100%; height: 58%; transform-origin: 50% 0; transform-style: preserve-3d; clip-path: polygon(0 0,100% 0,50% 100%); background: linear-gradient(154deg,#e8e5dc 10%,#cfcbc0 78%,#bbb5a9); filter: drop-shadow(0 8px 6px rgba(55,48,38,.18)); transition: transform .8s cubic-bezier(.4,0,.15,1),filter .4s;
}
.envelope-fold { position: absolute; z-index: 2; bottom: 0; width: 57%; height: 72%; background: linear-gradient(145deg,#e0ddd3,#c8c4b9); }
.fold-left { left: 0; clip-path: polygon(0 0,100% 70%,100% 100%,0 100%); }
.fold-right { right: 0; clip-path: polygon(100% 0,0 70%,0 100%,100% 100%); background: linear-gradient(215deg,#e4e1d8,#c7c2b7); }
.invitation-card { position: absolute; z-index: 1; left: 15%; right: 15%; top: 22%; height: 68%; display: flex; align-items: center; justify-content: center; gap: .25em; background: #f8f4eb; border: 1px solid #c7b18e; color: #42382e; font: italic 500 clamp(36px,7vw,88px)/1 var(--serif); box-shadow: 0 10px 40px rgba(54,43,29,.18); transition: transform .9s .5s cubic-bezier(.2,.75,.2,1),opacity .4s .85s; }
.invitation-card::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(154,116,71,.24); }
.invitation-card i { color: var(--antique-gold); font-size: .42em; }
.invitation-card small { position: absolute; bottom: 18%; font: 400 8px var(--sans); letter-spacing: .4em; }
.seal-wrap { position: relative; z-index: 10; display: grid; place-items: center; }

/* Layered, embossed wax seal */
.seal { position: relative; z-index: 2; width: clamp(160px,21vw,260px); height: clamp(160px,21vw,260px); padding: 0; border: 0; border-radius: 50%; background: transparent; color: #d7a79d; cursor: pointer; filter: drop-shadow(0 14px 14px rgba(55,15,14,.36)); transition: transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s; }
.seal-edge { position: absolute; inset: 0; clip-path: polygon(50% 0,58% 3%,67% 2%,74% 8%,84% 10%,89% 19%,96% 27%,94% 37%,100% 46%,96% 55%,98% 65%,90% 73%,86% 83%,76% 86%,68% 94%,58% 94%,49% 100%,40% 96%,30% 98%,23% 90%,13% 87%,10% 77%,3% 69%,5% 59%,0 50%,4% 40%,2% 31%,10% 23%,14% 13%,25% 11%,32% 4%,42% 5%); background: radial-gradient(circle at 34% 27%,#a8332f 0,#7d1717 52%,#4d090c 100%); box-shadow: inset 8px 9px 13px rgba(255,138,119,.24),inset -10px -11px 15px rgba(37,0,4,.38); }
.seal-face { position: absolute; inset: 11%; display: block; border: 2px solid rgba(225,117,104,.45); border-radius: 50%; background: radial-gradient(circle at 37% 28%,#9d2b28,#681012 72%); box-shadow: inset 0 0 0 5px rgba(48,0,4,.22),inset 3px 3px 8px rgba(255,128,109,.18),0 0 0 3px rgba(72,3,7,.25); }
.seal-face::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(245,218,168,.28); border-radius: 50%; }
.seal-wreath { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); fill: none; stroke: rgba(244,218,167,.7); stroke-width: 1.25; stroke-linecap: round; }
.seal-initial { position: absolute; top: 25%; font: 500 clamp(58px,9vw,108px)/.8 var(--serif); color: #8b201e; text-shadow: 1px 2px 1px rgba(220,95,81,.33),-1px -2px 2px rgba(46,0,4,.55); }
.seal-y { left: 25%; }
.seal-k { right: 22%; }
.seal-dot { position: absolute; left: 0; right: 0; bottom: 14%; font: 500 clamp(5px,.6vw,8px) var(--sans); letter-spacing: .26em; }
.seal:hover { transform: scale(1.045) rotate(-2deg); }
.seal:focus-visible { outline: 2px solid var(--antique-gold); outline-offset: 7px; }
.open-hint { position: absolute; z-index: 3; top: 50%; left: 50%; width: min(620px,88vw); margin: 0; transform: translate(-50%,-50%); color: #f6e9e2; text-align: center; text-shadow: 0 2px 9px rgba(45,0,0,.8); font: 400 clamp(9px,1.15vw,15px) var(--serif); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; transition: opacity .25s; }
.opening.opened { pointer-events: none; opacity: 0; transition: opacity .5s 1.35s; }
.opening.opened::after { opacity: 0; }
.opening.opened .envelope-flap { z-index: 0; transform: rotateX(178deg); filter: none; }
.opening.opened .seal { opacity: 0; transform: scale(.35) rotate(14deg); }
.opening.opened .open-hint { opacity: 0; }
.opening.opened .invitation-card { opacity: 0; transform: translateY(-115vh) scale(1.04); }
.opening.finished { visibility: hidden; }

main { opacity: 0; transition: opacity .52s .42s; }
main.visible { opacity: 1; }
.hero { position: relative; height: 100svh; min-height: 610px; display: grid; place-items: end center; overflow: hidden; color: white; background: var(--deep-olive); }
.hero-photo { position: absolute; inset: 0; background-image: var(--hero-desktop,url("assets/kadir-yaren-nisan-web.jpeg")); background-position: center 44%; background-size: cover; background-repeat: no-repeat; transform: scale(1.045); transition: transform 7s cubic-bezier(.2,.6,.2,1); }
main.visible .hero-photo { transform: scale(1); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(to bottom,rgba(19,22,17,.03) 20%,rgba(19,22,17,.15) 52%,rgba(25,25,21,.84) 100%); }
.hero-content { position: relative; z-index: 1; width: 100%; padding: 0 20px max(54px,8.5vh); text-align: center; }
.light { color: #e8dcc8; }
.hero-names { color: #fffaf0; font-size: clamp(48px,12vw,96px); line-height: .9; text-shadow: 0 6px 28px rgba(0,0,0,.28); }
.hero-names .name-join { color: #d6b77f; }
.fine-line { width: 52px; height: 1px; margin: 27px auto 19px; background: #d0af75; }
.hero-date { margin: 0; font-size: 9px; font-weight: 400; letter-spacing: .32em; text-transform: uppercase; }

.section { position: relative; padding: 112px max(24px,calc((100vw - 900px)/2)); text-align: center; overflow: hidden; }
.section > :not(.botanical) { position: relative; z-index: 2; }
.botanical { position: absolute; z-index: 1; height: auto; pointer-events: none; user-select: none; }
.intro-garland { left: 50%; top: clamp(34px,4.5vw,68px); width: clamp(430px,42vw,650px); transform: translateX(-50%); opacity: .62; }
.countdown-sprig { right: clamp(-80px,-3vw,-25px); top: 50%; width: clamp(145px,16vw,245px); transform: translateY(-50%) rotate(-8deg); opacity: .3; filter: sepia(.15) saturate(.72) brightness(1.05); }
.weather-corner { right: clamp(-95px,-4vw,-35px); bottom: clamp(-90px,-5vw,-35px); width: clamp(230px,28vw,430px); opacity: .55; }
.detail-spray { left: clamp(-145px,-7vw,-65px); top: 50%; width: clamp(240px,26vw,420px); transform: translateY(-50%) rotate(-5deg); opacity: .62; }
.memory-sprig { left: clamp(-55px,-2vw,-18px); top: -45px; width: clamp(145px,15vw,225px); transform: rotate(17deg); opacity: .5; }
.closing-garland { left: 50%; top: clamp(16px,2vw,30px); width: clamp(400px,36vw,560px); transform: translateX(-50%); opacity: .14; filter: saturate(.48) brightness(.76); }
.intro { padding-top: clamp(260px,25vw,330px); background: var(--porcelain); }
.intro::before, .intro::after { content: ""; position: absolute; top: 0; width: 1px; height: 100%; background: linear-gradient(transparent,rgba(154,116,71,.25) 22%,rgba(154,116,71,.25) 78%,transparent); }
.intro::before { left: max(18px,calc((100vw - 960px)/2)); }
.intro::after { right: max(18px,calc((100vw - 960px)/2)); }
.intro h3, .section-heading h3, .closing h3 { max-width: 680px; margin: 0 auto 31px; font: 500 clamp(38px,7vw,62px)/1.02 var(--serif); letter-spacing: -.025em; }
.intro .kicker { color: var(--antique-gold); }
.invitation-text { max-width: 570px; margin: 0 auto; color: #514840; font: 400 19px/1.8 var(--serif); }
.chapter-mark { display: flex; align-items: center; justify-content: center; gap: 12px; width: 120px; margin: 38px auto 0; color: var(--champagne); }
.chapter-mark span { flex: 1; height: 1px; background: currentColor; }
.chapter-mark i { font: italic 400 12px var(--serif); }
.countdown-section { background: var(--olive); color: #f9f2e5; }
.countdown-section::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(220,198,159,.2); pointer-events: none; }
.section-heading span { display: block; margin-bottom: 14px; color: #ceb88f; font-size: 8px; font-weight: 400; letter-spacing: .42em; text-transform: uppercase; }
.section-heading h3 { margin-bottom: 0; }
.countdown { display: flex; align-items: center; justify-content: center; gap: clamp(9px,4vw,42px); margin-top: 55px; }
.countdown div { min-width: 58px; }
.countdown strong { display: block; color: #fff9ed; font: 400 clamp(39px,8vw,64px)/1 var(--serif); }
.countdown span { display: block; margin-top: 9px; color: #cabb9e; font-size: 7px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; }
.countdown i { width: 3px; height: 3px; transform: rotate(45deg); background: #c7a873; }

.weather-section { padding-top: 92px; padding-bottom: 92px; background: var(--porcelain); }
.weather-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 38%,rgba(255,255,255,.9),transparent 58%); pointer-events: none; }
.weather-card { position: relative; max-width: 720px; margin: auto; padding: clamp(40px,5vw,58px) clamp(22px,6vw,58px); border: 1px solid rgba(116,105,95,.22); border-radius: 24px; background: rgba(255,255,255,.58); box-shadow: 0 20px 58px rgba(60,50,42,.08); }
.weather-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 22px; border: 1px solid rgba(116,105,95,.25); border-radius: 50%; color: #8c837d; }
.weather-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.weather-card .kicker { margin-bottom: 14px; color: var(--antique-gold); }
.weather-card h3 { margin: 0; color: #3d3732; font: 500 clamp(30px,4vw,42px)/1.08 var(--serif); }
.weather-place { margin: 20px 0 7px; color: #746b64; font: 400 16px var(--serif); }
.weather-description { margin: 0; color: #5c554f; font: 400 20px var(--serif); }
.weather-temperature { display: block; margin: 14px 0 20px; color: #4c4642; font: 400 clamp(54px,8vw,76px)/1 var(--serif); }
.weather-range { padding: 17px 16px; border: 1px solid rgba(116,105,95,.18); border-radius: 14px; color: #746d67; font: 400 15px/1.5 var(--serif); }
.weather-card small { display: block; margin-top: 20px; color: #948c85; font: 400 13px var(--serif); }
.weather-card.pending .weather-temperature { display: none; }
.weather-card.pending .weather-range { margin-top: 24px; }

@media (max-width: 560px) {
  .weather-section { padding: 72px 18px; }
  .weather-card { padding: 36px 20px; border-radius: 18px; }
  .weather-icon { width: 58px; height: 58px; margin-bottom: 19px; }
  .weather-card h3 { font-size: 31px; }
}

.details { background: radial-gradient(circle at 50% 15%,var(--porcelain),var(--ivory) 60%,var(--parchment)); }
.details::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(30deg,transparent 49.8%,rgba(154,116,71,.22) 50%,transparent 50.2%),linear-gradient(-30deg,transparent 49.8%,rgba(154,116,71,.16) 50%,transparent 50.2%); background-size: 220px 220px; }
.details-card { position: relative; max-width: 650px; margin: auto; padding: clamp(54px,8vw,82px) 26px; background: rgba(255,253,248,.88); border: 1px solid rgba(154,116,71,.52); box-shadow: 0 30px 90px rgba(73,53,31,.13); }
.details-card::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(154,116,71,.15); pointer-events: none; }
.crest { position: relative; color: var(--ink); font: 500 49px/1 var(--serif); }
.crest span { position: absolute; top: 19px; }
.crest .crest-y { left: 24px; }
.crest .crest-k { right: 22px; color: var(--antique-gold); mix-blend-mode: multiply; }
.crest small { position: absolute; left: 0; right: 0; bottom: 12px; color: var(--antique-gold); font: 500 5px var(--sans); letter-spacing: .25em; }
.crest.custom-logo { background: var(--custom-logo) center/contain no-repeat; border-color: transparent; }
.crest.custom-logo > * { visibility: hidden; }
.ornament { width: 100px; height: 100px; margin: 0 auto 45px; border: 1px solid var(--champagne); border-radius: 50%; box-shadow: inset 0 0 0 5px #fffdf8,inset 0 0 0 6px rgba(154,116,71,.18); }
.details-card .kicker { color: var(--antique-gold); }
.details-card h3 { margin: 0 0 8px; font: 500 clamp(35px,7vw,52px)/1.03 var(--serif); letter-spacing: -.02em; }
.time, address { color: #5d5349; font: 400 12px/1.9 var(--sans); font-style: normal; letter-spacing: .03em; }
.divider { display: flex; align-items: center; gap: 15px; max-width: 210px; margin: 40px auto; color: var(--antique-gold); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: #cfbea3; }
.divider span { font-size: 9px; }
.button-row { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 27px; border: 1px solid var(--antique-gold); border-radius: 0; font: 500 8px var(--sans); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .3s,color .3s,border-color .3s,transform .3s; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--antique-gold); color: white; }
.button.primary:hover { background: #7e5b37; border-color: #7e5b37; }
.button.ghost { background: transparent; color: var(--ink); }
.button.ghost:hover { background: var(--ink); border-color: var(--ink); color: white; }

.memory-section { padding-top: 92px; padding-bottom: 92px; background: var(--porcelain); }
.memory-card { max-width: 820px; margin: auto; padding: clamp(38px,5vw,56px) clamp(22px,6vw,62px); border: 1px solid rgba(82,75,69,.14); border-radius: 22px; background: rgba(255,255,255,.82); box-shadow: 0 20px 55px rgba(52,45,39,.08); }
.memory-symbol { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 21px; border-radius: 50%; background: #f4f3f1; color: #8d8884; }
.memory-symbol svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.memory-card .kicker { margin-bottom: 10px; color: var(--antique-gold); }
.memory-card > h3 { max-width: 650px; margin: 0 auto; color: #4b4541; font: 500 clamp(34px,5vw,50px)/1.04 var(--serif); }
.memory-intro { margin: 15px 0 0; color: #89817b; font: 400 17px var(--serif); }
.memory-toggle { display: grid; grid-template-columns: minmax(35px,115px) auto minmax(35px,115px); align-items: center; justify-content: center; column-gap: 16px; width: min(100%,650px); margin: 30px auto 0; padding: 0; border: 0; background: transparent; color: #8b847f; cursor: pointer; }
.memory-toggle span { width: 100%; height: 1px; background: #d8d3ce; }
.memory-toggle em { font: 400 9px var(--sans); letter-spacing: .34em; text-transform: uppercase; }
.memory-toggle i { grid-column: 1 / -1; justify-self: center; display: grid; place-items: center; width: 48px; height: 48px; margin-top: 17px; border-radius: 50%; background: #f5f4f2; font: 400 23px var(--serif); transition: transform .3s; }
.memory-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.memory-panel { margin-top: 38px; }
.memory-tabs { display: grid; grid-template-columns: repeat(2,1fr); gap: 4px; padding: 6px; border-radius: 14px; background: #f3f1ef; }
.memory-tabs button { min-height: 52px; border: 0; border-radius: 10px; background: transparent; color: #8d8782; font: 400 15px var(--serif); cursor: pointer; }
.memory-tabs button.active { background: white; color: #4e4844; box-shadow: 0 4px 14px rgba(54,47,42,.1); }
.memory-form { margin-top: 25px; }
.memory-drop { display: flex; flex-direction: column; align-items: center; padding: 38px 20px; border: 1px dashed #cfc8c2; border-radius: 16px; transition: border-color .25s,background .25s; }
.memory-drop:hover { border-color: var(--champagne); background: #fdfaf5; }
.memory-drop-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 15px; border-radius: 50%; background: #f5f3f0; color: #8a837d; font-size: 28px; }
.memory-drop strong { color: #5f5751; font: 500 24px var(--serif); }
.memory-drop small { margin-top: 8px; color: #9b938d; font: 400 14px var(--serif); }
.memory-drop em { margin-top: 18px; color: #a1978f; font: italic 400 13px var(--serif); }
.memory-file-button,.memory-submit { display: grid; place-items: center; min-height: 48px; border: 1px solid #b9afa7; color: #625a54; font: 500 8px var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.memory-source-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; width: min(100%,440px); margin-top: 17px; }
.memory-file-button { min-width: 0; padding: 0 14px; cursor: pointer; }
.memory-file-button:hover { border-color: var(--champagne); background: #fdfaf5; }
.memory-name { display: block; margin-top: 20px; text-align: left; }
.memory-name > span { display: block; margin-bottom: 9px; color: #716963; font: 400 15px var(--serif); }
.memory-name small { color: #aaa19b; }
.memory-name input { width: 100%; height: 54px; padding: 0 16px; border: 1px solid #ddd7d1; outline: none; background: #faf9f7; color: var(--ink); font: 400 16px var(--serif); }
.memory-name input:focus { border-color: var(--champagne); }
.memory-submit { width: 100%; margin-top: 18px; background: var(--olive); border-color: var(--olive); color: white; cursor: pointer; }
.memory-submit:disabled { opacity: .55; cursor: wait; }
.memory-status { min-height: 20px; margin: 15px 0 0; font: 400 15px var(--serif); }
.memory-status.success { color: #55705b; }
.memory-status.error { color: #a0524e; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 560px) {
  .memory-section { padding: 72px 18px; }
  .memory-card { padding: 34px 19px; border-radius: 18px; }
  .memory-tabs button { font-size: 13px; }
  .memory-toggle { grid-template-columns: minmax(20px,1fr) minmax(150px,auto) minmax(20px,1fr); column-gap: 8px; }
  .memory-toggle em { max-width: 190px; line-height: 1.7; }
  .memory-drop strong { font-size: 21px; }
  .memory-source-actions { grid-template-columns: 1fr; }
}

.closing { padding-top: clamp(255px,20vw,285px); padding-bottom: 104px; background: var(--deep-olive); color: #f7efe2; }
.closing::before { content: ""; position: absolute; inset: 15px; border: 1px solid rgba(211,184,135,.2); }
.closing-crest { width: 84px; height: 84px; margin: 0 auto 30px; border: 1px solid rgba(220,195,151,.55); border-radius: 50%; color: #f7efe2; font-size: 42px; }
.closing-crest::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(220,195,151,.18); border-radius: 50%; }
.closing-crest span { top: 19px; }
.closing-crest .crest-y { left: 19px; }
.closing-crest .crest-k { right: 18px; color: #d6b77e; mix-blend-mode: normal; }
.closing .kicker { color: #cdb487; }
.closing h3 { margin-bottom: 37px; }
.closing-actions { display: flex; flex-direction: column; align-items: center; gap: 17px; }
.light-button { min-width: 190px; border-color: #ceb07a; color: #fff8ec; background: rgba(255,255,255,.02); }
.light-button:hover { background: #ceb07a; color: var(--deep-olive); }
.closing-actions span { color: #a99d88; font: 400 7px var(--sans); letter-spacing: .23em; text-transform: uppercase; }

footer { padding: 53px 20px 48px; background: var(--deep-olive); color: var(--ivory); text-align: center; border-top: 1px solid color-mix(in srgb,var(--champagne) 22%,transparent); }
.footer-monogram { display: flex; align-items: center; justify-content: center; gap: 12px; font: 500 25px var(--serif); }
.footer-monogram i { color: var(--champagne); font: 400 14px var(--serif); }
footer p { margin: 18px 0 9px; font-size: 7px; font-weight: 400; letter-spacing: .38em; }
footer small { color: var(--champagne); font: italic 400 15px var(--accent-font); }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .85s ease,transform .85s ease; }
.reveal.in-view { opacity: 1; transform: none; }

@media (max-width: 560px) {
  .envelope-stage { inset: -3% -45%; }
  .envelope-flap { height: 57%; }
  .invitation-card { left: 27%; right: 27%; }
  .seal { width: 180px; height: 180px; }
  .seal-initial { font-size: 75px; }
  .open-hint { font-size: 10px; line-height: 1.5; }
  .hero-photo { background-position: 57% center; }
  .hero-names { font-size: clamp(43px,12vw,58px); }
  .hero-names .name-join { gap: 5px; margin-left: .13em; margin-right: .13em; }
  .hero-content { padding-bottom: 58px; }
  .section { padding-top: 90px; padding-bottom: 90px; }
  .invitation-text { font-size: 18px; }
  .button-row { flex-direction: column; align-items: stretch; max-width: 286px; margin-left: auto; margin-right: auto; }
  .countdown { gap: 7px; }
  .countdown i { display: none; }
  .countdown div { flex: 1; min-width: 0; }
  .closing { padding-top: 205px; padding-bottom: 92px; }
  .intro { padding-top: 205px; }
  .intro-garland { top: 25px; width: 390px; opacity: .52; }
  .countdown-sprig { right: -82px; width: 165px; opacity: .2; }
  .weather-corner { right: -92px; bottom: -55px; width: 230px; opacity: .38; }
  .detail-spray { left: -130px; width: 245px; opacity: .42; }
  .memory-sprig { left: -64px; top: -20px; width: 150px; opacity: .34; }
  .closing-garland { top: 22px; width: 360px; opacity: .12; }
}

/* RSVP form */
.closing { padding-left: max(24px,calc((100vw - 1180px)/2)); padding-right: max(24px,calc((100vw - 1180px)/2)); }
.rsvp-form { position: relative; z-index: 2; width: 100%; max-width: 1120px; margin: 46px auto 0; padding: clamp(28px,4vw,52px); border: 1px solid rgba(214,183,126,.34); background: rgba(15,20,16,.22); box-shadow: 0 28px 70px rgba(0,0,0,.14); text-align: left; }
.rsvp-form::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(214,183,126,.1); pointer-events: none; }
.rsvp-grid { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px 22px; }
.rsvp-form label { display: flex; flex-direction: column; gap: 10px; }
.rsvp-form label > span { color: #d4bc91; font-size: 8px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.rsvp-form input,.rsvp-form select { width: 100%; height: 58px; padding: 0 17px; border: 1px solid rgba(218,193,149,.45); border-radius: 0; outline: none; background: rgba(255,252,245,.055); color: #fff8ed; font: 400 15px var(--serif); transition: border-color .25s,background .25s,box-shadow .25s; }
.rsvp-form input::placeholder { color: rgba(241,231,213,.48); }
.rsvp-form select { appearance: none; background-image: linear-gradient(45deg,transparent 50%,#cdb587 50%),linear-gradient(135deg,#cdb587 50%,transparent 50%); background-position: calc(100% - 20px) 25px,calc(100% - 15px) 25px; background-size: 5px 5px,5px 5px; background-repeat: no-repeat; }
.rsvp-form option { color: #2f342d; background: #f7f1e6; }
.rsvp-form input:focus,.rsvp-form select:focus { border-color: #d7b77d; background-color: rgba(255,252,245,.1); box-shadow: 0 0 0 3px rgba(205,181,135,.08); }
.rsvp-form select:disabled { opacity: .35; cursor: not-allowed; }
.rsvp-submit { position: relative; display: block; width: 100%; min-height: 58px; margin-top: 28px; border: 1px solid #c9a76c; background: #b18b52; color: #fffaf0; font: 500 9px var(--sans); letter-spacing: .24em; text-transform: uppercase; cursor: pointer; transition: background .25s,transform .25s,opacity .25s; }
.rsvp-submit:hover { background: #c29c61; transform: translateY(-2px); }
.rsvp-submit:disabled { opacity: .55; cursor: wait; transform: none; }
.rsvp-status { min-height: 18px; margin: 17px 0 -8px; text-align: center; font: 400 15px var(--serif); }
.rsvp-status.success { color: #d9c69f; }
.rsvp-status.error { color: #e5a59e; }

@media (max-width: 720px) {
  .rsvp-form { margin-top: 36px; padding: 30px 22px; }
  .rsvp-grid { grid-template-columns: 1fr; gap: 20px; }
  .rsvp-form input,.rsvp-form select { height: 55px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* Photographic entrance — isolated overrides keep every viewport stable. */
.opening { background: #e9e4da; isolation: isolate; }
.opening::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(circle at center,transparent 28%,rgba(38,25,19,.18) 100%); transition: opacity .6s ease; }
.opening::after { z-index: 2; background: rgba(28,18,14,.19); transition: opacity .55s ease; }
.opening .envelope-stage { inset: 0; z-index: 1; overflow: hidden; transform: scale(1.002); filter: none; background: #ede7dc; transition: transform 1.65s cubic-bezier(.2,.72,.15,1),filter .75s .55s,opacity .6s 1s; }
.envelope-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.opening .seal-wrap { position: absolute; inset: 0; z-index: 5; display: block; }
.opening .seal { position: absolute; left: 50%; top: 52%; width: clamp(190px,32vmin,350px); height: clamp(190px,32vmin,350px); transform: translate(-50%,-50%); filter: none; }
.opening .seal::before,.opening .seal::after { content: ""; position: absolute; left: 50%; top: 50%; width: 32%; height: 2px; border-radius: 50%; opacity: 0; background: #3d0508; box-shadow: 0 2px 2px rgba(255,170,150,.22); transition: opacity .12s,transform .5s cubic-bezier(.25,.8,.25,1); }
.opening .seal::before { transform: translate(-50%,-50%) rotate(24deg) scaleX(.1); }
.opening .seal::after { transform: translate(-50%,-50%) rotate(-31deg) scaleX(.1); }
.opening .seal:hover { transform: translate(-50%,-50%) scale(1.025); }
.seal-pulse { position: absolute; inset: 13%; border: 1px solid rgba(255,225,215,.52); border-radius: 50%; opacity: 0; animation: sealPulse 2.2s ease-out infinite; }
@keyframes sealPulse { 0% { opacity: 0; transform: scale(.88); } 28% { opacity: .48; } 75%,100% { opacity: 0; transform: scale(1.13); } }
.opening .open-hint { top: calc(52% + clamp(112px,19vmin,205px)); color: #fff8f2; text-shadow: 0 2px 12px rgba(38,0,0,.95); font: 500 clamp(10px,1.05vw,15px)/1.5 var(--serif); letter-spacing: .12em; white-space: nowrap; }
.opening.opened { opacity: 0; transition: opacity .55s 1.2s; }
.opening.opened::before,.opening.opened::after { opacity: 0; }
.opening.opened .seal { opacity: 1; transform: translate(-50%,-50%) scale(1.08); }
.opening.opened .seal::before { opacity: .9; transform: translate(-50%,-50%) rotate(24deg) scaleX(1); }
.opening.opened .seal::after { opacity: .85; transform: translate(-50%,-50%) rotate(-31deg) scaleX(1); }
.opening.opened .seal-pulse { animation: none; opacity: 0; }
.opening.opened .envelope-stage { opacity: 0; transform: scale(1.16); filter: brightness(1.32) blur(5px); }
.opening.opened .open-hint { opacity: 0; transform: translate(-50%,-38%); }

@media (orientation: landscape) {
  .opening .seal { top: 52%; width: clamp(175px,34vmin,330px); height: clamp(175px,34vmin,330px); }
  .opening .open-hint { top: calc(52% + clamp(102px,20vmin,190px)); }
}

@media (max-width: 560px) {
  .opening .envelope-stage { inset: 0; }
  .opening .seal { top: 52%; width: min(48vw,235px); height: min(48vw,235px); }
  .opening .open-hint { top: calc(52% + min(29vw,142px)); width: 92vw; white-space: normal; }
}

/* Admin-selectable opening stories */
.opening-flap-piece,.opening-flap-underlay,.opening-split,.opening-card-reveal { position: absolute; pointer-events: none; }
.opening-flap-underlay { inset: 0; z-index: 3; overflow: hidden; opacity: 0; visibility: hidden; clip-path: polygon(0 0,100% 0,50% 58%); background: linear-gradient(165deg,var(--parchment) 0,var(--ivory) 46%,var(--porcelain) 100%); box-shadow: inset 0 -20px 45px rgba(71,50,30,.12); transition: opacity .18s .2s; }
.opening-flap-underlay::before { content: ""; position: absolute; left: 8%; right: 8%; top: 12%; height: 52%; background: linear-gradient(145deg,#fffdf8,var(--ivory)); border: 1px solid color-mix(in srgb,var(--antique-gold) 34%,transparent); box-shadow: 0 12px 34px rgba(60,42,24,.14); }
.opening-flap-underlay::after { content: ""; position: absolute; left: 50%; top: 23%; width: 56px; height: 1px; transform: translateX(-50%); background: var(--champagne); box-shadow: 0 9px 0 color-mix(in srgb,var(--champagne) 50%,transparent); }
.opening-flap-underlay span { position: absolute; z-index: 1; left: 50%; top: 28%; width: 9px; height: 9px; transform: translate(-50%,-50%) rotate(45deg); border: 1px solid var(--antique-gold); }
.opening-flap-piece { inset: 0; z-index: 4; overflow: hidden; clip-path: polygon(0 0,100% 0,78% 57%,68% 70%,32% 70%,22% 57%); transform-origin: 50% 0; transform-style: preserve-3d; backface-visibility: hidden; visibility: hidden; }
.opening-flap-piece img,.opening-split img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.opening-card-reveal { z-index: 3; left: 50%; top: 47%; width: min(650px,72vw); height: min(390px,46vh); display: flex; align-items: center; justify-content: center; gap: .22em; opacity: 0; transform: translate(-50%,12%) scale(.9); border: 1px solid color-mix(in srgb,var(--champagne) 62%,transparent); background: linear-gradient(145deg,var(--porcelain),var(--ivory)); color: var(--ink); box-shadow: 0 30px 90px rgba(41,27,18,.25); font: italic 500 clamp(38px,7vw,80px)/1 var(--serif); transition: opacity .45s .42s,transform .8s .35s cubic-bezier(.2,.8,.2,1); }
.opening-card-reveal::before { content: ""; position: absolute; inset: 10px; border: 1px solid color-mix(in srgb,var(--antique-gold) 25%,transparent); }
.opening-card-reveal i { color: var(--antique-gold); font-size: .38em; }
.opening-card-reveal small { position: absolute; bottom: 18%; color: var(--antique-gold); font: 500 8px var(--sans); letter-spacing: .32em; text-transform: uppercase; }
.opening-split { z-index: 4; top: 0; bottom: 0; width: 50%; overflow: hidden; visibility: hidden; transition: transform 1s .18s cubic-bezier(.65,0,.2,1); }
.opening-split-left { left: 0; }
.opening-split-right { right: 0; }
.opening-split img { position: absolute; top: 0; width: 200%; max-width: none; }
.opening-split-left img { left: 0; }
.opening-split-right img { right: 0; }

.opening[data-animation="flap"] { perspective: 1800px; }
.opening[data-animation="flap"] .envelope-stage { z-index: 2; transform: none; transition: opacity .48s .88s; }
.opening[data-animation="flap"] .opening-flap-piece {
  visibility: visible;
  transform: translate3d(0,0,1px) rotateX(0);
  filter: drop-shadow(0 0 0 rgba(46,30,21,0));
  transition: transform .72s .08s cubic-bezier(.2,.75,.24,1),filter .45s .08s,opacity .42s .88s;
}
.opening[data-animation="flap"] .seal-wrap { transition: transform .72s .08s cubic-bezier(.2,.75,.24,1),opacity .25s .48s; }
.opening[data-animation="flap"].opened .opening-flap-piece {
  opacity: 1;
  transform: translate3d(0,-2.2vh,24px) rotateX(-7deg);
  filter: drop-shadow(0 18px 14px rgba(46,30,21,.22));
}
.opening[data-animation="flap"].opened .seal-wrap { transform: translateY(-2.2vh); }
.opening[data-animation="flap"].opened .seal { opacity: 1; transform: translate(-50%,-50%); }
.opening[data-animation="flap"].opened .seal::before,.opening[data-animation="flap"].opened .seal::after { opacity: 0; }
.opening[data-animation="flap"].opened .open-hint { opacity: 0; transform: translate(-50%,-50%); }
.opening[data-animation="flap"].opened .envelope-stage,
.opening[data-animation="flap"].opened .opening-flap-piece { opacity: 0; }
.opening[data-animation="flap"].opened::before,.opening[data-animation="flap"].opened::after { opacity: 0; transition: opacity .4s .88s; }
.opening[data-animation="flap"].opened { transition: opacity .5s 1.08s; }

.opening[data-animation="zoom"].opened .envelope-stage { opacity: 0; transform: scale(1.2); filter: brightness(1.35) blur(5px); }
.opening[data-animation="zoom"].opened { transition-delay: 1.15s; }

.opening[data-animation="split"] .opening-split { visibility: visible; }
.opening[data-animation="split"].opened .opening-split-left { transform: translateX(-105%); }
.opening[data-animation="split"].opened .opening-split-right { transform: translateX(105%); }
.opening[data-animation="split"].opened .envelope-stage { opacity: 0; transform: scale(1.03); filter: brightness(1.16); transition: opacity .25s .25s; }
.opening[data-animation="split"].opened { transition-delay: 1.15s; }

.opening[data-animation="dissolve"].opened .envelope-stage { opacity: 0; transform: scale(1.06); filter: brightness(1.65) blur(14px); transition: opacity 1.05s .2s,transform 1.4s,filter 1.05s .15s; }
.opening[data-animation="dissolve"].opened::before { opacity: 0; transition-duration: 1.1s; }
.opening[data-animation="dissolve"].opened { transition-delay: 1.05s; }

@media (max-width:560px) {
  .opening-card-reveal { width: 82vw; height: 38vh; gap: .15em; font-size: clamp(31px,10vw,48px); }
  .opening-card-reveal small { bottom: 16%; font-size: 6px; }
}