@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

:root {
  --oud: #701f3d;
  --oud-deep: #431326;
  --oud-soft: #94536a;
  --sand: #f8eee4;
  --cream: #fffaf4;
  --paper: #fbf2e6;
  --gold: #b58a52;
  --gold-light: #dfc38e;
  --ink: #442b32;
  --muted: #987985;
  --line: rgba(181, 138, 82, .28);
  --serif: 'Amiri', Georgia, serif;
  --sans: 'IBM Plex Sans Arabic', Tahoma, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--sand); color: var(--ink); font-family: var(--sans); overflow-x: hidden; }
button, a { font: inherit; }
button { cursor: pointer; }
.page-noise { position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .08; mix-blend-mode: multiply; 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='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); }

.envelope-screen { min-height: 100svh; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 46px 20px 32px; background: radial-gradient(circle at 50% 8%, rgba(255,255,255,.14), transparent 32%), linear-gradient(140deg, #4a132a 0%, var(--oud) 47%, #5b1733 100%); color: var(--paper); }
.envelope-screen::before, .envelope-screen::after { content: ''; position: absolute; width: 440px; height: 440px; border: 1px solid rgba(223,195,142,.18); transform: rotate(45deg); pointer-events: none; }
.envelope-screen::before { top: -260px; right: -220px; }
.envelope-screen::after { bottom: -300px; left: -200px; }
.top-ornament { display: flex; align-items: center; gap: 13px; color: var(--gold-light); margin-bottom: 26px; opacity: .92; }
.top-ornament span { width: 74px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-light)); }
.top-ornament span:last-child { transform: rotate(180deg); }
.top-ornament b { font-family: var(--serif); border: 1px solid rgba(223,195,142,.8); border-radius: 50%; width: 30px; height: 30px; line-height: 29px; text-align: center; font-size: 20px; font-weight: 400; }
.floral-sprig { position: absolute; color: var(--gold-light); opacity: .58; font-family: var(--serif); font-size: 23px; display: flex; align-items: center; gap: 4px; transform: rotate(-18deg); }
.floral-sprig i { display: block; width: 48px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-light)); }
.floral-sprig span { font-size: 16px; }.floral-sprig b { font-weight: 400; }.sprig-left { top: 18%; left: 7%; }.sprig-right { bottom: 17%; right: 7%; transform: rotate(164deg); }
.modern-intro { width: min(700px, 96vw); min-height: 188px; position: relative; display: flex; align-items: center; justify-content: center; margin: -2px auto 16px; }
.intro-center { text-align: center; position: relative; z-index: 2; }.intro-center .eyebrow { margin-bottom: 5px; }.intro-center h1 { font-family: var(--serif); font-size: clamp(40px, 6vw, 60px); line-height: 1; font-weight: 400; margin: 0; color: var(--paper); }.intro-center > p:not(.eyebrow) { margin: 7px 0 10px; color: rgba(255,250,244,.72); font-size: 12px; }.intro-year { color: var(--gold-light); letter-spacing: .18em; font-size: 9px; }.intro-year b { font-weight: 400; margin: 0 8px; }
.botanical { position: absolute; width: 145px; height: 125px; color: var(--gold-light); opacity: .85; }.botanical-left { right: 2px; top: 22px; transform: rotate(-15deg); }.botanical-right { left: 2px; top: 18px; transform: rotate(15deg); }.flower { position: absolute; font-family: var(--serif); text-shadow: 0 0 10px rgba(223,195,142,.35); animation: flowerPulse 4s ease-in-out infinite; }.flower-one { right: 25px; top: 6px; font-size: 28px; }.flower-two { right: 77px; top: 48px; font-size: 17px; animation-delay: -.8s; }.flower-three { left: 26px; top: 8px; font-size: 29px; animation-delay: -1.2s; }.flower-four { left: 77px; top: 52px; font-size: 17px; animation-delay: -2s; }.leaf { position: absolute; font-size: 54px; opacity: .65; top: 37px; right: 43px; transform: rotate(48deg); }.botanical-right .leaf { right: auto; left: 43px; transform: rotate(-48deg); }.butterfly { position: absolute; z-index: 3; font-size: 20px; color: #e7c7a0; filter: drop-shadow(0 3px 4px rgba(30,5,16,.25)); animation: butterflyFly 6s ease-in-out infinite; }.butterfly-one { right: 18%; top: 8px; }.butterfly-two { left: 20%; bottom: 3px; font-size: 14px; animation-delay: -3.4s; }
@keyframes flowerPulse { 0%,100% { transform: scale(.9) rotate(-4deg); opacity: .62; } 50% { transform: scale(1.12) rotate(5deg); opacity: 1; } } @keyframes butterflyFly { 0%,100% { transform: translate(0, 3px) rotate(-8deg); } 50% { transform: translate(12px, -16px) rotate(10deg); } }
.eyebrow, .section-kicker { color: var(--gold-light); letter-spacing: .18em; font-size: 11px; text-transform: uppercase; }
.eyebrow { margin: 0 0 9px; }
.screen-title { margin: 0; font-family: var(--serif); font-size: clamp(32px, 7vw, 58px); font-weight: 400; line-height: 1.15; text-align: center; }
.screen-subtitle { margin: 6px 0 24px; font-size: 14px; color: rgba(255,250,244,.75); }
.envelope-stage { width: min(390px, 84vw); aspect-ratio: 1.52 / 1; position: relative; margin: 6px auto 22px; perspective: 1200px; filter: drop-shadow(0 26px 24px rgba(36,20,15,.28)); }
.envelope-instruction { margin: 5px 0 2px; color: var(--gold-light); font-family: var(--serif); font-size: 19px; letter-spacing: .05em; animation: instructionPulse 2.4s ease-in-out infinite; text-shadow: 0 0 12px rgba(223,195,142,.25); }
@keyframes instructionPulse { 0%,100% { opacity: .65; transform: scale(.98); } 50% { opacity: 1; transform: scale(1.05); } }
.envelope-shadow { position: absolute; z-index: 0; inset: 16% 3% 0; border-radius: 6px; background: rgba(31,15,10,.35); filter: blur(12px); transform: translateY(25px); }
.envelope-back, .envelope-pocket, .envelope-flap { position: absolute; inset: 0; border-radius: 6px; }
.envelope-back { z-index: 1; background: radial-gradient(circle at 15% 18%, rgba(181,138,82,.22) 0 2px, transparent 3px), radial-gradient(circle at 85% 80%, rgba(181,138,82,.18) 0 2px, transparent 3px), linear-gradient(135deg, #f7ead9, #dec6a9); background-size: 34px 34px, 43px 43px, auto; border: 1px solid rgba(255,255,255,.34); }
.envelope-flap { z-index: 4; height: 66%; transform-origin: top center; clip-path: polygon(0 0, 100% 0, 50% 100%); background: linear-gradient(148deg, #f9ecda, #d2b496); border-top: 1px solid rgba(255,255,255,.7); filter: drop-shadow(0 5px 4px rgba(83,40,36,.1)); transition: transform 1.1s cubic-bezier(.18,.8,.28,1), z-index 0s .3s; backface-visibility: hidden; }
.envelope-flap::after { content: ''; position: absolute; inset: 12px 12px auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(181,138,82,.5), transparent); }
.envelope-pocket { z-index: 3; overflow: hidden; clip-path: polygon(0 23%, 50% 68%, 100% 23%, 100% 100%, 0 100%); background: linear-gradient(145deg, #ead7bd, #c9a989); border-top: 1px solid rgba(255,255,255,.44); }
.envelope-pocket::before { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(181,138,82,.3); clip-path: polygon(0 12%, 50% 54%, 100% 12%, 100% 100%, 0 100%); pointer-events: none; }
.pocket-pattern { position: absolute; inset: 0; opacity: .23; background-image: linear-gradient(45deg, transparent 46%, var(--gold) 47%, var(--gold) 49%, transparent 50%), linear-gradient(-45deg, transparent 46%, var(--gold) 47%, var(--gold) 49%, transparent 50%); background-size: 34px 34px; }
.envelope-flower { position: absolute; z-index: 2; color: rgba(112,31,61,.72); font-family: var(--serif); font-size: 31px; text-shadow: 0 1px 0 rgba(255,255,255,.45), 0 2px 4px rgba(70,27,35,.18); animation: envelopeBloom 4.5s ease-in-out infinite; }.envelope-flower-left { left: 20px; bottom: 19px; transform: rotate(-18deg); }.envelope-flower-right { right: 20px; bottom: 19px; transform: rotate(18deg); animation-delay: -2s; }.envelope-vine { position: absolute; z-index: 2; color: rgba(112,31,61,.5); font-size: 55px; line-height: 1; }.envelope-vine-left { left: 40px; bottom: 28px; transform: rotate(-32deg); }.envelope-vine-right { right: 40px; bottom: 28px; transform: rotate(32deg) scaleX(-1); }
@keyframes envelopeBloom { 0%,100% { scale: .92; opacity: .66; } 50% { scale: 1.08; opacity: .95; } }
.monogram { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: var(--oud); font-family: var(--serif); font-size: 22px; letter-spacing: .08em; opacity: .9; white-space: nowrap; }
.monogram span { font-family: var(--sans); color: var(--gold); font-size: 14px; }
.letter-card { position: absolute; z-index: 2; left: 9%; right: 9%; top: 10%; height: 78%; padding: 13px; background: var(--cream); transform: translateY(8%); transition: transform 1.05s cubic-bezier(.18,.8,.28,1), z-index 0s 0s; box-shadow: 0 5px 16px rgba(79,43,26,.15); }
.letter-inner { height: 100%; border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; color: var(--oud); }
.mini-label, .mini-date { font-size: 9px; letter-spacing: .18em; color: var(--gold); }
.letter-inner strong { font-family: var(--serif); font-size: 29px; line-height: .95; font-weight: 400; text-align: center; }
.letter-inner strong i { font-family: var(--sans); color: var(--gold); font-size: 11px; font-style: normal; }
.seal-button { position: absolute; z-index: 4; left: 50%; top: 58%; transform: translate(-50%, -50%); width: 98px; height: 98px; border: 0; background: transparent; color: var(--paper); transition: transform .3s ease; }
.seal-button:hover { transform: translate(-50%, -50%) scale(1.06); }
.seal-ring { position: absolute; inset: 0; border-radius: 46% 54% 51% 49% / 52% 47% 53% 48%; background: radial-gradient(circle at 32% 24%, #a9365b, #781d3d 48%, #4a1027 100%); box-shadow: inset 0 0 0 4px rgba(255,181,196,.13), inset -7px -9px 10px rgba(34,5,16,.3), 0 5px 12px rgba(68,15,33,.36); transform: rotate(-5deg); }
.seal-ring::before { content: ''; position: absolute; inset: 8px; border: 1px dashed rgba(255,205,211,.45); border-radius: 50%; }
.seal-ring::after { content: ''; position: absolute; top: 14px; left: 20px; width: 24px; height: 11px; border-radius: 50%; background: rgba(255,210,219,.18); transform: rotate(-30deg); filter: blur(2px); }
.seal-logo { position: relative; z-index: 1; display: block; width: 55px; height: 62px; object-fit: contain; margin: -1px auto 0; filter: brightness(0) invert(1) contrast(1.1); }
.seal-copy { position: relative; z-index: 1; display: block; font-size: 9px; margin-top: 2px; color: #fff0d1; }
.seal-button::after { content: ''; position: absolute; z-index: -1; inset: 5px; border: 1px solid rgba(255,194,208,.18); border-radius: 50%; transform: rotate(12deg); }

.envelope-stage.is-open .letter-card { z-index: 5; transform: translateY(-48%); }
.envelope-stage.is-open .envelope-flap { z-index: 1; transform: rotateX(180deg); }
.envelope-stage.is-open .seal-button { transform: translate(-50%, -50%) scale(.88) rotate(-12deg); opacity: 0; pointer-events: none; }
.hint { display: flex; gap: 11px; align-items: center; color: rgba(255,250,244,.55); font-size: 11px; margin: 0; }
.hint-line { width: 35px; height: 1px; background: rgba(223,195,142,.4); }

.invitation { background: var(--sand); min-height: 100vh; padding: 90px 0 30px; position: relative; }
.section-wrap { width: min(1040px, calc(100% - 40px)); margin-inline: auto; }
.hero { display: grid; grid-template-columns: .94fr 1.06fr; align-items: center; gap: clamp(40px, 8vw, 110px); min-height: 720px; padding-block: 40px 90px; position: relative; }
.hero::before, .hero::after { position: absolute; color: rgba(112,31,61,.16); font-family: var(--serif); font-size: 78px; pointer-events: none; }.hero::before { content: '❀'; top: 82px; left: -10px; transform: rotate(-24deg); }.hero::after { content: '✿'; right: -5px; bottom: 98px; transform: rotate(18deg); }
.hero-copy { padding-inline-start: 7%; }
.hero-copy .eyebrow { color: var(--gold); display: block; margin-bottom: 18px; }
.hero h2 { color: var(--oud); font-family: var(--serif); font-size: clamp(64px, 8vw, 120px); font-weight: 400; line-height: .85; margin: 0; letter-spacing: -.08em; white-space: nowrap; }
.hero h2 em { font-family: var(--sans); font-size: .28em; letter-spacing: 0; font-style: normal; color: var(--gold); vertical-align: middle; margin: 0 12px; }
.hero-date { margin: 26px 0 16px; color: var(--oud-soft); font-size: 14px; letter-spacing: .08em; }
.hero-rule { display: flex; gap: 9px; align-items: center; width: 218px; color: var(--gold); }
.hero-rule span { height: 1px; flex: 1; background: var(--line); }
.hero-rule i { font-style: normal; font-size: 12px; }
.hero-note { font-family: var(--serif); font-size: 20px; line-height: 1.7; max-width: 270px; color: var(--ink); margin: 22px 0 0; }
.hero-art { min-height: 540px; position: relative; display: flex; justify-content: center; align-items: center; }
.art-frame { position: absolute; width: 78%; height: 86%; border: 1px solid var(--gold); transform: rotate(5deg); opacity: .55; }
.art-frame::before, .art-frame::after { content: ''; position: absolute; width: 15px; height: 15px; border: 1px solid var(--gold); background: var(--sand); }
.art-frame::before { top: -8px; right: -8px; } .art-frame::after { bottom: -8px; left: -8px; }
.hero-art img { width: 79%; height: 520px; object-fit: cover; object-position: center; position: relative; z-index: 1; filter: saturate(.78) sepia(.12); box-shadow: 0 25px 55px rgba(74,42,29,.17); }
.hero-art.image-fallback::before { content: 'إبراهيم  &  فاطمة'; position: absolute; z-index: 1; width: 79%; height: 520px; display: grid; place-items: center; color: var(--gold-light); font-family: var(--serif); font-size: 30px; background: radial-gradient(circle at 50% 35%, rgba(223,195,142,.28), transparent 24%), linear-gradient(145deg, #8e6c5b, #4d332c); }
.art-caption { position: absolute; z-index: 2; bottom: 30px; right: 8%; left: 8%; display: flex; justify-content: space-between; color: var(--cream); font-size: 10px; letter-spacing: .12em; text-shadow: 0 1px 8px var(--oud-deep); }
.floating-audio { position: fixed; z-index: 10; left: 24px; bottom: 22px; display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; background: rgba(255,250,244,.88); padding: 7px 13px 7px 7px; border: 1px solid rgba(181,138,82,.3); border-radius: 50px; box-shadow: 0 10px 25px rgba(62,44,39,.12); backdrop-filter: blur(12px); }
.music-disc { width: 50px; height: 50px; border: 0; border-radius: 50%; background: conic-gradient(from 45deg, #d4af6c, #866039, #e0c28b, #795437, #d4af6c); position: relative; color: var(--cream); box-shadow: inset 0 0 0 3px rgba(255,244,212,.25), 0 3px 9px rgba(82,50,28,.2); }
.music-disc::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(255,244,212,.5); border-radius: 50%; background: radial-gradient(circle, var(--oud) 0 4px, transparent 5px), repeating-radial-gradient(circle, rgba(255,255,255,.18) 0 1px, transparent 2px 5px); }
.disc-center { position: relative; z-index: 1; font-size: 17px; }
.music-disc.playing { animation: spin 5s linear infinite; }
.audio-label { text-align: right; display: flex; flex-direction: column; line-height: 1.2; }
.audio-label b { font-size: 11px; font-weight: 600; color: var(--oud); } .audio-label small { font-size: 9px; color: var(--muted); margin-top: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

.countdown { background: var(--oud); color: var(--paper); text-align: center; padding: 68px 24px 62px; position: relative; overflow: hidden; }
.countdown::before { content: ''; position: absolute; inset: 16px; border: 1px solid rgba(223,195,142,.25); pointer-events: none; }
.countdown .section-kicker { color: var(--gold-light); position: relative; }
.countdown h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 4vw, 42px); margin: 12px 0 34px; position: relative; }
.countdown-grid { display: flex; direction: ltr; justify-content: center; align-items: center; gap: clamp(12px, 4vw, 40px); position: relative; }
.count-cell { display: flex; flex-direction: column; align-items: center; min-width: 68px; direction: rtl; }
.count-cell strong { font-family: var(--serif); color: var(--gold-light); font-size: clamp(38px, 6vw, 67px); font-weight: 400; line-height: 1; }
.count-cell span { color: rgba(255,250,244,.62); font-size: 10px; margin-top: 8px; }
.count-divider { color: rgba(223,195,142,.5); font-family: var(--serif); font-size: 36px; margin-top: -20px; }
.count-note { font-size: 11px; color: rgba(255,250,244,.65); margin: 30px 0 0; position: relative; }

.message { text-align: center; padding: 110px 30px 120px; max-width: 880px; position: relative; }
.message-mark { color: var(--gold-light); font-family: Georgia, serif; font-size: 84px; height: 48px; line-height: 1; opacity: .85; }
.message .section-kicker { color: var(--gold); }
.message h3 { color: var(--oud); font-family: var(--serif); font-size: clamp(30px, 5vw, 55px); line-height: 1.5; font-weight: 400; margin: 17px 0 20px; }
.message p { color: var(--muted); max-width: 520px; margin: auto; line-height: 2.1; font-size: 15px; }
.message-names { color: var(--oud); font-family: var(--serif); font-size: 34px; margin: 25px 0 0; }
.message-names span { color: var(--gold); font-family: var(--sans); font-size: 15px; padding: 0 10px; }
.message-ornament { margin: 31px auto 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--gold); }
.message-ornament i { width: 56px; height: 1px; background: var(--line); }
.message-ornament b { font-size: 11px; font-weight: 400; }

.details { padding: 0 0 112px; }
.details-heading { text-align: center; margin-bottom: 40px; }
.details-heading .section-kicker { color: var(--gold); }
.details-heading .section-kicker span, .location .section-kicker span { display: inline-block; width: 28px; height: 1px; background: var(--line); vertical-align: middle; margin: 0 10px; }
.details h3, .location h3 { font-family: var(--serif); font-weight: 400; color: var(--oud); font-size: 42px; margin: 12px 0 0; }
.details-layout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.detail-card { padding: 28px 24px; display: flex; align-items: center; gap: 20px; border: 1px solid var(--line); background: rgba(255,250,244,.45); min-height: 145px; }
.card-icon { flex: 0 0 53px; height: 53px; border-radius: 50%; border: 1px solid var(--gold-light); color: var(--gold); display: grid; place-items: center; font-family: var(--serif); font-size: 20px; }
.detail-card div:last-child { display: flex; flex-direction: column; gap: 4px; }
.card-label { color: var(--gold); font-size: 10px; letter-spacing: .05em; }
.detail-card strong { color: var(--oud); font-family: var(--serif); font-size: 21px; font-weight: 400; }
.detail-card small { color: var(--muted); font-size: 10px; }

.etiquette { padding: 0 0 112px; text-align: center; }
.etiquette .section-kicker { color: var(--gold); }.etiquette .section-kicker span { display: inline-block; width: 28px; height: 1px; background: var(--line); vertical-align: middle; margin: 0 10px; }
.etiquette h3 { color: var(--oud); font-family: var(--serif); font-size: 35px; font-weight: 400; margin: 12px 0 30px; }
.etiquette-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; max-width: 850px; margin: auto; }
.etiquette-card { display: flex; align-items: center; gap: 18px; text-align: right; background: rgba(255,250,244,.5); border: 1px solid var(--line); padding: 22px 26px; min-height: 116px; }
.etiquette-icon { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border: 1px solid var(--gold-light); border-radius: 50%; color: var(--gold); font-size: 22px; }
.etiquette-card div { display: flex; flex-direction: column; gap: 5px; }.etiquette-card strong { font-family: var(--serif); color: var(--oud); font-size: 20px; font-weight: 400; }.etiquette-card small { color: var(--muted); font-size: 10px; line-height: 1.7; }

.location { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(35px, 7vw, 90px); align-items: center; padding-bottom: 116px; }
.map-card { min-height: 320px; position: relative; overflow: hidden; background: #e9ddcd; border: 1px solid var(--gold-light); }
.map-card::after { content: ''; position: absolute; inset: 15px; border: 1px solid rgba(181,138,82,.35); }
.map-lines { position: absolute; inset: 0; opacity: .55; background: linear-gradient(115deg, transparent 0 20%, rgba(255,250,244,.75) 20.5% 21%, transparent 21.5% 44%, rgba(255,250,244,.7) 44.5% 45.2%, transparent 45.7%), linear-gradient(25deg, transparent 0 30%, rgba(181,138,82,.25) 30.4% 31%, transparent 31.4% 56%, rgba(181,138,82,.22) 56.4% 57%, transparent 57.4%), radial-gradient(ellipse at 35% 65%, rgba(128,165,138,.15), transparent 24%), radial-gradient(ellipse at 75% 25%, rgba(128,165,138,.12), transparent 30%); }
.map-lines i { position: absolute; display: block; height: 1px; background: rgba(116,88,70,.2); transform: rotate(12deg); } .map-lines i:nth-child(1){width: 70%; top: 26%; right: -4%;}.map-lines i:nth-child(2){width: 52%; top: 64%; right: 4%; transform: rotate(-21deg)}.map-lines i:nth-child(3){width: 45%; top: 44%; left: -2%; transform: rotate(38deg)}.map-lines i:nth-child(4){width: 72%; top: 83%; left: 14%; transform: rotate(-4deg)}.map-lines i:nth-child(5){width: 35%; top: 10%; left: 27%; transform: rotate(80deg)}
.map-pin { position: absolute; z-index: 2; top: 44%; left: 49%; width: 52px; height: 52px; border-radius: 52px 52px 52px 0; background: var(--oud); transform: rotate(-45deg); box-shadow: 0 8px 16px rgba(75,41,29,.25); }
.map-pin span { display: block; width: 15px; height: 15px; border-radius: 50%; background: var(--gold-light); position: absolute; top: 18px; left: 18px; }
.map-label { position: absolute; z-index: 3; bottom: 30px; right: 30px; background: rgba(255,250,244,.91); padding: 13px 18px; display: flex; flex-direction: column; gap: 3px; box-shadow: 0 9px 19px rgba(75,41,29,.12); }
.map-label span { color: var(--gold); font-size: 9px; }.map-label strong { color: var(--oud); font-family: var(--serif); font-size: 21px; font-weight: 400; }
.location-copy .section-kicker { color: var(--gold); }.location-copy p { max-width: 300px; color: var(--muted); font-size: 14px; line-height: 2; margin: 22px 0 25px; }
.map-link { display: inline-flex; gap: 12px; align-items: center; color: var(--oud); font-size: 13px; text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 7px; transition: color .2s ease, gap .2s ease; }.map-link:hover { color: var(--gold); gap: 16px; }.map-link span { direction: ltr; color: var(--gold); font-size: 18px; }
.rsvp { text-align: center; padding-bottom: 108px; }.rsvp .section-kicker { color: var(--gold); }.rsvp .section-kicker span { display: inline-block; width: 28px; height: 1px; background: var(--line); vertical-align: middle; margin: 0 10px; }.rsvp h3 { color: var(--oud); font-family: var(--serif); font-size: 40px; font-weight: 400; margin: 12px 0 8px; }.rsvp p { color: var(--muted); font-size: 14px; margin: 0 auto 25px; }.rsvp-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }.rsvp-button { border: 1px solid var(--gold); border-radius: 999px; padding: 12px 26px; font-size: 12px; transition: transform .25s ease, background .25s ease, color .25s ease; }.rsvp-button:hover { transform: translateY(-3px); }.rsvp-button.primary { background: var(--oud); color: var(--paper); }.rsvp-button.secondary { background: transparent; color: var(--oud); }.rsvp-response { color: var(--oud); font-family: var(--serif); font-size: 18px; min-height: 27px; margin-top: 17px; }
.footer { text-align: center; border-top: 1px solid var(--line); padding: 47px 20px 25px; }.footer-mark { font-family: var(--serif); color: var(--oud); font-size: 26px; }.footer-mark span { color: var(--gold); font-family: var(--sans); font-size: 12px; }.footer p { font-family: var(--serif); color: var(--oud); font-size: 20px; margin: 10px 0 8px; }.footer small { color: var(--muted); font-size: 9px; opacity: .75; }

.toast { position: fixed; z-index: 30; right: 50%; bottom: 24px; transform: translate(50%, 20px); background: var(--oud-deep); color: var(--paper); font-size: 11px; padding: 10px 17px; border-radius: 999px; opacity: 0; pointer-events: none; transition: all .3s ease; }.toast.show { opacity: 1; transform: translate(50%, 0); }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }.invitation-open .reveal { opacity: 1; transform: translateY(0); }.invitation-open .reveal:nth-child(2) { transition-delay: .13s; }

@media (max-width: 760px) {
  .modern-intro { min-height: 224px; width: 100%; margin-bottom: 3px; align-items: flex-start; padding-top: 8px; }.intro-center { padding-top: 26px; }.intro-center h1 { font-size: 43px; }.botanical { transform: scale(.75); }.botanical-left { right: -16px; top: 87px; }.botanical-right { left: -16px; top: 87px; }.butterfly-one { right: 12%; top: 75px; }.butterfly-two { left: 12%; bottom: 4px; }
  .invitation { padding-top: 48px; }
  .hero { display: flex; flex-direction: column-reverse; min-height: 0; gap: 34px; padding-top: 28px; padding-bottom: 68px; }
  .hero-copy { padding: 0; text-align: center; }.hero-copy .eyebrow { margin-bottom: 14px; }.hero h2 { font-size: clamp(58px, 17vw, 84px); }.hero-date { font-size: 12px; }.hero-rule { margin-inline: auto; }.hero-note { margin-inline: auto; font-size: 18px; }
  .hero-art { width: 100%; min-height: 420px; }.hero-art img { height: 400px; width: 76%; }.art-caption { bottom: 18px; right: 13%; left: 13%; }
  .details-layout { grid-template-columns: 1fr; gap: 10px; }.detail-card { min-height: 110px; padding: 20px; }
  .etiquette { padding-bottom: 84px; }.etiquette-grid { grid-template-columns: 1fr; gap: 10px; }.etiquette-card { padding: 18px; }.etiquette h3 { font-size: 31px; }
  .location { grid-template-columns: 1fr; gap: 34px; padding-bottom: 84px; }.location-copy { text-align: center; }.location-copy p { margin-inline: auto; }.details h3, .location h3 { font-size: 36px; }.rsvp { padding-bottom: 84px; }.rsvp h3 { font-size: 34px; }.rsvp-button { width: min(290px, 100%); }
  .countdown { padding-inline: 17px; }.countdown-grid { gap: 6px; }.count-cell { min-width: 58px; }.count-cell strong { font-size: 38px; }.count-divider { font-size: 25px; }
  .floating-audio { left: 14px; bottom: 14px; }.audio-label { display: none; }.music-disc { width: 49px; height: 49px; }
}
@media (max-width: 380px) { .count-cell { min-width: 48px; }.count-cell strong { font-size: 32px; }.count-cell span { font-size: 9px; }.screen-title { font-size: 30px; } }