:root { --ink:#352622; --muted:#765f58; --paper:#fffaf5; --blush:#f2ddd5; --rose:#aa6d62; --wine:#6d3937; --line:rgba(88,50,44,.16); --serif:"Playfair Display", Georgia, serif; --sans:"DM Sans", Arial, sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--paper); }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:16px; line-height:1.65; }
button { font:inherit; }
.section, .panel { padding-inline:clamp(1.4rem, 6vw, 7rem); }
.panel { min-height:100svh; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; position:relative; overflow:hidden; }
.hero { background:linear-gradient(135deg,#3b2527 0%,#72403b 55%,#bd8070 135%); color:#fff9f4; isolation:isolate; }
.hero::before { content:""; width:54vmax; height:54vmax; border:1px solid rgba(255,255,255,.2); border-radius:50%; position:absolute; right:-22vmax; top:-13vmax; z-index:-1; }
.hero::after { content:""; width:35vmax; height:35vmax; border-radius:50%; position:absolute; left:-17vmax; bottom:-17vmax; background:rgba(249,216,194,.11); filter:blur(4px); z-index:-1; }
.hero__glow { position:absolute; width:12rem; height:12rem; right:15%; bottom:16%; background:#f6cbb4; opacity:.18; filter:blur(55px); }
.eyebrow { text-transform:uppercase; letter-spacing:.17em; font-size:.68rem; font-weight:600; margin:0 0 1.2rem; }
.hero .eyebrow { color:#fedbcc; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:var(--serif); font-weight:500; line-height:1.06; letter-spacing:-.035em; }
h1 { max-width:900px; margin-bottom:1.4rem; font-size:clamp(3.3rem,11vw,8.5rem); }
h1 em,h2 em { color:inherit; font-weight:500; }
.hero__intro { max-width:32rem; margin:0; color:rgba(255,249,244,.86); font-size:clamp(1rem,2vw,1.15rem); }
.button { display:inline-flex; gap:.8rem; align-items:center; padding:.85rem 1.15rem; margin-top:2.5rem; background:#fff7f1; color:#56302f; border-radius:999px; text-decoration:none; font-weight:600; font-size:.92rem; transition:transform .25s ease, background .25s ease; }
.button:hover { transform:translateY(-3px); background:#fff; }
.hero__signature { position:absolute; bottom:2rem; margin:0; font-family:var(--serif); font-style:italic; color:rgba(255,249,244,.74); }
.section { padding-top:clamp(5.5rem,13vw,10rem); padding-bottom:clamp(5.5rem,13vw,10rem); }
.section__header { max-width:42rem; }
.section .eyebrow, .closing .eyebrow { color:var(--rose); }
h2 { margin-bottom:0; font-size:clamp(2.6rem,7vw,5.4rem); }
h2 em { color:var(--rose); }
.section__hint { color:var(--muted); margin:1.5rem 0 0; }
.letter { background:#f7ece5; }
.letter__paper { max-width:48rem; margin-top:3.5rem; padding:clamp(1.7rem,5vw,4rem); background:var(--paper); box-shadow:0 15px 40px rgba(69,39,33,.07); border:1px solid rgba(120,80,69,.08); font-family:var(--serif); font-size:clamp(1.15rem,2.3vw,1.48rem); line-height:1.7; }
.letter__paper p:last-child { margin-bottom:0; }
.letter__greeting { font-style:italic; color:var(--wine); }
.timeline { list-style:none; padding:0; margin:4rem 0 0; position:relative; }
.timeline::before { content:""; position:absolute; top:.8rem; bottom:.8rem; left:.45rem; width:1px; background:var(--line); }
.timeline__item { display:grid; grid-template-columns:1.5rem 1fr; gap:.6rem 1rem; position:relative; padding-bottom:3.8rem; }
.timeline__item:last-child { padding-bottom:0; }
.timeline__marker { width:.9rem; height:.9rem; border-radius:50%; background:var(--rose); border:4px solid var(--paper); margin-top:.25rem; z-index:1; }
.timeline__copy { grid-column:2; max-width:35rem; }
.timeline__date { color:var(--rose); text-transform:uppercase; letter-spacing:.12em; font-size:.7rem; font-weight:600; margin-bottom:.5rem; }
.timeline h3 { font-size:clamp(1.7rem,4vw,2.7rem); margin-bottom:.75rem; }
.timeline__copy > p:last-child { color:var(--muted); margin-bottom:0; }
.timeline__image { grid-column:2; width:100%; max-width:28rem; max-height:23rem; margin-top:.7rem; object-fit:cover; background:var(--blush); }
.loves { background:#412b2b; color:#fffaf5; }
.loves .eyebrow { color:#eeb8a5; }.loves h2 em { color:#eeb8a5; }.loves .section__hint { color:#ddc3b8; }
.notes { display:grid; grid-template-columns:1fr; gap:.8rem; margin-top:3rem; max-width:66rem; }
.note { min-height:11rem; padding:1.3rem; border:1px solid rgba(255,245,237,.26); background:transparent; color:inherit; text-align:left; cursor:pointer; position:relative; overflow:hidden; transition:background .35s ease, border-color .35s ease; }
.note:hover { border-color:rgba(255,245,237,.52); }.note > span { display:flex; height:100%; flex-direction:column; justify-content:space-between; gap:.8rem; }.note strong { font-family:var(--serif); font-size:1.7rem; font-weight:500; line-height:1.1; }.note i { color:#eeb8a5; font-size:.75rem; font-style:normal; text-transform:uppercase; letter-spacing:.13em; }.note__back { position:absolute; inset:0; padding:1.3rem; opacity:0; transform:translateY(8px); transition:opacity .28s ease,transform .28s ease; pointer-events:none; }.note.is-open { background:#6e4440; border-color:#6e4440; }.note.is-open .note__front { opacity:0; }.note.is-open .note__back { opacity:1; transform:none; pointer-events:auto; }
.gallery { background:#f7ece5; }.gallery__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; margin-top:3rem; }.gallery__item { border:0; padding:0; background:#d9b6aa; text-align:left; overflow:hidden; cursor:pointer; position:relative; min-height:13rem; }.gallery__item img { width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0; transition:transform .5s ease; }.gallery__item span { position:absolute; left:.8rem; right:.8rem; bottom:.7rem; color:#fff; font-family:var(--serif); font-size:1.03rem; line-height:1.2; text-shadow:0 1px 8px rgba(0,0,0,.35); opacity:0; transform:translateY(5px); transition:opacity .3s ease, transform .3s ease; }.gallery__item::after { content:""; position:absolute; inset:40% 0 0; background:linear-gradient(transparent,rgba(36,20,18,.55)); opacity:0; transition:opacity .3s ease; }.gallery__item:hover img,.gallery__item:focus-visible img { transform:scale(1.045); }.gallery__item:hover span,.gallery__item:focus-visible span,.gallery__item:hover::after,.gallery__item:focus-visible::after { opacity:1; transform:none; }.gallery__item span { z-index:1; }.gallery__item--1,.gallery__item--4 { grid-row:span 2; min-height:27rem; }
.motion-memory { background:#fdf8f3; }.motion-memory__frame { margin-top:3rem; max-width:60rem; }.motion-memory__video-wrap { padding:.6rem; background:#e4c7ba; box-shadow:0 18px 50px rgba(69,39,33,.12); }.motion-memory video { display:block; width:100%; max-height:72vh; background:#2e1e1d; object-fit:contain; }.motion-memory__caption { display:flex; align-items:center; gap:.65rem; margin:1rem .3rem 0; color:var(--muted); }.motion-memory__caption p { margin:0; font-family:var(--serif); font-style:italic; }.motion-memory__caption a { color:var(--wine); white-space:nowrap; }.motion-memory__dot { display:block; width:.55rem; height:.55rem; border-radius:50%; background:var(--rose); }
.closing { min-height:85svh; background:#e9d1c6; }.closing__line { width:1px; height:4.5rem; background:var(--rose); margin-bottom:2rem; }.closing__message { max-width:34rem; margin:2rem 0; font-size:1.06rem; color:#654844; }.closing__signature { font-family:var(--serif); font-size:1.35rem; font-style:italic; color:var(--wine); }.text-link { margin-top:2rem; color:var(--wine); text-decoration:none; font-size:.9rem; font-weight:600; }.text-link:hover { text-decoration:underline; }
.lightbox { width:min(92vw,58rem); max-width:none; padding:1rem; border:0; background:#fffaf5; box-shadow:0 25px 80px rgba(0,0,0,.35); }.lightbox::backdrop { background:rgba(30,17,17,.78); backdrop-filter:blur(5px); }.lightbox img { max-height:75vh; width:100%; object-fit:contain; display:block; }.lightbox p { margin:.8rem .2rem .2rem; color:var(--muted); }.lightbox__close { position:absolute; top:.2rem; right:.5rem; border:0; width:2.2rem; height:2.2rem; border-radius:50%; background:#fffaf5; color:var(--wine); font-size:1.8rem; cursor:pointer; line-height:1; }
@media (min-width:700px) { .timeline__item { grid-template-columns:2rem minmax(0,1fr) minmax(15rem,.85fr); gap:1.4rem; }.timeline__copy { grid-column:2; }.timeline__image { grid-column:3; grid-row:1; margin:0; align-self:start; }.notes { grid-template-columns:repeat(3,1fr); }.gallery__grid { grid-template-columns:repeat(4,1fr); }.gallery__item { min-height:16rem; }.gallery__item--1,.gallery__item--4 { min-height:33rem; } }
@media (prefers-reduced-motion:no-preference) { .hero > :not(.hero__glow) { animation:rise .75s both; }.hero h1 { animation-delay:.1s; }.hero__intro { animation-delay:.2s; }.button { animation-delay:.3s; } @keyframes rise { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:none; } } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }
@media (max-width:380px) { .gallery__grid { grid-template-columns:1fr; }.gallery__item--1,.gallery__item--4 { grid-row:auto; min-height:15rem; } }