@font-face {
  font-family: Inter;
  src: url('/assets/inter-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; }
body { font-family: Inter, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, p, figure { margin: 0; }
main { display: flex; flex-direction: column; align-items: center; overflow: hidden; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 800px;
  max-width: 100%;
  padding: 100px 50px 50px;
  overflow: hidden;
}
h1 { color: #111; font-size: 50px; font-weight: 700; line-height: 1.2; letter-spacing: -2.1px; white-space: nowrap; }
.studio-mark { width: 40px; height: 40px; flex-shrink: 0; background: url('/assets/mark.svg') center / 100% 100% no-repeat; image-rendering: pixelated; }

.portfolio { display: flex; flex-direction: column; gap: 50px; width: 800px; max-width: 100%; padding: 0 50px; overflow: hidden; }
.project-image { flex-shrink: 0; width: 100%; height: 350px; overflow: hidden; }
.project-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.portfolio-pair { display: flex; flex-direction: column; gap: 50px; width: 100%; overflow: hidden; }
.divider { width: 100%; height: 2px; background: #eee; }

.site-footer { display: flex; align-items: flex-start; gap: 50px; width: 800px; max-width: 100%; padding: 50px 50px 100px; }
.about, .contact { display: flex; flex: 1 0 0; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; max-width: 900px; }
h2 { color: #012; font-size: 16px; font-weight: 600; line-height: 1.6; }
p { color: #666; font-size: 16px; font-weight: 500; line-height: 1.6; }
.about p { width: 100%; overflow-wrap: break-word; }
.contact-details { position: sticky; bottom: 0; }

.reveal-pending { opacity: 0; transform: translateY(20px); }

@media (min-width: 810px) and (max-width: 1199.98px) {
  .site-header, .site-footer { padding: 50px; }
  .portfolio { width: 810px; }
  h1 { font-size: 40px; }
}

@media (max-width: 809.98px) {
  .site-header { padding: 30px; }
  h1 { font-size: 32px; }
  .portfolio { width: 810px; padding: 0 30px; gap: 30px; }
  .site-footer { flex-direction: column; padding: 30px 30px 100px; }
  .about, .contact { flex: none; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-pending { opacity: 1; transform: none; }
}