:root { --red:#5e1019; --red2:#7b1d28; --paper:#f3eee6; --ink:#241b19; --gold:#c9a772; --line:rgba(94,16,25,.18); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:#1c1716; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Songti SC","STSong","Noto Serif CJK SC",serif; overflow-x:hidden; }
button { font:inherit; }
img { display:block; width:100%; }
.opening { position:fixed; inset:0; z-index:100; min-height:100dvh; display:grid; place-items:center; color:#fff; overflow:hidden; transition:opacity .45s ease .78s, visibility .45s ease .78s; }
.opening::before,.opening::after { content:""; position:absolute; z-index:1; top:0; bottom:0; width:50.5%; background:linear-gradient(90deg,rgba(80,8,17,.22),rgba(45,5,10,.05)); pointer-events:none; transition:transform 1.05s cubic-bezier(.72,0,.18,1); }
.opening::before { left:0; transform-origin:left center; border-right:1px solid rgba(244,218,185,.25); }
.opening::after { right:0; transform-origin:right center; background:linear-gradient(270deg,rgba(80,8,17,.22),rgba(45,5,10,.05)); border-left:1px solid rgba(244,218,185,.25); }
.opening.is-open { opacity:0; visibility:hidden; pointer-events:none; }
.opening.is-opening::before { transform:translateX(-101%) rotateY(10deg); }
.opening.is-opening::after { transform:translateX(101%) rotateY(-10deg); }
.opening-photo { position:absolute; inset:0; background:url('./assets/hero.jpg') center/cover; transform:scale(1.04); animation:openingZoom 8s ease-out both; transition:transform 1.2s ease, filter 1.2s ease; }
.opening.is-opening .opening-photo { transform:scale(1.11); filter:saturate(.9) brightness(1.07); }
.opening-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,7,7,.25),rgba(38,5,9,.36) 46%,rgba(25,4,7,.76)); }
.opening-copy { position:relative; z-index:2; text-align:center; width:min(88vw,430px); padding:24px; text-shadow:0 2px 20px rgba(0,0,0,.28); transition:opacity .48s ease, transform .7s cubic-bezier(.55,0,.3,1), filter .6s ease; }
.opening.is-opening .opening-copy { opacity:0; transform:scale(.9) translateY(-12px); filter:blur(4px); }
.opening-kicker,.eyebrow,.date-kicker { font:500 .72rem/1.2 ui-sans-serif,system-ui,sans-serif; letter-spacing:.34em; }
.seal { width:56px; height:56px; display:grid; place-items:center; margin:22px auto 28px; border:1px solid rgba(255,255,255,.75); border-radius:50%; font-size:1.45rem; transition:transform .5s cubic-bezier(.2,1.5,.5,1); }
.opening.is-opening .seal { transform:scale(1.35) rotate(8deg); }
.opening h1 { margin:0; display:grid; gap:6px; font-size:clamp(2.6rem,12vw,4.6rem); line-height:1; letter-spacing:.12em; font-weight:500; }
.opening h1 i { font:italic 1rem/1 Georgia,serif; letter-spacing:.08em; color:#f0d4ad; }
.opening-date { margin:22px 0 12px; letter-spacing:.34em; font:500 .88rem/1 ui-sans-serif,system-ui,sans-serif; }
.opening-banquet { width:max-content; margin:0 auto 25px; padding:7px 18px 8px; border-top:1px solid rgba(240,212,173,.55); border-bottom:1px solid rgba(240,212,173,.55); color:#f3dfc4; font-size:.82rem; letter-spacing:.28em; }
.open-button { border:1px solid rgba(255,255,255,.72); color:#fff; background:rgba(74,11,19,.64); backdrop-filter:blur(12px); border-radius:999px; min-width:188px; padding:15px 26px; letter-spacing:.2em; cursor:pointer; box-shadow:inset 0 1px rgba(255,255,255,.2); }
.open-button:active { transform:scale(.98); }
.sound-note { margin:12px 0 0; font-size:.72rem; opacity:.72; letter-spacing:.1em; }
.music-button { position:fixed; z-index:50; top:max(18px,env(safe-area-inset-top)); right:18px; width:50px; height:50px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.48); border-radius:50%; color:#fff; background:rgba(30,15,15,.35); backdrop-filter:blur(10px); cursor:pointer; box-shadow:0 8px 28px rgba(0,0,0,.18); }
.music-disc { width:22px; height:22px; border:1px solid currentColor; border-radius:50%; position:relative; animation:spin 5s linear infinite; }
.music-disc::after { content:""; position:absolute; inset:7px; border-radius:50%; background:currentColor; }
.music-label { position:absolute; top:54px; font:500 10px/1 ui-sans-serif,system-ui,sans-serif; text-shadow:0 1px 6px #000; }
.music-button.paused .music-disc { animation-play-state:paused; }
.hero,.closing { position:relative; min-height:100dvh; overflow:hidden; color:#fff; }
.hero>img,.closing>img { position:absolute; inset:0; height:100%; object-fit:cover; object-position:49% center; }
.hero-vignette,.closing-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(22,7,10,.1),rgba(22,7,10,.08) 35%,rgba(31,5,9,.72)); }
.hero-copy { position:absolute; inset:auto 0 9vh; text-align:center; padding:0 22px; }
.eyebrow { margin:0 0 18px; color:#f4dbc0; }
.hero h2 { margin:0; font-weight:500; font-size:clamp(2.4rem,10vw,4.8rem); letter-spacing:.18em; }
.names { margin:17px 0 20px; font-size:1.08rem; letter-spacing:.18em; }.names span { margin:0 .45em; color:#efd4aa; font-style:italic; }
.date-line { display:flex; align-items:baseline; justify-content:center; gap:9px; }.date-line b { font:300 clamp(2.3rem,11vw,4rem)/1 ui-sans-serif,system-ui,sans-serif; }.date-line em { font-style:normal; font-size:.88rem; opacity:.9; }
.year { margin:14px 0 0; font-size:.8rem; letter-spacing:.18em; opacity:.82; }
.scroll-cue { position:absolute; left:24px; bottom:22px; display:flex; align-items:center; gap:9px; font:500 10px/1 ui-sans-serif,system-ui,sans-serif; letter-spacing:.15em; opacity:.76; }.scroll-cue span { width:36px; height:1px; background:#fff; position:relative; overflow:hidden; }.scroll-cue span::after { content:""; position:absolute; inset:0; background:#cfae77; animation:sweep 2s infinite; }
.section-pad { padding:92px 24px; }
.letter { text-align:center; min-height:82vh; display:flex; flex-direction:column; justify-content:center; background:radial-gradient(circle at 10% 10%,rgba(94,16,25,.06),transparent 35%),var(--paper); }
.letter-mark { width:52px; height:52px; display:grid; place-items:center; margin:0 auto 28px; border:1px solid var(--red); color:var(--red); border-radius:50%; font-size:1.4rem; }
.letter-lead { margin:0 0 24px; color:var(--red); letter-spacing:.28em; font-size:.86rem; }
.letter h2,.date-card h2,.gallery h2 { margin:0; color:var(--red); font-weight:500; font-size:clamp(2rem,8.5vw,3.6rem); line-height:1.45; letter-spacing:.08em; }
.letter-body { margin:26px auto 0; max-width:31em; line-height:2.15; font-size:.95rem; color:#51423f; }
.signature { margin:46px auto 0; display:flex; align-items:center; justify-content:center; gap:14px; color:var(--red); font-size:clamp(1rem,4.4vw,1.28rem); font-weight:600; letter-spacing:.13em; text-shadow:0 1px rgba(255,255,255,.75); }.signature span { white-space:nowrap; }.signature i { width:42px; height:1px; background:var(--gold); box-shadow:0 1px rgba(255,255,255,.6); }
.portrait-story { padding:0 0 92px; background:var(--paper); }.portrait-wrap { margin:0 22px; overflow:hidden; border-radius:999px 999px 20px 20px; box-shadow:0 24px 60px rgba(74,42,37,.12); }.portrait-wrap img { aspect-ratio:3/4; object-fit:cover; object-position:center 28%; }.portrait-caption { padding:34px 30px 0; text-align:center; }.portrait-caption p { margin:0 0 16px; font:500 .67rem/1.2 ui-sans-serif,system-ui,sans-serif; letter-spacing:.28em; color:#94724e; }.portrait-caption h2 { margin:0; font-size:1.75rem; line-height:1.55; font-weight:500; color:#3b2926; letter-spacing:.08em; }
.date-card { color:#efe3d5; background:var(--red); text-align:center; }.date-kicker { color:#ddb986; margin:0 0 18px; }.date-card h2 { color:#fff3e2; font-size:clamp(1.8rem,7vw,3rem); }.calendar { max-width:480px; margin:46px auto 34px; padding:26px 18px 24px; border:1px solid rgba(238,210,170,.35); }.calendar-head { display:flex; justify-content:space-between; align-items:end; padding:0 8px 18px; border-bottom:1px solid rgba(238,210,170,.25); }.calendar-head span { font:300 2.4rem/1 ui-sans-serif,system-ui,sans-serif; }.calendar-head strong { font:500 .72rem/1 ui-sans-serif,system-ui,sans-serif; letter-spacing:.24em; }.week,.days { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }.week { padding:18px 0 11px; color:#d9bd96; font-size:.72rem; }.days b,.days span { min-height:34px; display:grid; place-items:center; font:400 .82rem/1 ui-sans-serif,system-ui,sans-serif; }.days .chosen { position:relative; z-index:0; color:var(--red); font-weight:700; }.days .chosen::before { content:""; position:absolute; width:33px; height:33px; background:#f0d7b4; border-radius:50%; z-index:-1; }.days .chosen i { position:absolute; top:-11px; right:0; color:#f0d7b4; font-size:.65rem; font-style:normal; }.countdown { display:grid; grid-template-columns:repeat(4,1fr); max-width:480px; margin:0 auto; }.countdown span { display:grid; gap:8px; font-size:.68rem; color:#d9bd96; border-right:1px solid rgba(238,210,170,.2); }.countdown span:last-child { border:0; }.countdown strong { color:#fff4e5; font:300 1.8rem/1 ui-sans-serif,system-ui,sans-serif; }
.banquet-note { display:inline-grid; gap:9px; margin:30px auto 0; padding:13px 32px 14px; border-top:1px solid rgba(238,210,170,.34); border-bottom:1px solid rgba(238,210,170,.34); }.banquet-note span { color:#d9bd96; font-size:.75rem; letter-spacing:.28em; }.banquet-note strong { color:#fff3e2; font-size:1.25rem; font-weight:500; letter-spacing:.24em; }.banquet-note + .calendar { margin-top:34px; }
.photo-break { position:relative; min-height:78vh; overflow:hidden; }.photo-break img { position:absolute; inset:0; height:100%; object-fit:cover; object-position:center; }.photo-break::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(22,7,8,.6)); }.photo-words { position:absolute; z-index:1; left:28px; bottom:46px; color:#fff; display:grid; gap:9px; }.photo-words span { font-size:.8rem; letter-spacing:.32em; }.photo-words strong { font-weight:500; font-size:2.1rem; letter-spacing:.14em; }
.gallery { background:#e8e4df; }.gallery-copy { padding:0 0 42px; }.gallery-copy p { margin:20px 0 0; color:#61514e; line-height:1.8; }.gallery figure { margin:0; }.gallery-main { position:relative; margin-left:8vw!important; }.gallery-main img { aspect-ratio:3/4; object-fit:cover; object-position:center top; }.gallery-main figcaption { position:absolute; left:-12px; bottom:26px; writing-mode:vertical-rl; transform:translateX(-100%); color:#7a5d55; font:500 .65rem/1 ui-sans-serif,system-ui,sans-serif; letter-spacing:.2em; }.gallery-wide { margin-top:26px!important; }.gallery-wide img { aspect-ratio:4/3; object-fit:cover; }
.closing { min-height:92dvh; }.closing>img { object-position:49% center; filter:saturate(.88); }.closing-overlay { background:linear-gradient(180deg,rgba(20,3,6,.25),rgba(20,3,6,.73)); }.closing-copy { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:30px; }.closing-copy>p { font:500 .66rem/1.3 ui-sans-serif,system-ui,sans-serif; letter-spacing:.28em; color:#ead0a9; }.closing h2 { margin:22px 0 34px; font-weight:500; font-size:clamp(2.3rem,10vw,4.4rem); line-height:1.5; letter-spacing:.12em; }.closing-names { font-size:1.2rem; letter-spacing:.16em; }.closing-names i { margin:0 10px; color:#e9cca3; }.closing time { margin-top:14px; font:400 .82rem/1 ui-sans-serif,system-ui,sans-serif; letter-spacing:.3em; }
.reveal { opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }.reveal.visible { opacity:1; transform:none; }
@keyframes spin { to { transform:rotate(1turn); } } @keyframes sweep { from { transform:translateX(-100%); } to { transform:translateX(100%); } } @keyframes openingZoom { from { transform:scale(1.08); } to { transform:scale(1.02); } }
@media (min-width:760px) { .portrait-story { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr); align-items:center; padding:90px max(5vw,34px); }.portrait-wrap { margin:0; max-height:86vh; }.portrait-caption { text-align:left; padding:0 0 0 8vw; }.gallery { display:grid; grid-template-columns:.75fr 1.25fr; gap:28px; align-items:end; padding-inline:max(6vw,40px); }.gallery-copy { align-self:start; padding-top:12vh; }.gallery-wide { grid-column:1/-1; }.gallery-wide img { aspect-ratio:16/7; }.photo-break { min-height:100dvh; }.photo-words { left:9vw; bottom:12vh; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }