:root { --ink:#2b2020; --cream:#f3eadf; --paper:#fffaf4; --rose:#ad5264; --softrose:#efb0b4; --wine:#4c1e29; --dark:#211719; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--cream); }
body { margin:0; color:var(--ink); background:var(--cream); font-family:Arial,Helvetica,sans-serif; }
img,video { display:block; width:100%; height:100%; object-fit:cover; }
main { overflow:hidden; }
body.locked { overflow:hidden; }
.passwordGate { position:fixed; z-index:9999; inset:0; display:grid; place-items:center; padding:22px; background:radial-gradient(circle at 50% 18%,#7d2f3d 0,#4c1e29 42%,#211719 100%); color:#fff8ee; transition:opacity .45s ease,visibility .45s ease; }
.passwordGate::before { content:''; position:absolute; inset:0; opacity:.13; background-image:linear-gradient(120deg,transparent 0 48%,rgba(255,255,255,.08) 50%,transparent 52%); background-size:18px 18px; }
.passwordGate.isHidden { opacity:0; visibility:hidden; pointer-events:none; }
.gateCard { position:relative; width:min(100%,520px); padding:42px 26px; text-align:center; border:1px solid rgba(255,255,255,.22); background:rgba(38,19,23,.72); box-shadow:0 28px 90px rgba(0,0,0,.35); backdrop-filter:blur(10px); }
.gateEyebrow { margin:0 0 20px; color:#ffd1d4; text-transform:uppercase; letter-spacing:.18em; font-size:.68rem; font-weight:700; }
.gateCard h2 { font-size:clamp(2.6rem,11vw,4.7rem); }
.gateCard > p:not(.gateEyebrow) { margin:22px auto 28px; max-width:370px; font:1.05rem/1.55 Georgia,serif; color:#ead9d4; }
.gateCard form { display:grid; gap:12px; width:min(100%,310px); margin:auto; }
.gateCard label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.gateCard input { width:100%; padding:14px; border:1px solid rgba(255,255,255,.3); border-radius:0; background:rgba(255,255,255,.09); color:white; text-align:center; font:2rem/1 Arial,sans-serif; letter-spacing:.35em; outline:none; }
.gateCard input:focus { border-color:#ffd1d4; box-shadow:0 0 0 3px rgba(255,209,212,.15); }
.gateCard button { padding:15px 18px; border:0; background:#f4ddd9; color:#4c1e29; font-weight:700; letter-spacing:.06em; cursor:pointer; }
.passwordError { min-height:1.2em; margin:0 !important; color:#ffb6bb !important; font:700 .8rem/1.3 Arial,sans-serif !important; }
.gateSignature { display:block; margin-top:26px; color:#d9bbb9; font:italic .95rem Georgia,serif; }
.snowZone,.heartZone { position:relative; overflow:hidden; }
.snowZone > :not(.particleLayer),.heartZone > :not(.particleLayer) { position:relative; z-index:1; }
.particleLayer { position:absolute !important; z-index:4 !important; inset:0; overflow:hidden; pointer-events:none; }
.particleLayer span { position:absolute; left:5%; top:-10%; opacity:.32; font-size:.8rem; }
.particleLayer span:nth-child(2){left:14%;animation-delay:-3s;font-size:.55rem}.particleLayer span:nth-child(3){left:24%;animation-delay:-7s;font-size:1rem}.particleLayer span:nth-child(4){left:34%;animation-delay:-1s}.particleLayer span:nth-child(5){left:43%;animation-delay:-6s;font-size:.6rem}.particleLayer span:nth-child(6){left:52%;animation-delay:-9s}.particleLayer span:nth-child(7){left:61%;animation-delay:-4s;font-size:.55rem}.particleLayer span:nth-child(8){left:70%;animation-delay:-8s;font-size:.95rem}.particleLayer span:nth-child(9){left:78%;animation-delay:-2s}.particleLayer span:nth-child(10){left:86%;animation-delay:-5s;font-size:.6rem}.particleLayer span:nth-child(11){left:93%;animation-delay:-7.5s}.particleLayer span:nth-child(12){left:97%;animation-delay:-.5s;font-size:.5rem}
.particleLayer.snow span { color:white; animation:snowfall 10s linear infinite; }
.particleLayer.hearts span { top:auto; bottom:-10%; color:#c45f72; opacity:.18; animation:heartFloat 12s ease-in infinite; }
@keyframes snowfall { to { transform:translate3d(28px,115vh,0) rotate(270deg); } }
@keyframes heartFloat { to { transform:translate3d(18px,-115vh,0) rotate(20deg); } }
h1,h2,h3 { margin:0; font-family:Georgia,'Times New Roman',serif; font-weight:400; line-height:.98; text-wrap:balance; }
h2 { font-size:clamp(2.7rem,10vw,5.8rem); letter-spacing:-.048em; }
h3 { font-size:clamp(1.8rem,6vw,3rem); letter-spacing:-.035em; }
p { text-wrap:pretty; }
em { color:var(--rose); }
.eyebrow,.date,.kicker,.duo span,.threeWeeks span { text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:700; }
.date,.kicker { color:var(--rose); }
.reveal { opacity:1; }
@keyframes rise { from { opacity:.15; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }

.hero { min-height:100svh; position:relative; display:grid; place-items:end center; color:white; }
.heroPhoto { position:absolute; inset:0; background:url('memories/WhatsApp Image 2026-08-28 at 23.10.10.jpeg') 56% center/cover; transform:scale(1.03); }
.heroShade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(30,10,15,.08),rgba(30,10,15,.22) 35%,rgba(30,10,15,.9)); }
.heroCopy { position:relative; z-index:1; width:min(100%,820px); padding:70px 22px 36px; text-align:center; }
.hero h1 { font-size:clamp(4.5rem,20vw,9rem); letter-spacing:-.075em; }
.hero h1 em { color:#ffd5d8; font-style:italic; }
.dedication { margin:22px 0 44px; font:italic 1.25rem Georgia,serif; }
.scrollCue { display:inline-block; opacity:.72; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; animation:float 1.8s ease-in-out infinite; }
@keyframes float { 50% { transform:translateY(7px); } }

.letter,.memory,.chapter,.weddingIntro,.weddingLetter,.hospital,.winter,.vacation,.finalLetter { padding:100px 22px; }
.letter { max-width:760px; margin:auto; min-height:88svh; display:flex; flex-direction:column; justify-content:center; }
.letter p,.memory p,.chapter p,.weddingIntro p,.weddingLetter p,.centerCopy p,.hospitalStory p,.countCopy p,.birthCopy p,.threeWeeks p,.finalLetter p { font:1.16rem/1.65 Georgia,'Times New Roman',serif; }
.letter .kicker { font-family:Arial,sans-serif; }
.intro h2 { margin:18px 0 28px; }
.cream,.paper { background:var(--paper); }
.dark { background:var(--wine); color:#fff8ee; }
.blush { background:#ead4d3; }
.charcoal { background:#211d1c; color:#fff8ee; }
.memory { min-height:100svh; display:flex; flex-direction:column; justify-content:center; gap:28px; }
.memory > * { width:min(100%,980px); margin-inline:auto; }
.memoryCopy { display:flex; flex-direction:column; gap:22px; }
.memoryCopy em { font-family:Georgia,serif; }
.dark .date,.charcoal .date { color:var(--softrose); }
.photoFrame { overflow:hidden; border-radius:4px; box-shadow:0 28px 80px rgba(42,19,19,.2); background:#ddd; }
.photoFrame.landscape { aspect-ratio:4/3; }
.photoFrame.portrait { aspect-ratio:3/4; max-width:420px; }
.tiltLeft { transform:rotate(-2deg); }

.videoMoment { padding:100px 22px; min-height:100svh; background:var(--dark); color:white; display:grid; place-content:center; gap:32px; }
.videoMoment > * { width:min(100%,900px); margin:auto; }
.videoMoment video { max-height:68svh; object-fit:contain; background:#080808; border-radius:8px; }
.videoCopy { display:flex; flex-direction:column; gap:16px; }
.videoCopy h2 { max-width:820px; }
.smallLead { margin:0; color:#dbc5c0; font:italic 1.15rem Georgia,serif; }
.videoHint { text-align:center; margin:0; color:var(--softrose); letter-spacing:.15em; text-transform:uppercase; font-size:.7rem; }

.chapterTitle,.centerCopy { width:min(100%,850px); margin:0 auto 64px; }
.chapterTitle span { color:var(--rose); font-size:.75rem; letter-spacing:.16em; }
.chapterTitle h2,.centerCopy h2 { margin-top:12px; }
.polaroids { width:min(100%,1100px); margin:auto; display:grid; gap:38px; }
.polaroid { margin:0; padding:10px 10px 20px; background:white; box-shadow:0 20px 50px rgba(52,38,34,.15); }
.polaroid img { aspect-ratio:4/3; }
.polaroid figcaption { padding:14px 6px 0; font:italic 1rem/1.4 Georgia,serif; }
.p1 { transform:rotate(-2deg); }.p2 { transform:rotate(1.5deg); }.p3 { transform:rotate(-1deg); }
.workMonth { background:#d5c1aa; }
.filmStrip { display:flex; gap:10px; overflow-x:auto; padding:12px max(20px,calc((100vw - 1200px)/2)); scroll-snap-type:x mandatory; scrollbar-width:none; background:#181515; }
.filmStrip::-webkit-scrollbar { display:none; }
.filmStrip img { flex:0 0 min(76vw,420px); height:min(68svh,560px); object-fit:cover; scroll-snap-align:center; }

.moments { padding:110px 18px; background:var(--wine); color:white; }
.lightCopy .date { color:var(--softrose); }
.momentGrid { width:min(100%,1100px); margin:auto; display:grid; gap:16px; }
.momentGrid article { background:#fffaf4; color:var(--ink); border-radius:5px; overflow:hidden; }
.momentGrid img { height:300px; }
.momentPhotos { padding:0 !important; display:grid; grid-template-columns:1fr 1fr; gap:3px; background:#1c1717; }
.momentPhotos img { height:300px; }
.momentGrid article > div { padding:22px; }
.momentGrid b { color:var(--rose); text-transform:uppercase; letter-spacing:.12em; font-size:.7rem; }
.momentGrid p { margin:10px 0 0; font:1.05rem/1.5 Georgia,serif; }

.suitGallery { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; background:#1b1616; }
.suitGallery img { height:65svh; }
.duo { padding:90px 18px; background:var(--paper); display:grid; gap:20px; }
.duo article { background:#eaded1; overflow:hidden; }
.duo img { height:400px; }
.duo article div { padding:28px; }
.duo span,.threeWeeks span { color:var(--rose); }
.duo h3 { margin:15px 0; }
.duo p { font:1.05rem/1.5 Georgia,serif; }

.weddingIntro { min-height:100svh; display:flex; flex-direction:column; justify-content:center; background:#f4e6df; text-align:center; }
.weddingIntro > * { width:min(100%,880px); margin-left:auto; margin-right:auto; }
.weddingIntro h2 { margin:30px auto; }
.weddingHero { min-height:100svh; position:relative; color:white; }
.weddingHero > img { position:absolute; inset:0; }
.weddingHero::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 30%,rgba(20,11,13,.85)); }
.overlayCopy { position:absolute; z-index:1; left:22px; right:22px; bottom:52px; max-width:980px; margin:auto; }
.overlayCopy .date { color:#ffd1d4; }
.overlayCopy h2 { margin-top:14px; }
.weddingLetter { max-width:780px; margin:auto; }
.weddingLetter p:first-child { font-size:1.45rem; }
.quote { min-height:65svh; padding:80px 22px; display:grid; place-content:center; text-align:center; background:#b95e6d; color:white; }
.quote p { max-width:950px; margin:0 auto 28px; font:italic clamp(2.7rem,9vw,6.5rem)/1 Georgia,serif; letter-spacing:-.04em; }
.quote span { text-transform:uppercase; letter-spacing:.18em; font-size:.7rem; }
.weddingEnd { background:var(--dark); color:white; max-width:none; padding-left:max(22px,calc((100% - 760px)/2)); padding-right:max(22px,calc((100% - 760px)/2)); }

.winter { background:#e9dfd2; }
.winterGrid { width:min(100%,1100px); margin:0 auto 70px; display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.winterGrid img { aspect-ratio:1; }
.countdown { min-height:100svh; display:grid; background:#bf5b68; color:white; }
.cartPhoto { min-height:52svh; }
.countCopy { padding:56px 22px 80px; align-self:center; }
.countCopy .date { color:#ffe0df; }
.countCopy h2 { margin:16px 0 26px; }
.birth { min-height:110svh; position:relative; display:flex; align-items:end; background:#0f0d0d; color:white; }
.birthPhoto { position:absolute; inset:0; }
.birthPhoto::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 20%,rgba(12,9,9,.95)); }
.birthCopy { position:relative; z-index:1; padding:70px 22px; max-width:950px; margin:0 auto; }
.birthCopy .date { color:#ffd1d4; }
.birthCopy h2 { margin:16px 0 28px; }

.hospital { background:#f8f1e8; }
.hospitalStory { width:min(100%,740px); margin:70px auto; }
.hospitalStory h3 { margin-top:40px; color:var(--rose); }
.hospitalVideo { width:min(100%,760px); margin:auto; }
.hospitalVideo video { max-height:72svh; object-fit:contain; background:#151112; }
.threeWeeks { min-height:100svh; display:grid; background:#d8c4ae; }
.threeWeeks > img { min-height:55svh; }
.threeWeeks > div { padding:56px 22px 80px; align-self:center; }
.threeWeeks h2 { margin:14px 0 25px; }

.familyMontage { background:#141010; }
.montageStage { position:relative; height:100svh; overflow:hidden; }
.montageImage { position:absolute; inset:0; opacity:0; animation:slideshow 43s infinite; }
.montageImage:nth-of-type(1) { opacity:1; }
.montageImage:nth-of-type(1){animation-delay:0s}.montageImage:nth-of-type(2){animation-delay:1s}.montageImage:nth-of-type(3){animation-delay:2s}.montageImage:nth-of-type(4){animation-delay:3s}.montageImage:nth-of-type(5){animation-delay:4s}.montageImage:nth-of-type(6){animation-delay:5s}.montageImage:nth-of-type(7){animation-delay:6s}.montageImage:nth-of-type(8){animation-delay:7s}.montageImage:nth-of-type(9){animation-delay:8s}.montageImage:nth-of-type(10){animation-delay:9s}.montageImage:nth-of-type(11){animation-delay:10s}.montageImage:nth-of-type(12){animation-delay:11s}.montageImage:nth-of-type(13){animation-delay:12s}.montageImage:nth-of-type(14){animation-delay:13s}.montageImage:nth-of-type(15){animation-delay:14s}.montageImage:nth-of-type(16){animation-delay:15s}.montageImage:nth-of-type(17){animation-delay:16s}.montageImage:nth-of-type(18){animation-delay:17s}.montageImage:nth-of-type(19){animation-delay:18s}.montageImage:nth-of-type(20){animation-delay:19s}.montageImage:nth-of-type(21){animation-delay:20s}.montageImage:nth-of-type(22){animation-delay:21s}.montageImage:nth-of-type(23){animation-delay:22s}.montageImage:nth-of-type(24){animation-delay:23s}.montageImage:nth-of-type(25){animation-delay:24s}.montageImage:nth-of-type(26){animation-delay:25s}.montageImage:nth-of-type(27){animation-delay:26s}.montageImage:nth-of-type(28){animation-delay:27s}.montageImage:nth-of-type(29){animation-delay:28s}.montageImage:nth-of-type(30){animation-delay:29s}.montageImage:nth-of-type(31){animation-delay:30s}.montageImage:nth-of-type(32){animation-delay:31s}.montageImage:nth-of-type(33){animation-delay:32s}.montageImage:nth-of-type(34){animation-delay:33s}.montageImage:nth-of-type(35){animation-delay:34s}.montageImage:nth-of-type(36){animation-delay:35s}.montageImage:nth-of-type(37){animation-delay:36s}.montageImage:nth-of-type(38){animation-delay:37s}.montageImage:nth-of-type(39){animation-delay:38s}.montageImage:nth-of-type(40){animation-delay:39s}.montageImage:nth-of-type(41){animation-delay:40s}.montageImage:nth-of-type(42){animation-delay:41s}.montageImage:nth-of-type(43){animation-delay:42s}
@keyframes slideshow { 0%{opacity:0;transform:scale(1.04)} .5%{opacity:1} 2.2%{opacity:1} 2.7%{opacity:0;transform:scale(1)} 100%{opacity:0} }
.montageShade { position:absolute; inset:0; background:linear-gradient(rgba(18,10,12,.02),rgba(18,10,12,.38)); }
.montageWords { position:absolute; z-index:2; inset:auto 22px 55px; color:white; max-width:850px; }
.montageWords p { color:#ffd1d4; text-transform:uppercase; letter-spacing:.15em; font-size:.72rem; }

.vacation { background:#dccab4; }
.vacationPhotos { width:min(100%,1100px); margin:0 auto 70px; display:grid; gap:6px; }
.vacationPhotos img,.vacationPhotos video { height:62svh; background:#171313; }
.finalLetter { max-width:780px; margin:auto; }
.finalLetter h2 { margin:18px 0 42px; }
.finalLetter p:last-child { color:var(--rose); font-size:1.35rem; font-style:italic; }
.finale { min-height:100svh; position:relative; display:grid; place-items:center; color:white; text-align:center; }
.finale > img { position:absolute; inset:0; }
.finaleShade { position:absolute; inset:0; background:rgba(25,12,15,.63); }
.finaleCopy { position:relative; z-index:1; padding:40px 22px; }
.finaleCopy p { text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; }
.finaleCopy h2 { font-size:clamp(4rem,18vw,9rem); color:#ffd1d4; margin:20px 0 30px; }
.finaleCopy span { font:italic 1.3rem/1.5 Georgia,serif; }

@media (min-width:760px) {
  .split { display:grid; grid-template-columns:minmax(280px,440px) minmax(0,600px); gap:7vw; padding-inline:max(5vw,44px); align-items:center; }
  .split > * { width:100%; }.reverse .photoFrame { order:2; }
  .polaroids { grid-template-columns:repeat(3,1fr); }.momentGrid { grid-template-columns:repeat(2,1fr); }
  .momentGrid article:last-child { grid-column:span 2; }.duo { grid-template-columns:1fr 1fr; padding:120px max(4vw,30px); }
  .countdown { grid-template-columns:1fr 1fr; }.cartPhoto { min-height:100svh; }.countCopy { padding:70px; }
  .threeWeeks { grid-template-columns:1.05fr .95fr; }.threeWeeks > img { min-height:100svh; }.threeWeeks > div { padding:7vw; }
  .vacationPhotos { grid-template-columns:1fr 1fr 1fr; }.vacationPhotos img,.vacationPhotos video { height:60svh; }
}
@media (min-width:1050px) { .momentGrid { grid-template-columns:repeat(3,1fr); }.momentGrid article:last-child { grid-column:auto; } }
@media (max-width:759px) {
  .photoFrame { aspect-ratio:auto !important; max-width:none !important; box-shadow:none; background:transparent; }
  .photoFrame img,.polaroid img,.momentGrid img,.duo img,.suitGallery img,.winterGrid img,.threeWeeks > img,.vacationPhotos img,.vacationPhotos video { width:100%; height:auto; max-height:none; object-fit:contain; }
  .polaroid img { aspect-ratio:auto; }
  .filmStrip { flex-direction:column; gap:14px; overflow:visible; padding:14px 12px; scroll-snap-type:none; }
  .filmStrip img { flex:none; width:100%; height:auto; max-height:none; object-fit:contain; scroll-snap-align:none; }
  .momentPhotos { grid-template-columns:1fr; }
  .momentPhotos img { height:auto; object-fit:contain; }
  .suitGallery { grid-template-columns:1fr; gap:10px; padding:10px; }
  .winterGrid { grid-template-columns:1fr; }
  .cartPhoto { min-height:0; }
  .cartPhoto img { height:auto; object-fit:contain; }
  .weddingHero,.birth,.finale { min-height:0; display:block; background:#171213; }
  .weddingHero > img,.birthPhoto,.birthPhoto img,.finale > img { position:relative; inset:auto; width:100%; height:auto; object-fit:contain; }
  .weddingHero::after,.birthPhoto::after,.finaleShade { display:none; }
  .overlayCopy,.birthCopy,.finaleCopy { position:relative; inset:auto; padding:48px 22px; color:white; }
  .threeWeeks > img { min-height:0; }
  .montageImage { object-fit:contain; background:#110d0e; }
  .vacationPhotos img,.vacationPhotos video { background:#171313; }
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.reveal{animation:none}.scrollCue{animation:none}.particleLayer{display:none}.montageImage{animation:none;display:none}.montageImage:first-child{display:block;opacity:1} }