:root { --ink:#18232e; --navy:#0d1b26; --cream:#f8f3ec; --paper:#fffaf3; --rose:#b85c65; --blush:#e8c7c1; --gold:#c8a66b; --line:rgba(24,35,46,.15); }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial,Helvetica,sans-serif; overflow-x:hidden; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; }
img { display:block; max-width:100%; }

.topbar { position:absolute; z-index:20; top:0; left:0; width:100%; display:flex; justify-content:space-between; align-items:center; padding:26px clamp(24px,5vw,76px); color:white; }
.mark { display:inline-flex; align-items:center; gap:3px; color:inherit; font-family:Georgia,serif; font-size:30px; font-style:italic; text-decoration:none; }
.mark span { color:var(--blush); font-size:20px; }
.topbar nav { display:flex; gap:clamp(18px,3.2vw,46px); }
.topbar nav a { color:white; font-size:11px; letter-spacing:.18em; text-decoration:none; text-transform:uppercase; transition:color .25s; }
.topbar nav a:hover,.topbar nav a:focus-visible { color:var(--blush); }

.hero { position:relative; min-height:100svh; background:var(--navy); color:white; overflow:hidden; }
.hero-image,.hero-shade { position:absolute; inset:0; width:100%; height:100%; }
.hero-image { object-fit:cover; object-position:66% center; animation:heroIn 1.8s cubic-bezier(.2,.75,.2,1) both; }
.hero-shade { background:linear-gradient(90deg,rgba(7,16,24,.88),rgba(7,16,24,.64) 35%,rgba(7,16,24,.08) 72%),linear-gradient(0deg,rgba(7,16,24,.72),transparent 40%); }
.hero-copy { position:relative; z-index:2; min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; width:min(760px,90vw); padding:110px clamp(24px,7vw,110px) 100px; animation:copyIn 1.1s .25s ease both; }
.eyebrow,.kicker { margin:0 0 20px; color:var(--gold); font-size:11px; font-weight:700; letter-spacing:.25em; text-transform:uppercase; }
.hero h1 { margin:0; font-family:Georgia,serif; font-size:clamp(90px,15vw,210px); font-style:italic; font-weight:400; letter-spacing:-.07em; line-height:.76; text-shadow:0 10px 50px rgba(0,0,0,.24); }
.hero-line { margin:40px 0 30px 8px; color:rgba(255,255,255,.86); font-family:Georgia,serif; font-size:clamp(18px,2vw,26px); line-height:1.45; }
.hero-cta { display:inline-flex; align-items:center; gap:20px; margin-left:8px; border-bottom:1px solid rgba(255,255,255,.55); padding:11px 0; color:white; font-size:11px; font-weight:700; letter-spacing:.18em; text-decoration:none; text-transform:uppercase; }
.hero-cta span { transition:transform .25s; } .hero-cta:hover span { transform:translateY(4px); }
.hero-date { position:absolute; z-index:2; right:clamp(24px,5vw,76px); bottom:34px; margin:0; color:rgba(255,255,255,.62); font-size:10px; letter-spacing:.2em; text-transform:uppercase; writing-mode:vertical-rl; }

.section { padding:clamp(90px,12vw,180px) clamp(24px,7vw,110px); }
.intro { position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(50px,9vw,140px); align-items:center; max-width:1600px; margin:0 auto; }
.ghost-number { position:absolute; left:1.5vw; top:85px; color:rgba(24,35,46,.09); font-family:Georgia,serif; font-size:clamp(80px,12vw,180px); line-height:1; }
.intro-copy { max-width:640px; }
.intro h2,.timeline h2,.family h2,.gallery-head h2,.letter-card h2 { margin:0; font-family:Georgia,serif; font-size:clamp(43px,5.5vw,82px); font-weight:400; letter-spacing:-.045em; line-height:1.04; }
.intro-copy>p:last-child,.family-copy>p,.gallery-head>p { margin:32px 0 0; color:#56616a; font-family:Georgia,serif; font-size:18px; line-height:1.85; }
.intro-portrait { margin:0; }
.intro-portrait img { width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 35%; box-shadow:25px 30px 0 #e8dfd6; }
.intro-portrait figcaption { display:flex; justify-content:space-between; padding:18px 4px 0; color:#7b7168; font-size:10px; letter-spacing:.16em; text-transform:uppercase; }
.intro blockquote { grid-column:1/-1; width:min(900px,90%); margin:70px auto 0; padding:46px 0 0; border-top:1px solid var(--line); color:var(--rose); font-family:Georgia,serif; font-size:clamp(26px,3.1vw,46px); font-style:italic; line-height:1.4; text-align:center; }

.sea-break { position:relative; height:82vh; overflow:hidden; }
.sea-break>img { width:100%; height:100%; object-fit:cover; object-position:55% center; }
.sea-break::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(6,17,25,.7),transparent 58%); }
.sea-break>div { position:absolute; z-index:2; left:50%; bottom:11%; width:min(760px,86vw); transform:translateX(-50%); color:white; text-align:center; }
.sea-break span { color:var(--gold); font-size:26px; }
.sea-break p { margin:12px 0 0; font-family:Georgia,serif; font-size:clamp(28px,4vw,60px); font-style:italic; line-height:1.16; }

.timeline { background:var(--navy); color:white; }
.timeline-head { max-width:1400px; margin:0 auto 80px; } .timeline-head .kicker { color:var(--blush); }
.year-list { max-width:1400px; margin:0 auto; }
.year-card { display:grid; grid-template-columns:120px 1.15fr .85fr; gap:clamp(24px,5vw,72px); align-items:center; padding:55px 0; border-top:1px solid rgba(255,255,255,.13); }
.year-card:last-child { border-bottom:1px solid rgba(255,255,255,.13); }
.year-marker { align-self:stretch; display:flex; flex-direction:column; justify-content:space-between; color:var(--gold); font-family:Georgia,serif; font-size:18px; }
.year-marker i { display:block; width:1px; height:48%; margin-left:17px; background:linear-gradient(var(--gold),transparent); }
.year-image { overflow:hidden; }
.year-image img { width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.2,1); }
.year-card:hover .year-image img { transform:scale(1.035); }
.year-copy>p { margin:0 0 14px; color:rgba(255,255,255,.44); font-size:10px; letter-spacing:.2em; text-transform:uppercase; }
.year-copy h3 { margin:0 0 18px; font-family:Georgia,serif; font-size:clamp(30px,3.1vw,52px); font-weight:400; }
.year-copy span { color:rgba(255,255,255,.65); font-family:Georgia,serif; font-size:16px; line-height:1.65; }

.family { display:grid; grid-template-columns:1fr 1fr; gap:clamp(55px,9vw,140px); align-items:center; max-width:1600px; margin:0 auto; }
.family-photo { position:relative; }
.family-photo::before { content:""; position:absolute; z-index:-1; top:-28px; left:-28px; width:55%; height:50%; border:1px solid var(--gold); }
.family-photo img { width:100%; aspect-ratio:4/5; object-fit:cover; object-position:52% center; }
.family-detail { display:grid; grid-template-columns:140px 1fr; gap:25px; align-items:center; margin-top:45px; padding-top:30px; border-top:1px solid var(--line); }
.family-detail img { width:140px; height:95px; object-fit:cover; object-position:34% center; }
.family-detail span { color:#7d6f64; font-family:Georgia,serif; font-size:16px; font-style:italic; line-height:1.5; }

.gallery-section { max-width:none; background:#eee5dc; }
.gallery-head { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; max-width:1500px; margin:0 auto 65px; }
.gallery-head h2 { max-width:820px; } .gallery-head>p { max-width:380px; margin:0; }
.gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:270px; gap:12px; max-width:1500px; margin:0 auto; }
.gallery-item { position:relative; border:0; padding:0; background:#d9d1c9; cursor:zoom-in; overflow:hidden; }
.gallery-item.tall { grid-row:span 2; } .gallery-item.wide { grid-column:span 2; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .75s cubic-bezier(.2,.7,.2,1),filter .4s; }
.gallery-item::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(9,19,27,.72),transparent 55%); opacity:.7; transition:opacity .3s; }
.gallery-item span { position:absolute; z-index:2; left:20px; bottom:18px; color:white; font-family:Georgia,serif; font-size:17px; font-style:italic; }
.gallery-item:hover img,.gallery-item:focus-visible img { transform:scale(1.045); filter:saturate(1.08); }
.gallery-item:hover::after { opacity:1; } .gallery-item:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }

