/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}
.zine-body{
  margin:0;
  color:#eee;
  background:#050505;
  font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.zine-locked{ height:100vh; overflow:hidden; }

.shell{
  height:100vh;
  display:flex;
  flex-direction:column;
  padding:18px;
  gap:14px;
}

.topbar{
  border:2px solid #eee;
  padding:14px;
  background: rgba(0,0,0,0.55);
}
.brand{ text-transform:uppercase; letter-spacing:2px; font-size:26px; }
.nav{ margin-top:10px; display:flex; flex-wrap:wrap; gap:10px; }
.nav a{
  color:#050505; background:#eee; border:2px solid #eee;
  padding:6px 10px; text-decoration:none; text-transform:uppercase;
  letter-spacing:1px; font-size:12px;
}
.nav a:hover{ filter: invert(1); }

.spread{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns: 1fr 1.2fr; /* left tiles, right hero */
  gap:14px;
}

.panel{
  border:2px solid #eee;
  background: rgba(0,0,0,0.55);
  min-height:0;
}

/* LEFT tiles */
.tiles{
  padding:12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  overflow:auto;
}
.tile{
  position:relative;
  display:block;
  height:170px;
  border:2px solid #eee;
  overflow:hidden;
  text-decoration:none;
}
.tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.tile span{
  position:absolute; left:10px; right:10px; bottom:10px;
  padding:6px 8px; border:2px solid #eee;
  background: rgba(0,0,0,0.75);
  color:#eee; text-transform:uppercase; letter-spacing:1px; font-size:12px;
}
.tile:hover span{ background:#eee; color:#050505; }

/* RIGHT hero image */
.hero{
  position:relative;
  background-image: url("/img/homepage.jpg");
  background-size: cover;
  background-position: center;
}

/* Bio overlay (scrolls internally if long) */
.biooverlay{
  position:absolute;
  inset:12px;
  border:2px solid #eee;
  background: rgba(0,0,0,0.65);
  padding:16px;
  overflow:auto;
}
.biooverlay h1{
  margin:10px 0 12px;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:16px;
}
.biooverlay p{ margin:0 0 12px; line-height:1.55; }

.stamp{
  display:inline-block;
  border:2px solid #eee;
  padding:4px 8px;
  text-transform:uppercase;
  letter-spacing:1px;
  transform: rotate(-1.5deg);
}

@media (max-width: 900px){
  .zine-locked{ overflow:auto; height:auto; }
  .shell{ height:auto; }
  .spread{ grid-template-columns: 1fr; }
  .tiles{ grid-template-columns: 1fr; }
  .tile{ height:200px; }
  .hero{ min-height: 60vh; }
}