/* ============================================
   NEOCITIES SITE — GREYSCALE / B&W AESTHETIC
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box; /* include padding and border inside any width you set */
  margin: 0;              /* remove browser default margins on all elements */
  padding: 0;             /* remove browser default padding on all elements */
}

html, body {
  height: 100%; /* make the page fill the full window height */
}

body {
  background-color: #f0f0f0;
  background-image:
    repeating-linear-gradient(
      0deg,               /* direction: up */
      transparent 0px,   /* start of the transparent zone */
      transparent 3px,   /* end of the transparent zone */
      rgba(0,0,0,0.03) 3px,   /* sharp jump to faint dark line */
      rgba(0,0,0,0.03) 4px    /* end of tile — repeats from here */
    );
  color: #111;
  font-family: "Courier New", Courier, monospace;
  min-height: 100vh;
}

/* --- Site Header --- */
#site-header {
  background-color: #111;
  color: #f5f5f5;
  text-align: center;
  padding: 28px 20px 14px;
  border-bottom: 4px double #555;
  letter-spacing: 0.08em;
}

#site-header h1 {
  font-family: "Times New Roman", Times, serif;
  font-size: 2.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-shadow: 2px 2px 0 #444;
}

#site-header p {
  font-size: 0.75rem;
  color: #aaa;
  margin-top: 6px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --- Navigation Bar (below header) --- */
#site-nav {
  background-color: #222;
  border-bottom: 3px solid #000;
  display: flex;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}

#site-nav a {
  display: inline-block;
  padding: 10px 22px;
  color: #ccc;
  text-decoration: none;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-right: 1px solid #444;
  transition: background 0.15s, color 0.15s;
}

#site-nav a:first-child {
  border-left: 1px solid #444;
}

#site-nav a:hover {
  background-color: #f5f5f5;
  color: #111;
}

#site-nav a.active {
  background-color: #f5f5f5;
  color: #111;
  font-weight: bold;
}

/* --- Tab System --- */
.tab-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 5px;
}

/* Tab Buttons Row */
.tab-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 28px;
  border-bottom: 3px solid #111;
}

.tab-btn {
  background-color: #ddd;
  color: #111;
  border: 2px solid #111;
  border-bottom: none;
  padding: 9px 20px;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  margin-right: -2px;
  position: relative;
  top: 3px;
  transition: background 0.12s, color 0.12s;
}

.tab-btn:hover {
  background-color: #bbb;
}

.tab-btn.active {
  background-color: #f5f5f5;
  color: #000;
  font-weight: bold;
  z-index: 1;
  border-bottom: 3px solid #f5f5f5;
}

/* Tab Panels */
.tab-panel {
  display: none;
  padding: 30px 0 30px;
}

.tab-panel.active {
  display: block;
}

a.tab-btn {
  text-decoration: none;
}

/* --- Blog Entry Containers (hovering cards) --- */
.cards-wrapper {
  padding: 4px;
}

.cards-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.card {
  background-color: #fff;
  border: 2px solid #222;
  box-shadow: 5px 5px 0 #888, 6px 6px 0 #555;
  width: 100%;
  max-width: 680px;
  padding: 24px 28px;
  position: relative;
}

.card::before {
  content: "★";
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 0.7rem;
  color: #999;
}

.card h2 {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 10px;
  border-bottom: 1px dashed #bbb;
  padding-bottom: 7px;
  letter-spacing: 0.04em;
}

.card .entry-meta {
  font-size: 0.68rem;
  color: #888;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.card p {
  font-size: 0.88rem;
  line-height: 1.75;
  color: #222;
}

/* --- Footer --- */
#site-footer {
  background-color: #111;
  color: #666;
  text-align: center;
  padding: 16px;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-top: 4px double #444;
  margin-top: 10px;
}

#site-footer a {
  color: #aaa;
  text-decoration: none;
}

#site-footer a:hover {
  text-decoration: underline;
}

/* ============================================
   GALLERT PAGE (Gallery.html)
   ============================================ */

.gallery-page body {
  background-color: #f0f0f0;
}

/* Page wrapper for Gallery */
.gallery-wrapper {
  max-width: 1300px;
  margin: 0 auto;
  padding: 36px 40px 60px;
}

.gallery-title {
  font-family: "Times New Roman", Times, serif;
  font-size: 2.4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-align: center;
  margin-bottom: 8px;
  border-bottom: 3px double #111;
  padding-bottom: 16px;
}

.gallery-subtitle {
  text-align: center;
  font-size: 0.72rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 40px;
}

/* 4-column grid of square photo boxes */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.photo-box {
  aspect-ratio: 1 / 1;
  border: 2px solid #222;
  box-shadow: 4px 4px 0 #999;
  overflow: hidden;
  background-color: #ccc;
  position: relative;
}

.photo-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
  transition: filter 0.25s;
}

.photo-box img:hover {
  filter: grayscale(30%);
}

/* Placeholder shown when no image src is set */
.photo-box .placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 10px;
  border: 2px dashed #aaa;
  margin: 8px;
}

.photo-box .placeholder span {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 6px;
  color: #bbb;
}

/* --- Card Deck --- */
.deck {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
}

.deck-card {
  display: none;
  background-color: #fff;
  border: 2px solid #222;
  box-shadow: 5px 5px 0 #888, 6px 6px 0 #555;
  padding: 24px 28px;
  position: relative;
}

.deck-card::before {
  content: "★";
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 0.7rem;
  color: #999;
}

.deck-card.active {
  display: block;
}

.deck-card h2 {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 10px;
  border-bottom: 1px dashed #bbb;
  padding-bottom: 7px;
  letter-spacing: 0.04em;
}

.deck-card .entry-meta {
  font-size: 0.68rem;
  color: #888;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.deck-card p {
  font-size: 0.88rem;
  line-height: 1.75;
  color: #222;
}

.deck-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  border-top: 2px solid #111;
  padding-top: 10px;
}

.deck-controls button {
  background-color: #111;
  color: #f5f5f5;
  border: 2px solid #111;
  padding: 7px 18px;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.deck-controls button:hover {
  background-color: #f5f5f5;
  color: #111;
}

.deck-counter {
  font-size: 0.72rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}