:root {
  --ground:#FEFDFB;
  --card:#FFFFFF;
  --ink:#1A1A2E;
  --slate:#4A5568;
  --mist:#8A92A1;
  --hairline:#E2DDD3;
  --accent:#B0785C;
  --accent-deep:#94614A;
  --maxw:1320px;
  --margin:clamp(24px, 5vw, 80px);
  --mono:'IBM Plex Mono', 'SF Mono', Menlo, monospace;
  --sans:'IBM Plex Sans', 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
}
body {
  margin:0;
  overflow-x:hidden;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1, h2, h3 { font-family:var(--sans); font-weight:600; margin:0; }
h2 { font-size:clamp(22px, 3vw, 32px); letter-spacing:-0.015em; line-height:1.18; text-wrap:balance; max-width:44rem; }
a { color:inherit; }
img { max-width:100%; display:block; }

.skip {
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--ground);
  padding:10px 16px; z-index:100;
}
.skip:focus { left:0; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Section rhythm */
.band { padding-block:clamp(56px, 9vh, 104px); border-top:1px solid var(--hairline); }
.band-inner { max-width:var(--maxw); margin:0 auto; padding-inline:var(--margin); }
section[id], main[id] { scroll-margin-top: 80px; }

.eyebrow {
  display:flex; align-items:center; gap:14px;
  margin:0 0 20px;
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--accent-deep);
}
.eyebrow::after { content:""; height:1.5px; width:clamp(32px, 4vw, 56px); background:var(--accent); opacity:0.6; }

.prose { color:var(--slate); max-width:62ch; margin:18px 0 0; font-size:clamp(16px, 1.6vw, 17px); line-height:1.55; }
.prose strong { color:var(--ink); font-weight:600; }
.inline-link { color:var(--accent-deep); text-decoration-color:var(--hairline); text-underline-offset:3px; }

/* Scroll reveal (enhancement; hidden only when .js is present) */
.js .reveal { opacity:0; transform:translateY(16px); transition:opacity 0.6s ease-out, transform 0.6s ease-out; }
.js .reveal.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity:1; transform:none; }
}

/* Fixed top nav. With JS it fades in once the hero scrolls past;
   without JS it is simply visible from the start. */
.topnav {
  position:fixed; top:0; left:0; right:0; z-index:15;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  height:64px; padding:0 clamp(20px, 5vw, 40px);
  background:rgba(254, 253, 251, 0.94);
  border-bottom:1px solid var(--hairline);
}
.js .topnav { opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.3s ease-out, visibility 0.3s; }
.js.past-hero .topnav { opacity:1; visibility:visible; pointer-events:auto; }

.tn-brand { font-family:var(--mono); font-size:18px; font-weight:500; letter-spacing:-0.01em; text-decoration:none; color:var(--ink); }
.tn-tld { color:var(--mist); }
.topnav ul { display:flex; gap:clamp(16px, 3vw, 36px); list-style:none; margin:0; padding:0; }
.tn-link {
  position:relative; text-decoration:none; white-space:nowrap;
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--slate);
  transition:color 0.15s;
}
.tn-link:hover { color:var(--ink); }
.tn-link::before {
  content:""; position:absolute; top:50%; left:-12px;
  width:6px; height:1.5px; background:var(--accent);
  transform:translateY(-50%) scaleX(0); transform-origin:0 50%; transition:transform 0.2s;
}
.tn-link:hover::before { transform:translateY(-50%) scaleX(1); }
.tn-cta { display:inline-flex; align-items:center; height:36px; padding:0 16px; background:var(--ink); color:var(--ground); border-radius:4px; font-size:13px; font-weight:600; white-space:nowrap; text-decoration:none; transition:opacity 0.2s; }
.tn-cta:hover { opacity:0.85; }
@media (max-width: 480px) {
  .tn-tld { display:none; }
  .topnav ul { gap:14px; }
  .tn-cta { height:32px; padding:0 12px; font-size:12px; }
}

/* Hero */
.hero { position:relative; overflow:hidden; min-height:88vh; display:flex; align-items:center; padding:96px 0 72px; }
.hero-inner { position:relative; z-index:1; width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--margin); }
.hero-wave {
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  width:110%; max-width:none; opacity:0.25; pointer-events:none;
}
.headline {
  font-size:clamp(28px, 3.8vw, 52px); font-weight:600;
  letter-spacing:-0.02em; line-height:1.16; text-wrap:balance; max-width:44rem; margin:0;
}
.headline .sig { color:var(--accent); }
.headline .dim, h2 .dim { color:var(--slate); }
.wordmark { font-size:clamp(64px, 11vw, 150px); font-weight:600; letter-spacing:-0.03em; line-height:0.95; margin:0 0 20px; }
.wordmark .dot { color:var(--accent); }

