@font-face{font-family:Wedding;src:url('wedding-serif.otf') format('opentype');font-display:swap}@font-face{font-family:Wedding;src:url('wedding-italic.otf') format('opentype');font-style:italic;font-display:swap}
*{box-sizing:border-box} :root{color-scheme:light;--ink:#343e36;--gold:#a88a53;--cream:#f8f4e9}body{margin:0;background:#182721;color:var(--ink);font-family:Wedding,Georgia,serif}button{font:inherit}button:focus-visible{outline:3px solid #d8b978;outline-offset:7px}.backdrop{position:fixed;inset:0;z-index:-1;background:linear-gradient(#0d201f33,#10201977),url('winter-forest.png') center/cover no-repeat}.snow{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:5}.flake{position:absolute;top:-15px;background:#fffaf0;border-radius:50%;animation:fall linear infinite}@keyframes fall{to{transform:translate3d(35px,110vh,0)}}main{min-height:100svh}.intro{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:54px 22px 32px;color:var(--cream);overflow:hidden;text-shadow:0 2px 25px #07100d}.eyebrow{font-family:Arial,sans-serif;font-size:12px;font-weight:400;letter-spacing:.33em;line-height:1.6;margin:0 0 30px}h1{font-weight:400;font-size:clamp(40px,5.5vw,66px);margin:0;line-height:1.16;letter-spacing:-.03em}h1 span{display:block;font-size:.52em;line-height:1.3;font-style:italic;color:#dfc791;letter-spacing:0}.intro-line{font-size:19px;font-style:italic;line-height:1.55;color:#e4e5dc;margin:20px 0 0}.envelope{position:relative;isolation:isolate;display:block;width:min(350px,83vw);height:220px;margin:54px 0 28px;cursor:pointer;border:0;background:transparent;perspective:1100px;filter:drop-shadow(0 23px 28px #07150d99);-webkit-tap-highlight-color:transparent;text-shadow:none;transition:transform .4s}.envelope:hover{transform:translateY(-4px)}.back{position:absolute;inset:0;background:#cbbfa7;border-radius:3px;z-index:0}.paper{position:absolute;inset:12px 17px;background:#fffcf3;z-index:1;padding:30px 12px;color:#4c5145;transition:transform 1s .4s}.paper i{font-size:31px}.paper b{display:block;font-weight:400;font-family:Arial,sans-serif;font-size:12px;letter-spacing:.17em;margin-top:20px}.front{position:absolute;inset:0;background:linear-gradient(150deg,#f8f3e7,#e3d8c2);clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);z-index:3;border-radius:3px}.front:after{content:'';position:absolute;inset:0;background:linear-gradient(32deg,transparent 49.8%,#b9a78477 50%,transparent 50.5%),linear-gradient(-32deg,transparent 49.8%,#b9a78466 50%,transparent 50.5%);opacity:.35}.flap{position:absolute;inset:0;background:linear-gradient(180deg,#fffdf5,#e9dfcb);clip-path:polygon(0 0,100% 0,50% 57%);transform-origin:top;transition:transform .85s ease;z-index:4;backface-visibility:hidden}.seal{position:absolute;left:calc(50% - 36px);top:91px;width:72px;height:72px;display:flex;align-items:center;justify-content:center;gap:1px;border-radius:48% 51% 46% 52%;background:linear-gradient(135deg,#eddbab 0,#bb9958 38%,#dec68e 56%,#a18348 100%);color:#715830;border:5px double #dcc18a;box-shadow:1px 4px 7px #4b3a3155,inset 0 0 0 2px #b3915e;z-index:5;font-size:25px;transition:opacity .3s,transform .6s;text-shadow:0 1px #f6e7bf}.seal span{font-size:14px;font-style:italic}.hint{font-family:Arial,sans-serif;font-size:14px;letter-spacing:.09em;color:#f4eddf;margin:0}.sound-hint{font-family:Arial,sans-serif;font-size:12px;letter-spacing:.03em;color:#d1d5cb;margin:10px 0 0}.intro-date{font-size:16px;letter-spacing:.2em;margin:27px 0 0;color:#e4d1a6}.unsealing .flap{transform:rotateX(180deg)}.unsealing .seal{opacity:0;transform:scale(1.18) rotate(-12deg)}.unsealing .paper{transform:translateY(-90px)}.unsealing .hint,.unsealing .sound-hint{opacity:0}.intro.leaving{animation:fadeout .6s forwards}@keyframes fadeout{to{opacity:0;transform:scale(1.04)}}.invitation{max-width:610px;margin:36px auto;background:var(--cream);box-shadow:0 20px 90px #07160dcc;animation:appear 1.3s ease;position:relative;outline:none}.invitation[hidden]{display:none}@keyframes appear{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:none}}.card-heading{text-align:center;padding:40px 20px 23px}.card-heading .eyebrow{color:#75623f;font-size:12px;letter-spacing:.28em;margin:0 0 13px}.announcement{font-size:43px;font-style:italic;margin:0;font-weight:400}.photo{position:relative;margin:0 48px;aspect-ratio:4/5;overflow:hidden;border-radius:48% 48% 0 0;box-shadow:0 0 0 6px var(--cream),0 0 0 7px #baa57a}.photo img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block;animation:photo-reveal 3s ease-out}@keyframes photo-reveal{from{transform:scale(1.06)}to{transform:scale(1)}}.letter{text-align:center;padding:18px 44px 35px;position:relative}.letter p{font-size:19px;line-height:1.6;margin:22px 0}.letter .opening{font-style:italic;color:#766748;font-size:18px;line-height:1.55;margin:27px 0}h2{font-size:clamp(48px,8vw,67px);font-weight:400;line-height:1.04;letter-spacing:-.04em;margin:29px 0 22px}h2 span{display:block;font-size:31px;line-height:1.4;font-style:italic;color:#a48a54;letter-spacing:0}.rule{display:flex;align-items:center;gap:14px;justify-content:center;color:#a58c59;margin:26px auto;max-width:158px;font-size:23px}.rule:before,.rule:after{content:'';width:60px;height:1px;background:#c5b38e}.letter .reserve{font-family:Arial,sans-serif;font-size:12px;letter-spacing:.2em;margin:35px 0 15px;color:#776748}.date{display:flex;align-items:center;justify-content:center;gap:25px;margin:8px 0 27px;color:#39453a}.date span{font-family:Arial,sans-serif;font-size:14px;letter-spacing:.12em;border-top:1px solid #bdac86;border-bottom:1px solid #bdac86;padding:12px 0;min-width:65px}.date strong{font-weight:400;font-size:86px;line-height:1}.letter .venue{font-size:25px;line-height:1.35;margin:22px 0 10px}.letter .location{font-family:Arial,sans-serif;font-size:14px;letter-spacing:.06em;margin-top:0}.letter .closing{font-style:italic;font-size:21px;line-height:1.5}.letter .formal{font-size:16px;line-height:1.5;color:#716b5d;margin:25px 0}.letter .monogram{font-size:29px;letter-spacing:.11em;color:#987e47;margin:28px 0 17px}.replay{border:0;border-bottom:1px solid #b6a686;padding:8px 0;background:none;color:#706549;font-family:Arial,sans-serif;font-size:12px;cursor:pointer;position:relative;margin:6px 0}.music-toggle{position:fixed;right:16px;top:16px;z-index:10;display:flex;gap:7px;align-items:center;border:1px solid #d4c6a775;border-radius:25px;background:#18251fe6;color:#f9edce;padding:9px 13px;font-family:Arial,sans-serif;font-size:12px;cursor:pointer}.music-toggle>span:first-child{font-size:19px;line-height:1}.music-toggle[aria-pressed=true]{background:#f6eddaeF;color:#4d533f;border-color:#d2bd8d}.music-toggle[aria-pressed=true]>span:first-child{animation:pulse 3s infinite}@keyframes pulse{50%{opacity:.5}}@media(min-width:850px){.backdrop{background-position:center 45%}.invitation{margin:48px auto}.letter{padding:18px 66px 38px}}@media(max-width:500px){.intro{padding-top:58px}.invitation{margin:18px 14px;max-width:calc(100% - 28px)}.photo{margin:0 29px}.card-heading{padding-top:32px}.letter{padding:16px 25px 28px}.letter p{font-size:18px}.desktop-break{display:none}.envelope{height:200px;margin-top:48px}.seal{top:80px}.letter .closing{font-size:20px}.date{gap:18px}.music-toggle{top:12px;right:12px}}@media(max-height:740px) and (min-width:501px){.intro{padding-top:35px}h1{font-size:43px}.envelope{margin-top:36px;height:190px}.seal{top:76px}.eyebrow{margin-bottom:16px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.snow{display:none}}

/* White winter stationery: the wedding leads, memories follow. */
:root{--ink:#344952;--gold:#947138;--cream:#fff}body{background:#fff}.backdrop{background:linear-gradient(180deg,#ffffffdf,#fffffff2 65%,#fff),url('winter-forest.png') center/cover no-repeat}.intro{color:var(--ink);text-shadow:none}.intro-line{color:#516975}.intro h1 span{color:#96723d}.hint{color:#526772}.intro-date{color:#806438}.envelope{filter:drop-shadow(0 18px 26px #607d852d)}.back{background:#cddbe0}.front{background:linear-gradient(150deg,#fff,#e7eff2)}.flap{background:linear-gradient(180deg,#fff,#eaf0f3)}.paper{background:#fff}.paper i{font-size:24px}.flake{background:#fff;box-shadow:0 0 2px 1px #aec2cc;filter:drop-shadow(0 1px 2px #7895a4)}.invitation{max-width:700px;box-shadow:0 12px 70px #69869521;border:1px solid #dce5e8;margin-top:70px}.card-heading{padding:42px 20px 0}.card-heading .eyebrow{font-size:14px;margin:0}.letter .opening{margin-top:20px;color:#6c7c83}.letter{padding-top:6px}h2{margin-top:24px}.date{margin-top:35px;color:#344952}.letter .formal{color:#62727a}.eyebrow{font-size:14px}.replay{font-size:14px}.music-toggle{background:#ffffffed;color:#48616b;border-color:#d0dde2;font-size:14px}.music-panel{position:fixed;right:16px;top:64px;z-index:11;width:min(340px,calc(100vw - 32px));padding:14px;background:white;border:1px solid #d3dfe4;box-shadow:0 12px 40px #334c5926;border-radius:8px;font-family:Arial,sans-serif}.music-panel[hidden]{display:none}.music-panel p{margin:0 0 12px;font-size:16px}.music-panel p span{display:block;font-size:14px;color:#607480;margin-top:4px}.music-panel iframe{display:block;width:100%;border:0;min-height:200px}.music-panel a{display:inline-block;margin-top:10px;font-size:14px;color:#466372}.memories{margin:38px -22px 0;padding-top:24px;border-top:1px solid #dee6e8}.letter .memory-title{font-style:italic;font-size:25px;margin:0 0 9px}.letter .memory-note{font-size:16px;color:#64777e;line-height:1.55;margin:0 0 24px}.memory-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}.memory-strip figure{margin:0;padding:5px 5px 10px;background:#fff;box-shadow:0 4px 16px #3456631c;border:1px solid #e0e8eb;transform:rotate(-3deg)}.memory-strip figure:nth-child(2){transform:translateY(10px) rotate(2deg)}.memory-strip figure:nth-child(3){transform:rotate(-2deg)}.memory-strip img{display:block;width:100%;height:175px;object-fit:cover}.memory-strip figure:first-child img{object-position:60% center}.memory-strip figcaption{font-size:15px;line-height:1.3;margin-top:9px}.letter .monogram{margin-top:40px}@media(max-width:500px){.invitation{margin-top:65px}.memories{margin-left:-12px;margin-right:-12px}.memory-strip{gap:6px}.memory-strip img{height:125px}.memory-strip figcaption{font-size:14px}.memory-strip figure{padding:3px 3px 8px}.letter .memory-note{font-size:16px}.letter .memory-title{font-size:24px}}

/* The couple's own snowy forest frames the white stationery. */
.backdrop{background:linear-gradient(90deg,#ffffff0d,#ffffff26),url('nuestro-bosque.jpg') center 42%/cover no-repeat}.intro{position:relative;isolation:isolate}.intro:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,transparent 5%,#ffffffd9 34%,#fffffff0 50%,#ffffffd9 66%,transparent 95%)}.intro .eyebrow{color:#405762}.intro-line{color:#3e5863}.hint{color:#344f5d}.intro-date{color:#6c502a}.invitation{background:#fff}.memory-strip figure:nth-child(2) img{object-fit:contain;background:#f3f7f8}.letter .memory-note{margin-top:0}@media(max-width:600px){.backdrop{background-position:center}.intro:before{background:linear-gradient(180deg,#ffffff08 0%,#ffffffe0 18%,#fffffff0 44%,#ffffffe0 75%,#ffffff15 100%)}.intro{padding-top:80px;padding-bottom:55px}.memory-strip figure:nth-child(2) img{object-fit:contain}}

.carriage-film{max-width:290px;margin:32px auto 0;padding:7px 7px 13px;background:#fff;border:1px solid #dce6ea;box-shadow:0 8px 25px #34566318}.carriage-film video{display:block;width:100%;height:auto;aspect-ratio:9/16;background:#e6edf0;object-fit:contain}.carriage-film figcaption{font-size:16px;font-style:italic;margin-top:12px;color:#526b76}@media(max-width:500px){.carriage-film{max-width:250px}}