/* Typography */
body { font-family: "Georgia", "Times New Roman", serif; color:#1F1F1F; background:#FAF7F1; }
h1,h2,h3 { letter-spacing: .02em; color:#222; }
p { line-height: 1.7; }
/* Spacing */
.page, .project { max-width: 1100px; margin: 0 auto; padding: 48px 24px; }
.project-head { margin-bottom: 24px; }
/* Feature strip */
.feature-strip { display: grid; grid-template-columns: 1fr; gap: 16px; }
.feature { position: relative; display: block; overflow: hidden; }
.feature img { width: 100%; height: auto; display: block; filter: contrast(98%) saturate(90%); }
.feature-label { position: absolute; bottom: 16px; left: 16px; color:#fff; background: rgba(0,0,0,.35); padding: 10px 14px; border-radius: 2px; }
/* Grids */
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.tile { position: relative; display:block; background:#EDEAE3; }
.tile img { width:100%; height:auto; display:block; }
.tile-caption { position:absolute; left:14px; bottom:12px; color:#fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
/* Project */
.hero img { width:100%; height:auto; }
.two-col { display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.gallery { margin-top: 18px; display:grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.gallery img { width:100%; height:auto; }
/* Small screens */
@media (max-width: 860px){
.grid-3, .gallery, .two-col { grid-template-columns: 1fr; }
.page, .project { padding: 28px 16px; }
}