.lex { margin:32px 0 0; }
.lex .term { margin:0; font-family:var(--mono); font-size:clamp(15px, 1.8vw, 18px); font-weight:600; letter-spacing:-0.01em; }
.lex .entry-ipa { font-family:var(--mono); font-size:clamp(11px, 1.3vw, 13px); font-weight:500; letter-spacing:0.02em; color:var(--slate); }
.lex .entry-def { margin:4px 0 0; max-width:36ch; font-size:15px; line-height:1.45; color:var(--slate); }
.hero-meta { margin:40px 0 0; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--mist); }

/* Scroll hint (decorative; shown only with JS, gone under reduced motion) */
.hint {
  display:none; position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
  flex-direction:column; align-items:center; gap:8px; margin:0;
  font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--mist);
  transition:opacity 0.3s ease-out; pointer-events:none;
}
.js .hint { display:flex; }
.js.past-hero .hint { opacity:0; pointer-events:none; }
@keyframes hint-drop {
  0% { transform:translateY(0); opacity:1; }
  70% { transform:translateY(10px); opacity:0; }
  100% { transform:translateY(10px); opacity:0; }
}
.hint .wheel-dot { animation:hint-drop 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .js .hint { display:none; } }

/* Intro plate: the hero pins as a fixed plate only with JS + motion allowed;
   otherwise it stays in normal flow (the pre-plate layout). */
.intro-spacer { display:none; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero { position:fixed; inset:0; z-index:1; pointer-events:none; min-height:0; }
  .js .intro-spacer { display:block; height:100vh; }
}
main, .footer { position:relative; z-index:4; }

.plate-frame {
  position:absolute; z-index:-1; overflow:hidden;
  left:50%; top:50%; transform:translate(-50%, -50%);
  width:min(1200px, 94vw); height:min(720px, 84vh);
  border:1px solid var(--hairline);
  background:rgba(26, 26, 46, 0.03);
  pointer-events:none;
}
/* Breathing room between the plate's left edge and the hero text */
.hero-inner > :not(.plate-frame) { margin-inline-start: clamp(24px, 5vw, 88px); }

/* Meta strip */
.band.meta { padding-block:0; border-top:0; }
.band.meta + .band { border-top:0; }
.meta-strip {
  display:grid; grid-template-columns:repeat(4, 1fr); align-items:start;
  gap:clamp(20px, 3vw, 40px); margin:0;
  padding:clamp(22px, 4vh, 36px) 0;
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
}
.meta-k { font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent-deep); }
.meta-v { margin:8px 0 0; font-size:clamp(14px, 1.4vw, 16px); line-height:1.4; color:var(--ink); }
.meta-v a { text-decoration-color:var(--hairline); text-underline-offset:3px; }
@media (max-width: 860px) { .meta-strip { grid-template-columns:repeat(2, 1fr); gap:28px clamp(20px, 3vw, 40px); } }

/* Approach: numbered steps */
.steps { list-style:none; margin:40px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(24px, 3vw, 48px); }
.step { border-top:1px solid var(--hairline); padding-top:18px; }
.step-n { font-family:var(--mono); font-size:13px; font-weight:500; color:var(--accent-deep); }
.step h3 { margin:10px 0 0; font-size:clamp(18px, 2vw, 21px); }
.step p { margin:10px 0 0; font-size:15px; line-height:1.55; color:var(--slate); }
@media (max-width: 900px) { .steps { grid-template-columns:1fr; } }

/* Portfolio cards */
.portfolio { list-style:none; margin:40px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap:20px; }
.pf a {
  display:flex; flex-direction:column; gap:16px; height:100%;
  background:var(--card); border:1px solid var(--hairline); border-radius:4px;
  padding:24px; text-decoration:none; transition:border-color 0.2s;
}
.pf a:hover { border-color:var(--accent); }
.pf-logo { display:flex; align-items:center; height:44px; }
.pf-logo img { max-height:44px; width:auto; max-width:180px; object-fit:contain; }
.pf-name { display:block; font-weight:600; font-size:16px; color:var(--ink); }
.pf-desc { display:block; margin-top:4px; font-size:14px; line-height:1.5; color:var(--slate); }

