:root {
  --paper: #f8f8f5;
  --ink: #232823;
  --muted: #687067;
  --green: #28634c;
  --line: #dfe3dc;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 28px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--green); outline-offset: 5px; }
img { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3, figure { margin: 0; }
.page-width { width: min(860px, calc(100% - 48px)); margin: 0 auto; }
.skip-link { position: absolute; top: -80px; left: 20px; padding: 10px; background: var(--paper); z-index: 10; }
.skip-link:focus { top: 8px; }

.home-header { display: flex; justify-content: space-between; align-items: center; min-height: 100px; gap: 24px; }
.home-name { font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-size: 24px; color: var(--ink); }
.nav-links { display: flex; gap: 26px; align-items: center; font-size: 14px; }
.nav-links a { padding: 12px 0; color: var(--muted); }
.nav-links a:hover, .nav-links a.is-active { color: var(--green); }

.introduction { display: grid; grid-template-columns: minmax(0, 1fr) 146px; gap: 60px; align-items: start; padding-top: 44px; }
h1 { font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-size: 48px; line-height: 1.15; font-weight: 500; margin-bottom: 24px; }
.intro-copy p { margin-bottom: 16px; max-width: 580px; }
.portrait { padding-top: 9px; }
.portrait img { width: 146px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; }
.personal-links { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 22px; font-size: 14px; }
.personal-links a { text-decoration: underline; text-decoration-color: #b6c8bb; text-underline-offset: 4px; }

h2 { font-size: 20px; line-height: 1.4; font-weight: 600; }
h3 { font-size: 16px; line-height: 1.55; font-weight: 600; }
.highlights { margin-top: 44px; }
.highlights h2 { font-size: 15px; font-weight: 500; color: var(--muted); margin-bottom: 16px; }
.highlights ul { list-style: none; margin: 0; padding: 0; }
.highlights li { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 20px; margin: 12px 0; font-size: 15px; }
.highlight-label { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; color: var(--muted); padding-top: 3px; }
.marked { color: var(--ink); padding: 1px 4px 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.mark-green { background: #e1ecdf; }
.mark-rose { background: #f0e4de; }
.mark-violet { background: #e9e6f0; }
.mark-yellow { background: #f0ebcf; }

.home-section { margin-top: 64px; scroll-margin-top: 28px; }
.home-section > h2, .section-label { margin-bottom: 24px; }
.section-label { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.section-label > a { font-size: 13px; white-space: nowrap; }
.experience-list { display: grid; gap: 24px; }
.experience-entry { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 20px; scroll-margin-top: 32px; }
.entry-date { color: var(--muted); font-size: 13px; padding-top: 3px; }
.experience-entry h3 span { font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 10px; }
.experience-entry p { font-size: 14px; color: #565f56; margin-top: 3px; }
.earlier-roles { margin: 22px 0 0 120px; }
summary { cursor: pointer; color: var(--muted); font-size: 13px; width: fit-content; }
.earlier-roles[open] { margin-left: 0; }
.earlier-roles[open] summary { margin-left: 120px; margin-bottom: 24px; }

.project-list { display: grid; gap: 28px; }
.project-entry { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 20px; align-items: start; }
.project-preview { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 3px; background: #fff; }
.project-preview img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.avatar-preview img { object-fit: contain; padding: 4px; }
.project-entry h3 a { color: var(--ink); }
.project-entry h3 a span { font-size: 12px; color: var(--muted); margin-left: 3px; }
.project-entry p { color: #565f56; font-size: 14px; max-width: 620px; margin-top: 6px; }
.consulting-links { margin: 24px 0 0 120px; }
.consulting-links ul { margin: 14px 0 0; padding-left: 18px; font-size: 14px; }
.consulting-links li { margin: 8px 0; }

.writing-list { list-style: none; padding: 0; margin: 0; }
.writing-list li { display: flex; gap: 20px; justify-content: space-between; align-items: baseline; padding: 12px 0; }
.writing-list li:first-child { padding-top: 0; }
.writing-list li > span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.writing-list a { text-decoration: underline; text-decoration-color: #bdcbbb; text-underline-offset: 4px; }

.home-posts { display: grid; gap: 12px; }
.post-row { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 20px; align-items: baseline; }
.post-row time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.post-row h3 { font-size: 15px; font-weight: 400; }
.post-read-time { display: none; }
.subscribe-note { margin-top: 24px; font-size: 13px; color: var(--muted); }
.home-footer { margin-top: 72px; padding: 24px 0 36px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 20px; font-size: 12px; color: var(--muted); }
.home-footer > span { margin-right: auto; }

@media (max-width: 640px) {
  .page-width { width: calc(100% - 40px); }
  .home-header { min-height: 80px; gap: 16px; }
  .home-name { font-size: 20px; white-space: nowrap; }
  .nav-links { gap: 16px; font-size: 12px; }
  .introduction { padding-top: 24px; gap: 24px; grid-template-columns: minmax(0, 1fr) 96px; }
  .intro-copy { display: contents; }
  h1 { grid-column: 1; grid-row: 1; font-size: 40px; align-self: center; margin-bottom: 0; }
  .portrait { grid-column: 2; grid-row: 1; padding: 0; }
  .portrait img { width: 96px; }
  .intro-copy p, .personal-links { grid-column: 1 / -1; margin: 0; }
  .personal-links { margin-top: 0; }
  .highlights { margin-top: 36px; }
  .highlights li { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; font-size: 14px; margin: 16px 0; }
  .highlight-label { font-size: 11px; }
  .home-section { margin-top: 48px; }
  .experience-entry { grid-template-columns: 52px minmax(0, 1fr); gap: 16px; }
  .experience-entry h3 span { display: block; margin-left: 0; font-size: 13px; }
  .earlier-roles { margin-left: 68px; }
  .earlier-roles[open] summary { margin-left: 68px; }
  .project-entry { grid-template-columns: 80px minmax(0, 1fr); gap: 16px; }
  .consulting-links { margin-left: 96px; }
  .writing-list li { flex-direction: column; align-items: start; gap: 2px; }
  .post-row { grid-template-columns: 1fr; gap: 2px; }
  .home-posts { gap: 18px; }
}

@media (max-width: 360px) {
  .home-header { gap: 12px; }
  .home-name { font-size: 18px; }
  .nav-links { gap: 12px; }
  .highlights li { grid-template-columns: 1fr; gap: 2px; }
  .consulting-links { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}