:root{--bg:#fdf8f0;--paper:#fff;--ink:#2e2a26;--muted:#7a6f63;--sage:#4f6f5d;--sage-dark:#385143;--honey:#d49a3a;--blush:#f3e4d3;--line:#eadfd0;
--serif:Georgia,"Times New Roman",serif;--sans:"Trebuchet MS",Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);font-size:1.1rem;line-height:1.75}
img{max-width:100%;height:auto;display:block}
a{color:var(--sage);text-underline-offset:3px}
a:hover{color:var(--sage-dark)}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:.5rem 1rem;z-index:30}
.skip:focus{left:0}
.wrap{max-width:64rem;margin:0 auto;padding:0 1.25rem}
.narrow{max-width:42rem}

.draftbar{background:#fff3c9;color:#5b4700;font-family:var(--sans);font-size:.82rem;text-align:center;padding:.4rem 1rem;border-bottom:1px solid #e6cf80}
header.site{background:var(--paper);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem 2rem;padding:1rem 1.25rem}
.brand{font-family:var(--serif);font-size:1.5rem;color:var(--sage-dark);text-decoration:none;font-style:italic}
nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.6rem}
nav a{font-family:var(--sans);font-size:.95rem;color:var(--ink);text-decoration:none;padding:.35rem 0;border-bottom:2px solid transparent}
nav a:hover,nav a[aria-current="page"]{border-bottom-color:var(--honey)}

.hero{padding:2.5rem 0 1rem}
.hero .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:2.5rem;align-items:center}
.hero h1{font-weight:normal;font-size:clamp(2rem,5vw,3.1rem);line-height:1.15;margin:0 0 1rem;color:var(--sage-dark)}
.hero .photo img{border-radius:8px;box-shadow:0 10px 30px rgba(56,81,67,.22)}
.lede{font-size:1.2rem}
.kicker{font-family:var(--sans);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--honey);margin:0 0 .5rem}

.cards{display:grid;gap:1.4rem;grid-template-columns:repeat(3,1fr);margin:2.5rem 0 3rem}
.card{background:var(--paper);border:1px solid var(--line);border-radius:8px;overflow:hidden;text-decoration:none;color:inherit;display:block;transition:box-shadow .15s,transform .15s}
.card:hover{box-shadow:0 8px 22px rgba(46,42,38,.14);transform:translateY(-2px)}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 30%}
.card div{padding:1rem 1.2rem 1.2rem}
.card h2{margin:0;font-weight:normal;font-size:1.5rem;color:var(--sage-dark)}
.card p{margin:.2rem 0 0;font-family:var(--sans);font-size:.88rem;color:var(--muted)}

