:root { --ink:#314b46; --deep:#203a35; --cream:#f8f0de; --paper:#fff9ed; --gold:#a78b55; --rose:#c68978; --font-serif:'Cormorant Garamond',Georgia,serif; --font-script:'Parisienne',cursive; --font-ui:Manrope,Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth;scrollbar-gutter:stable; }
body { margin:0; color:var(--ink); background:#223e39; font-family:var(--font-ui); }
.invitation { position:relative; overflow:hidden; max-width:620px; min-height:100vh; margin:0 auto; background:var(--paper); box-shadow:0 0 45px rgba(0,0,0,.22); }
.paper-texture { position:absolute; inset:0; opacity:.42; pointer-events:none; background-image:radial-gradient(rgba(99,75,40,.18) .55px,transparent .7px); background-size:5px 5px; mix-blend-mode:multiply; }
.section,footer { position:relative; z-index:1; padding:74px 10% 66px; text-align:center; }
.hero { min-height:660px; display:flex; flex-direction:column; justify-content:center; padding-top:98px; background:linear-gradient(150deg,rgba(255,249,237,.85),rgba(247,235,208,.85)), radial-gradient(circle at 5% 12%,#a8c1ae 0 4%,transparent 4.5%),radial-gradient(circle at 96% 14%,#e3d5ac 0 5%,transparent 5.5%),radial-gradient(circle at 90% 91%,#b2c9b2 0 7%,transparent 7.5%); }
.eyebrow { margin:0 0 15px; color:var(--gold); font-size:10px; letter-spacing:2.4px; text-transform:uppercase; }
.ornament { color:var(--rose); font-family:var(--font-serif); font-size:33px; line-height:1; }
h1,h2,p { margin-top:0; }
h1 { margin:17px 0 23px; color:var(--ink); font:500 clamp(57px,14vw,84px)/.72 var(--font-serif); letter-spacing:-3px; }
h1 span { display:block; } h1 i { display:block; margin:8px 0 3px; color:var(--rose); font:400 34px/1 var(--font-script); }
.hero-copy,.details-copy { font:400 18px/1.35 var(--font-serif); letter-spacing:.1px; }
.date-lockup { display:flex; align-items:center; justify-content:center; gap:15px; margin-top:40px; color:var(--gold); font:500 13px/1.25 var(--font-serif); letter-spacing:1px; text-transform:uppercase; }
.date-lockup strong { padding:0 16px; border-right:1px solid #cbb889;border-left:1px solid #cbb889; font:500 54px/.8 var(--font-serif); }
.scroll-hint { display:grid; width:31px;height:31px;place-items:center; margin:48px auto -38px; border:1px solid rgba(49,75,70,.45); border-radius:50%; color:var(--ink); font-size:17px; text-decoration:none; animation:bob 2.4s ease-in-out infinite; }
.section--soft { padding-top:52px; padding-bottom:54px; background:#f2e7cf; }
.script { margin-bottom:20px; color:var(--rose); font:400 29px/1 var(--font-script); }
.timer { display:flex; align-items:flex-start; justify-content:center; gap:9px; color:var(--gold); }
.timer div { min-width:50px; }.timer b { display:block; font:500 35px/.9 var(--font-serif); }.timer span { font:500 9px/1.5 var(--font-ui); letter-spacing:.4px; text-transform:uppercase; }.timer i { padding-top:1px; font:400 28px/1 var(--font-serif); }
.details { padding-top:77px; }.details-copy { max-width:310px; margin:0 auto; }.rule { display:flex;align-items:center;gap:12px;margin:37px 0; color:var(--rose); }.rule::before,.rule::after { content:'';height:1px;flex:1;background:#dbc9aa; }.rule span { font-size:12px; }
.venue h2,.program h2,.rsvp h2 { margin:8px 0 10px;font:500 39px/.95 var(--font-serif); }.venue>p:last-of-type { font:400 17px/1.45 var(--font-serif); }.venue a { display:inline-block;margin-top:19px;padding-bottom:3px;border-bottom:1px solid var(--gold);color:var(--ink);font-size:11px;letter-spacing:1px;text-decoration:none;text-transform:uppercase; }.venue a span { color:var(--rose);font-size:15px; }
.section--green { color:#f6edda; background:var(--deep); }.section--green .eyebrow { color:#dfc993; }.program h2 { color:#fff8e9; }.timeline { position:relative; width:280px;margin:35px auto 0;padding:0;list-style:none;text-align:left; }.timeline::before { content:'';position:absolute;top:12px;bottom:15px;left:76px;width:1px;background:#798f83; }.timeline li { display:grid;grid-template-columns:64px 24px 1fr;align-items:center;margin-bottom:25px; }.timeline time { color:#ddc58a;font:500 20px/1 var(--font-serif); }.timeline span { position:relative;width:9px;height:9px;margin-left:8px;border:1px solid #d7c185;border-radius:50%;background:var(--deep); }.timeline li:nth-child(2) span { width:16px;height:16px;margin-left:5px;border-color:#e2a292;background:var(--rose);box-shadow:0 0 0 4px rgba(198,137,120,.15); }.timeline p { margin:0;font:400 18px/1.1 var(--font-serif); }
.rsvp { padding-bottom:75px; }.rsvp h2 { margin-bottom:28px; }.rsvp form { max-width:355px;margin:auto;text-align:left; }.rsvp form>label { display:block;color:var(--gold);font-size:10px;letter-spacing:1.5px;text-transform:uppercase; }.rsvp input[type=text],.rsvp input:not([type]) ,.rsvp input[name=name] { width:100%;margin:9px 0 18px;padding:11px 0;border:0;border-bottom:1px solid #cfc0a1;outline:0;background:transparent;color:var(--ink);font:400 20px var(--font-serif); }.rsvp input::placeholder { color:#bfb29d; }
.attendance { display:grid;gap:8px;margin:3px 0 22px; }.attendance label { cursor:pointer; }.attendance input { position:absolute;opacity:0; }.attendance span { display:block;padding:12px 13px;border:1px solid #dccdb2;color:var(--ink);font:400 16px var(--font-serif);transition:.2s; }.attendance input:checked+span { border-color:var(--rose);background:#f6e7db;color:#8c5e52; }.rsvp button { width:100%;padding:15px;border:0;background:var(--ink);color:#fff8e9;cursor:pointer;font:600 10px var(--font-ui);letter-spacing:2px;text-transform:uppercase;transition:.2s; }.rsvp button:hover { background:var(--rose); }.form-note { min-height:20px;margin:15px 0 0;text-align:center;color:#a77567;font:400 17px var(--font-serif); }
footer { padding:48px 10% 55px;color:#eadfc6;background:#2d4943; } footer .ornament { color:#dfaa95; }footer p { margin:17px 0 10px;font:400 24px/1.1 var(--font-script); }footer small { color:#d7c48e;font:500 10px var(--font-ui);letter-spacing:2px;text-transform:uppercase; }
.botanical { position:absolute;z-index:2;color:#7da08d;opacity:.72;font:100px/1 var(--font-serif);pointer-events:none; }.botanical--left { top:34px;left:-51px;transform:rotate(-28deg); }.botanical--right { top:454px;right:-46px;transform:rotate(25deg);color:#c59b7e; }
@keyframes bob { 50%{transform:translateY(7px)} }
.language-switch { position:fixed;z-index:110;top:18px;right:max(18px,calc((100vw - 620px)/2 + 22px));display:flex;align-items:center;gap:8px;padding:5px 10px;background:rgba(255,249,237,.95);border:1px solid #d9c9a9;border-radius:30px;color:var(--gold);box-shadow:0 3px 16px #203a3510; }
.language-switch button { border:0;background:none;padding:7px 5px;color:#8c8c7c;font:500 12px var(--font-ui);cursor:pointer; }
.language-switch button[aria-pressed=true] { color:var(--deep);font-weight:600;text-decoration:underline;text-underline-offset:5px; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid var(--rose);outline-offset:5px; }
h1 { font-size:clamp(43px,11vw,76px);line-height:.9;letter-spacing:-2px; }
.photo-album { padding:60px 7% 12px; }
.album-caption { line-height:1.8;letter-spacing:1.8px; }
.photo-grid { display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;gap:12px;margin-top:26px; }
.photo { margin:0;padding:5px;background:#fffdf7;box-shadow:0 5px 18px #634d3520;overflow:hidden; }
.photo img { display:block;width:100%;height:100%;object-fit:cover; }
.photo--main { grid-row:span 2;transform:rotate(-2deg); }
.photo--portrait,.photo--close { aspect-ratio:1.12;transform:rotate(2deg); }
.photo--portrait img { object-position:50% 33%; }.photo--close img { object-position:50% 38%; }
.photo--walk,.photo--smile { aspect-ratio:2/3;margin-top:7px; }
.photo--walk { transform:rotate(-1.5deg); }.photo--smile { transform:rotate(1.5deg); }
.album-signature { margin:25px 0 0;color:var(--rose);font:italic 25px var(--font-serif); }
.venue-art { margin:25px -5% 22px; }
.venue-art img { display:block;width:100%;height:auto;mix-blend-mode:multiply; }
.envelope-intro { position:fixed;inset:0;z-index:100;display:none;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 45% 35%,#fffefb,#e9e5e9 80%); }
.intro-active .envelope-intro { display:grid; }
.envelope-intro[hidden] { display:none; }
.envelope-scene { position:relative;width:min(74vw,320px,48svh);text-align:center;perspective:1400px; }
.intro-caption { position:absolute;bottom:calc(100% + 28px);width:100%;margin:0;color:#918778;font:italic 25px var(--font-serif); }
.envelope { position:relative;aspect-ratio: .7;background:#fdfcf6;box-shadow:0 24px 60px #54465925,0 2px 5px #54465915;perspective:1400px; }
.envelope-letter { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--paper);overflow:hidden; }
.envelope-letter>span { color:var(--gold);font-size:30px; }.letter-names { margin:0;color:#ac9680;font:italic 38px/1.1 var(--font-serif); }.envelope-letter small { color:var(--gold);font:10px var(--font-ui);letter-spacing:3px; }
.vellum { position:absolute;top:-2px;bottom:-2px;width:50.4%;z-index:3;border:1px solid #ffffffad;background:linear-gradient(120deg,#ffffffaa,#efeeee65 55%,#ffffff95);backdrop-filter:blur(2.5px);box-shadow:0 0 12px #8c849410;transform-style:preserve-3d; }
.vellum--left { left:-1px;transform-origin:left center; }.vellum--right { right:-1px;transform-origin:right center; }
.pearl { position:absolute;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 32% 24%,#fff 8%,#f7f5df 30%,#d8d4bb 62%,#b0aa93 83%,#ebe7d9);box-shadow:1px 3px 4px #81745c40,inset -1px -1px 2px #c2bda8; }
.pearl:nth-child(1){top:11%;left:20%}.pearl:nth-child(2){top:29%;left:36%}.pearl:nth-child(3){top:67%;left:25%}.pearl:nth-child(4){top:80%;left:65%}.pearl:nth-child(5){top:90%;left:30%}
.vellum--right .pearl:nth-child(1){left:65%;top:13%}.vellum--right .pearl:nth-child(3){left:48%;top:69%}
.ribbon { position:absolute;z-index:5;top:48%;height:17px;width:51%;background:repeating-linear-gradient(0deg,#b5b1c9 0px,#c7c3d8 1px,#c2bdd4 2px,#d3cfe0 3px);box-shadow:0 2px 3px #77718633;border-top:1px solid #e2dfeb;border-bottom:1px solid #aaa5be; }
.ribbon--left{left:0;transform:rotate(2deg);transform-origin:left}.ribbon--right{right:0;transform:rotate(-2deg);transform-origin:right}
.dried-flowers { position:absolute;z-index:4;width:41%;height:44%;top:25%;left:32%;filter:drop-shadow(1px 2px 2px #83765625); }
.ribbon-bow { position:absolute;z-index:6;left:50%;top:50%;width:0;height:0; }
.bow-loop { position:absolute;width:74px;height:34px;bottom:-3px;border:10px solid #c0bad3;background:#e7e3ed55;box-shadow:inset 0 1px 2px #8d85a5,0 2px 2px #8d85a544; }
.bow-loop--left { right:0;border-radius:70% 20% 55% 35%;transform:rotate(15deg);transform-origin:right bottom; }.bow-loop--right{left:0;border-radius:20% 70% 35% 55%;transform:rotate(-20deg);transform-origin:left bottom}
.bow-tail { position:absolute;top:0;width:16px;height:115px;background:linear-gradient(90deg,#aca4c2,#d3cde0 55%,#b7afca);clip-path:polygon(0 0,100% 0,100% 100%,48% 92%,0 100%);transform-origin:top;filter:drop-shadow(1px 2px 2px #73688040); }
.bow-tail--left{right:0;transform:rotate(24deg)}.bow-tail--right{left:0;height:93px;transform:rotate(-44deg)}
.bow-knot { position:absolute;left:-10px;top:-9px;width:20px;height:19px;border-radius:6px;background:linear-gradient(100deg,#aaa1bd,#dad4e6 45%,#b9afcd);box-shadow:0 2px 3px #766a8b40;transform:rotate(-15deg); }
.intro-active { overflow:hidden; }.intro-active .invitation { visibility:hidden; }
.intro-active.intro-revealing .invitation { visibility:visible;opacity:0;pointer-events:none; }
.letter-fragments { position:fixed;inset:0;z-index:101;pointer-events:none;overflow:hidden;contain:strict; }
.letter-fragment { position:absolute;overflow:hidden;will-change:transform,opacity; }
.letter-fragment .envelope-letter { max-width:none; }
/* Жемчужная бумага и приглушённая лавандовая лента настоящего приглашения. */
:root { --ink:#57515d;--deep:#51495e;--cream:#f0edf3;--paper:#fdfcf8;--gold:#a68e76;--rose:#a395b5; }
body { background:#e9e5ec; }.hero { background:radial-gradient(ellipse at 10% 5%,#ece7f260,transparent 60%),linear-gradient(130deg,#fffefa,#f7f5f0); }
.section--soft { background:#f0edf2; }.section--green { background:#5c5366; }footer{background:#5c5366}footer .ornament{color:#cec4dd}footer small{color:#e0d4c6}
.attendance input:checked+span { border-color:var(--rose);background:#f0ebf5;color:var(--ink); }.botanical{color:#c7c0d3}.botanical--right{color:#c4baa6}
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.envelope-intro{display:none}.scroll-hint{animation:none} }
@media (max-width:500px) { body{background:var(--paper)}.section,footer{padding-right:8%;padding-left:8%}.hero{min-height:620px}.botanical--right{top:430px}.timer{gap:5px}.timer div{min-width:45px}.timer b{font-size:32px}.timer i{font-size:23px} }