:root{
  --bg:#ffffff;
  --bg-alt:#f7f7f7;
  --ink:#111111;
  --muted:#555555;
  --line:#e5e5e5;
  --maxw:1024px;
  --rx:14px;
  --headerH:64px;
}

/* Optional: soft page snapping */
html { scroll-behavior:smooth; scroll-snap-type:y proximity; }

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial;
  background:var(--bg);
  color:var(--ink);
  line-height:1.7;
}

a{ color:inherit; text-decoration:underline; }
.container{ max-width:var(--maxw); margin-inline:auto; padding:0 16px; }

/* Header */
.header{
  position:sticky; top:0; z-index:10;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:var(--headerH); }

/* Slim headers */
.brand{ font-weight:300; font-size:1.5rem; letter-spacing:.05em; }
.section-title{ font-weight:300; font-size:clamp(24px,5.4vw,42px); line-height:1.15; margin:0 0 8px; }

.navlinks{ display:flex; gap:8px; align-items:center; }
.navlinks a{ padding:8px 12px; border-radius:999px; text-decoration:none; color:var(--muted); }
.navlinks a.active{ background:#111; color:#fff; }
.hamburger{ display:none; border:1px solid var(--line); border-radius:10px; padding:8px; background:#fff; }
.hamburger span{ display:block; width:22px; height:2px; background:#111; margin:4px 0; }
@media (max-width:860px){ .navlinks{display:none} .hamburger{display:block} }
.mobilemenu{ display:none; padding:8px 0 12px; border-bottom:1px solid var(--line); }
.mobilemenu a{ display:block; padding:10px 12px; color:#111; text-decoration:none; }
.mobilemenu a.active{ background:#111; color:#fff; border-radius:8px; margin:6px 8px; }

/* Sections: full viewport minus header; alternate backgrounds */
main > section{
  min-height:calc(100svh - var(--headerH));
  display:flex; align-items:center; /* vertically centers typical content */
  scroll-snap-align:start;
  scroll-margin-top:calc(var(--headerH) + 10px);
  padding-block:48px;
}
main > section:nth-of-type(even){ background:var(--bg-alt); }
main > section:nth-of-type(odd){ background:#fff; }

.section{ display:grid; gap:18px; grid-template-columns:1fr; align-items:start; }
.dek{ color:var(--muted); margin:0 0 16px; }
.prose p{ margin:0 0 12px; line-height:1.6; }
.prose a:hover{ opacity:.7; }

/* People layout: one-top + two-bottom */
#people .people{ display:flex; flex-direction:column; gap:24px; }
#people .people-top{
  border:1px solid var(--line); border-radius:var(--rx);
  padding:20px; background:#fff;
}
#people .people-bottom{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
@media (max-width:800px){ #people .people-bottom{ grid-template-columns:1fr; } }

.bio{
  border:1px solid var(--line); border-radius:var(--rx);
  padding:20px; background:#fff;
}
.bio h3{ margin-top:0; font-size:1.2rem; }
.bio p{ margin-bottom:12px; color:var(--muted); line-height:1.6; }
.bio a{ text-decoration:none; color:#111; font-weight:600; border-bottom:1px solid #111; }
.bio a:hover{ opacity:.7; }

/* Footer */
.footer{ padding:36px 0; color:var(--muted); border-top:1px solid var(--line); text-align:center; }

/* Back to top */
#totop{
  position:fixed; right:16px; bottom:16px; padding:10px 12px;
  border-radius:12px; background:#111; color:#fff; border:0; display:none;
}

/* Fade-in on scroll */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity 600ms ease, transform 600ms ease; will-change:opacity, transform; }
.reveal.in{ opacity:1; transform:none; }

/* Stagger inner content gently */
.reveal .section > *{ opacity:0; transform:translateY(10px); transition:opacity 600ms ease, transform 600ms ease; }
.reveal.in .section > *{ opacity:1; transform:none; }
.reveal .section > *:nth-child(2){ transition-delay:80ms; }
.reveal .section > *:nth-child(3){ transition-delay:120ms; }
.reveal .section > *:nth-child(4){ transition-delay:160ms; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-snap-type:none; }
  .reveal, .reveal.in, .reveal .section > *, .reveal.in .section > *{
    transition:none !important; transform:none !important; opacity:1 !important;
  }
}