:root{--navy:#081a33;--navy2:#0d294d;--gold:#c7a45a;--white:#f7f6f2;--grey:#aab1bb;--ink:#172033}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--navy);color:var(--white);font-family:"Noto Sans Thai",system-ui,sans-serif;overflow-x:hidden}body.locked{overflow:hidden}.eyebrow{letter-spacing:.28em;text-transform:uppercase;font-size:.7rem;color:var(--gold)}
#progress{position:fixed;left:0;top:0;height:2px;width:0;background:var(--gold);z-index:100}.lock-screen{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 35%,#17365f 0,#081a33 47%,#050d19 100%);transition:opacity 1s ease,visibility 1s}.lock-screen.hidden{opacity:0;visibility:hidden}.gold-orbit{position:absolute;width:min(78vw,410px);aspect-ratio:1;border:1px solid rgba(199,164,90,.28);border-radius:50%;animation:orbit 16s linear infinite}.gold-orbit:after{content:"";position:absolute;inset:11%;border:1px solid rgba(199,164,90,.12);border-radius:50%}@keyframes orbit{to{transform:rotate(360deg)}}.lock-card{position:relative;width:min(92vw,450px);padding:42px 28px;text-align:center;border:1px solid rgba(255,255,255,.13);background:rgba(8,26,51,.68);backdrop-filter:blur(18px);box-shadow:0 25px 80px rgba(0,0,0,.38)}
h1,h2,h3,.names{font-family:"Cormorant Garamond",serif;font-weight:500}.lock-card h1{font-size:clamp(3.2rem,13vw,5.6rem);line-height:.78;margin:18px 0}.lock-card h1 span{color:var(--gold);font-style:italic}.date{color:#d2d5da;font-size:.82rem;letter-spacing:.08em}form{margin-top:34px}label{display:block;font-size:.75rem;color:var(--grey);margin-bottom:10px}.password-row{display:flex;border-bottom:1px solid rgba(199,164,90,.7)}input{width:100%;border:0;background:transparent;color:white;font-size:1.2rem;letter-spacing:.35em;padding:13px 5px;outline:none}button{font:inherit}.password-row button,#replayBtn{border:0;background:transparent;color:var(--gold);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;cursor:pointer}.error{min-height:20px;color:#e7b2ad;font-size:.75rem}.hint{margin-top:28px;color:#8f99a8;font-size:.72rem}
.music-toggle{position:fixed;right:16px;top:16px;z-index:70;display:none;align-items:center;gap:8px;border:1px solid rgba(199,164,90,.45);background:rgba(8,26,51,.78);color:white;border-radius:30px;padding:9px 13px;backdrop-filter:blur(10px);cursor:pointer}.music-toggle.visible{display:flex}.music-bars{display:flex;align-items:flex-end;gap:2px;height:14px}.music-bars i{width:2px;background:var(--gold);animation:bars .9s ease-in-out infinite alternate}.music-bars i:nth-child(2){animation-delay:.2s}.music-bars i:nth-child(3){animation-delay:.4s}@keyframes bars{from{height:3px}to{height:14px}}.music-toggle.paused i{animation:none;height:3px}
main{opacity:0;transition:opacity 1.2s}main.visible{opacity:1}.hero{min-height:100svh;position:relative;display:grid;place-items:center;text-align:center;background-image:var(--hero);background-size:cover;background-position:center}.hero-overlay,.ending-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,10,22,.3),rgba(3,10,22,.75))}.hero-content{position:relative;padding:25px}.hero h2{font-size:clamp(3.4rem,13vw,7rem);line-height:.85;margin:18px 0}.hero-content>p:last-child{color:#e5e2da}.scroll-cue{position:absolute;bottom:24px;color:white;text-decoration:none;font-size:.68rem;letter-spacing:.25em;text-transform:uppercase}
.chapter{padding:100px 18px}.chapter-heading{max-width:850px;margin:0 auto 65px;text-align:center}.chapter-number{color:var(--gold);letter-spacing:.3em}.chapter-heading h2{font-size:clamp(3.2rem,11vw,6rem);line-height:.9;margin:10px}.chapter-heading p:last-child{color:var(--grey)}.dark{background:var(--navy)}.light{background:var(--white);color:var(--ink)}.story-stack{max-width:980px;margin:auto;display:grid;gap:80px}.cinematic{margin:0;position:relative}.cinematic img{width:100%;height:min(67vh,660px);object-fit:cover;display:block;filter:saturate(.9) contrast(1.02)}.cinematic figcaption{position:absolute;left:22px;bottom:20px;font-family:"Cormorant Garamond";font-size:clamp(2rem,7vw,4rem);text-shadow:0 2px 15px #000}.cinematic.reverse figcaption{left:auto;right:22px;text-align:right}.cinematic strong{color:var(--gold);font-size:1.25em}
.editorial-grid{max-width:1040px;margin:auto;display:grid;gap:18px}.editorial-grid figure{margin:0;overflow:hidden}.editorial-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s}.editorial-grid figure:hover img{transform:scale(1.025)}.editorial-copy{padding:28px 10px 55px}.editorial-copy span{color:var(--gold);font-size:.72rem;letter-spacing:.25em}.editorial-copy h3{font-size:clamp(2.5rem,9vw,5rem);line-height:.95;margin:12px 0}.tall{height:70vh}.wide{height:55vh}
.wedding-day{padding-left:0;padding-right:0}.date-lockup{text-align:center;padding:30px 20px 75px}.date-lockup p{color:var(--grey);letter-spacing:.12em}.date-lockup h2{font-size:clamp(3.3rem,13vw,7rem);margin:12px;color:var(--gold)}.wedding-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding:0 10px 20px}.wedding-strip img{width:86vw;height:68vh;object-fit:cover;flex:none;scroll-snap-align:center}
.gallery-section{background:#ecebe7;color:var(--ink)}.gallery-grid{max-width:1200px;margin:auto;columns:2;column-gap:10px}.gallery-item{width:100%;display:block;margin:0 0 10px;padding:0;border:0;background:none;cursor:pointer;break-inside:avoid}.gallery-item img{width:100%;display:block}.ending{min-height:100svh;position:relative;display:grid;place-items:center;text-align:center;background-image:var(--ending);background-size:cover;background-position:center;padding:55px 22px}.ending-copy{position:relative;max-width:700px}.ending h2{font-size:clamp(3rem,12vw,6.5rem);line-height:.9;margin:25px 0}.ending-copy>p{color:#e7e4dd}.names{font-size:clamp(3.5rem,14vw,7rem);color:white;margin-top:35px}.names span{color:var(--gold);font-style:italic}.forever{font-family:"Cormorant Garamond";font-size:1.45rem;font-style:italic}.ending #replayBtn{margin-top:35px;padding:13px 24px;border:1px solid rgba(199,164,90,.6)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}.reveal.in{opacity:1;transform:none}.lightbox{position:fixed;inset:0;z-index:120;background:rgba(2,7,14,.96);display:none;place-items:center;padding:55px 15px}.lightbox.open{display:grid}.lightbox img{max-width:94vw;max-height:82vh;object-fit:contain}.lightbox-close,.lightbox-nav{position:absolute;border:0;background:rgba(8,26,51,.45);color:white;cursor:pointer}.lightbox-close{right:18px;top:14px;font-size:2.1rem;width:44px;height:44px;border-radius:50%}.lightbox-nav{top:50%;font-size:3rem;padding:8px}.lightbox-nav.prev{left:4px}.lightbox-nav.next{right:4px}.lightbox p{position:absolute;bottom:12px;color:#aaa;font-size:.8rem}
@media(min-width:760px){.chapter{padding:140px 40px}.editorial-grid{grid-template-columns:1.35fr .65fr;align-items:center}.tall,.wide{height:78vh}.editorial-copy{padding:45px}.gallery-grid{columns:3;column-gap:14px}.gallery-item{margin-bottom:14px}.wedding-strip img{width:48vw}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}