:root {
  --paper: #f4f0e7;
  --ink: #252922;
  --muted: #6f746c;
  --line: rgba(46, 57, 44, .18);
  --sage: #687d68;
  --violet: #716581;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Inter", Arial, sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .23;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence baseFrequency='.65' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.12'/%3E%3C/svg%3E");
}
a { color: inherit; }
::selection { background: #d8d3e1; }

.page { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
header {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.name { font: 500 14px/1 var(--sans); letter-spacing: -.02em; text-decoration: none; }
nav { display: flex; gap: 28px; }
nav a, .links a { color: var(--muted); font-size: 12px; text-decoration: none; transition: color .18s; }
nav a:hover, .links a:hover, footer a:hover { color: var(--violet); }

.intro { padding-bottom: 92px; border-bottom: 1px solid var(--line); }
.hero-art {
  position: relative;
  min-height: clamp(520px, 66vw, 690px);
  padding: clamp(50px, 7vw, 90px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(243,239,229,.6) 0%, rgba(243,239,229,.13) 55%, rgba(243,239,229,0) 100%),
    url("assets/monet-morning.jpg") center / cover no-repeat;
}
.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 0 60px rgba(245,239,226,.24);
  pointer-events: none;
}
.label {
  position: relative;
  z-index: 1;
  margin: 0 0 24px;
  color: #566158;
  font: 400 10px/1.4 var(--mono);
  letter-spacing: .09em;
}
h1 {
  position: relative;
  z-index: 1;
  max-width: 850px;
  margin: 0;
  font: 400 clamp(68px, 10vw, 124px)/.84 var(--serif);
  letter-spacing: -.045em;
  text-shadow: 0 1px 24px rgba(246,242,232,.4);
}
h1 em { color: var(--violet); font-weight: 400; }
.art-note {
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 18px;
  margin: 0;
  color: rgba(42,52,43,.65);
  font: 400 9px/1 var(--mono);
}
.intro-meta {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 70px;
  padding-top: 38px;
}
.bio { grid-column: 2; max-width: 550px; margin: 0; color: #555d55; }
.links { grid-column: 2; display: flex; gap: 22px; }

section:not(.intro) {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 70px;
  padding: 96px 0;
  border-bottom: 1px solid var(--line);
}
.section-title .label { color: var(--sage); }
.section-title h2 { margin: 0; font: 400 39px/1 var(--serif); letter-spacing: -.025em; }
.interests { margin: 0; padding: 0; list-style: none; }
.interests li {
  display: flex;
  align-items: baseline;
  gap: 25px;
  padding: 19px 0;
  border-top: 1px solid var(--line);
  font: 400 23px/1.3 var(--serif);
}
.interests li:last-child { border-bottom: 1px solid var(--line); }
.interests span, .year, .meta { color: var(--muted); font: 400 9px/1.5 var(--mono); letter-spacing: .06em; }

.projects { border-top: 1px solid var(--line); }
.projects article {
  display: grid;
  grid-template-columns: 52px 1fr 24px;
  gap: 22px;
  padding: 27px 0 30px;
  border-bottom: 1px solid var(--line);
}
.projects h3 { margin: 0 0 8px; font: 400 26px/1.2 var(--serif); letter-spacing: -.015em; }
.projects p { max-width: 520px; margin: 0; color: var(--muted); font-size: 12px; }
.projects .meta { margin-top: 14px; font-size: 9px; }
.projects article > a { color: var(--violet); font-size: 16px; text-decoration: none; transition: transform .18s; }
.projects article > a:hover { transform: translate(3px,-3px); }

footer {
  min-height: 145px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  color: var(--muted);
  font: 400 9px/1.5 var(--mono);
  letter-spacing: .04em;
}
footer p:nth-child(2) { text-align: center; }
footer p:last-child { text-align: right; }
footer a { text-decoration: none; }

@media (max-width: 720px) {
  .page { width: min(100% - 28px, 1120px); }
  header { height: 70px; }
  nav { gap: 16px; }
  nav a:first-child { display: none; }
  .intro { padding-bottom: 72px; }
  .hero-art { min-height: 610px; padding: 42px 24px; background-position: 58% center; }
  h1 { font-size: clamp(62px, 19vw, 88px); }
  .intro-meta { grid-template-columns: 1fr; gap: 24px; padding: 30px 8px 0; }
  .bio, .links { grid-column: 1; }
  section:not(.intro) { grid-template-columns: 1fr; gap: 44px; padding: 74px 8px; }
  .projects article { grid-template-columns: 38px 1fr 20px; gap: 13px; }
  footer { grid-template-columns: 1fr 1fr; padding: 35px 8px; gap: 8px; }
  footer p { margin: 0; }
  footer p:nth-child(2) { text-align: right; }
  footer p:last-child { grid-column: 1/-1; text-align: left; }
}