.letter-section { position:relative; min-height:82vh; display:grid; place-items:center; padding:70px 24px; overflow:hidden; }
.letter-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.52) saturate(.8); transform:scale(1.03); }
.letter-section::after { content:""; position:absolute; inset:0; background:radial-gradient(circle,transparent,rgba(4,14,16,.62)); }
.letter-card { position:relative; z-index:2; width:min(760px,92vw); padding:clamp(45px,7vw,90px); background:rgba(255,250,243,.95); box-shadow:0 25px 80px rgba(0,0,0,.24); text-align:center; }
.letter-card h2 { font-size:clamp(40px,5vw,72px); }
.letter-card>p:not(.kicker) { margin:25px 0 35px; color:#75695f; font-family:Georgia,serif; font-size:17px; font-style:italic; }
.letter-card button { display:inline-flex; align-items:center; gap:20px; border:1px solid var(--rose); padding:15px 22px; background:transparent; color:var(--rose); cursor:pointer; text-transform:uppercase; letter-spacing:.14em; font-size:11px; transition:background .25s,color .25s; }
.letter-card button i { font-family:Georgia,serif; font-size:18px; font-style:normal; }
.letter-card button:hover,.letter-card button:focus-visible { background:var(--rose); color:white; }

footer { display:flex; justify-content:space-between; align-items:center; gap:30px; padding:38px clamp(24px,5vw,76px); background:#07131c; color:rgba(255,255,255,.6); }
footer p { margin:0; font-family:Georgia,serif; font-size:14px; font-style:italic; }
footer>a:last-child { color:inherit; font-size:10px; letter-spacing:.16em; text-decoration:none; text-transform:uppercase; }
footer .mark { color:white; }

.modal-backdrop { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:22px; background:rgba(3,9,14,.86); backdrop-filter:blur(12px); animation:fadeIn .25s ease both; }
.letter-modal { position:relative; width:min(760px,95vw); max-height:90vh; overflow-y:auto; padding:clamp(42px,7vw,85px); background:var(--paper); box-shadow:0 25px 100px rgba(0,0,0,.5); animation:modalIn .45s cubic-bezier(.2,.75,.2,1) both; }
.letter-modal::before { content:""; position:absolute; inset:14px; border:1px solid rgba(184,92,101,.22); pointer-events:none; }
.modal-close { position:absolute; z-index:3; top:16px; right:18px; width:40px; height:40px; border:0; background:transparent; color:#786f68; cursor:pointer; font-family:Georgia,serif; font-size:32px; line-height:1; }
.letter-to,.letter-sign { color:var(--rose); font-family:Georgia,serif; font-size:20px; font-style:italic; }
.letter-modal h2 { margin:16px 0 30px; font-family:Georgia,serif; font-size:clamp(32px,4.5vw,54px); font-weight:400; letter-spacing:-.035em; line-height:1.08; }
.letter-body { color:#564d46; font-family:Georgia,serif; font-size:17px; line-height:1.75; }
.letter-sign { margin:34px 0 0; text-align:right; }
.lightbox figure { position:relative; margin:0; max-width:min(1200px,94vw); max-height:92vh; }
.lightbox img { max-width:100%; max-height:84vh; object-fit:contain; box-shadow:0 25px 80px rgba(0,0,0,.45); }
.lightbox figcaption { padding-top:14px; color:white; font-family:Georgia,serif; font-size:17px; font-style:italic; text-align:center; }
.lightbox-close { top:-45px; right:0; color:white; }

@keyframes heroIn { from { transform:scale(1.08); filter:blur(4px); } to { transform:scale(1); filter:blur(0); } }
@keyframes copyIn { from { opacity:0; transform:translateY(25px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } } @keyframes modalIn { from { opacity:0; transform:translateY(18px) scale(.98); } }

@media (max-width:900px) {
  .intro,.family { grid-template-columns:1fr; }
  .intro-copy { max-width:none; } .intro-portrait { width:86%; margin-left:auto; }
  .year-card { grid-template-columns:80px 1fr; } .year-copy { grid-column:2; } .year-marker { grid-row:span 2; }
  .gallery-head { align-items:flex-start; flex-direction:column; } .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .family-photo { width:86%; }
}
@media (max-width:620px) {
  .topbar { padding:20px; } .topbar nav a:nth-child(2) { display:none; } .topbar nav { gap:16px; }
  .hero-image { object-position:70% center; } .hero-shade { background:linear-gradient(0deg,rgba(7,16,24,.9),rgba(7,16,24,.22) 78%),linear-gradient(90deg,rgba(7,16,24,.58),transparent); }
  .hero-copy { justify-content:flex-end; padding:120px 24px 110px; } .hero h1 { font-size:clamp(82px,30vw,130px); } .hero-line { margin-top:28px; font-size:19px; } .hero-date { right:18px; bottom:25px; }
  .ghost-number { top:45px; } .intro-portrait,.family-photo { width:100%; } .intro blockquote { width:100%; margin-top:30px; }
  .sea-break { height:70vh; } .sea-break>img { object-position:58% center; }
  .year-card { grid-template-columns:1fr; gap:20px; padding:44px 0; } .year-marker { grid-row:auto; flex-direction:row; align-items:center; } .year-marker i { width:65%; height:1px; margin:0; background:linear-gradient(90deg,var(--gold),transparent); } .year-copy { grid-column:1; }
  .gallery-grid { grid-auto-rows:220px; gap:8px; } .gallery-item.wide { grid-column:span 2; } .gallery-item.tall { grid-row:span 1; } .gallery-item span { left:12px; bottom:12px; font-size:14px; }
  .family-detail { grid-template-columns:100px 1fr; } .family-detail img { width:100px; height:80px; }
  footer { flex-direction:column; text-align:center; } .letter-modal { padding:54px 34px 42px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }