:root{
  --bg:#fff;
  --fg:#111;
  --muted:#8f8f8f;
  --muted2:#b9b9b9;
  --max:1400px;
  --gap:18px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* header */
.masthead{ padding:26px 22px 10px; }
.mast-inner{
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
}
.site-name{
  font-family:"GFS Didot", serif;
  font-size:56px;
  font-weight:400;
  letter-spacing:-0.03em;
  line-height:1;
  text-decoration:none;
  color:inherit;
}
.mast-nav{ display:flex; gap:48px; padding-top:8px; }
.mast-nav a{
  text-decoration:none;
  color:var(--fg);
  font-size:18px;
}
.mast-nav a.active{
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

/* page */
.page{
  max-width:var(--max);
  margin:0 auto;
  padding:0 22px 60px;
}

/* category divider */
.category-bar{
  margin-top:28px;
  margin-bottom:16px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
}
.cat{
  background:transparent;
  border:0;
  padding:0;
  font:inherit;
  cursor:pointer;
  color:var(--muted2);
}
.cat.active{ color:var(--muted); }
.cat:hover{ color:var(--muted); }
.slash{ color:var(--muted2); }

/* === THE GRID THAT REORGANIZES === */
.gallery{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 90px;          /* controls height rhythm */
  gap: var(--gap);
  grid-auto-flow: dense;         /* important: packs tiles nicely */
}

/* base tile */
.tile{
  position:relative;
  overflow:hidden;
  border-radius:0;               /* sharp */
  background:#f2f2f2;
  text-decoration:none;
  color:inherit;
  grid-column: span 4;           /* default size */
  grid-row: span 3;              /* default size */
}

/* Hide when filtered out */
.tile.is-hidden{ display:none; }

/* Big + Mid sizes */
.tile.is-big{
  grid-column: span 8;           /* biggest */
  grid-row: span 6;
}
.tile.is-mid{
  grid-column: span 4;           /* second biggest */
  grid-row: span 6;
}

/* media */
.tile img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1);
  transition: transform .35s ease;
}
.tile::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0);
  transition: background .25s ease;
}
.tile-meta{
  position:absolute;
  left:14px;
  right:14px;
  bottom:12px;
  opacity:0;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
  color:#fff;
}
.tile-title{
  font-family:"GFS Didot", serif;
  font-size:22px;
  letter-spacing:-0.02em;
}
.tile-sub{
  margin-top:4px;
  font-size:12px;
  opacity:.8;
}

/* hover */
.tile:hover img{ transform:scale(1.04); }
.tile:hover::after{ background: rgba(0,0,0,.25); }
.tile:hover .tile-meta{ opacity:1; transform: translateY(0); }

/* responsive */
@media (max-width: 980px){
  .site-name{ font-size:44px; }
  .mast-nav{ gap:26px; }

  .gallery{
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .tile, .tile.is-big, .tile.is-mid{
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
}