:root { --ink:#111; --body:#333; --muted:#777; --line:#eaeaea; --bg:#fff; }
@media (prefers-color-scheme: dark) {
  :root { --ink:#eee; --body:#ccc; --muted:#888; --line:#262626; --bg:#111; }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
  font:400 15px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; }

/* ---------- home ---------- */
.home { max-width:1120px; margin:0 auto; padding:64px 64px 80px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:96px; }
.home header { position:sticky; top:64px; align-self:start; }

.photo { display:block; width:220px; aspect-ratio:4/5; object-fit:cover; object-position:50% 25%;
  border-radius:6px; margin:0 0 28px; }
.home h1 { font-size:32px; font-weight:500; margin:0 0 12px; letter-spacing:-.02em; line-height:1.2; }
.intro { margin:0 0 20px; color:var(--muted); font-size:16px; }
.links { display:flex; flex-wrap:wrap; gap:6px 20px; }

h2 { font-size:13px; font-weight:400; color:var(--muted); margin:56px 0 12px; }
section:first-child h2 { margin-top:0; }
ul { list-style:none; margin:0; padding:0; }
li { display:flex; justify-content:space-between; gap:16px; padding:20px 0; border-top:1px solid var(--line); }
li:last-child { border-bottom:1px solid var(--line); }
li > a:hover { text-decoration:none; }
li > a:hover .name { text-decoration:underline; text-underline-offset:4px; }
.name { display:block; font-size:20px; font-weight:500; line-height:1.35; letter-spacing:-.01em; }
.note { color:var(--muted); display:block; font-size:13px; margin-top:4px; }
.meta { color:var(--muted); font-size:13px; white-space:nowrap; padding-top:6px; }

/* hand-drawn sketch */
.sketch { display:block; width:260px; max-width:100%; margin-top:36px; color:var(--ink); }
.sketch path, .sketch circle { fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }
.sketch text { font:500 19px Caveat,cursive; fill:currentColor; }
.sketch .draw { stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1.4s ease forwards; }
.sketch .back { stroke-dasharray:.02 .03; animation:fade 1s ease 1.1s both; }
.sketch .d2 { animation-delay:.5s; } .sketch .d4 { animation-delay:1.6s; }
@keyframes draw { to { stroke-dashoffset:0; } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .sketch .draw, .sketch .back { animation:none; stroke-dashoffset:0; opacity:1; } }

/* ---------- project page ---------- */
.post { max-width:680px; margin:0 auto; padding:64px 24px 120px; }
.back { display:inline-block; font-size:14px; color:var(--muted); margin-bottom:96px; }
.kicker { font-size:13px; color:var(--muted); margin:0 0 16px; }
.post h1 { font-size:40px; font-weight:500; line-height:1.15; letter-spacing:-.025em; margin:0 0 16px; }
.byline { font-size:14px; color:var(--muted); margin:0 0 48px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.lede { font-size:18px; line-height:1.65; color:var(--body); margin:0 0 40px; }
.cta { display:inline-block; font-size:14px; padding:10px 16px; border:1px solid var(--ink); border-radius:999px; }
.cta:hover { background:var(--ink); color:var(--bg); text-decoration:none; }

@media (max-width:820px) {
  .home { display:block; padding:56px 24px 80px; }
  .home header { position:static; margin-bottom:56px; }
  .photo { width:160px; }
  .back { margin-bottom:56px; }
  .post h1 { font-size:30px; }
}
@media (max-width:520px) {
  li { flex-direction:column; gap:2px; }
}