/* Responsive Masonry using CSS columns
   - Images live directly inside `#masonry` and will flow into columns
   - Fallback to single column on small screens
*/

:root{
  --gap:1rem;
  --bg:#fafafa;
  --text:#222;
  --muted:#666;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.35;
  padding:2rem;
}

/* Default paragraph spacing */
p{margin:0 0 1rem 0}

.bio{max-width:1200px;margin:0 auto 2rem auto;padding:1rem 0;text-align:left}
.bio h1{margin:.25rem 0 .5rem 0;font-weight:300}
.bio p{margin:0 0 1rem 0;color:var(--muted)}

/* Masonry container */
#masonry{
  column-gap:var(--gap);
  column-fill:balance;
  max-width:1200px;
  margin:0 auto 3rem auto;
}

/* Images inside masonry become column items */
#masonry img{
  width:100%;
  display:inline-block;
  break-inside:avoid;
  margin:0 0 var(--gap) 0;
  border-radius:8px;
  box-shadow:0 6px 18px rgba(20,20,20,0.12);
  transition:transform .25s ease, box-shadow .25s ease;
  object-fit:cover;
}

#masonry img:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 16px 34px rgba(20,20,20,0.18)}

/* Responsive column counts */
@media (max-width:699px){
  #masonry{column-count:1}
}
@media (min-width:700px) and (max-width:999px){
  #masonry{column-count:2}
}
@media (min-width:1000px){
  #masonry{column-count:3}
}

/* Accessibility focus */
#masonry img:focus{outline:3px solid rgba(0,120,212,0.25);outline-offset:3px}

/* Small visual header */
.site-header{max-width:980px;margin:0 auto 1.5rem auto;padding-bottom:.5rem}
.site-header h1{font-weight:300;margin:0}
.site-header .tag{color:var(--muted);margin-top:.25rem}

/* Print optimizations */
@media print{body{padding:0}#masonry{column-gap:.4rem}#masonry img{box-shadow:none;border-radius:2px}}