:root {
  --bg: #f4f1ea;
  --ink: #1f1c18;
  --muted: #5c564d;
  --line: #ddd6c8;
  --card: #ebe6db;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Georgia, "Times New Roman", serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
}
header, main, footer {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}
header { padding-top: 2.5rem; }
.mark {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--muted);
}
h1 { font-size: 1.85rem; font-weight: normal; line-height: 1.25; margin: 0 0 1rem; }
h2 { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: normal; }
h3 { font-size: 1.05rem; font-weight: normal; margin: 0 0 0.25rem; }
.intro, .work, .contact { margin: 2.5rem 0; }
.intro p, .contact p, .work p { color: var(--muted); }
.work ul { list-style: none; padding: 0; margin: 1rem 0 0; }
.work li {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}
.work li:last-child { border-bottom: 1px solid var(--line); }
.swatch {
  flex: 0 0 3.5rem;
  height: 3.5rem;
  background: var(--card);
}
.s1 { background: #c9b89a; }
.s2 { background: #8f9a86; }
.s3 { background: #b7a090; }
footer {
  padding: 2rem 1.25rem 3rem;
  font-size: 0.85rem;
  color: var(--muted);
}