/* Reset & Body */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Roboto Mono', monospace; background:#fafafa; color:#111; line-height:1.6; scroll-behavior:smooth; }

/* Sticky Nav */
nav.sticky-nav {
  position: sticky; top:0; z-index:1000;
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 2rem; background:#fafafa; border-bottom:1px solid #eaeaea;
}
nav.sticky-nav a { text-decoration:none; color:#111; margin-left:2rem; transition:color 0.3s; }
nav.sticky-nav a:hover, nav.sticky-nav a.active { color:#ff4500; }

/* Filters */
.filters { display:flex; justify-content:center; margin:2rem 0; gap:1rem; flex-wrap:wrap; }
.filters button { padding:0.5rem 1rem; border:none; background:#eaeaea; cursor:pointer; transition:0.3s; }
.filters button.active, .filters button:hover { background:#ff4500; color:#fff; }

/* Grid */
.content-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:2rem; margin:3rem auto; padding:0 2rem; }
.grid-item { position:relative; overflow:hidden; cursor:pointer; }
.grid-item img, .grid-item video { width:100%; height:auto; object-fit:cover; transition: transform 0.5s ease; }
.grid-item:hover img, .grid-item:hover video { transform: scale(1.03) translateY(-2%); }

/* Caption */
.grid-item .caption { position:absolute; bottom:1rem; left:1rem; color:#fff; background:rgba(0,0,0,0.25); padding:0.5rem 1rem; border-radius:4px; font-size:0.9rem; opacity:0; transition:opacity 0.3s; }
.grid-item:hover .caption { opacity:1; }

/* Lightbox */
#lightbox{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);justify-content:center;align-items:center;z-index:2000;}
.lightbox-content{position:relative;max-width:90%;max-height:90%;}
.lightbox-content img, .lightbox-content video{width:100%;height:auto;border-radius:4px;}
.lightbox-content .close{position:absolute;top:10px;right:10px;font-size:2rem;color:#fff;cursor:pointer;}

/* Responsive */
@media(max-width:768px){ .content-grid{ grid-template-columns:1fr; padding:0 1rem; } }
@media(max-width:480px){ .grid-item .caption{ font-size:0.8rem; padding:0.4rem 0.8rem; } }