:root {
  --bg: #f3f3f1;
  --text: #242424;
  --muted: #888;
  --gap: 12px;
  --pad: 6px;
  --font: Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  padding: 20px; /* Adjust left/right page margins */
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.25;
}
a { color: inherit; text-decoration: none; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px var(--pad) 14px;
  background: linear-gradient(var(--bg) 72%, rgba(243,243,241,0));
}
.site-name { font-size: 14px; }
.site-nav { display: flex; gap: 16px; }
.site-nav a:hover, .project-card:hover .project-title { text-decoration: underline; }

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 16px var(--gap);
  padding: 22px var(--pad) 40px;
}
.project-card { display: block; min-width: 0; }
.project-image {
  width: auto;
  display: block;
  overflow: hidden;
}
.project-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .35s ease;
}
.project-card:hover img { transform: scale(1.015); }

.portrait { aspect-ratio: 1 / 1.18; }
.landscape { aspect-ratio: 1.42 / 1; }
.square { aspect-ratio: 1 / 1; }
.tall { aspect-ratio: 1 / 1.45; }

.project-meta {
  display: flex;
  gap: 9px;
  padding-top: 7px;
  font-size: 11px;
}
.project-number { color: var(--text); }
.project-title { color: var(--text); }
.project-date { color: var(--muted); }

.project-page {
  max-width: 920px;
  margin: 0 auto;
  padding: 20px var(--pad) 70px;
}
.project-topline {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.back:hover { text-decoration: underline; }
.project-heading { margin: 0 0 26px; font-size: 14px; font-weight: normal; }
.artwork { margin-bottom: 12px; }
.artwork img {
  width: 100%;
  height: auto;
  display: block;
}
.artwork-caption {
  padding-top: 7px;
  font-size: 12px;
}
.artwork-caption span { color: var(--muted); }

.info-page {
  max-width: 720px;
  padding: 60px var(--pad);
}
.info-page h1 { font-size: 14px; font-weight: normal; margin: 0 0 26px; }
.info-page p { max-width: 540px; margin: 0 0 16px; }

.placeholder {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.placeholder::before,
.placeholder::after {
  content: "";
  position: absolute;
  inset: 10% 16%;
  border: 2px solid rgba(30,30,30,.18);
  transform: rotate(-8deg);
}
.placeholder::after {
  inset: 24% 7%;
  border-width: 10px;
  border-color: rgba(255,255,255,.72);
  transform: rotate(13deg);
}
.p1 { background: linear-gradient(135deg,#d8d7d0,#faf9f4 55%,#9c9d98); }
.p2 { background: radial-gradient(circle at 58% 46%,#114c63 0 9%,transparent 9.5%), radial-gradient(circle at 44% 56%,#0c2834 0 12%,transparent 12.5%), linear-gradient(145deg,#d9dad6,#f8f7f2); }
.p3 { background: linear-gradient(135deg,#f0efe8,#d8d5c9); }
.p4 { background: linear-gradient(145deg,#090909 0 10%,#efefea 10% 75%,#c6c4bb 75%); }
.p5 { background: linear-gradient(140deg,#aab9c2,#f6f3eb 40%,#8e9da5); }
.p6 { background: linear-gradient(135deg,#eceae3,#85847f 70%,#f4f3ef); }

@media (max-width: 760px) {
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 8px; }
  .site-header { padding-bottom: 10px; }
  .site-nav { gap: 10px; }
}
@media (max-width: 480px) {
  body { font-size: 12px; }
  .project-grid { grid-template-columns: 1fr; padding-top: 12px; }
  .project-image { aspect-ratio: 1.25 / 1; }
  .site-nav { gap: 8px; }
  .project-page { padding-top: 10px; }
}
/* Overrides forced aspect-ratio on project detail pages */
.project-page .portrait,
.project-page .landscape,
.project-page .square {
  aspect-ratio: auto !important;
}

.project-page .artwork {
  margin-bottom: 32px !important; /* Adjust this value to increase or decrease space between items */
}