body{font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin:0; color:#111;}
.wrap{max-width:840px; margin:0 auto; padding:2rem;}
header{display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin-bottom:1rem;}
header h1{font-size:1.25rem; margin:0;}
nav a{margin-right:1rem; text-decoration:none;}
main h1,main h2{margin-top:2rem;}
code,kbd,pre{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;}
.home-row{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  margin-top: 1rem;
}

.home-left{
  flex: 1;
}

.home-right{
  flex-shrink: 0;
}

.profile-photo{
  max-width: 200px;   /* ← this stops it from being huge */
  width: 100%;
  height: auto;
  border-radius: 14px;
}
@media (max-width: 800px){
  .home-row{
    flex-direction: column;
  }
  .profile-photo{
    max-width: 200px;
    margin-top: 1rem;
  }
}
/* Profile photo on homepage */
.profile-photo{
  float: right;
  max-width: 220px;
  width: 35%;
  height: auto;
  margin: 0 0 1rem 2rem;
  border-radius: 14px;
}

/* Clear float so later sections don't wrap */
.clearfix::after{
  content:"";
  display:block;
  clear:both;
}

/* Masonry-style gallery */
.gallery-grid{
  max-width: 900px;        /* cap the gallery width */
  margin: 16px auto 0;     /* center it */
  padding: 0 12px;         /* a little breathing room */

  columns: 5 150px;        /* more columns + smaller min width */
  column-gap: 12px;
}

.gallery-item{
  break-inside: avoid;
  display: block;
  margin: 0 0 12px;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
}

.gallery-item img{
  width: 100%;
  height: auto;
  display: block;
}

.gallery-grid { outline: none; }