:root {
  --ink: #000;
  --paper: #fff;
  --hand: "Caveat Brush", cursive;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font-family: var(--mono); }
a { color: inherit; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, .back-to-top { font-family: var(--hand); font-weight: 400; font-size: 36px; line-height: normal; }
.hero { width: min(1000px, 100% - 48px); margin: 128px auto 0; display: flex; justify-content: space-between; align-items: center; gap: 48px; }
.hero-text { width: 547px; display: flex; flex-direction: column; gap: 24px; }
.statement { max-width: 500px; font-weight: 100; font-size: 14px; text-wrap: pretty; }
.links { font-weight: 100; font-size: 16px; }
.links li + li { margin-top: 12px; }
.headshot { width: 327px; height: 327px; flex-shrink: 0; border-radius: 50%; object-fit: cover; }
main { width: min(593px, 100% - 48px); margin: 128px auto 0; }
main h2 { text-align: center; margin-bottom: 68px; }
.projects { display: flex; flex-direction: column; gap: 64px; }
.project { display: flex; flex-direction: column; gap: 12px; }
.project img { width: 100%; aspect-ratio: 2500 / 1875; object-fit: cover; }
.project img[src*="verso"] { aspect-ratio: 2475 / 1755; }
.project img.contain { object-fit: contain; }
.project h3 { font-weight: 400; font-size: 24px; text-align: center; text-decoration: underline; }
footer { text-align: center; padding: 244px 0 100px; }
@media (max-width: 760px) {
  .hero { margin-top: 64px; flex-direction: column-reverse; gap: 24px; width: min(372px, 100% - 48px); }
  .hero-text { width: 100%; padding: 0 24px; text-align: center; }
  .statement { max-width: none; }
  .links { font-size: 14px; }
  .links li + li { margin-top: 0; }
  .headshot { width: 256px; height: 256px; }
  main { width: min(372px, 100% - 48px); margin-top: 127px; }
  main h2 { margin-bottom: 25px; }
  footer { padding: 177px 0 80px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }