:root{--paper:#f6efe2;--paper2:#efe4d0;--ink:#2b2420;--muted:#6b5d52;--rust:#7a2e1f;--sage:#5f6f52;--line:#d9cbb3;--card:#fffaf1;--r:14px;--serif:"Fraunces",Georgia,serif;--sans:"Inter",system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--sans);background-image:radial-gradient(rgba(122,46,31,.035) 1px,transparent 1px);background-size:4px 4px}
img{max-width:100%;display:block}a{color:var(--rust)}
:focus-visible{outline:3px solid var(--sage);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--card);padding:.5rem 1rem;z-index:99}
.wrap{max-width:1120px;margin:0 auto;padding:0 1.25rem}
header.site{position:sticky;top:0;z-index:20;background:rgba(246,239,226,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;gap:.6rem;align-items:center;text-decoration:none;color:var(--ink);font:600 1.25rem var(--serif)}
.brand img{width:34px;height:34px}
nav ul{list-style:none;display:flex;gap:.25rem;margin:0;padding:0}
nav a{display:block;padding:.45rem .8rem;border-radius:999px;text-decoration:none;color:var(--ink);font-size:.95rem;transition:background .2s}
nav a:hover{background:var(--paper2)}nav a[aria-current=page]{background:var(--rust);color:#fff}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:.4rem .7rem;font:inherit;color:var(--ink);cursor:pointer}
@media(max-width:760px){.menu-btn{display:block}nav ul{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;background:var(--paper);border-bottom:1px solid var(--line);padding:.75rem 1.25rem}nav ul.open{display:flex}}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.15;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,7vw,4.6rem)}h1 em,h2 em{color:var(--rust)}h2{font-size:clamp(1.8rem,4vw,2.6rem)}
.eyebrow{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sage);font-weight:600}
.lead{font-size:1.2rem;color:var(--muted);max-width:38rem}
section{padding:4rem 0}.hero{padding:4.5rem 0 3rem}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:3rem;align-items:center}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:2rem}}
.polaroid{background:#fff;padding:14px 14px 52px;box-shadow:0 18px 40px -18px rgba(43,36,32,.45);transform:rotate(1.8deg);position:relative;transition:transform .4s}
.polaroid:hover{transform:rotate(0)}
.polaroid figcaption{position:absolute;bottom:14px;left:0;right:0;text-align:center;font:italic 1.05rem var(--serif);color:var(--muted)}
.polaroid::before{content:"";position:absolute;top:-12px;left:50%;width:110px;height:26px;transform:translateX(-50%) rotate(-3deg);background:rgba(217,203,179,.75)}
.ph{aspect-ratio:4/3;display:grid;place-items:center;text-align:center;color:var(--muted);background:repeating-linear-gradient(45deg,var(--paper2) 0 12px,#f3e9d8 12px 24px);font:italic 1rem var(--serif);padding:1rem}
.ph svg{width:44px;margin:0 auto .5rem;opacity:.6}
.btn{display:inline-flex;gap:.5rem;align-items:center;padding:.75rem 1.3rem;border-radius:999px;background:var(--rust);color:#fff;text-decoration:none;font-weight:600;border:2px solid var(--rust);transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px);background:#5f2216}.btn.ghost{background:transparent;color:var(--rust)}.btn.ghost:hover{background:var(--paper2)}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.note{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:2rem;max-width:46rem;margin:auto;position:relative;font:1.2rem/1.7 var(--serif)}
.note .sig{font-style:italic;color:var(--rust);margin-top:1rem}
.grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 30px -18px rgba(43,36,32,.5)}
.card .body{padding:1.25rem}.card .role{color:var(--sage);font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;font-weight:600}
.card.add{border-style:dashed;background:transparent;display:grid;place-items:center;text-align:center;min-height:300px;color:var(--muted);padding:1.5rem}
.card.add .plus{font:300 3rem var(--serif);color:var(--rust)}
.tag{display:inline-block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;background:var(--sage);color:#fff;padding:.2rem .6rem;border-radius:999px}
.empty{text-align:center;border:2px dashed var(--line);border-radius:var(--r);padding:3rem 1.5rem;color:var(--muted)}
.gallery{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.gallery button{padding:0;border:0;background:none;cursor:zoom-in;border-radius:10px;overflow:hidden}
.gallery img{aspect-ratio:1;object-fit:cover;width:100%;transition:transform .4s}.gallery button:hover img{transform:scale(1.05)}
.lightbox{position:fixed;inset:0;background:rgba(20,16,14,.9);display:none;place-items:center;z-index:50;padding:1rem}
.lightbox.open{display:grid}.lightbox img{max-height:80vh;border:8px solid #fff}
.lightbox p{color:#f6efe2;text-align:center;font:italic 1.1rem var(--serif)}
.lightbox button{position:absolute;background:rgba(255,255,255,.15);color:#fff;border:0;font-size:1.6rem;width:48px;height:48px;border-radius:50%;cursor:pointer}
.lb-close{top:1rem;right:1rem}.lb-prev{left:1rem;top:50%}.lb-next{right:1rem;top:50%}
.event{display:flex;gap:1.25rem;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem}
.event .date{flex:none;width:72px;text-align:center;background:var(--paper2);border-radius:10px;padding:.5rem;font:600 1.1rem var(--serif);color:var(--rust)}
.events{display:grid;gap:1rem}
.contact-cards{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.monogram{width:56px;height:56px;border-radius:50%;background:var(--rust);color:#fff;display:grid;place-items:center;font:italic 1.6rem var(--serif)}
.divider{display:flex;align-items:center;gap:1rem;color:var(--line);justify-content:center;margin:0 auto}.divider::before,.divider::after{content:"";height:1px;width:80px;background:var(--line)}
footer.site{border-top:1px solid var(--line);padding:2.5rem 0;color:var(--muted);font-size:.92rem;text-align:center}
footer.site a{color:var(--muted)}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s,transform .7s}.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}.reveal{opacity:1;transform:none}}

/* Family groups */
.families{display:grid;gap:2rem;margin-top:2.5rem}
.fam-group{background:linear-gradient(180deg,var(--card),var(--paper));border:1px solid var(--line);border-radius:calc(var(--r) + 6px);padding:2rem;position:relative}
.fam-group.parents{border-color:var(--rust);box-shadow:0 18px 40px -28px rgba(122,46,31,.6)}
.fam-group header{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;border-bottom:1px dashed var(--line);padding-bottom:.9rem;margin-bottom:1.5rem}
.fam-group h2{font-size:clamp(1.5rem,3.2vw,2rem);margin:0}.fam-group header p{margin:0;color:var(--muted);font-style:italic;font-family:var(--serif)}
.grid.people{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.card.person{text-align:center;padding-top:1.5rem}.card.person .body{padding:1rem 1.1rem 1.4rem}.card.person h3{font-size:1.25rem;margin-bottom:.3rem}.card.person p{margin:0 0 .4rem;color:var(--muted);font-size:.92rem}.card.person a{font-size:.88rem;word-break:break-all}
.avatar,.pphoto{width:92px;height:92px;border-radius:50%;margin:0 auto;display:grid;place-items:center;object-fit:cover}
.avatar{background:radial-gradient(circle at 30% 25%,#a5503b,var(--rust));color:#fff8ee;font:500 1.9rem var(--serif);letter-spacing:.02em;box-shadow:0 0 0 5px var(--paper2)}
.fam-group:nth-child(3n+2) .avatar{background:radial-gradient(circle at 30% 25%,#7d8e6e,var(--sage))}
.fam-group:nth-child(3n+3) .avatar{background:radial-gradient(circle at 30% 25%,#b88a4f,#8a5a2b)}
@media(max-width:600px){.fam-group{padding:1.25rem}.grid.people{grid-template-columns:repeat(2,1fr);gap:.8rem}.avatar,.pphoto{width:70px;height:70px;font-size:1.5rem}.card.person{padding-top:1rem}.card.person .body{padding:.75rem .6rem 1rem}.card.person h3{font-size:1.05rem}}
@media(max-width:860px){.hero{padding:2.25rem 0 1.5rem}.hero-grid{gap:1.5rem}.hero .polaroid{max-width:30rem;margin:0 auto;padding:10px 10px 42px}.hero .polaroid figcaption{bottom:10px}.hero + section{padding-top:2rem}}