main{padding-bottom:3rem}
h1.page{font-weight:normal;font-size:clamp(2.2rem,6vw,3.2rem);margin:2.5rem 0 .2rem;color:var(--sage-dark)}
.dates{font-family:var(--sans);letter-spacing:.06em;color:var(--muted);margin:0 0 1.5rem}
h2.sec{font-weight:normal;font-size:1.6rem;color:var(--sage-dark);margin:3rem 0 .4rem}
.note{font-family:var(--sans);font-size:.9rem;color:var(--muted)}
.draft{font-family:var(--sans);font-size:.9rem;background:#fff3c9;border:1px dashed #d1b44d;color:#5b4700;border-radius:6px;padding:.7rem 1rem;margin:1.2rem 0}

.gallery{list-style:none;padding:0;margin:1.5rem 0;display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}
.gallery li{margin:0}
.gallery button{all:unset;cursor:zoom-in;display:block;width:100%;border-radius:8px;overflow:hidden;position:relative;background:var(--blush)}
.gallery button:focus-visible{outline:3px solid var(--honey);outline-offset:2px}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 35%;transition:transform .3s}
.gallery button:hover img{transform:scale(1.03)}
.gallery .yr{position:absolute;left:.6rem;top:.6rem;background:rgba(56,81,67,.9);color:#fff;font-family:var(--sans);font-size:.75rem;letter-spacing:.06em;padding:.15rem .55rem;border-radius:999px}
.gallery .cap{font-family:var(--sans);font-size:.88rem;color:var(--muted);margin:.5rem .1rem 0;line-height:1.45}

figure.video{margin:2rem 0;max-width:22rem}
figure.video video{width:100%;border-radius:8px;background:#000}
figure.video figcaption{font-family:var(--sans);font-size:.88rem;color:var(--muted);margin-top:.5rem}
.closing{text-align:center;font-style:italic;font-size:1.3rem;color:var(--sage-dark);margin:3rem 0 0}

dialog.lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100%;height:100%}
dialog.lb::backdrop{background:rgba(20,18,16,.92)}
.lb .stage{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:1rem;color:#f3ebe0;font-family:var(--sans)}
.lb img{max-width:min(94vw,1200px);max-height:78vh;width:auto;height:auto;border-radius:4px}
.lb p{margin:.8rem 0 0;text-align:center;max-width:42rem;font-size:.95rem}
.lb button{all:unset;cursor:pointer;color:#fff;font-family:var(--sans);font-size:1.6rem;position:absolute;padding:.6rem .9rem;border-radius:6px}
.lb button:hover,.lb button:focus-visible{background:rgba(255,255,255,.18)}
.lb .x{top:.6rem;right:.8rem;font-size:2.2rem}.lb .pv,.lb .nx{top:50%;transform:translateY(-50%);font-size:3rem;line-height:1;background:rgba(255,255,255,.12);padding:.5rem .9rem}.lb .pv{left:.6rem}.lb .nx{right:.6rem}

footer.site{background:var(--sage-dark);color:#d7e3da;font-family:var(--sans);font-size:.88rem;padding:1.8rem 0;text-align:center}
footer.site a{color:#fff}
footer.site p{margin:.2rem 0}
@media (max-width:760px){
 .hero .wrap{grid-template-columns:1fr}.cards{grid-template-columns:1fr}
 header.site .wrap{flex-direction:column;align-items:flex-start}
 .gallery{grid-template-columns:repeat(2,1fr);gap:.9rem}
}
@media (max-width:420px){.gallery{grid-template-columns:1fr}}
@media print{.draftbar,header.site,footer.site,dialog{display:none}body{background:#fff}}

/* ---- Hero scene ---- */
.hero .wrap{grid-template-columns:1fr 1.2fr}
.scene{position:relative}
.scene-svg{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 12px 34px rgba(56,81,67,.28);background:#bfe1ee}
.scene .hint{font-family:var(--sans);font-size:.8rem;color:var(--muted);text-align:center;margin:.6rem 0 0}
.dw a{cursor:pointer;outline:none}
.dw .hop,.dw .head,.dw .tail,.dw .breath,.dw .eyes{transform-box:view-box}
.tail{transform-origin:138px 218px;animation:wag 1.1s ease-in-out infinite alternate}
.jazz .tail{animation-duration:.9s}.mia .tail{animation-duration:.7s}.daisy .tail{animation-duration:1.3s}
.head{transform-origin:100px 130px;animation:tilt 7s ease-in-out infinite}
.mia .head{animation-delay:-2s}.jazz .head{animation-delay:-4s}
.breath{transform-origin:100px 236px;animation:breathe 3.6s ease-in-out infinite}
.eyes{transform-origin:100px 78px;animation:blink 5.5s infinite}
.mia .eyes{animation-delay:-1.8s}.jazz .eyes{animation-delay:-3.2s}
.hop{transform-origin:100px 236px}
.dw:hover .hop,.dw:focus-within .hop,.dw.say .hop{animation:hop .55s ease-out 2}
.dw:hover .tail,.dw:focus-within .tail,.dw.say .tail{animation-duration:.25s}
.bubble{opacity:0;transform-box:fill-box;pointer-events:none;transition:opacity .25s}
.bubble rect,.bubble path{fill:#fff;stroke:#e2d5c0;stroke-width:1.5}
.bubble path{stroke:none}
.bubble text{font:700 15px "Trebuchet MS",Helvetica,Arial,sans-serif;fill:#385143}
.dw:hover .bubble,.dw:focus-within .bubble,.dw.say .bubble{opacity:1}
.plate rect{fill:rgba(255,255,255,.88);stroke:rgba(56,81,67,.25)}
.plate text{font:700 14px "Trebuchet MS",Helvetica,Arial,sans-serif;fill:#385143}
.dw:hover .plate rect,.dw:focus-within .plate rect{fill:#fff;stroke:var(--honey);stroke-width:2}
.cloud.c1{animation:drift 60s linear infinite alternate}.cloud.c2{animation:drift 80s linear infinite alternate-reverse}
.sun{transform-origin:330px 82px;animation:pulse 6s ease-in-out infinite}
.leaf{animation:fall 11s ease-in infinite;opacity:0}.lf2{animation-delay:-4s;animation-duration:13s}.lf3{animation-delay:-8s;animation-duration:12s}
.fl{transform-origin:50% 100%;transform-box:fill-box;animation:sway 4s ease-in-out infinite alternate}.fl.f2{animation-delay:-2s}
.bf .w{transform-box:fill-box;animation:flap .22s ease-in-out infinite alternate}.bf .w:first-child{transform-origin:100% 50%}.bf .w:nth-child(2){transform-origin:0 50%}
.heart{font-size:22px;animation:rise 1.7s ease-out forwards;pointer-events:none}
@keyframes wag{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
@keyframes tilt{0%,100%{transform:rotate(0)}30%{transform:rotate(3deg)}65%{transform:rotate(-3deg)}}
@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.018)}}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.08)}}
@keyframes hop{0%{transform:translateY(0)}45%{transform:translateY(-16px)}100%{transform:translateY(0)}}
@keyframes drift{from{transform:translateX(-50px)}to{transform:translateX(120px)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.08);opacity:1}}
@keyframes fall{0%{transform:translate(0,0) rotate(0);opacity:0}8%{opacity:1}35%{transform:translate(-40px,110px) rotate(140deg)}65%{transform:translate(10px,200px) rotate(260deg)}100%{transform:translate(-30px,300px) rotate(400deg);opacity:0}}
@keyframes sway{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes flap{from{transform:scaleX(1)}to{transform:scaleX(.25)}}
@keyframes rise{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateY(-70px) scale(1.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.scene *{animation:none!important;transition:none!important}.bubble{display:none}}
@media (max-width:760px){.hero .wrap{grid-template-columns:1fr}}

/* ---- Full-width hero banner + intro ---- */
.herobanner{background:#bfe1ee}
.herobanner .scene{position:relative}
.herobanner .scene-svg{height:clamp(300px,45vw,580px);border-radius:0;box-shadow:none}
.hero-text{position:absolute;left:0;right:0;top:clamp(14px,3.6vw,48px);text-align:center;padding:0 1rem;pointer-events:none}
.hero-text .kicker{font-size:clamp(.7rem,1.4vw,.85rem);color:#9a6a14;margin:0 0 .3rem}
.hero-text h1{font-weight:normal;font-size:clamp(1.8rem,4.4vw,3.3rem);line-height:1.1;margin:0;color:var(--sage-dark);text-shadow:0 1px 0 rgba(255,255,255,.55),0 0 24px rgba(255,255,255,.45)}
.herobanner .hint{background:var(--bg);margin:0;padding:.55rem 1rem;font-family:var(--sans);font-size:.8rem;color:var(--muted);text-align:center}
.intro{padding:2.8rem 0 .5rem}
.intro-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:center}
.intro-text p{margin:0 0 1.1rem}
.intro-photo{margin:0}
.intro-photo img{width:100%;height:auto;border:8px solid #fff;border-radius:4px;box-shadow:0 10px 28px rgba(56,81,67,.25);transform:rotate(1.6deg)}
.intro-photo figcaption{font-family:var(--sans);font-size:.85rem;color:var(--muted);text-align:center;margin-top:.9rem}
@media (max-width:760px){
 .herobanner .scene{display:flex;flex-direction:column}
 .hero-text{position:static;order:-1;background:#bfe1ee;padding:1.4rem 1rem .6rem}
 .intro-grid{grid-template-columns:1fr;gap:2rem}
 .intro-photo{max-width:24rem;margin:0 auto}
}

footer.site .credit{margin:.6rem 0 0;font-size:.8rem;letter-spacing:.05em;opacity:.9}