@import "tailwindcss";

:root { --ink:#16130f; --paper:#eee7da; --gold:#c8a86b; --wine:#641a1f; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:#fff; font-family:"Songti SC","STSong","Noto Serif SC",serif; }
.hero { height:100svh; min-height:720px; position:relative; overflow:hidden; display:flex; align-items:center; }
.hero-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; filter:saturate(.72) contrast(1.06); transform:scale(1.02); animation:drift 14s ease-out both; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,7,6,.94) 0%,rgba(8,7,6,.68) 38%,rgba(8,7,6,.12) 70%),linear-gradient(0deg,rgba(8,7,6,.55),transparent 45%); }
.eyebrow { position:absolute; top:42px; left:5vw; font:500 11px/1.3 Arial,sans-serif; letter-spacing:.28em; color:#d6bd8b; }
.hero-copy { position:relative; z-index:2; margin-left:9vw; width:720px; }
.for { color:#d5c6aa; letter-spacing:.14em; font-size:14px; margin:0 0 25px; }
h1 { font-weight:400; font-size:clamp(62px,8vw,124px); line-height:1.06; letter-spacing:.03em; margin:0; text-shadow:0 4px 28px rgba(0,0,0,.4); }
.intro { color:rgba(255,255,255,.76); font-size:16px; line-height:2.1; letter-spacing:.08em; margin:34px 0 30px; }
button { border:1px solid rgba(216,190,140,.65); color:#f5ead3; background:rgba(20,17,12,.25); padding:15px 24px; letter-spacing:.12em; font-family:inherit; cursor:pointer; backdrop-filter:blur(8px); transition:.35s ease; }
button:hover { background:#c8a86b; color:#18130b; transform:translateY(-2px); }
button span { margin-left:24px; }
.film-mark { position:absolute; z-index:2; right:5vw; bottom:34px; font:10px Arial,sans-serif; letter-spacing:.24em; color:rgba(255,255,255,.65); }
.chapter { position:relative; }
.opening { min-height:110vh; background:var(--paper); color:var(--ink); display:grid; grid-template-columns:1fr .82fr; gap:8vw; align-items:center; padding:10vw; overflow:hidden; }
.opening:before { content:""; position:absolute; width:42vw; height:42vw; border:1px solid rgba(146,113,59,.16); border-radius:50%; left:-20vw; top:12%; }
.portrait { margin:0; position:relative; }
.portrait img { display:block; width:100%; height:68vh; object-fit:cover; object-position:center 38%; filter:saturate(.72); }
.portrait:after { content:""; position:absolute; inset:12px -12px -12px 12px; border:1px solid rgba(144,105,51,.5); z-index:0; }
.portrait img,.portrait figcaption{position:relative;z-index:1}.portrait figcaption{font-size:12px;line-height:1.8;letter-spacing:.1em;color:#6d6251;margin-top:24px}
.chapter-no { color:#9a7740; font-size:12px; letter-spacing:.2em; }
h2 { font-weight:400; font-size:clamp(40px,6vw,88px); line-height:1.25; margin:25px 0; }
.body-copy { max-width:620px; font-size:16px; line-height:2.25; letter-spacing:.08em; color:#635b50; }
.interlude { height:72vh; min-height:580px; position:relative; display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 45%,#31271d,#100e0c 68%);}
.interlude .giant-word{position:absolute;font-size:min(68vw,900px);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(201,170,108,.13);font-weight:300}
.interlude p{position:relative;text-align:center;font-size:clamp(22px,3vw,42px);line-height:1.8;letter-spacing:.12em;color:#f0e4cc}
.tenderness { background:#17130f; padding:12vw 7vw; }
.section-heading{max-width:1000px;margin:0 auto 7vw}.section-heading h2{font-size:clamp(40px,5.5vw,78px)}
.cinema-grid{display:grid;grid-template-columns:1.35fr .75fr;grid-template-rows:48vh 48vh;gap:18px;max-width:1500px;margin:auto}.shot{margin:0;position:relative;overflow:hidden}.shot.wide{grid-row:span 1}.shot.tall{grid-row:span 2}.shot.family{grid-row:2}.shot img{width:100%;height:100%;object-fit:cover;filter:saturate(.76) contrast(1.03);transition:1.2s cubic-bezier(.2,.7,.2,1)}.shot:hover img{transform:scale(1.035)}.shot:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 60%,rgba(8,6,4,.8))}.shot span{position:absolute;z-index:2;left:28px;right:22px;bottom:25px;font-size:13px;letter-spacing:.1em;line-height:1.7;color:#f1e7d5}
.generations{min-height:110vh;background:#d8d1c4;color:var(--ink);display:grid;grid-template-columns:1.08fr .92fr;align-items:center}.generation-photo{height:100%;min-height:110vh;overflow:hidden}.generation-photo img{width:100%;height:100%;object-fit:cover;object-position:center bottom;filter:saturate(.65) sepia(.08)}.generation-copy{padding:8vw}.generation-copy h2{font-size:clamp(42px,5vw,72px)}blockquote{font-size:20px;line-height:1.8;margin:55px 0 0;padding-left:25px;border-left:1px solid #a67f45;color:#775e39}
.together{background:#efe9dd;color:var(--ink);padding:12vw 7vw;overflow:hidden}.center{text-align:center}.couple-stage{max-width:1100px;margin:auto;display:grid;grid-template-columns:1fr 280px;align-items:end}.couple-stage img{width:100%;max-height:850px;object-fit:contain}.couple-note{font-size:18px;line-height:2;color:#806b4a;padding:0 0 8vw 35px}.filmstrip{display:grid;grid-template-columns:.9fr 1fr .7fr;gap:12px;margin:10vw auto 0;max-width:1400px;align-items:center}.filmstrip img{width:100%;height:44vw;max-height:650px;object-fit:cover;filter:saturate(.65)}.filmstrip img:nth-child(2){height:54vw;max-height:780px}
.homecoming{height:110vh;min-height:800px;overflow:hidden;display:flex;align-items:flex-end}.homecoming-photo,.homecoming-shade{position:absolute;inset:0;width:100%;height:100%}.homecoming-photo{object-fit:cover;object-position:center 58%;filter:saturate(.55) contrast(1.05)}.homecoming-shade{background:linear-gradient(0deg,rgba(10,8,6,.94),rgba(10,8,6,.05) 62%)}.homecoming-copy{position:relative;z-index:2;padding:0 8vw 9vh;max-width:1050px}.homecoming-copy h2{font-size:clamp(46px,6.3vw,92px)}.homecoming-copy>p:last-child{font-size:16px;line-height:2;color:#d9cfbf;letter-spacing:.08em}
.letter{min-height:115vh;background:#f0eadf;color:#1f1b16;padding:13vw 6vw;display:grid;place-items:center}.letter-inner{width:min(850px,100%)}.letter h2{font-size:clamp(38px,5vw,64px);margin-bottom:50px}.letter-text{font-size:18px;line-height:2.35;letter-spacing:.065em}.letter-text p{margin:0 0 26px}.signature{text-align:right;margin-top:70px;font-size:26px;line-height:1.8;font-family:"Kaiti SC","STKaiti",serif}.signature span{font:11px Arial,sans-serif;letter-spacing:.2em;color:#927446}footer{background:#120f0c;padding:80px 30px;text-align:center}footer p{font:11px Arial,sans-serif;letter-spacing:.28em;color:#b69761}footer span{font-size:14px;letter-spacing:.14em;color:#8d8579}
.reveal{opacity:0;transform:translateY(36px);transition:opacity 1.15s ease,transform 1.15s cubic-bezier(.2,.7,.2,1)}.reveal.visible{opacity:1;transform:none}.entered .hero-copy{animation:fadeAway .7s ease both}
@keyframes drift { from{transform:scale(1.08)} to{transform:scale(1.02)} }
@keyframes fadeAway{to{opacity:.4;transform:translateY(-8px)}}
@media(max-width:700px){.hero{min-height:660px}.hero-photo{object-position:58% center}.hero-shade{background:linear-gradient(0deg,rgba(7,6,5,.94),rgba(7,6,5,.14) 72%)}.hero-copy{align-self:flex-end;margin:0 24px 80px;width:auto}.for{font-size:11px}h1{font-size:58px}.intro{font-size:13px;line-height:1.8}.eyebrow{left:24px;top:28px}.film-mark{right:20px;bottom:25px}.opening{grid-template-columns:1fr;padding:100px 24px}.portrait img{height:62vh}.interlude{height:65vh}.interlude p{font-size:21px;padding:25px}.tenderness{padding:100px 16px}.section-heading{padding:0 12px;margin-bottom:60px}.cinema-grid{display:flex;overflow:auto;scroll-snap-type:x mandatory;padding-bottom:14px}.shot{min-width:84vw;height:62vh!important;scroll-snap-align:center}.generations{display:flex;flex-direction:column}.generation-photo{min-height:0;height:72vh;width:100%}.generation-copy{padding:90px 25px}.together{padding:100px 18px}.couple-stage{display:block}.couple-note{padding:30px 10px 20px}.filmstrip{gap:6px}.filmstrip img{height:56vw}.filmstrip img:nth-child(2){height:70vw}.homecoming{height:92vh;min-height:700px}.homecoming-photo{object-position:center bottom}.homecoming-copy{padding:0 24px 65px}.homecoming-copy h2{font-size:42px}.letter{padding:110px 25px}.letter-text{font-size:16px;line-height:2.2}.signature{font-size:22px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}