body{
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 64px;
  background: #f5f3ee;
  color: #1a1915;
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

*{ box-sizing: border-box; }
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }
h1, h2, h3, p{ margin: 0; }
h1{ font-size: 2rem; line-height: 1.2; }
h2{ font-size: 1.1rem; margin-bottom: 16px; }
small{ display: block; color: #6d685e; font-size: 0.85rem; }
figure{ margin: 0; }

/* Header */
.top{ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 28px 0 56px; }
.top nav{ display: flex; gap: 20px; }

.intro{ max-width: 48ch; color: #6d685e; margin-bottom: 40px; }

/* Project list */
.projects{ list-style: none; margin: 0; padding: 0; }
.projects li{ border-top: 1px solid #d8d3c8; }
.projects a{ display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 24px 0; }
.projects img{ aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.projects b{ display: block; }
.projects small{ margin-top: 6px; }
.projects a:hover{ text-decoration: none; }
.projects a:hover b{ text-decoration: underline; }

/* About, contact */
section{ margin-top: 64px; }
section p + p{ margin-top: 16px; }
#about{ display: grid; grid-template-columns: 120px 1fr; gap: 0 24px; }
#about h2, #about p + p{ grid-column: 1 / -1; }
#about img{ width: 120px; height: 120px; object-fit: cover; }
#contact a{ text-decoration: underline; }

/* Project pages */
.back{ display: inline-block; margin-bottom: 40px; color: #6d685e; }
.lede{ color: #6d685e; margin-top: 12px; }
.meta{ margin-top: 12px; }
.hero-image{ margin-top: 32px; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.prose{ margin-top: 40px; }
.prose p + p, .prose div + p{ margin-top: 20px; }
.prose a{ text-decoration: underline; }
.note{ color: #6d685e; }
.videos{ display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.videos iframe{ width: 260px; aspect-ratio: 9 / 16; height: auto; border: 0; }
.gallery{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.gallery img{ aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.gallery figcaption{ margin-top: 8px; font-size: 0.9rem; color: #6d685e; }

@media (max-width: 560px){
  .projects a, .gallery, #about{ grid-template-columns: 1fr; }
  #about img{ margin-bottom: 16px; }
}