/* Founder note */
.note { max-width:62ch; }
#founder .band-inner { position:relative; }
#founder .band-inner::after {
  content:""; position:absolute; left:28px; bottom:0; z-index:-1;
  width:330px; height:487px; transform:translateX(-50%);
  background:url(assets/peter-halftone.png) no-repeat bottom / contain;
  opacity:0.25; pointer-events:none;
}
@media (max-width: 900px) { #founder .band-inner::after { display:none; } }
.li-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-top:24px;
  border:1px solid var(--hairline); border-radius:4px;
  color:var(--slate); transition:color 0.2s, border-color 0.2s;
}
.li-btn:hover { color:var(--accent); border-color:var(--accent); }
.li-btn svg { fill:currentColor; }

/* Giving: pure-CSS year tabs (works with JS off; newest year checked in markup) */
.giving-tabs { margin-top:32px; }
.giving-year { position:absolute; opacity:0; pointer-events:none; }
.giving-tablist { display:flex; flex-wrap:wrap; gap:8px; }
.giving-tablist label {
  font-family:var(--mono); font-size:13px; font-weight:500;
  padding:8px 14px; border:1px solid var(--hairline); border-radius:4px;
  cursor:pointer; color:var(--slate); transition:color 0.15s, border-color 0.15s;
}
.giving-tablist label:hover { color:var(--ink); border-color:var(--accent); }
.giving-panel { display:none; margin-top:24px; }
.giving-panel table { border-collapse:collapse; width:100%; max-width:560px; }
.giving-panel td { padding:12px 24px 12px 0; border-top:1px solid var(--hairline); font-size:15px; color:var(--slate); }
.giving-panel td a { color:var(--ink); text-decoration-color:var(--hairline); text-underline-offset:3px; }
.giving-panel .amt { font-family:var(--mono); font-size:13px; white-space:nowrap; color:var(--ink); }
#gy-2026:checked ~ #gp-2026, #gy-2025:checked ~ #gp-2025, #gy-2024:checked ~ #gp-2024,
#gy-2023:checked ~ #gp-2023, #gy-2022:checked ~ #gp-2022, #gy-2021:checked ~ #gp-2021,
#gy-2020:checked ~ #gp-2020 { display:block; }
#gy-2026:checked ~ .giving-tablist label[for="gy-2026"], #gy-2025:checked ~ .giving-tablist label[for="gy-2025"],
#gy-2024:checked ~ .giving-tablist label[for="gy-2024"], #gy-2023:checked ~ .giving-tablist label[for="gy-2023"],
#gy-2022:checked ~ .giving-tablist label[for="gy-2022"], #gy-2021:checked ~ .giving-tablist label[for="gy-2021"],
#gy-2020:checked ~ .giving-tablist label[for="gy-2020"] { background:var(--ink); border-color:var(--ink); color:var(--ground); }
#gy-2026:focus-visible ~ .giving-tablist label[for="gy-2026"], #gy-2025:focus-visible ~ .giving-tablist label[for="gy-2025"],
#gy-2024:focus-visible ~ .giving-tablist label[for="gy-2024"], #gy-2023:focus-visible ~ .giving-tablist label[for="gy-2023"],
#gy-2022:focus-visible ~ .giving-tablist label[for="gy-2022"], #gy-2021:focus-visible ~ .giving-tablist label[for="gy-2021"],
#gy-2020:focus-visible ~ .giving-tablist label[for="gy-2020"] { outline:2px solid var(--accent); outline-offset:3px; }

/* Footer */
.footer { margin-top:clamp(48px, 9vh, 104px); border-top:1.5px solid var(--ink); background:var(--ground); padding-block:clamp(36px, 5vh, 64px); }
.footer-inner {
  max-width:var(--maxw); margin:0 auto; padding-inline:var(--margin);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 40px;
}
.footer-brand { font-family:var(--mono); font-size:18px; font-weight:500; letter-spacing:-0.01em; }
.footer-links { display:flex; gap:24px; }
.footer-links a {
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--slate);
  text-decoration:none; transition:color 0.15s;
}
.footer-links a:hover { color:var(--ink); }
.footer-copy { font-family:var(--mono); font-size:12px; color:var(--mist); }

/* Off-screen note for automated readers (LLM-outreach canary) — not display:none,
   so text extractors still see it; aria-hidden in markup keeps it out of AT. */
.machine-note { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }