* { box-sizing: border-box; }
body {
  margin: 0;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: #f4f4f4;
  background: #0f0f0f;
}
.wrap { max-width: 1100px; margin: 0 auto; padding: 24px; }
.small { font-size: 14px; color: #aaa; }

header { text-align: center; margin-bottom: 32px; }
h1 { font-weight: 600; letter-spacing: 1px; }
p { color: #ccc; }

/* Portfolio grid */
.portfolio {
  column-count: 3;
  column-gap: 12px;
}
.portfolio img{
  width:100%;
  height:auto;
  margin:0 0 12px;
  display:block;
  break-inside:avoid;
  object-fit:contain;   /* no cropping */
  background:#000;      /* thin letterbox when needed */
}
.portfolio img:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

@media (max-width: 900px) { .portfolio { column-count: 2; } }
@media (max-width: 560px) { .portfolio { column-count: 1; } }

footer { text-align: center; margin-top: 32px; color: #777; }
a { color: #f4f4f4; text-decoration: none; }
a:hover { text-decoration: underline; }