:root{
  --bg:#faf7f1; --paper:#ffffff; --ink:#2a2a2e; --muted:#6a6660;
  --accent:#8a5a2b; --accent-dark:#5f3d1b; --line:#e3dccd; --band:#2f3a45;
  --serif:Georgia,"Times New Roman",Times,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.7}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent-dark)}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:.5rem 1rem;z-index:10}
.skip:focus{left:0}

header.site{background:var(--band);color:#fff}
header.site .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 2rem;padding:1rem 1.25rem}
.brand{font-family:var(--serif);font-size:1.45rem;letter-spacing:.04em;color:#fff;text-decoration:none}
nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.5rem}
nav a{font-family:var(--sans);font-size:.92rem;color:#e9e4d8;text-decoration:none;padding:.35rem 0;border-bottom:2px solid transparent}
nav a:hover,nav a[aria-current="page"]{color:#fff;border-bottom-color:#d8a860}

.wrap{max-width:62rem;margin:0 auto;padding:0 1.25rem}
.narrow{max-width:42rem}
main{padding-bottom:3rem}

.hero{padding:4rem 0 2.5rem;text-align:center}
.hero h1{font-size:clamp(2.2rem,6vw,3.4rem);font-weight:normal;margin:0 0 .5rem;letter-spacing:.01em}
.hero p{font-size:1.2rem;color:var(--muted);max-width:36rem;margin:0 auto}
.rule{width:4rem;height:3px;background:#d8a860;border:0;margin:1.5rem auto}

h1.page{font-weight:normal;font-size:clamp(1.9rem,5vw,2.6rem);line-height:1.2;margin:3rem 0 .25rem}
h2{font-weight:normal;font-size:1.55rem;margin:2.4rem 0 .6rem;color:var(--accent-dark)}
.dates{font-family:var(--sans);color:var(--muted);letter-spacing:.06em;margin:0 0 1.5rem}
.lede{font-size:1.25rem;color:#45413a}

.cards{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin:1rem 0 2rem}
.card{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:1.4rem 1.4rem 1.2rem;text-decoration:none;color:inherit;display:block;transition:box-shadow .15s,transform .15s}
.card:hover{box-shadow:0 6px 18px rgba(0,0,0,.08);transform:translateY(-2px)}
.card h3{margin:0 0 .3rem;font-weight:normal;font-size:1.3rem;color:var(--accent-dark)}
.card p{margin:0;font-size:1rem;color:var(--muted)}
.card .sub{font-family:var(--sans);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:.4rem}

.section-label{font-family:var(--sans);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:.4rem;margin:2.5rem 0 1rem}
.linklist{list-style:none;padding:0;margin:0}
.linklist li{padding:.6rem 0;border-bottom:1px solid var(--line)}
.linklist small{display:block;color:var(--muted);font-size:.9rem}

.portrait{float:right;width:min(18rem,42%);margin:.4rem 0 1rem 2rem}
.portrait img{border-radius:4px;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.portrait figcaption,figure.wide figcaption{font-family:var(--sans);font-size:.85rem;color:var(--muted);margin-top:.5rem}
figure{margin:0}
figure.wide{margin:1.5rem 0}
figure.wide img{border-radius:4px;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.clear{clear:both}
.crew{font-family:var(--sans);font-size:.95rem;columns:2 16rem;column-gap:2rem;padding-left:1.4rem;margin:.75rem 0}
.crew li{break-inside:avoid;padding:.1rem 0}

ol.pubs{padding-left:1.6rem;font-size:1rem;line-height:1.55}
ol.pubs li{margin-bottom:.85rem;padding-left:.3rem}
.doi{font-family:var(--sans);font-size:.85rem;white-space:nowrap}
.dedication{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);text-align:center;font-style:italic;color:var(--muted)}

footer.site{background:var(--band);color:#cfc9bb;font-family:var(--sans);font-size:.88rem;padding:2rem 0}
footer.site a{color:#e9e4d8}
footer.site .cols{display:flex;flex-wrap:wrap;gap:1.5rem 4rem}
footer.site h4{margin:0 0 .4rem;color:#fff;font-weight:normal;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin:.2rem 0}
footer.site .fine{margin-top:1.5rem;color:#a9a392}

@media (max-width:560px){
  .portrait{float:none;width:70%;margin:1rem auto}
  header.site .wrap{flex-direction:column;align-items:flex-start}
}
@media print{header.site,footer.site{display:none}body{background:#fff}}

/* ---- Memorial hero (Evelyn) ---- */
.memorial{position:relative;overflow:hidden;background:linear-gradient(180deg,#fbf2e8 0%,#f6e4d9 100%);text-align:center;padding:3.2rem 1.25rem 3.4rem;border-bottom:1px solid var(--line)}
.memorial .deco{position:absolute;top:0;bottom:0;width:50%;height:100%;pointer-events:none}
.memorial .deco.l{left:0}.memorial .deco.r{right:0}
.memorial .inner{position:relative;max-width:36rem;margin:0 auto}
.memorial .oval{width:min(190px,50vw);aspect-ratio:3/4;margin:0 auto 1.5rem;border-radius:50%;overflow:hidden;border:6px solid #fff;box-shadow:0 10px 28px rgba(95,61,27,.28)}
.memorial .oval img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.memorial .kicker{font-family:var(--sans);font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:0 0 .4rem}
.memorial h1{font-weight:normal;font-size:clamp(2.2rem,6vw,3.5rem);line-height:1.12;margin:0 0 .5rem;color:var(--accent-dark)}
.memorial .dates{margin:0;color:var(--muted)}
.memorial blockquote{margin:1.4rem auto 0;max-width:28rem;font-style:italic;font-size:1.2rem;line-height:1.55;color:#6b5844}
.memorial .petal{animation:petal 18s linear infinite;opacity:0}
.memorial .p2{animation-duration:23s;animation-delay:-7s}.memorial .p3{animation-duration:20s;animation-delay:-12s}.memorial .p4{animation-duration:26s;animation-delay:-3s}
.memorial .sway{animation:sway 9s ease-in-out infinite alternate;transform-box:view-box;transform-origin:0 0}
.memorial .s2{animation-delay:-3s}.memorial .s3{animation-delay:-6s}
@keyframes petal{0%{transform:translate(0,-30px) rotate(0);opacity:0}8%{opacity:.85}50%{transform:translate(40px,260px) rotate(160deg)}100%{transform:translate(-20px,600px) rotate(320deg);opacity:0}}
@keyframes sway{from{transform:rotate(-1.5deg)}to{transform:rotate(1.5deg)}}
@media (prefers-reduced-motion:reduce){.memorial *{animation:none!important}}
@media (max-width:640px){.memorial .deco{width:24%;opacity:.7}.memorial blockquote{font-size:1.1rem}}

/* ---- Page heroes (Sam, Marvin) ---- */
.pagehero{position:relative;overflow:hidden;color:#fff;padding:3.6rem 1.25rem 3.8rem}
.pagehero .art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pagehero .inner{position:relative;max-width:62rem;margin:0 auto}
.pagehero .kicker{font-family:var(--sans);font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;margin:0 0 .5rem;color:#d8a860}
.pagehero h1{font-weight:normal;font-size:clamp(2.3rem,6vw,3.8rem);line-height:1.1;margin:0 0 .6rem}
.pagehero .sub{font-size:1.2rem;line-height:1.5;max-width:34rem;margin:0;color:rgba(255,255,255,.88)}
.pagehero .dates{font-family:var(--sans);letter-spacing:.08em;margin:0 0 .9rem;color:rgba(255,255,255,.78)}
.pagehero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,transparent,#d8a860,transparent)}

.hero-sam{background:linear-gradient(135deg,#17202b 0%,#26323f 55%,#35465a 100%);padding-top:4.4rem;padding-bottom:4.6rem}
.hero-sam .spin{transform-box:view-box;transform-origin:0 0}
.hero-sam .s1{animation:orbit 38s linear infinite}.hero-sam .s2{animation:orbit 24s linear infinite reverse}.hero-sam .s3{animation:orbit 15s linear infinite}
.hero-sam .twinkle{animation:twinkle 4s ease-in-out infinite alternate}.hero-sam .t2{animation-delay:-2s}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes twinkle{from{opacity:.25}to{opacity:.95}}

.hero-marvin{background:linear-gradient(180deg,#1a2c47 0%,#34506f 62%,#6f8aa6 100%)}
.hero-marvin .inner{display:flex;align-items:center;gap:3rem}
.hero-marvin .print{flex:0 0 auto;width:min(210px,44vw);margin:0;border:7px solid #f4efe6;border-bottom-width:24px;box-shadow:0 14px 34px rgba(0,0,0,.45);background:#f4efe6}
.hero-marvin .print img{width:100%;height:auto;display:block;filter:contrast(1.02)}
.hero-marvin .cloud{animation:drift 70s linear infinite alternate}.hero-marvin .cl2{animation-duration:95s;animation-direction:alternate-reverse}
@keyframes drift{from{transform:translateX(-40px)}to{transform:translateX(60px)}}
.hero-marvin .roles{font-family:var(--sans);font-size:.88rem;letter-spacing:.06em;margin:1.1rem 0 0;color:#e8d6b0}
@media (prefers-reduced-motion:reduce){.pagehero *{animation:none!important}}
@media (max-width:700px){.hero-marvin .inner{flex-direction:column;text-align:center;gap:1.6rem}.pagehero .sub{margin:0 auto}}

/* ---- Home hero (family tree) ---- */
.hero-home{background:linear-gradient(180deg,#fbf3e4 0%,#f6e2c8 100%);color:var(--ink);padding:5rem 1.25rem 5.2rem}
.hero-home .kicker{color:var(--accent)}
.hero-home h1{color:var(--accent-dark);font-size:clamp(2.5rem,6vw,4.3rem)}
.hero-home .sub{color:#5b4e40;max-width:30rem}
.hero-home .rule{margin:1.2rem 0 1.2rem;margin-left:0}
.hero-home .leafy{animation:leaf 16s ease-in infinite;opacity:0}.hero-home .lv2{animation-delay:-5s;animation-duration:19s}.hero-home .lv3{animation-delay:-11s;animation-duration:22s}
.hero-home .glow{animation:glow 7s ease-in-out infinite alternate}
@keyframes leaf{0%{transform:translate(0,-10px) rotate(0);opacity:0}8%{opacity:.95}50%{transform:translate(-50px,200px) rotate(170deg)}100%{transform:translate(20px,420px) rotate(330deg);opacity:0}}
@keyframes glow{from{opacity:.65}to{opacity:1}}
@media (max-width:760px){.hero-home{padding:3.4rem 1.25rem 3.6rem}.hero-home .art{opacity:.26}}

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