/* 2006-ish fixed-width dark theme */

body{
  background:#000;
  color:#eee;
  font:12px/16px Verdana, Arial, sans-serif;
  margin:0;
  padding:0;
}

a{ color:#bbb; text-decoration:underline; }
a:hover{ color:#ff4bb2; }

#wrapper{
  width:920px;
  margin:18px auto;
}

#header{
  border:1px solid #333;
  padding:10px;
  margin-bottom:14px;
}

.headerimg{
  display:block;
  width:100%;
  height:auto;
}

#brand{
  color:#ff4bb2;
  font-weight:bold;
  font-size:30px;
  letter-spacing:1px;
}

/* FORCE thumb grid everywhere */
.thumbgrid{
  display:grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 8px !important;
}

.thumbgrid a{
  display:block !important;
  margin:0 !important;         /* kill old inline spacing */
  border:1px solid #222 !important;
}

.thumbgrid img{
  display:block !important;
  width:100% !important;
  height:auto !important;
}

/* FORCE 3-wide on phones */
@media (max-width: 760px){
  .thumbgrid{
    grid-template-columns: repeat(3, 1fr) !important;
    gap:6px !important;
  }
}

/* STILL 3-wide on tiny phones */
@media (max-width: 420px){
  .thumbgrid{
    grid-template-columns: repeat(3, 1fr) !important;
    gap:6px !important;
  }
}


#tagline{
  color:#aaa;
  font-size:12px;
  margin-top:4px;
}

#main{
  display:flex;
  gap:18px;
}

#sidebar{
  width:255px;
}

#content{
  flex:1;
}

.box{
  border:1px solid #222;
  padding:10px;
  margin-bottom:14px;
}

.h{
  color:#fff;
  font-weight:bold;
  letter-spacing:1px;
  margin:0 0 8px 0;
  text-transform:uppercase;
  font-size:11px;
}

.small{ color:#888; font-size:11px; }

.searchbox{
  width:160px;
  background:#111;
  color:#eee;
  border:1px solid #333;
  padding:3px;
  font:12px Verdana, Arial, sans-serif;
}

.searchbtn{
  background:#111;
  color:#eee;
  border:1px solid #333;
  padding:3px 6px;
  font:12px Verdana, Arial, sans-serif;
}

.post{
  border:1px solid #222;
  padding:12px;
  margin-bottom:14px;
}

.post h2{
  margin:0 0 6px 0;
  font-size:16px;
  letter-spacing:1px;
  text-transform:uppercase;
}

.meta{
  color:#888;
  font-size:11px;
  margin-bottom:10px;
}

.intro{
  color:#ccc;
  margin:8px 0 12px 0;
}

.thumbgrid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:8px;
}

.thumbgrid a{
  display:block;
  border:1px solid #222;
}

.thumbgrid img{
  display:block;
  width:100%;
  height:auto;
}


.postbody{
  margin-top:12px;
  color:#ddd;
}

.postnav{
  margin-top:14px;
  color:#777;
  font-size:11px;
  display:flex;
  align-items:center;
}

.postnav .spacer{
  flex:1;
}

ul.list{
  list-style:none;
  padding-left:0;
  margin:0;
}

ul.list li{
  padding:5px 0;
  border-bottom:1px dotted #222;
}

.date{
  color:#777;
  font-family: "Courier New", Courier, monospace;
  font-size:11px;
  margin-right:6px;
}

.footer{
  color:#666;
  font-size:11px;
  margin-top:22px;
  text-align:center;
  padding:10px 0;
}

/* Homepage cover image */
.feedcover{
  display:block;
  width:100%;
  height:auto;
  margin-bottom:10px;
  border:1px solid #222;
}

/* Lightbox (simple, period-ish) */
#lbOverlay{
  display:none;
  position:fixed;
  left:0; top:0;
  width:100%; height:100%;
  background:#000;
  background:rgba(0,0,0,0.92);
  z-index:9999;
}

#lbFrame{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:92%;
  max-width:980px;
  text-align:center;
}

#lbImg{
  max-width:100%;
  max-height:85vh;
  border:1px solid #222;
}

#lbPrev, #lbNext, #lbClose{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-family: Arial, sans-serif;
  font-size:44px;
  color:#fff;
  text-decoration:none;
  padding:10px;
  opacity:0.85;
}

#lbPrev{ left:-10px; }
#lbNext{ right:-10px; }

#lbClose{
  top:-10px;
  right:-10px;
  transform:none;
  font-size:34px;
}

#lbCount{
  margin-top:8px;
  font:11px/14px "Courier New", Courier, monospace;
  color:#aaa;
}

.lbNoScroll{
  overflow:hidden;
}

/* --- Mobile / small screens --- */
@media (max-width: 980px){
  /* let wrapper shrink */
  #wrap, .wrap, #wrapper, .wrapper, #page, #container {
    width: auto !important;
    max-width: 920px;
    margin: 0 auto;
  }

  /* ensure big header images scale */
  .headerimg, .feedcover {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 760px){

  /* keep layout */
  #main{
    display:flex;
    gap:10px;
  }

  #sidebar{
    width:20% !important;
    min-width:90px;
  }

  #content{
    width:80% !important;
  }

  body{
    padding:10px;
  }

  .box{
    padding:8px;
  }

  #sidebar{
    font-size:12px;
    line-height:16px;
  }

  /* 🔥 Thumbnail grid: ALWAYS 3 across minimum */
  .thumbgrid{
    grid-template-columns: repeat(3, 1fr);
    gap:6px;
  }
}


  #sidebar{
    width:20% !important;
    min-width:90px;
  }

  #content{
    width:80% !important;
  }

  /* tighter spacing */
  body{
    padding:10px;
  }

  .box{
    padding:8px;
  }

  /* smaller sidebar text */
  #sidebar{
    font-size:12px;
    line-height:16px;
  }

  /* thumbnails adjust but still grid */
  .thumbgrid img{
    width:100%;
    height:auto;
  }
}